現在是把元件從專案中獨立出來了，但還只能從專案上去看到元件所呈現的結果，為了之後開發元件方便，來給元件庫加上 storybook 吧。

可以直接將剛剛建好的 react-components 添加上 storybook ，不過如果之後分開幾個不同種類的元件庫，每個獨有一個 storybook ，要分別開啟的話也是麻煩，所以乾脆見一個專門的 storybook ，反過來將元件引入後呈現。

pnpm exec nx g @nx/react:library ui/react-storybook

建好一個標準的 react lib ，再來加上 storybook 功能。

pnpm add -D @nx/storybook

pnpm exec nx g @nx/storybook:configuration ui-react-storybook

這時已經可以開啟 storybook 頁面來看了。

pnpm exec nx storybook ui-react-storybook

目前的 storybook 還是空無一物，要設定讓他自己去找其他 lib 中定義的 story 來用。

首先回到 react-components 建立 story。

// libs/ui/react-components/src/lib/AppBar.stories.tsx
import type { Meta } from '@storybook/react';
import AppBar from './AppBar';

export default {
  title: 'AppBar',
  component: AppBar,
} as Meta;

export const Primary = {};

接著設定 storybook 查詢 story 的範圍

// libs/ui/react-storybook/.storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
	// 讓 storybook 去找所有 ui lib 的 story
  stories: ['../../../**/ui/**/src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
  framework: {
    name: '@storybook/react-vite',
    options: {
      builder: {
        viteConfigPath: 'libs/ui/react-storybook/vite.config.ts',
      },
    },
  },
};

export default config; 

這樣重新整理後就會出現其他 lib 定義的 story 了。

為了讓開發期間 storybook 會自動因變更程式碼而更新，不用一直重整，改點設定。

// libs/ui/react-storybook/tsconfig.storybook.json
{
	//...
  "include": [
    "../../../**/ui/**/src/**/*.stories.ts", // 變更 watch 的範圍
    "../../../**/ui/**/src/**/*.stories.js",
    "../../../**/ui/**/src/**/*.stories.jsx",
    "../../../**/ui/**/src/**/*.stories.tsx",
    "../../../**/ui/**/src/**/*.stories.mdx",
    ".storybook/*.js",
    ".storybook/*.ts"
  ]
}

這樣就有方便開發元件的環境了。