From 319b149eba6e911f95a673c0bcfd18d1754490da Mon Sep 17 00:00:00 2001
From: Jake Ruesink <jaruesink@gmail.com>
Date: Mon, 2 Dec 2024 15:26:17 -0600
Subject: [PATCH] chore: fix input safari zoom issue for shadcn inputs, and
 updated import sort order

---
 .../src/ui/dropdown-menu-select.tsx           | 86 +++++++++++--------
 packages/components/src/ui/dropdown-menu.tsx  |  2 +-
 packages/components/src/ui/input-otp.tsx      |  4 +-
 packages/components/src/ui/input.tsx          |  4 +-
 packages/components/src/ui/label.tsx          |  2 +-
 packages/components/src/ui/popover.tsx        |  2 +-
 packages/components/src/ui/radio-group.tsx    |  8 +-
 packages/components/src/ui/switch.tsx         |  9 +-
 packages/components/src/ui/textarea.tsx       | 18 +++-
 9 files changed, 80 insertions(+), 55 deletions(-)

diff --git a/packages/components/src/ui/dropdown-menu-select.tsx b/packages/components/src/ui/dropdown-menu-select.tsx
index 7bd69310..a3b5f466 100644
--- a/packages/components/src/ui/dropdown-menu-select.tsx
+++ b/packages/components/src/ui/dropdown-menu-select.tsx
@@ -1,14 +1,22 @@
-import { forwardRef, type ElementRef, type ComponentPropsWithoutRef, type ReactNode } from 'react'
 // biome-ignore lint/style/noNamespaceImport: from Radix
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { type FieldComponents, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./form"
-import { Button } from './button'
-import { DropdownMenuContent } from './dropdown-menu'
-import type { Control, FieldPath, FieldValues } from "react-hook-form";
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { type ComponentPropsWithoutRef, type ElementRef, type ReactNode, forwardRef } from 'react';
+import type { Control, FieldPath, FieldValues } from 'react-hook-form';
+import { Button } from './button';
+import { DropdownMenuContent } from './dropdown-menu';
+import {
+  type FieldComponents,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from './form';
 
 export interface DropdownMenuSelectProps<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > extends Omit<ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>, 'onChange' | 'value'> {
   control?: Control<TFieldValues>;
   name: TName;
@@ -21,35 +29,37 @@ export interface DropdownMenuSelectProps<
   components?: Partial<FieldComponents>;
 }
 
-export const DropdownMenuSelect = forwardRef<
-  ElementRef<typeof DropdownMenuPrimitive.Root>,
-  DropdownMenuSelectProps
->(({ control, name, label, description, children, className, labelClassName, dropdownClassName, components, ...props }, ref) => {
-  return (
-    <FormField
-      control={control}
-      name={name}
-      render={({ field, fieldState }) => (
-        <FormItem className={className}>
-          {label && <FormLabel Component={components?.FormLabel} className={labelClassName}>{label}</FormLabel>}
-          <FormControl>
-            <DropdownMenuPrimitive.Root {...field} {...props}>
-              <DropdownMenuPrimitive.Trigger asChild>
-                <Button className={dropdownClassName}>
-                  {field.value ? field.value : "Select an option"}
-                </Button>
-              </DropdownMenuPrimitive.Trigger>
-              <DropdownMenuContent>
-                {children}
-              </DropdownMenuContent>
-            </DropdownMenuPrimitive.Root>
-          </FormControl>
-          {description && <FormDescription Component={components?.FormDescription}>{description}</FormDescription>}
-          <FormMessage Component={components?.FormMessage}>{fieldState.error?.message}</FormMessage>
-        </FormItem>
-      )}
-    />
-  );
-});
+export const DropdownMenuSelect = forwardRef<ElementRef<typeof DropdownMenuPrimitive.Root>, DropdownMenuSelectProps>(
+  (
+    { control, name, label, description, children, className, labelClassName, dropdownClassName, components, ...props },
+    ref,
+  ) => {
+    return (
+      <FormField
+        control={control}
+        name={name}
+        render={({ field, fieldState }) => (
+          <FormItem className={className}>
+            {label && (
+              <FormLabel Component={components?.FormLabel} className={labelClassName}>
+                {label}
+              </FormLabel>
+            )}
+            <FormControl>
+              <DropdownMenuPrimitive.Root {...field} {...props}>
+                <DropdownMenuPrimitive.Trigger asChild>
+                  <Button className={dropdownClassName}>{field.value ? field.value : 'Select an option'}</Button>
+                </DropdownMenuPrimitive.Trigger>
+                <DropdownMenuContent>{children}</DropdownMenuContent>
+              </DropdownMenuPrimitive.Root>
+            </FormControl>
+            {description && <FormDescription Component={components?.FormDescription}>{description}</FormDescription>}
+            <FormMessage Component={components?.FormMessage}>{fieldState.error?.message}</FormMessage>
+          </FormItem>
+        )}
+      />
+    );
+  },
+);
 
-DropdownMenuSelect.displayName = "DropdownMenuSelect";
\ No newline at end of file
+DropdownMenuSelect.displayName = 'DropdownMenuSelect';
diff --git a/packages/components/src/ui/dropdown-menu.tsx b/packages/components/src/ui/dropdown-menu.tsx
index 39ce5ada..89388a2d 100644
--- a/packages/components/src/ui/dropdown-menu.tsx
+++ b/packages/components/src/ui/dropdown-menu.tsx
@@ -1,7 +1,7 @@
-import { forwardRef, type ElementRef, type ComponentPropsWithoutRef, type HTMLAttributes } from 'react';
 // biome-ignore lint/style/noNamespaceImport: from Radix
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { Check, ChevronRight, Circle } from 'lucide-react';
+import { type ComponentPropsWithoutRef, type ElementRef, type HTMLAttributes, forwardRef } from 'react';
 
 import { cn } from '../../lib/utils';
 
diff --git a/packages/components/src/ui/input-otp.tsx b/packages/components/src/ui/input-otp.tsx
index d18c3744..5e379959 100644
--- a/packages/components/src/ui/input-otp.tsx
+++ b/packages/components/src/ui/input-otp.tsx
@@ -1,7 +1,7 @@
-import type { Control, FieldValues } from 'react-hook-form';
-import { forwardRef, type ElementRef, type ComponentPropsWithoutRef, useContext } from 'react';
 import { OTPInput, OTPInputContext, type OTPInputProps } from 'input-otp';
 import { Dot } from 'lucide-react';
+import { type ComponentPropsWithoutRef, type ElementRef, forwardRef, useContext } from 'react';
+import type { Control, FieldValues } from 'react-hook-form';
 import { cn } from '../../lib/utils';
 import {
   type FieldComponents,
diff --git a/packages/components/src/ui/input.tsx b/packages/components/src/ui/input.tsx
index 62d15954..8da061c4 100644
--- a/packages/components/src/ui/input.tsx
+++ b/packages/components/src/ui/input.tsx
@@ -1,14 +1,14 @@
 import { type InputHTMLAttributes, forwardRef } from 'react';
 import { cn } from '../../lib/utils';
 
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> { }
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {}
 
 const Input = forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
   return (
     <input
       type={type}
       className={cn(
-        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-10 w-full text-base sm:text-sm rounded-md border border-input bg-background px-3 py-2 ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       ref={ref}
diff --git a/packages/components/src/ui/label.tsx b/packages/components/src/ui/label.tsx
index 7ab0fb93..ebf6d02e 100644
--- a/packages/components/src/ui/label.tsx
+++ b/packages/components/src/ui/label.tsx
@@ -1,7 +1,7 @@
-import { forwardRef, type ElementRef, type ComponentPropsWithoutRef } from 'react';
 // biome-ignore lint/style/noNamespaceImport: from Radix
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { type VariantProps, cva } from 'class-variance-authority';
+import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react';
 
 import { cn } from '../../lib/utils';
 
diff --git a/packages/components/src/ui/popover.tsx b/packages/components/src/ui/popover.tsx
index aa50100b..f740f618 100644
--- a/packages/components/src/ui/popover.tsx
+++ b/packages/components/src/ui/popover.tsx
@@ -1,6 +1,6 @@
-import { forwardRef, type ElementRef, type ComponentPropsWithoutRef } from 'react';
 // biome-ignore lint/style/noNamespaceImport: from Radix
 import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react';
 
 import { cn } from '../../lib/utils';
 
diff --git a/packages/components/src/ui/radio-group.tsx b/packages/components/src/ui/radio-group.tsx
index 906da6ae..c5a5e036 100644
--- a/packages/components/src/ui/radio-group.tsx
+++ b/packages/components/src/ui/radio-group.tsx
@@ -1,6 +1,8 @@
 // biome-ignore lint/style/noNamespaceImport: from Radix
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { Circle } from 'lucide-react';
+import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react';
+import type { Control, FieldPath, FieldValues } from 'react-hook-form';
 import { cn } from '../../lib/utils';
 import {
   type FieldComponents,
@@ -11,8 +13,6 @@ import {
   FormLabel,
   FormMessage,
 } from './form';
-import type { Control, FieldPath, FieldValues } from 'react-hook-form';
-import { forwardRef, type ElementRef, type ComponentPropsWithoutRef } from 'react';
 
 const RadioGroup = forwardRef<
   ElementRef<typeof RadioGroupPrimitive.Root>,
@@ -67,7 +67,9 @@ const RadioGroupField = forwardRef<HTMLDivElement, RadioGroupFieldProps>(
               <RadioGroup ref={field.ref} onValueChange={field.onChange} defaultValue={field.value} {...props} />
             </FormControl>
             {description && <FormDescription Component={components?.FormDescription}>{description}</FormDescription>}
-            {fieldState.error && <FormMessage Component={components?.FormMessage}>{fieldState.error.message}</FormMessage>}
+            {fieldState.error && (
+              <FormMessage Component={components?.FormMessage}>{fieldState.error.message}</FormMessage>
+            )}
           </FormItem>
         )}
       />
diff --git a/packages/components/src/ui/switch.tsx b/packages/components/src/ui/switch.tsx
index a91172ed..5683d1a2 100644
--- a/packages/components/src/ui/switch.tsx
+++ b/packages/components/src/ui/switch.tsx
@@ -1,9 +1,9 @@
-import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
 // biome-ignore lint/style/noNamespaceImport: from Radix
 import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { type ComponentPropsWithoutRef, type ReactNode, forwardRef } from 'react';
+import type { Control, FieldPath, FieldValues } from 'react-hook-form';
 import { cn } from '../../lib/utils';
 import { type FieldComponents, FormControl, FormDescription, FormField, FormItem, FormLabel } from './form';
-import type { Control, FieldPath, FieldValues } from 'react-hook-form';
 
 export interface SwitchProps<
   TFieldValues extends FieldValues = FieldValues,
@@ -23,7 +23,10 @@ const Switch = forwardRef<HTMLDivElement, SwitchProps>(
       control={control}
       name={name}
       render={({ field }) => (
-        <FormItem className={cn('flex flex-row items-center justify-between rounded-lg border p-4', className)} ref={ref}>
+        <FormItem
+          className={cn('flex flex-row items-center justify-between rounded-lg border p-4', className)}
+          ref={ref}
+        >
           <div className="space-y-0.5">
             {label && <FormLabel Component={components?.FormLabel}>{label}</FormLabel>}
             {description && <FormDescription Component={components?.FormDescription}>{description}</FormDescription>}
diff --git a/packages/components/src/ui/textarea.tsx b/packages/components/src/ui/textarea.tsx
index 4c05e9d1..ee4bc1c2 100644
--- a/packages/components/src/ui/textarea.tsx
+++ b/packages/components/src/ui/textarea.tsx
@@ -1,11 +1,19 @@
 import { type TextareaHTMLAttributes, forwardRef } from 'react';
+import type { Control, FieldPath, FieldValues } from 'react-hook-form';
 import { cn } from '../../lib/utils';
-import { FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, type FieldComponents } from './form';
-import type { Control, FieldPath, FieldValues } from "react-hook-form";
+import {
+  type FieldComponents,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from './form';
 
 export interface TextareaProps<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'name'> {
   control?: Control<TFieldValues>;
   name: TName;
@@ -35,7 +43,9 @@ export const Textarea = forwardRef<HTMLDivElement, TextareaProps>(
               />
             </FormControl>
             {description && <FormDescription Component={components?.FormDescription}>{description}</FormDescription>}
-            {fieldState.error && <FormMessage Component={components?.FormMessage}>{fieldState.error.message}</FormMessage>}
+            {fieldState.error && (
+              <FormMessage Component={components?.FormMessage}>{fieldState.error.message}</FormMessage>
+            )}
           </FormItem>
         )}
       />