网站搜索
reactjs - Storybook（使用 Vite/Typescript/MDX）不显示 ArgsTable
我正在尝试在 MDX 文档页面上显示带有 props 的表格，但无论我尝试什么，表格总是显示：“未找到该组件的输入。阅读文档 >”
我尝试了几种不同的方法，但似乎没有任何变化。
我尝试了不同版本的react-docgen-typescript、react-docgen-typescript-vite、storybook-react-docgen-typescript-vite和react-docgen-typescript-plugin，但似乎没有什么区别。
这是我的设置：
main.js
const { resolve } = require('path'); module.exports = { stories: ['../src/**/!(Template).stories.@(tsx|mdx)'], addons: [ '@storybook/addon-docs', 阅读更多 →typescript - Vue Storybook 最初无法渲染组件
这个故事书运行良好，只是它最初没有“渲染”组件。
- 您可以在截图中看到，该组件模板以某种方式被使用，否则 storybook 不会知道该组件的基本布局。
- 你也可以看到这些操作已经被正确调用了。
- 我能看到的唯一真正问题是，一开始 Storybook 会尝试改变组件的每一个属性。不知道为什么。
- 此错误出现在 JavaScript 和 TypeScript 文件中。
- 不需要 vue 组件（只改变样式等）的故事似乎能正常工作。
在我使用控件更改任何数值后，一切都能正确呈现。
这是我最短组件的故事：
阅读更多 →reactjs - 使用 Typescript keyof 的 Storybook 控件
我正在为 Storybook 构建一些组件，并在 Typescript 推断类型时遇到了一些小问题。
为了保持代码的 DRY，我宁愿不在故事本身中定义控件的选项，然而它似乎没有正确推断出这些选项。
我有一个 Button 组件，它有一个 'option' 属性。可用的选项是基于主题中的值的字符串：
在 VSCode 中，这显示为字符串键的联合类型（"base" | "brand" | "default" | "ghost" | "ghostWhite" | "link"）是正确的，但在 Storybook 中，这显示为 key 类型（string | number | symbol），并且控件的类型是
阅读更多 →javascript - 在 Angular 库项目上运行 Storybook
我创建了一个新的 Angular 工作区。
ng new workspace --create-application=false cd workspace然后在工作区内生成了一个库。
ng g library lib我还创建了一个用于测试该库的游乐场。
ng g application playground然后我初始化了storybook并尝试运行它。
npx storybook@latest init npm run 阅读更多 →reactjs - Storybook manager.ts 文件触发编译错误
我不明白为什么会发生这种情况，但如果我有一个像这样的简单 manager.ts 文件
import { addons } from "@storybook/addons"; import { create } from "@storybook/theming"; import { palette } from "../theme/src"; // @ds/theme const theme = create({ base: "light", colorPrimary: palette.magenta01, colorSecondary: palette.magenta01, }); addons.setConfig({ theme, });并且在导入中使用别名路径而不是相对路径，它会抛出错误。在 preview.ts 和其他任何 Storybook 配置文件中使用这个别名导入都工作得很好。如果我完全删除
阅读更多 →reactjs - 如何在 'stories' 和 '.storybook' 文件夹之间创建兴趣分离？
上下文
默认情况下，Storybook.js 通过创建两个新文件夹与我现有的 Create-React-App 项目集成：
- src/故事
我不喜欢这个，因为感觉像是利益的混合。Storybook 的目的就是让应用程序的业务逻辑完全分离。
阅读更多 →typescript - 如何将颜色变量同时附加到 Storybook 调色板和组件？
我创建了 UI 组件库，并使用 Storybook 为其提供文档和示例。
我的目标是在 SCSS 文件中声明一个颜色调色板，并在组件以及 Storybook 调色板中使用它。
Storybook 调色板是一个内置的 Storybook 组件，可用于为您的调色板制作文档。
所以我希望如果设计系统的颜色发生变化，我只需更改 SCSS 变量的值，颜色调色板和组件都会使用新的颜色值进行更新。
不幸的是，storybook 文档在这方面很差，示例中只包含硬编码的颜色。颜色调色板页面是 MDX 文件，所以我不知道如何在其中导入和使用 SCSS 变量。
有什么办法实现我的目标吗？
答案＃1
今晚在查找我遇到的同样问题时偶然发现了这个。经过一些谷歌搜索，我还发现了这个：https://dev.to/benrobertson/color-swatches-in-storybook-4aa9。我还没有尝试过，但想着分享一下，以防你想试试。我计划在周末测试一
阅读更多 →javascript - 在 Storybook 7 MDX 中出现“Cannot read properties of null (reading 'classList')”?
最近我将我的项目从 Storybook 6.5 更新到了 7。
所有 Stories 都运行良好，自动文档也很完美。现在我需要为一个 Button 组件编写自定义文档，但当我在使用 Story 标签的 of 属性时，打开文档页面会收到错误。
文档文件被呈现在正确的位置，然后在按钮组件的“Doc”页面中显示。
Button.stories.ts
import { Meta, StoryObj } from '@storybook/angular'; import ScButtonComponent from 'xxx/components/base/button/button.component'; const meta: Meta<ScButtonComponent> = { title: 'Component/Base/Button', component: ScButtonComponent, }; export default meta; type Story = StoryObj< 阅读更多 →typescript - 如何将路径别名添加到 Storybook 的 webpack 配置中？
我正在使用 Storybook 与 nextjs 和 webpack。以下是我的 .storybook/main.ts:
import type { StorybookConfig } from '@storybook/nextjs'; const config: StorybookConfig = { ... framework: { name: '@storybook/nextjs', options: {}, }, ... }; export default config; 阅读更多 →vuejs3 - 在 Storybook 8.0.6、Vue 3.4、Typescript 中 - 如何在一个故事中用不同的子组件填充 Vue 组件的插槽？
我正在使用 Vue 3，并且有一个组件需要根据具体情况显示各种不同的子组件。在 Vue 3 中使用 slot 是实现这一功能的正确方法。我正在使用 Storybook 8 来向利益相关者展示其外观，但我还没有找到在我的生态系统中让它正常工作的办法。
在 Storybook 7 中，我的配置和语法似乎没有问题，但在升级到具有“一级 Vue 支持”的 Storybook 8 后，它不再像以前那样工作。显然我在迁移过程中需要一些帮助，我只是还不清楚需要如何调整我的做法才能让它正常工作。
我应该说，我
阅读更多 →