@traky-app/ui 1.6.3 → 1.6.4

package/src/ui/country-select.tsx

@@ -0,0 +1,233 @@
+"use client";
+
+import { IconCheck, IconSelector } from "@tabler/icons-react";
+
+import { useEffect, useMemo, useState } from "react";
+import { getGeoCountries } from "../lib/geo-csc";
+import { cn, commandFilterAccentInsensitive } from "../lib/utils";
+import {
+  getCountryByCode,
+  mapGeoCountries,
+  type CountryOption,
+} from "../lib/geo-countries";
+import { Button } from "./button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "./command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "./popover";
+
+export type Country = CountryOption;
+
+function countryLabel(c: Country, size: "sm" | "md" | "lg"): string {
+  if (size === "sm") return c.short;
+  if (size === "md") return c.code;
+  return c.long;
+}
+
+/** Bandera local `/assets/flags/{ISO}.svg`; si no existe, no muestra nada. */
+function CountryFlag({
+  code,
+  name,
+}: {
+  code: string;
+  name: string;
+}) {
+  const [visible, setVisible] = useState(true);
+  if (!visible || !code) return null;
+
+  return (
+    <img
+      src={`/assets/flags/${code.toUpperCase()}.svg`}
+      alt=""
+      title={name}
+      width={22}
+      height={14}
+      className="h-[14px] w-[22px] shrink-0 rounded object-cover"
+      onError={() => setVisible(false)}
+    />
+  );
+}
+
+export type CountrySelectProps = {
+  id?: string;
+  /** ISO-2 controlado. `undefined` deja el selector sin controlar; `""` lo deja vacío. */
+  value?: string;
+  /** ISO-2 inicial cuando `value` no se pasa. */
+  defaultValue?: string;
+  onChange?: (value: Country) => void;
+  /** Si se elige la opción vacía (requiere `allowClear`). */
+  onClear?: () => void;
+  disabled?: boolean;
+  fileName?: string;
+  className?: string;
+  size?: "sm" | "md" | "lg";
+  searchPlaceholder?: string;
+  /** Si se define, solo se listan estos ISO-2 (en este orden). */
+  allowedCodes?: readonly string[];
+  allowClear?: boolean;
+  clearLabel?: string;
+};
+
+export function CountrySelect({
+  id,
+  value,
+  defaultValue,
+  onChange,
+  onClear,
+  disabled,
+  fileName,
+  className,
+  size = "md",
+  searchPlaceholder = "Escribe o busca un país...",
+  allowedCodes,
+  allowClear = false,
+  clearLabel = "Sin país",
+}: CountrySelectProps) {
+  const [open, setOpen] = useState(false);
+  const [catalog, setCatalog] = useState<Country[]>([]);
+  const [loadingCatalog, setLoadingCatalog] = useState(true);
+  const isControlled = value !== undefined;
+  const [uncontrolled, setUncontrolled] = useState<Country | undefined>(() =>
+    getCountryByCode(defaultValue),
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoadingCatalog(true);
+    void (async () => {
+      const apiCountries = await getGeoCountries();
+      if (cancelled) return;
+      setCatalog(mapGeoCountries(apiCountries));
+      setLoadingCatalog(false);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const countries = useMemo(() => {
+    if (!allowedCodes?.length) return catalog;
+    const byCode = new Map(catalog.map((country) => [country.code, country]));
+    return allowedCodes
+      .map((code) => byCode.get(code.trim().toUpperCase()))
+      .filter((country): country is Country => Boolean(country));
+  }, [allowedCodes, catalog]);
+
+  const selected = useMemo(() => {
+    if (isControlled) {
+      const code = value?.trim().toUpperCase() ?? "";
+      if (!code) return undefined;
+      return catalog.find((c) => c.code === code) ?? getCountryByCode(code);
+    }
+    if (!uncontrolled) return undefined;
+    return catalog.find((c) => c.code === uncontrolled.code) ?? uncontrolled;
+  }, [catalog, isControlled, uncontrolled, value]);
+
+  const placeholder = fileName || "País";
+
+  const triggerLabel = useMemo(() => {
+    if (!selected) return null;
+    return countryLabel(selected, size);
+  }, [selected, size]);
+
+  const handleSelect = (country: Country) => {
+    if (!isControlled) setUncontrolled(country);
+    setOpen(false);
+    onChange?.(country);
+  };
+
+  const handleClear = () => {
+    if (!isControlled) setUncontrolled(undefined);
+    setOpen(false);
+    onClear?.();
+  };
+
+  return (
+    <Popover open={open} onOpenChange={disabled ? undefined : setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          type="button"
+          variant="outline"
+          disabled={disabled}
+          role="combobox"
+          aria-expanded={open}
+          className={cn(
+            "h-10 w-full justify-between gap-2 font-normal",
+            className,
+          )}
+        >
+          {selected && triggerLabel ? (
+            <span className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
+              <CountryFlag code={selected.code} name={selected.long} />
+              <span className="truncate">{triggerLabel}</span>
+            </span>
+          ) : (
+            <span className="truncate text-muted-foreground">{placeholder}</span>
+          )}
+          <IconSelector className="size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+
+      {!disabled && (
+        <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
+          <Command
+            className="border border-border"
+            filter={commandFilterAccentInsensitive}
+          >
+            <CommandInput placeholder={searchPlaceholder} />
+            <CommandList>
+              <CommandEmpty>
+                {loadingCatalog
+                  ? "Cargando países…"
+                  : "No se encontró el país."}
+              </CommandEmpty>
+              {allowClear ? (
+                <CommandGroup>
+                  <CommandItem
+                    value={`${clearLabel} sin pais none`}
+                    onSelect={handleClear}
+                    className="gap-2"
+                  >
+                    <span className="min-w-0 flex-1 truncate">{clearLabel}</span>
+                    {!selected ? (
+                      <IconCheck className="size-4 shrink-0 text-primary" />
+                    ) : null}
+                  </CommandItem>
+                </CommandGroup>
+              ) : null}
+              {allowClear ? <CommandSeparator /> : null}
+              <CommandGroup>
+                {countries.map((c) => (
+                  <CommandItem
+                    key={c.code}
+                    value={`${c.long} ${c.code} ${c.short}`}
+                    onSelect={() => handleSelect(c)}
+                    className="gap-2"
+                  >
+                    <CountryFlag code={c.code} name={c.long} />
+                    <span className="min-w-0 flex-1 truncate">{c.long}</span>
+                    <span className="text-xs text-muted-foreground">{c.code}</span>
+                    {selected?.code === c.code ? (
+                      <IconCheck className="size-4 shrink-0 text-primary" />
+                    ) : null}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      )}
+    </Popover>
+  );
+}

package/src/ui/geo-search-select.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { IconCheck, IconSelector } from "@tabler/icons-react";
+import { useMemo, useState } from "react";
+import { cn, commandFilterAccentInsensitive } from "../lib/utils";
+import { Button } from "./button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "./command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "./popover";
+import { Spinner } from "./spinner";
+import type { GeoOption } from "../lib/geo-types";
+
+type GeoSearchSelectProps = {
+  id?: string;
+  label?: string;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  options: GeoOption[];
+  value?: string;
+  displayValue?: string;
+  onChange?: (option: GeoOption) => void;
+  disabled?: boolean;
+  isLoading?: boolean;
+  className?: string;
+  showCode?: boolean;
+};
+
+export function GeoSearchSelect({
+  id,
+  placeholder = "Seleccionar…",
+  searchPlaceholder = "Buscar…",
+  emptyMessage = "No se encontraron resultados.",
+  options,
+  value,
+  displayValue,
+  onChange,
+  disabled = false,
+  isLoading = false,
+  className,
+  showCode = false,
+}: GeoSearchSelectProps) {
+  const [open, setOpen] = useState(false);
+
+  const selected = useMemo(() => {
+    if (!value && !displayValue) return undefined;
+    if (value) {
+      return options.find((o) => o.code === value || o.name === value);
+    }
+    return options.find((o) => o.name === displayValue);
+  }, [options, value, displayValue]);
+
+  const triggerLabel = selected?.name ?? displayValue;
+
+  return (
+    <Popover modal open={open} onOpenChange={disabled ? undefined : setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          type="button"
+          variant="outline"
+          disabled={disabled || isLoading}
+          role="combobox"
+          aria-expanded={open}
+          className={cn(
+            "h-10 w-full justify-between gap-2 font-normal",
+            className,
+          )}
+        >
+          {isLoading ? (
+            <span className="flex items-center gap-2 text-muted-foreground">
+              <Spinner className="size-4" />
+              Cargando…
+            </span>
+          ) : triggerLabel ? (
+            <span className="truncate">{triggerLabel}</span>
+          ) : (
+            <span className="truncate text-muted-foreground">{placeholder}</span>
+          )}
+          <IconSelector className="size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+
+      {!disabled && !isLoading && (
+        <PopoverContent
+          className="w-[var(--radix-popover-trigger-width)] p-0"
+          align="start"
+        >
+          <Command
+            className="border border-border"
+            filter={commandFilterAccentInsensitive}
+          >
+            <CommandInput placeholder={searchPlaceholder} />
+            <CommandList>
+              <CommandEmpty>{emptyMessage}</CommandEmpty>
+              <CommandGroup>
+                {options.map((option) => (
+                  <CommandItem
+                    key={`${option.code}-${option.name}`}
+                    value={`${option.name} ${option.code}`}
+                    onSelect={() => {
+                      onChange?.(option);
+                      setOpen(false);
+                    }}
+                    className="gap-2"
+                  >
+                    <span className="min-w-0 flex-1 truncate">{option.name}</span>
+                    {showCode ? (
+                      <span className="text-xs text-muted-foreground">
+                        {option.code}
+                      </span>
+                    ) : null}
+                    {selected?.code === option.code &&
+                    selected?.name === option.name ? (
+                      <IconCheck className="size-4 shrink-0 text-primary" />
+                    ) : null}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      )}
+    </Popover>
+  );
+}

package/src/ui/geo-selectors.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { CountrySelect, type Country } from "./country-select";
+import { StateSelect } from "./state-select";
+import { CitySelect } from "./city-select";
+import type { GeoCityOption, GeoOption } from "../lib/geo-types";
+import { cn } from "../lib/utils";
+import { Label } from "./label";
+
+export type GeoSelectorLevel = "country" | "state" | "city";
+
+export type GeoSelectorsValue = {
+  country: Country | null;
+  state: GeoOption | null;
+  city: GeoCityOption | null;
+};
+
+const ALL_LEVELS: readonly GeoSelectorLevel[] = ["country", "state", "city"];
+
+const EMPTY_VALUE: GeoSelectorsValue = {
+  country: null,
+  state: null,
+  city: null,
+};
+
+type GeoSelectorsProps = {
+  /**
+   * Niveles visibles. Omite los que no quieras.
+   * Si no está "country", pasa `countryCode`.
+   * Si no está "state" y sí "city", pasa `stateCode`.
+   */
+  levels?: readonly GeoSelectorLevel[];
+  /** País fijo cuando el select de país no se muestra. */
+  countryCode?: string | null;
+  /** Provincia fija cuando el select de provincia no se muestra. */
+  stateCode?: string | null;
+  onChange?: (value: GeoSelectorsValue) => void;
+  disabled?: boolean;
+  className?: string;
+  idPrefix?: string;
+};
+
+export function GeoSelectors({
+  levels = ALL_LEVELS,
+  countryCode,
+  stateCode,
+  onChange,
+  disabled = false,
+  className,
+  idPrefix = "geo",
+}: GeoSelectorsProps) {
+  const showCountry = levels.includes("country");
+  const showState = levels.includes("state");
+  const showCity = levels.includes("city");
+  const [selection, setSelection] = useState<GeoSelectorsValue>(EMPTY_VALUE);
+
+  const resolvedCountry = showCountry
+    ? (selection.country?.code ?? "")
+    : (countryCode?.trim().toUpperCase() ?? "");
+  const resolvedState = showState
+    ? (selection.state?.code ?? "")
+    : (stateCode?.trim() ?? "");
+
+  const externalCountry = countryCode?.trim().toUpperCase() ?? "";
+  const externalState = stateCode?.trim() ?? "";
+
+  useEffect(() => {
+    if (showCountry) return;
+    setSelection((prev) => {
+      if (!prev.state && !prev.city) return prev;
+      return { ...prev, state: null, city: null };
+    });
+  }, [externalCountry, showCountry]);
+
+  useEffect(() => {
+    if (showState) return;
+    setSelection((prev) => {
+      if (!prev.city) return prev;
+      return { ...prev, city: null };
+    });
+  }, [externalState, showState]);
+
+  const publish = (next: GeoSelectorsValue) => {
+    setSelection(next);
+    onChange?.(next);
+  };
+
+  const visible = [showCountry, showState, showCity].filter(Boolean).length;
+  if (visible === 0) return null;
+
+  return (
+    <div
+      className={cn(
+        "grid gap-4",
+        visible >= 3
+          ? "md:grid-cols-3"
+          : visible === 2
+            ? "md:grid-cols-2"
+            : "max-w-sm",
+        className,
+      )}
+    >
+      {showCountry ? (
+        <div className="space-y-1">
+          <Label htmlFor={`${idPrefix}-country`}>País</Label>
+          <CountrySelect
+            id={`${idPrefix}-country`}
+            className="w-full"
+            size="lg"
+            value={selection.country?.code}
+            disabled={disabled}
+            onChange={(country) =>
+              publish({ country, state: null, city: null })
+            }
+            allowClear
+            onClear={() => publish(EMPTY_VALUE)}
+          />
+        </div>
+      ) : null}
+
+      {showState ? (
+        <div className="space-y-1">
+          <Label htmlFor={`${idPrefix}-state`}>Estado / Región / Municipio</Label>
+          <StateSelect
+            id={`${idPrefix}-state`}
+            countryCode={resolvedCountry}
+            value={selection.state?.code ?? ""}
+            disabled={disabled}
+            onChange={(state) =>
+              publish({
+                country: selection.country,
+                state,
+                city: null,
+              })
+            }
+          />
+        </div>
+      ) : null}
+
+      {showCity ? (
+        <div className="space-y-1">
+          <Label htmlFor={`${idPrefix}-city`}>Ciudad / Pueblo / Distrito</Label>
+          <CitySelect
+            id={`${idPrefix}-city`}
+            countryCode={resolvedCountry}
+            stateCode={resolvedState}
+            value={selection.city?.code ?? selection.city?.name ?? ""}
+            disabled={disabled}
+            onChange={(city) =>
+              publish({
+                country: selection.country,
+                state: selection.state,
+                city,
+              })
+            }
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+}