feat: migrate frontend from React 19 to Svelte 5 + SvelteKit

.gitignore

@@ -8,3 +8,5 @@ coverage/
 *.log
 .DS_Store
 .claude/
+apps/web/.svelte-kit/
+apps/web/build/

apps/web-react/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: { config: './apps/web/tailwind.config.js' },
+    autoprefixer: {},
+  },
+};

apps/web-react/project.json

@@ -0,0 +1,75 @@
+{
+  "name": "web-react",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/web-react/src",
+  "projectType": "application",
+  "targets": {
+    "build-css": {
+      "executor": "nx:run-commands",
+      "outputs": ["{workspaceRoot}/dist/apps/web-react/styles.css"],
+      "options": {
+        "command": "pnpm tailwindcss -i apps/web-react/src/app/styles/global.css -o dist/apps/web-react/styles.css --config apps/web-react/tailwind.config.js"
+      }
+    },
+    "build": {
+      "executor": "@nx/esbuild:esbuild",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "dependsOn": ["^build", "build-css"],
+      "options": {
+        "platform": "browser",
+        "outputPath": "dist/apps/web",
+        "deleteOutputPath": false,
+        "bundle": true,
+        "main": "apps/web-react/src/main.tsx",
+        "tsConfig": "apps/web-react/tsconfig.app.json",
+        "assets": [
+          { "glob": "index.html", "input": "apps/web", "output": "." }
+        ],
+        "esbuildOptions": {
+          "jsx": "automatic",
+          "format": "iife",
+          "alias": {
+            "@": "apps/web-react/src"
+          },
+          "define": {
+            "process.env.NODE_ENV": "\"production\"",
+            "process.env.API_URL": "\"http://localhost:3000\""
+          }
+        }
+      },
+      "configurations": {
+        "development": {
+          "minify": false,
+          "sourcemap": true,
+          "esbuildOptions": {
+            "jsx": "automatic",
+            "format": "iife",
+            "define": {
+              "process.env.NODE_ENV": "\"development\"",
+              "process.env.API_URL": "\"http://localhost:3000\""
+            }
+          }
+        },
+        "production": {
+          "minify": true,
+          "sourcemap": false
+        }
+      }
+    },
+    "serve": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "node tools/web-dev-server.mjs"
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "apps/web-react/jest.config.ts"
+      }
+    }
+  },
+  "tags": ["type:app", "scope:web"]
+}

apps/web-react/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

apps/web-react/tailwind.config.js

@@ -0,0 +1,64 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ['class'],
+  content: ['./apps/web/src/**/*.{ts,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+  plugins: [],
+};

apps/web-react/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.spec.json" }
+  ]
+}

apps/web/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "web",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev --port 4200",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.21.4",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "svelte": "^5.34.1",
+    "svelte-check": "^4.2.1",
+    "vite": "^6.3.5"
+  },
+  "dependencies": {
+    "bits-ui": "^1.3.22",
+    "lucide-svelte": "^0.511.0"
+  }
+}

apps/web/postcss.config.js

@@ -1,6 +1,6 @@
-module.exports = {
+export default {
   plugins: {
-    tailwindcss: { config: './apps/web/tailwind.config.js' },
+    tailwindcss: {},
     autoprefixer: {},
   },
 };

apps/web/project.json

@@ -4,70 +4,26 @@
   "sourceRoot": "apps/web/src",
   "projectType": "application",
   "targets": {
-    "build-css": {
-      "executor": "nx:run-commands",
-      "outputs": ["{workspaceRoot}/dist/apps/web/styles.css"],
-      "options": {
-        "command": "pnpm tailwindcss -i apps/web/src/app/styles/global.css -o dist/apps/web/styles.css --config apps/web/tailwind.config.js"
-      }
-    },
     "build": {
-      "executor": "@nx/esbuild:esbuild",
-      "outputs": ["{options.outputPath}"],
-      "defaultConfiguration": "production",
-      "dependsOn": ["^build", "build-css"],
+      "executor": "nx:run-commands",
+      "outputs": ["{workspaceRoot}/dist/apps/web"],
       "options": {
-        "platform": "browser",
-        "outputPath": "dist/apps/web",
-        "deleteOutputPath": false,
-        "bundle": true,
-        "main": "apps/web/src/main.tsx",
-        "tsConfig": "apps/web/tsconfig.app.json",
-        "assets": [
-          { "glob": "index.html", "input": "apps/web", "output": "." }
-        ],
-        "esbuildOptions": {
-          "jsx": "automatic",
-          "format": "iife",
-          "alias": {
-            "@": "apps/web/src"
-          },
-          "define": {
-            "process.env.NODE_ENV": "\"production\"",
-            "process.env.API_URL": "\"http://localhost:3000\""
-          }
-        }
-      },
-      "configurations": {
-        "development": {
-          "minify": false,
-          "sourcemap": true,
-          "esbuildOptions": {
-            "jsx": "automatic",
-            "format": "iife",
-            "define": {
-              "process.env.NODE_ENV": "\"development\"",
-              "process.env.API_URL": "\"http://localhost:3000\""
-            }
-          }
-        },
-        "production": {
-          "minify": true,
-          "sourcemap": false
-        }
+        "command": "pnpm vite build",
+        "cwd": "{workspaceRoot}/apps/web"
       }
     },
     "serve": {
       "executor": "nx:run-commands",
       "options": {
-        "command": "node tools/web-dev-server.mjs"
+        "command": "pnpm vite dev --port 4200 --host",
+        "cwd": "{workspaceRoot}/apps/web"
       }
     },
     "test": {
-      "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "executor": "nx:run-commands",
       "options": {
-        "jestConfig": "apps/web/jest.config.ts"
+        "command": "pnpm svelte-check --tsconfig ./tsconfig.json",
+        "cwd": "{workspaceRoot}/apps/web"
       }
     }
   },

apps/web/src/app.css

@@ -0,0 +1,59 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

apps/web/src/app.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>