vite+lit+storybook

2023年06月14日 14:04

参考サイト：https://qiita.com/xrxoxcxox/items/95486bf3b3a6780038b8

・storybookの追加

  1. インストール
    npx storybook init --builder @storybook/builder-vite
     
  2. ブラウザに表示
    npm run storybook
     
    1. srcフォルダ直下にstoryフォルダができる。
      XXX.stories.jsを追加するとコンポーネントのstoryができる。
      import { MyElement } from '../my-element';

      // More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction
      export default {
        title: 'Example/MyElement',
        tags: ['autodocs'],
        render: (args) => `<my-element></my-element>`,
        argTypes: {
          backgroundColor: { control: 'color' },
          onClick: { action: 'onClick' },
          size: {
            control: { type: 'select' },
            options: ['small', 'medium', 'large'],
          },
        },
      };

      // More on writing stories with args: https://storybook.js.org/docs/web-components/writing-stories/args
      export const Primary = {
        args: {
          primary: true,
          label: 'abc',
        },
      };
戻る