refactor: swap out dropdown with reka components

unraid-ui/.storybook/preview.ts

@@ -14,6 +14,18 @@ const preview: Preview = {
       },
     },
   },
+  // Add decorator to include modals container in every story
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: `
+        <div>
+          <div id="modals"></div>
+          <story />
+        </div>
+      `,
+    }),
+  ],
 };
 
 export default preview;

unraid-ui/components.json

@@ -2,17 +2,18 @@
   "$schema": "https://shadcn-vue.com/schema.json",
   "style": "default",
   "typescript": true,
-  "tsConfigPath": "./tsconfig.json",
   "tailwind": {
-    "config": "./tailwind.config.ts",
-    "css": "./src/styles/globals.css",
+    "config": "tailwind.config.ts",
+    "css": "src/styles/globals.css",
     "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""
   },
-  "framework": "vite",
   "aliases": {
     "components": "@/components/common",
-    "utils": "@/lib/utils"
-  }
+    "composables": "@/composables",
+    "utils": "@/lib/utils",
+    "lib": "@/lib"
+  },
+  "iconLibrary": "lucide"
 }

unraid-ui/package.json

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

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

@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils';
 import { computed } from 'vue';
-import { brandLoadingVariants, markAnimations } from './brand-loading.variants';
+import {
+  brandLoadingVariants,
+  markAnimations,
+  type BrandLoadingVariants,
+} from './brand-loading.variants';
 
 export interface Props {
-  variant?: 'default' | 'black' | 'white';
-  size?: 'sm' | 'md' | 'lg' | 'full';
+  variant?: BrandLoadingVariants['variant'];
+  size?: BrandLoadingVariants['size'];
   class?: string;
   title?: string;
 }
@@ -22,7 +26,7 @@ const GRADIENT_COLORS = {
   default: { start: '#e32929', stop: '#ff8d30' },
 } as const;
 
-const gradientColors = computed(() => GRADIENT_COLORS[props.variant]);
+const gradientColors = computed(() => GRADIENT_COLORS[props.variant as keyof typeof GRADIENT_COLORS]);
 
 const classes = computed(() => {
   return cn(brandLoadingVariants({ variant: props.variant, size: props.size }), props.class);

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

@@ -1,27 +1,33 @@
-import { cva } from 'class-variance-authority';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-export const brandLoadingVariants = cva('inline-flex items-center justify-center w-full h-full aspect-[7/4]', {
-  variants: {
-    variant: {
-      default: '',
-      black: 'text-black fill-black',
-      white: 'text-white fill-white',
+export const brandLoadingVariants = cva(
+  'inline-flex items-center justify-center w-full h-full aspect-[7/4]',
+  {
+    variants: {
+      variant: {
+        default: '',
+        black: 'text-black fill-black',
+        white: 'text-white fill-white',
+      },
+      size: {
+        sm: 'w-12',
+        md: 'w-16',
+        lg: 'w-20',
+        full: 'w-full',
+        custom: '',
+      },
     },
-    size: {
-      sm: 'w-12',
-      md: 'w-16',
-      lg: 'w-20',
-      full: 'w-full',
+    defaultVariants: {
+      variant: 'default',
     },
-  },
-  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',
 };
+
+export type BrandLoadingVariants = VariantProps<typeof brandLoadingVariants>;

unraid-ui/src/components/common/dropdown-menu/DropdownMenu.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import {
   DropdownMenuRoot,
+  useForwardPropsEmits,
   type DropdownMenuRootEmits,
   type DropdownMenuRootProps,
-  useForwardPropsEmits,
-} from "radix-vue";
+} from 'reka-ui';
 
 const props = defineProps<DropdownMenuRootProps>();
 const emits = defineEmits<DropdownMenuRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits);
+const forwarded = useForwardPropsEmits<DropdownMenuRootProps, 'update:open'>(props, emits);
 </script>
 
 <template>

unraid-ui/src/components/common/dropdown-menu/DropdownMenuArrow.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import {
+  DropdownMenuArrow as RekaDropdownMenuArrow,
+  useForwardProps,
+  type DropdownMenuArrowProps,
+} from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DropdownMenuArrowProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <RekaDropdownMenuArrow
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'fill-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        props.class
+      )
+    "
+  />
+</template>

unraid-ui/src/components/common/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -1,18 +1,16 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from "vue";
+import { cn } from '@/lib/utils';
+import { Check } from 'lucide-vue-next';
 import {
   DropdownMenuCheckboxItem,
-  type DropdownMenuCheckboxItemEmits,
-  type DropdownMenuCheckboxItemProps,
   DropdownMenuItemIndicator,
   useForwardPropsEmits,
-} from "radix-vue";
-import { Check } from "lucide-vue-next";
-import { cn } from "@/lib/utils";
+  type DropdownMenuCheckboxItemEmits,
+  type DropdownMenuCheckboxItemProps,
+} from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<
-  DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }
->();
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>();
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
 
 const delegatedProps = computed(() => {

unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vue

@@ -1,44 +1,48 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from "vue";
+import useTeleport from '@/composables/useTeleport';
+import { cn } from '@/lib/utils';
 import {
   DropdownMenuContent,
-  type DropdownMenuContentEmits,
-  type DropdownMenuContentProps,
   DropdownMenuPortal,
   useForwardPropsEmits,
-} from "radix-vue";
-import { cn } from "@/lib/utils";
+  type DropdownMenuContentEmits,
+  type DropdownMenuContentProps,
+} from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+
+const { teleportTarget } = useTeleport();
 
 const props = withDefaults(
-  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(),
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
   {
     sideOffset: 4,
-    class: undefined,
   }
 );
 const emits = defineEmits<DropdownMenuContentEmits>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
-
   return delegated;
 });
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DropdownMenuPortal>
+  <DropdownMenuPortal :to="teleportTarget">
     <DropdownMenuContent
       v-bind="forwarded"
+      side="bottom"
       :class="
         cn(
-          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'z-50 min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
           props.class
         )
       "
     >
-      <slot />
+      <div class="overflow-hidden">
+        <slot />
+      </div>
     </DropdownMenuContent>
   </DropdownMenuPortal>
 </template>

unraid-ui/src/components/common/dropdown-menu/DropdownMenuGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DropdownMenuGroup, type DropdownMenuGroupProps } from "radix-vue";
+import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui';
 
 const props = defineProps<DropdownMenuGroupProps>();
 </script>

