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

Hotell · 2023-10-27T13:08:24Z

Pre-requirements

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

Previous Behavior

export-to-sandbox addon
- was relying on hardcoded logic within repo which made it impossible to publish and share
- without babel fullsource plugin it was useless but the contract was not in the api

New Behavior

export-to-sandbox addon is now generic package that can be published to npm and consumed by others

NOTE:
css declaration that overrides the whole Show Code container needs to be redone as a follow - up

example of usage in other repo:

// @filename .storybook/main.js
module.exports = {
  stories: [],
  addons: [
   '@storybook/addon-essentials',
   { 
     name: '@fluentui/react-storybook-addon-export-to-sandbox',
     options: {
        // user needs to provide mappings contract for their library
        importMappings: getImportMappingsForExportToSandboxAddon(),
        // this is optional, we need to use it internally in order to ignore griffel babel plugin
        babelLoaderOptionsUpdater: processBabelLoaderOptions,
        // this is optional, user can tweak patterns etc that should be processed by underlying babel fullsource plugin
        webpackRule: {
          test: /\.stories\.tsx$/,
          include: /stories/,
        }.
     }
    }
  ]
};

// @filename .storybook/preview.js

export const parameters = {
  exportToSandbox: {
    provider: 'codesandbox-browser',
    bundler: 'cra',
    requiredDependencies: {
      // for React
      react: '^17',
      'react-dom': '^17',
      // necessary for FluentProvider:
      '@fluentui/react-components': '^9.0.0',
    },
    optionalDependencies: {
      '@fluentui/react-icons': 'latest',
    },
  },
}

how ?:

export-to-sandbox addon:
- now declares explicit public api to configure preset ( webpack setup )
  - import mappings created by fullsource babel plugin under the hood
  - webpackRule to tweak how the babel-loader is being registered
  - babelOptions callback to be able to disable particular .babelrc.json user definded presets/plugins
- fullsource babe plugin is now a dependency to properly define the contract/functionality
"no-build needed" dev-loop within monorepo works as we leverage behind the scenes generated preset.ts 🔥

Related Issue(s)

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

fabricteam · 2023-10-27T13:18:56Z

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

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

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	621	647	5000
Button	mount	323	303	5000
Field	mount	1155	1119	5000
FluentProvider	mount	700	710	5000
FluentProviderWithTheme	mount	79	89	10
FluentProviderWithTheme	virtual-rerender	68	63	10
FluentProviderWithTheme	virtual-rerender-with-unmount	71	79	10	Possible regression
MakeStyles	mount	844	842	50000
Persona	mount	1825	1718	5000
SpinButton	mount	1389	1396	5000

codesandbox-ci · 2023-10-27T13:22:43Z

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 44f52b4:

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

fabricteam · 2023-10-27T13:23:42Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2023-10-27T13:23:48Z

