refactor: ♻️ Initiate shadcn/ui refactor

2025-12-06 08:28:20 +01:00 · 2024-11-29 22:39:42 +01:00 · 2024-11-29 22:39:42 +01:00 · a7b570905a
parent 73bfbcf252
commit a7b570905a
9 changed files with 188 additions and 4 deletions
--- a/app.vue
+++ b/app.vue
@ -18,9 +18,9 @@
 import "~/styles/theme.css";
 import { convert } from "html-to-text";
 import "iconify-icon";
+import ConfirmationModal from "./components/modals/confirmation.vue";
 import NotificationsRenderer from "./components/notifications/notifications-renderer.vue";
 import { SettingIds } from "./settings";
-import ConfirmationModal from "./components/modals/confirmation.vue";
 // Use SSR-safe IDs for Headless UI
 provideHeadlessUseId(() => useId());

--- a/bun.lockb
+++ b/bun.lockb
--- a/components.json
+++ b/components.json
@ -0,0 +1,18 @@
+{
+    "$schema": "https://shadcn-vue.com/schema.json",
+    "style": "default",
+    "typescript": true,
+    "tsConfigPath": ".nuxt/tsconfig.json",
+    "tailwind": {
+        "config": "tailwind.config.ts",
+        "css": "styles/index.css",
+        "baseColor": "zinc",
+        "cssVariables": true,
+        "prefix": ""
+    },
+    "framework": "nuxt",
+    "aliases": {
+        "components": "@/components",
+        "utils": "@/lib/utils"
+    }
+}
--- a/components/modals/confirmation.vue
+++ b/components/modals/confirmation.vue
@ -48,12 +48,12 @@

 <script setup lang="ts">
 import { Dialog } from "@ark-ui/vue";
+import Button from "~/packages/ui/components/buttons/button.vue";
 import {
    confirmModalService,
    confirmModalWithInputService,
 } from "./service.ts";
 import type { ConfirmModalOptions, ConfirmModalResult } from "./types.ts";
-import Button from "~/packages/ui/components/buttons/button.vue";

 const isOpen = ref(false);
 const modalOptions = ref<ConfirmModalOptions>({ message: "" });
