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.
Storybook Codemods
Storybook Codemods is a collection of codemod scripts written with JSCodeshift.
It will help you migrate breaking changes.
Installation
npm install @storybook/codemod
Transforms
add-organisation-to-package-name
Updates package names in imports to include our organisation name prefix
(@storybook/
), stripping off the old @storybook/
prefix.
> jscodeshift -t add-organisation-to-package-name path/to/source.js
Example:
import { storiesOf } from '@kadira/storybook';
becomes
import { storiesOf } from '@storybook/react';