[Copy Stack] 스토리북 설치 (with chromatic)

dev2820·2022년 12월 12일

프로젝트: Copy Stack

목록 보기

12/28

storybook 설치

https://storybook.js.org/docs/web-components/builders/vite
storybook 공식 사이트에서 하라는대로 합시다.

npx sb@latest init --builder storybook-builder-vite

웹 컴포넌트 단위로 UI를 확인하고 개발하기 위해 스토리북을 설치합니다.

빌더 변경

나중에 builder를 storybook-builder-vite 에서 @storybook/builder-vite로 변경해줬습니다.

tsconfig 수정

타입스크립트가 stories.ts 파일을 참견하지 않게 exclude 시킵니다.

// tsconfig.json, tsconfig.node.json에 추가
{
...
  "exclude": ["src/**/*.stories.ts"],
}

alias 추가

// .storybook/main.cjs
const { mergeConfig } = require("vite");
const { resolve } = require("path");

module.exports = {
  ...
  /**
   * viteFinal 추가
   * config에 resolve 덮어 씌우기
   */
  async viteFinal(config) {
    return mergeConfig(config, {
      resolve: {
        alias: {
          "@": resolve(__dirname, "../src"),
        },
      },
    });
  },

추가 addon

Chromatic 패키지 설치

사실 개인프로젝트라 Chromatic은 필요없긴한데, 전부터 써보고 싶어서 이참에 사용해봤습니다.

Chromatic 가입

https://chromatic.com/start
여기 회원 가입하고 github 연결하면 됩니다. 스크린샷을 깜빡했네요. 대충 어려울거 없습니다.

간단한 story 작성

먼저 간단하게 스토리를 작성하고 스토리북을 킵니다. 나중에 작성 예정인 CopyList 컴포넌트를 위한 CopyList.stories.ts 파일을 만들어줬습니다.

// src/components/CopyList.stories.ts
import { Meta } from "@storybook/web-components";
import { html } from "lit-html";
import "@/components/CopyList";

export default {
  title: "CopyList",
} as Meta;

const Template = ({ copies }) => html`<copy-list>what</copy-list>`;

export const Default = Template.bind({});
Default.args = {};

lit 관련 내용은 주제를 넘어서니 패스하고 대충 위와 같이 작성했을 때

위와 같이 스토리북이 생성됩니다.

chromatic 설치

chromatic 사이트에서 하라는대로 패키지를 설치합니다.

npm install --save-dev chromatic
npx chromatic --project-token=[토큰]

요렇게
토큰을 입력하고 Chromatic과 연결하면 프로젝트의 스토리들을 보여줍니다.

이후 새로운 스토리를 만들어 publishing 하려면 같은 명령어를 입력하면 됩니다.

script 작성하기

chromatic에서 publishing을 단순화하기 위해 script를 아래와 같이 추가하라고 추천합니다.

...
"scripts": {
  ...
  "chromatic":"npx chromatic --project-token=[토큰]"
}

하지만 토큰이 package.json에 그대로 노출된 것은 보기 싫으니 스크립트를 통해 chromatic publishing을 위한 스크립트 파일을 작성해봅시다.

root에 .env 파일을 하나 만들고 아래와 같이 입력하겠습니다.

CHROMATIC_TOKEN=[토큰]

다음 scripts/chromatic_publish.sh 파일을 만듦니다.

# scripts/chromatic_publish.sh
CHROMATIC_TOKEN=$(grep CHROMATIC_TOKEN .env | cut -d "=" -f2)
npx chromatic --project-token=$CHROMATIC_TOKEN

grep을 쓰는 부분은 대충 .env 파일에서 CHROMATIC_TOKEN과 일치하는 값을 읽어온 뒤 "=" 기준으로 slice하고 2번째 인자를 가져온다는 내용입니다. 그러면 토큰값을 읽어올 수 있습니다.

npx 부분에서 읽어온 토큰값으로 퍼블리싱을 수행합니다.

"scripts": {
  ...
  "chromatic": "bash scripts/chromatic_publish.sh"
}

scripts에서 만든 sh 파일을 실행하게 하면 됩니다.

잘 실행됩니다.

변경사항 빌드&퍼블리싱하기

이후 사이트에서 알려주는 튜토리얼은 패스하고 Changelog 페이지로 가면

이런식으로 Build된 사항들을 볼 수 있습니다.

변경사항을 만든 뒤 커밋을 만들고(커밋을 만들어야 퍼블리싱이 가능합니다.) npm run chromatic을 실행하면

이렇게 새로운 Build가 생성이 됩니다. (Build 9이 새로 생김)

Build 9를 클릭해보면

위와 같이 자세한 변경을 알려주고 아직 Review되지 않았다고 뜹니다.
이런식으로 팀원들과 변경된 View를 공유할 수 있습니다.

변경된 컴포넌트를 클릭하면

이렇게 변경된 View도 볼 수 있습니다.
다시 돌아와서 Review change 버튼을 누르면

이렇게 변경된 View를 비교할 수 있게 하고 코드로도 볼 수 있게 해줍니다.
코멘트도 달 수 있습니다. 디자이너와 협력하는 경우 유용할 것 같습니다.

오른쪽 끝의 Accept 버튼을 눌러 변경사항을 수락하면

이렇게 Accepted로 상태가 변경됩니다.

Figma 애드온

https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma

Figma에 만들어놓은 디자인 시스템을 따라갈 예정이므로 Figma와 연동하는 애드온을 추가합니다.

Figma에 Storybook 플러그인 설치

Figma 플러그인 중 Storybook을 검색하면 바로 보이는 플러그인을 설치하면 됩니다.

다음 컴포넌트와 연결할 Figma의 컴포넌트를 선택한 뒤, 플러그인을 선택합니다.

최초 Chromatic과 연결하는 화면이 나옵니다.

Chromatic으로 로그인하고 연결을 진행합니다.

이렇게 링크를 연결할 수 있는 화면이 나타납니다.

다시 Chromatic 사이트의 Changelog에서 Library를 클릭하고 연결할 컴포넌트를 클릭하면

왼쪽에 링크 버튼이 있는데, 이 링크를 복사하고 Figma 플러그인에 입력해주면 됩니다.

이제 연결한 컴포넌트를 Figma에서 확인할 수 있습니다.

연결한 Figma의 컴포넌트를 클릭하면 오른쪽 사이드바 하단에 플러그인이 나오게 되고, 클릭해서 실제 화면과 비교해볼 수 있습니다.

Storybook에 Figma 플러그인 추가

https://storybook.js.org/addons/storybook-addon-designs/

npm install --save-dev storybook-addon-designs

의존성 설치

// .storybook/main.cjs
module.exports = {
  ...
    addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "storybook-addon-designs", // 추가
  ],
  ...
}

.storybook/main.cjs 에서 애드온 추가

Figma로 이동해서

연결할 컴포넌트를 선택해주고, Share 버튼을 누릅니다.

Anyone with the link - can view 로 Share 권한을 수정합니다.

다음 Copy link를 눌러 링크를 복사하고
연결할 stories.ts 파일에 아래처럼 파라미터를 추가합니다.

// CopyList.stories.ts
...


const Template = ({ copies }) => html`<copy-list>Hello World!!!!</copy-list>`;

export const Default = Template.bind({});
Default.args = {
  copies: ["a", "b", "c"],
};
// 이 부분 추가
Default.parameters = {
  design: {
    type: "figma",
    url: "[복사한 링크]",
  },
};