Angular Storybook

Storybook - это среда разработки для компонентов пользовательского интерфейса. Она позволяет просматривать библиотеку компонентов, просматривать различные состояния каждого компонента и интерактивно разрабатывать и тестировать компоненты.

Официальные примеры Storybook, и отдельно Angular Carbon Design System.

Storybook стал очень популярным для проектов React, а поддержка проектов Angular и Vue была добавлена в версии 3.3.0, поэтому теперь его легко использовать для создания stories Angular компонентов. Совершенно недавно вышла релизная 4 версия Storybook с поддержкой webpack 4 и наконец-то его можно использовать с Angular 6 и 7. (// В сентябре работало только через альфу @storybook/cli@alpha)

Подготовка

У проекта имеется CLI утилита. С помощью неё внедрить Storybook в существующий проект очень легко. Установите пакет @storybook/cli глобально:

λ npm i @storybook/cli -g

В корне angular проекта, запустите команду sb init:

λ sb init

 sb init - the simplest way to add a storybook to your project.

 • Detecting project type. ✓
 • Adding storybook support to your "Angular" app. ✓
 • Preparing to install dependencies. ✓
 • Installing dependencies. ✓

To run your storybook, type:

   npm run storybook

For more information visit: https://storybook.js.org

Эта команда автоматически определит, что запущена внтури проекта Angular, добавит необходимые конфигурационный файлы, devDependencies и npm-сценарии.

На момент написания статьи в проект добавляются следующие devDependencies зависимости:

    "@babel/core": "^7.1.2",
    "babel-loader": "^8.0.4",
    "@storybook/angular": "^4.0.0",
    "@storybook/addon-notes": "^4.0.0",
    "@storybook/addon-actions": "^4.0.0",
    "@storybook/addon-links": "^4.0.0",
    "@storybook/addons": "^4.0.0"

Кроме того, в файл package.json проекта добавляются следующие сценарии npm :

"scripts": {
    ...
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
},

А в корне проекта создаётся служебная директория:

.
├── .storybook
│   ├── addons.js
│   ├── config.js
│   └── tsconfig.json
...

Запустите сценарий npm storybook:

λ npm run storybook
╭────────────────────────────────────────────────╮
│                                                │
│   Storybook 4.0.0 started                      │
│                                                │
│   Local:            http://localhost:6006/     │
│   On your network:  http://172.18.0.6:6006/    │
│                                                │
╰────────────────────────────────────────────────╯

Эта команда запустит локальный webpack сервер на 6006 порту. Перейдя по адресу http://localhost:6006/ вы увидите пример Storybook, который был сгенерирован из файла src\stories\index.stories.ts. На странице представлено следующее содержимое:

Пример с angular/cli присутствует в официальном репозитарии

Единственный нюанс, который оказался с первого взгляда незадокументирован: работа с роутером. Пока что сделал так:

• импорт RouterTestingModule для поддержки routerLink
• «Жадный» маршрут ** для подавления переходов по ссылкам

import { RouterTestingModule  } from '@angular/router/testing';
import { MyComponent } from 'src/app/my.component';

...

storiesOf('MyComponent', module)
  .addDecorator(
    moduleMetadata({
        imports: [RouterTestingModule.withRoutes([
            { path: '**', component: MyComponent },
        ])],
        schemas: [],
        declarations: [],
        providers: [],
    })
  )
  .add('example 1', () => ({
    component: MyComponent,
    props: {
        inputProp1: {
            'Персональное предложение',
            new Date(2018, 5, 5)
        },
        inputProp2: true,
        outputProp1: e => {
            console.log(e);
            action('Действие')(e);
        },
    }
  }));

// update 08.01.2019 Mixing Storybook with Angular with a sprinkle of Applitools

• Learn Storybook Angular
• https://alligator.io/angular/storybook-angular/
• https://storybook.js.org/basics/guide-angular/
• https://github.com/storybooks/storybook
• https://stackoverflow.com/questions/49981347/angular-storybook-error-cannot-match-any-routes-url-segment-iframe-html
• https://qiita.com/ringtail003/items/44d2eb56703ff5e903ff