From d996b8f6aa279f05b41d9762fcc415aaed60f698 Mon Sep 17 00:00:00 2001 From: mohamad Date: Sat, 28 Jun 2025 13:09:01 +0200 Subject: [PATCH] feat: Update package dependencies and enhance Vite configuration This commit introduces several updates to the project dependencies and configuration: - Added `reka-ui` version 2.3.1 to the project for enhanced UI components. - Updated Vite configuration to load environment variables dynamically, improving flexibility for different environments. - Refactored API base URL handling to utilize `import.meta.env` for better compatibility with Vite's environment management. - Enhanced API service to conditionally set the base URL based on the development environment. These changes aim to improve the application's UI capabilities and streamline configuration management. --- fe/package-lock.json | 197 ++++++++++++++++++++++++++++++++++++ fe/package.json | 1 + fe/src/config/api-config.ts | 2 +- fe/src/services/api.ts | 2 +- fe/vite.config.ts | 61 ++++++----- 5 files changed, 235 insertions(+), 28 deletions(-) diff --git a/fe/package-lock.json b/fe/package-lock.json index b296c5a..4c5bbac 100644 --- a/fe/package-lock.json +++ b/fe/package-lock.json @@ -19,6 +19,7 @@ "motion": "^12.15.0", "pinia": "^3.0.2", "qs": "^6.14.0", + "reka-ui": "^2.3.1", "vue": "^3.5.13", "vue-i18n": "^9.9.1", "vue-router": "^4.5.1", @@ -2495,6 +2496,68 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.2.tgz", + "integrity": "sha512-wNB5ooIKHQc+Kui96jE/n69rHFWAVoxn5CAzL1Xdd8FG03cgY3MLO+GF9U3W737fYDSgPWA6MReKhBQBop6Pcw==", + "license": "MIT", + "dependencies": { + "@floating-ui/utils": "^0.2.10" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.2.tgz", + "integrity": "sha512-7cfaOQuCS27HD7DX+6ib2OrnW+b4ZBwDNnCcT0uTyidcmyWb03FnQqJybDBoCnpdxwBSfA94UAYlRCt7mV+TbA==", + "license": "MIT", + "dependencies": { + "@floating-ui/core": "^1.7.2", + "@floating-ui/utils": "^0.2.10" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.10", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz", + "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==", + "license": "MIT" + }, + "node_modules/@floating-ui/vue": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.7.tgz", + "integrity": "sha512-idmAtbAIigGXN2SI5gItiXYBYtNfDTP9yIiObxgu13dgtG7ARCHlNfnR29GxP4LI4o13oiwsJ8wVgghj1lNqcw==", + "license": "MIT", + "dependencies": { + "@floating-ui/dom": "^1.7.2", + "@floating-ui/utils": "^0.2.10", + "vue-demi": ">=0.13.0" + } + }, + "node_modules/@floating-ui/vue/node_modules/vue-demi": { + "version": "0.14.10", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz", + "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==", + "hasInstallScript": true, + "license": "MIT", + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", @@ -2561,6 +2624,24 @@ "url": "https://github.com/sponsors/nzakas" } }, + "node_modules/@internationalized/date": { + "version": "3.8.2", + "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.8.2.tgz", + "integrity": "sha512-/wENk7CbvLbkUvX1tu0mwq49CVkkWpkXubGel6birjRPyo6uQ4nQpnq5xZu823zRCwwn82zgHrvgF1vZyvmVgA==", + "license": "Apache-2.0", + "dependencies": { + "@swc/helpers": "^0.5.0" + } + }, + "node_modules/@internationalized/number": { + "version": "3.6.3", + "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.6.3.tgz", + "integrity": "sha512-p+Zh1sb6EfrfVaS86jlHGQ9HA66fJhV9x5LiE5vCbZtXEHAuhcmUZUdZ4WrFpUBfNalr2OkAJI5AcKEQF+Lebw==", + "license": "Apache-2.0", + "dependencies": { + "@swc/helpers": "^0.5.0" + } + }, "node_modules/@intlify/bundle-utils": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-8.0.0.tgz", @@ -4146,6 +4227,41 @@ "sourcemap-codec": "^1.4.8" } }, + "node_modules/@swc/helpers": { + "version": "0.5.17", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz", + "integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==", + "license": "Apache-2.0", + "dependencies": { + "tslib": "^2.8.0" + } + }, + "node_modules/@tanstack/virtual-core": { + "version": "3.13.12", + "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz", + "integrity": "sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/vue-virtual": { + "version": "3.13.12", + "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.13.12.tgz", + "integrity": "sha512-vhF7kEU9EXWXh+HdAwKJ2m3xaOnTTmgcdXcF2pim8g4GvI7eRrk2YRuV5nUlZnd/NbCIX4/Ja2OZu5EjJL06Ww==", + "license": "MIT", + "dependencies": { + "@tanstack/virtual-core": "3.13.12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "vue": "^2.7.0 || ^3.0.0" + } + }, "node_modules/@testing-library/dom": { "version": "10.4.0", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", @@ -5234,6 +5350,18 @@ "dev": true, "license": "Python-2.0" }, + "node_modules/aria-hidden": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz", + "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==", + "license": "MIT", + "dependencies": { + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/aria-query": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", @@ -6268,6 +6396,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/defu": { + "version": "6.1.4", + "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz", + "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==", + "license": "MIT" + }, "node_modules/delayed-stream": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", @@ -9587,6 +9721,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/ohash": { + "version": "2.0.11", + "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz", + "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==", + "license": "MIT" + }, "node_modules/on-finished": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", @@ -10601,6 +10741,63 @@ "node": ">=6" } }, + "node_modules/reka-ui": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.3.1.tgz", + "integrity": "sha512-2SjGeybd7jvD8EQUkzjgg7GdOQdf4cTwdVMq/lDNTMqneUFNnryGO43dg8WaM/jaG9QpSCZBvstfBFWlDdb2Zg==", + "license": "MIT", + "dependencies": { + "@floating-ui/dom": "^1.6.13", + "@floating-ui/vue": "^1.1.6", + "@internationalized/date": "^3.5.0", + "@internationalized/number": "^3.5.0", + "@tanstack/vue-virtual": "^3.12.0", + "@vueuse/core": "^12.5.0", + "@vueuse/shared": "^12.5.0", + "aria-hidden": "^1.2.4", + "defu": "^6.1.4", + "ohash": "^2.0.11" + }, + "peerDependencies": { + "vue": ">= 3.2.0" + } + }, + "node_modules/reka-ui/node_modules/@vueuse/core": { + "version": "12.8.2", + "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-12.8.2.tgz", + "integrity": "sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==", + "license": "MIT", + "dependencies": { + "@types/web-bluetooth": "^0.0.21", + "@vueuse/metadata": "12.8.2", + "@vueuse/shared": "12.8.2", + "vue": "^3.5.13" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/reka-ui/node_modules/@vueuse/metadata": { + "version": "12.8.2", + "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-12.8.2.tgz", + "integrity": "sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/reka-ui/node_modules/@vueuse/shared": { + "version": "12.8.2", + "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-12.8.2.tgz", + "integrity": "sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==", + "license": "MIT", + "dependencies": { + "vue": "^3.5.13" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, "node_modules/require-from-string": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", diff --git a/fe/package.json b/fe/package.json index fedc729..2e57d57 100644 --- a/fe/package.json +++ b/fe/package.json @@ -30,6 +30,7 @@ "motion": "^12.15.0", "pinia": "^3.0.2", "qs": "^6.14.0", + "reka-ui": "^2.3.1", "vue": "^3.5.13", "vue-i18n": "^9.9.1", "vue-router": "^4.5.1", diff --git a/fe/src/config/api-config.ts b/fe/src/config/api-config.ts index 83506b8..4a08932 100644 --- a/fe/src/config/api-config.ts +++ b/fe/src/config/api-config.ts @@ -2,7 +2,7 @@ export const API_VERSION = 'v1' // API Base URL -export const API_BASE_URL = (window as any).ENV?.VITE_API_URL +export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL // API Endpoints export const API_ENDPOINTS = { diff --git a/fe/src/services/api.ts b/fe/src/services/api.ts index 1986709..77b300d 100644 --- a/fe/src/services/api.ts +++ b/fe/src/services/api.ts @@ -7,7 +7,7 @@ import { stringify } from 'qs' // Create axios instance const api = axios.create({ - baseURL: `${API_BASE_URL}/api/${API_VERSION}`, + baseURL: import.meta.env.DEV ? `/api/${API_VERSION}` : `${API_BASE_URL}/api/${API_VERSION}`, headers: { 'Content-Type': 'application/json', }, diff --git a/fe/vite.config.ts b/fe/vite.config.ts index a0f3080..4da3a2f 100644 --- a/fe/vite.config.ts +++ b/fe/vite.config.ts @@ -1,4 +1,4 @@ -import { defineConfig } from 'vite'; +import { defineConfig, loadEnv } from 'vite'; import vue from '@vitejs/plugin-vue'; import { VitePWA, VitePWAOptions } from 'vite-plugin-pwa'; import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'; @@ -52,29 +52,38 @@ const pwaOptions: Partial = { }, }; -export default defineConfig({ - plugins: [ - vue(), - VitePWA(pwaOptions), - VueI18nPlugin({ - include: [path.resolve(path.dirname(fileURLToPath(import.meta.url)), './src/i18n/**.json')], - strictMessage: false, - runtimeOnly: false, - compositionOnly: false, - }), - ], - resolve: { - alias: { - '@': fileURLToPath(new URL('./src', import.meta.url)), +export default ({ mode }: { mode: string }) => { + const env = loadEnv(mode, process.cwd(), ''); + return defineConfig({ + plugins: [ + vue(), + VitePWA(pwaOptions), + VueI18nPlugin({ + include: [path.resolve(path.dirname(fileURLToPath(import.meta.url)), './src/i18n/**.json')], + strictMessage: false, + runtimeOnly: false, + compositionOnly: false, + }), + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)), + }, }, - }, - define: { - __PWA_FALLBACK_HTML__: JSON.stringify('/index.html'), - __PWA_SERVICE_WORKER_REGEX__: JSON.stringify('^(sw|workbox)-.*\\.js$'), - 'process.env.MODE': JSON.stringify(process.env.NODE_ENV), - 'process.env.PROD': JSON.stringify(process.env.NODE_ENV === 'production'), - }, - server: { - open: true, - }, -}); \ No newline at end of file + define: { + __PWA_FALLBACK_HTML__: JSON.stringify('/index.html'), + __PWA_SERVICE_WORKER_REGEX__: JSON.stringify('^(sw|workbox)-.*\\.js$'), + 'process.env.MODE': JSON.stringify(process.env.NODE_ENV), + 'process.env.PROD': JSON.stringify(process.env.NODE_ENV === 'production'), + }, + server: { + open: true, + proxy: { + '/api': { + target: env.VITE_API_BASE_URL, + changeOrigin: true, + }, + }, + }, + }); +}; \ No newline at end of file