refactor: unraid-ui-web-migration

unraid-ui/.env.development

@@ -0,0 +1 @@
+VITE_TAILWIND_BASE_FONT_SIZE=16

unraid-ui/.gitignore

@@ -0,0 +1 @@
+!.env.development

unraid-ui/.storybook/preview.ts

@@ -1,9 +1,12 @@
-import type { Preview } from "@storybook/vue3";
-import "../src/styles/globals.css";
+import type { Preview } from '@storybook/vue3';
+import '../src/styles/globals.css';
+import { registerAllComponents } from '../src/register';
+
+registerAllComponents({});
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,

unraid-ui/.storybook/tailwind.config.ts

@@ -1,10 +1,11 @@
-import baseConfig from "../tailwind.config";
+import baseConfig from '../tailwind.config';
 
 export default {
   ...baseConfig,
   content: [
-    "../src/components/**/*.{js,vue,ts}",
-    "../src/composables/**/*.{js,vue,ts}",
-    "../stories/**/*.stories.{js,ts,jsx,tsx,mdx}"
+    '../src/components/**/*.{js,vue,ts}',
+    '../src/components/**/*.ce.{js,vue,ts}',
+    '../src/composables/**/*.{js,vue,ts}',
+    '../stories/**/*.stories.{js,ts,jsx,tsx,mdx}',
   ],
 };

unraid-ui/components.json

@@ -4,16 +4,15 @@
   "typescript": true,
   "tsConfigPath": "./tsconfig.json",
   "tailwind": {
-    "config": "./tailwind.config.js",
+    "config": "./tailwind.config.ts",
     "css": "./src/styles/globals.css",
-    "baseColor": "slate",
+    "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""
   },
   "framework": "vite",
   "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "types": "@/types"
+    "components": "@/components/common",
+    "utils": "@/lib/utils"
   }
 }

unraid-ui/package.json

@@ -37,9 +37,9 @@
     "clsx": "^2.1.1",
     "kebab-case": "^2.0.1",
     "lucide-vue-next": "^0.468.0",
-    "radix-vue": "^1.9.11",
+    "radix-vue": "^1.9.13",
     "shadcn-vue": "^0.11.3",
