Historias en Storybook: Sintaxis y Formato Correctos

¿Cómo escribir historias en Storybook?

Al abordar la escritura de historias en Storybook, es esencial entender la integración de componentes con diferentes argumentos y parámetros para visualizarlos adecuadamente. Utilizar la sintaxis de los ECMAScript Modules es clave en este proceso. A través de export y default, creamos una estructura estandarizada para escribir estas historias. Así que, ¡vamos a profundizar en cómo hacerlo correctamente!

¿Cuál es la estructura básica de una historia?

Una historia en Storybook sigue una estructura específica basada en ECMAScript Modules:

// Example of a basic story structure
export default {
  title: 'Button',
  component: Button,
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

Esta sintaxis sencilla permite definir el componente y sus variantes de una forma clara y organizada. Si deseas aprender más sobre ECMAScript Modules, platzi ofrece cursos detallados sobre este tema.

¿Cómo podemos usar variantes y parámetros?

Definir variantes para tus componentes en Storybook no solo permite ver los diferentes estilos de un componente, sino que también facilita su uso en múltiples escenarios. Un ejemplo claro es renombrar variantes y definir diferentes estados como Primary, Secondary, o Outlined.

Si decides hacerlo así:

• Primary: con un fondo colorido estándar.
• Secondary: una variante más sutil.
• Outlined: con contornos destacados.

Igualmente, el uso de parámetros visuales es crucial para simular distintos escenarios. Aquí un ejemplo de cómo gestionar parámetros de fondo:

parameters: {
  backgrounds: {
    default: 'dark',
    values: [
      { name: 'light', value: '#ffffff' },
      { name: 'dark', value: '#000000' },
    ],
  },
}

¿Qué son los decoradores y para qué sirven?

Los decoradores son herramientas útiles en Storybook para modificar la presentación de un componente. Funcionan como envoltorios que añaden contexto adicional a nuestras historias, permitiendo personalizar aún más el resultado final.

Por ejemplo, si necesitas un fondo específico alrededor de un botón, un decorador puede hacerlo posible. La documentación oficial de Storybook proporciona numerosos ejemplos para explorar y ajustar a tus necesidades.

¿Cómo manejar componentes múltiples e hijos?

Cuando tratamos con componentes que tienen subcomponentes, Storybook ofrece la flexibilidad para manejarlos sin problema. Considera el caso de una lista que contiene elementos individuales:

const List = () => {/* ... */}
const ListItem = (props) => {/* ... */}

export default {
  title: 'List',
  component: List,
  subcomponents: { ListItem },
};

export const Default = () => (
  <List>
    <ListItem label="Item 1" />
    <ListItem label="Item 2" />
  </List>
);

Podemos observar cómo estructurar nuestros componentes de tal manera que la jerarquía se mantenga clara y se gestione de manera efectiva en el navegador.

Al dominar estas herramientas, Storybook se convierte en un aliado invaluable para crear un sistema de diseño robusto donde los componentes son reutilizables y coherentes en cada escenario. Continúa explorando y experimentando con las diferentes opciones que ofrece Storybook para elevar tus proyectos a un nuevo nivel de profesionalismo y eficiencia. ¡No pares de aprender!