Package Exports

@storybook/codemod

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@storybook/codemod) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Storybook Codemods

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

Installation

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/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" />
)))