chore: convert stories to CSF format for typescript stories #253
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
the addon.ts and config.ts file name convention from <=5.2 has been deprecated
The tsx parser AST the word "StringLiteral" instead of "Literal", which the js parser AST uses. Because of this, the `storiesOf` stories were being filtered out, and nothing was being modified. Now it works for tsx.
it seems necessary for CSF to work. note that this path is much less flexible than the current one: it only looks for stories in packages/component-library/ I couldn't get the regex or glob to work in the new format, so this will fixed in a later release. Currently this is the only directory where stories are found.
mbylstra
changed the title
sebpearce
approved these changes
Jan 31, 2020
This was referenced Feb 3, 2020
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
branch preview: https://dev.cultureamp.design/dst/upgrade-to-storybook-csf-format/storybook/
Description
Component Story Format is the new format for writing stories. The previous
storiesOfformat still works, but is deprecated. The new format makes reading documentation much easier: all the docs use the new format and unlocks a lot of potential such as per-story configuration.Implementation
Storybook provides a codemod for automatically upgrading stories to CSF format, but I found that it only works on
.jsfiles, not.tsx. I forked the codemod and fixed it to work on.tsx(https://github.com/cultureamp/kaizen-design-system/pull/253/files#diff-bf825ed2953e17e484e5afe43ad58c6a). This was used to automatically upgrade all of our stories. I've created an issue in the Storybook repo here: storybookjs/storybook#9669, and I hope to submit a PR so others can benefit.Changes:
main.jsas this is the new convention for 5.3.x (see caveats section)storiesOfthat was forked from the offical Storybook codemod. The difference is that the fork works on Typescript instead of plain JS.Caveats:
stories: ["../packages/component-library/stories/*.stories.tsx"],). I ran into trouble getting the previous regex or the glob syntax working with this new format. Previously it would find any story in thepackagesdirectoy, now it will only find stories in the/packages/component-library/storiesdirection, which is the only place they are currently found, so it's not a breaking change. I'd like to fix up the regex/glob in a future PR.storiesOfstories that are dynamically generated by https://github.com/cultureamp/elm-storybook. Becuase of this, the console will spit out a lot of"Illegal mix of CSF default export and storiesOf calls in a single file"errors, becausestoriesOfis being deprecated. I think updating https://github.com/cultureamp/elm-storybook to use CSF would not be difficult (does not require a codemod), but I ran out of time. We might run into future problems if we want to actually use some of the new CSF features like per-story configuration, but I think it's feasible to work that into the elm package.