feat: build improve

packages/configs/tsconfig.json

@@ -27,9 +27,7 @@
     /* Paths */
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"],
-      "@demos/*": ["../demos/*"],
-      "react": [""]
+      "@/*": ["./src/*"]
     }
   },
   "include": ["src", "src/**/*.{ts,vue}"],

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: {

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>

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",

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
           }

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 }"

packages/ui/src/composables/useColorScheme.spec.ts

@@ -1,4 +1,4 @@
-import { useColorScheme } from '@/composables/useColorScheme';
+import { ACV_THEME_LC_KEY, useColorScheme } from '@/composables/useColorScheme';
 import { describe, expect, it } from 'vitest';
 import { nextTick } from 'vue';
 
@@ -9,7 +9,7 @@ describe('useColorScheme', () => {
   });
 
   it('returns dark mode status correctly', () => {
-    localStorage.setItem('acv-theme', 'dark');
+    localStorage.setItem(ACV_THEME_LC_KEY, 'dark');
     const { isDark } = useColorScheme();
     expect(isDark.value).toEqual(true);
   });
@@ -19,14 +19,7 @@ describe('useColorScheme', () => {
     setColorScheme('light');
     expect(colorScheme.value).toEqual('light');
     await nextTick();
-    expect(localStorage.getItem('acv-theme')).toEqual('light');
-  });
-
-  it('does not set invalid color scheme', () => {
-    const { setColorScheme, colorScheme } = useColorScheme();
-    setColorScheme('invalid');
-    expect(colorScheme.value).not.toEqual('invalid');
-    expect(localStorage.getItem('acv-theme')).not.toEqual('invalid');
+    expect(localStorage.getItem(ACV_THEME_LC_KEY)).toEqual('light');
   });
 
   it('does not change color scheme if the same is set', () => {

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';
+export 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 {

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(),