refactor(editor): Move editor-ui and design-system to frontend dir (no-changelog) (#13564)

.github/scripts/trim-fe-packageJson.js

@@ -14,5 +14,5 @@ const trimPackageJson = (packageName) => {
 };
 
 trimPackageJson('frontend/@n8n/chat');
-trimPackageJson('design-system');
+trimPackageJson('frontend/@n8n/design-system');
-trimPackageJson('editor-ui');
+trimPackageJson('frontend/editor-ui');

.github/workflows/release-publish.yml

@@ -162,7 +162,7 @@ jobs:
         with:
           projects: ${{ secrets.SENTRY_FRONTEND_PROJECT }}
           version: ${{ needs.publish-to-npm.outputs.release }}
-          sourcemaps: packages/editor-ui/dist
+          sourcemaps: packages/frontend/editor-ui/dist
 
       - name: Create a backend release
         uses: getsentry/action-release@v1.7.0

.prettierignore

@@ -2,7 +2,7 @@ coverage
 dist
 package.json
 pnpm-lock.yaml
-packages/editor-ui/index.html
+packages/frontend/editor-ui/index.html
 packages/nodes-base/nodes/**/test
 packages/cli/templates/form-trigger.handlebars
 packages/cli/templates/form-trigger-completion.handlebars

CONTRIBUTING.md

@@ -49,8 +49,8 @@ The most important directories:
   execution, active webhooks and
   workflows. **Contact n8n before
   starting on any changes here**
-- [/packages/design-system](/packages/design-system) - Vue frontend components
+- [/packages/frontend/@n8n/design-system](/packages/design-system) - Vue frontend components
-- [/packages/editor-ui](/packages/editor-ui) - Vue frontend workflow editor
+- [/packages/frontend/editor-ui](/packages/editor-ui) - Vue frontend workflow editor
 - [/packages/node-dev](/packages/node-dev) - CLI to create new n8n-nodes
 - [/packages/nodes-base](/packages/nodes-base) - Base n8n nodes
 - [/packages/workflow](/packages/workflow) - Workflow code with interfaces which

codecov.yml

@@ -43,8 +43,6 @@ component_management:
       name: Frontend
       paths:
         - packages/@n8n/codemirror-lang/**
-        - packages/design-system/**
-        - packages/editor-ui/**
         - packages/frontend/**
     - component_id: nodes_packages
       name: Nodes

docker/images/n8n/Dockerfile

@@ -20,7 +20,7 @@ RUN set -eux; \
 	npm install -g --omit=dev n8n@${N8N_VERSION} --ignore-scripts && \
 	npm rebuild --prefix=/usr/local/lib/node_modules/n8n sqlite3 && \
 	rm -rf /usr/local/lib/node_modules/n8n/node_modules/@n8n/chat && \
-	rm -rf /usr/local/lib/node_modules/n8n/node_modules/n8n-design-system && \
+	rm -rf /usr/local/lib/node_modules/n8n/node_modules/@n8n/design-system && \
 	rm -rf /usr/local/lib/node_modules/n8n/node_modules/n8n-editor-ui/node_modules && \
 	find /usr/local/lib/node_modules/n8n -type f -name "*.ts" -o -name "*.js.map" -o -name "*.vue" | xargs rm -f && \
 	rm -rf /root/.npm

package.json

@@ -15,10 +15,10 @@
     "build:frontend": "turbo run build:frontend",
     "build:nodes": "turbo run build:nodes",
     "typecheck": "turbo typecheck",
-    "dev": "turbo run dev --parallel --env-mode=loose --filter=!n8n-design-system --filter=!@n8n/chat --filter=!@n8n/task-runner",
+    "dev": "turbo run dev --parallel --env-mode=loose --filter=!@n8n/design-system --filter=!@n8n/chat --filter=!@n8n/task-runner",
-    "dev:be": "turbo run dev --parallel --env-mode=loose --filter=!n8n-design-system --filter=!@n8n/chat --filter=!@n8n/task-runner --filter=!n8n-editor-ui",
+    "dev:be": "turbo run dev --parallel --env-mode=loose --filter=!@n8n/design-system --filter=!@n8n/chat --filter=!@n8n/task-runner --filter=!n8n-editor-ui",
     "dev:ai": "turbo run dev --parallel --env-mode=loose --filter=@n8n/nodes-langchain --filter=n8n --filter=n8n-core",
-    "dev:fe": "run-p start \"dev:fe:editor --filter=n8n-design-system\"",
+    "dev:fe": "run-p start \"dev:fe:editor --filter=@n8n/design-system\"",
     "dev:fe:editor": "turbo run dev --parallel --env-mode=loose --filter=n8n-editor-ui",
     "dev:e2e": "cd cypress && pnpm run test:e2e:dev",
     "dev:e2e:v1": "cd cypress && pnpm run test:e2e:dev:v1",

packages/@n8n/eslint-config/local-rules.js

@@ -320,7 +320,7 @@ module.exports = {
 			const LOCALE_NAMESPACE = '$locale';
 			const LOCALE_FILEPATH = cwd.endsWith('editor-ui')
 				? path.join(cwd, locale)
-				: path.join(cwd, 'packages/editor-ui', locale);
+				: path.join(cwd, 'packages/frontend/editor-ui', locale);
 
 			let LOCALE_MAP;
 

packages/design-system/biome.jsonc

@@ -1,7 +0,0 @@
-{
-	"$schema": "../../node_modules/@biomejs/biome/configuration_schema.json",
-	"extends": ["../../biome.jsonc"],
-	"formatter": {
-		"ignore": ["theme/**"]
-	}
-}

packages/frontend/@n8n/design-system/README.md

@@ -1,6 +1,6 @@
 ![n8n.io - Workflow Automation](https://user-images.githubusercontent.com/65276001/173571060-9f2f6d7b-bac0-43b6-bdb2-001da9694058.png)
 
-# n8n-design-system
+# @n8n/design-system
 
 A component system for [n8n](https://n8n.io) using Storybook to preview.
 

packages/frontend/@n8n/design-system/biome.jsonc

@@ -0,0 +1,7 @@
+{
+	"$schema": "../../../../node_modules/@biomejs/biome/configuration_schema.json",
+	"extends": ["../../../../biome.jsonc"],
+	"formatter": {
+		"ignore": ["theme/**"]
+	}
+}

packages/frontend/@n8n/design-system/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "n8n-design-system",
+  "name": "@n8n/design-system",
   "version": "1.69.0",
   "main": "src/index.ts",
   "import": "src/index.ts",
@@ -13,8 +13,8 @@
     "build:storybook": "storybook build",
     "storybook": "storybook dev -p 6006 --no-open",
     "chromatic": "chromatic",
-    "format": "biome format --write .  && prettier --write . --ignore-path ../../.prettierignore",
+    "format": "biome format --write .  && prettier --write . --ignore-path ../../../../.prettierignore",
-    "format:check": "biome ci .  && prettier --check . --ignore-path ../../.prettierignore",
+    "format:check": "biome ci .  && prettier --check . --ignore-path ../../../../.prettierignore",
     "lint": "eslint src --ext .js,.ts,.vue --quiet",
     "lintfix": "eslint src --ext .js,.ts,.vue --fix"
   },

packages/frontend/@n8n/design-system/src/__tests__/render.ts

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/vue';
 
-import { N8nPlugin } from 'n8n-design-system/plugin';
+import { N8nPlugin } from '@n8n/design-system/plugin';
 
 type Component = Parameters<typeof render>[0];
 type RenderOptions = Parameters<typeof render>[1];

packages/frontend/@n8n/design-system/src/__tests__/setup.ts

@@ -2,7 +2,7 @@ import '@testing-library/jest-dom';
 import { configure } from '@testing-library/vue';
 import { config } from '@vue/test-utils';
 
-import { N8nPlugin } from 'n8n-design-system/plugin';
+import { N8nPlugin } from '@n8n/design-system/plugin';
 
 configure({ testIdAttribute: 'data-test-id' });
 

packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.test.ts

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/vue';
 
-import { n8nHtml } from 'n8n-design-system/directives';
+import { n8nHtml } from '@n8n/design-system/directives';
 
 import AskAssistantChat from './AskAssistantChat.vue';
 

packages/frontend/@n8n/design-system/src/components/CodeDiff/CodeDiff.vue

@@ -2,7 +2,7 @@
 import parseDiff from 'parse-diff';
 import { computed } from 'vue';
 
-import { useI18n } from 'n8n-design-system/composables/useI18n';
+import { useI18n } from '@n8n/design-system/composables/useI18n';
 
 const MIN_LINES = 4;
 

packages/frontend/@n8n/design-system/src/components/N8nActionBox/ActionBox.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import N8nTooltip from 'n8n-design-system/components/N8nTooltip/Tooltip.vue';
+import N8nTooltip from '@n8n/design-system/components/N8nTooltip/Tooltip.vue';
-import type { ButtonType } from 'n8n-design-system/types/button';
+import type { ButtonType } from '@n8n/design-system/types/button';
 
 import N8nButton from '../N8nButton';
 import N8nCallout, { type CalloutTheme } from '../N8nCallout';

packages/frontend/@n8n/design-system/src/components/N8nActionDropdown/ActionDropdown.vue

@@ -8,7 +8,7 @@
 import { ElDropdown, ElDropdownMenu, ElDropdownItem, type Placement } from 'element-plus';
 import { ref, useCssModule, useAttrs, computed } from 'vue';
 
-import type { IconSize } from 'n8n-design-system/types/icon';
+import type { IconSize } from '@n8n/design-system/types/icon';
 
 import type { ActionDropdownItem } from '../../types';
 import N8nIcon from '../N8nIcon';

packages/frontend/@n8n/design-system/src/components/N8nActionToggle/ActionToggle.vue

@@ -2,8 +2,8 @@
 import { ElDropdown, ElDropdownMenu, ElDropdownItem, type Placement } from 'element-plus';
 import { ref } from 'vue';
 
-import type { UserAction } from 'n8n-design-system/types';
+import type { UserAction } from '@n8n/design-system/types';
-import type { IconOrientation, IconSize } from 'n8n-design-system/types/icon';
+import type { IconOrientation, IconSize } from '@n8n/design-system/types/icon';
 
 import N8nIcon from '../N8nIcon';
 

packages/frontend/@n8n/design-system/src/components/N8nBadge/Badge.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { TextSize } from 'n8n-design-system/types/text';
+import type { TextSize } from '@n8n/design-system/types/text';
 
 import N8nText from '../N8nText';