在演示頁面中安裝和使用 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

看起來您最終要嘗試擁有多個源目錄。 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)',
],

這指定了哪些文件應該被解釋為故事，在我們的例子中，它將從demo文件夾中遞歸加載*.stories.mdx / js / jsx / ts / tsx 。

另請注意， stories文件夾只是 Storybook 創建的示例文件夾，您可以安全地刪除它。 故事可以位於 TypeScript 處理的任何目錄中，只要它與.storybook/main.js中指定的模式匹配即可。

您甚至可以在一個項目中擁有多個具有多個配置的故事書，但這可能不是您所追求的。 不過，以防萬一，命令將是start-storybook -p 6006 -c path/to/config/.storybook

Answer 2

如果我理解正確，您想構建一個組件庫並為您的組件提供演示應用程序。

我認為沒有辦法在現有應用程序中使用 Storybook。 這意味着您必須構建您的演示應用程序並使用 Storybook 中的一些組件來展示您的應用程序中的案例組件。 據我所知，這是不可能的。 可能是這樣，但它似乎很復雜，我不知道這方面的任何文檔。

我認為 Storybook 應用程序是（或應該是）您的演示應用程序。 Storybook 可以渲染mdx文件，因此您可以向其中添加任何內容並獲得演示應用程序。

你可以嘗試什么：

1. 將您的演示應用內容和組件故事移動到demo文件夾
2. 將Home.tsx遷移到mdx文件
3. 更改 Storybook 的配置以從“/demo”加載故事

在某種程度上，您可以更改 Storybook 的樣式並“使其成為您自己的” ，這可以成為您的演示應用程序。

---

在我發現 Storybook 之前，我使用了一個帶有react-live的自制組件展示案例應用程序。 可能想看看它，但我認為 Storybook 更好，更容易維護。