From 141af9e9f199b1e086334706a76682b3acfb2f4a Mon Sep 17 00:00:00 2001 From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com> Date: Fri, 30 Jan 2026 10:21:24 +0800 Subject: [PATCH] feat(desktop): integrate @multica/ui shared components Add @multica/ui workspace dependency with @tailwindcss/vite plugin for CSS processing. Import globals.css for theme and replace template UI with shared Button component. Remove unused template CSS files. Co-Authored-By: Claude Opus 4.5 --- apps/desktop/package.json | 7 ++-- apps/desktop/src/App.css | 42 ----------------------- apps/desktop/src/App.tsx | 30 ++++------------ apps/desktop/src/index.css | 68 ------------------------------------- apps/desktop/src/main.tsx | 12 +++---- apps/desktop/tsconfig.json | 5 +++ apps/desktop/vite.config.ts | 21 +++++------- pnpm-lock.yaml | 37 +++++++++++++++----- 8 files changed, 60 insertions(+), 162 deletions(-) delete mode 100644 apps/desktop/src/App.css delete mode 100644 apps/desktop/src/index.css diff --git a/apps/desktop/package.json b/apps/desktop/package.json index 7fa39a35..8eb3132b 100644 --- a/apps/desktop/package.json +++ b/apps/desktop/package.json @@ -10,22 +10,25 @@ "preview": "vite preview" }, "dependencies": { + "@multica/ui": "workspace:*", "react": "catalog:", "react-dom": "catalog:" }, "devDependencies": { + "@tailwindcss/vite": "^4.1.18", "@types/react": "catalog:", "@types/react-dom": "catalog:", "@typescript-eslint/eslint-plugin": "^7.1.1", "@typescript-eslint/parser": "^7.1.1", "@vitejs/plugin-react": "^4.2.1", + "electron": "^30.0.1", + "electron-builder": "^24.13.3", "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", + "tailwindcss": "^4", "typescript": "catalog:", "vite": "^5.1.6", - "electron": "^30.0.1", - "electron-builder": "^24.13.3", "vite-plugin-electron": "^0.28.6", "vite-plugin-electron-renderer": "^0.14.5" }, diff --git a/apps/desktop/src/App.css b/apps/desktop/src/App.css deleted file mode 100644 index fe59efcb..00000000 --- a/apps/desktop/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx index 6c65102f..ae754f82 100644 --- a/apps/desktop/src/App.tsx +++ b/apps/desktop/src/App.tsx @@ -1,34 +1,18 @@ import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/electron-vite.animate.svg' -import './App.css' +import { Button } from '@multica/ui/components/button' function App() { const [count, setCount] = useState(0) return ( - <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

+
-

- Click on the Vite and React logos to learn more -

