@traky-app/ui 1.6.1 → 1.6.4

package/src/ui/phone-number-input.tsx

@@ -0,0 +1,253 @@
+"use client"
+
+import { IconCheck, IconSelector } from "@tabler/icons-react"
+import { useEffect, useMemo, useState } from "react"
+
+import {
+  DEFAULT_PHONE_COUNTRY_ISO,
+  getPhoneCountryByIso,
+  PHONE_COUNTRIES,
+  type PhoneCountry,
+} from "../lib/phone-countries"
+import {
+  buildPhoneE164,
+  digitsOnly,
+  isNationalNumberValidForCountry,
+  parsePhoneE164,
+  type ParsedPhone,
+} from "../lib/phone-e164"
+import { cn, commandFilterAccentInsensitive } from "../lib/utils"
+import { Button } from "./button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "./command"
+import { Input } from "./input"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "./popover"
+
+export type PhoneNumberValue = {
+  countryCode: string
+  countryName: string
+  dialCode: string
+  nationalNumber: string
+  e164: string
+  isValid: boolean
+}
+
+function sanitizeNational(country: PhoneCountry, raw: string): string {
+  let digits = digitsOnly(raw)
+  if (country.iso === "EC" && digits.startsWith("0")) {
+    digits = digits.slice(1)
+  }
+  return digits.slice(0, country.nationalMaxLength)
+}
+
+/** Acepta E.164 o dígitos nacionales (usa `defaultCountryIso` si no hay `+`). */
+function parseIncomingPhone(
+  raw: string,
+  defaultCountryIso: string,
+): ParsedPhone | null {
+  const trimmed = raw.trim()
+  if (!trimmed) {
+    return parsePhoneE164("", defaultCountryIso)
+  }
+  if (trimmed.startsWith("+") || trimmed.startsWith("00")) {
+    return parsePhoneE164(trimmed, defaultCountryIso)
+  }
+
+  const country =
+    getPhoneCountryByIso(defaultCountryIso) ??
+    getPhoneCountryByIso(DEFAULT_PHONE_COUNTRY_ISO)
+  if (!country) return null
+
+  const nationalNumber = sanitizeNational(country, trimmed)
+  return {
+    country,
+    nationalNumber,
+    e164: buildPhoneE164(country, nationalNumber),
+  }
+}
+
+function CountryFlag({ iso, name }: { iso: string; name: string }) {
+  const [visible, setVisible] = useState(true)
+  if (!visible || !iso) return null
+
+  return (
+    <img
+      src={`/assets/flags/${iso.toUpperCase()}.svg`}
+      alt=""
+      title={name}
+      width={22}
+      height={14}
+      className="h-[14px] w-[22px] shrink-0 rounded object-cover"
+      onError={() => setVisible(false)}
+    />
+  )
+}
+
+function toPhoneValue(
+  country: PhoneCountry,
+  nationalNumber: string,
+): PhoneNumberValue {
+  const digits = digitsOnly(nationalNumber)
+  return {
+    countryCode: country.iso,
+    countryName: country.name,
+    dialCode: country.dialCode,
+    nationalNumber: digits,
+    e164: buildPhoneE164(country, digits),
+    isValid: isNationalNumberValidForCountry(country, digits),
+  }
+}
+
+export type PhoneNumberInputProps = {
+  id?: string
+  /** Valor controlado en E.164 (`+593980061377`). */
+  value?: string
+  defaultCountryIso?: string
+  onChange?: (value: PhoneNumberValue) => void
+  disabled?: boolean
+  className?: string
+  placeholder?: string
+  searchPlaceholder?: string
+}
+
+export function PhoneNumberInput({
+  id,
+  value,
+  defaultCountryIso = DEFAULT_PHONE_COUNTRY_ISO,
+  onChange,
+  disabled = false,
+  className,
+  placeholder,
+  searchPlaceholder = "Buscar país…",
+}: PhoneNumberInputProps) {
+  const [open, setOpen] = useState(false)
+  const [countryIso, setCountryIso] = useState(() => {
+    const parsed = parseIncomingPhone(value ?? "", defaultCountryIso)
+    return parsed?.country.iso ?? defaultCountryIso
+  })
+  const [national, setNational] = useState(() => {
+    const parsed = parseIncomingPhone(value ?? "", defaultCountryIso)
+    return parsed?.nationalNumber ?? ""
+  })
+
+  const country = useMemo(
+    () =>
+      PHONE_COUNTRIES.find((c) => c.iso === countryIso) ??
+      PHONE_COUNTRIES.find((c) => c.iso === DEFAULT_PHONE_COUNTRY_ISO)!,
+    [countryIso],
+  )
+
+  useEffect(() => {
+    if (value == null) return
+    if (value === "") {
+      setNational("")
+      return
+    }
+    const parsed = parseIncomingPhone(value, defaultCountryIso)
+    if (!parsed) return
+    setCountryIso(parsed.country.iso)
+    setNational(parsed.nationalNumber)
+  }, [value, defaultCountryIso])
+
+  const emit = (nextCountry: PhoneCountry, nextNational: string) => {
+    const digits = sanitizeNational(nextCountry, nextNational)
+    setCountryIso(nextCountry.iso)
+    setNational(digits)
+    onChange?.(toPhoneValue(nextCountry, digits))
+  }
+
+  const resolvedPlaceholder =
+    placeholder ??
+    (country.nationalMinLength === country.nationalMaxLength
+      ? "9".repeat(country.nationalMaxLength)
+      : `${country.nationalMinLength}-${country.nationalMaxLength} dígitos`)
+
+  const isValid = isNationalNumberValidForCountry(country, national)
+
+  return (
+    <div className={cn("flex w-full items-stretch gap-2", className)}>
+      <Popover open={open} onOpenChange={disabled ? undefined : setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            disabled={disabled}
+            role="combobox"
+            aria-expanded={open}
+            aria-label={`País: ${country.name} ${country.dialCode}`}
+            className="h-10 w-[7.75rem] shrink-0 justify-between gap-1.5 px-2.5 font-normal"
+          >
+            <span className="flex min-w-0 items-center gap-1.5 overflow-hidden">
+              <CountryFlag iso={country.iso} name={country.name} />
+              <span className="truncate text-sm tabular-nums">
+                {country.dialCode}
+              </span>
+            </span>
+            <IconSelector className="size-3.5 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[min(100vw-2rem,18rem)] p-0" align="start">
+          <Command filter={commandFilterAccentInsensitive}>
+            <CommandInput placeholder={searchPlaceholder} />
+            <CommandList className="max-h-72">
+              <CommandEmpty>No se encontró el país.</CommandEmpty>
+              <CommandGroup heading={`${PHONE_COUNTRIES.length} países`}>
+                {PHONE_COUNTRIES.map((item) => (
+                  <CommandItem
+                    key={item.iso}
+                    value={`${item.name} ${item.iso} ${item.dialCode}`}
+                    onSelect={() => {
+                      setOpen(false)
+                      emit(item, national)
+                    }}
+                    className="gap-2"
+                  >
+                    <CountryFlag iso={item.iso} name={item.name} />
+                    <span className="min-w-0 flex-1 truncate">{item.name}</span>
+                    <span className="text-xs tabular-nums text-muted-foreground">
+                      {item.dialCode}
+                    </span>
+                    {country.iso === item.iso ? (
+                      <IconCheck className="size-4 shrink-0 text-primary" />
+                    ) : null}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+
+      <Input
+        id={id}
+        type="tel"
+        inputMode="numeric"
+        autoComplete="tel-national"
+        disabled={disabled}
+        value={national}
+        maxLength={country.nationalMaxLength}
+        placeholder={resolvedPlaceholder}
+        aria-invalid={national.length > 0 && !isValid}
+        className="h-10 flex-1"
+        onChange={(e) => emit(country, e.target.value)}
+      />
+    </div>
+  )
+}
+
+export function formatPhoneHint(country: PhoneCountry): string {
+  if (country.nationalMinLength === country.nationalMaxLength) {
+    return `Ingresa ${country.nationalMaxLength} dígitos después de ${country.dialCode}`
+  }
+  return `Ingresa entre ${country.nationalMinLength} y ${country.nationalMaxLength} dígitos después de ${country.dialCode}`
+}

package/src/ui/state-select.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { fetchStates } from "../lib/geo-locations";
+import type { GeoOption } from "../lib/geo-types";
+import { GeoSearchSelect } from "./geo-search-select";
+
+export type StateSelectProps = {
+  id?: string;
+  /** ISO-2 del país. Sin este código el selector queda inactivo. */
+  countryCode?: string | null;
+  /** Código o nombre controlado. `undefined` deja el selector sin controlar; `""` lo deja vacío. */
+  value?: string;
+  /** Código o nombre inicial cuando `value` no se pasa. */
+  defaultValue?: string;
+  onChange?: (option: GeoOption | null) => void;
+  disabled?: boolean;
+  className?: string;
+  placeholder?: string;
+  showCode?: boolean;
+};
+
+export function StateSelect({
+  id,
+  countryCode,
+  value,
+  defaultValue,
+  onChange,
+  disabled = false,
+  className,
+  placeholder = "Buscar estado, región o municipio…",
+  showCode = true,
+}: StateSelectProps) {
+  const cc = countryCode?.trim().toUpperCase() ?? "";
+  const isControlled = value !== undefined;
+  const [options, setOptions] = useState<GeoOption[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [internal, setInternal] = useState(defaultValue ?? "");
+  const onChangeRef = useRef(onChange);
+  const controlledRef = useRef(isControlled);
+  const selectionRef = useRef("");
+  const prevCc = useRef(cc);
+
+  onChangeRef.current = onChange;
+  controlledRef.current = isControlled;
+  selectionRef.current = (isControlled ? value : internal) ?? "";
+
+  useEffect(() => {
+    const previous = prevCc.current;
+    if (previous === cc) return;
+    prevCc.current = cc;
+    if (!previous) return;
+    if (!controlledRef.current) setInternal("");
+    if (selectionRef.current) onChangeRef.current?.(null);
+  }, [cc]);
+
+  useEffect(() => {
+    if (!cc) {
+      setOptions([]);
+      setIsLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+    setOptions([]);
+    setIsLoading(true);
+    void fetchStates(cc)
+      .then((list) => {
+        if (!cancelled) setOptions(list);
+      })
+      .finally(() => {
+        if (!cancelled) setIsLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [cc]);
+
+  const current = isControlled ? (value ?? "") : internal;
+  const selected = useMemo(() => {
+    if (!current) return undefined;
+    return options.find(
+      (option) => option.code === current || option.name === current,
+    );
+  }, [current, options]);
+
+  return (
+    <GeoSearchSelect
+      id={id}
+      className={className}
+      placeholder={cc ? placeholder : "Indica un país"}
+      searchPlaceholder="Buscar estado, región o municipio…"
+      emptyMessage="Sin estados, regiones ni municipios."
+      options={options}
+      value={selected?.code}
+      displayValue={selected?.name}
+      onChange={(option) => {
+        if (!isControlled) setInternal(option.code);
+        onChange?.(option);
+      }}
+      disabled={disabled || !cc}
+      isLoading={Boolean(cc) && isLoading}
+      showCode={showCode}
+    />
+  );
+}