es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Puedo autogenerar los controles de componentes de Storybook para algunas historias, pero no para otras?

¿Puedo autogenerar los controles de componentes de Storybook para algunas historias, pero no para otras?

11 Jun, 2023 Programación

Me encanta cómo con el nuevo Formato de Historias de Componentes, los controles se generan automáticamente utilizando react-docgen-typescript a partir del componente que proporciono en la configuración:

typescript
export default {
title: 'nombre de la historia',
component: MyComponent
} as Meta

Pero con algunos componentes, me gustaría usar solamente esta lista de controles autogenerados para algunas historias y no para otras.

Quizás tener una historia con la lista completa de controles para todas las propiedades posibles y varias historias adicionales que muestren únicamente las propiedades relevantes a la historia. Esto sería especialmente útil para historias de envoltorios personalizados sobre grandes componentes de terceros, que a menudo tienen cientos de propiedades especializadas.

¿Cómo puedo hacer esto?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr esto, puede hacer uso del campo argTypes en la configuración de su historia. Al especificar argTypes en la configuración de su historia, puede reemplazar selectivamente la lista de controles generada automáticamente cuando no se necesita para una historia en particular.

    Aquí hay un ejemplo:

    import { Meta, Story } from '@storybook/react';
import MyComponent from './MyComponent';

export default {
  title: 'MyComponent',
  component: MyComponent,
  argTypes: {
    irrelevantProp: { control: false }, // desactiva el control para irrelevantProp para todas las historias
    relevantProp: { control: { type: 'text' } }, // anula el control para relevantProp
  },
} as Meta;

const Template: Story = (args) => <mycomponent {...args}=""></mycomponent>

export const FullControls = Template.bind({})
FullControls.args = {
  irrelevantProp: 'value',
  relevantProp: 'value',
  // incluye todos los demás props que deben destacarse
}

export const MinimalControls = Template.bind({})
MinimalControls.args = {
  relevantProp: 'value',
  // incluye solamente los props relevantes
}

    En este ejemplo, hemos especificado argTypes en la configuración de la historia y hemos desactivado el control para un prop irrelevante para todas las historias usando { control: false }. Además, hemos anulado selectivamente el control para un prop relevante usando { control: { type: 'text' } }.

    Luego tenemos dos historias “FullControls” y “MinimalControls”, cada una mostrando un conjunto diferente de props. En “FullControls”, incluimos todos los posibles props para el componente, mientras que en “MinimalControls”, solo incluimos los props relevantes.

    Al usar este enfoque, puede tener más control sobre qué props de su componente se destacan en diferentes historias, sin tener que crear manualmente todos los controles.

Comments are closed.