storybook을 더욱 효과적으로 이용하기 위해chromatic 가져오기

카탈로그

개발이 storybook을 가져왔습니다.
chromatic을 사용하면 storybook을 더욱 효과적으로 활용할 수 있다
실제로 검증을 해봤어요.

개발이 storybook을 가져왔습니다.

혼돈된 구성 요소를 정리하기 위해 가져오기 Atomic Design 를 결정합니다.그때도 storybook만들어야 해요.
절차는 대체로 다음과 같다.

설계자는 Atomic Design을 기반으로 어셈블리를 정리합니다.

엔지니어가 조립품과storybook을 제작한다.

매번 홍보는 Circle CI로storybook의build을 진행하고 논평할 때 코드와 함께 외관과 행위를 확인한다.

엔지니어가 서로 심사하고 인코딩 규칙 등을 정리한다.

새 화면 만들기/기존 화면 전환

이때 스토리북에 상당한 가치를 느꼈다.지금까지 화면과 함께 새로운 구성 요소를 만들고 시도한 것은 단독으로 구성 요소를 실현할 수 있다는 것이다.또한storybook의addon-knobs[1]를 이용하여 도형을 망라한 행위를 간단하게 확인할 수 있다.

chromatic을 사용하면 storybook을 더욱 효과적으로 활용할 수 있다

대체적으로 조립품을 다 만들 수 있기 때문에, 나는 다음 단계에 어떻게 유지보수할지 고려했다.이전 사람들의 지혜를 조사해 보니 시각 조정 테스트가 있는 것 같다.대략적으로 픽셀 단위로 의도치 않은 변경 여부를 확인하는 테스트다.
또한 디자이너가 부품에 대한 확인 작업을 하고 storybook에 있는 부품에 대해 직접 평론을 할 수 있다면 좋겠다(당시 지적 사항을 전자 표에 모아 표화, 수정 등 흔히 볼 수 있는 절차 처리를 했다).
각종 조사를 진행하는 과정에서 나는 이러한 문제들을 해결할 수 있는 도구로 chromatic을 발견했다.
chromatic는storybook의 핵심 관리자가 제작한 전용 도구로 구성 요소 구동의 각종 기능을 전문적으로 개발한다.호스트storybook(자체도 S3과 Netlify 등 사이트에서 할 수 있음), 상기 시각조정 테스트와 리뷰 기능, 방문 제한과 GuitHub의 PR 연합, GiitHub Actions에서 온 deploy 등 대체적으로 필요한 기능을 갖추고 있다.
자세한 설명은 공식 사이트에 전달되며 다음 장에서 가져오기 절차를 설명합니다.

실제로 도입했어요.

공식 사이트의 Get started now를 선택하여 자신의 GiitHub 계정(GiitBuckt와 GiitLab에서도 설명할 수 있음)을 결합합니다.그리고storybook에 설치된 기존 Repository를 선택하여chromatic에서 프로젝트를 만듭니다.public/privete를 막론하고,public repository는 접근을 제한할 수 없을 것 같습니다.
프로젝트를 제작한 후 프로젝트 토큰을 발행합니다.이것을 이용하면 손 옆에서 CLI를 이용하면 deploy를 사용할 수 있다.이번에는 GiitHub Actions를 이용하여 CI로 편입하는 프로그램을 소개합니다.
.github/workflows 이하, yml 파일을 만들고push.브랜치 등을 적당히 변경해 주세요.GiitHub 설정 페이지에서 Secrets, CHROMATIC 열기PROJECT_토키오에서 방금 프로젝트 토큰을 설정해야 합니다.

name: Chromatic

on:
  push:
    branches:
      - hoge
  
jobs:
  build:
    runs-on: ubuntu-latest
  
    steps:
      - uses: actions/checkout@v2
        with:
          fetch-depth: 0
      - run: npm ci
      - uses: chromaui/action@v1
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

이렇게 하면 대상 지점이 업데이트될 때마다 Chromatic은 자동으로 storybook에 deploy를 진행한다.단계는 이것뿐입니다.
마지막으로 화면과 함께 기능을 소개한다.

Build

각 Build 시간의 storybook을 확인할 수 있습니다.상세 화면에서 PR의 미리보기, 승인/기각(GiitHub과 다른 상태)을 지정할 수 있습니다.

Pull Requests

기릿허브의 PR 일람표와 업데이트된 스토리 수를 확인할 수 있다.세부 화면에서 UI Test 결과 및 변경된 구성 요소 확인

Library

storybook의 일람표를 확인할 수 있습니다.자세한 화면에서 구성 요소를 확인할 수 있습니다.평론도 가능합니다.

Manage

설정 페이지.무료 한도는 snaptShot 5천건으로, 절약을 위해 UI 리뷰와 Visual Test를 disable로 만들 수 있다.

각주
최신storybook에controls가 설치되어 있어 여기서도 같은 일을 할 수 있다.↩︎