install storybook and add stories

[woriwori]

Initialize storybook

Install

dependencies will be installed automatically

$ npx sb init

Config

// main.js

module.exports = {
   stories: ['../src/components/**/*.stories.js'], // changes to the location of your story files
    addons: [ /* ... */ ], // a list of the addons you are using
    framework: '@storybook/react', // after running the above script, storybook set up this field automatically
    webpackFinal: /* ... */ // I use this for alias config (it is the same as jsconfig.json)
}

// preview.js 

import '...css'; // must import global css file

module.exports = {
  // ...
  controls: {
    expanded: true, // expand controls tab
    // ...
  }
}

Structure the stories

• Reference with 10 storybooks best practices
• stay the story files with its component
  • make component's directory : CommonTable
  • not make components's directory : the other components
• One storybook file per component with Playground and Default and the others

Add storybook addons

• @storybook/addon-actions

Fix a bug

I got below error message when I run the storybook script

Default PostCSS plugins are deprecated. When switching to '@storybook/addon-postcss'

So, I fixed this error by running below script

$ npx sb upgrade --prerelease

storybookjs/storybook#12668 (comment)

After that, in preview.js, parameter.core.builder was added and two packages (@storybook/builder-webpack5 and @storybook/manger-webpack5) was installed.

Issues

When I set true for parameter.controls.expanded in preview.js, controls tab must read the prop types of the component.
But, it's not working.
I think this is an issue of a current version. (6.4.19)
(Because I checked other project is working with expanded option. and the version of that project was 6.4.18)
So I will continue to check this issue and a new version of storybook.