Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(tools): implement storybook updates for migration generator #18394

Conversation

Hotell
Copy link
Contributor

@Hotell Hotell commented May 31, 2021

Pull request checklist

Description of changes

This is 3rd phase for implementing migration generator with nx:

TASK:

  • migrate to typescript path aliases
  • migrate to use standard jest powered by TS path aliases
  • bootstrap new storybook config ( THIS PR ✅ )
  • collocate all package stories from react-examples ( THIS PR ✅ )
  • update npm scripts (setup docs task to run api-extractor for local changes verification)

Focus areas to test

(optional)

@size-auditor
Copy link

size-auditor bot commented May 31, 2021

Asset size changes

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

Baseline commit: cdc8b4768ede2349bee2c97b6c2860794ec075d1 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented May 31, 2021

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 863 873 5000
BaseButton mount 954 994 5000
Breadcrumb mount 2658 2634 1000
ButtonNext mount 508 490 5000
Checkbox mount 1594 1607 5000
CheckboxBase mount 1393 1355 5000
ChoiceGroup mount 5087 5091 5000
ComboBox mount 1059 1052 1000
CommandBar mount 10207 10110 1000
ContextualMenu mount 6148 6332 1000
DefaultButton mount 1191 1202 5000
DetailsRow mount 3903 3901 5000
DetailsRowFast mount 3963 3933 5000
DetailsRowNoStyles mount 3595 3674 5000
Dialog mount 2257 2219 1000
DocumentCardTitle mount 159 146 1000
Dropdown mount 3488 3554 5000
FocusTrapZone mount 1831 1801 5000
FocusZone mount 1732 1827 5000
IconButton mount 1850 1870 5000
Label mount 339 353 5000
Layer mount 1879 1838 5000
Link mount 507 496 5000
MakeStyles mount 1851 1814 50000
MenuButton mount 1593 1575 5000
MessageBar mount 2099 2138 5000
Nav mount 3561 3594 1000
OverflowSet mount 1086 1097 5000
Panel mount 2133 2154 1000
Persona mount 855 855 1000
Pivot mount 1461 1503 1000
PrimaryButton mount 1388 1373 5000
Rating mount 8420 8470 5000
SearchBox mount 1409 1419 5000
Shimmer mount 2718 2711 5000
Slider mount 2169 2055 5000
SpinButton mount 5112 5295 5000
Spinner mount 413 423 5000
SplitButton mount 3333 3308 5000
Stack mount 543 536 5000
StackWithIntrinsicChildren mount 1678 1654 5000
StackWithTextChildren mount 5020 5047 5000
SwatchColorPicker mount 10643 10603 5000
Tabs mount 1539 1490 1000
TagPicker mount 2663 2690 5000
TeachingBubble mount 11992 12188 5000
Text mount 464 447 5000
TextField mount 1447 1514 5000
ThemeProvider mount 1227 1216 5000
ThemeProvider virtual-rerender 609 626 5000
ThemeProviderNext mount 6634 6583 5000
Toggle mount 888 852 5000
buttonNative mount 122 126 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
BoxMinimalPerf.default 403 359 1.12:1
ButtonMinimalPerf.default 191 174 1.1:1
FlexMinimalPerf.default 323 293 1.1:1
RefMinimalPerf.default 238 218 1.09:1
AnimationMinimalPerf.default 451 417 1.08:1
AvatarMinimalPerf.default 222 205 1.08:1
CarouselMinimalPerf.default 524 485 1.08:1
ChatWithPopoverPerf.default 407 377 1.08:1
ChatMinimalPerf.default 680 636 1.07:1
FormMinimalPerf.default 480 449 1.07:1
StatusMinimalPerf.default 761 714 1.07:1
TableMinimalPerf.default 453 423 1.07:1
AttachmentMinimalPerf.default 181 171 1.06:1
IconMinimalPerf.default 667 629 1.06:1
ChatDuplicateMessagesPerf.default 309 293 1.05:1
ListCommonPerf.default 714 677 1.05:1
MenuMinimalPerf.default 934 891 1.05:1
PortalMinimalPerf.default 180 172 1.05:1
SkeletonMinimalPerf.default 381 364 1.05:1
ButtonSlotsPerf.default 589 564 1.04:1
DialogMinimalPerf.default 841 809 1.04:1
GridMinimalPerf.default 371 356 1.04:1
HeaderMinimalPerf.default 397 383 1.04:1
LayoutMinimalPerf.default 400 383 1.04:1
CustomToolbarPrototype.default 4057 3906 1.04:1
ButtonOverridesMissPerf.default 1791 1743 1.03:1
ImageMinimalPerf.default 418 405 1.03:1
RadioGroupMinimalPerf.default 478 463 1.03:1
TextAreaMinimalPerf.default 556 540 1.03:1
ToolbarMinimalPerf.default 1004 979 1.03:1
TooltipMinimalPerf.default 1062 1030 1.03:1
AlertMinimalPerf.default 302 295 1.02:1
CardMinimalPerf.default 603 589 1.02:1
CheckboxMinimalPerf.default 2819 2765 1.02:1
EmbedMinimalPerf.default 4539 4436 1.02:1
LabelMinimalPerf.default 417 408 1.02:1
LoaderMinimalPerf.default 732 718 1.02:1
ProviderMergeThemesPerf.default 1680 1653 1.02:1
SplitButtonMinimalPerf.default 4032 3935 1.02:1
TextMinimalPerf.default 377 370 1.02:1
TreeMinimalPerf.default 826 813 1.02:1
AccordionMinimalPerf.default 169 168 1.01:1
DropdownMinimalPerf.default 3221 3192 1.01:1
ItemLayoutMinimalPerf.default 1379 1359 1.01:1
PopupMinimalPerf.default 576 569 1.01:1
ReactionMinimalPerf.default 406 403 1.01:1
SliderMinimalPerf.default 1605 1586 1.01:1
DatepickerMinimalPerf.default 5730 5728 1:1
DividerMinimalPerf.default 400 399 1:1
ListMinimalPerf.default 546 546 1:1
ListNestedPerf.default 593 594 1:1
ListWith60ListItems.default 696 698 1:1
ProviderMinimalPerf.default 1030 1031 1:1
VideoMinimalPerf.default 687 688 1:1
DropdownManyItemsPerf.default 746 755 0.99:1
MenuButtonMinimalPerf.default 1698 1717 0.99:1
AttachmentSlotsPerf.default 1187 1212 0.98:1
HeaderSlotsPerf.default 837 853 0.98:1
InputMinimalPerf.default 1306 1326 0.98:1
SegmentMinimalPerf.default 362 368 0.98:1
RosterPerf.default 1239 1276 0.97:1
TableManyItemsPerf.default 2090 2150 0.97:1
TreeWith60ListItems.default 186 192 0.97:1

@Hotell Hotell marked this pull request as ready for review June 1, 2021 10:28
@Hotell Hotell requested a review from a team as a code owner June 1, 2021 10:28
@Hotell Hotell enabled auto-merge (squash) June 1, 2021 10:30

// 4. move stories to package
moveStorybookFromReactExamples(tree, options);
deleteProjectFolderInReactExamples(tree, options);
Copy link
Member

Choose a reason for hiding this comment

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

Oops just realized we should move the dependency from react-examples

Copy link
Contributor Author

Choose a reason for hiding this comment

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

you meant remove right ?

Copy link
Member

Choose a reason for hiding this comment

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

yeah remove

Copy link
Member

Choose a reason for hiding this comment

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

at least I don't think stories depend on each other currently 😨😨

Copy link
Contributor Author

Choose a reason for hiding this comment

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

done #18402 thx!

@Hotell Hotell merged commit 611c422 into microsoft:master Jun 1, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants