refactor: swap out radix with reka

unraid-ui/package.json

@@ -49,9 +49,8 @@
     "clsx": "^2.1.1",
     "kebab-case": "^2.0.1",
     "lucide-vue-next": "^0.483.0",
-    "radix-vue": "^1.9.13",
-    "shadcn-vue": "^1.0.0",
     "reka-ui": "^2.1.0",
+    "shadcn-vue": "^1.0.0",
     "tailwind-merge": "^2.6.0",
     "vue-sonner": "^1.3.0"
   },

unraid-ui/src/components/common/badge/Badge.vue

@@ -1,25 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { Component } from 'vue';
-import { badgeVariants } from './badge.variants';
+import { badgeVariants, type BadgeVariants } from './badge.variants';
 
 export interface BadgeProps {
-  variant?:
-    | 'red'
-    | 'yellow'
-    | 'green'
-    | 'blue'
-    | 'indigo'
-    | 'purple'
-    | 'pink'
-    | 'orange'
-    | 'black'
-    | 'white'
-    | 'transparent'
-    | 'current'
-    | 'gray'
-    | 'custom';
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  variant?: BadgeVariants['variant'];
+  size?: BadgeVariants['size'];
   icon?: Component;
   iconRight?: Component;
   iconStyles?: string;

unraid-ui/src/components/common/badge/badge.variants.ts

@@ -1,37 +1,39 @@
-import { cva } from "class-variance-authority";
+import { cva, VariantProps } from 'class-variance-authority';
 
 export const badgeVariants = cva(
-  "inline-flex items-center rounded-full font-semibold leading-none transition-all duration-200 ease-in-out unraid-ui-badge-test",
+  'inline-flex items-center rounded-full font-semibold leading-none transition-all duration-200 ease-in-out unraid-ui-badge-test',
   {
     variants: {
       variant: {
-        red: "bg-unraid-red text-white hover:bg-orange-dark",
-        yellow: "bg-yellow-100 text-black hover:bg-yellow-200",
-        green: "bg-green-200 text-green-800 hover:bg-green-300",
-        blue: "bg-blue-100 text-blue-800 hover:bg-blue-200",
-        indigo: "bg-indigo-100 text-indigo-800 hover:bg-indigo-200",
-        purple: "bg-purple-100 text-purple-800 hover:bg-purple-200",
-        pink: "bg-pink-100 text-pink-800 hover:bg-pink-200",
-        orange: "bg-orange text-white hover:bg-orange-dark",
-        black: "bg-black text-white hover:bg-gray-800",
-        white: "bg-white text-black hover:bg-gray-100",
-        transparent: "bg-transparent text-black hover:bg-gray-100",
-        current: "bg-current text-current hover:bg-gray-100",
-        gray: "bg-gray-200 text-gray-800 hover:bg-gray-300",
-        custom: "",
+        red: 'bg-unraid-red text-white hover:bg-orange-dark',
+        yellow: 'bg-yellow-100 text-black hover:bg-yellow-200',
+        green: 'bg-green-200 text-green-800 hover:bg-green-300',
+        blue: 'bg-blue-100 text-blue-800 hover:bg-blue-200',
+        indigo: 'bg-indigo-100 text-indigo-800 hover:bg-indigo-200',
+        purple: 'bg-purple-100 text-purple-800 hover:bg-purple-200',
+        pink: 'bg-pink-100 text-pink-800 hover:bg-pink-200',
+        orange: 'bg-orange text-white hover:bg-orange-dark',
+        black: 'bg-black text-white hover:bg-gray-800',
+        white: 'bg-white text-black hover:bg-gray-100',
+        transparent: 'bg-transparent text-black hover:bg-gray-100',
+        current: 'bg-current text-current hover:bg-gray-100',
+        gray: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
+        custom: '',
       },
       size: {
-        xs: "text-12px px-8px py-4px gap-4px",
-        sm: "text-14px px-8px py-4px gap-8px",
-        md: "text-16px px-12px py-8px gap-8px",
-        lg: "text-18px px-12px py-8px gap-8px",
-        xl: "text-20px px-16px py-12px gap-8px",
-        "2xl": "text-24px px-16px py-12px gap-8px",
+        xs: 'text-12px px-8px py-4px gap-4px',
+        sm: 'text-14px px-8px py-4px gap-8px',
+        md: 'text-16px px-12px py-8px gap-8px',
+        lg: 'text-18px px-12px py-8px gap-8px',
+        xl: 'text-20px px-16px py-12px gap-8px',
+        '2xl': 'text-24px px-16px py-12px gap-8px',
       },
     },
     defaultVariants: {
-      variant: "gray",
-      size: "md",
+      variant: 'gray',
+      size: 'md',
     },
   }
 );
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>;

unraid-ui/src/components/common/button/Button.vue

@@ -1,30 +1,21 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { buttonVariants } from "./button.variants";
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
+import { computed } from 'vue';
+import { buttonVariants, type ButtonVariants } from './button.variants';
 
 export interface ButtonProps {
-  variant?:
-    | "primary"
-    | "destructive"
-    | "outline"
-    | "secondary"
-    | "ghost"
-    | "link";
-  size?: "sm" | "md" | "lg" | "icon";
+  variant?: ButtonVariants['variant'];
+  size?: ButtonVariants['size'];
   class?: string;
 }
 
 const props = withDefaults(defineProps<ButtonProps>(), {
-  variant: "primary",
-  size: "md",
+  variant: 'primary',
+  size: 'md',
 });
 
 const buttonClass = computed(() => {
-  return cn(
-    buttonVariants({ variant: props.variant, size: props.size }),
-    props.class
-  );
+  return cn(buttonVariants({ variant: props.variant, size: props.size }), props.class);
 });
 </script>
 

unraid-ui/src/components/common/button/button.variants.ts

@@ -1,30 +1,29 @@
-import { cva } from "class-variance-authority";
+import { cva, VariantProps } from 'class-variance-authority';
 
 export const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-base font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  'inline-flex items-center justify-center rounded-md text-base font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
-        primary: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+        primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        sm: "h-9 rounded-md px-3",
-        md: "h-10 px-4 py-2",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
+        sm: 'h-9 rounded-md px-3',
+        md: 'h-10 px-4 py-2',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
       },
     },
     defaultVariants: {
-      variant: "primary",
-      size: "md",
+      variant: 'primary',
+      size: 'md',
     },
   }
 );
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

