共通コンポーネントの説明書をStorybookで作ってみた【Angular】

## はじめに

「共通コンポーネントをみんなに使ってもらう時、いちいち使い方を説明するのはしんどそう」
という事で、[**Storybook**](https://storybook.js.org/)というコンポーネントカタログを使い、サンプルと説明を合わせて見せられる状態を作ってみました。

こんな感じです。
![storybook_addon-docs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536107/51cf5bc5-eb6b-a3ee-a42e-82a232e97c05.png)
これを ↓ の流れで作ってみたので書いていきます。

1. Librayの作成
1. Storybookの導入
1. storyを追加
1. addon-docsを使って見せ方を変える

---  

## :pick: Libraryの作成

今回は共通コンポーネントの配布を予定していた為、Libraryを作りました。
「そんなの知ってる」 or 「配布しない」といった方は読み飛ばしてください。

1. ライブラリを作成します

    ```
    ng g library shared
    ```

1. コンポーネントを作成します
 
    ```
    ng g component Hogehoge --project shared
    ```

1. コンポーネントの中身を実装します

1. 作ったコンポーネントを使えるよう、エクスポートします
`shared.module.ts`  

    ```
    @NgModule({
        exports: [SharedComponent,HogehogeComponent]
    })
    ```

1. ライブラリをビルドします

    ```
    ng build --project=shared
    ```

これで`dist/shared`が作られたと思います。これを配布して使ってもらいます。

---  

## :pick: Storybookの導入

ライブラリの説明書を作っていきます。
導入方法は[**ここ**](https://storybook.js.org/docs/guides/guide-angular/)の通りです。

1. 自動セットアップをします  

    ```
    npx -p @storybook/cli sb init --type angular
    ```

1. Storybookを起動します  

    ```
    yarn storybook
    ```

こんな感じになれば成功です
![storybook_start.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536107/7c867cbb-b59d-ae68-1d4e-dfcda3ff4d67.png)

---  

## :pick: storyを追加する

色々書き方があるらしい...今回は **CSF** という書き方で書いていきます。

1. `stories`フォルダに`hogehoge.stories.ts`を作成します。

1. `Hogehoge.stories.ts`にstoryを追加する為に、

    :star: `export default` -> このstory全体の設定

    :star: `export const hogehoge` -> 追加するstory  
を書いていきます。  
`shared.module.ts`  

    ```
    import { moduleMetadata } from '@storybook/angular';
    import { SharedModule } from '../../projects/shared/src/lib/shared.module';
    import HogehogeNote from './HogehogeNote.md';

    export default {
        title: 'HogehogeComponent',
        parameters: {
            notes: { markdown: HogehogeNote }
        },
        decorators: [
            moduleMetadata({
                imports: [SharedModule],
            }),
        ],
    };

    export const story = () => ({
        template: `
        <lib-hogehoge [buttonStyle]="'blue'" [name]="'Hoge'"></lib-hogehoge>
        `
    });
    ```

    【補足】
    - `title:`はこのstory全体のタイトル。
    - `notes:`はコンポーネントの補足情報。手順3にて作成する`.md`を読み込ませています。なくてもよい。
    - `moduleMetadata({imports:[]})`はコンポーネントを動かす際に必要なモジュール等を記載しています。
    - `template:`はCanvasに表示するコンポーネントを記載しています。

1. `hogehogeNote.md`ファイルを作成し、Noteに表示する内容を記載します

1. storybookを起動します

    ```
    yarn storybook
    ```

こんな感じになります。
ここではあらかじめ作っていたHogehogeComponentが表示されています。
Canvasタブ
![storybook_canvas.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536107/34ecd661-83ee-3421-fbcf-fc637c6806e6.png)
Notesタブ
![storybook_notes.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536107/80439662-949a-78a1-c1da-7e3b520879de.png)

---  

## :pick: addon-docsを使って見せ方を変える

[**addon-docs**](https://www.npmjs.com/package/@storybook/addon-docs)というアドオンを使っていきます。

1. 下記コマンドでインストールします

    ```
    yarn add -D @storybook/addon-docs
    ```

1. `.storybook`配下に`presets.js`を作成して以下のコードを追加します

    ```
    module.exports = ['@storybook/addon-docs/angular/preset'];
    ```

1. 下記のコマンドでstorybookを起動します

    ```
    yarn storybook --docs
    ```
    こんな感じになります
    ![storybook_addon-docs_start.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536107/b8740eec-7f13-2a2d-5b5c-52dd062ac695.png)

1. 表示のされ方に合わせてmarkdownやstoryを追加・修正します
    今回は、以下のような修正をしました。
    - `HogehogeNote.md`に記載していた文言の一部を`componentSubtitle`に移動
    - storyを追加し、作ったコンポーネントの使用例を並べる

    `Hogehoge.stories.ts`
    
     ```
    export default {
      ~省略~
      parameters: {
        componentSubtitle: 'Hogehogeのガイド',
        notes: { markdown: HogehogeNote }
      },
      ~省略~
    };
    
    export const story = () => ({
        ~省略~
    });

    export const example = () => ({
        template: `
        <lib-hogehoge [buttonStyle]="'blue'" [name]="'blue'"></lib-hogehoge>
        <lib-hogehoge [buttonStyle]="'blue-border'" [name]="'blue-border'"></lib-hogehoge>
        <lib-hogehoge [buttonStyle]="'yellow'" [name]="'yellow'"></lib-hogehoge>
        <lib-hogehoge [buttonStyle]="'yellow-border'" [name]="'yellow-border'"></lib-hogehoge>
        <lib-hogehoge [buttonStyle]="''" [name]="'none'"></lib-hogehoge>
        `
    });
    ```

できましたーー！お疲れ様です。
![storybook_addon-docs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536107/471073ff-be5f-85a7-abc7-d4bfc9ec2e75.png)

ちなみにビルドは下記コマンドです。

```
yarn build-storybook --docs
```

---  

addon-docs以外にも様々なaddonが公開されており、色々な見せ方・使い方がありそうです。
素敵な使い方があったら教えてください。