storybook のお勉強がてらAngular Material のcomponent をただ並べるだけのstorybook を作ってみようと思ったところ、@storybook/cli では作れなかったので、公式のManual Setup を見ながらセットアップしてstorybook のdemo component が動いたのでメモ。

Step 0: Create Angular workspace

ng new に --createApplication=false のオプションをつけると、src以下のファイルが生成されません。ライブラリ作るときとかに便利です。

storybookの設定を置く.storybook ディレクトリと、実際にstory を書くstories ディレクトリを作っておきます。

ng new sb --createApplication=false
cd sb
mkdir .storybook stories

Step 1: Add dependencies

npm install @storybook/angular --save-dev
npm install babel-loader @babel/core --save-dev

Step 2: Add a npm script

package.json

{
  "scripts": {
    "storybook": "start-storybook"
  }
}

Step 3: Create the config file

srcの下ではなく、storiesの下を見るようにrequire.contextの第1引数を変えます。
あと好み？ですが、第3引数もtsファイルだけにしておきます。

storybook/config.js

import { configure } from '@storybook/angular';

configure(require.context('../stories', true, /.stories.ts$/), module);

Step 4: Storybook TypeScript configuration

exclude の中は一旦消して、includeをstoriesの下を見るように変更します。

.storybook/tsconfig.json

{
  "extends": "../tsconfig.json",
  "exclude": [],
  "include": ["../stories/**/*"]
}

Step 5: Write your stories

stories/index.stories.ts

import { Button } from "@storybook/angular/demo";

export default { title: "My Button" };

export const withText = () => ({
  component: Button,
  props: {
    text: "Hello Button"
  }
});

export const withEmoji = () => ({
  component: Button,
  props: {
    text: "😀 😎 👍 💯"
  }
});

Finally: Run your Storybook

npm run storybook

なんかめっちゃエラー出るけどブラウザでstorybook のdemo component が確認できます！

ついでにgithub pages にdeploy してみる

めっちゃ簡単でした。下記のREADME 通りにやればOK
https://github.com/storybookjs/storybook-deployer

npm i @storybook/storybook-deployer --save-dev