@storybook/codemod

What is @storybook/codemod?

The @storybook/codemod package is a collection of codemod scripts that help developers automate the process of making code changes and migrations in projects using Storybook. These scripts are particularly useful for upgrading between major versions of Storybook by automatically adjusting the code to fit new APIs and practices.

What are @storybook/codemod's main functionalities?

Transform Storybook configuration

This feature allows you to automatically transform and update your Storybook configuration files to adhere to new organizational standards or API changes in newer versions of Storybook.

npx @storybook/codemod@latest update-organisation --glob=".storybook/*.js"

Migrate stories to Component Story Format (CSF)

Converts stories written in the older 'storiesOf' format to the newer Component Story Format (CSF), which is more modular and easier to maintain.

npx @storybook/codemod@latest storiesof-to-csf --glob="src/**/*.stories.js"

Rename deprecated addParameters to use args

This script updates the deprecated 'addParameters' method calls in your stories to the new 'args' format, helping you to keep your codebase up to date with the latest Storybook practices.

npx @storybook/codemod@latest add-parameters-to-args --glob="src/**/*.stories.js"

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.

README

Storybook Codemods

---

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

Installation

npm install jscodeshift
npm install @storybook/codemod

• @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/update-organisation-name.js . --ignore-pattern "node_modules|dist"

Explanation:

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

Transforms

update-organisation-name

Updates package names in imports to migrate to the new package names of storybook.

./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/transforms/update-organisation-name.js . --ignore-pattern "node_modules|dist"

There's a mapping of paths we replace but this example explains the gist of it:

Example:

import { storiesOf } from '@kadira/storybook';
import { linkTo } from '@kadira/storybook-addon-links';

Becomes

import { storiesOf } from '@storybook/react';
import { linkTo } from '@storybook/addon-links';

update-addon-info

Replaces the Info addon's deprecated addWithInfo API with the standard withInfo API.

./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/transforms/update-addon-info.js . --ignore-pattern "node_modules|dist"

Simple example:

storiesOf('Button').addWithInfo(
  'simple usage',
  'This is the basic usage of the button.',
  () => (
    <Button label="The Button" />
  )
)

Becomes

storiesOf('Button').add('simple usage', withInfo(
  'This is the basic usage of the button.'
)(() => (
  <Button label="The Button" />
)))

With options example:

storiesOf('Button').addWithInfo(
  'simple usage (disable source)',
  'This is the basic usage of the button.',
  () => (
    <Button label="The Button" />
  ),
  { source: false, inline: true }
)

Becomes

storiesOf('Button').add('simple usage (disable source)', withInfo({
  text: 'This is the basic usage of the button.',
  source: false,
  inline: true
})(() => (
  <Button label="The Button" />
)))