ci: setup chromatic

.github/actions/chromatic/action.yml

@@ -0,0 +1,33 @@
+name: deploy chromatic
+description: Deploy storybook to Chromatic
+
+inputs:
+  TOKEN:
+    description: 'Chromatic token'
+    required: true
+
+runs:
+  using: 'composite'
+
+  steps:
+    - name: Tests
+      run: yarn test-storybook:ci
+      shell: bash
+
+    - name: Publish to Chromatic
+      if: github.ref != 'refs/heads/main'
+      uses: chromaui/action@v1
+      with:
+        projectToken: ${{ inputs.TOKEN }}
+        buildScriptName: build-storybook
+        onlyChanged: true
+        exitOnceUploaded: true
+
+    - name: Publish to Chromatic and auto accept changes
+      if: github.ref == 'refs/heads/main'
+      uses: chromaui/action@v1
+      with:
+        projectToken: ${{ inputs.TOKEN }}
+        autoAcceptChanges: true
+        onlyChanged: true
+        exitOnceUploaded: true

.github/workflows/ci.yml

@@ -54,3 +54,8 @@ jobs:
 
       - name: Typecheck
         run: yarn type-check
+
+      - name: Chromatic
+        uses: ./.github/actions/chromatic
+        with:
+          TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/publish.yml

@@ -61,3 +61,8 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
           NPM_TOKEN: ${{ secrets.GH_TOKEN }}
         run: npx semantic-release
+
+      - name: Chromatic
+        uses: ./.github/actions/chromatic
+        with:
+          TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}