feat: build improve

ref acronis#166
edikdeisling · Nov 19, 2024 · f123ad7 · f123ad7
1 parent 94321d6
commit f123ad7
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 140 deletions.
diff --git a/packages/configs/tsconfig.json b/packages/configs/tsconfig.json
@@ -28,7 +28,6 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"],
-      "@demos/*": ["../demos/*"],
       "react": [""]
     }
   },

diff --git a/packages/documentation/.vitepress/components/ThemeSwitcher.vue b/packages/documentation/.vitepress/components/ThemeSwitcher.vue
diff --git a/packages/documentation/.vitepress/configuration/vite.ts b/packages/documentation/.vitepress/configuration/vite.ts
@@ -5,9 +5,6 @@ export const vite = {
   resolve: {
     alias: {
       '@': path.resolve(__dirname, '../../../ui/src'),
-      'components': path.join(__dirname, '../../components'),
-      '@demos': path.join(__dirname, '../../../examples/demos'),
-      '@examples': path.join(__dirname, '../../../examples'),
     }
   },
   css: {

diff --git a/packages/examples/demos/button-group/ButtonGroupExample.vue b/packages/examples/demos/button-group/ButtonGroupExample.vue
@@ -1,10 +1,7 @@
 <script setup>
   import { AcvButtonGroup } from '@acronis-platform/ui-component-library';
-  // or
-  import ButtonGroup from '@acronis-platform/ui-component-library/components/buttonGroup';
 </script>
 
 <template>
   <AcvButtonGroup />
-  <ButtonGroup />
 </template>
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -99,7 +99,6 @@
     "@vitest/utils": "2.1.2",
     "@vue/test-utils": "2.4.6",
     "browserslist": "4.23.0",
-    "csstype": "3.1.3",
     "cypress": "13.12.0",
     "eslint": "9.12.0",
     "eslint-plugin-cypress": "3.5.0",

diff --git a/packages/ui/scripts/buildPlugin.ts b/packages/ui/scripts/buildPlugin.ts
@@ -29,13 +29,10 @@ export function buildPlugin(): Plugin[] {
         sourceMap: false,
         paths: {
           '@/*': ['./src/*'],
-          '@demos/*': ['../../demos/*'],
-          'csstype': ['node_modules/csstype']
         }
       },
       copyDtsFiles: true,
-      pathsToAliases: false,
-      aliasesExclude: [/^@ui-kit\/(services|hooks|config)/]
+      pathsToAliases: false
     }),
   ];
 
@@ -50,10 +47,7 @@ export function buildPlugin(): Plugin[] {
             sourcemap: true,
             lib: {
               entry: {
-                'index': 'src/index.ts',
-                // TODO add more entries
-                'button': 'src/components/button/public.ts',
-                'components/buttonGroup': 'src/components/button-group/public.ts',
+                index: 'src/index.ts',
               },
               formats: ['es'],
               name: 'Acronis Ui Component Library',
@@ -74,8 +68,7 @@ export function buildPlugin(): Plugin[] {
                 },
                 chunkFileNames: '[name].[hash].js',
                 assetFileNames: 'assets/[name][extname]'
-              },
-              external: ['vue']
+              }
             },
             chunkSizeWarningLimit: 10000
           }

diff --git a/packages/ui/src/components/theme-switcher/themeSwitcher.vue b/packages/ui/src/components/theme-switcher/themeSwitcher.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
   import AcvButton from '@/components/button/button.vue';
   import AcvDropdown from '@/components/dropdown/dropdown.vue';
-  import { AVAILABLE_COLOR_SCHEMES, useColorScheme } from '@/composables/useColorScheme.ts';
+  import { useColorScheme } from '@/composables/useColorScheme.ts';
 
   const { setColorScheme, colorScheme: currentColorScheme } = useColorScheme();
 </script>
@@ -18,9 +18,9 @@
     <template #dropdown>
       <ul>
         <li
-          v-for="(colorScheme, key) in AVAILABLE_COLOR_SCHEMES"
-          :key="key"
-          :data-test="`color-scheme-item-${key}`"
+          v-for="(colorScheme) in ['light', 'dark'] as const"
+          :key="colorScheme"
+          :data-test="`color-scheme-item-${colorScheme}`"
           class="color"
           :class="{
             selected: colorScheme === currentColorScheme }"

diff --git a/packages/ui/src/composables/useColorScheme.ts b/packages/ui/src/composables/useColorScheme.ts
@@ -1,31 +1,23 @@
 import { useColorMode } from '@vueuse/core';
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 
-export const AVAILABLE_COLOR_SCHEMES = {
-  light: 'light',
-  dark: 'dark',
-  acronis: 'acronis',
-  constructor: 'constructor',
-  virtuozzo: 'virtuozzo',
-};
-const ACV_THEME_LC_KEY = 'acv-theme';
+export type ColorScheme = 'light' | 'dark';
+const ACV_THEME_LC_KEY = 'acv-color-scheme';
 
 export function useColorScheme() {
-  const colorScheme = ref(localStorage.getItem(ACV_THEME_LC_KEY) || 'light');
-
-  const isDark = computed(() => colorScheme.value === 'dark');
-
-  const mode: any = useColorMode({
-    attribute: 'data-theme',
+  const mode = useColorMode({
+    attribute: 'class',
     storageKey: ACV_THEME_LC_KEY,
-    modes: AVAILABLE_COLOR_SCHEMES,
+    modes: {
+      light: 'acv-color-scheme-light',
+      dark: 'acv-color-scheme-dark',
+    },
   });
+  const colorScheme = computed(() => mode.value);
+  const isDark = computed(() => colorScheme.value === 'dark');
 
-  function setColorScheme(colorSchemeId: string) {
-    if (AVAILABLE_COLOR_SCHEMES[colorSchemeId]) {
-      mode.value = colorSchemeId;
-      colorScheme.value = colorSchemeId;
-    }
+  function setColorScheme(colorSchemeId: ColorScheme) {
+    mode.value = colorSchemeId;
   }
 
   return {

diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
@@ -11,13 +11,8 @@ export default defineConfig(() => {
     resolve: {
       alias: {
         '@': resolve(__dirname, 'src'),
-        '@documentation': resolve(__dirname, '../../documentation'),
       },
     },
-    optimizeDeps: {
-      exclude: ['vitest/utils'],
-      include: ['@vitest/utils'],
-    },
     plugins: [
       vue(),
       env.UI_BUILD && buildPlugin(),