[Visual Testing] Chromatic - Initial Github action integration

.github/workflows/chromatic.yml

@@ -0,0 +1,26 @@
+# .github/workflows/chromatic.yml
+
+name: 'Visual Regression - Chromatic'
+
+on: pull_request
+
+jobs:
+  chromatic-deployment:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install compatible node version
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          onlyChanged: true # Reduce snapshot quantity
+          exitZeroOnChanges: false # 👈 Set to true if visual changes SHOULD NOT block merging of PRs

.gitignore

@@ -7,4 +7,5 @@ dist-storybook
 coverage
 .nyc_output
 .stylelintcache
-cypress/videos
+cypress/videos
+build-storybook.log

package.json

@@ -42,13 +42,14 @@
     "start": "yarn storybook",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook -o dist-storybook && yarn copy-storybook-assets",
-    "copy-storybook-assets": "cp -r src/assets/ dist-storybook/assets/"
+    "copy-storybook-assets": "cp -r src/assets/ dist-storybook/assets/",
+    "chromatic": "yarn run build-storybook && chromatic --storybook-build-dir dist-storybook --only-changed --webpack-stats-json"
   },
   "dependencies": {
     "@cfpb/cfpb-design-system": "^0.21.13",
     "@tanstack/react-query": "4.13.5",
-    "classnames": "^2.3.2",
     "@tanstack/react-table": "^8.8.0",
+    "classnames": "^2.3.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "6.3.0",
@@ -81,6 +82,7 @@
     "@vitest/coverage-istanbul": "0.25.2",
     "autoprefixer": "10.4.13",
     "babel-loader": "^8.3.0",
+    "chromatic": "^6.17.3",
     "commitizen": "4.2.5",
     "css-mediaquery": "0.1.2",
     "cypress": "10.11.0",