Skip to content

Storybook: Update to RFC about authoring stories#19827

Closed
PeterDraex wants to merge 48 commits into
microsoft:masterfrom
PeterDraex:rfc/authoring-stories2
Closed

Storybook: Update to RFC about authoring stories#19827
PeterDraex wants to merge 48 commits into
microsoft:masterfrom
PeterDraex:rfc/authoring-stories2

Conversation

@PeterDraex

@PeterDraex PeterDraex commented Sep 16, 2021

Copy link
Copy Markdown
Contributor

Description of changes

The substantial changes are:

  • it’s mandatory to put each story in its own file (required by export to codesandbox)
  • .stories.tsx can be put to a stories folder
  • filename of internal stories should have suffix Internal.stories.tsx instead of Internal.internal.stories.tsx
  • usage of decorators is discouraged

Other changes are meant to improve clarity of the RFC without change in meaning.

PeterDraex and others added 30 commits July 2, 2021 17:32
@codesandbox-ci

codesandbox-ci Bot commented Sep 16, 2021

Copy link
Copy Markdown

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 c99cc8c:

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

@size-auditor

size-auditor Bot commented Sep 16, 2021

Copy link
Copy Markdown

Asset size changes

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

Baseline commit: 1633178c1545b5111a6ce8912a7d36345ea53949 (build)

@fabricteam

fabricteam commented Sep 16, 2021

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)
57.532 kB
18.112 kB
react-avatar
Avatar
54.953 kB
15.667 kB
react-badge
Badge
23.182 kB
6.986 kB
react-badge
CounterBadge
25.642 kB
7.682 kB
react-badge
PresenseBadge
237 B
177 B
react-button
Button
25.501 kB
7.738 kB
react-button
CompoundButton
30.758 kB
8.689 kB
react-button
MenuButton
27.526 kB
8.413 kB
react-button
SplitButton
33.637 kB
9.597 kB
react-button
ToggleButton
34.727 kB
8.39 kB
react-card
Card - All
13.471 kB
5.068 kB
react-card
Card
9.317 kB
3.925 kB
react-card
CardFooter
8.468 kB
3.557 kB
react-card
CardHeader
9.695 kB
3.99 kB
react-card
CardPreview
8.783 kB
3.741 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
169.173 kB
48.002 kB
react-components
react-components: FluentProvider & webLightTheme
32.188 kB
10.658 kB
react-divider
Divider
15.342 kB
5.585 kB
react-image
Image
9.771 kB
3.975 kB
react-input
Input
31.319 kB
11.305 kB
react-label
Label
8.952 kB
3.708 kB
react-link
Link
11.646 kB
4.699 kB
react-make-styles
makeStaticStyles (runtime)
7.59 kB
3.321 kB
react-make-styles
makeStyles + mergeClasses (runtime)
22.175 kB
8.366 kB
react-make-styles
makeStyles + mergeClasses (build time)
2.558 kB
1.204 kB
react-menu
Menu (including children components)
105.789 kB
32.202 kB
react-menu
Menu (including selectable components)
108.065 kB
32.575 kB
react-popover
Popover
101.153 kB
30.37 kB
react-portal
Portal
6.725 kB
2.237 kB
react-positioning
usePopper
23.145 kB
7.942 kB
react-provider
FluentProvider
15.147 kB
5.573 kB
react-slider
RangedSlider
41.41 kB
11.97 kB
react-slider
Slider
34.788 kB
10.855 kB
react-switch
Switch
26.606 kB
8.557 kB
react-text
Text - Default
11.338 kB
4.418 kB
react-text
Text - Wrappers
14.407 kB
4.724 kB
react-theme
Teams: all themes
25.712 kB
6.17 kB
react-theme
Teams: Light theme
17.215 kB
5.116 kB
react-tooltip
Tooltip
45.543 kB
15.541 kB
react-utilities
SSRProvider
213 B
170 B
🤖 This report was generated against 1633178c1545b5111a6ce8912a7d36345ea53949

@fabricteam

