feat: port codesandbox addon

[ling1726]

Fixes #26780

[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 42edd6a:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[size-auditor]

Asset size changes

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

Baseline commit: 708575027e2b6b06d778f719c2ef5a53fe4c762c (build)

[fabricteam]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	1697	1681	5000
Button	mount	1141	1145	5000
Field	mount	2626	2591	5000
FluentProvider	mount	1972	1966	5000
FluentProviderWithTheme	mount	732	722	10
FluentProviderWithTheme	virtual-rerender	670	690	10
FluentProviderWithTheme	virtual-rerender-with-unmount	743	732	10
InfoButton	mount	660	645	5000
MakeStyles	mount	2258	2259	50000
Persona	mount	3961	3880	5000
SpinButton	mount	3241	3217	5000

[fabricteam]

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
global-context createContext	533 B 341 B
global-context createContextSelector	554 B 348 B
priority-overflow createOverflowManager	3.194 kB 1.314 kB
react-accordion Accordion (including children components)	85.876 kB 26.019 kB
react-alert Alert	87.465 kB 21.569 kB
react-avatar Avatar	51.192 kB 14.043 kB
react-avatar AvatarGroup	15.42 kB 6.167 kB
react-avatar AvatarGroupItem	67.414 kB 18.551 kB
react-badge Badge	23.113 kB 7.069 kB
react-badge CounterBadge	24.002 kB 7.374 kB
react-badge PresenceBadge	25.438 kB 7.254 kB
react-button Button	36.888 kB 9.412 kB
react-button CompoundButton	44.063 kB 10.885 kB
react-button MenuButton	41.568 kB 10.742 kB
react-button SplitButton	49.997 kB 12.321 kB
react-button ToggleButton	55.252 kB 11.331 kB
react-card Card - All	83.376 kB 23.862 kB
react-card Card	78.145 kB 22.401 kB
react-card CardFooter	9.045 kB 3.806 kB
react-card CardHeader	10.984 kB 4.509 kB
react-card CardPreview	9.852 kB 4.159 kB
react-checkbox Checkbox	33.091 kB 10.319 kB
react-checkbox CheckboxField	39.996 kB 12.206 kB
react-combobox Combobox (including child components)	85.255 kB 27.351 kB
react-combobox ComboboxField	81.672 kB 27.142 kB
react-combobox Dropdown (including child components)	83.942 kB 27.105 kB
react-components react-components: Button, FluentProvider & webLightTheme	64.09 kB 17.544 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	201.945 kB 56.256 kB
react-components react-components: FluentProvider & webLightTheme	35.049 kB 11.533 kB
react-dialog Dialog (including children components)	89.719 kB 26.685 kB
react-divider Divider	17.11 kB 6.18 kB
react-field Field	17.673 kB 6.543 kB
react-image Image	11.259 kB 4.473 kB
react-infobutton InfoButton	127.151 kB 38.718 kB
react-input Input	23.89 kB 7.246 kB
react-input InputField	33.626 kB 10.099 kB
react-label Label	9.822 kB 4.066 kB
react-link Link	12.306 kB 5.073 kB
react-menu Menu (including children components)	126.501 kB 38.723 kB
react-menu Menu (including selectable components)	129.57 kB 39.237 kB
react-overflow hooks only	11.214 kB 4.271 kB
react-persona Persona	58.207 kB 15.986 kB
react-popover Popover	114.224 kB 35.164 kB
react-portal Portal	11.377 kB 4.179 kB
react-portal-compat PortalCompatProvider	6.324 kB 2.129 kB
react-positioning usePositioning	22.951 kB 8.521 kB
react-progress ProgressBar	13.59 kB 5.24 kB
react-progress ProgressField	23.885 kB 8.385 kB
react-provider FluentProvider	17.116 kB 6.332 kB
react-radio Radio	32.676 kB 10.616 kB
react-radio RadioGroup	14.885 kB 5.933 kB
react-radio RadioGroupField	24.963 kB 9.07 kB
react-select Select	24.145 kB 8.271 kB
react-select SelectField	33.384 kB 10.779 kB
react-slider Slider	33.091 kB 10.555 kB
react-slider SliderField	42.922 kB 13.465 kB
react-spinbutton SpinButton	44.079 kB 12.356 kB
react-spinbutton SpinButtonField	53.015 kB 14.806 kB
react-spinner Spinner	20.62 kB 6.682 kB
react-switch Switch	28.225 kB 8.755 kB
react-switch SwitchField	35.01 kB 10.655 kB
react-table DataGrid	143.529 kB 39.134 kB
react-table Table (Primitives only)	43.776 kB 12.063 kB
react-table Table as DataGrid	134.29 kB 34.471 kB
react-table Table (Selection only)	82.208 kB 20.536 kB
react-table Table (Sort only)	81.637 kB 20.386 kB
react-text Text - Default	12.261 kB 4.819 kB
react-text Text - Wrappers	15.571 kB 5.23 kB
react-textarea Textarea	26.336 kB 8.585 kB
react-textarea TextareaField	36.537 kB 11.504 kB
react-theme Single theme token import	69 B 89 B
react-theme Teams: all themes	30.908 kB 6.714 kB
react-theme Teams: Light theme	17.776 kB 5.141 kB
react-tooltip Tooltip	46.061 kB 16.131 kB
react-utilities SSRProvider	180 B 159 B

_{🤖 This report was generated against 708575027e2b6b06d778f719c2ef5a53fe4c762c}

[fabricteam]

Perf Analysis (@fluentui/react-northstar)

⚠️ No perf measurements available

[fabricteam]

🕵 fluentuiv9 No visual regressions between this PR and main

[fabricteam]

🕵 FluentUI-v0 No visual regressions between this PR and main

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	1205	1203	5000
Breadcrumb	mount	2792	2799	1000
Checkbox	mount	2634	2638	5000
CheckboxBase	mount	2360	2376	5000
ChoiceGroup	mount	4307	4261	5000
ComboBox	mount	1175	1199	1000
CommandBar	mount	9358	9286	1000
ContextualMenu	mount	12332	12201	1000
DefaultButton	mount	1363	1357	5000
DetailsRow	mount	3192	3240	5000
DetailsRowFast	mount	3232	3248	5000
DetailsRowNoStyles	mount	3110	3082	5000
Dialog	mount	2923	2951	1000
DocumentCardTitle	mount	579	575	1000
Dropdown	mount	3152	3148	5000
FocusTrapZone	mount	1965	1977	5000
FocusZone	mount	1906	1958	5000
GroupedList	mount	46783	52012	2
GroupedList	virtual-rerender	22084	22592	2
GroupedList	virtual-rerender-with-unmount	79861	80706	2
GroupedListV2	mount	559	555	2
GroupedListV2	virtual-rerender	539	533	2
GroupedListV2	virtual-rerender-with-unmount	546	539	2
IconButton	mount	1772	1803	5000
Label	mount	751	740	5000
Layer	mount	4194	4183	5000
Link	mount	853	847	5000
MenuButton	mount	1605	1593	5000
MessageBar	mount	2350	2340	5000
Nav	mount	3056	3047	1000
OverflowSet	mount	1404	1422	5000
Panel	mount	2478	2495	1000
Persona	mount	1284	1302	1000
Pivot	mount	1517	1509	1000
PrimaryButton	mount	1481	1480	5000
Rating	mount	6919	6878	5000
SearchBox	mount	1494	1512	5000
Shimmer	mount	2902	2913	5000
Slider	mount	2121	2132	5000
SpinButton	mount	4310	4284	5000
Spinner	mount	835	823	5000
SplitButton	mount	2817	2835	5000
Stack	mount	864	868	5000
StackWithIntrinsicChildren	mount	2250	2270	5000
StackWithTextChildren	mount	4909	4910	5000
SwatchColorPicker	mount	9425	9481	5000
TagPicker	mount	2312	2304	5000
TeachingBubble	mount	74702	78390	5000
Text	mount	817	817	5000
TextField	mount	1550	1556	5000
ThemeProvider	mount	1451	1434	5000
ThemeProvider	virtual-rerender	1134	1131	5000
ThemeProvider	virtual-rerender-with-unmount	2005	2010	5000
Toggle	mount	1141	1122	5000
buttonNative	mount	537	537	5000