1. 개요

어제 작업에 이어서 오늘은 angular 컴포넌트를 storybook으로 이동시켜 자동으로 디자인페이지를 구성하여 확인할 수 있게하였고 이를 npm 패키지로 배포하는 단계까지 진행했다.

2. storybook 적용하기

1) storybook 설치

먼저 컴포넌트를 관리할 프로젝트에 storybook을 설치했다.

npx storybook@latest init

2) 컴포넌트 추가

컴포넌트를 추가하기위해 shared/common-templates 위치에 컴포넌트들을 추가했다.

ng g c shared/common-templates/common-icon
ng g c shared/common-templates/common-btn

3) stories 폴더 추가

storybook 디자인페이지에 추가할 정보를 정의하기위해 컴포넌트별로 stories/common-*.stories.ts 파일을 추가한다.

// shared/common-templates/common-icon/stories/common-icon.stories.ts

import type { Meta, StoryObj } from '@storybook/angular';

import { IconType, ColorType } from '../../../shared.format';
import { CommonIconComponent } from '../common-icon.component';

const meta: Meta<CommonIconComponent> = {
  title: 'Components/Common-templates/Common-icon',
  component: CommonIconComponent,
};

export default meta;
type Story = StoryObj<CommonIconComponent>;

export const Default: Story = {
  args: {
    type: IconType.None,
    color: ColorType.gray500,
    width: 24,
    height: 24,
  },
};

export const ArrowDownSmall: Story = {
  args: {
    type: IconType.ArrowDownSmall,
    color: ColorType.gray500,
    width: 24,
    height: 24,
  },

...

• 해당 컴포넌트의 케이스별로 Story 객체를 생성한다.
• @Input()으로 상위 컴포넌트로부터 입력받는 컴포넌트 변수는 args 값에 입력한다.

4) 컴포넌트 의존성

common-btn 컴포넌트는 common-icon를 포함한다. 따라서 해당 컴포넌트를 스토리로 생성할 때는 oduleMetadata를 이용하여 의존성을 명시한다.

import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';

import { CommonHeight, ButtonType, IconType, ColorType } from '../../../shared.format';
import { CommonBtnComponent } from '../common-btn.component';
import { CommonIconComponent } from '../../common-icon/common-icon.component';

const meta: Meta<CommonBtnComponent> = {
  title: 'Components/Common-templates/Common-btn',
  component: CommonBtnComponent,
  decorators: [
    moduleMetadata({
      declarations: [CommonBtnComponent, CommonIconComponent],
    }),
  ],
};

export default meta;
type Story = StoryObj<CommonBtnComponent>;

export const Default: Story = {
  args: {
    type: ButtonType.Black,
    width: 100,
    height: CommonHeight.height_38,
    text: '확인',
    isDisabled: false,
  },
};

export const PrimaryWidget: Story = {
  args: {
    type: ButtonType.PrimaryWidget,
    width: 100,
    height: CommonHeight.height_38,
    text: '확인',
    isDisabled: false,
    iconInfo: {
      type: IconType.Search,
      color: ColorType.white,
    },
  },
};

...

3. 컴포넌트 확인

ng run <project-name>:storybook

명령어를 통해 스토리북을 실행시키면 컴포넌트들을 확인할 수 있다!

args를 통해 입력한 정보들을 실시간으로 수정하며 상호작용 할 수 있다.

4. 라이브러리 배포 & 패키지 업데이트

지난 번에 라이브러리를 만들어서 빌드 후 배포했던 것처럼 라이브러리에 컴포넌트들을 포함시킬 수 있다.

1) 라이브러리에 컴포넌트 추가

라이브러리에도 똑같은 구조로 projects/<library-name>/src/lib 위치에 컴포넌트를 추가한다.

2) public export

배포할 컴포넌트와 변수들을 선언한다.

// projects/<library-name>/src/public-api.ts

export * from './lib/salad-design-library.component';
export * from './lib/salad-design-library.module';

export * from './lib/shared/common-templates/common-btn/common-btn.component';
export * from './lib/shared/common-templates/common-icon/common-icon.component';
export * from './lib/shared/common-templates/common-text/common-text.component';
export * from './lib/shared/shared.module';
export * from './lib/shared/shared.format';

3) version 최신화

라이브러리를 수정한만큼 package.json version 에 반영한다.

// package.json
{
  "name": "salad-design-library",
  "version": "0.0.11",
  "peerDependencies": {
    "@angular/common": "^15.0.0",
    "@angular/core": "^15.0.0"
  },
  "dependencies": {
    "tslib": "^2.3.0"
  }
}

4) 빌드 & 배포

해당 라이브러리 수정 끝나면 빌드 후 배포한다.

cd projects/<library-name>
ng build

cd ../..
cd dist/<library-name>
npm publish --access public

5. 패키지 설치 및 사용

이제 다른 프로젝트에서 해당 패키지를 설치하고 사용해보자.

1) 해당 패키지 버전 최신화

package.json에서 배포한 패키지의 버전을 최신으로 변경한다.

// text-1/package.json

{
  "name": "test-1",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
	...
    "salad-design-library": "^0.0.11", // 버전 최신화
    ...
  },
  "devDependencies": {
	...
  }
}

2) 해당 패키지를 재설치한다.

npm install <library-name>

3) 설치한 패키지를 import하고 사용

// src/app/app.module.ts
...
import { SaladDesignLibraryModule, SharedModule } from 'salad-design-library';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
	...
    SaladDesignLibraryModule,
    SharedModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// src/app/app.component.html

<lib-salad-design-library></lib-salad-design-library>
<app-common-btn
    [type]="ButtonType.PrimaryDashboard"
</app-common-btn>
<app-common-icon
    [type]="iconInfo.type"
    [color]="iconInfo.color"></app-common-icon>
<app-common-text></app-common-text>

4) 적용 화면

해당 프로젝트에서 정의한적 없는 컴포넌트들을 패키지로 불러와 적용한 화면을 볼 수 있다.

ng serve --port 4201

6. 앞으로 진행사항

• @Output 상호작용에 대해 알아보고
• 나머지 컴포넌트들도 패키지에 모두 적용할 것이다.

참고

• https://storybook.js.org/tutorials/intro-to-storybook/angular/en/data/
• https://stackoverflow.com/questions/61125401/circular-dependency-detected-between-unrelated-functions/61127062#61127062