• Storybook 3.3​
  • Angular (v4+) 프로젝트에서도 storybook 사용 가능
  • 미리보기의 viewport 를 조절하여 다른 디바이스 사이즈에서 시뮬레이션 가능
    • ​​@storybook/addon-viewport
  • Storybook 에서 사용된 테스트 미리보기가 가능​
    • Jest addon
    • multi-snapshotting in StoryShots
  • And more!

storybook with Angular

• 스토리북 cli 전역 설치

  • npm i -g @storybook/cli

• 앵귤러 프로젝트 폴더로 이동

• getstorybook 명령어 실행

.storybook/config.js

/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */

import { configure } from '@storybook/angular';

function loadStories() {
  // put welcome screen at the top of the list so it's the first one displayed
  require('../src/stories');

  // automatically import all story ts files that end with *.stories.ts
  const req = require.context('../src/stories', true, /\.stories\.ts$/)
  req.keys().forEach((filename) => req(filename))
}

configure(loadStories, module);

src/stories/index.ts

import { storiesOf } from '@storybook/angular';
import { withNotes } from '@storybook/addon-notes';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import { Welcome, Button } from '@storybook/angular/demo';

storiesOf('Welcome', module).add('to Storybook', () => ({
  component: Welcome,
  props: {},
}));

storiesOf('Button', module)
  .add('with text', () => ({
    component: Button,
    props: {
      text: 'Hello Button',
    },
  }))
  .add(
    'with some emoji',
    withNotes({ text: 'My notes on a button with emojis' })(() => ({
      component: Button,
      props: {
        text: '😀 😎 👍 💯',
      },
    }))
  )
  .add(
    'with some emoji and action',
    withNotes({ text: 'My notes on a button with emojis' })(() => ({
      component: Button,
      props: {
        text: '😀 😎 👍 💯',
        onClick: action('This was clicked OMG'),
      },
    }))
  );

storiesOf('Another Button', module).add('button with link to another story', () => ({
  component: Button,
  props: {
    text: 'Go to Welcome Story',
    onClick: linkTo('Welcome'),
  },
}));

@storybook/addon-viewport