MaskedInput

"use client";

import { useState } from "react";
import {
  useForm,
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  Form,
  Input,
  FormError,
  MaskedInput,
  FormSubmit
} from "@pimolu/react";

interface DeliveryValues {
  recipient: string;
  phone: string;
  postalCode: string;
}

function DeliveryForm() {
  const [confirmed, setConfirmed] = useState(false);
  const form = useForm<DeliveryValues>({
    defaultValues: {
      recipient: "",
      phone: "",
      postalCode: "",
    },
    validate: (values) => {
      const errors: Partial<Record<keyof DeliveryValues, string>> = {};
      if(!values.recipient.trim()) {
        errors.recipient = "Who should we ask for?";
      }
      if(values.phone.replace(/\D/g, "").length < 10) {
        errors.phone = "Enter the full 10-digit number.";
      }
      if(values.postalCode.replace(/[^a-z0-9]/gi, "").length < 6) {
        errors.postalCode = "Enter a complete postal code.";
      }
      return errors;
    },
    onSubmit: async () => {
      await new Promise((resolve) => setTimeout(resolve, 600));
      setConfirmed(true);
    },
  });
  return (
    <Card>
      <CardHeader>
        <CardTitle>Delivery contact</CardTitle>
        <CardDescription>
          MaskedInput is controlled here and writes into the same form
          state as the regular inputs.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Form form={form} className="grid gap-5 min-w-0">
          <Input label="Recipient" required fullWidth {...form.register("recipient")} />
          <FormError name="recipient" />
          <MaskedInput
            label="Phone"
            mask="(999) 999-9999"
            required
            fullWidth
            value={form.values.phone}
            onValueChange={(value) => form.setValue(
              "phone",
              value
            )}
            invalid={Boolean(form.errors.phone)}
            aria-describedby={form.errors.phone
              ? `${form.formId}-phone-error`
              : undefined}
            helperText="We only call on delivery day."
          />
          <FormError name="phone" />
          <MaskedInput
            label="Postal code"
            mask="a9a 9a9"
            required
            fullWidth
            value={form.values.postalCode}
            onValueChange={(value) => form.setValue(
              "postalCode",
              value
            )}
            invalid={Boolean(form.errors.postalCode)}
            aria-describedby={form.errors.postalCode
              ? `${form.formId}-postalCode-error`
              : undefined}
          />
          <FormError name="postalCode" />
          <FormSubmit>Confirm delivery</FormSubmit>
          {
            confirmed && (<p role="status">
              Delivery contact saved for {form.values.recipient}.
            </p>)
          }
        </Form>
      </CardContent>
    </Card>
  );
}

export function DemoExample() {
  return (<DeliveryForm />);
}