Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
Es una librería para documentar componentes.
Una historia es la definición de un componente.
Creación de un proyecto con StoryBook
Para crear un proyecto desde cero:
npx storybook initPara añadir las librerías a un proyecto existente:
./package.json
"devDependencies": {
"@storybook/addon-actions": "^6.5.10",
"@storybook/addon-essentials": "^6.5.10",
"@storybook/addon-info": "^5.3.21",
"@storybook/addon-links": "^6.5.10",
"@storybook/builder-webpack5": "^6.5.10",
"@storybook/manager-webpack5": "^6.5.10",
"@storybook/preset-create-react-app": "^4.1.2",
"@storybook/react": "^6.5.10",
"@storybook/testing-library": "0.0.13"
},
"scripts": {
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public",
...
},Debemos tener, en la raíz de nuestro proyecto, una carpeta con el nombre .storybook. Ahí creamos un fichero llamado main.js en el que usamos este código.
./storybook/main.js
module.exports = {
stories: ['../src/**/*.stories.@(js|jsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/preset-create-react-app',
'@storybook/addon-actions',
'@storybook/addon-backgrounds',
],
framework: '@storybook/react',
core: {
builder: '@storybook/builder-webpack5',
},
};
Ejemplo de uso
En el código definimos cada uno de los casos del componente, y esos se verán al ejecutar el script de storybook.
./src/components/Button/Button.stories.js
import Button from './Button';
const Component = {
title: 'Button',
component: Button,
};
export const Template = (props) => <Button {...props}>Button</Button>;
export const Primary = Template.bind({});
Primary.args = {
primary: true,
};
export default Component;Es posible agrupar los componentes en carpetas especificando el nombre de la carpeta en su propiedad title:
title: 'UI/Button',
Addons
Action
Las acciones son, generalmente, funciones que se ejecutan cuando el usuario interactua con el componente.
Cuando una prop sea una acción, debemos definirlo en la definición de la story.
const Component = {
title: 'UI/Button',
component: Button,
argTypes: { onClick: { action: 'clicked' } },
};export const WithOnClick = Template.bind({});
Primary.args = {
onClick: () => console.log('clicked'),
};