shadcn-phone-input

The PhoneInput component is designed to integrate seamlessly with react-hook-form and zod for form validation. To ensure valid phone numbers, it is recommended to use the isValidPhoneNumber utility from react-phone-number-input within your Zod schema's .refine() method.

Implementation Steps:

1. Define a Zod schema using .refine(isValidPhoneNumber, ...) to validate the phone string.
2. Initialize useForm with the zodResolver.
3. Use the FormField component from Shadcn UI to wrap the PhoneInput.
4. Spread the field properties ({...field}) onto the PhoneInput component to connect it to the form state.

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { isValidPhoneNumber } from "react-phone-number-input";
import { z } from "zod";

import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { PhoneInput } from "@/components/ui/phone-input";
import { toast } from "@/components/ui/use-toast";

const FormSchema = z.object({
  phone: 
    z
    .string()
    .refine(isValidPhoneNumber, { message: "Invalid phone number" }),
});

export default function Hero() {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      phone: "",
    },
  });

  function onSubmit(data: z.infer<typeof FormSchema>) {
    toast({
      title: "You submitted the following values:",
      description: (
        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
        </pre>
      ),
    });
  }

  return (
    <Form {...form}>
      <form
        onSubmit={form.handleSubmit(onSubmit)}
        className="flex flex-col items-start space-y-8"
      >
        <FormField
          control={form.control}
          name="phone"
          render={({ field }) => (
            <FormItem className="flex flex-col items-start">
              <FormLabel className="text-left">Phone Number</FormLabel>
              <FormControl className="w-full">
                <PhoneInput placeholder="Enter a phone number" {...field} />
              </FormControl>
              <FormDescription className="text-left">
                Enter a phone number
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  );
}

The PhoneInput component is a styled wrapper around react-phone-number-input that integrates with shadcn/ui components (Button, Command, Input, Popover, ScrollArea). It provides a unified interface for selecting a country flag and entering a phone number.

Key Features

• Country Selection: Uses a Popover with a searchable Command menu to select countries.
• Visual Feedback: Displays the country flag and calling code.
• Input Integration: Uses a custom InputComponent styled to connect seamlessly with the country selector.
• Value Handling: The onChange callback is coerced to return an empty string "" instead of undefined when a valid number is not present, making it easier to work with controlled components.

import { PhoneInput } from "./path-to-your-component";
import { useState } from "react";

export function MyForm() {
  const [value, setValue] = useState<string | undefined>();

  return (
    <PhoneInput
      value={value}
      onChange={(val) => setValue(val)}
    />
  );
}

This project uses Prettier with two specific plugins to maintain code style: @ianvs/prettier-plugin-sort-imports for organized import statements and prettier-plugin-tailwindcss for class sorting.

Key configurations include:

• tailwindFunctions: Specifies custom functions that contain Tailwind classes (e.g., cn, cva).
• importOrder: Defines the sequence of import groups.
• importOrderParserPlugins: Enables parsing for typescript, jsx, and decorators-legacy to ensure correct import sorting in complex files.

const config = {
  plugins: [
    "@ianvs/prettier-plugin-sort-imports",
    "prettier-plugin-tailwindcss",
  ],
  tailwindFunctions: ["cn", "cva"],
  importOrder: [
    "<TYPES>",
    "^(react/(.*)$)|^(react$)",
    "^(next/(.*)$)|^(next$)",
    "<THIRD_PARTY_MODULES>",
    "",
    "<TYPES>^@nmoon",
    "^@/(.*)$",
    "",
    "<TYPES>^[.|..|~]",
    "^~/",
    "^[../]",
    "^[./]",
  ],
  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
  importOrderTypeScriptVersion: "4.4.0",
};

export default config;