Storybookの使い方

Storybook

画面遷移のモックを開発中のアプリに作成することができるライブラリ。

reactやvueの書き方で既存のプロジェクトに画面遷移のモックを実装できるから学習コストが少ない。

下記参照記事が詳しい。

storybookを理解する

Component Story Format 3.0

例えば、プロジェクトの実装で挨拶ページを作成したいと思ったとする。

下記のようにpugという拡張子のファイルと**.stories.jsというファイルを作成する。

#greeting.pug

mixin Greeting (props = {})
  .container.p-4
    block
    .row
      .col
        p=props.hello_ja
      .col 
        p=props.hello_en

#greeting.stories.js

import startCase from 'lodash/startCase';
import Greeting from './greeting.pug';
import { renderer } from 'storypug';

const { render } = renderer({ startCase });
export default {
  title: '挨拶',
};

export const Basic = () => {
  // setup props
  const props = {
    hello_ja: 'おはよう',
    hello_en: 'hello',
  };

  const contents = `<h3>| 挨拶</h3>`;
  const wrapper = render(Greeting, props, contents);
  return wrapper.$root;
};

これだけで下記のような画面が表示される。