Migrate from storybook#

If you use the old storybook syntax with .storiesOf, you can use the vitro codemod package to automatically migrate to new CSF syntax

For example this code

tsx
1
stories
2
    .add('story1', () => <Button label='Story 1' />)
3
    .add('second story', () => (
4
        <Button label='Story 2' />
5
    ))

Will be converted to

tsx
1
export const Story1 = () => <Button label='Story 1' />
2
export const SecondStory = () => <Button label='Story 2' />

sh
1
npm i -g @vitro/codemod
2
vitro-codemod --help

Now you can run the codemod on your stories files

sh
1
vitro-codemod storybook 'src/**/*.story.jsx'

If you also want to rename the files you can add --rename

sh
1
vitro-codemod storybook 'src/**/*.story.jsx' --rename .story.jsx:.vitro.jsx

To only see what file would change you can pass the --dry flag