From 6e5a2035ac47666a25369f5d2007596dce77bb5a Mon Sep 17 00:00:00 2001
From: Deisling Eduard <41228762+edikdeisling@users.noreply.github.com>
Date: Thu, 21 Nov 2024 17:20:08 +0200
Subject: [PATCH] feat: build improve (#167)

* feat: build improve

ref #166, #167

Co-authored-by: Eduard Deisling <eduard.deisling@constructor.tech>
---
 packages/configs/tsconfig.json                |  4 +-
 .../.vitepress/components/ThemeSwitcher.vue   | 92 -------------------
 .../.vitepress/configuration/vite.ts          |  3 -
 .../demos/button-group/ButtonGroupExample.vue |  3 -
 packages/ui/package.json                      |  1 -
 packages/ui/scripts/buildPlugin.ts            | 13 +--
 .../theme-switcher/themeSwitcher.vue          |  8 +-
 .../ui/src/composables/useColorScheme.spec.ts | 13 +--
 packages/ui/src/composables/useColorScheme.ts | 34 +++----
 packages/ui/vite.config.ts                    |  5 -
 pnpm-lock.yaml                                | 21 +++--
 11 files changed, 35 insertions(+), 162 deletions(-)
 delete mode 100644 packages/documentation/.vitepress/components/ThemeSwitcher.vue

diff --git a/packages/configs/tsconfig.json b/packages/configs/tsconfig.json
index 526536dde..7d68b7975 100644
--- a/packages/configs/tsconfig.json
+++ b/packages/configs/tsconfig.json
@@ -27,9 +27,7 @@
     /* Paths */
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"],
-      "@demos/*": ["../demos/*"],
-      "react": [""]
+      "@/*": ["./src/*"]
     }
   },
   "include": ["src", "src/**/*.{ts,vue}"],
