storybook の導入

storybookとは

https://storybook.js.org/ Webコンポーネントの表示をカタログ化して、管理するツール。

Angularプロジェクトに追加する

https://storybook.js.org/docs/angular/get-started/install

npx sb init

npm run storybook

storiesファイルの読み込み設定

.storybook/main.js stories:[...] に記述することで任意のstoriesファイルを読みことができる。

module.exports = {
  "stories": [
    ...
    "../src/app/ui/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  "addons": [
    ...
  ]
}

storiesファイル記述例

import { Story, Meta } from '@storybook/angular';
import { CardOriginComponent } from './card-origin/card-origin.component';

export default {
  title: 'karaage/card-origin',
  component: CardOriginComponent,
  props: CardOriginComponent
} as Meta;

export const Normal:Story<CardOriginComponent> = (args:CardOriginComponent) => ({});
export const InnerText:Story<CardOriginComponent> = (args:CardOriginComponent) => ({
  template: "<card-origin>content</card-origin>",
});

routerlink(RouterModuleを使う場合)

@angular/router/testing の RouterTestingModule を使用する

import { Story, Meta } from '@storybook/angular';
import { moduleMetadata } from '@storybook/angular';

import { CommonModule } from '@angular/common';
import { RouterTestingModule } from '@angular/router/testing';

import { CardOriginArtricComponent } from './card-origin-artric/card-origin-artric.component';
import { CardOriginModule } from '../card-origin/card-origin.module'


export default {
  title: 'karaage/card-origin-artric',
  component: CardOriginArtricComponent,
  props: CardOriginArtricComponent,
  decorators: [
    moduleMetadata({
      imports: [
        CommonModule,
        RouterTestingModule,
        CardOriginModule
      ],
    }),
  ],
} as Meta;

export const Normal:Story<CardOriginArtricComponent> = (args:CardOriginArtricComponent) => ({});

build

npm run build-storybook