CODEWITHSUNDEEP
javascriptreactjscomponentsstyled-componentsstorybook
Brandon
Brandon

Reputation: 1617

How to convert storybook nested storiesOf api into CSF format

I am currently converting storybook.js from StoriesOf format to Component Story Format (CSF).

Currently, I have a folder using the storiesOf structure for all form components. For example:

storiesOf('Forms/Input', module)
  .add('with defaults', () => (
    <Input type="text" input={{ name: 'x' }} />
  ))
  .add('with disabled', () => (
    <Input type="text" input={{ name: 'x' }} disabled />
  ));

storiesOf('Forms/Checkbox', module).add('with defaults', () => (
  <Checkbox input={{ name: 'x' }} />
));

Above contains 2 examples, an Input which contains 2 options and a Checkbox with only the default. The CSF format has one default export at the top like so:

export default { title: 'Forms' }

But each file can have only 1 default export, so how would I simultaneously export Input and Checkbox in the same file?

As a sidenote - storybooks.js has a migration script which can be used to automatically convert all stories to their new format. However, whenever I run the script, it will stall rather quickly and I have yet to find a solution to this issue.

Below is the output:

➜ ✗ npx -p @storybook/cli sb migrate storiesof-to-csf --glob "**/*.stories.js" 
=> Applying storiesof-to-csf: 120 files
Processing 120 files... 
Spawning 11 workers...
Sending 11 files to free worker...
Sending 11 files to free worker...
Sending 11 files to free worker...
Sending 11 files to free worker...
Sending 11 files to free worker...
Sending 11 files to free worker...
Sending 11 files to free worker...
Sending 11 files to free worker...
Sending 11 files to free worker...
Sending 11 files to free worker...
Sending 10 files to free worker...

I also tried the same thing with 1 file and it didn't work any better.

➜ ✗ npx -p @storybook/cli sb migrate storiesof-to-csf --glob "./path-to-file/components/button/button.stories.js"
=> Applying storiesof-to-csf: 1 files
Processing 1 files... 
Spawning 1 workers...
Sending 1 files to free worker...

Upvotes: 3

Views: 2387

Answers (1)

Srikar Samudrala
Srikar Samudrala

Reputation: 36

You won't be able to export and import Checkbox and Input simultaneously. You need to create separate files for both Checkbox and Input. If you use the latest version of the codemod, it is asking us to do the same.

WARN Found 2 'storiesOf' calls, PLEASE FIX BY HAND: 'src/components/elements/Button.stories.js'

Also refer the same from the codemod's official docs:

NOTE: The output of this transformation may require manual editing after running the transformation. storiesOf API allows multiple "kinds" (components) to be declared per file, but CSF only allows a single component per file. Therefore, if you use this feature in your input stories, you will need to split up the resulting outputs by hand. You'll see a warning at the console if you need to hand edit.

Offical Docs

Upvotes: 2

Related Questions