在演示页面中安装和使用 Storybook

Question

我正在用 TypeScript 创建一个个人项目。它应该是一个导出 React 组件和 TypeScript 函数的库。因此，我们的想法是将来在 npm 上发布这个库。项目中还有一个演示页面，这是我想使用 Storybook 测试 React 组件的地方。

这是项目的结构：

.
├── demo/              # demo page
│   └── Home.tsx       # where I would like to use Storybook
│   └── index.html
│   └── index.tss
│   └── style.css
├── dist/              # distributable version of app built using Parcel
├── node_modules/      # npm managed libraries
├── src/               # project source code
│   └── lib/           # folder for your library
│      └── myFuncion.ts # function to export
│      └── MyComponent.tsx # react component to export
│   └── index.ts    # app entry point (it simply contains the exports of myFunction and myComponent)
├── .eslintrc.js
├── .gitignore
├── package.json
├── tsconfig.json
├── ...

我已阅读 Storybook 文档，它建议按运行 npx sb init 安装 Storybook。我试过了，但问题是 stories 放在项目 src 目录中，而不是在演示页面中：

.
├── demo/              # demo page
│   └── Home.tsx       # where I would like to use Storybook
│   └── index.html
│   └── index.tss
│   └── style.css
├── dist/              # distributable version of app built using Parcel
├── node_modules/      # npm managed libraries
├── src/               # project source code
│   └── lib/           # folder for your library
│      └── myFuncion.ts # function to export
│      └── MyComponent.tsx # react component to export
│   └── stories/    # Storybook <<---
│   └── index.ts    # app entry point (it simply contains the exports of myFunction and myComponent)
├── .eslintrc.js
├── .gitignore
├── package.json
├── tsconfig.json
├── ...

创建的故事书脚本是这样的：

"scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
},

但我想要这样的东西：

"scripts": {
    "storybook:demo": "start-storybook -p 6006",
    "build-storybook:demo": "build-storybook"
},

那么如何只在演示页面上安装和使用 Storybook？

Answer 1

如果我没理解错的话，您想构建一个组件库并为您的组件创建演示应用程序。

我认为没有办法在现有应用程序中使用 Storybook。这意味着您必须构建演示应用程序并使用 Storybook 中的一些组件来展示应用程序中的案例组件。据我所知，这是不可能的。可能是，但它看起来很复杂，我不知道这方面的任何文档。

我认为 Storybook 应用程序是（或应该是）您的演示应用程序。 Storybook 可以 render mdx 文件，因此您可以向其中添加任何内容并获取演示应用程序。

你可以尝试什么：

将您的演示应用程序内容和组件故事移动到 demo 文件夹
迁移 Home.tsx 到 mdx 文件
更改 Storybook 的配置以从“/demo”加载故事

在某种程度上，您可以 change Storybook's styling 和 “让它成为您自己的”，这可以成为您的演示应用程序。

在我发现 Storybook 之前，我使用了一个 home-made 组件展示案例应用程序和 react-live。可能想看看它，但我认为 Storybook 更好，更易于维护。

Answer 2

看起来您最终想要拥有多个源目录。这是 TypeScript 和 Storybook 都支持的，只需要一点配置。

tsconfig.json 应将 include 选项设置为：

"include": [ "src", "demo" ]

这告诉 TypeScript（或其 Babel 加载器）编译 src 和 demo 中的文件。

.storybook/main.js 应将 stories 选项设置为：

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

这指定哪些文件应该被解释为故事，在我们的例子中它将加载 *.stories.mdx/js/jsx/ts/tsx从 demo 文件夹递归。

另请注意，stories 文件夹只是 Storybook 创建的示例文件夹，您可以安全地删除它。只要符合 .storybook/main.js.

中指定的模式，故事就可以位于 TypeScript 处理的任何目录中

您甚至可以在一个项目中拥有多个具有多个配置的 Storybook，但这可能不是您想要的。不过，以防万一，命令为 start-storybook -p 6006 -c path/to/config/.storybook

在演示页面中安装和使用 Storybook

Install and use Storybook in a demo page

typescript

reactjs

storybook