Add support for chromatic (#357)

* Add support for chromatic

* Make another commit

* Add chromatic on push

* Add fetch depth

* Publish comment

* Generate previews on pull request

* Only publish link on pull requests

* Only on push to main

* Add permissions

* Add more permissions

* Add missing permissions

* Exit once uploaded

.github/workflows/chromatic.yml

@@ -0,0 +1,38 @@
+name: "Chromatic"
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  chromatic:
+    permissions: write-all
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "21.x"
+          cache: npm
+      - run: npm ci
+      - name: Run Chromatic
+        id: chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          autoAcceptChanges: "main"
+          exitOnceUploaded: true
+
+      - name: Publish Storybook Link in the comments
+        if: github.event_name == 'pull_request'
+        uses: dannyhw/[email protected]
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          review-url: ${{ steps.chromatic.outputs.url }}
+          build-url: ${{ steps.chromatic.outputs.buildUrl }}
+          storybook-url: ${{ steps.chromatic.outputs.storybookUrl }}

package.json

@@ -97,6 +97,7 @@
     "@whitespace/storybook-addon-html": "^6.1.1",
     "autoprefixer": "^10.4.18",
     "axe-playwright": "^2.0.1",
+    "chromatic": "^11.5.6",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.9",