Tengo un componente, 'Diálogo', que representa básicamente un cuadro de diálogo modal, cuando un usuario hace clic en un enlace o botón para invocar/abrir el cuadro de diálogo. Estoy creando un componente de libro de cuentos para el componente Diálogo, por lo que necesito poder tener un elemento HTML en el que se pueda hacer clic (etiqueta o botón de anclaje, preferiblemente etiqueta de anclaje) y abrir el componente Diálogo cuando se haga clic en ese elemento HTML en el que se pueda hacer clic. No sé cómo hacer esto en Storybook.
Aquí está mi elemento de libro de cuentos tal como existe hasta ahora:
const Template: ComponentStory<typeof Dialog> = (args) => <Dialog {...args} />; export const Regular = Template.bind({}); Regular.args = { type:"regular", show: false, children: "Content of Dialog Box", dismissable: true, classNames: "", maxWidth: "1000px", displayBoxShadow: true, renderOnLoad: false, }Un ejemplo de una implementación de este componente/historia sería un botón Iniciar sesión que, al hacer clic, mostraría un cuadro de diálogo deslizable con los campos apropiados (secundarios). Estoy tratando de implementar la parte de diálogo de la historia, ya que el componente de diálogo se invoca cuando se hace clic en otro objeto HTML en la página o se interactúa con él.
Básicamente, una historia de Storybook puede ser cualquier componente de React y no se limita a ser el componente básico que está mostrando. Simplemente cree un componente envolvente delgado alrededor de su historia real con un botón:
const Template: ComponentStory<typeof Dialog> = (args) => { const [open, setOpen] = useState(false) return ( <> <Button onClick={ () => setOpen(true) }> Open dialog </Button> <Dialog { ...args } show={open} onClose={ () => setOpen(false) } /> </> ) }Puede usar el mismo patrón para ampliar la experiencia de sus componentes de Storybook con más contextos del mundo real que solo el componente simple en sí.
Ejemplo de juguete completo que funciona bien en Storybook 6.4.22:
import React, { FC, useState } from 'react'; import { Meta, Story } from '@storybook/react/types-6-0'; import { Button, Dialog } from "@material-ui/core"; interface TestProps { open: boolean text: string onClose: () => void } const Test: FC<TestProps> = props => ( <Dialog open={ props.open } maxWidth={ "lg" } fullWidth onClose={ props.onClose }> { props.text } </Dialog> ) export default { title: 'Test', component: Test } as Meta; const Template: Story<Omit<TestProps, "open" | "onClose">> = props => { const [ open, setOpen ] = useState(false) return ( <> <Button onClick={ () => setOpen(true)}>Click me</Button> <Test open={ open } onClose={ () => setOpen(false) }text={ props.text }/> </> ) } export const ExampleStory = Template.bind({}); ExampleStory.args = { text: "This is an example" };Si algo no funciona en su ejemplo, entonces hay algún otro problema que no está relacionado con este método de construir una historia. Trate de generalizar a partir de ello; Comience con un componente más simple y hágalo funcionar y llévelo paso a paso.