Chromatic
-
2. 디자인시스템 - Storybook chromatic 배포 및 git 연동Project/Figma+Storybook 2023. 11. 13. 10:30
1. GitHub에 소스 배포 (참고) 1.1. 원격저장소 만들기 1.2. 로컬 저장소 -> 원격 저장소 푸시 # gitignore 파일 생성 $ npx add-gitignore storybookjs,react,yarn # 저장소 초기화 $ git init # git이 관리할 대상으로 파일 등록 $ git add . # 파일상태 확인 $ git status # 변경 내역에 대한 메모와 함께 커밋 $ git commit -m "init commit" # 원격 저장소 추가 $ git remote add origin [원격저장소 주소] # 연결된 저장소 확인 $ git remote -v # 현재 브랜치 이름 확인 $ git branch # 원격 저장소 origin에 master 브랜치를 푸시한다. $ git ..
-
chromatic에 git action 설정Project/Figma+Storybook 2023. 10. 30. 15:36
push 후 chromatic에 자동 배포되도록 설정해보자! 작업 흐름은 commit을 push한다던가 풀 리퀘스트를 만드는 것 같은 이벤트에 의해 트리거된다. 상호작용 테스트와 접근성 검사를 Jest로 수행합니다. 시각적 요소 그리고 구성 테스트를 크로마틱(Chromatic)으로 수행합니다. 사용자 흐름(user flow) 테스트를 사이프레스(Cypress)로 수행합니다. 1. chromatic.yml 파일 생성 https://www.chromatic.com/docs/github-actions/ Introduction • Chromatic docs Chromatic is a cloud based toolchain built around Storybook to help teams develop robus..
-
chromatic 배포 세팅Project/Figma+Storybook 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 Storyboo..