feat(react-storybook-addon-codesandbox): support various providers for "export to" functionality #29536

Hotell · 2023-10-16T14:50:57Z

Previous Behavior

our custom react-addon supports only codesanbox-browser with CRA

New Behavior

addon is configurable for 3 service providers via public api
- stackblitz cloud ( powered by web-containers )
- codesandbox browser ( we use this atm )
- codesandbox cloud ( powered by devcontainers )
indirect tight coupling has been remove and encapsulated within the package
- global css overrides
- addons Parameters type extension

Breaking changes:

addon configuration

-  exportToCodeSandbox: {
+  exportToSandbox: {
+    provider: 'codesandbox-browser',
+    bundler: 'cra',
    requiredDependencies: { ... },
    optionalDependencies: { ... },
-    indexTsx: dedent`...`,
  },

Demo showcase:

Follow-ups:

rename of the package to react-storybook-addon-export-to-sandbox
enable stackblitz for our public docsite demos as discussed on tech sync
add manager that will register babel plugin automatically with addon registration to sb config
- this addon doesn't have much funcionallity without the babel plugin

Related Issue(s)

Follows [Feature]: make v9 codesandbox demos fast #29435

…S and Stackblitz providers

…y for global SB Parameters extension

…irect API contract instead of living in global storybook config

fabricteam · 2023-10-16T15:03:21Z

Perf Analysis (`@fluentui/react-components`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	virtual-rerender-with-unmount	75	78	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	644	603	5000
Button	mount	321	316	5000
Field	mount	1121	1124	5000
FluentProvider	mount	688	691	5000
FluentProviderWithTheme	mount	78	75	10
FluentProviderWithTheme	virtual-rerender	61	65	10
FluentProviderWithTheme	virtual-rerender-with-unmount	75	78	10	Possible regression
InfoButton	mount	9	12	5000
MakeStyles	mount	839	868	50000
Persona	mount	1752	1722	5000
SpinButton	mount	1396	1349	5000

codesandbox-ci · 2023-10-16T15:03:57Z

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 354f22b:

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

fabricteam · 2023-10-16T15:03:59Z

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
FlexMinimalPerf.default	153	140	1.09:1
DropdownManyItemsPerf.default	408	377	1.08:1
AvatarMinimalPerf.default	108	101	1.07:1
ButtonMinimalPerf.default	91	85	1.07:1
AttachmentMinimalPerf.default	86	81	1.06:1
ChatMinimalPerf.default	437	414	1.06:1
HeaderSlotsPerf.default	466	439	1.06:1
ImageMinimalPerf.default	221	209	1.06:1
LayoutMinimalPerf.default	200	190	1.05:1
SplitButtonMinimalPerf.default	2274	2167	1.05:1
IconMinimalPerf.default	386	367	1.05:1
TextAreaMinimalPerf.default	291	276	1.05:1
ListCommonPerf.default	385	370	1.04:1
ListMinimalPerf.default	317	306	1.04:1
PortalMinimalPerf.default	87	84	1.04:1
VideoMinimalPerf.default	435	417	1.04:1
AlertMinimalPerf.default	153	149	1.03:1
EmbedMinimalPerf.default	1870	1820	1.03:1
ListNestedPerf.default	325	315	1.03:1
RosterPerf.default	1585	1543	1.03:1
ReactionMinimalPerf.default	215	208	1.03:1
TreeMinimalPerf.default	478	466	1.03:1
BoxMinimalPerf.default	190	186	1.02:1
CarouselMinimalPerf.default	266	261	1.02:1
HeaderMinimalPerf.default	206	201	1.02:1
MenuButtonMinimalPerf.default	948	932	1.02:1
RefMinimalPerf.default	107	105	1.02:1
AnimationMinimalPerf.default	301	297	1.01:1
ChatDuplicateMessagesPerf.default	145	143	1.01:1
DatepickerMinimalPerf.default	3502	3466	1.01:1
DialogMinimalPerf.default	437	434	1.01:1
FormMinimalPerf.default	224	222	1.01:1
InputMinimalPerf.default	528	521	1.01:1
ItemLayoutMinimalPerf.default	702	693	1.01:1
PopupMinimalPerf.default	345	341	1.01:1
ProviderMergeThemesPerf.default	635	631	1.01:1
TableMinimalPerf.default	232	230	1.01:1
CustomToolbarPrototype.default	1472	1452	1.01:1
ButtonOverridesMissPerf.default	633	635	1:1
CheckboxMinimalPerf.default	1116	1117	1:1
RadioGroupMinimalPerf.default	250	251	1:1
SliderMinimalPerf.default	726	729	1:1
TableManyItemsPerf.default	1084	1079	1:1
AttachmentSlotsPerf.default	627	635	0.99:1
DropdownMinimalPerf.default	1387	1399	0.99:1
GridMinimalPerf.default	184	185	0.99:1
SegmentMinimalPerf.default	196	197	0.99:1
TextMinimalPerf.default	189	191	0.99:1
ToolbarMinimalPerf.default	523	526	0.99:1
AccordionMinimalPerf.default	79	81	0.98:1
CardMinimalPerf.default	302	307	0.98:1
TooltipMinimalPerf.default	1236	1266	0.98:1
LoaderMinimalPerf.default	188	194	0.97:1
SkeletonMinimalPerf.default	191	196	0.97:1
ChatWithPopoverPerf.default	184	192	0.96:1
LabelMinimalPerf.default	213	222	0.96:1
MenuMinimalPerf.default	476	496	0.96:1
ListWith60ListItems.default	331	349	0.95:1
ProviderMinimalPerf.default	198	208	0.95:1
StatusMinimalPerf.default	379	401	0.95:1
ButtonSlotsPerf.default	310	331	0.94:1
TreeWith60ListItems.default	77	84	0.92:1
DividerMinimalPerf.default	192	210	0.91:1

fabricteam · 2023-10-16T15:05:26Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2023-10-16T15:09:50Z

🕵 FluentUIV0 No visual regressions between this PR and main

…m factory

size-auditor · 2023-10-16T15:12:30Z

Asset size changes

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

Baseline commit: 566e507c8882f76d2848dbec7785a317fa9c9982 (build)

fabricteam · 2023-10-16T15:14:01Z

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam · 2023-10-16T15:14:26Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	625	618	5000
Breadcrumb	mount	1657	1690	1000
Checkbox	mount	1660	1695	5000
CheckboxBase	mount	1484	1436	5000
ChoiceGroup	mount	2941	2883	5000
ComboBox	mount	648	663	1000
CommandBar	mount	6179	6210	1000
ContextualMenu	mount	13078	13402	1000
DefaultButton	mount	751	745	5000
DetailsRow	mount	2131	2159	5000
DetailsRowFast	mount	2188	2175	5000
DetailsRowNoStyles	mount	2005	1996	5000
Dialog	mount	2774	2667	1000
DocumentCardTitle	mount	223	237	1000
Dropdown	mount	1979	1989	5000
FocusTrapZone	mount	1116	1116	5000
FocusZone	mount	1090	1064	5000
GroupedList	mount	40985	41115	2
GroupedList	virtual-rerender	19600	19699	2
GroupedList	virtual-rerender-with-unmount	50449	50249	2
GroupedListV2	mount	225	227	2
GroupedListV2	virtual-rerender	211	207	2
GroupedListV2	virtual-rerender-with-unmount	235	227	2
IconButton	mount	1070	1064	5000
Label	mount	341	341	5000
Layer	mount	2713	2710	5000
Link	mount	388	386	5000
MenuButton	mount	927	912	5000
MessageBar	mount	21522	21450	5000
Nav	mount	1911	1942	1000
OverflowSet	mount	797	761	5000
Panel	mount	1748	1753	1000
Persona	mount	726	729	1000
Pivot	mount	856	856	1000
PrimaryButton	mount	833	843	5000
Rating	mount	4515	4550	5000
SearchBox	mount	917	926	5000
Shimmer	mount	1828	1859	5000
Slider	mount	1327	1324	5000
SpinButton	mount	2796	2841	5000
Spinner	mount	377	376	5000
SplitButton	mount	1851	1774	5000
Stack	mount	401	397	5000
StackWithIntrinsicChildren	mount	866	875	5000
StackWithTextChildren	mount	2634	2604	5000
SwatchColorPicker	mount	5992	5978	5000
TagPicker	mount	1431	1414	5000
Text	mount	362	369	5000
TextField	mount	925	913	5000
ThemeProvider	mount	854	817	5000
ThemeProvider	virtual-rerender	592	586	5000
ThemeProvider	virtual-rerender-with-unmount	1262	1278	5000
Toggle	mount	599	599	5000
buttonNative	mount	190	189	5000

fabricteam · 2023-10-16T15:45:27Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `330 B`
`global-context` createContextSelector	`537 B` `342 B`
`priority-overflow` createOverflowManager	`4.162 kB` `1.735 kB`
`react-accordion` Accordion (including children components)	`93.227 kB` `28.402 kB`
`react-alert` Alert	`84.293 kB` `23.456 kB`
`react-avatar` Avatar	`50.534 kB` `15.923 kB`
`react-avatar` AvatarGroup	`20.064 kB` `7.894 kB`
`react-avatar` AvatarGroupItem	`65.19 kB` `20.259 kB`
`react-badge` Badge	`27.264 kB` `8.808 kB`
`react-badge` CounterBadge	`28.165 kB` `9.101 kB`
`react-badge` PresenceBadge	`25.67 kB` `9.313 kB`
`react-button` Button	`40.074 kB` `11.292 kB`
`react-button` CompoundButton	`47.43 kB` `12.787 kB`
`react-button` MenuButton	`44.848 kB` `12.668 kB`
`react-button` SplitButton	`52.862 kB` `14.254 kB`
`react-button` ToggleButton	`57.122 kB` `13.194 kB`
`react-card` Card - All	`93.032 kB` `26.934 kB`
`react-card` Card	`87.856 kB` `25.435 kB`
`react-card` CardFooter	`13.423 kB` `5.481 kB`
`react-card` CardHeader	`15.666 kB` `6.235 kB`
`react-card` CardPreview	`14.374 kB` `5.854 kB`
`react-checkbox` Checkbox	`37.505 kB` `12.327 kB`
`react-combobox` Combobox (including child components)	`91.84 kB` `29.937 kB`
`react-combobox` Dropdown (including child components)	`90.282 kB` `29.595 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`70.061 kB` `20.164 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`207.809 kB` `59.71 kB`
`react-components` react-components: FluentProvider & webLightTheme	`42.345 kB` `13.999 kB`
`react-datepicker-compat` DatePicker Compat	`212.163 kB` `59.148 kB`
`react-dialog` Dialog (including children components)	`89.781 kB` `26.759 kB`
`react-divider` Divider	`21.179 kB` `7.839 kB`
`react-field` Field	`22.788 kB` `8.639 kB`
`react-image` Image	`16.096 kB` `6.317 kB`
`react-infobutton` InfoButton	`130.581 kB` `41.108 kB`
`react-infobutton` InfoLabel	`134.265 kB` `42.271 kB`
`react-input` Input	`27.247 kB` `9.194 kB`
`react-jsx-runtime` Classic Pragma	`1.049 kB` `531 B`
`react-jsx-runtime` JSX Dev Runtime	`4.14 kB` `1.741 kB`
`react-jsx-runtime` JSX Runtime	`4.734 kB` `1.983 kB`
`react-label` Label	`14.508 kB` `5.857 kB`
`react-link` Link	`17.4 kB` `6.977 kB`
`react-menu` Menu (including children components)	`140.404 kB` `43.358 kB`
`react-menu` Menu (including selectable components)	`143.09 kB` `43.871 kB`
`react-message-bar` MessageBar (all components)	`25.54 kB` `9.102 kB`
`react-overflow` hooks only	`12.419 kB` `4.687 kB`
`react-persona` Persona	`57.425 kB` `17.798 kB`
`react-popover` Popover	`119.313 kB` `37.636 kB`
`react-portal` Portal	`12.458 kB` `4.537 kB`
`react-portal-compat` PortalCompatProvider	`6.706 kB` `2.25 kB`
`react-positioning` usePositioning	`25.305 kB` `9.162 kB`
`react-progress` ProgressBar	`17.788 kB` `6.986 kB`
`react-provider` FluentProvider	`22.89 kB` `8.428 kB`
`react-radio` Radio	`31.266 kB` `10.267 kB`
`react-radio` RadioGroup	`15.704 kB` `6.35 kB`
`react-select` Select	`28.968 kB` `10.269 kB`
`react-slider` Slider	`38.349 kB` `12.595 kB`
`react-spinbutton` SpinButton	`37.133 kB` `11.856 kB`
`react-spinner` Spinner	`23.762 kB` `8.556 kB`
`react-switch` Switch	`33.731 kB` `10.899 kB`
`react-table` DataGrid	`157.173 kB` `43.847 kB`
`react-table` Table (Primitives only)	`44 kB` `13.758 kB`
`react-table` Table as DataGrid	`130.468 kB` `35.186 kB`
`react-table` Table (Selection only)	`75.836 kB` `20.473 kB`
`react-table` Table (Sort only)	`74.443 kB` `20.073 kB`
`react-tags` InteractionTag	`15.618 kB` `6.152 kB`
`react-tags` Tag	`30.341 kB` `9.505 kB`
`react-tags` TagGroup	`74.06 kB` `22.091 kB`
`react-text` Text - Default	`17.065 kB` `6.645 kB`
`react-text` Text - Wrappers	`20.237 kB` `6.965 kB`
`react-textarea` Textarea	`31.306 kB` `10.549 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`34.611 kB` `7.295 kB`
`react-theme` Teams: Light theme	`19.282 kB` `5.486 kB`
`react-toast` Toast (including Toaster)	`92.681 kB` `27.76 kB`
`react-tooltip` Tooltip	`52.525 kB` `18.46 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 566e507c8882f76d2848dbec7785a317fa9c9982}

packages/react-components/react-storybook-addon-codesandbox/src/getDependencies.test.ts

packages/react-components/react-storybook-addon-codesandbox/src/getDependencies.ts

packages/react-components/react-storybook-addon-codesandbox/src/sandbox-factory.spec.ts

packages/react-components/react-storybook-addon-codesandbox/src/sandbox-utils.ts

* master: (48 commits) fix(react-drawer): regression with mountNode prop not available after refactoring (microsoft#29524) feat(react-storybook-addon-codesandbox): support various providers for "export to" functionality (microsoft#29536) feat(TimePicker-compat): call onTimeSelect on blur (microsoft#29597) feat: (breadcrumb) Removed appearance prop (microsoft#29554) chore(deps): bump fsevents from 1.2.9 to 1.2.13 (microsoft#29476) Adding comment in Hovercard that we support cumulative area chart currently (microsoft#29395) applying package updates applying package updates chore(vr-tests-react-components, perf-tests-app): Remove infobutton from vr-tests and perf test app (microsoft#29603) docs: Add guidance for modifying textarea's height. (microsoft#29601) fix(react-calendar-compat): Classnames removed and added to day cells need to be split instead of providing a string with spaces (microsoft#29611) [Part 2] Changes to onboard charting to fluent docsite (microsoft#29608) chore: bump jest to 29.7.0 (microsoft#29298) applying package updates feat(react-infolabel, react-components): Release InfoLabel to stable (microsoft#29585) feat(react-datepicker-compat): Update DatePicker to use react-calendar-compat (microsoft#29587) feat: adds motion to DialogSurface (microsoft#29391) fix: Use correct target windows for ResizeObserver (microsoft#29551) chg (microsoft#29592) Fix missing x callout custom callout (microsoft#29547) ...

Hotell added 3 commits October 16, 2023 16:12

feat(storybook-addon-codesandbox): make addon configurable for both C…

00dfce2

…S and Stackblitz providers

feat(.storybook): use react-storybook-addon-codesandbox types directl…

d71bd72

…y for global SB Parameters extension

feat(react-storybook-addon-codesandbox): make css style overrides a d…

bc103c7

…irect API contract instead of living in global storybook config

github-actions bot added this to the October Project Cycle Q4 2023 milestone Oct 16, 2023

Hotell added Area: Build System Fluent UI react-components (v9) Storybook labels Oct 16, 2023

Hotell changed the title ~~feat(react-storybook-addon-codesandbox): make "export to" functionality pluggable and add 2 additional providers~~ feat(react-storybook-addon-codesandbox): support various providers for "export to" functionality Oct 16, 2023

refactor: rename files/tokens and expose only addDemoActionButton fro…

17a6c55

…m factory

test(storybook-addon-codesandbox): add factory coverage

87ad2da

Hotell commented Oct 17, 2023

View reviewed changes

packages/react-components/react-storybook-addon-codesandbox/src/getDependencies.test.ts Show resolved Hide resolved

Hotell commented Oct 17, 2023

View reviewed changes

packages/react-components/react-storybook-addon-codesandbox/src/getDependencies.ts Show resolved Hide resolved

Hotell commented Oct 17, 2023

View reviewed changes

packages/react-components/react-storybook-addon-codesandbox/src/sandbox-factory.spec.ts Show resolved Hide resolved

Hotell commented Oct 17, 2023

View reviewed changes

packages/react-components/react-storybook-addon-codesandbox/src/sandbox-utils.ts Show resolved Hide resolved

style: remove commented code in tests

354f22b

Hotell marked this pull request as ready for review October 17, 2023 10:46

Hotell requested a review from a team as a code owner October 17, 2023 10:46

tudorpopams self-requested a review October 17, 2023 12:17

Hotell requested a review from ling1726 October 17, 2023 13:48

tudorpopams requested a review from marcosmoura October 19, 2023 12:22

tudorpopams approved these changes Oct 24, 2023

View reviewed changes

Hotell merged commit 6746861 into microsoft:master Oct 24, 2023

This was referenced Oct 25, 2023

chore: rename package from react-storybook-addon-codesandbox to react-storybook-addon-export-to-sandbox #29647

Merged

feat(react-storybook-addon-export-to-sandbox): make addon generic so it can be published and used outside this repo #29674

Merged

Hotell mentioned this pull request Mar 12, 2024

[Feature]: make v9 codesandbox demos fast #29435

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(react-storybook-addon-codesandbox): support various providers for "export to" functionality #29536

feat(react-storybook-addon-codesandbox): support various providers for "export to" functionality #29536

Uh oh!

Hotell commented Oct 16, 2023 •

edited

Loading

Uh oh!

fabricteam commented Oct 16, 2023 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Oct 16, 2023 •

edited

Loading

Uh oh!

fabricteam commented Oct 16, 2023 •

edited

Loading

Uh oh!

fabricteam commented Oct 16, 2023 •

edited

Loading

Uh oh!

fabricteam commented Oct 16, 2023 •

edited

Loading

Uh oh!

size-auditor bot commented Oct 16, 2023 •

edited

Loading

Uh oh!

fabricteam commented Oct 16, 2023 •

edited

Loading

Uh oh!

fabricteam commented Oct 16, 2023 •

edited

Loading

Uh oh!

fabricteam commented Oct 16, 2023 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

feat(react-storybook-addon-codesandbox): support various providers for "export to" functionality #29536

feat(react-storybook-addon-codesandbox): support various providers for "export to" functionality #29536

Uh oh!

Conversation

Hotell commented Oct 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

fabricteam commented Oct 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

codesandbox-ci bot commented Oct 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Oct 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-northstar)

Uh oh!

fabricteam commented Oct 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv8 No visual regressions between this PR and main

Uh oh!

fabricteam commented Oct 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 FluentUIV0 No visual regressions between this PR and main

Uh oh!

size-auditor bot commented Oct 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Oct 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

fabricteam commented Oct 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

fabricteam commented Oct 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Hotell commented Oct 16, 2023 •

edited

Loading

fabricteam commented Oct 16, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

codesandbox-ci bot commented Oct 16, 2023 •

edited

Loading

fabricteam commented Oct 16, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react-northstar`)

fabricteam commented Oct 16, 2023 •

edited

Loading

fabricteam commented Oct 16, 2023 •

edited

Loading

size-auditor bot commented Oct 16, 2023 •

edited

Loading

fabricteam commented Oct 16, 2023 •

edited

Loading

fabricteam commented Oct 16, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Oct 16, 2023 •

edited

Loading