Configuración
Usaremos el kit de complementos Addon Kit para iniciar nuestro proyecto. Nos brinda todo lo necesario para crear un complemento de Storybook:
- 📝 Edición en vivo en modo de desarrollo
- ⚛️ Soporte de React / JSX para el UI
- 📦 Transpilar y empaquetar con Babel
- 🏷 Plugin para metadatos
- 🚢 Gestión de versiones con Auto
Para comenzar, clickea en el botón Use this template (Usar esta plantilla) en el repositorio del kit de complementos: Addon Kit repository. Esto generará un nuevo repositorio con todo el código del kit de complementos.
A continuación, clona tu repositorio e instala las dependencias.
yarn
El Addon Kit usa TypeScript de forma predeterminada. Sin embargo, para los propósitos de este tutorial usaremos el comando eject para convertir el código en JavaScript .
yarn eject-ts
Esto convertirá todo el código a JS. Es un proceso destructivo, por lo que recomendamos ejecutarlo antes de comenzar a escribir cualquier código.
Finalmente, inicia el modo de desarrollo. Esto da inicio a Storybook y ejecuta Babel en modo observador (Watch Mode).
yarn start
El código del complemento vive en el directorio src. El código modelo incluido demuestra los tres paradigmas del UI y otros conceptos como la gestión del estado y la interacción con una historia. Exploraremos esto con más detalle en las próximas secciones.