feat!: migration to unocss instead scss

migration: unocss instead of sass
migration: ui kit to shadcn ui

resolved #64 + #67

.github/workflows/todos-to-issue.yml

@@ -3,9 +3,7 @@ name: Create issues from TODOs
 on:
   push:
     branches:
-      - 'dev'
-      - 'client'
-      - 'server'
+      - dev
 
 jobs:
   todo:

core/client/.storybook/main.ts

@@ -14,6 +14,10 @@ const config: StorybookConfig = {
       docgen: 'vue-component-meta',
     },
   },
+  viteFinal: async config => ({
+    ...config,
+    ...(await import('unocss/vite')).default,
+  }),
   staticDirs: ['./-static'],
 }
 export default config

core/client/.storybook/preview.ts

@@ -4,7 +4,8 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 import { themes } from '@storybook/theming'
 import { useColorMode } from '@vueuse/core'
 
-import '@/app/styles/primary/index.scss'
+import 'virtual:uno.css'
+import '@/app/styles/primary/index.css'
 
 const preview: Preview = {
   decorators: [

core/client/components.json

@@ -0,0 +1,16 @@
+{
+  "style": "new-york",
+  "typescript": true,
+  "tsConfigPath": "./tsconfig.json",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "@/app/styles/primary/index.scss",
+    "baseColor": "neutral",
+    "cssVariables": false
+  },
+  "framework": "vite",
+  "aliases": {
+    "components": "@/shared/ui",
+    "utils": "@/shared/lib/shadcn/utils"
+  }
+}

core/client/package.json

@@ -20,18 +20,23 @@
     "@formkit/auto-animate": "^0.8.2",
     "@noction/hippie-nav": "^0.7.7",
     "@unhead/vue": "^1.9.14",
+    "@unocss/core": "0.65.1",
+    "@unocss/reset": "0.65.1",
     "@vee-validate/zod": "^4.13.1",
     "@vitest/eslint-plugin": "^1.1.7",
-    "@vueuse/core": "^10.11.0",
+    "@vueuse/core": "^10.11.1",
     "@vueuse/integrations": "^10.10.0",
     "axios": "^1.7.2",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
     "floating-vue": "^5.2.2",
-    "lucide-vue-next": "^0.396.0",
     "pinia": "^2.1.7",
+    "radix-vue": "1.9.11",
     "splitpanes": "^3.1.5",
+    "tailwind-merge": "2.5.5",
     "universal-cookie": "^6.1.3",
+    "unocss": "0.65.1",
     "vee-validate": "^4.13.1",
-    "vite-svg-loader": "^5.1.0",
     "vue": "^3.5.8",
     "vue-data-ui": "^2.3.44",
     "vue-i18n": "9",
@@ -43,6 +48,9 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@iconify-json/hugeicons": "1.2.1",
+    "@iconify-json/lucide": "1.2.17",
+    "@iconify/vue": "4.1.2",
     "@mnenie/prettier": "^1.0.4",
     "@rushstack/eslint-patch": "^1.8.0",
     "@storybook/addon-essentials": "^8.1.10",
@@ -74,11 +82,12 @@
     "lint-staged": "^15.2.7",
     "npm-run-all2": "^6.2.0",
     "prettier": "^3.2.5",
-    "sass": "^1.77.6",
     "storybook": "^8.1.10",
     "stylelint": "^16.6.1",
     "stylelint-config-standard-scss": "^13.1.0",
     "typescript": "~5.4.0",
+    "unocss-preset-animations": "1.1.0",
+    "unocss-preset-shadcn": "0.3.1",
     "vite": "^5.3.1",
     "vite-plugin-vue-devtools": "^7.3.1",
     "vitest": "^1.6.0",

core/client/src/app/App.vue

@@ -21,5 +21,5 @@ const toasterTheme = computed<ToasterTheme>(() => {
       </KeepAlive>
     </RouterView>
   </AppLayout>
-  <Toaster :theme="toasterTheme" position="bottom-right" />
+  <Toaster :theme="toasterTheme" :expand="true" position="bottom-right" />
 </template>

core/client/src/app/index.ts

@@ -3,15 +3,18 @@ import { createHead } from '@unhead/vue'
 import { vTooltip } from 'floating-vue'
 import { createApp } from 'vue'
 import Vue3Marquee from 'vue3-marquee'
-
 import { VueUiRadar } from 'vue-data-ui'
+
 // @ts-expect-error: unresolved type definitions for vue-writer
 import VueWriter from 'vue-writer'
 import App from './App.vue'
-
 import autoAnimatePlugin from './plugins/formkit'
+
 import { pinia, router } from './providers'
-import './styles/primary/index.scss'
+
+import './styles/primary/index.css'
+import 'virtual:uno.css'
+import '@unocss/reset/tailwind.css'
 import 'floating-vue/dist/style.css'
 import 'vue-data-ui/style.css'
 

core/client/src/app/providers/router/index.ts

@@ -50,19 +50,6 @@ const routes = [
     name: RouteNames.members,
     path: '/members',
     component: () => import('@/pages/MembersPage.vue'),
-    redirect: { name: `${RouteNames.members}.all` },
-    children: [
-      {
-        name: `${RouteNames.members}.all`,
-        path: '',
-        component: () => import('@/pages/MainTeamPage.vue'),
-      },
-      {
-        name: `${RouteNames.members}.guests`,
-        path: 'guests',
-        component: () => import('@/pages/GuestsPage.vue'),
-      },
-    ],
     meta: {
       requiresAuth: true,
     },

core/client/src/app/styles/primary/_base.scss → core/client/src/app/styles/primary/_base.css

@@ -12,8 +12,8 @@ html {
   text-size-adjust: 100%;
 }
 
-html.dark {
-  background-color: var(--zinc-700);
+.dark {
+  background-color: var(--custom-jenda-dark);
   color-scheme: dark;
 }
 
@@ -26,7 +26,7 @@ body {
   overscroll-behavior: none;
 }
 
-.container {
+.ui-container {
   width: 100%;
   max-width: 1600px;
   margin-right: auto;
@@ -51,4 +51,4 @@ body {
 .dropdown-leave-to {
   opacity: 0;
   transform: translateY(-10px);
-}
+}

core/client/src/app/styles/primary/_exceptions.scss → core/client/src/app/styles/primary/_exceptions.css

@@ -1,21 +1,3 @@
-button {
-  cursor: pointer;
-  border: none;
-}
-
-button:disabled, input:disabled {
-  cursor: not-allowed;
-}
-
-ul {
-  list-style: none;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
 .v-popper__inner {
   font-size: 12px;
   padding: 4px 10px !important;
@@ -39,19 +21,19 @@ canvas {
 }
 
 [data-sonner-toaster][data-theme='dark'] {
-  --normal-bg: var(--zinc-700) !important;
+  --normal-bg: var(--custom-jenda-dark) !important;
   --normal-border: hsl(0deg 0% 20%);
   --normal-text: var(--gray1);
   --success-border: hsl(147deg 100% 12%);
-  --info-bg: var(--zinc-700);
+  --info-bg: var(--custom-jenda-dark);
 }
 
 .vue-ui-kpi {
   background: transparent !important;
 }
 
 .vue-ui-kpi-value {
-  color: var(--blue-secondary) !important;
+  @apply text-blue-500
 }
 
 .vue-data-ui-fulscreen--off {
@@ -62,8 +44,7 @@ canvas {
 
 html.dark {
   .v-popper__inner {
-    background-color: var(--zinc-600) !important;
-    color: var(--zinc-200) !important;
+    @apply bg-neutral-100 text-neutral-800
   }
 
   .vue-data-ui-fulscreen--off {