javascript - Cómo escribir un storybook para un hijo que un padre gestiona el estado

Estoy escribiendo un Storybook para un elemento hijo donde el padre gestionará el estado. Por ejemplo, el value (cadena) y el onChange (función) se pasan a través de props. Tengo ambos props siendo pasados, pero no estoy seguro de cómo actualizar el estado en el archivo de Storybook.

campo de texto.tsx

import React, { FC, HTMLProps } from 'react'; type FirstNameTextFieldProps = HTMLProps<HTMLInputElement> const FirstNameTextField: FC<Fi

Leer más →

reactjs - Storybook: Cómo anotar tipos genéricos de args/props

Contexto y Código

Extendimos nuestro botón así:

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

Leer más →

reactjs - Los archivos de historias de Storybook escritos en TypeScript no se manejan correctamente

Recientemente migré mi proyecto de CRA a Next.js. Estaba usando Storybook en ese proyecto, por lo que tuve que editar muchas configuraciones, pero todavía quedan problemas relacionados con TypeScript.

Este es el ejemplo de mi archivo de historia.

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

Leer más →

typescript - Error de compilación de Yarn workspaces + Storybook

Estoy trabajando con un espacio de trabajo de yarn con la siguiente estructura:

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

Escribo algunas funciones utilitarias en TypeScript y luego las importo en uno de los archivos en app/test/in

Leer más →

reactjs - llamar a los Hooks de React en un decorador global para Storybook

Quiero llamar a un hook personalizado de React para todas las historias, sin embargo, no estoy seguro de dónde declararlo. Los hooks personalizados que quiero llamar deben estar en el proveedor de contexto.

¿Hay alguna forma de declarar un proveedor de contexto y hooks personalizados para todas las histori

Leer más →

javascript - Storybook inlineStories funciona pero rompe las interacciones de las props

Tengo un componente de galería de medios emergente y necesito usarlo en línea, para documentarlo en el storybook. cuando agrego el siguiente código en '.storybook/preview.js'

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

Funciona como esperaba, pero cuando establezco inlineStories: false, no hay problema en modificar las propiedades en Canvas, pero en Docs, la modificación no surte efecto.

Para evitar este error intenté agregar inli

Leer más →

reactjs - Storybook Typescript no carga los tipos de props recién agregados, necesita reiniciar 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

Leer más →

typescript - Uso de tipos con Storybook y Sveltekit

Estoy tratando de usar Storybook junto con TypeScript y SvelteKit, aunque esto me ha dado algunos problemas de los que no puedo salir por mí mismo.

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', }

El código anterior me da el siguiente error en la línea Pri

Leer más →

reactjs - el método play de storybook + jest falla al llamar a shouldHaveBeenCalled en una función

Tengo este componente:

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);

Leer más →

reactjs - "Módulo no encontrado" o "La ruta de importación no puede terminar con tsx" usando Storybook con TypeScript

Estoy escribiendo un componente que hace uso de otro componente, así que he escrito

en el archivo /src/stories/TextArea/TextArea.tsx.

Sin embargo, esto da el error

Leer más →