💩 f*ck react

src/components/xui/filepath.tsx

@@ -15,13 +15,13 @@ import {
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { formatPath } from "@/lib/utils"
-import * as React from "react"
+import { Dispatch, SetStateAction, FC, useState, Fragment } from "react"
 
 const ITEMS_TO_DISPLAY = 3
 
 interface FilepathProps {
     path: string
-    setPath: React.Dispatch<React.SetStateAction<string>>
+    setPath: Dispatch<SetStateAction<string>>
 }
 
 function pathToItems(path: string) {
@@ -38,8 +38,8 @@ function pathToItems(path: string) {
     return result
 }
 
-export const Filepath: React.FC<FilepathProps> = ({ path, setPath }) => {
-    const [open, setOpen] = React.useState(false)
+export const Filepath: FC<FilepathProps> = ({ path, setPath }) => {
+    const [open, setOpen] = useState(false)
     const items = pathToItems(formatPath(path))
 
     return (
@@ -87,7 +87,7 @@ export const Filepath: React.FC<FilepathProps> = ({ path, setPath }) => {
                     </>
                 ) : null}
                 {items.slice(-ITEMS_TO_DISPLAY).map((item, index, slicedItems) => (
-                    <React.Fragment key={index}>
+                    <Fragment key={index}>
                         <BreadcrumbItem className="overflow-auto">
                             {item.href ? (
                                 <>
@@ -107,7 +107,7 @@ export const Filepath: React.FC<FilepathProps> = ({ path, setPath }) => {
                             )}
                         </BreadcrumbItem>
                         {index !== slicedItems.length - 1 ? <BreadcrumbSeparator /> : null}
-                    </React.Fragment>
+                    </Fragment>
                 ))}
             </BreadcrumbList>
         </Breadcrumb>

src/components/xui/multi-select.tsx

@@ -38,7 +38,7 @@ import { Separator } from "@/components/ui/separator"
 import { cn } from "@/lib/utils"
 import { type VariantProps, cva } from "class-variance-authority"
 import { CheckIcon, ChevronDown, WandSparkles, XIcon } from "lucide-react"
-import * as React from "react"
+import { useState, forwardRef, KeyboardEvent } from "react"
 
 /**
  * Variants for the multi-select component to handle different styles.
@@ -129,7 +129,7 @@ interface MultiSelectProps
     className?: string
 }
 
-export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
+export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
     (
         {
             options,
@@ -146,11 +146,11 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
         },
         ref,
     ) => {
-        const [selectedValues, setSelectedValues] = React.useState<string[]>(defaultValue)
-        const [isPopoverOpen, setIsPopoverOpen] = React.useState(false)
-        const [isAnimating, setIsAnimating] = React.useState(false)
+        const [selectedValues, setSelectedValues] = useState<string[]>(defaultValue)
+        const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+        const [isAnimating, setIsAnimating] = useState(false)
 
-        const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
             if (event.key === "Enter") {
                 setIsPopoverOpen(true)
             } else if (event.key === "Backspace" && !event.currentTarget.value) {

src/components/xui/overlayless-sheet.tsx

@@ -2,7 +2,7 @@ import { cn } from "@/lib/utils"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
 import { type VariantProps, cva } from "class-variance-authority"
 import { X } from "lucide-react"
-import * as React from "react"
+import { ComponentPropsWithoutRef, Dispatch, SetStateAction, forwardRef, ComponentRef, HTMLAttributes } from "react"
 
 const Sheet = SheetPrimitive.Root
 
@@ -30,13 +30,13 @@ const sheetVariants = cva(
 )
 
 interface SheetContentProps
-    extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    extends ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
         VariantProps<typeof sheetVariants> {
-    setOpen: React.Dispatch<React.SetStateAction<boolean>>
+    setOpen: Dispatch<SetStateAction<boolean>>
 }
 
-const SheetContent = React.forwardRef<
-    React.ComponentRef<typeof SheetPrimitive.Content>,
+const SheetContent = forwardRef<
+    ComponentRef<typeof SheetPrimitive.Content>,
     SheetContentProps
 >(({ side = "right", className, children, setOpen, ...props }, ref) => (
     <SheetPortal>
@@ -60,12 +60,12 @@ const SheetContent = React.forwardRef<
 ))
 SheetContent.displayName = SheetPrimitive.Content.displayName
 
-const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+const SheetHeader = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
     <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
 )
 SheetHeader.displayName = "SheetHeader"
 
-const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+const SheetFooter = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
     <div
         className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
         {...props}
@@ -73,9 +73,9 @@ const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElemen
 )
 SheetFooter.displayName = "SheetFooter"
 
-const SheetTitle = React.forwardRef<
-    React.ComponentRef<typeof SheetPrimitive.Title>,
-    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+const SheetTitle = forwardRef<
+    ComponentRef<typeof SheetPrimitive.Title>,
+    ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
 >(({ className, ...props }, ref) => (
     <SheetPrimitive.Title
         ref={ref}
@@ -85,9 +85,9 @@ const SheetTitle = React.forwardRef<
 ))
 SheetTitle.displayName = "SheetTitle"
 
-const SheetDescription = React.forwardRef<
-    React.ComponentRef<typeof SheetPrimitive.Description>,
-    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+const SheetDescription = forwardRef<
+    ComponentRef<typeof SheetPrimitive.Description>,
+    ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
 >(({ className, ...props }, ref) => (
     <SheetPrimitive.Description
         ref={ref}