ラマンと申します。 私の出身はインドで2年前に日本に来ました。 日本語があまり得意ではありませんので、英語で書かせてもらいます。

What is StoryBook?

• A storybook is a collection of stories.
• Each story represents a single visual state of a component ( by using vuejs, angular or react).
• Technically, a story is a function that returns something that can be rendered to screen.

Why should be use in a company?

• Mainly, this is helpful for UI designers.
• Designer can see if developer is coding in correct manner.
• Also, if any of his/her design is violating any designing rule.
• Designer can check previous components for future .
• Anyone in a company can see different components which can be utilize for any other project or some task within same project.

How to install StoryBook in your local?

mkdir storybookproject
cd storybookproject
npm init
npm install vue —save
npm install vue-loader vue-template-compiler @babel/core babel-loader babel-preset-vue —save-dev
npx -p @storybook/cli sb init --type vue
npm run storybook

What is the folder Structure?

Folder Structure

.storybook:- config files related to addon, storybook, webpack components:- vue components stories:- main file index.stories.js which will call components to display in navigation in storybook.

How to start with StoryBook by using VueJs.

Add below code in storybook config file in storybookproject/.storybook/config.js

import { configure } from '@storybook/vue';

configure(require.context('../src', true, /\.stories\.js$/), module);

add below code in your package.json

"scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  }

execute

npm run storybook

This will execute storybook on 6006 port number. You can change port number.

We will start this with an example. Example:- - Storybook has a component which represents the color code form (in hexadecimal with name) used in a company for designing. - Also while developing developer can see color code and can use in css.

create vue components in

storybookproject/src/components/Color.vue
storybookproject/src/components/ColorWrapper.vue

create a json file which has list of dark and light color names and code. storybook/stories/color.js

Add below code in your index.stories.js

import { storiesOf } from '@storybook/vue';
import { colorData } from './color';
import ColorWrapper from '../src/components/ColorWrapper.vue';

storiesOf('Color-List', module)  
  .addParameters({ viewport: { defaultViewport: 'iphone6' }})
  .add('Dark Color', () => ({
    components: { ColorWrapper },
    data: () => {
      return {
        colorsData: colorData[0],
      };
    },
    template:  '<color-wrapper :colors="colorsData"/>',
  }))
  .add('Light Color', () => ({
    components: { ColorWrapper },
    data: () => {
      return {
        colorsData: colorData[1],
      };
    },
    template:  '<color-wrapper :colors="colorsData"/>',
  }),

Execute

 npm run storybook

Now every developer and designer can use color code. Anyone in company can see different components which can be utilize for any other project or some task within same project.

Addons

Addons are the libraries which will enhance the features of storybook.

Below are few addons with introductions:-

Actions :- To display data received by event. > > npm i -D @storybook/addon-actions >

Add following content to .storybook/addons.js > > import '@storybook/addon-actions/register'; >

Add below code in index.stories.js

storiesOf('Color-List', module)  
  .add('Dark Color', () => ({
    components: { ColorWrapper },
    data: () => {
      return {
        colorsData: colorData[0],
      };
    },
    template:  '<color-wrapper :colors="colorsData"/>',
  }))
  .add('Light Color', () => ({
    components: { ColorWrapper },
    data: () => {
      return {
        colorsData: colorData[1],
      };
    },
    template:  '<color-wrapper :colors="colorsData" @click="action" />',
    methods: { action: action('click on Light Color') },
  }));

Source:- To highlight the component in index.stories.js . This will help developer to identitfy the component when there are N number of components available in storybook.

npm i -D '@storybook/addon-storysource'

Add following content to .storybook/addons.js

import '@storybook/addon-storysource/register';

Add config .storybook/web pack.config.js

module.exports = function({ config }) {
  config.module.rules.push({
    test: /\.stories\.jsx?$/,
    loaders: [
      {
        loader: require.resolve('@storybook/addon-storysource/loader'),
        options: {
          prettierConfig: {
            printWidth: 100,
            singleQuote: false,
          },
        },
      },
    ],
    enforce: 'pre',
  });

  return config;
};

Notes:- To write memo/comment/description for components

npm i -D '@storybook/addon-notes'

Add following content to .storybook/addons.js

import '@storybook/addon-notes/register';

Add below code in index.stories.js

storiesOf('Notes', module)
  .add('Light Color', () => ({
    components: { ColorWrapper },
    data: () => {
      return {
        colorsData: colorData[1],
      };
    },
    template:  '<color-wrapper :colors="colorsData"/>',
  }),
    {
      notes:'This will display light colors use in design',
    }
);

Accessibility:- Helps to show where violations are occured in your component.

npm i -D '@storybook/addon-a11y'

Add following content to .storybook/addons.js

import '@storybook/addon-a11y/register';

Add below code in index.stories.js > > import { withA11y } from '@storybook/addon-a11y'; > > storiesOf('Accessible', module) > .addDecorator(withA11y) > .add('Accessible', () => ({ > components: { MyButton }, > template: "<my-button>Accessible Button</my-button>", > })) > .add('Inaccessible', () => ({ > components: { MyButton }, > template: "<my-button style='background-color: black; color: black'>Inaccessible Button</my-button>", > })); >

Conclusion

• Acessibilty addon helps to enhance UI skills for desgining.
• By using storybook link, developer can share the status of component with desginer and desginer can check violation of any rule simultaneously.
• For future desgining, UI designer can check existing or previous storybook components and also share with other desginer.
• Same component can be used in another task in same project or in different project. For example, developer A from A1 Team can check if component C is already available in B1 Team . If component is already available then can use and modify according to need instead of writing it.

Reference Links

• https://storybook.js.org/docs/basics/introduction/
• https://storybook.js.org/docs/guides/guide-vue/
• https://storybook.js.org/addons/
• https://www.slideshare.net/RamandeepBhatia3/storybook-introduction