feat(editor): Setup Chromatic for design-system (no-changelog) (#8870)

.github/workflows/chromatic.yml

@@ -0,0 +1,26 @@
+name: Chromatic
+
+on:
+  schedule:
+    - cron: '0 0 * * *'
+  workflow_dispatch:
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4.1.1
+        with:
+          fetch-depth: 0
+      - run: corepack enable
+      - uses: actions/setup-node@v4.0.1
+        with:
+          node-version: 18.x
+          cache: 'pnpm'
+      - run: pnpm install --frozen-lockfile
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@latest
+        with:
+          workingDir: packages/design-system
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.gitignore

@@ -23,3 +23,4 @@ cypress/downloads/*
 *.swp
 CHANGELOG-*.md
 *.mdx
+build-storybook.log

packages/@n8n/storybook/main.ts

@@ -3,6 +3,7 @@ import type { StorybookConfig } from '@storybook/vue3-vite';
 export const sharedConfig: StorybookConfig = {
 	stories: ['../src/**/*.stories.ts'],
 	addons: [
+		'@chromatic-com/storybook',
 		'@storybook/addon-a11y',
 		'@storybook/addon-essentials',
 		'@storybook/addon-interactions',

packages/@n8n/storybook/package.json

@@ -2,6 +2,7 @@
   "name": "@n8n/storybook",
   "private": true,
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.2.18",
     "@storybook/addon-a11y": "^8.0.0",
     "@storybook/addon-actions": "^8.0.0",
     "@storybook/addon-docs": "^8.0.0",
@@ -12,6 +13,7 @@
     "@storybook/test": "^8.0.0",
     "@storybook/vue3": "^8.0.0",
     "@storybook/vue3-vite": "^8.0.0",
+    "chromatic": "^11.0.8",
     "storybook": "^8.0.0"
   }
 }

packages/design-system/chromatic.config.json

@@ -0,0 +1,4 @@
+{
+  "projectId": "Project:65f085d72c13e4e1154414db",
+  "buildScriptName": "build:storybook"
+}

packages/design-system/package.json

@@ -22,6 +22,7 @@
     "test:dev": "vitest",
     "build:storybook": "storybook build",
     "storybook": "storybook dev -p 6006",
+    "chromatic": "chromatic",
     "format": "prettier --write . --ignore-path ../../.prettierignore",
     "lint": "eslint src --ext .js,.ts,.vue --quiet",
     "lintfix": "eslint src --ext .js,.ts,.vue --fix"