fabricteam commented Sep 16, 2021

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 793 782 5000
BaseButton mount 788 764 5000
Breadcrumb mount 2235 2309 1000
ButtonNext mount 424 424 5000
Checkbox mount 1299 1297 5000
CheckboxBase mount 1116 1122 5000
ChoiceGroup mount 4024 4012 5000
ComboBox mount 857 831 1000
CommandBar mount 8769 8750 1000
ContextualMenu mount 5548 5491 1000
DefaultButton mount 967 968 5000
DetailsRow mount 3237 3211 5000
DetailsRowFast mount 3254 3228 5000
DetailsRowNoStyles mount 3103 3034 5000
Dialog mount 2101 2110 1000
DocumentCardTitle mount 159 144 1000
Dropdown mount 2770 2756 5000
FluentProviderNext mount 2920 2915 5000
FluentProviderWithTheme mount 195 185 10
FluentProviderWithTheme virtual-rerender 84 81 10
FluentProviderWithTheme virtual-rerender-with-unmount 207 197 10
FocusTrapZone mount 1549 1559 5000
FocusZone mount 1567 1527 5000
IconButton mount 1490 1490 5000
Label mount 303 309 5000
Layer mount 2583 2533 5000
Link mount 418 426 5000
MakeStyles mount 1574 1562 50000
MenuButton mount 1260 1277 5000
MessageBar mount 1729 1741 5000
Nav mount 2842 2784 1000
OverflowSet mount 962 949 5000
Panel mount 2020 1994 1000
Persona mount 728 715 1000
Pivot mount 1227 1240 1000
PrimaryButton mount 1115 1101 5000
Rating mount 6598 6575 5000
SearchBox mount 1151 1151 5000
Shimmer mount 2219 2175 5000
Slider mount 1676 1686 5000
SpinButton mount 4255 4270 5000
Spinner mount 369 375 5000
SplitButton mount 2678 2692 5000
Stack mount 442 444 5000
StackWithIntrinsicChildren mount 1437 1458 5000
StackWithTextChildren mount 3993 3940 5000
SwatchColorPicker mount 8919 8886 5000
Tabs mount 1232 1243 1000
TagPicker mount 2254 2262 5000
TeachingBubble mount 11118 11121 5000
Text mount 378 383 5000
TextField mount 1191 1202 5000
ThemeProvider mount 1016 1028 5000
ThemeProvider virtual-rerender 532 525 5000
ThemeProvider virtual-rerender-with-unmount 1601 1603 5000
Toggle mount 702 705 5000
buttonNative mount 122 124 5000

