Phone input

import { PhoneInput } from "@bosunkit/components/phone-input";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "A crew member's phone, required, starting in the vessel's country: the country button opens a list searched by " +
  "name or calling code, the number groups as it is typed, a pasted international number brings its country, and " +
  "the page receives E.164; beside it an emergency contact's French number.";

export default function Showcase(): ReactElement {
  const [phone, setPhone]: [string, Dispatch<SetStateAction<string>>] = useState<string>("");
  return (
    <div style={{ width: "100%", maxWidth: 420, display: "grid", gap: "var(--space-lg)" }}>
      <PhoneInput
        label="Phone"
        required
        defaultCountry="GB"
        value={phone}
        onValueChange={setPhone}
        hint="Paste +31 6 12345678 to see the country follow."
      />
      <PhoneInput label="Emergency phone" defaultValue="+33639981234" />
      <output style={{ fontSize: 12, color: "var(--text-dim)" }}>
        The page receives: {phone === "" ? "no number yet" : phone}
      </output>
    </div>
  );
}

import { PhoneInput } from "@bosunkit/components/phone-input";
import type { ReactElement } from "react";

export const description: string =
  "A marina office's switchboard number with its extension, which goes in an input of its own after the number.";

export default function Extension(): ReactElement {
  return <PhoneInput label="Marina office" defaultValue="+442079460123" showExtension defaultExtension="214" />;
}

import { PhoneInput } from "@bosunkit/components/phone-input";
import type { ReactElement } from "react";

export const description: string =
  "An empty number in the vessel's country, which the page passes as `defaultCountry`; a phone shows its dial pad.";

export default function Empty(): ReactElement {
  return <PhoneInput label="Phone" defaultCountry="NL" />;
}

import { PhoneInput } from "@bosunkit/components/phone-input";
import type { ReactElement } from "react";

export const description: string =
  "A held E.164 number shows in its own country, its national digits grouped for reading.";

export default function Filled(): ReactElement {
  return <PhoneInput label="Phone" defaultValue="+447700900123" />;
}

import { formatNational, nationalDigits, toE164 } from "@bosunkit/components/phone-input";
import type { ReactElement } from "react";

export const description: string =
  "Numbers as the crew write them at home, and the E.164 form the field reports: the trunk 0 goes, except in Italy, " +
  "where it is part of the number.";

interface Written {
  readonly country: string;
  readonly text: string;
}

const NUMBERS: readonly Written[] = [
  { country: "GB", text: "07700 900123" },
  { country: "NL", text: "06-12345678" },
  { country: "FR", text: "06 39 98 12 34" },
  { country: "US", text: "(202) 555-0123" },
  { country: "IT", text: "06 1234 5678" },
];

export default function NationalForms(): ReactElement {
  return (
    <table style={{ fontFamily: "var(--font-mono)", fontSize: 13, borderCollapse: "collapse" }}>
      <tbody>
        {NUMBERS.map((number: Written): ReactElement => {
          const digits: string = nationalDigits(number.text, number.country);
          return (
            <tr key={number.country}>
              <td style={{ padding: "var(--space-xs) var(--space-md)", color: "var(--text-dim)" }}>{number.country}</td>
              <td style={{ padding: "var(--space-xs) var(--space-md)" }}>{number.text}</td>
              <td style={{ padding: "var(--space-xs) var(--space-md)" }}>{formatNational(digits, number.country)}</td>
              <td style={{ padding: "var(--space-xs) var(--space-md)" }}>{toE164(number.country, digits)}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

import { PhoneInput } from "@bosunkit/components/phone-input";
import type { ReactElement } from "react";

export const description: string =
  "A whole number names its kind and the country it belongs to under the field, here a Dutch mobile.";

export default function Kind(): ReactElement {
  return <PhoneInput label="Phone" defaultValue="+31612345678" />;
}

import { PhoneInput } from "@bosunkit/components/phone-input";
import type { ReactElement } from "react";

export const description: string =
  "An E.164 number has at most 15 digits with its calling code; past that the field says how many it has.";

export default function Invalid(): ReactElement {
  return (
    <PhoneInput
      label="Phone"
      defaultValue="+4477009001234567"
      error="A phone number has at most 15 digits with the country code; this one has 16. Check the number."
    />
  );
}

import { PhoneInput } from "@bosunkit/components/phone-input";
import type { ReactElement } from "react";

export const description: string = "A read-only number: the country button does not open.";

export default function ReadOnly(): ReactElement {
  return <PhoneInput label="Marina" defaultValue="+351912345678" readOnly />;
}

import { PhoneInput } from "@bosunkit/components/phone-input";
import type { ReactElement } from "react";

export const description: string = "A disabled phone field.";

export default function Disabled(): ReactElement {
  return <PhoneInput label="Phone" defaultValue="+31612345678" disabled />;
}

import { FormField } from "@bosunkit/components/form-field";
import { PhoneInput } from "@bosunkit/components/phone-input";
import type { ReactElement } from "react";

export const description: string = "Inside a form field, named by `aria-label`.";

export default function InFormField(): ReactElement {
  return (
    <FormField label="Shore contact">
      <PhoneInput aria-label="Shore contact phone" defaultCountry="DE" />
    </FormField>
  );
}

import { PhoneInput } from "@bosunkit/components/phone-input";
import type { ReactElement } from "react";

export const description: string =
  "Copy one of these lines, then focus the field: where the browser lets the page read the clipboard, a paste button named by the number appears; Ctrl+V works everywhere. An international number brings its country, and a national one stays in the field's country.";

const SAMPLES: readonly string[] = [
  "tel:+31612345678",
  "0044 (0)7700 900123",
  "Mobile: 07700 900123",
  "tel:+33-6-39-98-12-34;ext=2",
  "Hello",
];

export default function Paste(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: 520, display: "grid", gap: "var(--space-md)" }}>
      <PhoneInput label="Phone" defaultCountry="GB" />
      <ul style={{ margin: 0, paddingLeft: "var(--space-lg)", fontFamily: "var(--font-mono)", fontSize: 12 }}>
        {SAMPLES.map((sample: string): ReactElement => (
          <li key={sample} style={{ userSelect: "all", overflowWrap: "anywhere" }}>
            {sample}
          </li>
        ))}
      </ul>
    </div>
  );
}