网站搜索
typescript - 我如何在 Storybook 中正确处理 Vue 插槽
我正在尝试在 Storybook 中使用 Vue 插槽。我目前使用的是 Storybook v7 beta 版本，因为有一些变化使其对我们的项目更好。我们使用 Vue 3 和 vite。我们还在各处使用 Typescript。
问题是 Storybook 似乎没有提供一种简单的方法来添加 slot 内容。唯一的方法是通过 args 对象，即便如此，你仍然需要使用类似这样的方式才能正确工作：
const meta: Meta<typeof Modal> = { title: 'Componenten/Modal', component: Modal, render: (args: any) => ({ components: { Modal }, setup() { return { args }; }, template: '<Modal v-bind="args" 阅读更多 →angular - Storybook 对某些组件出现“无法读取未定义的属性（读取 'base16'）”错误
我正在尝试在 Storybook 中展示我的 Angular 组件。对于某些组件，这可以正常工作，但对于其他组件，我不断收到这个异常提示：
Cannot read properties of undefined (reading 'base16') TypeError: Cannot read properties of undefined (reading 'base16') at ./node_modules/rfc4648/lib/index.mjs (http://localhost:4400/vendors-node_modules_angular-auth-oidc-client_fesm2020_angular-auth-oidc-client_mjs.iframe.bundle.js:14476:66) at __webpack_require__ (http://localhost:4400/runtime~main.iframe.bundle.js:28:33) at fn (http://localhost 阅读更多 →reactjs - Storybook：在尝试渲染复杂组件时，请求的模块 XXX 没有提供名为 XXX 的导出
我第一次使用 Storybook。到目前为止大部分都能正常工作，但现在我遇到了一个错误，它没有提供太多信息（因为它似乎是错误的）。
这是我正在尝试构建的一个组件库 https://github.com/replyke/base
它有6个组件，应在StoryBook中显示。
其中4个显示正常，但其中两个（StatsBar和Comment）在标题上显示错误。
不过对于这两者，错误在于一个接口没有被导出，但不是针对那个组件，而是针对一个子组件。
例如，StatsBar 给我这个错误，它抱怨 请求的模块 '/src/components/AuthenticationModal/interface.ts' 没有提供名为 'AuthenticationModalProps' 的导出
AuthenticationModal 是 StatsBar 的子组件。在 Comment 组件中也会发生同样的情况。它抱怨其中一个子组件
阅读更多 →javascript - 如何将 .scss 文件和 React 组件的样式加载到 Storybook v7
我正在尝试为我的项目启动 Storybook，但它无法加载我 .scss 文件中的样式。当我在组件中使用内联样式时，一切都正常，但当导入样式时则不行。
以下图片展示了storybook中的不同输出： 使用.scss样式的故事 使用内联样式的故事
在阅读了几个帖子后，似乎这是某种“已知问题”，但对其他人有效的解决方案似乎对我不起作用……也许是因为我最初不是前端开发人员，也许是我错过了一些微不足道的细节，也许我根本不知道自己在做什么。
这些样式都从组件旁边的一个文件中导入：import * as styles from ./STYLESFILE.module.scss。这适用于所有真实组件以及由此产生的所有深度和子文件夹。
TestComp.tsx
import React from "react"; import * as styles from "./test.module.scss"; export const Te 阅读更多 →reactjs - 避免在 Storybook 控件中出现 null 值
我正在使用 class-variance-authority 来创建按钮变体，然后从中推断按钮属性的类型：
const variants = cva( { variants: { intent: { primary: [ ... ], secondary: [ ... ], ghost: [ ... ], }, size: { ... }, }, d 阅读更多 →typescript - Storybook + Vue3 中通过 `defineExpose` 暴露的方法不会自动在 argTable 中显示
我有一个像这样的 CustomInput.vue
<!-- components/input/CustomInput.vue --> <template> <div><!-- some html... --></div> </template> <script setup lang="ts"> ... function reset(): void { // some reset action... } defineExpose({ reset }) </script>我就是这样导出组件的。
// components/input/index.ts import { default as CustomInput } from './CustomInput.vue' type CustomInput = InstanceType&l 阅读更多 →javascript - 在使用 Storybook 时如何更改标签上的标题
为了更清楚说明，我指的标题是在浏览器中 Favicon 旁边的标签页上显示的，当前我的显示是这样的：Example/Button - Docs ⋅ Storybook，我似乎无法去掉 ⋅ Storybook 部分，也无法按我想要的方式编辑它。
addons.setConfig({ theme: create({ brandTitle: "New Title", base: "light", brandImage: logo, }) });并将此添加到 main.ts 配置中
managerHead: (head) => `${head} <script> document.title = 'New Title'; </script> ` ,但是似乎没有什么能改变它。有人知道我该如何改变这个吗？
阅读更多 →reactjs - 使用 Storybook 和 Vitest，模拟模块时抛出异常
我有一个使用 vitest 的 Storybook 设置，我想通过 vitest 在一个故事中模拟一个模块，所以我在我的故事文件的顶部添加了以下内容：
// my-nice-function.stories.tsx import { vi } from "vitest"; vi.mock("../some-module", () => ({ someFunction: vi.fn(), })); // the actual stories below here...但是当我运行这个故事时，会抛出以下错误：
无法读取未定义的属性（读取 'customEqualityTesters'）
现在，堆栈跟踪显示错误是在 http://localhost:6006/node_modules/.cache/storybook/ea2884736a0b9e4a130cf856017239193d1
阅读更多 →javascript - 在 TypeScript 中使用 Vue 的 Storybook 如何从 .storybook.ts 文件导入（Webpack 配置）？
我正在使用 TypeScript 的 Vue 配合 Storybook。目前还没有官方的 TypeScript 配置用于在 Storybook 中使用 Vue。
如何配置 Webpack，以便在 .storybook.ts 中可以从另一个 .storybook.ts 文件导入内容？
目前我遇到一个错误：
ERROR in ./src/components/Button/Button.stories.ts Module not 阅读更多 →javascript - Storybook Addon-Docs 不显示代码片段
我正在使用 Storybook 来可视化和记录我们的 React 组件库。一切运行正常，只是文档页面不显示代码。
项目数据：Typescript，React，Storybook
项目依赖：
"dependencies": { "@types/node": "12.11.1", "@types/react": "16.9.9", "@types/react-dom": "16.9.2", "@types/styled-components": "4.1.19", "react": "16.10.2", "react-dom": "16.10.2", "react-scripts": "3.2.0", "styled-components": "4.4.0", "typescript": "3.6.4" }, "devDependencies": { "@babel/core": "7.6.0", "@storybook/addon- 阅读更多 →