Storybook 4 & Angular 6

Este “tutorial” lo hago en base a mi experiencia tratando de instalar Angular 6 con Storybook, según como se muestra en su sitio oficial y en la cuenta de Github, cuyas guías no me funcionaron. Vi muchas respuestas vagas por web, y haciendo una mezcla de todas logré correr la aplicación. Quizás en unos días esto deje de ser útil, pero de todas maneras comparto los pasos para lograrlo, por si a alguien le sirve.
Instalamos el CLI de Storybook
npm i -g @storybook/cliLuego, nos dirigimos a la raíz de nuestro proyecto en Angular v6 e instalamos la ultima versión de Storybook for Angular junto al paquete babel-core.
npm i @storybook/angular@4.0.0-alpha.20 babel-loader@^7.0.0Cuando la instalación termine, agregamos este comando a nuestro package.json
{
“scripts”: {
“storybook”: “start-storybook -p 9001 -c .storybook”
}
}En la raíz del proyecto (junto a src y node_modules) creamos una carpeta de nombre .storybook, y dentro un archivo config.js. Coloca las siguientes lineas en él.
import { configure } from '@storybook/angular';function loadStories() {
require('../src/stories/index.ts');
}configure(loadStories, module);
Y ahora creamos nuestro archivo de “historias” en src/stories/index.ts.
import { storiesOf } from '@storybook/angular';
import { StoryOneComponent } from '../app/story-one/story-one.component';storiesOf('Story One Component', module)
.add('with title', () => ({
component: StoryOneComponent,
props: {
sStoryOneTitle: 'Hello from Storybook'
},
}));
El componente StoryOneComponent que nombro arriba es el siguiente:
// story-one.component.tsimport { Component, Input } from '@angular/core';@Component({
selector: 'app-story-one',
templateUrl: './story-one.component.html',
styleUrls: ['./story-one.component.css']
})export class StoryOneComponent {
@Input('sStoryOneTitle') sStoryOneTitle;
constructor() { }
}
// story-one.component.html<p>{{sStoryOneTitle}}</p>
Por último, en src/tsconfig.app.json agregamos “stories” a la configuración.
"exclude": [
"test.ts",
"**/*.spec.ts",
"stories"
]Liso! Ya podemos correr Storybook en una terminal sin ningún error.
npm run storybookSi alguien tiene un método mejor (el comando getstorybook que en teoría realiza todo lo anterior automágicamente me daba errores con la versión de Webpack de mi Angular CLI), por favor me lo comenta!
