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

chore(v0 docs): Add storybook stories that reference docsite examples for 1JS VR tool migration #25663

Merged
merged 66 commits into from
Dec 1, 2022

Conversation

TristanWatanabe
Copy link
Member

@TristanWatanabe TristanWatanabe commented Nov 14, 2022

Story:

  • We have current plans to migrate to using the 1JS Visual Regression Tool ([Epic]: Visual Regression Tool Migration #25078) by the end of the year. The current react-northstar VR test setup is incompatible with 1JS's tool because it does not use storybook. 1JS's tool StoryWright heavily relies on storybook stories to work correctly. In an effort to reduce as much friction as possible, the following changes below were made to simplify the transition from Screener to 1JS's VR tool for react-northstar

Changes:

  • Adds a vr-tests subfolder to house .stories.tsx files to be used by the new 1JS VR Tool.
  • Stories generated by importing components currently used for Screener tests from @fluentui/docs examples
    • Any components from packages/fluentui/docs/examples/components/** that don't have any special .steps. suffix in its file name are combined together in a {ComponentName}.stories.tsx file and all those components are re-exported as stories (example).
    • Any components from packages/fluentui/docs/examples/components/** that contain .steps. in its filename will have its own separate {fileName}.stories.tsx file created where its wrapped by a decorator that contains those specific steps (example).
    • Different Theme variants are handled by the getThemeStoryVariant utility function which returns a story with the appropriate Theme provider decorator. Component examples that had the ALL_THEMES config in their corresponding .steps. file use the getThemeStoryVariant utility in their new .stories. file to provide same functionality (example).
  • Adds storybook main.js and preview.js files
  • Adds start:storybook and build:storybook scripts to package.json

Related Issue(s)

Part of #25078

@TristanWatanabe TristanWatanabe marked this pull request as ready for review November 14, 2022 23:51
@TristanWatanabe TristanWatanabe requested a review from a team as a code owner November 14, 2022 23:51
"lint": "eslint --ext .js,.ts,.tsx .",
"lint:fix": "yarn lint --fix",
"start": "gulp docs",
"screener:build": "yarn build:storybook",
Copy link
Member Author

Choose a reason for hiding this comment

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

Using the name screener here to simplify and align with current template we have while running the VR tool. Will be renamed (along with others) once we completely remove screener.

@khmakoto khmakoto added Fluent UI react-northstar (v0) Work related to Fluent UI V0 and removed Fluent UI react-northstar labels Nov 30, 2022
@TristanWatanabe TristanWatanabe merged commit 0e6c43d into microsoft:master Dec 1, 2022
@TristanWatanabe TristanWatanabe deleted the add-stories-to-v0 branch December 1, 2022 23:12
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Dec 2, 2022
* master:
  fix: Pressed and Hover states for toolbar buttons (microsoft#25835)
  feat: add large size for toolbar (microsoft#25830)
  applying package updates
  adding perf test for Persona (microsoft#25863)
  fix: Fixing Slider's programmatic focus (microsoft#25869)
  chore(v0 docs): Add storybook stories that reference docsite examples for 1JS VR tool migration (microsoft#25663)
  fix: Respecting user-provided ids in ComboBox options (microsoft#25867)
  refactor(scripts): more domain boundaries encapsulation (microsoft#25851)
  docs: add documentation about how to migrate V0 createSvgIcon (microsoft#25828)
  support cross story linking and create example in Menu story (microsoft#25850)
Hotell pushed a commit to Hotell/fluentui that referenced this pull request Feb 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Fluent UI react-northstar (v0) Work related to Fluent UI V0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants