【Angular】AngularでStorybookを使ってみた - addon-controls編

概要

• 今回はAngular+Storybookのaddon-controlsを使用したサンプルです。(2020/6/21時点ではβ版です）
• addon-controls は＠Input値変更をStorybook上で確認できるようになります。
• addon-docsのインストールが必須になります。
• Angularでaddon-controlsを使用する場合は、compodoc でドキュメントを出力する必要があります。

github.com

• AngularでのStorybookの設定については以下の記事を参照ください。

kakkoyakakko2.hatenablog.com

kakkoyakakko2.hatenablog.com

実行環境

• Node.js - 12.x

使用ライブラリ

• Angular - 9.1.x
• @compodoc/compodoc - 1.1.x
• @storybook/angular - 6.0.0-beta.31
• @storybook/addon-controls - 6.0.0-beta.31
• @storybook/addon-docs - 6.0.0-beta.31

サンプルソース

src/app/custom-button.component.ts

import { Component, Input, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'custom-button',
  template: `<button (click)="onClick()">{{ label }}</button>`,
})
export class CustomButtonComponent {
  /** ラベル */
  @Input() label = 'button';

  @Input() hige = 'a';

  /** クリックイベント */
  @Output() btnClick = new EventEmitter();

  onClick(): void {
    this.btnClick.emit();
  }
}

src/app/custom-button.component.stories.ts

• component に対象のコンポーネントを指定します。
• export const で定義する箇所に引数がある関数を代入して、その引数(args)をpropsに設定します。

import { CustomButtonComponent } from './custom-button.component';

export default {
  title: 'CustomButton',
  component: CustomButtonComponent,
};

export const Basic = (args: any) => ({
  component: CustomButtonComponent,
  props: args,
});
Basic.args = { label: 'hoge' };

.storybook/main.js

• addons に @storybook/addon-docs と @storybook/addon-controls を追加します。

module.exports = {
  stories: ['../src/**/*.stories.[tj]s'],
  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-controls',
  ]
};

.storybook/preview.js

• documentation.json はcompodocで出力したJSONファイルになります。

import { setCompodocJson } from '@storybook/addon-docs/angular';

// @ts-ignore
// eslint-disable-next-line import/extensions, import/no-unresolved
import docJson from './documentation.json';

setCompodocJson(docJson);

.storybook/tsconfig.json

{
  "extends": "../tsconfig.json",
  "exclude": [
    "../src/test.ts",
    "../src/**/*.spec.ts",
  ],
  "include": [
    "../src/**/*",
  ]
}

実行

• compodoc -p tsconfig.json -d ./docs -s であらかじめcompodocのドキュメントを出力します。
• start-storybook -p 8080 でstorybookを実行できます。（-p 8080 はポート番号）
• http://localhost:8080/ にブラウザからアクセスすることで、Storybookの確認が出来ます。

サンプルソース一式

github.com

おわりに

• Angularの場合、compodocの出力が必要なため若干面倒です。
• Input値を変更しながらコンポーネントごとの動作確認ができるためかなり便利です。