[!注意] 这是从 @takuma-ru/auto-story-generator（不支持 Angular）分叉而来。这是为了扩展 @takuma-ru/auto-story-generator 并支持 Angular。

auto-angular-story-generator

描述

从 React、Vue、Angular 和 Lit 组件文件自动实时生成 story 文件

快速开始

1. 安装软件包

npm i auto-angular-story-generator

2. 添加配置

在 Storybook 的 main.ts 中添加设置 (./storybook/main.ts)

对于 React, Vite

import type { StorybookConfig } from "@storybook/react-vite";

import { mergeConfig } from "vite";

import autoStoryGenerator from "@takuma-ru/auto-story-generator";

const config: StorybookConfig = {
  viteFinal: async (config) =>
    mergeConfig(config, {
      plugins: [
        autoStoryGenerator.vite({
          preset: "react",
          imports: ["src/components/**/*.tsx"],
        }),
      ],
    }),
};

export default config;

[!警告]
不要立即在你的应用上运行此插件（Angular 部分）。请在一个示例应用上测试它，或创建一个新的 Angular 应用。

[!注意] Angular 功能正在开发中。目前只能创建一个基本的 story。请根据需要修改创建的 stories。将尝试改进 story 的创建。

对于 Angular Webpack 自定义配置

import type { StorybookConfig } from "@storybook/angular";

import autoStoryGenerator from "@takuma-ru/auto-story-generator";

const customConfig = {
  webpackFinal: async (config) => {
    let plugin = autoStoryGenerator.webpack({
      preset: "angular",
      imports: ["**/src/**/*.component.ts"],
    });
    config.plugins.push(plugin);
    return config;
  }
}

const primeConfig: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/angular",
    options: {},
  },
  // spread the object here instead of mergeConfig(avaialable for vite) 
  ...customConfig,
  docs: {
    autodocs: "tag",
  },
};

export default primeConfig;

[!注意] 在 Angular 中，首次创建 story 时会发生运行时错误，可以忽略它。

支持的框架

✅: 已支持 🚧: 开发中 ❌: 不支持 📝: 待实现

框架	支持状态
React	✅
Vue	🚧
Lit	✅
Angular	🚧
Svelte	📝
自定义	📝