Project/Figma+Storybook

chromatic 배포 세팅

건담아빠 2023. 10. 26. 17:46

 

https://storybook.js.org/tutorials/intro-to-storybook/react/en/deploy/

 

Storybook Tutorials

Learn how to develop UIs with components and design systems. Our in-depth frontend guides are created by Storybook maintainers and peer-reviewed by the open source community.

storybook.js.org

 

chromatic 회원가입

아래 사이트 접속 후 회원가입을 진행한다.

https://www.chromatic.com/

 

Automatically review, test, and document Storybook

Chromatic automates visual & interaction tests for Storybook. Connect CI/CD and Figma workflows to streamline stakeholder sign-off. Generate versioned component docs.

www.chromatic.com

 

프로젝트를 Github 프로젝트와 연결합니다.

 

 

 

 

 

패키지를 개발 종속성으로 추가

$ yarn add -D chromatic
$ yarn add --dev chromatic

스토리북 출판
명령줄에서 다음 명령을 사용하여 처음으로 Chromatic의 보안 CDN에 게시합니다.
npx chromatic --project-token=<project-token>

$ yarn chromatic --project-token=<project-token>

 

성공!