add chromatic

.github/workflows/chromatic.yml

@@ -0,0 +1,34 @@
+name: 'Chromatic'
+
+on: push
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 8
+          run_install: false
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: |
+            ${{ env.STORE_PATH }}
+            ${{ github.workspace }}/.next/cache
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}-
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/storybook-deploy.yml

@@ -14,8 +14,8 @@ jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4.1.0
-      - uses: actions/setup-node@v4.0.2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 20
       - uses: pnpm/action-setup@v4

README.md

@@ -6,6 +6,7 @@ _Note:_ This package is currently in beta. More to come!
 
 [![NPM version](https://img.shields.io/npm/v/react-subtle-nudge.svg?style=flat)](https://npmjs.com/package/react-subtle-nudge)
 [![NPM downloads](https://img.shields.io/npm/dm/react-subtle-nudge.svg?style=flat)](https://npmjs.com/package/react-subtle-nudge)
+[![Storybook](https://raw.githubusercontent.com/storybookjs/brand/master/badge/badge-storybook.svg)](https://brandawg93.github.io/react-subtle-nudge/)
 [![PayPal](https://img.shields.io/badge/paypal-donate-blue?logo=paypal)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=CEYYGVB7ZZ764&item_name=react-subtle-nudge&currency_code=USD&source=url)
 
 [Docs](https://brandawg93.github.io/react-subtle-nudge/)

package.json

@@ -63,6 +63,7 @@
     "@typescript-eslint/eslint-plugin": "^7.10.0",
     "@typescript-eslint/parser": "^7.10.0",
     "autoprefixer": "^10.4.19",
+    "chromatic": "^11.5.0",
     "concurrently": "^8.2.2",
     "css-loader": "^7.1.2",
     "eslint": "^8.57.0",