unraid-ui/src/components/common/scroll-area/ScrollArea.vue

@@ -1,17 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from "vue";
-import {
-  ScrollAreaCorner,
-  ScrollAreaRoot,
-  type ScrollAreaRootProps,
-  ScrollAreaViewport,
-} from "radix-vue";
-import ScrollBar from "./ScrollBar.vue";
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
+import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaViewport, type ScrollAreaRootProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+import ScrollBar from './ScrollBar.vue';
 
-const props = defineProps<
-  ScrollAreaRootProps & { class?: HTMLAttributes["class"] }
->();
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
@@ -21,10 +14,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ScrollAreaRoot
-    v-bind="delegatedProps"
-    :class="cn('relative overflow-hidden', props.class)"
-  >
+  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
     <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
       <slot />
     </ScrollAreaViewport>

unraid-ui/src/components/common/scroll-area/ScrollBar.vue

@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from "vue";
-import {
-  ScrollAreaScrollbar,
-  type ScrollAreaScrollbarProps,
-  ScrollAreaThumb,
-} from "radix-vue";
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
+import { ScrollAreaScrollbar, ScrollAreaThumb, type ScrollAreaScrollbarProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
 const props = withDefaults(
-  defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes["class"] }>(),
+  defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(),
   {
-    orientation: "vertical",
+    orientation: 'vertical',
     class: undefined,
   }
 );
