@godxjp/ui 6.0.0 → 6.0.1

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

@@ -1,279 +0,0 @@
-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

@@ -1,221 +0,0 @@
-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

@@ -1,109 +0,0 @@
-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

@@ -1,86 +0,0 @@
-/** 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)],
-  };
-}