¿Que es Storybook?

Storybook es una herramienta de código abierto para construir componentes UI y páginas de manera aislada, generando documentación y posibilitando tanto desarrollo como el testing de componentes. Permite la visualización de los componentes de una manera organizada y eficiente, interactuar con ellos con ellos de forma dinámica y testearlos como si se encontraran desplegados en una aplicación real. También puede generar una página estática con toda la documentación referida a esos componentes, ver el resultado final del componente o incluso el código para poder extraer el propio componente.

Los componentes se crean escribiendo su código React normal y luego agregando un segundo archivo complementario que describe las "historias" de ese componente.

Creando un proyecto react con stoybook

(https://storybook.js.org/docs/react/configure/overview)

Vamos a utilizar el popular kit de herramientas create-react-app (CRA) para inicializar el proyecto. Esto le brinda todo lo que necesita para construir componentes de React. CRA asume que está desarrollando una base de código que se entregará directamente al navegador. Como en realidad estamos creando una biblioteca que no se ejecutará como una aplicación independiente, puede eliminar de forma segura los directorios predeterminados public y src si lo desea.

Para agregar Storybook a un proyecto existente ejecutar este comando:

    npx sb init

El instalador creará nuevos directorios: .storybook y stories. Este último contiene un conjunto de componentes de ejemplo. Elimine este directorio ahora ya que no lo usaremos.

Los archivos dentro de .storybook se utilizan para configurar su servidor Storybook.

• main.js contiene configuraciones globales, como los patrones de nombres de archivos para buscar historias.
• preview.js controla cómo se representan las historias dentro de la interfaz de usuario web de Storybook.

Storybook por defecto busca historias en su directorio stories. Para cambiar esto modifique el archivo .storybook/main.js asi busca dentro del directorio src.

    module.exports = {
        "stories": [
            "../src/**/*.stories.@(js|jsx|ts|tsx)"
        ],
        // ...
    }

Escribir componentes

Colocaremos nuestros componentes con sus historias directamente en el directorio src, usando el formato src/ComponentName.js y src/ComponentName.stories.js.

El componente src/ComponentName.stories.js tiene el siguiente formato, ej:

    import Button from "./Button.js";

    export default {
        title: "Button",
        component: Button,
        args: {
            label: "Demo Button"
        }
    };

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

    const Standard = Template.bind({});

    const Disabled = Template.bind({});
    Disabled.args = {disabled: true, label: "Disabled Button"};

    export {Standard, Disabled};

El modulo export default proporciona metadatos a Storybook. Debe ser un objeto que incluya las propiedades: title y component.

• title se utiliza para etiquetar su componente en la interfaz de usuario de Storybook.
• component es la función o clase de componente que está exponiendo.

El objeto args es equivalentes a React props.

• En los args se ubican los props de la exportación predeterminada para aplicar a las instancias de componentes representadas por Storybook. (Aquí los botones reciben una etiqueta de Demo Button si no se cambia más tarde.)

Las exportaciones (Standard y Disabled) definen las instancias de componentes reales que se presentarán en su storybook. Se requiere al menos uno. Aquí se crean dos, Standard, el botón en su estado predeterminado, y Disabled, botón que establece la prop disabled en true.

Ahora inicie el servidor de desarrollo de Storybook:

    npm run storybook

Visita localhost:6006 en su navegador para ver su biblioteca de componentes. Deberías ver tu Button componente en la barra lateral con sus dos variaciones de historia con nombre. Al hacer clic en una de las historias, se mostrará el estado renderizado del componente.

Configurando la libreria con babel

El siguiente paso es construir su biblioteca de componentes y empaquetarla con npm para incluirla en su próxima aplicación. Desafortunadamente no puedes hacer simplemente un npm publish de los archivos JavaScript sin procesar.

Create React App no ​​transpilará JSX dentro de los paquetes en la carpeta node_modules de su aplicación, por lo que obtendría un error de compilación al intentar ejecutar un proyecto con sus componentes. Debe transpilar su biblioteca de componentes antes de la publicación utilizando una herramienta como Babel.

Comience agregando un archivo src/index.js que exportará la API pública de su módulo:

    import Button from "./Button.js";
    export {Button};

Esto permitirá que los usuarios de su paquete accedan al Button módulo escribiendo:

    import {Button} from "@example/example-components";

Le da la libertad de cambiar las rutas de los archivos en el futuro sin afectar a los usuarios de su biblioteca. La API pública de su paquete ahora está definida por las exportaciones de index.js.

A continuación, agregue Babel a su proyecto con el siguiente comando:

    npm install --save-dev @babel/cli @babel/plugin-transform-react-jsx @babel/preset-env @babel/preset-react

Crear un archivo .babelrc en la raíz de su proyecto con este contenido:

    {
        "presets": [
            "@babel/preset-env",
            "@babel/preset-react"
        ],
        "plugins": [
            [
                "@babel/plugin-transform-react-jsx",
                {
                    "runtime": "automatic"
                }
            ]
        ]
    }

Esta configuración de Babel activa la compatibilidad con React con la nueva transformación JSX. Significa que no necesitas import React from "react"; en la parte superior de cada archivo que usa JSX.

Finalmente, agregue las siguientes líneas al scripts sección de su package.json expediente:

    "scripts": {
        "prepare": "npm run dist",
        "dist": "rm -rf dist/* && babel src/ --out-dir dist --copy-files --no-copy-ignored --ignore src/**/*.stories.js"
    }

• npm run prepare ejecuta automáticamente el script antes de que su paquete se publique en un registro. Se usa aquí para compilar sus componentes cada vez que envía una nueva versión.

Ahora puedes ejecutar npm run dist para crear una compilación lista para distribución de su biblioteca. Los archivos de salida se depositarán en el directorio dist. Es una buena idea agregar esto a su .gitignore.

(En el caso que no funcione el comando npm run dist a causa de rm -rm probar borrar la parte rm -rf dist/* && teniendo que borrar la carpeta dist manualmente cada vez que se necesite correr este comando)

Últimos pasos

Quedan dos cambios por hacer. Primero se debe indicar a npm que publique solo los archivos creados en su directorio dist. Esto se controla a través del campo files en tu package.json. El segundo ajuste es hacer referencia a la versión compilada de su index.js como punto de entrada del paquete usando el campo main:

    {
        "files": [
            "dist"      
        ],
        "main": "dist/index.js"
    }

¡Ya terminaste! Ahora usted puede correr npm publish e instalar la libreria en cualquiera de sus aplicaciones. El paquete descargado contendrá solo el código compilado, sin JSX y listo para usar en su proyecto.

Probando la libreria

Pruébelo con un ejemplo mínimo en una nueva aplicación CRA:

    import {Button} from "@example/example-components";

    export default () => <Button />;

Su componente debe aparecer igual que su renderizado Storybook. Cualquier discrepancia se deberá a la presencia de estilos globales que se filtran desde el CSS de su aplicación.

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify