@godxjp/ui 5.0.1 → 6.0.0

package/src/components/data-entry/cascader.tsx

@@ -0,0 +1,305 @@
+import * as React from "react";
+import { Check, ChevronRight, ChevronsUpDown, X } from "lucide-react";
+
+import { useTranslation } from "../../i18n/use-translation";
+import { cn } from "../../lib/utils";
+import { Button } from "../general/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover";
+import { ScrollArea, ScrollBar } from "../data-display/scroll-area";
+import { Checkbox } from "./checkbox";
+import { Command, CommandInput } from "./command";
+import {
+  filterTreeOptions,
+  formatPathLabels,
+  getNodeByPath,
+  normalizeTreeOptions,
+  pathKey,
+  pathsEqual,
+  type NormalizedTreeOption,
+} from "./tree-utils";
+import type { CascaderProp } from "../../props/components/data-entry.prop";
+
+export type {
+  CascaderProp,
+  CascaderProp as CascaderProps,
+} from "../../props/components/data-entry.prop";
+export type { TreeOption, TreeFieldNames } from "./tree-utils";
+
+function pathInValues(path: string[], values: string[][]): boolean {
+  return values.some((v) => pathsEqual(v, path));
+}
+
+function togglePath(values: string[][], path: string[]): string[][] {
+  if (pathInValues(path, values)) return values.filter((v) => !pathsEqual(v, path));
+  return [...values, path];
+}
+
+export function Cascader({
+  options: optionsProp,
+  value,
+  defaultValue,
+  onChange,
+  multiple,
+  changeOnSelect,
+  showSearch,
+  placeholder,
+  disabled,
+  className,
+  id,
+  expandTrigger = "click",
+  fieldNames,
+  allowClear = true,
+}: CascaderProp) {
+  const { t } = useTranslation();
+  const options = React.useMemo(
+    () => normalizeTreeOptions(optionsProp as Record<string, unknown>[], fieldNames),
+    [optionsProp, fieldNames],
+  );
+
+  const [open, setOpen] = React.useState(false);
+  const [activePath, setActivePath] = React.useState<string[]>([]);
+  const [search, setSearch] = React.useState("");
+
+  const isControlledSingle = !multiple && value !== undefined;
+  const isControlledMulti = multiple && value !== undefined;
+  const [internalSingle, setInternalSingle] = React.useState<string[]>(
+    multiple ? [] : ((defaultValue as string[] | undefined) ?? []),
+  );
+  const [internalMulti, setInternalMulti] = React.useState<string[][]>(
+    (defaultValue as string[][] | undefined) ?? [],
+  );
+
+  const singleValue = isControlledSingle ? (value as string[]) : internalSingle;
+  const multiValue = isControlledMulti ? (value as string[][]) : internalMulti;
+
+  const resolvedPlaceholder = placeholder ?? t("dataEntry.cascader.placeholder");
+
+  const displayLabel = React.useMemo(() => {
+    if (multiple) {
+      if (!multiValue.length) return null;
+      return multiValue.map((path) => formatPathLabels(getNodeByPath(options, path))).join(", ");
+    }
+    if (!singleValue.length) return null;
+    return formatPathLabels(getNodeByPath(options, singleValue));
+  }, [multiple, multiValue, singleValue, options]);
+
+  const commitSingle = (path: string[]) => {
+    if (!isControlledSingle) setInternalSingle(path);
+    onChange?.(path, getNodeByPath(options, path));
+    setOpen(false);
+    setActivePath([]);
+    setSearch("");
+  };
+
+  const commitMulti = (paths: string[][]) => {
+    if (!isControlledMulti) setInternalMulti(paths);
+    onChange?.(
+      paths,
+      paths.map((p) => getNodeByPath(options, p)),
+    );
+  };
+
+  const columns: NormalizedTreeOption[][] = React.useMemo(() => {
+    const cols: NormalizedTreeOption[][] = [options];
+    for (const segment of activePath) {
+      const col = cols.at(-1);
+      const node = col?.find((n) => n.value === segment);
+      if (node?.children?.length) cols.push(node.children);
+      else break;
+    }
+    return cols;
+  }, [options, activePath]);
+
+  const handleSelectNode = (node: NormalizedTreeOption, path: string[]) => {
+    const hasChildren = (node.children?.length ?? 0) > 0 && node.isLeaf !== true;
+    if (hasChildren && !changeOnSelect) {
+      setActivePath(path);
+      return;
+    }
+    if (multiple) {
+      commitMulti(togglePath(multiValue, path));
+      return;
+    }
+    commitSingle(path);
+  };
+
+  const isSearching = showSearch && search.trim().length > 0;
+
+  const searchResults = React.useMemo(
+    () => (isSearching ? filterTreeOptions(options, search) : []),
+    [options, search, isSearching],
+  );
+
+  const handleOpenChange = (next: boolean) => {
+    setOpen(next);
+    if (!next) {
+      setSearch("");
+      setActivePath([]);
+    }
+  };
+
+  const clearValue = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (multiple) commitMulti([]);
+    else commitSingle([]);
+  };
+
+  const renderCascadeColumns = () => (
+    <ScrollArea className="w-full">
+      <div className="flex max-h-[min(280px,50vh)]">
+        {columns.map((col, colIndex) => (
+          <ul
+            key={colIndex}
+            className="min-w-[9rem] border-r last:border-r-0"
+            onMouseLeave={
+              expandTrigger === "hover"
+                ? () => setActivePath(activePath.slice(0, colIndex))
+                : undefined
+            }
+          >
+            {col.map((node) => {
+              const path = [...activePath.slice(0, colIndex), node.value];
+              const hasChildren = (node.children?.length ?? 0) > 0 && node.isLeaf !== true;
+              const active = activePath[colIndex] === node.value;
+              const selected = multiple
+                ? pathInValues(path, multiValue)
+                : pathsEqual(path, singleValue);
+
+              return (
+                <li key={node.value}>
+                  <button
+                    type="button"
+                    disabled={node.disabled}
+                    className={cn(
+                      "flex w-full items-center gap-1 px-3 py-2 text-sm outline-none",
+                      "hover:bg-accent hover:text-accent-foreground",
+                      active && "bg-accent/70 font-medium",
+                      node.disabled && "pointer-events-none opacity-50",
+                    )}
+                    onMouseEnter={
+                      expandTrigger === "hover" && hasChildren
+                        ? () => setActivePath(path)
+                        : undefined
+                    }
+                    onClick={() => !node.disabled && handleSelectNode(node, path)}
+                  >
+                    {multiple && (
+                      <Checkbox
+                        checked={selected}
+                        disabled={node.disabled}
+                        className="mr-1"
+                        aria-hidden
+                        tabIndex={-1}
+                      />
+                    )}
+                    {!multiple && selected && (
+                      <Check className="mr-1 size-4 shrink-0" aria-hidden="true" />
+                    )}
+                    <span className="flex-1 truncate text-left">{node.label}</span>
+                    {hasChildren && (
+                      <ChevronRight className="size-4 shrink-0 opacity-50" aria-hidden="true" />
+                    )}
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  );
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn(
+            "w-full justify-between font-normal",
+            !displayLabel && "text-muted-foreground",
+            className,
+          )}
+        >
+          <span className="truncate">{displayLabel ?? resolvedPlaceholder}</span>
+          <span className="ml-2 flex shrink-0 items-center gap-1">
+            {allowClear && displayLabel && !disabled && (
+              <X
+                className="size-4 opacity-50 hover:opacity-100"
+                aria-hidden="true"
+                onClick={clearValue}
+              />
+            )}
+            <ChevronsUpDown className="size-4 opacity-50" aria-hidden="true" />
+          </span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-auto min-w-[var(--radix-popover-trigger-width)] p-0"
+        align="start"
+      >
+        {showSearch && (
+          <div className="border-b p-2">
+            <Command shouldFilter={false}>
+              <CommandInput
+                placeholder={t("dataEntry.cascader.searchPlaceholder")}
+                value={search}
+                onValueChange={setSearch}
+              />
+            </Command>
+          </div>
+        )}
+        {isSearching ? (
+          <ScrollArea className="max-h-[min(300px,50vh)]">
+            <div className="p-1">
+              {searchResults.length === 0 ? (
+                <p className="text-muted-foreground py-6 text-center text-sm">
+                  {t("dataEntry.cascader.empty")}
+                </p>
+              ) : (
+                searchResults.map(({ path, labels }) => {
+                  const label = labels.join(" / ");
+                  const selected = multiple
+                    ? pathInValues(path, multiValue)
+                    : pathsEqual(path, singleValue);
+                  return (
+                    <button
+                      key={pathKey(path)}
+                      type="button"
+                      className={cn(
+                        "flex w-full items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+                        "hover:bg-accent hover:text-accent-foreground",
+                        selected && "bg-accent/60",
+                      )}
+                      onClick={() => handleSelectNode({ value: path.at(-1)!, label }, path)}
+                    >
+                      {multiple ? (
+                        <Checkbox checked={selected} className="mr-2" aria-hidden tabIndex={-1} />
+                      ) : (
+                        <Check
+                          className={cn(
+                            "mr-2 size-4 shrink-0",
+                            selected ? "opacity-100" : "opacity-0",
+                          )}
+                          aria-hidden="true"
+                        />
+                      )}
+                      <span className="truncate text-left">{label}</span>
+                    </button>
+                  );
+                })
+              )}
+            </div>
+          </ScrollArea>
+        ) : (
+          renderCascadeColumns()
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/data-entry/checkbox-group.tsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { Checkbox } from "./checkbox";
+import { ChoiceField } from "./choice-field";
+import { choiceGroupClassName, type ChoiceOption } from "./choice-option";
+import type { CheckboxGroupProp } from "../../props/components/data-entry.prop";
+
+export type {
+  CheckboxGroupProp,
+  CheckboxGroupProp as CheckboxGroupProps,
+} from "../../props/components/data-entry.prop";
+
+function useControllableArray(
+  controlled: string[] | undefined,
+  defaultValue: string[],
+): [string[], (next: string[]) => void] {
+  const [internal, setInternal] = React.useState(defaultValue);
+  const value = controlled ?? internal;
+  const setValue = React.useCallback(
+    (next: string[]) => {
+      if (controlled === undefined) setInternal(next);
+    },
+    [controlled],
+  );
+  return [value, setValue];
+}
+
+export function CheckboxGroup({
+  value: controlledValue,
+  defaultValue = [],
+  onChange,
+  options,
+  orientation = "vertical",
+  disabled,
+  name,
+  className,
+  children,
+}: CheckboxGroupProp) {
+  const reactId = React.useId();
+  const [value, setValue] = useControllableArray(controlledValue, defaultValue);
+
+  const toggle = (optionValue: string) => {
+    const next = value.includes(optionValue)
+      ? value.filter((v) => v !== optionValue)
+      : [...value, optionValue];
+    setValue(next);
+    onChange?.(next);
+  };
+
+  if (options && options.length > 0) {
+    return (
+      <div
+        role="group"
+        aria-disabled={disabled ? true : undefined}
+        data-orientation={orientation}
+        className={choiceGroupClassName(orientation, className)}
+      >
+        {options.map((opt: ChoiceOption, index) => {
+          const id = `${reactId}-${opt.value}-${index}`;
+          const checked = value.includes(opt.value);
+          return (
+            <ChoiceField key={opt.value} id={id} label={opt.label} description={opt.description}>
+              <Checkbox
+                id={id}
+                name={name}
+                value={opt.value}
+                checked={checked}
+                disabled={Boolean(disabled) || Boolean(opt.disabled)}
+                onCheckedChange={() => {
+                  toggle(opt.value);
+                }}
+              />
+            </ChoiceField>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      role="group"
+      data-orientation={orientation}
+      className={cn(choiceGroupClassName(orientation), className)}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/data-entry/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { CheckboxGroup } from "./checkbox-group";
+
+const CheckboxRoot = React.forwardRef<
+  React.ComponentRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    data-slot="checkbox"
+    className={cn(
+      "peer ui-checkbox focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground shrink-0 shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator data-slot="checkbox-indicator" className="ui-choice-indicator">
+      <Check className="ui-checkbox-icon" aria-hidden="true" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+CheckboxRoot.displayName = CheckboxPrimitive.Root.displayName;
+
+/** Checkbox — dùng standalone hoặc `Checkbox.Group` với `options` (Ant Design style). */
+export const Checkbox = Object.assign(CheckboxRoot, {
+  Group: CheckboxGroup,
+});

package/src/components/data-entry/choice-field.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { Label } from "./label";
+
+interface ChoiceFieldProps {
+  id: string;
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  className?: string;
+  children: React.ReactNode;
+}
+
+/** Label + optional description beside a checkbox/radio control. */
+export function ChoiceField({ id, label, description, className, children }: ChoiceFieldProps) {
+  return (
+    <div className={cn("ui-choice-field", className)}>
+      <div className="ui-choice-control">{children}</div>
+      <div className="ui-choice-content">
+        <Label htmlFor={id} className="ui-choice-label">
+          {label}
+        </Label>
+        {description ? <p className="ui-choice-description">{description}</p> : null}
+      </div>
+    </div>
+  );
+}

package/src/components/data-entry/choice-option.ts

@@ -0,0 +1,20 @@
+import type * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+/** Shared option shape — Ant Design `CheckboxOptionType` / `Radio` options. */
+export type ChoiceOption = {
+  label: React.ReactNode;
+  value: string;
+  disabled?: boolean;
+  description?: React.ReactNode;
+};
+
+export type ChoiceOrientation = "horizontal" | "vertical";
+
+export function choiceGroupClassName(
+  _orientation: ChoiceOrientation = "vertical",
+  className?: string,
+) {
+  return cn("ui-choice-group", className);
+}

package/src/components/data-entry/color-picker.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { useTranslation } from "../../i18n/use-translation";
+import { cn } from "../../lib/utils";
+import { controlIconClass } from "../../lib/control-styles";
+import type { ColorPickerProp } from "../../props/components/data-entry.prop";
+import { Input } from "./input";
+
+export type {
+  ColorPickerProp,
+  ColorPickerProp as ColorPickerProps,
+} from "../../props/components/data-entry.prop";
+
+const HEX_PATTERN = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+
+function normalizeHex(value: string): string {
+  if (!value.startsWith("#")) return `#${value}`;
+  return value;
+}
+
+export function ColorPicker({
+  value = "#2563eb",
+  onChange,
+  disabled,
+  className,
+  id,
+  showHexInput = true,
+}: ColorPickerProp) {
+  const { t } = useTranslation();
+  const [draft, setDraft] = React.useState<string | null>(null);
+  const display = draft ?? value;
+
+  const commit = (next: string) => {
+    const normalized = normalizeHex(next);
+    if (!HEX_PATTERN.test(normalized)) {
+      setDraft(null);
+      return;
+    }
+    setDraft(null);
+    onChange?.(normalized);
+  };
+
+  return (
+    <div className={cn("ui-color-picker", className)}>
+      <div className={cn("ui-color-picker-swatch", controlIconClass)}>
+        <div
+          className="ui-color-picker-preview"
+          style={{ backgroundColor: HEX_PATTERN.test(display) ? display : value }}
+          aria-hidden="true"
+        />
+        <input
+          id={id}
+          type="color"
+          value={HEX_PATTERN.test(display) ? display : value}
+          disabled={disabled}
+          onChange={(event) => commit(event.target.value)}
+          className="ui-color-picker-input"
+          aria-label={t("dataEntry.colorPicker.ariaLabel")}
+        />
+      </div>
+      {showHexInput && (
+        <Input
+          value={display}
+          disabled={disabled}
+          onChange={(event) => setDraft(event.target.value)}
+          onBlur={() => commit(display)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") commit(display);
+          }}
+          className="ui-color-picker-hex"
+          spellCheck={false}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/data-entry/command.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { controlIconLeadingClass } from "../../lib/control-styles";
+
+export const Command = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive ref={ref} className={cn("ui-command", className)} {...props} />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+export const CommandInput = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  // cmdk uses this non-standard attribute for input wrapper styling
+  // eslint-disable-next-line react/no-unknown-property -- cmdk convention
+  <div className="ui-command-input-wrapper" cmdk-input-wrapper="">
+    <Search className={cn(controlIconLeadingClass, "ui-command-search-icon")} aria-hidden="true" />
+    <CommandPrimitive.Input ref={ref} className={cn("ui-command-input", className)} {...props} />
+  </div>
+));
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+export const CommandList = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List ref={ref} className={cn("ui-command-list", className)} {...props} />
+));
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+export const CommandEmpty = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => <CommandPrimitive.Empty ref={ref} className="ui-command-empty" {...props} />);
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+export const CommandGroup = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group ref={ref} className={cn("ui-command-group", className)} {...props} />
+));
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+export const CommandItem = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item ref={ref} className={cn("ui-command-item", className)} {...props} />
+));
+CommandItem.displayName = CommandPrimitive.Item.displayName;

package/src/components/data-entry/country-select.tsx

@@ -0,0 +1,88 @@
+import { cn } from "../../lib/utils";
+import type {
+  CountryOptionLabelProp,
+  CountrySelectProp,
+} from "../../props/components/data-entry.prop";
+import { Inline } from "../layout/inline";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+
+export type {
+  CountryOptionProp,
+  CountryOptionLabelProp,
+  CountrySelectProp,
+  CountrySelectProp as CountrySelectProps,
+} from "../../props/components/data-entry.prop";
+
+/** Flag + name (+ optional code) — accepts a select-option or a country summary. */
+export function CountryOptionLabel({
+  country,
+  showCode = false,
+  className,
+}: CountryOptionLabelProp) {
+  const code = country.value ?? country.code ?? "";
+  const text =
+    country.nativeName != null && country.nativeName !== ""
+      ? `${country.name} (${country.nativeName})`
+      : country.name;
+
+  return (
+    <Inline gap="xs" className={cn("items-center", className)}>
+      {country.flagSvgPath != null && country.flagSvgPath !== "" && (
+        <img
+          src={country.flagSvgPath}
+          alt=""
+          className="h-3 w-5 shrink-0 rounded-sm object-cover"
+          aria-hidden="true"
+        />
+      )}
+      <span className="truncate">
+        {text}
+        {showCode && code !== "" && <span className="text-muted-foreground"> · {code}</span>}
+      </span>
+    </Inline>
+  );
+}
+
+/** Country picker on top of Select; submits the country code via a hidden form value. */
+export function CountrySelect({
+  id,
+  name,
+  options,
+  defaultValue,
+  required = false,
+  allowEmpty = false,
+  emptyLabel = "—",
+  placeholder,
+  invalid = false,
+}: CountrySelectProp) {
+  const emptyValue = "0";
+  const resolvedDefault = defaultValue && defaultValue !== "" ? defaultValue : emptyValue;
+
+  return (
+    <Select
+      name={name}
+      defaultValue={allowEmpty ? resolvedDefault : (defaultValue ?? options[0]?.value)}
+    >
+      <SelectTrigger id={id} className="w-full" aria-invalid={invalid} aria-required={required}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          {allowEmpty && <SelectItem value={emptyValue}>{emptyLabel}</SelectItem>}
+          {options.map((option) => (
+            <SelectItem key={option.value} value={option.value ?? ""}>
+              <CountryOptionLabel country={option} />
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+}