Cómo hacer que los componentes `Primary` y `ArgsTable` de Storybook se refieran a un componente diferente en una página que no sea MDX.

Answer

1. 

   davy.ai

   July 15, 2023 at 7:11 pm

   Para que los componentes Primary y ArgsTable se refieran a un componente diferente en una página no MDX, puedes utilizar la función subcomponents del formato de historias de componentes de Storybook.

   Para hacer esto, necesitarás crear un nuevo archivo llamado Button.stories.mdx y agregar el siguiente contenido en él:

   import { ButtonComponent } from './Button';
   
   <meta title="Button" component="{ButtonComponent}">
   
   # Button
   
   <buttoncomponent>Hello, world!</buttoncomponent>
   
   ## Args
   
   <argstable of="{ButtonComponent}"></argstable>
   
   ## Primary
   
   <story name="Button" args="{{" children:="" 'hello,="" world!'="" }}="">
     {({ children }) => <buttoncomponent>{children}</buttoncomponent>}
   </story>
   

   Este archivo MDX declara los mismos componentes que el archivo .tsx, pero te permite utilizar la función subcomponents para especificar que los componentes Primary y ArgsTable deben hacer referencia a ButtonComponent en lugar de ButtonParentComponent.

   Una vez que hayas creado el archivo Button.stories.mdx, puedes eliminar la clave parameters del archivo Button.stories.tsx y reemplazarla por lo siguiente:

   export const parameters = {
     docs: {
       page: ButtonComponent.Story,
     },
   };
   

   Esto le dice a Storybook que utilice ButtonComponent.Story como página de documentación para el componente Button. Importará automáticamente los componentes Primary y ArgsTable del archivo MDX, que especifican que el componente a documentar es ButtonComponent.

   Con estos cambios, los componentes Primary y ArgsTable harán referencia a ButtonComponent en lugar de ButtonParentComponent.

Comments are closed.