-    "tailwind-merge": "^2.5.5",
+    "tailwind-merge": "^2.6.0",
     "vue-sonner": "^1.3.0"
   },
   "devDependencies": {
@@ -53,6 +53,7 @@
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20.0.0",
     "@types/testing-library__vue": "^5.0.0",
+    "@unraid/tailwind-rem-to-rem": "^1.1.0",
     "@vitejs/plugin-vue": "^5.0.0",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
     "@vitest/coverage-v8": "^1.0.0",
@@ -67,6 +68,7 @@
     "postcss": "^8.4.49",
     "prettier": "3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
+    "tailwind-rem-to-rem": "github:unraid/tailwind-rem-to-rem",
     "tailwindcss": "^3.0.0",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.0.0",

unraid-ui/src/components/brand/BrandLoading.ce.vue

@@ -1,23 +1,40 @@
 <script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { computed } from 'vue';
+import { brandLoadingVariants, markAnimations } from './brand-loading.variants';
+
 export interface Props {
-  gradientStart?: string;
-  gradientStop?: string;
-  title?: string,
+  variant?: 'default' | 'black' | 'white';
+  size?: 'sm' | 'md' | 'lg' | 'full';
+  class?: string;
+  title?: string;
 }
 
-withDefaults(defineProps<Props>(), {
-  gradientStart: '#e32929',
-  gradientStop: '#ff8d30',
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  size: 'full',
   title: 'Loading',
 });
+
+const GRADIENT_COLORS = {
+  black: { start: '#000000', stop: '#000000' },
+  white: { start: '#FFFFFF', stop: '#FFFFFF' },
+  default: { start: '#e32929', stop: '#ff8d30' },
+} as const;
+
+const gradientColors = computed(() => GRADIENT_COLORS[props.variant]);
+
+const classes = computed(() => {
+  return cn(brandLoadingVariants({ variant: props.variant, size: props.size }), props.class);
+});
 </script>
 
 <template>
   <svg
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 133.52 76.97"
-    :class="`unraid_mark`"
+    :class="classes"
     role="img"
   >
     <title>{{ title }}</title>
@@ -31,8 +48,8 @@ withDefaults(defineProps<Props>(), {
         y2="-4.51"
         gradientUnits="userSpaceOnUse"
       >
-        <stop offset="0" :stop-color="gradientStart" />
-        <stop offset="1" :stop-color="gradientStop" />
+        <stop offset="0" :stop-color="gradientColors.start" />
+        <stop offset="1" :stop-color="gradientColors.stop" />
       </linearGradient>
     </defs>
     <path
@@ -43,17 +60,17 @@ withDefaults(defineProps<Props>(), {
     <path
       d="m70,19.24zm47.65,11.9l-6.55,0l0,-23.79l6.55,0l0,23.79z"
       fill="url(#unraidLoadingGradient)"
-      class="unraid_mark_8"
+      :class="['unraid_mark_8', markAnimations.mark_6_8]"
     />
     <path
       d="m70,19.24zm31.77,-4.54l-6.54,0l0,-14.7l6.54,0l0,14.7z"
       fill="url(#unraidLoadingGradient)"
-      class="unraid_mark_7"
+      :class="['unraid_mark_7', markAnimations.mark_7]"
     />
     <path
       d="m70,19.24zm15.9,11.9l-6.54,0l0,-23.79l6.54,0l0,23.79z"
       fill="url(#unraidLoadingGradient)"
-      class="unraid_mark_6"
+      :class="['unraid_mark_6', markAnimations.mark_6_8]"
     />
     <path
       d="m63.49,19.24l6.51,0l0,38.49l-6.51,0l0,-38.49z"
@@ -63,17 +80,17 @@ withDefaults(defineProps<Props>(), {
     <path
       d="m70,19.24zm-22.38,26.6l6.54,0l0,23.78l-6.54,0l0,-23.78z"
       fill="url(#unraidLoadingGradient)"
-      class="unraid_mark_4"
+      :class="['unraid_mark_4', markAnimations.mark_2_4]"
     />
     <path
       d="m70,19.24zm-38.26,43.03l6.55,0l0,14.73l-6.55,0l0,-14.73z"
       fill="url(#unraidLoadingGradient)"
-      class="unraid_mark_3"
+      :class="['unraid_mark_3', markAnimations.mark_3]"
     />
     <path
       d="m70,19.24zm-54.13,26.6l6.54,0l0,23.78l-6.54,0l0,-23.78z"
       fill="url(#unraidLoadingGradient)"
-      class="unraid_mark_2"
+      :class="['unraid_mark_2', markAnimations.mark_2_4]"
     />
     <path
       d="m70,19.24zm-63.46,38.49l-6.54,0l0,-38.49l6.54,0l0,38.49z"
@@ -82,53 +99,3 @@ withDefaults(defineProps<Props>(), {
     />
   </svg>
 </template>
-
-<style scoped lang="css">
-.unraid_mark_2,
-.unraid_mark_4 {
-  animation: mark_2 1.5s ease infinite;
-}
-.unraid_mark_3 {
-  animation: mark_3 1.5s ease infinite;
-}
-.unraid_mark_6,
-.unraid_mark_8 {
-  animation: mark_6 1.5s ease infinite;
-}
-.unraid_mark_7 {
-  animation: mark_7 1.5s ease infinite;
-}
-
-@keyframes mark_2 {
-  50% {
-    transform: translateY(-40px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-@keyframes mark_3 {
-  50% {
-    transform: translateY(-62px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-@keyframes mark_6 {
-  50% {
-    transform: translateY(40px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-@keyframes mark_7 {
-  50% {
-    transform: translateY(62px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-</style>

unraid-ui/src/components/brand/brand-loading.variants.ts

@@ -0,0 +1,27 @@
+import { cva } from 'class-variance-authority';
+
+export const brandLoadingVariants = cva('inline-flex items-center justify-center w-full h-full', {
+  variants: {
+    variant: {
+      default: '',
+      black: 'text-black fill-black',
+      white: 'text-white fill-white',
+    },
+    size: {
+      sm: 'h-12 w-12',
+      md: 'h-16 w-16',
+      lg: 'h-20 w-20',
+      full: 'h-full w-full',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export const markAnimations = {
+  mark_2_4: 'animate-mark-2',
+  mark_3: 'animate-mark-3',
+  mark_6_8: 'animate-mark-6',
+  mark_7: 'animate-mark-7',
+};

unraid-ui/src/components/brand/index.ts

@@ -1,6 +1,9 @@
-export { default as BrandButton } from "./BrandButton.vue";
-export { brandButtonVariants } from "./brand-button.variants";
-export { default as BrandLoading } from "./BrandLoading.ce.vue";
-export { default as BrandLoadingWhite } from "./BrandLoadingWhite.vue";
-export { default as BrandLogo } from "./BrandLogo.vue";
-export { default as BrandLogoConnect } from "./BrandLogoConnect.vue";
+export { default as BrandButton } from './BrandButton.vue';
+export { brandButtonVariants } from './brand-button.variants';
+export { default as BrandLoading } from './BrandLoading.ce.vue';
+export { brandLoadingVariants } from './brand-loading.variants';
+export { default as BrandLogo } from './BrandLogo.vue';
+export { default as BrandLogoConnect } from './BrandLogoConnect.vue';
+
+// Type exports
+export type { BrandButtonProps } from './BrandButton.vue';