refac: improve type definitions in PhoneInput component

omeralpi · Feb 26, 2024 · 236c3b1 · 236c3b1
1 parent ffc5acb
commit 236c3b1
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 59 deletions.
diff --git a/README.md b/README.md
@@ -43,6 +43,9 @@ const FormSchema = z.object({
 export default function Hero() {
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
+    defaultValues: {
+      phone: "",
+    },
   });
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
@@ -60,7 +63,8 @@ export default function Hero() {
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmit)}
-        className="space-y-8 flex flex-col items-start">
+        className="space-y-8 flex flex-col items-start"
+      >
         <FormField
           control={form.control}
           name="phone"

diff --git a/app/(home)/sections/variants.tsx b/app/(home)/sections/variants.tsx
@@ -1,6 +1,4 @@
 import { PhoneInput } from "@/components/ui/phone-input";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { cn } from "@/lib/utils";
 import React, { useState } from "react";
 import {
   Country,

diff --git a/components/ui/phone-input.tsx b/components/ui/phone-input.tsx
@@ -21,36 +21,34 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { cn } from "@/lib/utils";
 
 type PhoneInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> &
-  RPNInput.Props<typeof RPNInput.default> & {
+  Omit<RPNInput.Props<typeof RPNInput.default>, "onChange"> & {
+    onChange: (value: RPNInput.Value) => void;
     value: RPNInput.Value;
   };
 
-const PhoneInput: React.ForwardRefExoticComponent<
-  Omit<PhoneInputProps, "onChange"> & {
-    onChange: (value: RPNInput.Value) => void;
-  }
-> = React.forwardRef<React.ElementRef<typeof RPNInput.default>, PhoneInputProps>(
-  ({ className, onChange, ...props }, ref) => (
-    <RPNInput.default
-      ref={ref}
-      className={cn("flex", className)}
-      flagComponent={FlagComponent}
-      countrySelectComponent={CountrySelect}
-      inputComponent={InputComponent}
-      /**
-       * Handles the onChange event.
-       *
-       * react-phone-number-input might trigger the onChange event as undefined
-       * when a valid phone number is not entered. To prevent this,
-       * the value is coerced to an empty string.
-       *
-       * @param {E164Number | undefined} value - The entered value
-       */
-      onChange={(value) => onChange(value || "")}
-      {...props}
-    />
-  ),
-);
+const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> = React.forwardRef<
+  React.ElementRef<typeof RPNInput.default>,
+  PhoneInputProps
+>(({ className, onChange, ...props }, ref) => (
+  <RPNInput.default
+    ref={ref}
+    className={cn("flex", className)}
+    flagComponent={FlagComponent}
+    countrySelectComponent={CountrySelect}
+    inputComponent={InputComponent}
+    /**
+     * Handles the onChange event.
+     *
+     * react-phone-number-input might trigger the onChange event as undefined
+     * when a valid phone number is not entered. To prevent this,
+     * the value is coerced to an empty string.
+     *
+     * @param {E164Number | undefined} value - The entered value
+     */
+    onChange={(value) => onChange(value || "")}
+    {...props}
+  />
+));
 PhoneInput.displayName = "PhoneInput";
 
 const InputComponent = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => (

diff --git a/content/snippets/phone-input.mdx b/content/snippets/phone-input.mdx
@@ -34,38 +34,34 @@ type PhoneInputProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
   "onChange" | "value"
 > &
-  RPNInput.Props<typeof RPNInput.default> & {
+  Omit<RPNInput.Props<typeof RPNInput.default>, "onChange"> & {
+    onChange: (value: RPNInput.Value) => void;
     value: RPNInput.Value;
   };
 
-const PhoneInput: React.ForwardRefExoticComponent<
-  Omit<PhoneInputProps, "onChange"> & {
-    onChange: (value: RPNInput.Value) => void;
-  }
-> = React.forwardRef<
-  React.ElementRef<typeof RPNInput.default>,
-  PhoneInputProps
->(({ className, onChange, ...props }, ref) => (
-  <RPNInput.default
-    ref={ref}
-    placeholder="Enter a phone number"
-    className={cn("flex", className)}
-    flagComponent={FlagComponent}
-    countrySelectComponent={CountrySelect}
-    inputComponent={InputComponent}
-    /**
-     * Handles the onChange event.
-     *
-     * react-phone-number-input might trigger the onChange event as undefined
-     * when a valid phone number is not entered. To prevent this,
-     * the value is coerced to an empty string.
-     *
-     * @param {E164Number | undefined} value - The entered value
-     */
-    onChange={(value) => onChange(value || "")}
-    {...props}
-  />
-));
+const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> =
+  React.forwardRef<React.ElementRef<typeof RPNInput.default>, PhoneInputProps>(
+    ({ className, onChange, ...props }, ref) => (
+      <RPNInput.default
+        ref={ref}
+        className={cn("flex", className)}
+        flagComponent={FlagComponent}
+        countrySelectComponent={CountrySelect}
+        inputComponent={InputComponent}
+        /**
+         * Handles the onChange event.
+         *
+         * react-phone-number-input might trigger the onChange event as undefined
+         * when a valid phone number is not entered. To prevent this,
+         * the value is coerced to an empty string.
+         *
+         * @param {E164Number | undefined} value - The entered value
+         */
+        onChange={(value) => onChange(value || "")}
+        {...props}
+      />
+    ),
+  );
 PhoneInput.displayName = "PhoneInput";
 
 const InputComponent = React.forwardRef<HTMLInputElement, InputProps>(