chore: ref codemod from react

2026-06-06 00:56:54 +00:00 · 2025-04-16 13:58:56 +02:00
parent 52c3257786
commit efa082f623
17 changed files with 890 additions and 694 deletions
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -8,19 +8,22 @@ import { Search } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { Dialog, DialogContent } from "@/components/ui/dialog"

-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
-    )}
-    {...props}
-  />
-))
+const Command = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive> & {
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive>>;
+  }
+) => (<CommandPrimitive
+  ref={ref}
+  className={cn(
+    "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+    className
+  )}
+  {...props}
+/>)
 Command.displayName = CommandPrimitive.displayName

 const CommandDialog = ({ children, ...props }: DialogProps) => {
@@ -35,92 +38,109 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
  )
 }

-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  </div>
-))
+const CommandInput = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Input>>;
+  }
+) => (<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+  <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+  <CommandPrimitive.Input
+    ref={ref}
+    className={cn(
+      "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  />
+</div>)

 CommandInput.displayName = CommandPrimitive.Input.displayName

-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-))
+const CommandList = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.List>>;
+  }
+) => (<CommandPrimitive.List
+  ref={ref}
+  className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+  {...props}
+/>)

 CommandList.displayName = CommandPrimitive.List.displayName

-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
-))
+const CommandEmpty = (
+  {
+    ref,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> & {
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Empty>>;
+  }
+) => (<CommandPrimitive.Empty
+  ref={ref}
+  className="py-6 text-center text-sm"
+  {...props}
+/>)

 CommandEmpty.displayName = CommandPrimitive.Empty.displayName

-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-))
+const CommandGroup = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> & {
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Group>>;
+  }
+) => (<CommandPrimitive.Group
+  ref={ref}
+  className={cn(
+    "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+    className
+  )}
+  {...props}
+/>)

 CommandGroup.displayName = CommandPrimitive.Group.displayName

-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
-    {...props}
-  />
-))
+const CommandSeparator = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> & {
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Separator>>;
+  }
+) => (<CommandPrimitive.Separator
+  ref={ref}
+  className={cn("-mx-1 h-px bg-border", className)}
+  {...props}
+/>)
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName

-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      className
-    )}
-    {...props}
-  />
-))
+const CommandItem = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> & {
+    ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Item>>;
+  }
+) => (<CommandPrimitive.Item
+  ref={ref}
+  className={cn(
+    "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+    className
+  )}
+  {...props}
+/>)

 CommandItem.displayName = CommandPrimitive.Item.displayName