javascript - 如何为由父组件管理状态的子组件编写storybook

我正在为一个子组件编写 Storybook，其中父组件将管理状态。例如，value（字符串）和 onChange（函数）通过 props 传递。我已经传递了这两个 props，但我不确定如何在 Storybook 文件中更新状态。

文本框.tsx

import React, { FC, HTMLProps } from 'react'; type FirstNameTextFieldProps = HTMLProps<HTMLInputElement> const FirstNameTextField: FC<FirstNameTextFieldProps> = ({ ...restOfProps }) => ( <input type="text" id="fname" name="fname" {...res

阅读更多 →

reactjs - Storybook：如何注解通用参数/属性类型

上下文与代码

我们这样扩展了我们的按钮：

export type ButtonProps<P = Record<string, unknown>> = P & { children: ReactNode | string onClick?: () => void className?: string disabled?: boolean secondary?: boolean } const Button = <P extends Record<string, unknown

阅读更多 →

reactjs - 用 TypeScript 编写的 Storybook 故事文件处理不当

我最近将我的 CRA 项目迁移到了 Next.js。我在那个项目中使用了 Storybook，所以不得不修改很多配置，但仍然存在一些与 TypeScript 相关的问题。

这是我的故事文件的例子。

import { ComponentStory, ComponentMeta } from '@storybook/react'; import Index from 'pages/profile'; export default { title: 'Views/Profile', component: Index, } as ComponentMeta<typeof Index>; export const IndexTemplate: ComponentStory<typeof Index> = (args) => <Index {...args} />;

每当我运行 storybook，'as' 就会出现如下错误：

at P

阅读更多 →

typescript - Yarn 工作区 + Storybook 编译错误

我正在使用一个具有以下结构的 yarn 工作区：

"workspaces": [ "app/*", "packages/*", "utilities/*" ],

我在 Typescript 中编写了一些实用函数，然后在 app/test/index.tsx 文件中导入它

import React from 'react'; import { Stack, Button } from '@mui/material'; import { storybookTem

阅读更多 →

reactjs - 在 Storybook 的全局装饰器中调用 React Hooks

我想为所有故事调用自定义 React Hook，但是，我不确定应该在哪里声明。我想调用的自定义 Hook 必须在上下文提供者中。

有没有方法为所有故事声明上下文提供者和自定义钩子？

import React from 'react'; import { useCustomHooks } from './custom'; import { ThemeProvider } from 'styled-components'; export const decorators = [ (Story) => ( useCustomHooks() // I wanna ca

阅读更多 →

javascript - Storybook inlineStories 可以使用，但会破坏 props 交互

我有一个弹出式媒体图库组件，我需要将其内联使用，以便在 Storybook 中进行文档记录。当我在 '.storybook/preview.js' 中添加以下代码时

export const parameters = { docs: { inlineStories: false, } }

它的工作效果如我所预期，但当我将 inlineStories 设置为 false 时，在 Canvas 上修改属性没有问题，但在 Docs 中，修改没有效果。

为了避免这个错误，我尝试只在弹出组件中添加 inlineStories: false，但是当我这样做时，内联模式也停止工作了。

阅读更多 →

reactjs - Storybook Typescript 不加载新添加的 props 类型，需要重启 storybook

module.exports = { stories: ["../**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"], addons: [ "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/preset-create-react-app", "@storybook/addon-a11y" ], typescript: { reactDocgen: "react-docgen-typescript", reactDocgenTypescriptOptions: { shouldExtractLitera

阅读更多 →

typescript - 在 Storybook 和 Sveltekit 中使用类型

我正在尝试将 Storybook 与 TypeScript 和 SvelteKit 一起使用，尽管这给我带来了一些我似乎无法解决的问题。

import Modal from './Modal.svelte' export default { title: 'Modal', component: Modal, } const Template = (args: any) => ({ component: Modal, props: args, }) export const Primary = Template.bind({}) Primary.args = { text: 'Hello World', }

上述代码在这一行 Primary.args={ 报错如下：

Property 'args' does not exist on type '(args: any) => { component: typeof default;

阅读更多 →

reactjs - 当在函数上调用 shouldHaveBeenCalled 时，storybook + jest 的 play 方法失败

我有这个组件：

import { FC, ReactElement, useState, MouseEvent as ReactMouseEvent, ChangeEvent as ReactChangeEvent, } from 'react'; import { Stack, TablePagination } from '@mui/material'; export const Pagination: FC<IPaginationProps> = ({ total, page = 1, rowsPerPage = 25, position = 'start', rowsPerPageOptions = [10, 25, 50, 100], onPageChange, onRowsPerPageChange, }): ReactElement => { const [localPage, setPage] = useState(page); const [localRow

阅读更多 →

reactjs - 使用 TypeScript 的 Storybook 时出现“未找到模块”或“导入路径不能以 tsx 结尾”

我正在编写一个使用另一个组件的组件，所以我已经写了

在文件 /src/stories/TextArea/TextArea.tsx 中。

然而，这会导致错误

Module not found: Can't resolve '../Text/Text' in '/Users/username/project/

阅读更多 →