@storybook/codemod

Storybook Codemods

Storybook Codemods is a collection of codemod scripts written with JSCodeshift. It will help you migrate breaking changes & deprecations.

CLI Integration

The preferred way to run these codemods is via the CLI's migrate command.

To get a list of available codemods:

npx sb migrate --list

To run a codemod <name-of-codemod>:

npx sb migrate <name-of-codemod> --glob="**/*.stories.js"

Installation

If you want to run these codemods by hand:

yarn add jscodeshift @storybook/codemod --dev

• @storybook/codemod is our collection of codemod scripts.
• jscodeshift is a tool we use to apply our codemods.

After running the migration commands, you can remove them from your package.json, if you added them.

How to run a codemod script

From the directory where you installed both jscodeshift and @storybook/codemod run:

Example:

./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/transforms/upgrade-hierarchy-separators.js . --ignore-pattern "node_modules|dist"

Explanation:

<jscodeShiftCommand> -t <transformFileLocation> <pathToSource> --ignore-pattern "<globPatternToIgnore>"

Transforms

upgrade-hierarchy-separators

Starting in 5.3, Storybook is moving to using a single path separator, /, to specify the story hierarchy. It previously defaulted to | for story "roots" (optional) and either / or . for denoting paths. This codemod updates the old default to the new default.

./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/transforms/upgrade-hierarchy-separators.js . --ignore-pattern "node_modules|dist"

For example:

storiesOf('Foo|Bar/baz');
storiesOf('Foo.Bar.baz');

export default {
  title: 'Foo|Bar/baz.whatever',
};

Becomes:

storiesOf('Foo/Bar/baz');
storiesOf('Foo/Bar/baz');

export default {
  title: 'Foo/Bar/baz/whatever',
};

csf-hoist-story-annotations

Starting in 6.0, Storybook has deprecated the .story annotation in CSF and is using hoisted annotations.

./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/transforms/csf-hoist-story-annotations.js . --ignore-pattern "node_modules|dist" --extensions=js

For example:

export const Basic = () => <Button />
Basic.story = {
  name: 'foo',
  parameters: { ... },
  decorators: [ ... ],
};

Becomes:

export const Basic = () => <Button />
Basic.storyName = 'foo';
Basic.parameters = { ... };
Basic.decorators = [ ... ];

The new syntax is slightly more compact, is more ergonomic, and resembles React's displayName/propTypes/defaultProps annotations.

Learn more about Storybook at storybook.js.org.

Similar packages

Other packages similar to @storybook/codemod

jscodeshift

jscodeshift is a toolkit for running codemods over multiple JavaScript or TypeScript files. It provides a more general-purpose approach compared to @storybook/codemod, which is specifically tailored for Storybook-related transformations.

react-codemod

react-codemod offers a collection of React-specific transformations to help update React APIs and patterns. While it targets React specifically, unlike @storybook/codemod, it does not focus on Storybook configurations or story formats.