Mejores prácticas para Storybook

Storybook es un entorno de desarrollo de interfaz de usuario y un campo de pruebas para componentes de IU. La herramienta permite a los desarrolladores crear componentes de forma independiente y mostrarlos de manera interactiva en un entorno de desarrollo aislado. Storybook se ejecuta fuera de la aplicación principal, por lo que los usuarios pueden desarrollar componentes de IU de forma aislada sin preocuparse por los requisitos y dependencias específicos de la aplicación.

Desde Storybook 5.2, el Formato de Historias de Componentes (Component Story Format o CSF) es la forma recomendada de escribir historias. En CSF, las historias y los metadatos de los componentes se definen como módulos ES6. Cada archivo de historia de componente consiste en una exportación por defecto obligatoria y una o más exportaciones nombradas.

Exportación por defecto (Default export)

La exportación por defecto define los metadatos de tu componente, incluyendo el componente mismo, su título (donde aparecerá en la jerarquía de historias de la IU de navegación), decoradores y parámetros. El título debe ser único, es decir, no debe reutilizarse en otros archivos.

import { withKnobs, select } from '@storybook/addon-knobs';
import Button from '@material-ui/core/Button';
import NavigationIcon from '@material-ui/icons/Navigation';
import React from 'react';

export default {
	title: 'atoms|Button',
	decorators: [withKnobs],
};

export const containedButton = () => (
	<Button
		variant="contained"
		color={select('color', ['primary', 'secondary'], 'primary')}
		size={select('size', ['small', 'medium', 'large'], 'large')}>
		Default
	</Button>
);

export const outlinedButton = () => (
	<Button
		variant="outlined"
		color={select('color', ['primary', 'secondary'], 'primary')}
		size={select('size', ['small', 'medium', 'large'], 'large')}>
		<NavigationIcon />
		Default
	</Button>
);

Historias para componentes que usan Redux

Al usar llaves {} estamos importando el componente PURO antes de que se vincule al HOC y, por lo tanto, solo debería esperar props para renderizarse correctamente.

import React from 'react';
import { withKnobs, select } from '@storybook/addon-knobs';

import { MyComponent } from '../MyComponent';

export default {
	title: 'Atom|MyComponent',
	decorators: [withKnobs],
};

export const Basic = () => <MyComponent />;
export const WithProp = () => (
	<MyComponent
		variant="contained"
		color={select('color', ['primary', 'secondary'], 'primary')}
		size={select('size', ['small', 'medium', 'large'], 'large')}
	/>
);