@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/components/HierarchicalSelectionMenu.tsx

@@ -0,0 +1,432 @@
+import { cn } from "../support/utils";
+import { Check, ChevronRight, Folder, Search, X } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import {
+    FieldError,
+    FieldValidationProps,
+    resolveFieldErrors,
+    ERROR_OUTLINE_CLASSES,
+} from "./form-error";
+
+export interface HierarchicalItem {
+    id: string;
+    name: string;
+    parentId: string | null;
+    children?: HierarchicalItem[] | null;
+    [key: string]: any;
+}
+
+export interface HierarchicalSelectionMenuProps extends FieldValidationProps {
+    items: HierarchicalItem[];
+    value: string | null;
+    onChange: (id: string | null, item?: HierarchicalItem | null) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyMessage?: string;
+    id?: string;
+    className?: string;
+    selectedLabel?: string;
+    selectedItem?: HierarchicalItem | any;
+}
+
+export function HierarchicalSelectionMenu({
+    items,
+    value,
+    onChange,
+    placeholder = "Select classification...",
+    searchPlaceholder = "Search classifications...",
+    emptyMessage = "No classifications found.",
+    id,
+    className,
+    selectedLabel,
+    selectedItem,
+    error,
+    errors,
+    payloadKey = "category",
+    errorKey,
+    containerClassName,
+    errorClassName,
+}: HierarchicalSelectionMenuProps) {
+    const resolvedErrors = useMemo(() => {
+        const key = payloadKey || errorKey || id || "category";
+        return resolveFieldErrors(error, errors, key);
+    }, [error, errors, payloadKey, errorKey, id]);
+
+    const hasError = resolvedErrors.length > 0;
+    const errorId = id ? `${id}-error` : undefined;
+
+    const [searchQuery, setSearchQuery] = useState("");
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    // Build parent maps for easy path traversal
+    const itemMap = useMemo(() => {
+        const map = new Map<string, HierarchicalItem>();
+        const traverse = (item: HierarchicalItem) => {
+            const idStr = String(item.id);
+            const parentIdStr = item.parentId ? String(item.parentId) : null;
+            const normalizedItem = {
+                ...item,
+                id: idStr,
+                parentId: parentIdStr,
+            };
+            map.set(idStr, normalizedItem);
+            if (item.children) {
+                item.children.forEach(traverse);
+            }
+        };
+        items.forEach(traverse);
+        if (selectedItem && selectedItem.id && !map.has(String(selectedItem.id))) {
+            const idStr = String(selectedItem.id);
+            map.set(idStr, {
+                ...selectedItem,
+                id: idStr,
+                name: selectedItem.name || selectedLabel || idStr,
+                parentId: selectedItem.parentId ? String(selectedItem.parentId) : null,
+            });
+        }
+        return map;
+    }, [items, selectedItem, selectedLabel]);
+
+    // Track active path columns
+    const [selectedPath, setSelectedPath] = useState<string[]>([]);
+
+    // Sync selected path with external value changes
+    useEffect(() => {
+        if (!value) {
+            setSelectedPath([]);
+            return;
+        }
+
+        const valStr = String(value);
+        const path: string[] = [];
+        let current = itemMap.get(valStr);
+        while (current) {
+            path.unshift(current.id);
+            const parentId: string | null = current.parentId;
+            current = parentId ? itemMap.get(parentId) : undefined;
+        }
+        setSelectedPath(path);
+    }, [value, itemMap]);
+
+    // Compute path names for breadcrumbs display
+    const activePathNames = useMemo(() => {
+        if (!value) return [];
+        const pathNames: string[] = [];
+        let current = itemMap.get(String(value));
+        while (current) {
+            pathNames.unshift(current.name);
+            const parentId = current.parentId;
+            current = parentId ? itemMap.get(parentId) : undefined;
+        }
+        return pathNames;
+    }, [value, itemMap]);
+
+    // Flat search candidates with breadcrumb paths
+    const flatSearchedItems = useMemo(() => {
+        if (!searchQuery.trim()) return [];
+        const query = searchQuery.toLowerCase();
+        const results: { item: HierarchicalItem; path: string }[] = [];
+
+        const getPathString = (item: HierarchicalItem): string => {
+            const pathArr: string[] = [];
+            let curr: HierarchicalItem | undefined = item;
+            while (curr) {
+                pathArr.unshift(curr.name);
+                const parentId: string | null = curr.parentId;
+                curr = parentId ? itemMap.get(parentId) : undefined;
+            }
+            return pathArr.join(" > ");
+        };
+
+        itemMap.forEach((item) => {
+            if (item.name.toLowerCase().includes(query)) {
+                results.push({
+                    item,
+                    path: getPathString(item),
+                });
+            }
+        });
+
+        return results;
+    }, [searchQuery, itemMap]);
+
+    // Automatically scroll container to the right when path expands
+    useEffect(() => {
+        if (containerRef.current) {
+            containerRef.current.scrollLeft = containerRef.current.scrollWidth;
+        }
+    }, [selectedPath]);
+
+    const handleSelectColumnItem = (level: number, itemId: string) => {
+        const nextPath = selectedPath.slice(0, level);
+        nextPath.push(itemId);
+        setSelectedPath(nextPath);
+        const selectedItem = itemMap.get(String(itemId)) || null;
+        onChange(itemId, selectedItem);
+    };
+
+    const handleSelectSearchResult = (itemId: string) => {
+        const selectedItem = itemMap.get(String(itemId)) || null;
+        onChange(itemId, selectedItem);
+        setSearchQuery("");
+    };
+
+    // Calculate columns data based on selected path
+    const columns = useMemo(() => {
+        const cols: HierarchicalItem[][] = [items];
+
+        for (let i = 0; i < selectedPath.length; i++) {
+            const currentId = selectedPath[i];
+            const currentItem = itemMap.get(currentId);
+            if (
+                currentItem &&
+                currentItem.children &&
+                currentItem.children.length > 0
+            ) {
+                cols.push(currentItem.children);
+            }
+        }
+        return cols;
+    }, [items, selectedPath, itemMap]);
+
+    const activeItem = value
+        ? itemMap.get(String(value)) || (selectedItem ? { ...selectedItem, name: selectedItem.name || selectedLabel } : null)
+        : null;
+
+    return (
+        <div className={cn("w-full", containerClassName)}>
+            <div
+                className={cn(
+                    "flex flex-col w-full bg-dashboard-card/25 border border-dashboard-border rounded-xl p-3 shadow-xs select-none",
+                    className,
+                    hasError && ERROR_OUTLINE_CLASSES,
+                )}
+            >
+            {/* 2-Column Row (Width: 50% each on md+) */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 items-stretch w-full">
+                {/* Left Column (50%): Search Input + Selected Classification Card */}
+                <div className="flex flex-col gap-2 min-w-0">
+                    {/* Search Input bar */}
+                    <div className="relative w-full">
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-dashboard-muted-foreground pointer-events-none" />
+                        <input
+                            type="text"
+                            value={searchQuery}
+                            onChange={(e) => setSearchQuery(e.target.value)}
+                            placeholder={searchPlaceholder}
+                            aria-label={searchPlaceholder}
+                            className="w-full h-9 pl-8.5 pr-8 bg-dashboard-background border border-dashboard-border rounded-lg text-xs font-medium text-dashboard-foreground placeholder:text-dashboard-muted-foreground outline-none focus:border-dashboard-primary transition-all"
+                        />
+                        {searchQuery && (
+                            <button
+                                type="button"
+                                onClick={() => setSearchQuery("")}
+                                className="absolute right-2.5 top-1/2 -translate-y-1/2 p-0.5 text-dashboard-muted-foreground hover:text-dashboard-foreground rounded-md transition-colors cursor-pointer"
+                                aria-label="Clear search"
+                            >
+                                <X className="w-3.5 h-3.5" />
+                            </button>
+                        )}
+                    </div>
+
+                    {/* Active Selection / Breadcrumb Card */}
+                    <div className="flex-1 min-h-[92px] bg-dashboard-background/60 border border-dashboard-border rounded-lg p-2.5 flex flex-col justify-between">
+                        <div className="flex items-center justify-between pb-1 border-b border-dashboard-border">
+                            <span className="text-[10px] font-bold uppercase tracking-wider text-dashboard-muted-foreground">
+                                Selected Classification
+                            </span>
+                            {(activeItem || selectedLabel) && (
+                                <button
+                                    type="button"
+                                    onClick={() => onChange(null, null)}
+                                    className="text-[10px] font-semibold text-dashboard-destructive hover:underline cursor-pointer"
+                                >
+                                    Clear Selection
+                                </button>
+                            )}
+                        </div>
+
+                        <div className="py-1 min-h-[40px] flex items-center">
+                            {activePathNames.length > 1 ? (
+                                <div className="flex items-center gap-1 text-xs text-dashboard-muted-foreground flex-wrap">
+                                    {activePathNames.map((name, i) => (
+                                        <span
+                                            key={i}
+                                            className="flex items-center gap-1"
+                                        >
+                                            {i > 0 && (
+                                                <ChevronRight className="w-3 h-3 text-dashboard-muted-foreground/60 shrink-0 rtl:rotate-180" />
+                                            )}
+                                            <span
+                                                className={cn(
+                                                    i ===
+                                                        activePathNames.length -
+                                                            1
+                                                        ? "font-bold text-dashboard-primary"
+                                                        : "text-dashboard-muted-foreground font-medium",
+                                                )}
+                                            >
+                                                {name}
+                                            </span>
+                                        </span>
+                                    ))}
+                                </div>
+                            ) : (activeItem?.name || selectedLabel) ? (
+                                <span className="text-xs font-bold text-dashboard-primary">
+                                    {activeItem?.name || selectedLabel}
+                                </span>
+                            ) : (
+                                <div className="flex items-center gap-1.5 text-xs text-dashboard-muted-foreground/70 italic">
+                                    <Folder className="w-3.5 h-3.5 text-dashboard-muted-foreground/50 shrink-0" />
+                                    <span>{placeholder}</span>
+                                </div>
+                            )}
+                        </div>
+
+                        <div className="text-[10px] text-dashboard-muted-foreground/80 font-normal">
+                            {searchQuery.trim()
+                                ? `Showing search results (${flatSearchedItems.length}) on the right`
+                                : "Browse or search categories on the right to assign"}
+                        </div>
+                    </div>
+                </div>
+
+                {/* Right Column (50%): Results (Search Results OR Cascading Columns) */}
+                <div className="flex flex-col min-w-0">
+                    {searchQuery.trim() ? (
+                        /* Search results view */
+                        <div className="w-full bg-dashboard-background border border-dashboard-border rounded-lg h-[135px] overflow-y-auto p-1.5 flex flex-col gap-0.5">
+                            {flatSearchedItems.length > 0 ? (
+                                flatSearchedItems.map(({ item, path }) => {
+                                    const isSelected =
+                                        String(item.id) === String(value);
+                                    return (
+                                        <button
+                                            key={item.id}
+                                            onClick={() =>
+                                                handleSelectSearchResult(
+                                                    String(item.id),
+                                                )
+                                            }
+                                            className={cn(
+                                                "flex flex-col items-start w-full px-2.5 py-1.5 rounded-md text-left transition-all border border-transparent cursor-pointer shrink-0",
+                                                isSelected
+                                                    ? "bg-dashboard-primary/10 border-dashboard-primary/20 text-dashboard-primary"
+                                                    : "hover:bg-dashboard-secondary/50 text-dashboard-foreground",
+                                            )}
+                                        >
+                                            <div className="flex items-center justify-between w-full">
+                                                <span className="text-xs font-bold truncate">
+                                                    {item.name}
+                                                </span>
+                                                {isSelected && (
+                                                    <Check className="w-3.5 h-3.5 text-dashboard-primary shrink-0" />
+                                                )}
+                                            </div>
+                                            <span className="text-[10px] text-dashboard-muted-foreground font-medium truncate max-w-full">
+                                                {path}
+                                            </span>
+                                        </button>
+                                    );
+                                })
+                            ) : (
+                                <div className="h-full flex flex-col items-center justify-center p-4 text-center text-xs text-dashboard-muted-foreground">
+                                    <Folder className="w-5 h-5 text-dashboard-muted-foreground/40 mb-1" />
+                                    <span>{emptyMessage}</span>
+                                </div>
+                            )}
+                        </div>
+                    ) : items.length === 0 ? (
+                        <div className="flex flex-col items-center justify-center border border-dashboard-border rounded-lg bg-dashboard-background p-4 h-[135px] text-center">
+                            <Folder className="w-6 h-6 text-dashboard-muted-foreground/40 mb-1.5" />
+                            <span className="text-xs font-semibold text-dashboard-muted-foreground">
+                                {emptyMessage}
+                            </span>
+                        </div>
+                    ) : (
+                        /* Cascading finder-style columns selector */
+                        <div
+                            ref={containerRef}
+                            className="flex overflow-x-auto gap-2 border border-dashboard-border rounded-lg bg-dashboard-background p-1.5 scroll-smooth h-[135px] w-full"
+                        >
+                            {columns.map((columnItems, level) => (
+                                <div
+                                    key={level}
+                                    className="w-40 shrink-0 border-r border-dashboard-border pr-2 last:border-0 last:pr-0 overflow-y-auto h-full flex flex-col gap-0.5 scrollbar-thin"
+                                >
+                                    {columnItems.map((item) => {
+                                        const itemIdStr = String(item.id);
+                                        const isPathActive =
+                                            selectedPath[level] === itemIdStr;
+                                        const isLeafSelected =
+                                            String(value) === itemIdStr;
+                                        const hasChildren = !!(
+                                            item.children &&
+                                            item.children.length > 0
+                                        );
+
+                                        return (
+                                            <button
+                                                key={item.id}
+                                                onClick={() =>
+                                                    handleSelectColumnItem(
+                                                        level,
+                                                        itemIdStr,
+                                                    )
+                                                }
+                                                className={cn(
+                                                    "flex items-center justify-between px-2 py-1 rounded-md text-[11px] font-semibold transition-all border cursor-pointer text-left w-full",
+                                                    isLeafSelected
+                                                        ? "bg-dashboard-primary/20 border-dashboard-primary/40 text-dashboard-primary font-bold shadow-xs"
+                                                        : isPathActive
+                                                          ? "bg-dashboard-primary/10 border-dashboard-primary/20 text-dashboard-primary font-semibold"
+                                                          : "border-transparent hover:bg-dashboard-secondary/50 text-dashboard-foreground",
+                                                )}
+                                            >
+                                                <div className="flex items-center gap-1.5 truncate">
+                                                    <Folder
+                                                        className={cn(
+                                                            "w-3 h-3 shrink-0 transition-colors",
+                                                            isLeafSelected ||
+                                                                isPathActive
+                                                                ? "text-dashboard-primary"
+                                                                : "text-dashboard-muted-foreground",
+                                                        )}
+                                                    />
+                                                    <span className="truncate">
+                                                        {item.name}
+                                                    </span>
+                                                </div>
+                                                {hasChildren ? (
+                                                    <ChevronRight
+                                                        className={cn(
+                                                            "w-3 h-3 shrink-0 transition-colors rtl:rotate-180",
+                                                            isPathActive
+                                                                ? "text-dashboard-primary"
+                                                                : "text-dashboard-muted-foreground",
+                                                        )}
+                                                    />
+                                                ) : (
+                                                    isLeafSelected && (
+                                                        <Check className="w-3 h-3 shrink-0 text-dashboard-primary" />
+                                                    )
+                                                )}
+                                            </button>
+                                        );
+                                    })}
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+        <FieldError
+            id={errorId}
+            errors={resolvedErrors}
+            className={errorClassName}
+        />
+    </div>
+);
+}