@@ -28,10 +24,8 @@ const delegatedProps = computed(() => {
     :class="
       cn(
         'flex touch-none select-none transition-colors',
-        orientation === 'vertical' &&
-          'h-full w-2.5 border-l border-l-transparent p-px',
-        orientation === 'horizontal' &&
-          'h-2.5 flex-col border-t border-t-transparent p-px',
+        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-px',
+        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-px',
         props.class
       )
     "

unraid-ui/src/components/common/sheet/SheetContent.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import useTeleport from '@/composables/useTeleport';
 import { cn } from '@/lib/utils';
 import { X } from 'lucide-vue-next';
 import {
@@ -10,17 +11,19 @@ import {
   type DialogContentEmits,
 } from 'reka-ui';
 import { computed, type HTMLAttributes } from 'vue';
-import { sheetVariants } from './sheet.variants';
+import { sheetVariants, type SheetVariants } from './sheet.variants';
 
 export interface SheetContentProps {
-  side?: 'top' | 'bottom' | 'left' | 'right';
-  padding?: 'none' | 'md';
+  side?: SheetVariants['side'];
+  padding?: SheetVariants['padding'];
   class?: HTMLAttributes['class'];
   disabled?: boolean;
   forceMount?: boolean;
   to?: string | HTMLElement;
 }
 
+const { teleportTarget } = useTeleport();
+
 const props = withDefaults(defineProps<SheetContentProps>(), {
   side: 'right',
   padding: 'md',
@@ -41,7 +44,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DialogPortal :disabled="disabled" :force-mount="forceMount" :to="to">
+  <DialogPortal :disabled="disabled" :force-mount="forceMount" :to="teleportTarget">
     <DialogOverlay
       class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     />

unraid-ui/src/components/common/sheet/sheet.variants.ts

@@ -1,23 +1,27 @@
-import { cva } from "class-variance-authority";
+import { cva, VariantProps } from 'class-variance-authority';
 
 export const sheetVariants = cva(
-  "fixed z-50 bg-background gap-4 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 border-border",
+  'fixed z-50 bg-background gap-4 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 border-border',
   {
     variants: {
       side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
       },
       padding: {
-        none: "",
-        md: "p-6",
+        none: '',
+        md: 'p-6',
       },
     },
     defaultVariants: {
-      side: "right",
-      padding: "md",
+      side: 'right',
+      padding: 'md',
     },
   }
-); 
+);
+
+export type SheetVariants = VariantProps<typeof sheetVariants>;

unraid-ui/src/components/common/stepper/Stepper.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils';
-import type { StepperRootEmits, StepperRootProps } from 'radix-vue';
-import { StepperRoot, useForwardPropsEmits } from 'radix-vue';
+import type { StepperRootEmits, StepperRootProps } from 'reka-ui';
+import { StepperRoot, useForwardPropsEmits } from 'reka-ui';
 import { computed, type HTMLAttributes } from 'vue';
 
 const props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>();

unraid-ui/src/components/common/stepper/StepperDescription.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils';
-import type { StepperDescriptionProps } from 'radix-vue';
-import { StepperDescription, useForwardProps } from 'radix-vue';
+import type { StepperDescriptionProps } from 'reka-ui';
+import { StepperDescription, useForwardProps } from 'reka-ui';
 import { computed, type HTMLAttributes } from 'vue';
 
 const props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>();

unraid-ui/src/components/common/stepper/StepperIndicator.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils';
-import type { StepperIndicatorProps } from 'radix-vue';
-import { StepperIndicator, useForwardProps } from 'radix-vue';
+import type { StepperIndicatorProps } from 'reka-ui';
+import { StepperIndicator, useForwardProps } from 'reka-ui';
 import { computed, type HTMLAttributes } from 'vue';
 
 const props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>();

unraid-ui/src/components/common/stepper/StepperItem.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils';
-import type { StepperItemProps } from 'radix-vue';
-import { StepperItem, useForwardProps } from 'radix-vue';
+import type { StepperItemProps } from 'reka-ui';
+import { StepperItem, useForwardProps } from 'reka-ui';
 import { computed, type HTMLAttributes } from 'vue';
 
 const props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>();

unraid-ui/src/components/common/stepper/StepperSeparator.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils';
-import type { StepperSeparatorProps } from 'radix-vue';
-import { StepperSeparator, useForwardProps } from 'radix-vue';
+import type { StepperSeparatorProps } from 'reka-ui';
+import { StepperSeparator, useForwardProps } from 'reka-ui';
 import { computed, type HTMLAttributes } from 'vue';
 
 const props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>();

unraid-ui/src/components/common/stepper/StepperTitle.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { cn } from '@/lib/utils';
-import type { StepperTitleProps } from 'radix-vue';
-import { StepperTitle, useForwardProps } from 'radix-vue';
+import type { StepperTitleProps } from 'reka-ui';
+import { StepperTitle, useForwardProps } from 'reka-ui';
 import { computed, type HTMLAttributes } from 'vue';
 
 const props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>();