diff --git a/packages/documentation/.vitepress/components/ThemeSwitcher.vue b/packages/documentation/.vitepress/components/ThemeSwitcher.vue
deleted file mode 100644
index 703537787..000000000
--- a/packages/documentation/.vitepress/components/ThemeSwitcher.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<script lang="ts" setup>
-  import acronisStyles from '@acronis-platform/ui-component-library/styles/acronis.css?raw';
-  import constructorStyles from '@acronis-platform/ui-component-library/styles/constructor.css?raw';
-  import { CSSStyleSheet } from 'cssom';
-  import { onBeforeMount, ref } from 'vue';
-
-  type Theme = 'acronis' | 'constructor';
-
-  const theme = ref<Theme>('acronis');
-  const showList = ref(false);
-  const themes: Record<Theme, string> = {
-    acronis: acronisStyles,
-    constructor: constructorStyles,
-  };
-  const themesSheet = new CSSStyleSheet();
-
-  document.adoptedStyleSheets = [...document.adoptedStyleSheets, themesSheet];
-  onBeforeMount(() => applyColors(theme.value));
-
-  function toggleList() {
-    showList.value = !showList.value;
-  }
-
-  function applyColors(themeName) {
-    theme.value = themeName;
-    themesSheet.replaceSync(themes[themeName]);
-  }
-
-  function changeTheme(themeName) {
-    showList.value = false;
-    applyColors(themeName);
-  }
-</script>
-
-<template>
-  <div class="theme-switcher">
-    <div @click="toggleList">
-      Change theme
-    </div>
-    <ul
-      v-if="showList"
-      class="theme-list"
-    >
-      <li
-        :class="{ selected: theme === 'acronis' }"
-        @click="changeTheme('acronis')"
-      >
-        Acronis
-      </li>
-      <li
-        :class="{ selected: theme === 'constructor' }"
-        @click="changeTheme('constructor')"
-      >
-        Constructor
-      </li>
-    </ul>
-  </div>
-</template>
-
-<style scoped>
-.theme-switcher {
-  position: relative;
-  line-height: 24px;
-  padding: 0 14px;
-  border-left: 1px solid var(--vp-c-divider);
-  margin: 6px 14px;
-  cursor: pointer;
-}
-
-.theme-list {
-  position: absolute;
-  padding: 8px;
-  top: 100%;
-  background-color: var(--acv-color-white);
-  border: 1px solid var(--acv-color-gray-lighter);
-
-  li {
-    padding: 8px;
-    cursor: pointer;
-    min-width: 160px;
-    text-overflow: ellipsis;
-  }
-
-  li:hover {
-    background-color: rgb(127 127 127 / 0.38);
-  }
-
-  li.selected {
-    background-color: var(--acv-color-primary-lighter);
-  }
-}
-</style>
diff --git a/packages/documentation/.vitepress/configuration/vite.ts b/packages/documentation/.vitepress/configuration/vite.ts
index 818ea35cd..7543a2ebf 100644
--- 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
index 33376388b..72ee5bed0 100644
--- 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
index 5cfc1c0a6..1d00f0634 100644
--- 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
index b7c81a76e..2a9211762 100644
--- 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
index 16e419943..0b06e9272 100644
--- 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.spec.ts b/packages/ui/src/composables/useColorScheme.spec.ts
index 9e49e57fb..fc8766fc5 100644
--- a/packages/ui/src/composables/useColorScheme.spec.ts
+++ b/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', () => {
diff --git a/packages/ui/src/composables/useColorScheme.ts b/packages/ui/src/composables/useColorScheme.ts
index 6ba181580..30801333e 100644
--- 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';
+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 {
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
index dffb1d156..0478a559b 100644
--- 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(),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2f7b7e683..1498c7fa9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -413,9 +413,6 @@ importers:
       browserslist:
         specifier: 4.23.0
         version: 4.23.0
-      csstype:
-        specifier: 3.1.3
-        version: 3.1.3
       cypress:
         specifier: 13.12.0
         version: 13.12.0
@@ -11403,6 +11400,14 @@ snapshots:
       chai: 5.1.1
       tinyrainbow: 1.2.0
 
+  '@vitest/mocker@2.1.2(@vitest/spy@2.1.2)(vite@5.4.6(@types/node@20.11.30)(sass@1.77.4)(stylus@0.57.0)(sugarss@4.0.1(postcss@8.4.38)))':
+    dependencies:
+      '@vitest/spy': 2.1.2
+      estree-walker: 3.0.3
+      magic-string: 0.30.11
+    optionalDependencies:
+      vite: 5.4.6(@types/node@20.11.30)(sass@1.77.4)(stylus@0.57.0)(sugarss@4.0.1(postcss@8.4.38))
+
   '@vitest/mocker@2.1.2(@vitest/spy@2.1.2)(vite@5.4.6(@types/node@20.11.30)(sass@1.77.4)(stylus@0.57.0)(sugarss@4.0.1(postcss@8.4.49)))':
     dependencies:
       '@vitest/spy': 2.1.2
@@ -15472,8 +15477,8 @@ snapshots:
     dependencies:
       htmlparser2: 8.0.2
       js-tokens: 8.0.3
-      postcss: 8.4.49
-      postcss-safe-parser: 6.0.0(postcss@8.4.49)
+      postcss: 8.4.38
+      postcss-safe-parser: 6.0.0(postcss@8.4.38)
 
   postcss-image-set-function@6.0.3(postcss@8.4.38):
     dependencies:
@@ -15640,10 +15645,6 @@ snapshots:
     dependencies:
       postcss: 8.4.38
 
-  postcss-safe-parser@6.0.0(postcss@8.4.49):
-    dependencies:
-      postcss: 8.4.49
-
   postcss-safe-parser@7.0.0(postcss@8.4.38):
     dependencies:
       postcss: 8.4.38
@@ -17185,7 +17186,7 @@ snapshots:
   vitest@2.1.2(@types/node@20.11.30)(@vitest/ui@2.1.2)(jsdom@24.0.0)(sass@1.77.4)(stylus@0.57.0)(sugarss@4.0.1(postcss@8.4.38)):
     dependencies:
       '@vitest/expect': 2.1.2
-      '@vitest/mocker': 2.1.2(@vitest/spy@2.1.2)(vite@5.4.6(@types/node@20.11.30)(sass@1.77.4)(stylus@0.57.0)(sugarss@4.0.1(postcss@8.4.49)))
+      '@vitest/mocker': 2.1.2(@vitest/spy@2.1.2)(vite@5.4.6(@types/node@20.11.30)(sass@1.77.4)(stylus@0.57.0)(sugarss@4.0.1(postcss@8.4.38)))
       '@vitest/pretty-format': 2.1.2
       '@vitest/runner': 2.1.2
       '@vitest/snapshot': 2.1.2