storybook相关内容

反应打字脚本故事书使用onChange回调实现定制的输入组件,然后将setState值返回到输入

我目前正在实现一个带有故事书的Reaction定制输入组件。 我希望实现的是这个自定义的输入组件将使用几个参数,其中一个参数是onChangeInput,它将负责稍后为‘InputValue’设置State值,以下是我的主要输入组件实现: Input.tsx import React from 'react' export type Props = { /** * This ..
发布时间:2022-08-18 11:33:29 其他开发

在故事书中提供全球可用的JEST

我正在@storybook/react项目中使用@storybook/react6。 我对我的所有存储/对象等进行了数千次测试和模拟。 这些模拟使用jest.fn()。 我想在我的故事书故事中重复使用这些模拟,但它说jest is not defined,这很有意义。 我想知道是否有一种简单的方法可以在运行故事书时使Jest在全球范围内可用。 目前,我正在使用的每个模 ..
发布时间:2022-08-09 09:28:40 前端开发

未在Storybook版本中显示的顺风CSS类

我正在尝试使用顺风CSS来构建我的故事书。当运行build-storybook时,组件使用顺风类呈现。遗憾的是,当我构建故事书并使用npx http-server storybook-static运行Create Buildstorybook-static时,类没有加载到故事中,并且组件显示为未设置样式。 这是我的项目的复制品: https://gitlab.com/ens.evelyn.d ..
发布时间:2022-04-24 14:47:33 前端开发

REACT组件库呈现REACT链接

我开发了一个Reaction组件库,我正在从我的一些项目中使用它。 其中一个是故事书,所以我创建了一个BrowserRouter装饰器来添加到我的故事中,组件完美地呈现出来,只是为了展示和发挥作用。 但是,当使用来自另一个项目的一些组件时,该项目在我的应用程序组件树的顶层具有BrowserRouter,我收到以下错误: Error: Invariant failed: You s ..

如何配置 Storybook.js Webpack 以使用 Next.js 项目中 CSS 模块中的绝对图像路径?

我正在尝试将 Storybook 配置为与 Next.js、Ant Design、Less 和 TypeScript 一起使用.在 Next.js 中,图像必须存储在 public/ 文件夹中,并使用在整个项目中使用的绝对路径进行引用.我在配置 Storybook.js webpack 以解析这些绝对图像路径时遇到问题. 例如,在 CSS 模块中我可以: .testImage {背景图片: ..
发布时间:2022-01-08 23:28:44 前端开发

Storybook 不懂按需导入 antd 组件

我已按照说明此处获取antd 与 CRA 配合得很好.但是在从 storybook 使用它时,我遇到了一个错误: 针对 mixin 构建失败并显示消息 Inline JavaScript is not启用.它是否在您的选项中设置? 我已经修复以下关于我在这里提出的问题的建议. 现在,storybook 理解 antd 但不能按需导入组件.babel 需要单独配置 storyboo ..
发布时间:2021-11-28 18:03:07 其他开发

Storybook 不理解按需导入 antd 组件

我已按照说明此处获取antd 与 CRA 配合得很好.但是在故事书中使用它时,我遇到了一个错误: 针对 mixin 构建失败并显示消息 Inline JavaScript is not启用.它是否在您的选项中设置? 我已经修复以下关于我在这里提出的问题的建议. 现在,storybook 理解 antd 但不能按需导入组件.babel 需要单独配置 storybook 吗? ..
发布时间:2021-11-11 03:24:14 其他开发

如何使用 Shebang Loader 配置 Webpack 以忽略 Hashbang 将 Cesium React 组件导入 Typescript React 组件

我正在尝试创建一个故事书测试,该测试在使用 typescript、babel 和 webpack 的模块中使用 react 组件.我的 Map react 组件引用并使用了 cesium 和 cesium-react 组件. 当我尝试运行 start-storybook(纱线故事书)时出现错误: ./node_modules/requirejs/bin/r.js 中的错误模块解析失败:意 ..
发布时间:2021-09-23 19:01:27 其他开发

使用故事书中的本机矢量图标来反应本机 Web 问题

我使用 React Native Web 创建了一个项目,并且我得到了适用于 Web 和移动设备的 React Native 图标,除了故事书.我不确定如何告诉 storybooks webpack 配置加载 FontAwesome 字体.我尝试在 preview-head.html 中添加 FontAwesome 但仍然没有显示图标只是一个矩形作为占位符.我想要的是让我的图标显示在 storyb ..
发布时间:2021-08-30 20:14:11 前端开发

用于设置服务器 url 的 Storybook 添加

我们正在使用 storybook 来构建 ui 组件.Ui 组件与一些数据相关,在这种情况下是 REST-Server.在操作中,我可以添加自定义数据,但我想通过 axios 加载数据.我为此实现了小型 API 库. 问题:是否可以从故事书 UI 设置故事书的全局参数?像服务器网址和身份验证令牌? 解决方案 现在可以使用插件:https://github.com/ArrayKnigh ..
发布时间:2021-08-30 20:14:08 其他开发

如何从反应项目中删除故事书

如何从 react 项目中卸载 storybook?我应该使用什么命令来卸载故事书? 解决方案 他们没有自动执行此操作的 cli 命令.按照以下步骤从您的项目中删除故事书 删除你的故事 删除 .storybook 文件夹 删除添加到 package.json 的脚本 从 package.json 中删除所有故事书相关的依赖 运行 yarn 或 npm 来更新锁文件 St ..
发布时间:2021-08-30 20:14:05 其他开发

如何通过 @storybook/addon-contexts 在 vue js 项目中使用 storybook 切换语言环境

我正在寻找能够在故事书中从 vue-i18n 切换语言环境的示例.我找到了这个 addon-context story 在官方故事书 github 上,但我在制作作品时遇到了一些困难. 我使用的是 storybook v5.3、vue.js v2.6 和 vue-i18n v8.15.4. 目前,我有 2 个条目(英语和法语)的地球图标.但是当我切换时,它对 vue-i18n 语言环境 ..
发布时间:2021-08-30 20:14:02 前端开发

无法读取未定义的属性“移动" - Vue/Vuetify/Storybook

我在渲染“画布"时遇到问题使用 vue 和 vuetify 显示我的故事书的故事.我有其他组件工作正常,但这个没有.似乎我的故事无法识别 vuetify 的这种“移动"属性.此外,我没有找到仅在此组件中调用此属性的确切位置或原因,我尝试从组件中删除与移动相关的所有 scss,但没有成功. 它显示以下错误: TypeError: 无法读取未定义的属性 'mobile'在 VueCompone ..
发布时间:2021-08-30 20:13:59 前端开发