Perf Analysis (@fluentui/react-northstar)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
AlertMinimalPerf.default 233 233 1:1 analysis
Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
FormMinimalPerf.default 351 325 1.08:1
ChatMinimalPerf.default 576 536 1.07:1
ReactionMinimalPerf.default 330 309 1.07:1
RefMinimalPerf.default 210 199 1.06:1
ChatWithPopoverPerf.default 343 326 1.05:1
PortalMinimalPerf.default 160 153 1.05:1
VideoMinimalPerf.default 540 515 1.05:1
TableMinimalPerf.default 347 334 1.04:1
AttachmentMinimalPerf.default 142 138 1.03:1
TextMinimalPerf.default 295 287 1.03:1
HeaderSlotsPerf.default 649 637 1.02:1
ListNestedPerf.default 465 458 1.02:1
ListWith60ListItems.default 563 550 1.02:1
RadioGroupMinimalPerf.default 383 377 1.02:1
TextAreaMinimalPerf.default 425 416 1.02:1
ButtonOverridesMissPerf.default 1511 1489 1.01:1
CardMinimalPerf.default 460 456 1.01:1
DropdownManyItemsPerf.default 578 570 1.01:1
ImageMinimalPerf.default 318 315 1.01:1
ItemLayoutMinimalPerf.default 1034 1028 1.01:1
ListCommonPerf.default 522 519 1.01:1
MenuButtonMinimalPerf.default 1382 1375 1.01:1
ProviderMergeThemesPerf.default 1470 1460 1.01:1
ProviderMinimalPerf.default 973 961 1.01:1
SegmentMinimalPerf.default 301 297 1.01:1
SliderMinimalPerf.default 1458 1447 1.01:1
TableManyItemsPerf.default 1602 1582 1.01:1
TooltipMinimalPerf.default 876 867 1.01:1
AccordionMinimalPerf.default 122 122 1:1
CarouselMinimalPerf.default 408 406 1:1
CheckboxMinimalPerf.default 2323 2329 1:1
DatepickerMinimalPerf.default 4787 4800 1:1
DialogMinimalPerf.default 643 646 1:1
DropdownMinimalPerf.default 2711 2719 1:1
EmbedMinimalPerf.default 3638 3624 1:1
HeaderMinimalPerf.default 304 303 1:1
InputMinimalPerf.default 1117 1121 1:1
LabelMinimalPerf.default 332 331 1:1
LayoutMinimalPerf.default 315 314 1:1
LoaderMinimalPerf.default 596 594 1:1
MenuMinimalPerf.default 715 712 1:1
PopupMinimalPerf.default 507 506 1:1
StatusMinimalPerf.default 578 576 1:1
ToolbarMinimalPerf.default 803 801 1:1
TreeMinimalPerf.default 668 667 1:1
TreeWith60ListItems.default 153 153 1:1
AttachmentSlotsPerf.default 916 922 0.99:1
AvatarMinimalPerf.default 169 171 0.99:1
ButtonSlotsPerf.default 479 485 0.99:1
ChatDuplicateMessagesPerf.default 250 253 0.99:1
GridMinimalPerf.default 285 287 0.99:1
SplitButtonMinimalPerf.default 3591 3612 0.99:1
CustomToolbarPrototype.default 3515 3557 0.99:1
AnimationMinimalPerf.default 348 355 0.98:1
ListMinimalPerf.default 424 431 0.98:1
IconMinimalPerf.default 525 535 0.98:1
DividerMinimalPerf.default 307 317 0.97:1
SkeletonMinimalPerf.default 293 301 0.97:1
ButtonMinimalPerf.default 147 153 0.96:1
BoxMinimalPerf.default 289 303 0.95:1
FlexMinimalPerf.default 231 244 0.95:1
RosterPerf.default 979 1041 0.94:1

Comment thread rfcs/convergence/authoring-stories.md Outdated
Comment thread rfcs/convergence/authoring-stories.md Outdated
Comment thread rfcs/convergence/authoring-stories.md Outdated
Comment thread rfcs/convergence/authoring-stories.md Outdated
Comment thread rfcs/convergence/authoring-stories.md Outdated
```

3. If an internal story is broken out into its own file, then the file should mirror the name of the story, which will include the `Internal` keyword and a `.internal.stories` suffix for easier IDE search.
All `.stories.tsx` files from one Storybook Docs page must be in a dedicated folder. If there is just one Docs page created, this should be `src/stories`. If there are multiple pages created, the folder should be `src/stories/page-name`.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Calling out this line to make sure everybody is okay with it.

@ecraig12345 suggested that we could also enforce using src/stories/page-name folder even when there is a single page in the package. This would make it a bit easier to write code mods in the future, but the .stories.tsx extension might be sufficient for that.

After this gets resolved, I think this PR is ready to merge.

@PeterDraex PeterDraex removed their assignment Oct 5, 2021
@JustSlone JustSlone added the Type: RFC Request for Feedback label Nov 19, 2021
@layershifter

Copy link
Copy Markdown
Member

@JustSlone should we merge this PR? If no, what are action items?

@msft-fluent-ui-bot

Copy link
Copy Markdown
Collaborator

Because this pull request has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

The pull request will still be available for reference. If it's still relevant to merge at some point, you can reopen or make a new version based on the latest code.

@msft-fluent-ui-bot msft-fluent-ui-bot added the Resolution: Soft Close Soft closing inactive issues over a certain period label Sep 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Area: Documentation Fluent UI react-components (v9) Resolution: Soft Close Soft closing inactive issues over a certain period Type: RFC Request for Feedback

Projects

None yet

Development

Successfully merging this pull request may close these issues.