📊 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.341 kB` `1.81 kB`
`react-accordion` Accordion (including children components)	`92.983 kB` `28.418 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-calendar-compat` Calendar Compat	`141.324 kB` `36.821 kB`
`react-card` Card - All	`92.955 kB` `26.977 kB`
`react-card` Card	`87.781 kB` `25.462 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)	`92.033 kB` `30.008 kB`
`react-combobox` Dropdown (including child components)	`90.475 kB` `29.668 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`70.007 kB` `20.164 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`207.417 kB` `59.289 kB`
`react-components` react-components: FluentProvider & webLightTheme	`42.291 kB` `14.005 kB`
`react-datepicker-compat` DatePicker Compat	`212.494 kB` `59.326 kB`
`react-dialog` Dialog (including children components)	`94.473 kB` `28.28 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.729 kB` `41.194 kB`
`react-infobutton` InfoLabel	`134.413 kB` `42.351 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.176 kB` `43.004 kB`
`react-menu` Menu (including selectable components)	`142.862 kB` `43.51 kB`
`react-message-bar` MessageBar (all components)	`25.54 kB` `9.102 kB`
`react-overflow` hooks only	`12.598 kB` `4.754 kB`
`react-persona` Persona	`57.425 kB` `17.798 kB`
`react-popover` Popover	`119.46 kB` `37.714 kB`
`react-portal` Portal	`12.4 kB` `4.541 kB`
`react-portal-compat` PortalCompatProvider	`6.651 kB` `2.252 kB`
`react-positioning` usePositioning	`25.305 kB` `9.162 kB`
`react-progress` ProgressBar	`17.788 kB` `6.986 kB`
`react-provider` FluentProvider	`22.831 kB` `8.429 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.084 kB` `43.906 kB`
`react-table` Table (Primitives only)	`43.941 kB` `13.76 kB`
`react-table` Table as DataGrid	`130.165 kB` `35.174 kB`
`react-table` Table (Selection only)	`75.777 kB` `20.477 kB`
`react-table` Table (Sort only)	`74.384 kB` `20.075 kB`
`react-tags` InteractionTag	`15.618 kB` `6.152 kB`
`react-tags` Tag	`30.341 kB` `9.505 kB`
`react-tags` TagGroup	`73.816 kB` `22.097 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.616 kB` `7.299 kB`
`react-theme` Teams: Light theme	`19.287 kB` `5.49 kB`
`react-toast` Toast (including Toaster)	`92.725 kB` `27.876 kB`
`react-tooltip` Tooltip	`52.466 kB` `18.466 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against b137c8c4c52ef7a73a48a36bc93fbb4863ef67dc}

fabricteam · 2023-10-27T13:24:04Z

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

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
AccordionMinimalPerf.default	81	81	1:1	analysis

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
TextMinimalPerf.default	202	185	1.09:1
CardMinimalPerf.default	331	307	1.08:1
DividerMinimalPerf.default	213	197	1.08:1
VideoMinimalPerf.default	444	411	1.08:1
AvatarMinimalPerf.default	115	107	1.07:1
ChatMinimalPerf.default	444	416	1.07:1
AttachmentMinimalPerf.default	88	83	1.06:1
ListWith60ListItems.default	394	371	1.06:1
RefMinimalPerf.default	111	105	1.06:1
SegmentMinimalPerf.default	209	197	1.06:1
ChatWithPopoverPerf.default	201	191	1.05:1
CarouselMinimalPerf.default	275	264	1.04:1
FormMinimalPerf.default	233	223	1.04:1
ImageMinimalPerf.default	226	218	1.04:1
LayoutMinimalPerf.default	206	199	1.04:1
MenuButtonMinimalPerf.default	1006	963	1.04:1
TextAreaMinimalPerf.default	299	287	1.04:1
AlertMinimalPerf.default	157	153	1.03:1
ButtonMinimalPerf.default	95	92	1.03:1
DatepickerMinimalPerf.default	3889	3790	1.03:1
FlexMinimalPerf.default	155	151	1.03:1
ListNestedPerf.default	325	315	1.03:1
RadioGroupMinimalPerf.default	266	259	1.03:1
SliderMinimalPerf.default	771	750	1.03:1
TreeMinimalPerf.default	499	483	1.03:1
ChatDuplicateMessagesPerf.default	157	154	1.02:1
CheckboxMinimalPerf.default	1165	1141	1.02:1
DialogMinimalPerf.default	452	445	1.02:1
DropdownManyItemsPerf.default	391	383	1.02:1
GridMinimalPerf.default	192	188	1.02:1
ItemLayoutMinimalPerf.default	722	706	1.02:1
TableManyItemsPerf.default	1161	1139	1.02:1
CustomToolbarPrototype.default	1536	1499	1.02:1
AttachmentSlotsPerf.default	645	637	1.01:1
ButtonOverridesMissPerf.default	669	664	1.01:1
PopupMinimalPerf.default	350	347	1.01:1
ReactionMinimalPerf.default	213	211	1.01:1
TableMinimalPerf.default	243	240	1.01:1
TreeWith60ListItems.default	94	93	1.01:1
DropdownMinimalPerf.default	1454	1459	1:1
EmbedMinimalPerf.default	1907	1900	1:1
HeaderSlotsPerf.default	463	463	1:1
LoaderMinimalPerf.default	192	192	1:1
PortalMinimalPerf.default	85	85	1:1
ProviderMergeThemesPerf.default	652	651	1:1
StatusMinimalPerf.default	401	401	1:1
TooltipMinimalPerf.default	1274	1272	1:1
BoxMinimalPerf.default	190	192	0.99:1
SkeletonMinimalPerf.default	208	210	0.99:1
ButtonSlotsPerf.default	316	322	0.98:1
InputMinimalPerf.default	540	551	0.98:1
LabelMinimalPerf.default	217	222	0.98:1
MenuMinimalPerf.default	499	507	0.98:1
ProviderMinimalPerf.default	211	216	0.98:1
SplitButtonMinimalPerf.default	2258	2298	0.98:1
AnimationMinimalPerf.default	294	303	0.97:1
ListMinimalPerf.default	306	315	0.97:1
ToolbarMinimalPerf.default	539	553	0.97:1
RosterPerf.default	1563	1633	0.96:1
IconMinimalPerf.default	373	390	0.96:1
HeaderMinimalPerf.default	195	206	0.95:1
ListCommonPerf.default	376	399	0.94:1

fabricteam · 2023-10-27T13:28:12Z

🕵 FluentUIV0 No visual regressions between this PR and main

fabricteam · 2023-10-27T13:33:50Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	608	646	5000
Breadcrumb	mount	1694	1699	1000
Checkbox	mount	1692	1695	5000
CheckboxBase	mount	1459	1463	5000
ChoiceGroup	mount	2926	2922	5000
ComboBox	mount	661	657	1000
CommandBar	mount	6331	6282	1000
ContextualMenu	mount	16603	16134	1000
DefaultButton	mount	761	754	5000
DetailsRow	mount	2186	2156	5000
DetailsRowFast	mount	2201	2221	5000
DetailsRowNoStyles	mount	2012	1943	5000
Dialog	mount	2625	2674	1000
DocumentCardTitle	mount	236	229	1000
Dropdown	mount	1950	2018	5000
FocusTrapZone	mount	1114	1142	5000
FocusZone	mount	1058	1030	5000
GroupedList	mount	41416	41449	2
GroupedList	virtual-rerender	19851	19737	2
GroupedList	virtual-rerender-with-unmount	50106	50382	2
GroupedListV2	mount	233	229	2
GroupedListV2	virtual-rerender	216	201	2
GroupedListV2	virtual-rerender-with-unmount	227	225	2
IconButton	mount	1063	1045	5000
Label	mount	334	341	5000
Layer	mount	2658	2709	5000
Link	mount	378	390	5000
MenuButton	mount	943	923	5000
MessageBar	mount	21334	21293	5000
Nav	mount	1946	1895	1000
OverflowSet	mount	774	758	5000
Panel	mount	1776	1762	1000
Persona	mount	734	746	1000
Pivot	mount	856	858	1000
PrimaryButton	mount	836	833	5000
Rating	mount	4475	4524	5000
SearchBox	mount	900	906	5000
Shimmer	mount	1852	1818	5000
Slider	mount	1302	1294	5000
SpinButton	mount	2888	2801	5000
Spinner	mount	379	380	5000
SplitButton	mount	1779	1800	5000
Stack	mount	396	414	5000
StackWithIntrinsicChildren	mount	856	865	5000
StackWithTextChildren	mount	2574	2613	5000
SwatchColorPicker	mount	6044	6123	5000
TagPicker	mount	1391	1414	5000
Text	mount	368	375	5000
TextField	mount	925	884	5000
ThemeProvider	mount	830	822	5000
ThemeProvider	virtual-rerender	581	577	5000
ThemeProvider	virtual-rerender-with-unmount	1233	1227	5000
Toggle	mount	609	621	5000
buttonNative	mount	188	182	5000

size-auditor · 2023-10-27T13:45:08Z

Asset size changes

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

Baseline commit: b137c8c4c52ef7a73a48a36bc93fbb4863ef67dc (build)

fabricteam · 2023-10-27T13:47:07Z

🕵 fluentuiv9 No visual regressions between this PR and main

.storybook/main.js

.storybook/preview.js

.storybook/main.js

packages/react-components/babel-preset-storybook-full-source/package.json

…it can be published and use by others

* master: breaking(react-drawer): open now only accepts a boolean instead of MotionShorthand (microsoft#29736) fix (breadcrumb): Overflow examples refactoring (microsoft#29723) refactor(tools): replace deprecated apis (microsoft#29624) [Part 3] Update documentation content for all charts (microsoft#29727) chore: throws if FlatTree is used as a subtree (microsoft#29729) feat(react-storybook-addon-export-to-sandbox): make addon generic so it can be published and use by others (microsoft#29674) chore(TimePicker-compat): add bundle size fixture (microsoft#29717) applying package updates Move CredScanSuppression file to root so 1ESPT output task picks it up (microsoft#29722) fix(CI): increase pipeline agent timeout threshold to 90 minutes (microsoft#29710) fix(breadcrumb): examples and styles (microsoft#29679) chore(react-tree): stop unnecessary re-rendering when no actions are available (microsoft#29694) applying package updates

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

Hotell force-pushed the hotell/storybook/make-export-to-sandbox-addon-generic branch from 9587e24 to d213a0f Compare October 27, 2023 13:09

Hotell changed the title ~~Hotell/storybook/make export to sandbox addon generic~~ feat(react-storybook-addon-export-to-sandbox): make addon generic so it can be published and use by others Oct 27, 2023

Hotell force-pushed the hotell/storybook/make-export-to-sandbox-addon-generic branch from d213a0f to 01a24ba Compare October 27, 2023 13:23

Hotell added Area: Build System Storybook labels Oct 27, 2023

Hotell added the Fluent UI react-components (v9) label Oct 27, 2023