--- a/lib/utils.ts
+++ b/lib/utils.ts
@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@ -8,6 +8,8 @@ export default defineNuxtConfig({
        "@vee-validate/nuxt",
        "nuxt-security",
        "@vite-pwa/nuxt",
+        "shadcn-nuxt",
+        "@nuxtjs/color-mode",
    ],
    vue: {
        compilerOptions: {
@ -20,6 +22,9 @@ export default defineNuxtConfig({
    future: {
        compatibilityVersion: 4,
    },
+    shadcn: {
+        componentDir: "./components/ui",
+    },
    compatibilityDate: "2024-11-05",
    pwa: {
        manifest: {
--- a/package.json
+++ b/package.json
@ -31,6 +31,7 @@
    "dependencies": {
        "@ark-ui/vue": "^4.4.2",
        "@nuxt/fonts": "^0.10.2",
+        "@nuxtjs/color-mode": "3.5.2",
        "@tailwindcss/typography": "^0.5.15",
        "@vee-validate/nuxt": "^4.14.7",
        "@vee-validate/zod": "^4.14.7",
@ -39,9 +40,12 @@
        "@vueuse/core": "^12.0.0",
        "@vueuse/nuxt": "^12.0.0",
        "c12": "^2.0.1",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
        "fastest-levenshtein": "^1.0.16",
        "html-to-text": "^9.0.5",
        "iconify-icon": "^2.1.0",
+        "lucide-vue-next": "^0.462.0",
        "magic-regexp": "^0.8.0",
        "mitt": "^3.0.1",
        "nanoid": "^5.0.9",
@ -51,7 +55,11 @@
        "nuxt-shiki": "^0.3.0",
        "overlayscrollbars": "^2.10.1",
        "overlayscrollbars-vue": "^0.5.9",
+        "radix-vue": "^1.9.10",
+        "shadcn-nuxt": "0.11.3",
        "shiki": "^1.24.0",
+        "tailwind-merge": "^2.5.5",
+        "tailwindcss-animate": "^1.0.7",
        "vue": "^3.5.13",
        "vue-router": "^4.5.0",
        "zod": "^3.23.8"
--- a/styles/index.css
+++ b/styles/index.css
@ -0,0 +1,78 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 240 10% 3.9%;
+
+        --muted: 240 4.8% 95.9%;
+        --muted-foreground: 240 3.8% 46.1%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 240 10% 3.9%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 240 10% 3.9%;
+
+        --border: 240 5.9% 90%;
+        --input: 240 5.9% 90%;
+
+        --primary: 240 5.9% 10%;
+        --primary-foreground: 0 0% 98%;
+
+        --secondary: 240 4.8% 95.9%;
+        --secondary-foreground: 240 5.9% 10%;
+
+        --accent: 240 4.8% 95.9%;
+        --accent-foreground: 240 5.9% 10%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+
+        --ring: 240 10% 3.9%;
+
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 240 10% 3.9%;
+        --foreground: 0 0% 98%;
+
+        --muted: 240 3.7% 15.9%;
+        --muted-foreground: 240 5% 64.9%;
+
+        --popover: 240 10% 3.9%;
+        --popover-foreground: 0 0% 98%;
+
+        --card: 240 10% 3.9%;
+        --card-foreground: 0 0% 98%;
+
+        --border: 240 3.7% 15.9%;
+        --input: 240 3.7% 15.9%;
+
+        --primary: 0 0% 98%;
+        --primary-foreground: 240 5.9% 10%;
+
+        --secondary: 240 3.7% 15.9%;
+        --secondary-foreground: 0 0% 98%;
+
+        --accent: 240 3.7% 15.9%;
+        --accent-foreground: 0 0% 98%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+
+        --ring: 240 4.9% 83.9%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
+}
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -1,6 +1,7 @@
 import forms from "@tailwindcss/forms";
 import typography from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
+import animate from "tailwindcss-animate";

 const themeVariables = (color: string) => ({
    50: `var(--theme-${color}-50)`,
@ -17,14 +18,66 @@ const themeVariables = (color: string) => ({
 });

 export default (<Config>{
+    darkMode: "class",
+    safelist: ["dark"],
    theme: {
+        container: {
+            center: true,
+            padding: "2rem",
+            screens: {
+                "2xl": "1400px",
+            },
+        },
        extend: {
            colors: {
                dark: themeVariables("dark"),
-                primary: themeVariables("primary"),
+                /* primary: themeVariables("primary"), */
+                border: "hsl(var(--border))",
+                input: "hsl(var(--input))",
+                ring: "hsl(var(--ring))",
+                background: "hsl(var(--background))",
+                foreground: "hsl(var(--foreground))",
+                primary: {
+                    DEFAULT: "hsl(var(--primary))",
+                    foreground: "hsl(var(--primary-foreground))",
+                },
+                secondary: {
+                    DEFAULT: "hsl(var(--secondary))",
+                    foreground: "hsl(var(--secondary-foreground))",
+                },
+                destructive: {
+                    DEFAULT: "hsl(var(--destructive))",
+                    foreground: "hsl(var(--destructive-foreground))",
+                },
+                muted: {
+                    DEFAULT: "hsl(var(--muted))",
+                    foreground: "hsl(var(--muted-foreground))",
+                },
+                accent: {
+                    DEFAULT: "hsl(var(--accent))",
+                    foreground: "hsl(var(--accent-foreground))",
+                },
+                popover: {
+                    DEFAULT: "hsl(var(--popover))",
+                    foreground: "hsl(var(--popover-foreground))",
+                },
+                card: {
+                    DEFAULT: "hsl(var(--card))",
+                    foreground: "hsl(var(--card-foreground))",
+                },
+            },
+            borderRadius: {
+                xl: "calc(var(--radius) + 4px)",
+                lg: "var(--radius)",
+                md: "calc(var(--radius) - 2px)",
+                sm: "calc(var(--radius) - 4px)",
            },
            animation: {
                like: "like 1s ease-in-out",
+                "accordion-down": "accordion-down 0.2s ease-out",
+                "accordion-up": "accordion-up 0.2s ease-out",
+                "collapsible-down": "collapsible-down 0.2s ease-in-out",
+                "collapsible-up": "collapsible-up 0.2s ease-in-out",
            },
            keyframes: {
                like: {
@ -38,9 +91,25 @@ export default (<Config>{
                        transform: "scale(1) rotate(360deg)",
                    },
                },
+                "accordion-down": {
+                    from: { height: "0" },
+                    to: { height: "var(--radix-accordion-content-height)" },
+                },
+                "accordion-up": {
+                    from: { height: "var(--radix-accordion-content-height)" },
+                    to: { height: "0" },
+                },
+                "collapsible-down": {
+                    from: { height: "0" },
+                    to: { height: "var(--radix-collapsible-content-height)" },
+                },
+                "collapsible-up": {
+                    from: { height: "var(--radix-collapsible-content-height)" },
+                    to: { height: "0" },
+                },
            },
        },
    },
-    plugins: [forms, typography],
+    plugins: [forms, typography, animate],
    content: ["packages/**/*.{vue,js,ts}"],
 });