unraid-ui/src/components/common/dropdown-menu/DropdownMenuItem.vue

@@ -1,14 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from "vue";
-import {
-  DropdownMenuItem,
-  type DropdownMenuItemProps,
-  useForwardProps,
-} from "radix-vue";
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
+import { DropdownMenuItem, useForwardProps, type DropdownMenuItemProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
 const props = defineProps<
-  DropdownMenuItemProps & { class?: HTMLAttributes["class"]; inset?: boolean }
+  DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }
 >();
 
 const delegatedProps = computed(() => {
@@ -25,7 +21,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
         inset && 'pl-8',
         props.class
       )

unraid-ui/src/components/common/dropdown-menu/DropdownMenuLabel.vue

@@ -1,14 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from "vue";
-import {
-  DropdownMenuLabel,
-  type DropdownMenuLabelProps,
-  useForwardProps,
-} from "radix-vue";
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
+import { DropdownMenuLabel, useForwardProps, type DropdownMenuLabelProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
 const props = defineProps<
-  DropdownMenuLabelProps & { class?: HTMLAttributes["class"]; inset?: boolean }
+  DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }
 >();
 
 const delegatedProps = computed(() => {
@@ -23,9 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 <template>
   <DropdownMenuLabel
     v-bind="forwardedProps"
-    :class="
-      cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)
-    "
+    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
   >
     <slot />
   </DropdownMenuLabel>

unraid-ui/src/components/common/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import {
   DropdownMenuRadioGroup,
+  useForwardPropsEmits,
   type DropdownMenuRadioGroupEmits,
   type DropdownMenuRadioGroupProps,
-  useForwardPropsEmits,
-} from "radix-vue";
+} from 'reka-ui';
 
 const props = defineProps<DropdownMenuRadioGroupProps>();
 const emits = defineEmits<DropdownMenuRadioGroupEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits);
+const forwarded = useForwardPropsEmits<DropdownMenuRadioGroupProps, 'update:modelValue'>(props, emits);
 </script>
 
 <template>

unraid-ui/src/components/common/dropdown-menu/DropdownMenuRadioItem.vue

@@ -1,18 +1,16 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from "vue";
+import { cn } from '@/lib/utils';
+import { Circle } from 'lucide-vue-next';
 import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,
+  useForwardPropsEmits,
   type DropdownMenuRadioItemEmits,
   type DropdownMenuRadioItemProps,
-  useForwardPropsEmits,
-} from "radix-vue";
-import { Circle } from "lucide-vue-next";
-import { cn } from "@/lib/utils";
+} from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<
-  DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }
->();
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>();
 
 const emits = defineEmits<DropdownMenuRadioItemEmits>();