【Angular】AngularでStorybookを使ってみた

概要

今回はAngularでStorybookを使用したサンプルです。

Storybookとは

• Angular、React、Vueなどでコンポーネントを分離して開発するためのツールです。
• 小さく定義したコンポーネントを一覧化して確認が出来ます。
• Addonを追加することで、Storybookに様々な機能を追加できます。 storybook.js.org

実行環境

• Node.js - 12.x

使用ライブラリ

• Angular - 9.1.x
• @storybook/angular - 5.3.x

サンプルソース

src/app/custom-button.component.ts

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

@Component({
  selector: 'custom-button',
  template: `<button>{{ label }}</button>`,
})
export class CustomButtonComponent {
  @Input() label = 'button';
}

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

• storiesファイルにCustomButtonComponent を定義します。

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

export default {
  title: 'CustomButton',
};

export const Basic = () => ({
  component: CustomButtonComponent,
});

.storybook/main.js

• storybookの対象ファイルのファイルパスを指定します。

module.exports = {
  stories: ['../src/**/*.stories.[tj]s'],
};

.storybook/tsconfig.json

• Storybook用のTypeScriptのコンパイル構成を定義します。

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

実行

• start-storybook -p 8080 で実行できます。（-p 8080 はポート番号）
• http://localhost:8080/ にブラウザからアクセスすることで、Storybookの確認が出来ます。

サンプルソース一式

github.com

おわりに

• プロジェクトで使用する共通コンポーネントを Storybook に登録しておくと、デザイン作成時に再利用しやすくなるので便利です。