如何在多个前端添加故事书故事目录？

Posted 2023-02-19

【中文标题】如何在多个前端添加故事书故事目录？

【英文标题】：How to add storybook stories directories in several frontends?

【发布时间】：2021-12-22 17:44:56

【问题描述】：

我们希望将我们项目的 Storybook 组件集成到多个目录中，但通过 .storybook/main.js 中的设置访问所有这些组件

我们的目录如下所示： several frontends storybook directory (image)

您也可以查看 Git 存储库：https://github.com/Venture-Capitol

现在我们使用解决方法来注释掉 main.js 配置中不需要的部分，但显然这不是一个长期的解决方案。

看起来像这样：

module.exports = 
stories: [
    // TODO: make all stories visible at the same time

    // --- GPF components ---
    "../../../apps/frontend/src/components/stories/**/*.stories.mdx",
    "../../../apps/frontend/src/components/stories/**/*.stories.@(js|jsx|ts|tsx)",

    // // --- UTR components ---
    // "../../../apps/utr-frontend/components/stories/**/*.stories.mdx",
    // "../../../apps/utr-frontend/components/stories/**/*.stories.@(js|jsx|ts|tsx)",

    // // --- Global components ---
    // "../../components/stories/**/*.stories.mdx",
    // "../../components/stories/**/*.stories.@(js|jsx|ts|tsx)",
],
addons: ["@storybook/addon-links", "@storybook/addon-essentials"],;

有什么建议吗？

提前致谢！！

【参考方案1】：

好吧，我太傻了，我忘了更改单个组件的标题：

import React from "react";
import  action  from "@storybook/addon-actions";

import Button from "../lib/button";

export default 
    title: "Global Button", // -- change title here! --
    component: Button,
;

export const Text = () => (
    <Button onClick=action("clicked")>Global Button</Button>
);

export const Emoji = () => (
    <Button onClick=action("clicked")>
        <span role='img' aria-label='so cool'>
            ? ? ? ?
        </span>
    </Button>
);

【参考方案2】：

glob 模式应该可以解决这个问题

  stories: ['../../**/*.stories.@(js|jsx|ts|tsx|mdx)'],

【讨论】：

不是问题，但无论如何感谢您的快速帮助！认为当其他人搜索它时，它会在 99% 的情况下成为解决方案