diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml new file mode 100644 index 0000000000..ce860885c1 --- /dev/null +++ b/.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 }} diff --git a/.gitignore b/.gitignore index f17a0b27ad..2d016d557a 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,4 @@ cypress/downloads/* *.swp CHANGELOG-*.md *.mdx +build-storybook.log diff --git a/packages/@n8n/storybook/main.ts b/packages/@n8n/storybook/main.ts index d7d5e1b49b..79521753be 100644 --- a/packages/@n8n/storybook/main.ts +++ b/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', diff --git a/packages/@n8n/storybook/package.json b/packages/@n8n/storybook/package.json index 1b330cb417..bdd8017760 100644 --- a/packages/@n8n/storybook/package.json +++ b/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" } } diff --git a/packages/design-system/chromatic.config.json b/packages/design-system/chromatic.config.json new file mode 100644 index 0000000000..ce95f3e2fb --- /dev/null +++ b/packages/design-system/chromatic.config.json @@ -0,0 +1,4 @@ +{ + "projectId": "Project:65f085d72c13e4e1154414db", + "buildScriptName": "build:storybook" +} diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 9389128a08..4ad6577705 100644 --- a/packages/design-system/package.json +++ b/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" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0abf74f9e5..00cd71c50d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -334,6 +334,9 @@ importers: packages/@n8n/storybook: devDependencies: + '@chromatic-com/storybook': + specifier: ^1.2.18 + version: 1.2.18(react@18.2.0) '@storybook/addon-a11y': specifier: ^8.0.0 version: 8.0.0 @@ -364,6 +367,9 @@ importers: '@storybook/vue3-vite': specifier: ^8.0.0 version: 8.0.0(react-dom@18.2.0)(react@18.2.0)(vite@5.1.6)(vue@3.4.21) + chromatic: + specifier: ^11.0.8 + version: 11.0.8 storybook: specifier: ^8.0.0 version: 8.0.0(react-dom@18.2.0)(react@18.2.0) @@ -4544,6 +4550,21 @@ packages: resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==} dev: true + /@chromatic-com/storybook@1.2.18(react@18.2.0): + resolution: {integrity: sha512-Fi3T4gO1zIRr77mz6tqRZRusFneA6MtJxQT38Csizez2ZViOmTUd81sHVC4MDHvhnwDaksqnDKvNUYcl1m3nIA==} + engines: {node: '>=16.0.0', yarn: '>=1.22.18'} + dependencies: + chromatic: 11.0.8 + filesize: 10.1.0 + jsonfile: 6.1.0 + react-confetti: 6.1.0(react@18.2.0) + strip-ansi: 7.1.0 + transitivePeerDependencies: + - '@chromatic-com/cypress' + - '@chromatic-com/playwright' + - react + dev: true + /@codemirror/autocomplete@6.11.1(@codemirror/language@6.9.3)(@codemirror/state@6.3.3)(@codemirror/view@6.22.3)(@lezer/common@1.1.0): resolution: {integrity: sha512-L5UInv8Ffd6BPw0P3EF7JLYAMeEbclY7+6Q11REt8vhih8RuLreKtPy/xk8wPxs4EQgYqzI7cdgpiYwWlbS/ow==} peerDependencies: @@ -5470,7 +5491,7 @@ packages: chalk: 4.1.2 convert-source-map: 2.0.0 fast-json-stable-stringify: 2.1.0 - graceful-fs: 4.2.10 + graceful-fs: 4.2.11 jest-haste-map: 29.6.2 jest-regex-util: 29.4.3 jest-util: 29.6.2 @@ -12251,6 +12272,19 @@ packages: resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==} engines: {node: '>=10'} + /chromatic@11.0.8: + resolution: {integrity: sha512-+zJ5h0/Eu5z26KCNLIw2tknbK69gUO8q3Jsew4oU0Q/i/NPhIwcXhvPP7u75aLJgX1EI61+ndiGJA/yeQZQcgw==} + hasBin: true + peerDependencies: + '@chromatic-com/cypress': ^0.*.* || ^1.0.0 + '@chromatic-com/playwright': ^0.*.* || ^1.0.0 + peerDependenciesMeta: + '@chromatic-com/cypress': + optional: true + '@chromatic-com/playwright': + optional: true + dev: true + /chrome-trace-event@1.0.3: resolution: {integrity: sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==} engines: {node: '>=6.0'} @@ -15089,6 +15123,11 @@ packages: dependencies: minimatch: 5.1.5 + /filesize@10.1.0: + resolution: {integrity: sha512-GTLKYyBSDz3nPhlLVPjPWZCnhkd9TrrRArNcy8Z+J2cqScB7h2McAzR6NBX6nYOoWafql0roY8hrocxnZBv9CQ==} + engines: {node: '>= 10.4.0'} + dev: true + /fill-range@4.0.0: resolution: {integrity: sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==} engines: {node: '>=0.10.0'} @@ -17311,7 +17350,7 @@ packages: '@types/node': 18.16.16 anymatch: 3.1.3 fb-watchman: 2.0.2 - graceful-fs: 4.2.10 + graceful-fs: 4.2.11 jest-regex-util: 29.4.3 jest-util: 29.6.2 jest-worker: 29.6.2 @@ -22107,6 +22146,16 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: true + /react-confetti@6.1.0(react@18.2.0): + resolution: {integrity: sha512-7Ypx4vz0+g8ECVxr88W9zhcQpbeujJAVqL14ZnXJ3I23mOI9/oBVTQ3dkJhUmB0D6XOtCZEM6N0Gm9PMngkORw==} + engines: {node: '>=10.18'} + peerDependencies: + react: ^16.3.0 || ^17.0.1 || ^18.0.0 + dependencies: + react: 18.2.0 + tween-functions: 1.2.0 + dev: true + /react-dom@18.2.0(react@18.2.0): resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} peerDependencies: @@ -23841,6 +23890,13 @@ packages: dependencies: ansi-regex: 6.0.1 + /strip-ansi@7.1.0: + resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==} + engines: {node: '>=12'} + dependencies: + ansi-regex: 6.0.1 + dev: true + /strip-bom@2.0.0: resolution: {integrity: sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==} engines: {node: '>=0.10.0'} @@ -24665,6 +24721,10 @@ packages: turbo-windows-arm64: 1.10.12 dev: true + /tween-functions@1.2.0: + resolution: {integrity: sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==} + dev: true + /tweetnacl-util@0.15.1: resolution: {integrity: sha512-RKJBIj8lySrShN4w6i/BonWp2Z/uxwC3h4y7xsRrpP59ZboCd0GpEVsOnMDYLMmKBpYhb5TgHzZXy7wTfYFBRw==} dev: false