feat(web): install and configure nuxt ui

unraid-ui/src/styles/globals.css

@@ -98,7 +98,6 @@
   --color-unraid-green-900: #284126;
   --color-unraid-green-950: #122211;
 
-
   /* Header colors */
   --color-header-text-primary: var(--header-text-primary);
   --color-header-text-secondary: var(--header-text-secondary);
@@ -178,12 +177,6 @@
   --animate-mark-6: mark-6 1.5s ease infinite;
   --animate-mark-7: mark-7 1.5s ease infinite;
 
-  /* Keyframes */
-  --keyframes-mark-2: 50% { transform: translateY(-40px) } to { transform: translateY(0) };
-  --keyframes-mark-3: 50% { transform: translateY(-62px) } to { transform: translateY(0) };
-  --keyframes-mark-6: 50% { transform: translateY(40px) } to { transform: translateY(0) };
-  --keyframes-mark-7: 50% { transform: translateY(62px) } to { transform: translateY(0) };
-
   /* Radius */
   --radius: 0.5rem;
 
@@ -307,7 +300,45 @@
   }
 }
 
+/* Keyframes */
+@keyframes mark-2 {
+  50% {
+    transform: translateY(-40px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes mark-3 {
+  50% {
+    transform: translateY(-62px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes mark-6 {
+  50% {
+    transform: translateY(40px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes mark-7 {
+  50% {
+    transform: translateY(62px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
 /* Define the theme colors that reference the existing CSS variables from web/themes */
+
 @theme inline {
   --color-background: hsl(var(--background));
   --color-foreground: hsl(var(--foreground));

web/app.config.ts

@@ -0,0 +1,7 @@
+export default {
+  ui: {
+    colors: {
+      primary: 'primary',
+    },
+  },
+};

web/app.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { onMounted } from 'vue';
-import { NuxtLayout, NuxtPage } from '#components';
+
+import { NuxtLayout, NuxtPage, UApp  } from '#components';
 import { devConfig } from '~/helpers/env';
 
 onMounted(() => {
   document.documentElement.setAttribute('data-env', devConfig.NODE_ENV || 'production');
 
-
   // Override text sizes back to 16px base in dev mode (from 10px base in globals.css)
   if (devConfig.NODE_ENV === 'development') {
     document.documentElement.style.setProperty('--text-xs', '0.75rem'); /* 12px */
@@ -28,7 +28,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <NuxtLayout>
-    <NuxtPage />
-  </NuxtLayout>
+  <UApp>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </UApp>
 </template>

web/assets/main.css

@@ -1,5 +1,6 @@
 @import 'tailwindcss';
 @import '@unraid/ui/styles';
+@import '@nuxt/ui';
 
 /* Force generation of all color utilities for custom colors across packages */
 @source inline("{bg,text,border,ring,fill,stroke}-{unraid-green,unraid-red}{,-50,-100,-200,-300,-400,-500,-600,-700,-800,-900,-950}");
@@ -11,6 +12,18 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
+  --color-primary-50: #fff7ed;
+  --color-primary-100: #ffedd5;
+  --color-primary-200: #fed7aa;
+  --color-primary-300: #fdba74;
+  --color-primary-400: #fb923c;
+  --color-primary-500: #ff6600;
+  --color-primary-600: #ea580c;
+  --color-primary-700: #c2410c;
+  --color-primary-800: #9a3412;
+  --color-primary-900: #7c2d12;
+  --color-primary-950: #431407;
+
   /* Header colors */
   --color-header-text-primary: var(--header-text-primary);
   --color-header-text-secondary: var(--header-text-secondary);
@@ -90,6 +103,18 @@
     border-color: hsl(var(--border));
   }
 
+  :root {
+    --ui-primary: var(--color-primary-500);
+    --ui-primary-hover: var(--color-primary-600);
+    --ui-primary-active: var(--color-primary-700);
+  }
+
+  .dark {
+    --ui-primary: var(--color-primary-500);
+    --ui-primary-hover: var(--color-primary-600);
+    --ui-primary-active: var(--color-primary-700);
+  }
+
   body {
     --color-alpha: #1c1b1b;
     --color-beta: #f2f2f2;

web/nuxt.config.ts

@@ -1,9 +1,9 @@
 import path from 'path';
 
-import removeConsole from 'vite-plugin-remove-console';
 import tailwindcss from '@tailwindcss/vite';
+import removeConsole from 'vite-plugin-remove-console';
 
-import type { UserConfig, PluginOption } from 'vite';
+import type { PluginOption, UserConfig } from 'vite';
 
 /**
  * Used to avoid redeclaring variables in the webgui codebase.
@@ -49,10 +49,10 @@ const sharedTerserOptions = {
  */
 const getSharedPlugins = (includeJQueryIsolation = false) => {
   const plugins: PluginOption[] = [];
-  
+
   // Add Tailwind CSS plugin
   plugins.push(tailwindcss());
-  
+
   // Remove console logs in production
   if (dropConsole) {
     plugins.push(
@@ -61,15 +61,15 @@ const getSharedPlugins = (includeJQueryIsolation = false) => {
       })
     );
   }
-  
+
   // Add jQuery isolation plugin for custom elements
   if (includeJQueryIsolation) {
     plugins.push({
       name: 'jquery-isolation',
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       generateBundle(options: any, bundle: any) {
         // Find the main JS file
-        const jsFile = Object.keys(bundle).find(key => key.endsWith('.js'));
+        const jsFile = Object.keys(bundle).find((key) => key.endsWith('.js'));
         if (jsFile && bundle[jsFile] && 'code' in bundle[jsFile]) {
           const originalCode = bundle[jsFile].code;
           // Wrap the entire bundle to preserve and restore jQuery
@@ -93,7 +93,7 @@ const getSharedPlugins = (includeJQueryIsolation = false) => {
 })();
 `;
         }
-      }
+      },
     });
   }
 
@@ -115,17 +115,17 @@ const applySharedViteConfig = (config: UserConfig, includeJQueryIsolation = fals
   if (!config.plugins) config.plugins = [];
   if (!config.define) config.define = {};
   if (!config.build) config.build = {};
-  
+
   // Add shared plugins
   config.plugins.push(...getSharedPlugins(includeJQueryIsolation));
-  
+
   // Merge define values
   Object.assign(config.define, sharedDefine);
-  
+
   // Apply build configuration
   config.build.minify = 'terser';
   config.build.terserOptions = sharedTerserOptions;
-  
+
   return config;
 };
 
@@ -143,20 +143,19 @@ export default defineNuxtConfig({
     port: 4321,
   },
 
-  css: [
-    '@/assets/main.css',
-  ],
+  css: ['@/assets/main.css'],
 
   devtools: {
     enabled: process.env.NODE_ENV === 'development',
   },
 
-  modules: [
-    '@vueuse/nuxt',
-    '@pinia/nuxt',
-    'nuxt-custom-elements',
-    '@nuxt/eslint',
-  ],
+  modules: ['@vueuse/nuxt', '@pinia/nuxt', 'nuxt-custom-elements', '@nuxt/eslint', '@nuxt/ui'],
+
+  ui: {
+    theme: {
+      colors: ['primary'],
+    },
+  },
 
   // Disable auto-imports
   imports: {
@@ -181,20 +180,19 @@ export default defineNuxtConfig({
       terserOptions: sharedTerserOptions,
     },
   },
-  
+
   customElements: {
     analyzer: process.env.NODE_ENV !== 'test',
     entries: [
       // @ts-expect-error The nuxt-custom-elements module types don't perfectly match our configuration object structure.
-      // The custom elements configuration requires specific properties and methods that may not align with the 
+      // The custom elements configuration requires specific properties and methods that may not align with the
       // module's TypeScript definitions, particularly around the viteExtend function and tag configuration format.
       {
         name: 'UnraidComponents',
         viteExtend(config: UserConfig) {
           return applySharedViteConfig(config, true);
         },
         tags: [
-
           {
             async: false,
             name: 'UnraidAuth',

web/package.json

@@ -95,6 +95,7 @@
     "@jsonforms/vue": "3.6.0",
     "@jsonforms/vue-vanilla": "3.6.0",
     "@jsonforms/vue-vuetify": "3.6.0",
+    "@nuxt/ui": "^3.2.0",
     "@nuxtjs/color-mode": "3.5.2",
     "@pinia/nuxt": "0.11.1",
     "@unraid/shared-callbacks": "1.1.1",

web/pages/index.vue

@@ -1,27 +1,29 @@
 <script lang="ts" setup>
-import { ref, onMounted, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
-import { useHead } from '#imports';
+
 import { ExclamationTriangleIcon } from '@heroicons/vue/24/solid';
 import { BrandButton, Toaster } from '@unraid/ui';
+import { UButton } from '#components';
+import { useHead } from '#imports';
 import { useDummyServerStore } from '~/_data/serverState';
 import AES from 'crypto-js/aes';
 
 import type { SendPayloads } from '@unraid/shared-callbacks';
 
-import LogViewerCe from '~/components/Logs/LogViewer.ce.vue';
-import SsoButtonCe from '~/components/SsoButton.ce.vue';
-import { useThemeStore } from '~/store/theme';
-import ModalsCe from '~/components/Modals.ce.vue';
+import WelcomeModalCe from '~/components/Activation/WelcomeModal.ce.vue';
+import ColorSwitcherCe from '~/components/ColorSwitcher.ce.vue';
 import ConnectSettingsCe from '~/components/ConnectSettings/ConnectSettings.ce.vue';
+import DowngradeOsCe from '~/components/DowngradeOs.ce.vue';
 import DummyServerSwitcher from '~/components/DummyServerSwitcher.vue';
-import ColorSwitcherCe from '~/components/ColorSwitcher.ce.vue';
 import HeaderOsVersionCe from '~/components/HeaderOsVersion.ce.vue';
-import UserProfileCe from '~/components/UserProfile.ce.vue';
-import UpdateOsCe from '~/components/UpdateOs.ce.vue';
-import DowngradeOsCe from '~/components/DowngradeOs.ce.vue';
+import LogViewerCe from '~/components/Logs/LogViewer.ce.vue';
+import ModalsCe from '~/components/Modals.ce.vue';
 import RegistrationCe from '~/components/Registration.ce.vue';
-import WelcomeModalCe from '~/components/Activation/WelcomeModal.ce.vue';
+import SsoButtonCe from '~/components/SsoButton.ce.vue';
+import UpdateOsCe from '~/components/UpdateOs.ce.vue';
+import UserProfileCe from '~/components/UserProfile.ce.vue';
+import { useThemeStore } from '~/store/theme';
 
 const serverStore = useDummyServerStore();
 const { serverState } = storeToRefs(serverStore);
@@ -36,7 +38,7 @@ onMounted(() => {
 });
 
 const valueToMakeCallback = ref<SendPayloads | undefined>();
-const callbackDestination = ref<string>('');
+const callbackDestination = ref<string | undefined>('');
 
 const createCallbackUrl = (payload: SendPayloads, sendType: string) => {
   // params differs from callbackActions.send
@@ -178,6 +180,17 @@ watch(
               <pre>{{ callbackDestination }}</pre>
             </code>
           </div>
+          <div>
+            <hr class="border-black dark:border-white" >
+            <h2 class="text-xl font-semibold font-mono">Nuxt UI Button - Primary Color Test</h2>
+            <div class="flex gap-4 items-center">
+              <UButton color="primary" variant="solid">Primary Solid</UButton>
+              <UButton color="primary" variant="outline">Primary Outline</UButton>
+              <UButton color="primary" variant="soft">Primary Soft</UButton>
+              <UButton color="primary" variant="ghost">Primary Ghost</UButton>
+              <UButton color="primary" variant="link">Primary Link</UButton>
+            </div>
+          </div>
           <div class="bg-background">
             <hr class="border-black dark:border-white" >
             <h2 class="text-xl font-semibold font-mono">Brand Button Component</h2>
@@ -208,7 +221,7 @@ watch(
   </div>
 </template>
 
-<style >
+<style>
 /* Import unraid-ui globals first */
 @import '@unraid/ui/styles';
 @import '~/assets/main.css';