@godxjp/ui 5.0.1 → 6.0.0

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

@@ -0,0 +1,279 @@
+import * as React from "react";
+import { ChevronDown, 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 } from "../data-display/scroll-area";
+import { Checkbox } from "./checkbox";
+import { Command, CommandInput } from "./command";
+import {
+  collectAllExpandableKeys,
+  filterVisibleTree,
+  findNodeByValue,
+  flattenVisibleTree,
+  getDescendantValues,
+  normalizeTreeOptions,
+  reactNodeText,
+  type NormalizedTreeOption,
+} from "./tree-utils";
+import type { TreeSelectProp } from "../../props/components/data-entry.prop";
+
+export type {
+  TreeSelectProp,
+  TreeSelectProp as TreeSelectProps,
+} from "../../props/components/data-entry.prop";
+export { SHOW_CHILD, SHOW_PARENT, SHOW_ALL } from "./tree-select-strategy";
+
+import { SHOW_CHILD, SHOW_PARENT, SHOW_ALL } from "./tree-select-strategy";
+
+function toArray(value: string | string[] | undefined): string[] {
+  if (value == null) return [];
+  return Array.isArray(value) ? value : [value];
+}
+
+function displayValues(
+  values: string[],
+  options: NormalizedTreeOption[],
+  showCheckedStrategy: TreeSelectProp["showCheckedStrategy"],
+  treeCheckStrictly?: boolean,
+): string[] {
+  if (treeCheckStrictly || showCheckedStrategy === SHOW_ALL) return values;
+  if (showCheckedStrategy === SHOW_PARENT) {
+    const filtered = values.filter((v) => {
+      const node = findNodeByValue(options, v);
+      if (!node?.children?.length) return true;
+      const desc = getDescendantValues(node).slice(1);
+      return !desc.every((d) => values.includes(d));
+    });
+    return filtered.length ? filtered : values;
+  }
+  // SHOW_CHILD — hide parent when all children selected
+  return values.filter((v) => {
+    const node = findNodeByValue(options, v);
+    return !node?.children?.length;
+  });
+}
+
+function TreeSelectRoot({
+  treeData: treeDataProp,
+  value,
+  defaultValue,
+  onChange,
+  multiple,
+  treeCheckable,
+  treeCheckStrictly,
+  showSearch,
+  showCheckedStrategy = SHOW_CHILD,
+  treeDefaultExpandAll,
+  placeholder,
+  disabled,
+  allowClear = true,
+  className,
+  id,
+  fieldNames,
+}: TreeSelectProp) {
+  const { t } = useTranslation();
+  const options = React.useMemo(
+    () => normalizeTreeOptions(treeDataProp as Record<string, unknown>[], fieldNames),
+    [treeDataProp, fieldNames],
+  );
+
+  const checkable = treeCheckable ?? multiple;
+  const [open, setOpen] = React.useState(false);
+  const [search, setSearch] = React.useState("");
+  const [expandedKeys, setExpandedKeys] = React.useState<Set<string>>(
+    () => new Set(treeDefaultExpandAll ? collectAllExpandableKeys(options) : []),
+  );
+
+  const isControlled = value !== undefined;
+  const [internal, setInternal] = React.useState<string[]>(() => toArray(defaultValue));
+
+  const selected = isControlled ? toArray(value) : internal;
+
+  const resolvedPlaceholder = placeholder ?? t("dataEntry.treeSelect.placeholder");
+
+  const visible = React.useMemo(() => {
+    if (showSearch && search.trim()) return filterVisibleTree(options, search);
+    return flattenVisibleTree(options, expandedKeys);
+  }, [options, expandedKeys, search, showSearch]);
+
+  const commit = (next: string[]) => {
+    if (!isControlled) setInternal(next);
+    onChange?.(checkable || multiple ? next : (next[0] ?? undefined));
+  };
+
+  const toggleExpand = (key: string) => {
+    setExpandedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
+
+  const toggleSelect = (node: NormalizedTreeOption) => {
+    if (node.disabled) return;
+    const key = node.value;
+
+    if (!checkable && !multiple) {
+      commit([key]);
+      setOpen(false);
+      return;
+    }
+
+    const isOn = selected.includes(key);
+    let next: string[];
+
+    if (treeCheckStrictly) {
+      next = isOn ? selected.filter((v) => v !== key) : [...selected, key];
+    } else {
+      const related = getDescendantValues(node);
+      next = isOn
+        ? selected.filter((v) => !related.includes(v))
+        : [...new Set([...selected, ...related])];
+    }
+
+    commit(next);
+  };
+
+  const displayKeys = displayValues(selected, options, showCheckedStrategy, treeCheckStrictly);
+  const displayLabel = displayKeys
+    .map((v) => {
+      const label = findNodeByValue(options, v)?.label;
+      return label ? reactNodeText(label) : v;
+    })
+    .join(", ");
+
+  const clearValue = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    commit([]);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn(
+            "w-full justify-between font-normal",
+            !displayKeys.length && "text-muted-foreground",
+            className,
+          )}
+        >
+          <span className="truncate">
+            {displayKeys.length ? displayLabel : resolvedPlaceholder}
+          </span>
+          <span className="ml-2 flex shrink-0 items-center gap-1">
+            {allowClear && displayKeys.length > 0 && !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-[var(--radix-popover-trigger-width)] p-0" align="start">
+        {showSearch && (
+          <div className="border-b p-2">
+            <Command shouldFilter={false}>
+              <CommandInput
+                placeholder={t("dataEntry.treeSelect.searchPlaceholder")}
+                value={search}
+                onValueChange={setSearch}
+              />
+            </Command>
+          </div>
+        )}
+        <ScrollArea className="max-h-[min(300px,50vh)]">
+          <div
+            role="tree"
+            aria-multiselectable={Boolean(checkable) || Boolean(multiple)}
+            className="p-1"
+          >
+            {visible.length === 0 ? (
+              <p className="text-muted-foreground py-6 text-center text-sm">
+                {t("dataEntry.treeSelect.empty")}
+              </p>
+            ) : (
+              visible.map(({ node, depth, hasChildren }) => {
+                const expanded = expandedKeys.has(node.value);
+                const isSelected = selected.includes(node.value);
+                return (
+                  <div
+                    key={node.value}
+                    role="treeitem"
+                    aria-expanded={hasChildren ? expanded : undefined}
+                    aria-selected={isSelected}
+                    className={cn(
+                      "flex items-center rounded-sm py-1.5 pr-2 text-sm outline-none",
+                      "hover:bg-accent hover:text-accent-foreground",
+                      isSelected && "bg-accent/60",
+                      node.disabled && "pointer-events-none opacity-50",
+                    )}
+                    style={{ paddingLeft: `${depth * 1.25 + 0.5}rem` }}
+                  >
+                    <button
+                      type="button"
+                      tabIndex={-1}
+                      aria-label={
+                        expanded
+                          ? t("dataEntry.treeSelect.collapse")
+                          : t("dataEntry.treeSelect.expand")
+                      }
+                      className={cn(
+                        "mr-1 flex size-5 shrink-0 items-center justify-center rounded-sm",
+                        !hasChildren && "invisible",
+                      )}
+                      onClick={() => toggleExpand(node.value)}
+                    >
+                      {expanded ? (
+                        <ChevronDown className="size-4" aria-hidden="true" />
+                      ) : (
+                        <ChevronRight className="size-4" aria-hidden="true" />
+                      )}
+                    </button>
+                    {checkable ? (
+                      <label className="flex flex-1 cursor-pointer items-center gap-2">
+                        <Checkbox
+                          checked={isSelected}
+                          disabled={Boolean(node.disabled) || Boolean(node.disableCheckbox)}
+                          onCheckedChange={() => toggleSelect(node)}
+                        />
+                        <span className="truncate">{node.label}</span>
+                      </label>
+                    ) : (
+                      <button
+                        type="button"
+                        className="flex-1 truncate text-left"
+                        disabled={node.disabled}
+                        onClick={() => toggleSelect(node)}
+                      >
+                        {node.label}
+                      </button>
+                    )}
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </ScrollArea>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export const TreeSelect = Object.assign(TreeSelectRoot, {
+  SHOW_CHILD,
+  SHOW_PARENT,
+  SHOW_ALL,
+});

package/src/components/data-entry/tree-utils.ts

@@ -0,0 +1,221 @@
+import type * as React from "react";
+
+/** Normalized tree node — Ant Design `treeData` / Cascader `options`. */
+export type TreeOption = {
+  value: string;
+  label: React.ReactNode;
+  disabled?: boolean;
+  disableCheckbox?: boolean;
+  /** When false with `loadData`, shows expand affordance */
+  isLeaf?: boolean;
+  children?: TreeOption[];
+};
+
+export type TreeFieldNames = {
+  label?: string;
+  value?: string;
+  children?: string;
+};
+
+export type NormalizedTreeOption = TreeOption & { children?: NormalizedTreeOption[] };
+
+type RawTreeNode = Record<string, unknown>;
+
+export function reactNodeText(value: React.ReactNode): string {
+  if (value == null || typeof value === "boolean") return "";
+  if (typeof value === "string" || typeof value === "number" || typeof value === "bigint") {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    return (value as React.ReactNode[]).map((item) => reactNodeText(item)).join("");
+  }
+  return "";
+}
+
+function unknownText(value: unknown): string {
+  if (typeof value === "string" || typeof value === "number" || typeof value === "bigint") {
+    return String(value);
+  }
+  return "";
+}
+
+export function normalizeTreeOptions(
+  nodes: RawTreeNode[] | undefined,
+  fieldNames?: TreeFieldNames,
+): NormalizedTreeOption[] {
+  if (!nodes?.length) return [];
+  const labelKey = fieldNames?.label ?? "label";
+  const valueKey = fieldNames?.value ?? "value";
+  const childrenKey = fieldNames?.children ?? "children";
+
+  return nodes.map((node) => {
+    const children = node[childrenKey];
+    const value = unknownText(node[valueKey]);
+    const label = node[labelKey] as React.ReactNode;
+    return {
+      value,
+      label: label ?? value,
+      disabled: Boolean(node.disabled),
+      disableCheckbox: Boolean(node.disableCheckbox),
+      isLeaf: node.isLeaf as boolean | undefined,
+      children: Array.isArray(children)
+        ? normalizeTreeOptions(children as RawTreeNode[], fieldNames)
+        : undefined,
+    };
+  });
+}
+
+export function getNodeByPath(
+  options: NormalizedTreeOption[],
+  path: string[],
+): NormalizedTreeOption[] {
+  const chain: NormalizedTreeOption[] = [];
+  let level = options;
+  for (const segment of path) {
+    const found = level.find((n) => n.value === segment);
+    if (!found) break;
+    chain.push(found);
+    level = found.children ?? [];
+  }
+  return chain;
+}
+
+export function getOptionsAtPath(
+  options: NormalizedTreeOption[],
+  path: string[],
+): NormalizedTreeOption[] {
+  if (!path.length) return options;
+  const chain = getNodeByPath(options, path);
+  return chain.at(-1)?.children ?? [];
+}
+
+export function formatPathLabels(chain: NormalizedTreeOption[], separator = " / "): string {
+  return chain.map((n) => reactNodeText(n.label)).join(separator);
+}
+
+export type TreePath = { path: string[]; labels: string[] };
+
+export function collectLeafPaths(
+  options: NormalizedTreeOption[],
+  prefix: string[] = [],
+  root: NormalizedTreeOption[] = options,
+): TreePath[] {
+  const out: TreePath[] = [];
+  for (const node of options) {
+    const path = [...prefix, node.value];
+    const hasChildren = (node.children?.length ?? 0) > 0;
+    if (!hasChildren || node.isLeaf === true) {
+      out.push({ path, labels: getNodeByPath(root, path).map((n) => reactNodeText(n.label)) });
+    }
+    if (hasChildren) out.push(...collectLeafPaths(node.children!, path, root));
+  }
+  return out;
+}
+
+export function collectAllPaths(
+  options: NormalizedTreeOption[],
+  prefix: string[] = [],
+  root: NormalizedTreeOption[] = options,
+): TreePath[] {
+  const out: TreePath[] = [];
+  for (const node of options) {
+    const path = [...prefix, node.value];
+    out.push({ path, labels: getNodeByPath(root, path).map((n) => reactNodeText(n.label)) });
+    if (node.children?.length) out.push(...collectAllPaths(node.children, path, root));
+  }
+  return out;
+}
+
+export function pathKey(path: string[]): string {
+  return path.join("\0");
+}
+
+export function pathsEqual(a: string[], b: string[]): boolean {
+  return a.length === b.length && a.every((v, i) => v === b[i]);
+}
+
+export function filterTreeOptions(
+  options: NormalizedTreeOption[],
+  query: string,
+  filter?: (query: string, path: NormalizedTreeOption[]) => boolean,
+): TreePath[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return [];
+  const paths = collectLeafPaths(options);
+  return paths.filter(({ path }) => {
+    const chain = getNodeByPath(options, path);
+    if (filter) return filter(query, chain);
+    return chain.some((n) => reactNodeText(n.label).toLowerCase().includes(q));
+  });
+}
+
+export function getDescendantValues(node: NormalizedTreeOption): string[] {
+  const values: string[] = [node.value];
+  for (const child of node.children ?? []) values.push(...getDescendantValues(child));
+  return values;
+}
+
+export function flattenVisibleTree(
+  options: NormalizedTreeOption[],
+  expandedKeys: Set<string>,
+  depth = 0,
+): { node: NormalizedTreeOption; depth: number; hasChildren: boolean }[] {
+  const out: { node: NormalizedTreeOption; depth: number; hasChildren: boolean }[] = [];
+  for (const node of options) {
+    const hasChildren = (node.children?.length ?? 0) > 0 && node.isLeaf !== true;
+    out.push({ node, depth, hasChildren });
+    if (hasChildren && expandedKeys.has(node.value)) {
+      out.push(...flattenVisibleTree(node.children!, expandedKeys, depth + 1));
+    }
+  }
+  return out;
+}
+
+export function filterVisibleTree(
+  options: NormalizedTreeOption[],
+  query: string,
+): { node: NormalizedTreeOption; depth: number; hasChildren: boolean }[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return flattenVisibleTree(options, new Set(collectAllExpandableKeys(options)));
+
+  const expanded = new Set<string>();
+
+  function walk(nodes: NormalizedTreeOption[], depth: number): boolean {
+    let branchMatch = false;
+    for (const node of nodes) {
+      const selfMatch = reactNodeText(node.label).toLowerCase().includes(q);
+      const childMatch = node.children?.length ? walk(node.children, depth + 1) : false;
+      if (selfMatch || childMatch) {
+        branchMatch = true;
+        if (childMatch) expanded.add(node.value);
+      }
+    }
+    return branchMatch;
+  }
+
+  walk(options, 0);
+  return flattenVisibleTree(options, expanded);
+}
+
+export function collectAllExpandableKeys(options: NormalizedTreeOption[]): string[] {
+  const keys: string[] = [];
+  for (const node of options) {
+    if ((node.children?.length ?? 0) > 0 && node.isLeaf !== true) {
+      keys.push(node.value);
+      keys.push(...collectAllExpandableKeys(node.children!));
+    }
+  }
+  return keys;
+}
+
+export function findNodeByValue(
+  options: NormalizedTreeOption[],
+  value: string,
+): NormalizedTreeOption | undefined {
+  for (const node of options) {
+    if (node.value === value) return node;
+    const nested = node.children ? findNodeByValue(node.children, value) : undefined;
+    if (nested) return nested;
+  }
+  return undefined;
+}

package/src/components/data-entry/upload-crop-dialog.tsx

@@ -0,0 +1,109 @@
+import * as React from "react";
+
+import { useTranslation } from "../../i18n/use-translation";
+import { cn } from "../../lib/utils";
+import { Button } from "../general/button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "../feedback/dialog";
+import { Slider } from "./slider";
+
+interface UploadCropDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  file: File | null;
+  onConfirm: (cropped: File) => void;
+}
+
+/** Simple 1:1 avatar crop — canvas export, no extra deps. */
+export function UploadCropDialog({ open, onOpenChange, file, onConfirm }: UploadCropDialogProps) {
+  const { t } = useTranslation();
+  const [scale, setScale] = React.useState(1.2);
+  const [src, setSrc] = React.useState<string | null>(null);
+  const imgRef = React.useRef<HTMLImageElement>(null);
+
+  React.useEffect(() => {
+    if (!file) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- clear object URL state when the selected file is removed.
+      setSrc(null);
+      return;
+    }
+    const url = URL.createObjectURL(file);
+    setSrc(url);
+    return () => URL.revokeObjectURL(url);
+  }, [file]);
+
+  const handleConfirm = async () => {
+    const img = imgRef.current;
+    if (!img || !file) return;
+
+    const size = 256;
+    const canvas = document.createElement("canvas");
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const iw = img.naturalWidth;
+    const ih = img.naturalHeight;
+    const side = Math.min(iw, ih) / scale;
+    const sx = (iw - side) / 2;
+    const sy = (ih - side) / 2;
+
+    ctx.drawImage(img, sx, sy, side, side, 0, 0, size, size);
+
+    const blob = await new Promise<Blob | null>((resolve) =>
+      canvas.toBlob(resolve, "image/jpeg", 0.92),
+    );
+    if (!blob) return;
+
+    const cropped = new File([blob], file.name.replace(/\.\w+$/, "") + ".jpg", {
+      type: "image/jpeg",
+    });
+    onConfirm(cropped);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle>{t("dataEntry.upload.cropTitle")}</DialogTitle>
+        </DialogHeader>
+        <div className="ui-stack-sm">
+          <div
+            className={cn(
+              "bg-muted relative mx-auto size-48 overflow-hidden rounded-full border",
+              "flex items-center justify-center",
+            )}
+          >
+            {src ? (
+              <img
+                ref={imgRef}
+                src={src}
+                alt=""
+                className="size-full object-cover transition-transform duration-150"
+                style={{ transform: `scale(${scale})` }}
+              />
+            ) : null}
+          </div>
+          <div className="ui-stack-xs px-2">
+            <span className="text-muted-foreground text-xs">{t("dataEntry.upload.cropZoom")}</span>
+            <Slider
+              min={1}
+              max={2.5}
+              step={0.05}
+              value={[scale]}
+              onValueChange={(v) => setScale(v[0] ?? 1)}
+              aria-label={t("dataEntry.upload.cropZoom")}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            {t("common.cancel")}
+          </Button>
+          <Button onClick={() => void handleConfirm()}>{t("dataEntry.upload.cropConfirm")}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/data-entry/upload-types.ts

@@ -0,0 +1,86 @@
+/** Upload item — maps to media-service after `onUpload` resolves `mediaId`. */
+export type UploadFileStatus = "idle" | "uploading" | "done" | "error" | "removed";
+
+export type UploadFileItem = {
+  /** Stable key for list reconciliation */
+  uid: string;
+  name: string;
+  size: number;
+  mimeType?: string;
+  /** Blob URL or media-service download URL */
+  previewUrl?: string;
+  /** Set after issue → PUT → complete */
+  mediaId?: string;
+  status: UploadFileStatus;
+  error?: string;
+  /** Local file before / during upload */
+  file?: File;
+  /**
+   * Draft-only: marked for soft-delete on form commit.
+   * Undo clears this before save — media-service has no restore API.
+   */
+  pendingDelete?: boolean;
+  /**
+   * Draft-only: replacement staged locally; baseline kept for undo.
+   */
+  pendingReplace?: boolean;
+  /** mediaId to soft-delete on commit when `pendingReplace` */
+  replacesMediaId?: string;
+};
+
+export type UploadVariant =
+  | "dropzone"
+  | "button"
+  | "picture-card"
+  | "picture"
+  | "avatar"
+  | "avatar-crop";
+
+/** Actions parent runs on form submit (media-service). */
+export type UploadCommitAction = {
+  /** Soft-delete on save — no restore API */
+  deleteMediaIds: string[];
+  /** Temp uploads already completed via `onUpload` — promote on save */
+  promoteMediaIds: string[];
+};
+
+export function createUploadItem(file: File, partial?: Partial<UploadFileItem>): UploadFileItem {
+  const previewUrl = file.type.startsWith("image/") ? URL.createObjectURL(file) : undefined;
+  return {
+    uid: partial?.uid ?? crypto.randomUUID(),
+    name: file.name,
+    size: file.size,
+    mimeType: file.type,
+    previewUrl,
+    status: "idle",
+    file,
+    ...partial,
+  };
+}
+
+export function revokePreviewUrl(item: UploadFileItem | null | undefined) {
+  if (item?.previewUrl?.startsWith("blob:")) URL.revokeObjectURL(item.previewUrl);
+}
+
+export function collectUploadCommitActions(items: UploadFileItem[]): UploadCommitAction {
+  const deleteMediaIds: string[] = [];
+  const promoteMediaIds: string[] = [];
+
+  for (const item of items) {
+    if (item.pendingDelete && item.mediaId) {
+      deleteMediaIds.push(item.mediaId);
+      continue;
+    }
+    if (item.pendingReplace && item.replacesMediaId) {
+      deleteMediaIds.push(item.replacesMediaId);
+    }
+    if (item.mediaId && !item.pendingDelete && item.status !== "error") {
+      promoteMediaIds.push(item.mediaId);
+    }
+  }
+
+  return {
+    deleteMediaIds: [...new Set(deleteMediaIds)],
+    promoteMediaIds: [...new Set(promoteMediaIds)],
+  };
+}