Merge pull request #46 from gitcoinco/feat/chromatic-deployment

feat: chromatic deployment

.github/workflows/chromatic.yml

@@ -0,0 +1,55 @@
+name: "Chromatic Deployment"
+on:
+  pull_request:
+    types: [opened, synchronize, ready_for_review]
+    branches: [main]
+    paths:
+      - "**/*.mdx"
+      - "**/*.tsx"
+      - "**/*.ts"
+
+concurrency:
+  group: ${{ github.ref }} # This ensures that only one workflow runs per branch
+  cancel-in-progress: true # This cancels any previous runs in the same group
+
+jobs:
+  chromatic:
+    name: "Run Chromatic"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          run_install: false
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile # Install dependencies with lockfile's versions to ensure consistency
+
+      - name: Cache Build
+        id: cache-build
+        uses: actions/cache@v4
+        with:
+          path: dist
+          key: ${{ runner.os }}-build-${{ hashFiles('**/*.ts', '**/*.tsx', '**/*.mdx') }} # Cache key based on OS and file hashes
+          restore-keys: |
+            ${{ runner.os }}-build-
+
+      - name: Build
+        if: steps.cache-build.outputs.cache-hit != 'true'
+        run: pnpm build
+
+      - uses: chromaui/action@v11
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          diagnostics: true
+          exitZeroOnChanges: true

.github/workflows/storybook-tests-on-push.yml

@@ -1,5 +1,10 @@
 name: "Storybook Tests"
 on: push
+
+concurrency:
+  group: ${{ github.ref }} # This ensures that only one workflow runs per branch
+  cancel-in-progress: true # This cancels any previous runs in the same group
+
 jobs:
   test:
     timeout-minutes: 60

.storybook/main.ts

@@ -1,7 +1,7 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",

.storybook/preview.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import type { Preview } from "@storybook/react";
 import { withThemeByDataAttribute } from "@storybook/addon-themes";
 import { initialize, mswLoader } from "msw-storybook-addon";
-import { handlers } from "../src/mocks/handlers";
+import { handlers } from "../stories/mocks/handlers";
 
 initialize();
 

.storybook/test-runner.ts

@@ -1,17 +1,22 @@
 import type { TestRunnerConfig } from "@storybook/test-runner";
 import { injectAxe, checkA11y } from "axe-playwright";
+import { accessibilityTestsEnabled } from "../config/storybook";
 
 const config: TestRunnerConfig = {
   async preVisit(page) {
     await injectAxe(page);
   },
   async postVisit(page) {
-    await checkA11y(page, "#storybook-root", {
-      detailedReport: true,
-      detailedReportOptions: {
-        html: true,
-      },
-    });
+    if (accessibilityTestsEnabled) {
+      await checkA11y(page, "#storybook-root", {
+        detailedReport: true,
+        detailedReportOptions: {
+          html: true,
+        },
+      });
+    } else {
+      console.log("Accessibility tests are skipped.");
+    }
   },
 };
 

config/storybook.ts

@@ -0,0 +1,3 @@
+const accessibilityTestsEnabled = process.env.STORYBOOK_TEST_ACCESSIBILITY === "true";
+
+export { accessibilityTestsEnabled };

package.json

@@ -38,10 +38,10 @@
     "clean": "rm -rf node_modules && rm -rf dist",
     "type-check": "tsc --noEmit",
     "storybook": "storybook dev -p 6006",
-    "build:storybook": "storybook build",
+    "build-storybook": "storybook build",
     "build:docs": "storybook build --docs",
     "prepare": "husky",
-    "chromatic": "chromatic"
+    "chromatic": "chromatic --exit-zero-on-changes"
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"