fluentui
fluentui copied to clipboard
Published
20 hours ago •
microsoft
microsoft
PoC: build(storybook): add storybook-package-context-loader for better mono-repo support
trafficstars
Context
I was developing this functionality for my own mono-repo but I was using this repo as a playground because it is already fleshed out with lots of individual components, which is how I would like to structure mine as well. Feel free to take or leave these changes!
Current Behavior
Vanilla Storybook
New Behavior
Adds a custom docs page to give a little more context for the relevant package. Ex:
Related Issue(s)
Fixes #
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 34590bc271bf8df03b63fb60e421811e46c3271e:
| Sandbox | Source |
|---|---|
| @fluentui/react 8 starter | Configuration |
| @fluentui/react-components 9 starter | Configuration |
![codesandbox-ci[bot] avatar](https://avatars.githubusercontent.com/in/38409?v=4 "Published by a pub.dev verified publisher"){kind=small}
Asset size changes
Size Auditor did not detect a change in bundle size for any component!
Baseline commit: f9f7d0fb7506d2af70af355a26d7a44b49df5f58 (build)
![size-auditor[bot] avatar](https://avatars.githubusercontent.com/in/13711?v=4 "Published by a pub.dev verified publisher"){kind=small}
📊 Bundle size report
Unchanged fixtures
| Package & Exports | Size (minified/GZIP) |
|---|---|
| global-context createContext |
533 B341 B |
| global-context createContextSelector |
554 B348 B |
| priority-overflow createOverflowManager |
2.936 kB1.212 kB |
| react-accordion Accordion (including children components) |
79.36 kB24.06 kB |
| react-alert Alert |
83.739 kB20.823 kB |
| react-avatar Avatar |
48.281 kB13.647 kB |
| react-avatar AvatarGroup |
14.85 kB5.942 kB |
| react-avatar AvatarGroupItem |
68.249 kB18.99 kB |
| react-badge Badge |
22.5 kB7.158 kB |
| react-badge CounterBadge |
23.403 kB7.45 kB |
| react-badge PresenceBadge |
23.947 kB7.022 kB |
| react-button Button |
36.347 kB9.559 kB |
| react-button CompoundButton |
43.373 kB10.775 kB |
| react-button MenuButton |
38.965 kB10.438 kB |
| react-button SplitButton |
46.495 kB11.82 kB |
| react-button ToggleButton |
51.861 kB10.983 kB |
| react-card Card - All |
67.458 kB19.264 kB |
| react-card Card |
63.14 kB18.176 kB |
| react-card CardFooter |
8.461 kB3.555 kB |
| react-card CardHeader |
9.504 kB3.896 kB |
| react-card CardPreview |
8.562 kB3.61 kB |
| react-combobox Combobox (including child components) |
73.757 kB23.969 kB |
| react-combobox Dropdown (including child components) |
73.344 kB23.876 kB |
| react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover |
188.778 kB51.891 kB |
| react-components react-components: FluentProvider & webLightTheme |
33.259 kB10.952 kB |
| react-dialog Dialog (including children components) |
85.361 kB25.458 kB |
| react-divider Divider |
16.359 kB5.853 kB |
| react-image Image |
10.68 kB4.215 kB |
| react-input Input |
23.498 kB7.617 kB |
| react-label Label |
9.238 kB3.815 kB |
| react-link Link |
12.231 kB4.925 kB |
| react-menu Menu (including children components) |
115.697 kB35.316 kB |
| react-menu Menu (including selectable components) |
118.896 kB35.806 kB |
| react-overflow hooks only |
10.685 kB4.104 kB |
| react-popover Popover |
102.835 kB31.498 kB |
| react-portal Portal |
10.576 kB3.875 kB |
| react-positioning usePositioning |
19.7 kB7.404 kB |
| react-provider FluentProvider |
15.655 kB5.835 kB |
| react-radio Radio |
36.025 kB11.914 kB |
| react-radio RadioGroup |
14.148 kB5.654 kB |
| react-select Select |
20.746 kB7.299 kB |
| react-slider Slider |
32.07 kB10.033 kB |
| react-spinbutton SpinButton |
43.843 kB12.336 kB |
| react-spinner Spinner |
19.877 kB6.392 kB |
| react-switch Switch |
32.562 kB10.253 kB |
| react-text Text - Default |
11.682 kB4.561 kB |
| react-text Text - Wrappers |
14.992 kB4.995 kB |
| react-textarea Textarea |
23.674 kB7.83 kB |
| react-theme Single theme token import |
69 B89 B |
| react-theme Teams: all themes |
29.548 kB6.434 kB |
| react-theme Teams: Light theme |
17.452 kB5.054 kB |
| react-tooltip Tooltip |
41.502 kB14.623 kB |
| react-utilities SSRProvider |
180 B159 B |
Perf Analysis (@fluentui/react-components)
No significant results to display.
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 1577 | 1586 | 5000 | |
| Button | mount | 1180 | 1136 | 5000 | |
| FluentProvider | mount | 1892 | 1917 | 5000 | |
| FluentProviderWithTheme | mount | 738 | 741 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 696 | 735 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 754 | 743 | 10 | |
| MakeStyles | mount | 2258 | 2205 | 50000 | |
| SpinButton | mount | 2944 | 3045 | 5000 |
Perf Analysis (@fluentui/react-northstar)
Perf tests with no regressions
| Scenario | Current PR Ticks | Baseline Ticks | Ratio |
|---|---|---|---|
| AccordionMinimalPerf.default | 153 | 133 | 1.15:1 |
| VideoMinimalPerf.default | 750 | 677 | 1.11:1 |
| FormMinimalPerf.default | 389 | 356 | 1.09:1 |
| IconMinimalPerf.default | 680 | 622 | 1.09:1 |
| SegmentMinimalPerf.default | 351 | 329 | 1.07:1 |
| ReactionMinimalPerf.default | 380 | 360 | 1.06:1 |
| DropdownManyItemsPerf.default | 670 | 642 | 1.04:1 |
| MenuMinimalPerf.default | 840 | 805 | 1.04:1 |
| ButtonSlotsPerf.default | 549 | 531 | 1.03:1 |
| HeaderMinimalPerf.default | 358 | 348 | 1.03:1 |
| ProviderMinimalPerf.default | 408 | 397 | 1.03:1 |
| StatusMinimalPerf.default | 672 | 653 | 1.03:1 |
| TableMinimalPerf.default | 396 | 385 | 1.03:1 |
| ButtonMinimalPerf.default | 161 | 158 | 1.02:1 |
| ChatDuplicateMessagesPerf.default | 292 | 287 | 1.02:1 |
| DatepickerMinimalPerf.default | 5765 | 5656 | 1.02:1 |
| DropdownMinimalPerf.default | 3156 | 3095 | 1.02:1 |
| ImageMinimalPerf.default | 393 | 387 | 1.02:1 |
| SliderMinimalPerf.default | 1674 | 1645 | 1.02:1 |
| SplitButtonMinimalPerf.default | 4395 | 4329 | 1.02:1 |
| TableManyItemsPerf.default | 1866 | 1822 | 1.02:1 |
| ToolbarMinimalPerf.default | 910 | 893 | 1.02:1 |
| ButtonOverridesMissPerf.default | 1482 | 1471 | 1.01:1 |
| ChatWithPopoverPerf.default | 377 | 373 | 1.01:1 |
| DialogMinimalPerf.default | 766 | 760 | 1.01:1 |
| DividerMinimalPerf.default | 351 | 346 | 1.01:1 |
| FlexMinimalPerf.default | 282 | 278 | 1.01:1 |
| InputMinimalPerf.default | 1309 | 1296 | 1.01:1 |
| LabelMinimalPerf.default | 365 | 362 | 1.01:1 |
| ListMinimalPerf.default | 499 | 496 | 1.01:1 |
| RefMinimalPerf.default | 226 | 223 | 1.01:1 |
| SkeletonMinimalPerf.default | 336 | 333 | 1.01:1 |
| TextMinimalPerf.default | 328 | 326 | 1.01:1 |
| BoxMinimalPerf.default | 324 | 323 | 1:1 |
| CardMinimalPerf.default | 526 | 528 | 1:1 |
| GridMinimalPerf.default | 322 | 322 | 1:1 |
| PopupMinimalPerf.default | 629 | 630 | 1:1 |
| RadioGroupMinimalPerf.default | 428 | 430 | 1:1 |
| TextAreaMinimalPerf.default | 455 | 457 | 1:1 |
| TreeWith60ListItems.default | 155 | 155 | 1:1 |
| AnimationMinimalPerf.default | 515 | 519 | 0.99:1 |
| AttachmentMinimalPerf.default | 157 | 159 | 0.99:1 |
| CarouselMinimalPerf.default | 449 | 453 | 0.99:1 |
| EmbedMinimalPerf.default | 4087 | 4108 | 0.99:1 |
| HeaderSlotsPerf.default | 745 | 750 | 0.99:1 |
| ListCommonPerf.default | 603 | 608 | 0.99:1 |
| ListNestedPerf.default | 540 | 544 | 0.99:1 |
| LoaderMinimalPerf.default | 697 | 707 | 0.99:1 |
| MenuButtonMinimalPerf.default | 1718 | 1739 | 0.99:1 |
| PortalMinimalPerf.default | 167 | 169 | 0.99:1 |
| ProviderMergeThemesPerf.default | 1275 | 1294 | 0.99:1 |
| AttachmentSlotsPerf.default | 1088 | 1108 | 0.98:1 |
| CheckboxMinimalPerf.default | 2681 | 2728 | 0.98:1 |
| ItemLayoutMinimalPerf.default | 1188 | 1216 | 0.98:1 |
| CustomToolbarPrototype.default | 2869 | 2936 | 0.98:1 |
| TooltipMinimalPerf.default | 2311 | 2347 | 0.98:1 |
| ListWith60ListItems.default | 583 | 599 | 0.97:1 |
| RosterPerf.default | 2117 | 2176 | 0.97:1 |
| AvatarMinimalPerf.default | 180 | 187 | 0.96:1 |
| ChatMinimalPerf.default | 702 | 730 | 0.96:1 |
| LayoutMinimalPerf.default | 342 | 355 | 0.96:1 |
| TreeMinimalPerf.default | 769 | 821 | 0.94:1 |
| AlertMinimalPerf.default | 252 | 272 | 0.93:1 |
Perf Analysis (@fluentui/react)
No significant results to display.
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| BaseButton | mount | 917 | 927 | 5000 | |
| Breadcrumb | mount | 2900 | 2942 | 1000 | |
| Checkbox | mount | 2612 | 2643 | 5000 | |
| CheckboxBase | mount | 2323 | 2281 | 5000 | |
| ChoiceGroup | mount | 4700 | 4697 | 5000 | |
| ComboBox | mount | 1029 | 987 | 1000 | |
| CommandBar | mount | 11144 | 10941 | 1000 | |
| ContextualMenu | mount | 12687 | 12496 | 1000 | |
| DefaultButton | mount | 1128 | 1165 | 5000 | |
| DetailsRow | mount | 3889 | 3951 | 5000 | |
| DetailsRowFast | mount | 4040 | 3873 | 5000 | |
| DetailsRowNoStyles | mount | 3784 | 3766 | 5000 | |
| Dialog | mount | 3189 | 3284 | 1000 | |
| DocumentCardTitle | mount | 177 | 187 | 1000 | |
| Dropdown | mount | 3363 | 3426 | 5000 | |
| FocusTrapZone | mount | 1982 | 1914 | 5000 | |
| FocusZone | mount | 1839 | 1877 | 5000 | |
| IconButton | mount | 1778 | 1860 | 5000 | |
| Label | mount | 337 | 359 | 5000 | |
| Layer | mount | 4645 | 4633 | 5000 | |
| Link | mount | 483 | 490 | 5000 | |
| MenuButton | mount | 1517 | 1523 | 5000 | |
| MessageBar | mount | 2200 | 2262 | 5000 | |
| Nav | mount | 3448 | 3492 | 1000 | |
| OverflowSet | mount | 1156 | 1111 | 5000 | |
| Panel | mount | 2576 | 2549 | 1000 | |
| Persona | mount | 1003 | 1035 | 1000 | |
| Pivot | mount | 1468 | 1468 | 1000 | |
| PrimaryButton | mount | 1298 | 1322 | 5000 | |
| Rating | mount | 7961 | 7950 | 5000 | |
| SearchBox | mount | 1305 | 1300 | 5000 | |
| Shimmer | mount | 2903 | 2922 | 5000 | |
| Slider | mount | 2009 | 2051 | 5000 | |
| SpinButton | mount | 5101 | 5461 | 5000 | |
| Spinner | mount | 455 | 433 | 5000 | |
| SplitButton | mount | 3251 | 3251 | 5000 | |
| Stack | mount | 537 | 515 | 5000 | |
| StackWithIntrinsicChildren | mount | 2371 | 2338 | 5000 | |
| StackWithTextChildren | mount | 5219 | 5255 | 5000 | |
| SwatchColorPicker | mount | 12032 | 11960 | 5000 | |
| TagPicker | mount | 2769 | 2604 | 5000 | |
| TeachingBubble | mount | 101261 | 99489 | 5000 | |
| Text | mount | 438 | 427 | 5000 | |
| TextField | mount | 1435 | 1408 | 5000 | |
| ThemeProvider | mount | 1358 | 1321 | 5000 | |
| ThemeProvider | virtual-rerender | 764 | 802 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 2114 | 2072 | 5000 | |
| Toggle | mount | 796 | 837 | 5000 | |
| buttonNative | mount | 143 | 137 | 5000 |
This pull request has been automatically marked as stale because it was marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 5 days of this comment. Thank you for your contributions to Fluent UI!