- + ) } diff --git a/apps/desktop/src/index.css b/apps/desktop/src/index.css deleted file mode 100644 index 00a7a3c6..00000000 --- a/apps/desktop/src/index.css +++ /dev/null @@ -1,68 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/apps/desktop/src/main.tsx b/apps/desktop/src/main.tsx index 9075890c..ad3387ad 100644 --- a/apps/desktop/src/main.tsx +++ b/apps/desktop/src/main.tsx @@ -1,15 +1,15 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.tsx' -import './index.css' +import "@multica/ui/globals.css" ReactDOM.createRoot(document.getElementById('root')!).render( , ) - -// Use contextBridge -window.ipcRenderer.on('main-process-message', (_event, message) => { - console.log(message) -}) + +// Use contextBridge +window.ipcRenderer.on('main-process-message', (_event, message) => { + console.log(message) +}) diff --git a/apps/desktop/tsconfig.json b/apps/desktop/tsconfig.json index fd9b1c3f..ab38ca18 100644 --- a/apps/desktop/tsconfig.json +++ b/apps/desktop/tsconfig.json @@ -13,6 +13,11 @@ "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"], + "@multica/ui/*": ["../../packages/ui/src/*"] + }, /* Linting */ "strict": true, diff --git a/apps/desktop/vite.config.ts b/apps/desktop/vite.config.ts index 544a4b4e..6651f566 100644 --- a/apps/desktop/vite.config.ts +++ b/apps/desktop/vite.config.ts @@ -1,29 +1,24 @@ -import { defineConfig } from 'vite' +import { defineConfig } from 'vite' import path from 'node:path' import electron from 'vite-plugin-electron/simple' -import react from '@vitejs/plugin-react' - -// https://vitejs.dev/config/ -export default defineConfig({ +import react from '@vitejs/plugin-react' +import tailwindcss from '@tailwindcss/vite' + +// https://vitejs.dev/config/ +export default defineConfig({ plugins: [ react(), + tailwindcss(), electron({ main: { - // Shortcut of `build.lib.entry`. entry: 'electron/main.ts', }, preload: { - // Shortcut of `build.rollupOptions.input`. - // Preload scripts may contain Web assets, so use the `build.rollupOptions.input` instead `build.lib.entry`. input: path.join(__dirname, 'electron/preload.ts'), }, - // Ployfill the Electron and Node.js API for Renderer process. - // If you want use Node.js in Renderer process, the `nodeIntegration` needs to be enabled in the Main process. - // See 👉 https://github.com/electron-vite/vite-plugin-electron-renderer renderer: process.env.NODE_ENV === 'test' - // https://github.com/electron-vite/vite-plugin-electron-renderer/issues/78#issuecomment-2053600808 ? undefined : {}, }), ], -}) +}) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2c3b4bc7..530ce78f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -126,6 +126,9 @@ importers: apps/desktop: dependencies: + '@multica/ui': + specifier: workspace:* + version: link:../../packages/ui react: specifier: 'catalog:' version: 19.2.3 @@ -133,6 +136,9 @@ importers: specifier: 'catalog:' version: 19.2.3(react@19.2.3) devDependencies: + '@tailwindcss/vite': + specifier: ^4.1.18 + version: 4.1.18(vite@5.4.21(@types/node@25.0.10)(lightningcss@1.30.2)) '@types/react': specifier: 'catalog:' version: 19.2.10 @@ -163,6 +169,9 @@ importers: eslint-plugin-react-refresh: specifier: ^0.4.5 version: 0.4.26(eslint@8.57.1) + tailwindcss: + specifier: ^4 + version: 4.1.18 typescript: specifier: 'catalog:' version: 5.9.3 @@ -2000,6 +2009,11 @@ packages: '@tailwindcss/postcss@4.1.18': resolution: {integrity: sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g==} + '@tailwindcss/vite@4.1.18': + resolution: {integrity: sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA==} + peerDependencies: + vite: ^5.2.0 || ^6 || ^7 + '@tokenizer/inflate@0.4.1': resolution: {integrity: sha512-2mAv+8pkG6GIZiF1kNg1jAjh27IDxEPKwdGul3snfztFerfPGI1LjDezZp3i7BElXompqEtPmoPx6c2wgtWsOA==} engines: {node: '>=18'} @@ -7727,6 +7741,13 @@ snapshots: postcss: 8.5.6 tailwindcss: 4.1.18 + '@tailwindcss/vite@4.1.18(vite@5.4.21(@types/node@25.0.10)(lightningcss@1.30.2))': + dependencies: + '@tailwindcss/node': 4.1.18 + '@tailwindcss/oxide': 4.1.18 + tailwindcss: 4.1.18 + vite: 5.4.21(@types/node@25.0.10)(lightningcss@1.30.2) + '@tokenizer/inflate@0.4.1': dependencies: debug: 4.4.3 @@ -9128,8 +9149,8 @@ snapshots: '@next/eslint-plugin-next': 16.1.6 eslint: 9.39.2(jiti@2.6.1) eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@2.6.1)) - eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@2.6.1)) + eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)) + eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)) eslint-plugin-jsx-a11y: 6.10.2(eslint@9.39.2(jiti@2.6.1)) eslint-plugin-react: 7.37.5(eslint@9.39.2(jiti@2.6.1)) eslint-plugin-react-hooks: 7.0.1(eslint@9.39.2(jiti@2.6.1)) @@ -9151,7 +9172,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@2.6.1)): + eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)): dependencies: '@nolyfill/is-core-module': 1.0.39 debug: 4.4.3 @@ -9162,22 +9183,22 @@ snapshots: tinyglobby: 0.2.15 unrs-resolver: 1.11.1 optionalDependencies: - eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@2.6.1)) + eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)) transitivePeerDependencies: - supports-color - eslint-module-utils@2.12.1(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@2.6.1)): + eslint-module-utils@2.12.1(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3) eslint: 9.39.2(jiti@2.6.1) eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@2.6.1)) + eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)) transitivePeerDependencies: - supports-color - eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@2.6.1)): + eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.9 @@ -9188,7 +9209,7 @@ snapshots: doctrine: 2.1.0 eslint: 9.39.2(jiti@2.6.1) eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@2.6.1)) + eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)) hasown: 2.0.2 is-core-module: 2.16.1 is-glob: 4.0.3