feat(react-storybook-addon): implement custom sb addon

[Hotell]

Pre-requirements:

• chore(react-storybook-addon): bootstrap package #19247

Pull request checklist

• Addresses an existing issue: implements partially storybook: Implement custom fluentui storybook addon #19252
• [ ] Include a change request file using $ yarn change

Description of changes

• implements custom storybook addon to replace deprecated knobs

react-sb-addon-demo-early.mov

Focus areas to test

(optional)

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 6a28e3e4cc5660f3b77f311564a132344816c751 (build)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit f9aafed:

Sandbox	Source
Fluent UI React Starter	Configuration

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against 502b7758c2e102909d672452a5bfa024166e093f}

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	807	827	5000
BaseButton	mount	970	958	5000
Breadcrumb	mount	2550	2576	1000
ButtonNext	mount	443	441	5000
Checkbox	mount	1599	1574	5000
CheckboxBase	mount	1359	1357	5000
ChoiceGroup	mount	4930	4869	5000
ComboBox	mount	993	988	1000
CommandBar	mount	9994	9955	1000
ContextualMenu	mount	6181	6181	1000
DefaultButton	mount	1163	1142	5000
DetailsRow	mount	3826	3805	5000
DetailsRowFast	mount	3791	3848	5000
DetailsRowNoStyles	mount	3622	3605	5000
Dialog	mount	2144	2144	1000
DocumentCardTitle	mount	149	146	1000
Dropdown	mount	3334	3331	5000
FluentProviderNext	mount	6800	6899	5000
FocusTrapZone	mount	1789	1749	5000
FocusZone	mount	1762	1831	5000
IconButton	mount	1834	1782	5000
Label	mount	344	334	5000
Layer	mount	1851	1777	5000
Link	mount	489	489	5000
MakeStyles	mount	1716	1713	50000
MenuButton	mount	1506	1516	5000
MessageBar	mount	1936	1978	5000
Nav	mount	3287	3279	1000
OverflowSet	mount	1016	1020	5000
Panel	mount	2073	2083	1000
Persona	mount	791	836	1000
Pivot	mount	1437	1540	1000
PrimaryButton	mount	1322	1317	5000
Rating	mount	8091	8074	5000
SearchBox	mount	1384	1408	5000
Shimmer	mount	2665	2716	5000
Slider	mount	2037	2014	5000
SpinButton	mount	5045	5108	5000
Spinner	mount	434	404	5000
SplitButton	mount	3186	3203	5000
Stack	mount	498	533	5000
StackWithIntrinsicChildren	mount	1618	1601	5000
StackWithTextChildren	mount	4763	4731	5000
SwatchColorPicker	mount	10365	10333	5000
Tabs	mount	1466	1388	1000
TagPicker	mount	2680	2608	5000
TeachingBubble	mount	11619	11638	5000
Text	mount	431	423	5000
TextField	mount	1392	1421	5000
ThemeProvider	mount	1173	1173	5000
ThemeProvider	virtual-rerender	582	583	5000
Toggle	mount	816	800	5000
buttonNative	mount	102	114	5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ButtonMinimalPerf.default	189	170	1.11:1
RefMinimalPerf.default	241	218	1.11:1
TextMinimalPerf.default	373	348	1.07:1
ChatWithPopoverPerf.default	395	371	1.06:1
GridMinimalPerf.default	379	357	1.06:1
LabelMinimalPerf.default	410	388	1.06:1
LoaderMinimalPerf.default	745	701	1.06:1
SkeletonMinimalPerf.default	383	361	1.06:1
TooltipMinimalPerf.default	1089	1024	1.06:1
AnimationMinimalPerf.default	454	435	1.04:1
BoxMinimalPerf.default	374	360	1.04:1
ImageMinimalPerf.default	400	385	1.04:1
LayoutMinimalPerf.default	398	381	1.04:1
ListNestedPerf.default	602	581	1.04:1
MenuMinimalPerf.default	915	876	1.04:1
ProviderMinimalPerf.default	1022	980	1.04:1
ReactionMinimalPerf.default	392	377	1.04:1
SegmentMinimalPerf.default	374	359	1.04:1
DividerMinimalPerf.default	386	373	1.03:1
HeaderSlotsPerf.default	815	790	1.03:1
RadioGroupMinimalPerf.default	478	464	1.03:1
FormMinimalPerf.default	439	429	1.02:1
HeaderMinimalPerf.default	387	381	1.02:1
MenuButtonMinimalPerf.default	1749	1721	1.02:1
PortalMinimalPerf.default	164	160	1.02:1
SplitButtonMinimalPerf.default	3979	3893	1.02:1
TreeMinimalPerf.default	842	825	1.02:1
VideoMinimalPerf.default	696	684	1.02:1
CheckboxMinimalPerf.default	2796	2758	1.01:1
DatepickerMinimalPerf.default	5612	5541	1.01:1
DropdownManyItemsPerf.default	732	728	1.01:1
FlexMinimalPerf.default	297	294	1.01:1
ListWith60ListItems.default	667	659	1.01:1
PopupMinimalPerf.default	589	582	1.01:1
IconMinimalPerf.default	649	643	1.01:1
TableMinimalPerf.default	425	422	1.01:1
TextAreaMinimalPerf.default	535	532	1.01:1
CustomToolbarPrototype.default	3842	3795	1.01:1
TreeWith60ListItems.default	181	179	1.01:1
AttachmentSlotsPerf.default	1116	1115	1:1
ButtonOverridesMissPerf.default	1736	1728	1:1
ChatMinimalPerf.default	677	678	1:1
DropdownMinimalPerf.default	3114	3115	1:1
ItemLayoutMinimalPerf.default	1285	1289	1:1
StatusMinimalPerf.default	698	701	1:1
AccordionMinimalPerf.default	150	151	0.99:1
CarouselMinimalPerf.default	493	500	0.99:1
ListMinimalPerf.default	533	540	0.99:1
RosterPerf.default	1246	1263	0.99:1
ProviderMergeThemesPerf.default	1601	1610	0.99:1
TableManyItemsPerf.default	2017	2046	0.99:1
DialogMinimalPerf.default	783	802	0.98:1
EmbedMinimalPerf.default	4245	4322	0.98:1
InputMinimalPerf.default	1269	1294	0.98:1
SliderMinimalPerf.default	1546	1575	0.98:1
ToolbarMinimalPerf.default	968	988	0.98:1
AvatarMinimalPerf.default	200	208	0.96:1
ButtonSlotsPerf.default	568	592	0.96:1
CardMinimalPerf.default	592	616	0.96:1
ChatDuplicateMessagesPerf.default	297	309	0.96:1
AttachmentMinimalPerf.default	165	176	0.94:1
AlertMinimalPerf.default	277	302	0.92:1
ListCommonPerf.default	658	713	0.92:1

[Hotell]

most of the code copied and merged in #20346, thus closing