소개

storybook이 좋다는 것을 듣는 오늘 요즈음.
Angular에서도 사용할 수 있다는 것을 알았으므로 이번에는 그것을 시도해 보겠습니다.

TL; DR.

소스 코드

Angular 프로젝트 만들기

CLI에서 바삭바삭하게 만든다.

$ ng new ng-component

Storybook 소개

공식 사이트 에 순서가 있으므로, 그것을 참고로 진행한다.
이것만으로 설정이 완료된다.

$ npx -p @storybook/cli sb init --type angular

샘플 프로그램도 만들어주지만,
패키지가 없고 잘 움직이지 않기 때문에 story를 만들어 간다.

Story 만들기

src/stories 아래에 button.component.stories.ts(任意)를 만듭니다.
※ ButtonComponent 의 내용은 후술

import { ButtonComponent } from '../app/component/button/button.component';

export default {
  title: 'button component',
};

export const ButtonDefault = () => ({
  component: ButtonComponent,
  props: {
    text: 'default'
  }
});

만든 component

button.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss']
})
export class ButtonComponent implements OnInit {
  @Input() text: string;

  buttonClasses: string[] = ['button'];

  ngOnInit() {
  }

}

button.component.scss

.button {
  width: 150px;
  height: 50px;
  background-color: #fff;
  border: 1px solid #000;
  color: #333;
  font-size: 16px; 
}

button.component.html

<button [ngClass]="buttonClasses">{{text}}</button>

실행해보기

자동으로 추가된 npm script 가 있기 때문에, 그것을 실행하면 OK.

$ npm run storybook
> ブラウザが勝手に立ち上がり表示される

이미지처럼 나오면 완료.

요약

이번에는 예전부터 하려고 했던 storybook의 도입을 했다.
component 단위로 볼 수 있는 것이 있는 것은, 역시 편하다고 생각하므로 앞으로는 만들어 가고 싶은 곳.
+github pages에서 볼 수 있으면 편하기 때문에 언젠가 대응하고 싶다.

참고 링크

Storybook for Angular