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

Storybook/Export to CodeSandbox #19583

Merged

Conversation

PeterDraex
Copy link
Contributor

@PeterDraex PeterDraex commented Aug 31, 2021

Pull request checklist

Description of changes

This PR adds a "Open in CodeSandbox" button to each Storybook story, when viewed in Docs mode.

Most of the of that facilitates the export is in a Storybook addon, which has its own repository: https://github.com/PeterDraex/storybook-addon-export-to-codesandbox

For export to CodeSandbox to work properly, every story needs to be in its own file. This PR splits Button.stories.tsx so it could serve as an example to other component owners on how to create proper documentation.

TODO in other pull requests

must haves:

  • Put babel plugin into a separate package, make it a peer dependency
  • Create microsoft/fluentui-storybook-addons repository - see https://docs.opensource.microsoft.com
  • Rewrite readme for the storybook addon

nice to haves:

  • When exporting dependencies, use versions from yarn.lock instead of <9.0.0-alpha.60/latest
  • Create a lint rule against relative import to stories (with exception for .md)
  • Enable theme switching

PeterDraex and others added 30 commits July 2, 2021 17:32
Copy link
Member

@ling1726 ling1726 left a comment

Choose a reason for hiding this comment

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

Tested the documentation for:

  • Menu
  • Popover
  • Accordion
  • Button

Export works fine from what I can see 👍

@PeterDraex PeterDraex force-pushed the storybook/export-to-codesandbox branch from cc5a4db to 9f048b9 Compare September 17, 2021 21:42
@PeterDraex PeterDraex merged commit 8952fa6 into microsoft:master Sep 29, 2021
@PeterDraex PeterDraex deleted the storybook/export-to-codesandbox branch September 29, 2021 14:11
mlp73 pushed a commit to mlp73/fluentui that referenced this pull request Jan 17, 2022
Adds a "Open in CodeSandbox" button to stories in Storybook in Docs mode.
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.

8 participants