lots of cleaning up

t3-oss · Nov 15, 2024 · 28ca02b · 28ca02b
1 parent 1544145
commit 28ca02b
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 108 deletions.
diff --git a/packages/ui/src/button.tsx b/packages/ui/src/button.tsx
@@ -1,5 +1,4 @@
 import type { VariantProps } from "class-variance-authority";
-import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 
@@ -36,14 +35,12 @@ const buttonVariants = cva(
 );
 
 interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends React.ComponentProps<"button">,
     VariantProps<typeof buttonVariants> {
-  ref?: React.Ref<HTMLButtonElement>;
   asChild?: boolean;
 }
 
 function Button({
-  ref,
   className,
   variant,
   size,
@@ -54,7 +51,6 @@ function Button({
   return (
     <Comp
       className={cn(buttonVariants({ variant, size, className }))}
-      ref={ref}
       {...props}
     />
   );

diff --git a/packages/ui/src/dropdown-menu.tsx b/packages/ui/src/dropdown-menu.tsx
@@ -1,6 +1,14 @@
-"use client";
-
-import * as React from "react";
+import type {
+  DropdownMenuCheckboxItemProps,
+  DropdownMenuContentProps,
+  DropdownMenuItemProps,
+  DropdownMenuLabelProps,
+  DropdownMenuRadioItemProps,
+  DropdownMenuSeparatorProps,
+  DropdownMenuSubContentProps,
+  DropdownMenuSubTriggerProps,
+} from "@radix-ui/react-dropdown-menu";
+import type { ComponentProps } from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import {
   CheckIcon,
@@ -18,17 +26,15 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 function DropdownMenuSubTrigger({
-  ref,
   className,
   inset,
   children,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+}: DropdownMenuSubTriggerProps & {
   inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.SubTrigger
-      ref={ref}
       className={cn(
         "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
         inset && "pl-8",
@@ -43,13 +49,11 @@ function DropdownMenuSubTrigger({
 }
 
 function DropdownMenuSubContent({
-  ref,
   className,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+}: DropdownMenuSubContentProps) {
   return (
     <DropdownMenuPrimitive.SubContent
-      ref={ref}
       className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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",
         className,
@@ -60,15 +64,13 @@ function DropdownMenuSubContent({
 }
 
 function DropdownMenuContent({
-  ref,
   className,
   sideOffset = 4,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+}: DropdownMenuContentProps) {
   return (
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Content
-        ref={ref}
         sideOffset={sideOffset}
         className={cn(
           "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
@@ -82,16 +84,14 @@ function DropdownMenuContent({
 }
 
 function DropdownMenuItem({
-  ref,
   className,
   inset,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+}: DropdownMenuItemProps & {
   inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.Item
-      ref={ref}
       className={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",
         inset && "pl-8",
@@ -103,22 +103,16 @@ function DropdownMenuItem({
 }
 
 function DropdownMenuCheckboxItem({
-  ref,
   className,
   children,
-  checked,
   ...props
-}: React.ComponentProps<
-  typeof DropdownMenuPrimitive.DropdownMenuCheckboxItem
->) {
+}: DropdownMenuCheckboxItemProps) {
   return (
     <DropdownMenuPrimitive.CheckboxItem
-      ref={ref}
       className={cn(
         "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         className,
       )}
-      checked={checked}
       {...props}
     >
       <span className="absolute left-2 flex size-3.5 items-center justify-center">
@@ -132,14 +126,12 @@ function DropdownMenuCheckboxItem({
 }
 
 function DropdownMenuRadioItem({
-  ref,
   className,
   children,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+}: DropdownMenuRadioItemProps) {
   return (
     <DropdownMenuPrimitive.RadioItem
-      ref={ref}
       className={cn(
         "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         className,
@@ -157,16 +149,14 @@ function DropdownMenuRadioItem({
 }
 
 function DropdownMenuLabel({
-  ref,
   className,
   inset,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+}: DropdownMenuLabelProps & {
   inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.Label
-      ref={ref}
       className={cn(
         "px-2 py-1.5 text-sm font-semibold",
         inset && "pl-8",
@@ -178,23 +168,18 @@ function DropdownMenuLabel({
 }
 
 function DropdownMenuSeparator({
-  ref,
   className,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+}: DropdownMenuSeparatorProps) {
   return (
     <DropdownMenuPrimitive.Separator
-      ref={ref}
       className={cn("-mx-1 my-1 h-px bg-muted", className)}
       {...props}
     />
   );
 }
 
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) {
+function DropdownMenuShortcut({ className, ...props }: ComponentProps<"span">) {
   return (
     <span
       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}

diff --git a/packages/ui/src/form.tsx b/packages/ui/src/form.tsx
@@ -1,14 +1,16 @@
 "use client";
 
-import type * as LabelPrimitive from "@radix-ui/react-label";
+import type { LabelProps } from "@radix-ui/react-label";
+import type { SlotProps } from "@radix-ui/react-slot";
+import type { ComponentProps } from "react";
 import type {
   ControllerProps,
   FieldPath,
   FieldValues,
   UseFormProps,
 } from "react-hook-form";
 import type { ZodType, ZodTypeDef } from "zod";
-import * as React from "react";
+import { createContext, use, useId } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Slot } from "@radix-ui/react-slot";
 import {
@@ -45,9 +47,7 @@ interface FormFieldContextValue<
   name: TName;
 }
 
-const FormFieldContext = React.createContext<FormFieldContextValue | null>(
-  null,
-);
+const FormFieldContext = createContext<FormFieldContextValue | null>(null);
 
 function FormField<
   TFieldValues extends FieldValues = FieldValues,
@@ -61,15 +61,15 @@ function FormField<
 }
 
 function useFormField() {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
 
+  const fieldContext = use(FormFieldContext);
   if (!fieldContext) {
     throw new Error("useFormField should be used within <FormField>");
   }
   const fieldState = getFieldState(fieldContext.name, formState);
 
+  const itemContext = use(FormItemContext);
   const { id } = itemContext;
 
   return {
@@ -86,48 +86,38 @@ interface FormItemContextValue {
   id: string;
 }
 
-const FormItemContext = React.createContext<FormItemContextValue>(
+const FormItemContext = createContext<FormItemContextValue>(
   {} as FormItemContextValue,
 );
 
-function FormItem({
-  ref,
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }) {
-  const id = React.useId();
+function FormItem({ className, ...props }: ComponentProps<"div">) {
+  const id = useId();
 
   return (
     <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      <div className={cn("space-y-2", className)} {...props} />
     </FormItemContext.Provider>
   );
 }
 
-function FormLabel({
-  ref,
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+function FormLabel({ className, ...props }: LabelProps) {
   const { error, formItemId } = useFormField();
 
   return (
     <Label
-      ref={ref}
-      className={cn(error && "text-destructive", className)}
       htmlFor={formItemId}
+      className={cn(error && "text-destructive", className)}
       {...props}
     />
   );
 }
 
-function FormControl({ ref, ...props }: React.ComponentProps<typeof Slot>) {
+function FormControl({ ...props }: SlotProps) {
   const { error, formItemId, formDescriptionId, formMessageId } =
     useFormField();
 
   return (
     <Slot
-      ref={ref}
       id={formItemId}
       aria-describedby={
         !error
@@ -140,43 +130,28 @@ function FormControl({ ref, ...props }: React.ComponentProps<typeof Slot>) {
   );
 }
 
-function FormDescription({
-  ref,
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLParagraphElement> & {
-  ref?: React.Ref<HTMLParagraphElement>;
-}) {
+function FormDescription({ className, ...props }: ComponentProps<"p">) {
   const { formDescriptionId } = useFormField();
 
   return (
     <p
-      ref={ref}
       id={formDescriptionId}
       className={cn("text-[0.8rem] text-muted-foreground", className)}
       {...props}
     />
   );
 }
 
-function FormMessage({
-  ref,
-  className,
-  children,
-  ...props
-}: React.HTMLAttributes<HTMLParagraphElement> & {
-  ref?: React.Ref<HTMLParagraphElement>;
-}) {
+function FormMessage({ className, children, ...props }: ComponentProps<"p">) {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error.message) : children;
 
   if (!body) {
-    return null;
+    return;
   }
 
   return (
     <p
-      ref={ref}
       id={formMessageId}
       className={cn("text-[0.8rem] font-medium text-destructive", className)}
       {...props}

diff --git a/packages/ui/src/input.tsx b/packages/ui/src/input.tsx
@@ -1,16 +1,10 @@
-import * as React from "react";
+import type { ComponentProps } from "react";
 
 import { cn } from "@acme/ui";
 
-type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
-  ref?: React.Ref<HTMLInputElement>;
-};
-
-function Input({ ref, className, type, ...props }: InputProps) {
+function Input({ className, ...props }: ComponentProps<"input">) {
   return (
     <input
-      ref={ref}
-      type={type}
       className={cn(
         "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
         className,