Angular Storybook

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

Официальные примеры Storybook.

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. На странице представлено следующее содержимое:

storybook-screenshot.png

Пример с 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);
        },
    }
  }));

Похожие записи

@Directive v/s @Component in Angular

Компоненты создают DOM элементы и добавляют к ним поведение, а директивы только добавляют поведение к существующим DOM элементам

13 августа 2018 г. в Angular

ngx translate attribute

Используется конструкция

<img src="image.jpg" [alt]="'KEY' | translate"> 
20 августа 2018 г. в Angular

Переиспользуемые анимации в Angular

Для создания анимации используется функция animation(). Для её использования — useAnimation(). Приводится пример переиспользуемой анимации, а также создание анимации через литерал объекта.