NX Monorepo中搭建统一Storybook实例展示共享UI组件

1. 生成独立的Storybook应用项目 #

在你的NX Monorepo根目录执行以下命令，创建一个专门用来展示组件的独立Storybook应用：

nx generate @nx/angular:application storybook-shared-ui --style scss --routing false
nx generate @nx/storybook:configuration storybook-shared-ui --ui-framework @storybook/angular

这个项目是独立的，并非绑定到某个库，专门用来承载shared-ui组件的Story展示。

2. 为shared-ui组件编写Story #

• 进入新生成的Storybook项目的src/stories目录，给shared-ui里的每个组件创建对应的Story文件（比如button.stories.ts）。
• 直接导入shared-ui的组件编写Story，示例如下：

import { Meta, Story } from '@storybook/angular';
import { ButtonComponent } from '@your-workspace/shared-ui';

export default {
  title: 'Shared UI/Button',
  component: ButtonComponent,
  argTypes: {
    label: { control: 'text' },
    variant: { control: 'select', options: ['primary', 'secondary'] }
  }
} as Meta;

const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
  component: ButtonComponent,
  props: args
});

export const Primary = Template.bind({});
Primary.args = {
  label: 'Primary Button',
  variant: 'primary'
};

3. 构建与部署 #

• 本地验证：运行nx run storybook-shared-ui:storybook，确认能正常看到shared-ui的所有组件展示。
• 生成静态文件：执行nx run storybook-shared-ui:build-storybook，构建产物会放在dist/storybook/storybook-shared-ui目录。
• 部署静态文件：把这个目录下的文件上传到你指定的托管服务（比如Nginx、Netlify等），UX人员就能随时访问查看最新的组件状态。

可选优化 #

• 配置NX的CI/CD流程，当shared-ui库的代码变更时，自动触发Storybook的构建和部署，确保展示内容始终同步。
• 统一Story的编写规范，比如添加组件说明、参数注释、多状态示例，让UX人员能更清晰地了解组件的用法和效果。

内容的提问来源于stack exchange，提问作者Guido