chore: implement new storybook architecture - for converged packages/react-menu #17866

Hotell · 2021-04-20T13:07:39Z

Pull request checklist

Addresses an existing issue: Closes partially Implement build infra around TS path aliases for convergence #16889
Include a change request file using $ yarn change
Depends on feat(react-storybook): init new package for convergence storybooks co… #17921

Description of changes

implements collocated stories per package (react-menu)
- react-menu was removed from react-examples
implements additional logic so react-examples and react-components work as before with proper processing of collocated stories
implements TS path aliases resolution for webpack/storybook
replaces just-script for storybook with raw storybook cli
implements "standard" storybook root config - <monorepoRoot>/.storybook
implements localised storybooks per converged package <packageFolder>/.storybook for react-menu

Focus areas to test

(optional)

Before:

yarn workspace @fluentui/react-menu start  --help

↓↓↓

Options:
  --help     Show help                         [boolean]
  --version  Show version number               [boolean]

After:

yarn workspace @fluentui/react-menu storybook  --help

↓↓↓

Options:
  -V, --version                 output the version number
  -p, --port [number]           Port to run Storybook
  -h, --host [string]           Host to run Storybook
  -s, --static-dir <dir-names>  Directory where to load static files from
  -c, --config-dir [dir-name]   Directory where to load Storybook configurations from
  --https                       Serve Storybook over HTTPS. Note: You must provide your own certificate information.
  --ssl-ca <ca>                 Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)
  --ssl-cert <cert>             Provide an SSL certificate. (Required with --https)
  --ssl-key <key>               Provide an SSL key. (Required with --https)
  --smoke-test                  Exit after successful start
  --ci                          CI mode (skip interactive prompts, don't open browser)
  --loglevel [level]            Control level of logging during build
  --quiet                       Suppress verbose build output
  --no-version-updates          Suppress update check
  --no-release-notes            Suppress automatic redirects to the release notes after upgrading
  --no-dll                      Do not use UI dll reference
  --docs-dll                    Use Docs dll reference (legacy)
  --debug-webpack               Display final webpack configurations for debugging purposes
  --preview-url [string]        Disables the default storybook preview and lets your use your own
  --docs                        Build a documentation-only site using addon-docs
  --help                        display help for command

size-auditor · 2021-04-20T13:16:38Z

Asset size changes

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

Baseline commit: 5e6aa4df0c03051e59d686d24b35f01c721a3b4e (build)

fabricteam · 2021-04-20T13:40:13Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	886	901	5000
BaseButton	mount	900	905	5000
Breadcrumb	mount	2657	2668	1000
ButtonNext	mount	531	546	5000
Checkbox	mount	1530	1533	5000
CheckboxBase	mount	1264	1271	5000
ChoiceGroup	mount	4715	4741	5000
ComboBox	mount	986	975	1000
CommandBar	mount	10184	10151	1000
ContextualMenu	mount	6150	6248	1000
DefaultButton	mount	1121	1117	5000
DetailsRow	mount	3681	3717	5000
DetailsRowFast	mount	3700	3661	5000
DetailsRowNoStyles	mount	3456	3485	5000
Dialog	mount	1470	1468	1000
DocumentCardTitle	mount	143	153	1000
Dropdown	mount	3219	3232	5000
FocusTrapZone	mount	1783	1820	5000
FocusZone	mount	1763	1828	5000
IconButton	mount	1695	1704	5000
Label	mount	340	340	5000
Layer	mount	1788	1756	5000
Link	mount	459	465	5000
MakeStyles	mount	1804	1805	50000
MenuButton	mount	1467	1489	5000
MessageBar	mount	2061	2025	5000
Nav	mount	3231	3243	1000
OverflowSet	mount	1031	1046	5000
Panel	mount	1413	1430	1000
Persona	mount	811	830	1000
Pivot	mount	1396	1424	1000
PrimaryButton	mount	1283	1242	5000
Rating	mount	7525	7551	5000
SearchBox	mount	1292	1315	5000
Shimmer	mount	2509	2513	5000
Slider	mount	1937	1952	5000
SpinButton	mount	4973	4959	5000
Spinner	mount	414	426	5000
SplitButton	mount	3170	3154	5000
Stack	mount	497	493	5000
StackWithIntrinsicChildren	mount	1477	1478	5000
StackWithTextChildren	mount	4446	4461	5000
SwatchColorPicker	mount	10203	10168	5000
Tabs	mount	1408	1431	1000
TagPicker	mount	2379	2440	5000
TeachingBubble	mount	11832	11758	5000
Text	mount	418	432	5000
TextField	mount	1364	1388	5000
ThemeProvider	mount	1196	1168	5000
ThemeProvider	virtual-rerender	596	603	5000
ThemeProviderNext	mount	9158	9110	5000
Toggle	mount	790	798	5000
buttonNative	mount	107	114	5000

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ButtonMinimalPerf.default	171	161	1.06:1
ReactionMinimalPerf.default	385	364	1.06:1
IconMinimalPerf.default	609	574	1.06:1
AttachmentMinimalPerf.default	161	153	1.05:1
TextMinimalPerf.default	348	333	1.05:1
GridMinimalPerf.default	352	337	1.04:1
HeaderMinimalPerf.default	367	354	1.04:1
ImageMinimalPerf.default	378	363	1.04:1
PopupMinimalPerf.default	710	684	1.04:1
TreeWith60ListItems.default	181	174	1.04:1
AlertMinimalPerf.default	271	264	1.03:1
AttachmentSlotsPerf.default	1160	1126	1.03:1
CardMinimalPerf.default	553	539	1.03:1
ListNestedPerf.default	552	535	1.03:1
ListWith60ListItems.default	644	626	1.03:1
PortalMinimalPerf.default	166	161	1.03:1
StatusMinimalPerf.default	685	665	1.03:1
TableMinimalPerf.default	407	395	1.03:1
CarouselMinimalPerf.default	475	466	1.02:1
ChatDuplicateMessagesPerf.default	283	278	1.02:1
ChatWithPopoverPerf.default	364	358	1.02:1
DividerMinimalPerf.default	357	351	1.02:1
DropdownManyItemsPerf.default	679	664	1.02:1
FlexMinimalPerf.default	284	278	1.02:1
HeaderSlotsPerf.default	764	747	1.02:1
RefMinimalPerf.default	239	234	1.02:1
TableManyItemsPerf.default	1911	1877	1.02:1
AccordionMinimalPerf.default	148	146	1.01:1
BoxMinimalPerf.default	350	347	1.01:1
ButtonUseCssNestingPerf.default	1042	1034	1.01:1
CheckboxMinimalPerf.default	2768	2741	1.01:1
DialogMinimalPerf.default	732	727	1.01:1
EmbedMinimalPerf.default	4114	4078	1.01:1
InputMinimalPerf.default	1262	1255	1.01:1
LabelMinimalPerf.default	382	377	1.01:1
ListCommonPerf.default	612	605	1.01:1
SegmentMinimalPerf.default	342	338	1.01:1
SkeletonMinimalPerf.default	351	348	1.01:1
CustomToolbarPrototype.default	3728	3696	1.01:1
ToolbarMinimalPerf.default	931	918	1.01:1
TooltipMinimalPerf.default	960	954	1.01:1
TreeMinimalPerf.default	787	781	1.01:1
VideoMinimalPerf.default	613	609	1.01:1
AvatarMinimalPerf.default	187	187	1:1
ButtonOverridesMissPerf.default	1652	1645	1:1
ButtonSlotsPerf.default	552	550	1:1
ButtonUseCssPerf.default	794	797	1:1
DatepickerMinimalPerf.default	5378	5368	1:1
DropdownMinimalPerf.default	3012	3008	1:1
ItemLayoutMinimalPerf.default	1234	1228	1:1
MenuButtonMinimalPerf.default	1548	1552	1:1
RadioGroupMinimalPerf.default	432	434	1:1
SliderMinimalPerf.default	1529	1524	1:1
TextAreaMinimalPerf.default	482	483	1:1
AnimationMinimalPerf.default	408	411	0.99:1
ChatMinimalPerf.default	605	613	0.99:1
ListMinimalPerf.default	495	499	0.99:1
MenuMinimalPerf.default	828	836	0.99:1
SplitButtonMinimalPerf.default	3689	3714	0.99:1
LayoutMinimalPerf.default	356	362	0.98:1
LoaderMinimalPerf.default	688	700	0.98:1
ProviderMergeThemesPerf.default	1629	1655	0.98:1
ProviderMinimalPerf.default	948	969	0.98:1
FormMinimalPerf.default	402	413	0.97:1
RosterPerf.default	1114	1159	0.96:1

codesandbox-ci · 2021-04-21T13:00:56Z

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 3e72d33:

Sandbox	Source
Fluent UI Button	Configuration
codesandbox-react-template	Configuration
codesandbox-react-northstar-template	Configuration

Hotell · 2021-04-29T08:36:37Z

package.json

@@ -80,9 +80,9 @@
    "@storybook/channels": "6.0.28",
    "@storybook/core": "6.0.28",
    "@storybook/react": "6.0.28",
+    "@testing-library/jest-dom": "5.11.9",


reordered packages by yarn add

Hotell · 2021-04-29T08:49:11Z

change/@fluentui-react-examples-85f99e10-eae9-4fdc-8aac-7996bca1bc35.json

+  "comment": "chore(react-examples): process collocated stories properly and remove react-menu from dependencies",
+  "packageName": "@fluentui/react-examples",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"


not really sure about the type, I'd say this is a breaking change hmm, but from what I remember, this package is not being used by anyone ?

Not sure about used, but it is published

packages/react-examples/.storybook/preview-loader.js

packages/react-examples/.storybook/preview.js

ling1726 · 2021-04-29T09:59:24Z

tsconfig.base.json

@@ -27,6 +27,7 @@
      "@fluentui/react-positioning": ["packages/react-positioning/src/index.ts"],
      "@fluentui/react-shared-contexts": ["packages/react-shared-contexts/src/index.ts"],
      "@fluentui/react-menu": ["packages/react-menu/src/index.ts"],
+      "@fluentui/react-portal": ["packages/react-portal/src/index.ts"],


Ah, thanks for remembering where I forgot !

no worries, we don't have automation for this atm, blame robots! :D

packages/react-menu/.storybook/tsconfig.json

ling1726 · 2021-04-29T10:05:04Z

.storybook/main.js

+    '@storybook/addon-essentials',
+    '@storybook/addon-a11y',
+    '@storybook/addon-knobs/preset',
+    'storybook-addon-performance',


would we be OK reming the perf addon ? I have never seen it mentioned nor have I ever used it in any meaningful way

we can do that, depends on requirements. It is used for react-examples that's why I added it here as well.

My understanding was that this is gonna be used for re-render perf metrics in the future ?

re-render perf metrics

wasn't that why we created flamegrill ? 🤦‍♂️

packages/react-menu/.storybook/main.js

Hotell · 2021-04-30T10:08:57Z

ping @JustSlone

… react-menu from dependencies

msft-fluent-ui-bot · 2021-05-03T07:48:11Z

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

…react-menu (microsoft#17866) * chore(.storybook): implement root sb config * chore(react-menu): implement local storybook with stories * chore(react-examples): process collocated stories properly and remove react-menu from dependencies * Change files * chore(.storybook): use react-storybook instead storybook * chore: update base.json to with new react-menu deps * chore: update codeowners

msft-fluent-ui-bot assigned tomi-msft Apr 20, 2021

Hotell force-pushed the hotell/16889/new-sb-config branch from fa31ec3 to 2a3fb60 Compare April 20, 2021 13:22

Hotell force-pushed the hotell/16889/new-sb-config branch from 62a3769 to 625f3df Compare April 21, 2021 12:52

Hotell force-pushed the hotell/16889/new-sb-config branch 3 times, most recently from 0a66c18 to 8398423 Compare April 22, 2021 14:25

Hotell mentioned this pull request Apr 22, 2021

Implement build infra around TS path aliases for convergence #16889

Closed

13 tasks

Hotell added the Status: Blocked Resolution blocked by another issue label Apr 22, 2021

Hotell added Area: Build System and removed Status: Blocked Resolution blocked by another issue labels Apr 22, 2021

Hotell changed the title ~~Hotell/16889/new sb config~~ chore: implement new storybook architecture - mostly for converged packages Apr 26, 2021

Hotell force-pushed the hotell/16889/new-sb-config branch 3 times, most recently from 8f5b856 to fe7e2b6 Compare April 28, 2021 10:30

Hotell changed the title ~~chore: implement new storybook architecture - mostly for converged packages~~ chore: implement new storybook architecture - for converged packages/react-menu Apr 28, 2021

Hotell added the Component: Menu label Apr 28, 2021

Hotell force-pushed the hotell/16889/new-sb-config branch from fe7e2b6 to d94cb60 Compare April 28, 2021 11:31

Hotell marked this pull request as ready for review April 29, 2021 08:34

Hotell requested review from JustSlone, layershifter, ling1726 and a team as code owners April 29, 2021 08:34

Hotell commented Apr 29, 2021

View reviewed changes

ling1726 reviewed Apr 29, 2021

View reviewed changes

packages/react-examples/.storybook/preview.js Outdated Show resolved Hide resolved

ling1726 reviewed Apr 29, 2021

View reviewed changes

packages/react-examples/.storybook/preview.js Show resolved Hide resolved

ling1726 reviewed Apr 29, 2021

View reviewed changes

packages/react-menu/.storybook/tsconfig.json Outdated Show resolved Hide resolved

ling1726 reviewed Apr 29, 2021

View reviewed changes

ling1726 approved these changes Apr 29, 2021

View reviewed changes

layershifter reviewed Apr 29, 2021

View reviewed changes

packages/react-menu/.storybook/main.js Outdated Show resolved Hide resolved

layershifter approved these changes Apr 29, 2021

View reviewed changes

Hotell enabled auto-merge (squash) April 29, 2021 11:17

Hotell force-pushed the hotell/16889/new-sb-config branch 2 times, most recently from 5f55854 to 0bf4e96 Compare April 30, 2021 09:47

JustSlone approved these changes Apr 30, 2021

View reviewed changes

Hotell added 6 commits April 30, 2021 17:13

chore(.storybook): implement root sb config

2f8eecb

chore(react-menu): implement local storybook with stories

8b0a4a7

chore(react-examples): process collocated stories properly and remove…

0970c0d

… react-menu from dependencies

Change files

9b82bdb

chore: update base.json to with new react-menu deps

52ce73b

chore: update codeowners

3e72d33

Hotell force-pushed the hotell/16889/new-sb-config branch from 0bf4e96 to 3e72d33 Compare April 30, 2021 15:16

Hotell merged commit 6c420a1 into microsoft:master Apr 30, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: implement new storybook architecture - for converged packages/react-menu #17866

chore: implement new storybook architecture - for converged packages/react-menu #17866

Hotell commented Apr 20, 2021 •

edited

Loading

size-auditor bot commented Apr 20, 2021 •

edited

Loading

fabricteam commented Apr 20, 2021 •

edited

Loading

codesandbox-ci bot commented Apr 21, 2021 •

edited

Loading

Hotell Apr 29, 2021

Hotell Apr 29, 2021

ling1726 Apr 29, 2021

ling1726 Apr 29, 2021

Hotell Apr 29, 2021

ling1726 Apr 29, 2021

Hotell Apr 29, 2021

ling1726 Apr 29, 2021 •

edited

Loading

Hotell Apr 29, 2021

Hotell commented Apr 30, 2021

msft-fluent-ui-bot commented May 3, 2021

chore: implement new storybook architecture - for converged packages/react-menu #17866

chore: implement new storybook architecture - for converged packages/react-menu #17866

Conversation

Hotell commented Apr 20, 2021 • edited Loading

Pull request checklist

Description of changes

Focus areas to test

size-auditor bot commented Apr 20, 2021 • edited Loading

Asset size changes

fabricteam commented Apr 20, 2021 • edited Loading

Perf Analysis (@fluentui/react-northstar)

codesandbox-ci bot commented Apr 21, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ling1726 Apr 29, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Hotell commented Apr 30, 2021

msft-fluent-ui-bot commented May 3, 2021

Hotell commented Apr 20, 2021 •

edited

Loading

size-auditor bot commented Apr 20, 2021 •

edited

Loading

fabricteam commented Apr 20, 2021 •

edited

Loading

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

codesandbox-ci bot commented Apr 21, 2021 •

edited

Loading

ling1726 Apr 29, 2021 •

edited

Loading