storybook-stencil-example v0.1.0

Storybook Stencil Example

Proyecto de ejemplo para construir una librería de Web Components con Stencil y Storybook.

Inicio rápido

Para comenzar clona este repositorio en un directorio nuevo y ejecuta los siguientes comandos:

npm install
npm run build
npm run storybook

Para una descripción detallada de los pasos necesarios para construir este proyecto ver el final del documento.

Añadir componentes

Para crear un nuevo componente ejecuta stencil generate (en el caso que tengas Stencil instalado de forma global) o npx @stencil/core generate (en el resto de casos).

Indica el nombre del componente y confirma las características a generar pulsado Enter.

Por último, añade las historias del componente en un archivo llamado nombre-componente.stories.js.

Importante: Si se utiliza JSX en las historias no olvidar incluir la siguiente importación:

import { h } from 'jsx-dom';

Nota: El archivo readme.md se genera por primera vez al ejecutar npm run build.

Características

• Storybook for HTML
• Storybook Addon Notes
• Storybook Addon Knobs
• Storybook Addon Actions

Paso a paso

Este proyecto se ha construido siguiendo los siguientes pasos:

1. Crear un nuevo proyecto de Stencil: Ejecuta npm init stencil, aparecerán varias opciones para el nuevo proyecto, selecciona component y a continuación indica el nombre del proyecto.

2. Añadir Storybook y addons: Ejecuta los comandos siguientes para añadir Storybook así como otras dependencias necesarias:

   npx -p @storybook/cli sb init --type html
   npm install --save-dev write-file-webpack-plugin copy-webpack-plugin @storybook/addon-notes @storybook/addon-knobs @storybook/addon-actions

   Para integrar los componentes de Stencil en Storybook fue necesario añadir todo el código que aparece en el archivo .storybook/main.js.

3. Añadir soporte para JSX a Storybook (opcional): Para poder utilizar JSX en las historias de Storybook se añaden las siguientes dependencias:

   npm install --save-dev @babel/plugin-syntax-jsx @babel/plugin-transform-react-jsx jsx-dom

   Y se añade el archivo .babelrc para que pueda compilar las historias con JSX.

4. Crear los componentes: Mediante el comando stencil generate o npx @stencil/core generate.

5. Crear historias: Dentro de la carpeta de cada componente crea las historias en un archivo llamado nombre-componente.stories.js

   Nota: Si se va a utilizar JSX en las historias hay que añadir la siguiente importación:

   import { h } from 'jsx-dom';