Esto puede verse como componentes maquillaje que confirman los cambios que queremos en nuestros componentes hijos sin la necesidad de modificar estos últimos. Este objeto es muy flexible, lo que nos permite extenderlo a otras historias, pasar historias dentro de él como argumentos, también establecer reglas generales para componentes específicos en todas las historias.
Existen parámetros para establecer metadatos estáticos (por ejemplo, Fondos) donde se van a probar historias o historias específicas. Estos parámetros se denominan en la estructura de exportación CSF como una propiedad. Encontramos tres niveles de parámetros de historia: local, parámetros de componente y parámetro global. Para este último requerimos un archivo cuya ruta es “storybook / preview.js | ts” y dentro:
exportar parámetros constantes = {
antecedentes: {
valores: [
{nombre: 'rojo', valor: '# f00'},
{nombre: 'verde', valor: '# 0f0'},
],
},
};
La API de Storybook reconocerá este archivo como un conjunto global que se aplicará a todas las historias. Una información clave es que hay una herencia (Storie> componente> global), además los parámetros sobrescritos no se eliminan.
Estos se ven como envoltorios que pueden actuar como componentes de orden superior de la historia o los padres, esto significa que podemos emplearlos para pasar datos, contextos o establecer relaciones dinámicas (por ejemplo, el padding de un padre respecto al hijo).
Los decoradores como parámetros se pueden aplicar a una sola historia, a las historias de los componentes o globalmente. En tal caso se debe declarar en el archivo “storybook / preview.js | ts” y su estructura: Se ejecutarán en el orden en que fueron definidos.
// .storybook / preview.js
importar React de 'reaccionar';
exportar const decorators = [(Story) => <div style = {{margin:'3em'}}> <Story /> </div>];
Esta nueva implementación de Storybook permite que las historias obtengan datos de API externas, que se asignan como segundos argumentos después de “args”. Su uso debe ser limitado porque en un futuro pueden ser retirados de la API de storybook. Los cargadores tienen un alcance como parámetros, en el orden en que fueron definidos.
Puede nombrar componentes y sus historias y todos juntos se pueden colocar en una carpeta. Para eso, podemos nombrar individualmente las rutas en el CFS. Si queremos ordenar los nombres globalmente debemos editar el archivo global “.storybook / preview.js | ts”, en la bibliografía dejo un enlace con una explicación bastante detallada.
