@vuer-ai/vuer-uikit 0.0.96 → 0.0.98

package/src/ui/tree-view-legacy.tsx

@@ -0,0 +1,644 @@
+import { CaseSensitive, ChevronDown, Regex, Search } from "lucide-react";
+import { type ReactNode, useEffect, useMemo, useState } from "react";
+
+import { cn } from "../hooks";
+import { SyncScroll } from "../SyncScroll";
+import { InputRoot, InputSlot } from "./inputs/input";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
+
+/**
+ * Minimal tree node shape used by `TreeViewV2`.
+ */
+export type TreeDataItem = {
+  id: string;
+  parentId: string | null;
+  label: string;
+  isCollapsible?: boolean;
+  actions?: ReactNode;
+  disable?: boolean;
+  [key: string]: unknown;
+};
+
+export type TreeDataItemWithMeta<T extends TreeDataItem> = T & {
+  indent: number;
+  isLast: boolean;
+  ancestors: T[];
+};
+
+/**
+ * Props for the virtualized filterable tree view.
+ */
+export type TreeViewProps<T extends TreeDataItem> = {
+  data: T[];
+  getIcon: (item: T) => ReactNode;
+  onVisibleDataChange?: (data: (T & { indent: number; isLast: boolean; ancestors: T[] })[]) => void;
+  onItemHover?: (id: string | null) => void;
+  className?: string;
+  hoveredId?: string | null;
+  isSelectable?: boolean;
+  selectedItemId?: string | null;
+  onSelectChange?: (id: string | null) => void;
+  isSearchable?: boolean;
+  alwaysShowExpand?: boolean;
+  useSyncScroll?: boolean;
+  // External search state props (optional - will use internal state if not provided)
+  searchQuery?: string;
+  onSearchQueryChange?: (query: string) => void;
+  isCaseSensitive?: boolean;
+  onIsCaseSensitiveChange?: (value: boolean | ((prev: boolean) => boolean)) => void;
+  isRegex?: boolean;
+  onIsRegexChange?: (value: boolean | ((prev: boolean) => boolean)) => void;
+};
+
+/**
+ * Filterable and highlightable tree view with keyboardless interactions.
+ * Supports search (plain or regex), hover highlights, and collapsible nodes.
+ */
+export function TreeView<T extends TreeDataItem>({
+  data,
+  getIcon,
+  onVisibleDataChange,
+  onItemHover,
+  className,
+  hoveredId,
+  isSelectable = false,
+  selectedItemId,
+  onSelectChange,
+  isSearchable = true,
+  alwaysShowExpand = false,
+  useSyncScroll = false,
+  // External search state props
+  searchQuery: externalSearchQuery,
+  onSearchQueryChange: externalOnSearchQueryChange,
+  isCaseSensitive: externalIsCaseSensitive,
+  onIsCaseSensitiveChange: externalOnIsCaseSensitiveChange,
+  isRegex: externalIsRegex,
+  onIsRegexChange: externalOnIsRegexChange,
+}: TreeViewProps<T>) {
+  const [expandedItems, setExpandedItems] = useState(() => {
+    const initial = new Set<string>();
+    data.forEach((item) => {
+      if (item.isCollapsible) initial.add(item.id);
+    });
+    return initial;
+  });
+
+  // Use external search state if provided, otherwise use internal state
+  const [internalSearchQuery, setInternalSearchQuery] = useState("");
+  const [internalIsCaseSensitive, setInternalIsCaseSensitive] = useState(false);
+  const [internalIsRegex, setInternalIsRegex] = useState(false);
+  const [isRegexValid, setIsRegexValid] = useState(true);
+
+  const searchQuery = externalSearchQuery ?? internalSearchQuery;
+  const setSearchQuery = externalOnSearchQueryChange ?? setInternalSearchQuery;
+  const isCaseSensitive = externalIsCaseSensitive ?? internalIsCaseSensitive;
+  const isRegex = externalIsRegex ?? internalIsRegex;
+
+  // Create wrapper functions to handle both function and value setters
+  const setIsCaseSensitive = (value: boolean | ((prev: boolean) => boolean)) => {
+    if (externalOnIsCaseSensitiveChange) {
+      externalOnIsCaseSensitiveChange(value);
+    } else {
+      setInternalIsCaseSensitive(value);
+    }
+  };
+
+  const setIsRegex = (value: boolean | ((prev: boolean) => boolean)) => {
+    if (externalOnIsRegexChange) {
+      externalOnIsRegexChange(value);
+    } else {
+      setInternalIsRegex(value);
+    }
+  };
+
+  const toggleItem = (id: string) => {
+    setExpandedItems((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(id)) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      return newSet;
+    });
+  };
+
+  const handleItemSelect = (id: string) => {
+    if (isSelectable && onSelectChange) {
+      onSelectChange(selectedItemId === id ? null : id);
+    }
+  };
+
+  const hasDescendants = (itemId: string): boolean => {
+    return (childrenMap.get(itemId) || []).length > 0;
+  };
+
+  const childrenMap = useMemo(() => {
+    const map = new Map<string | null, T[]>();
+    data.forEach((item) => {
+      if (!map.has(item.parentId)) {
+        map.set(item.parentId, []);
+      }
+      map.get(item.parentId)!.push(item);
+    });
+    return map;
+  }, [data]);
+
+  const dataWithMeta = useMemo((): TreeDataItemWithMeta<T>[] => {
+    const dataMap = new Map(data.map((item) => [item.id, item]));
+
+    const getAncestors = (item: T) => {
+      const ancestors: T[] = [];
+      let current = item.parentId;
+      while (current) {
+        const parent = dataMap.get(current);
+        if (parent) {
+          ancestors.unshift(parent);
+          current = parent.parentId;
+        } else {
+          break;
+        }
+      }
+      return ancestors;
+    };
+
+    const sortedData: T[] = [];
+    const visited = new Set<string>();
+
+    const traverseNode = (nodeId: string | null, depth: number = 0) => {
+      const children = childrenMap.get(nodeId) || [];
+      children.forEach((child) => {
+        if (!visited.has(child.id)) {
+          visited.add(child.id);
+          sortedData.push(child);
+          traverseNode(child.id, depth + 1);
+        }
+      });
+    };
+
+    traverseNode(null);
+
+    return sortedData.map((item) => {
+      const siblings = childrenMap.get(item.parentId) || [];
+      const isLast = siblings.length > 0 && siblings[siblings.length - 1].id === item.id;
+      const ancestors = getAncestors(item);
+      const indent = ancestors.length;
+      return { ...item, indent, isLast, ancestors };
+    });
+  }, [data, childrenMap]);
+
+  const visibleData = useMemo((): TreeDataItemWithMeta<T>[] => {
+    const dataMap = new Map(data.map((item) => [item.id, item]));
+
+    if (!searchQuery) {
+      const isVisible = (item: { ancestors: T[] }) => {
+        return item.ancestors.every((ancestor) => expandedItems.has(ancestor.id));
+      };
+      return dataWithMeta.filter(isVisible);
+    }
+
+    const matchingAndAncestorIds = new Set<string>();
+    let regex: RegExp | null = null;
+
+    if (isRegex) {
+      try {
+        regex = new RegExp(searchQuery, isCaseSensitive ? "" : "i");
+        if (!isRegexValid) setIsRegexValid(true);
+      } catch {
+        if (isRegexValid) setIsRegexValid(false);
+        return [];
+      }
+    }
+
+    data.forEach((item) => {
+      let labelMatches = false;
+      if (regex) {
+        labelMatches = regex.test(item.label);
+      } else {
+        const source = isCaseSensitive ? item.label : item.label.toLowerCase();
+        const query = isCaseSensitive ? searchQuery : searchQuery.toLowerCase();
+        labelMatches = source.includes(query);
+      }
+
+      if (labelMatches) {
+        matchingAndAncestorIds.add(item.id);
+        let current = item.parentId;
+        while (current) {
+          const parent = dataMap.get(current);
+          if (parent) {
+            matchingAndAncestorIds.add(parent.id);
+            current = parent.parentId;
+          } else {
+            break;
+          }
+        }
+      }
+    });
+
+    return dataWithMeta.filter((item) => matchingAndAncestorIds.has(item.id));
+  }, [searchQuery, dataWithMeta, expandedItems, isCaseSensitive, isRegex, isRegexValid, data]);
+
+  const searchResultsCount = useMemo(() => {
+    if (!searchQuery || !isRegexValid) return 0;
+
+    let count = 0;
+    let regex: RegExp | null = null;
+
+    if (isRegex) {
+      try {
+        regex = new RegExp(searchQuery, isCaseSensitive ? "" : "i");
+      } catch {
+        return 0;
+      }
+    }
+
+    data.forEach((item) => {
+      let labelMatches = false;
+      if (regex) {
+        labelMatches = regex.test(item.label);
+      } else {
+        const source = isCaseSensitive ? item.label : item.label.toLowerCase();
+        const query = isCaseSensitive ? searchQuery : searchQuery.toLowerCase();
+        labelMatches = source.includes(query);
+      }
+
+      if (labelMatches) {
+        count++;
+      }
+    });
+
+    return count;
+  }, [searchQuery, data, isCaseSensitive, isRegex, isRegexValid]);
+
+  useEffect(() => {
+    onVisibleDataChange?.(visibleData);
+  }, [visibleData, onVisibleDataChange]);
+
+  const renderLabel = (label: string) => {
+    if (!searchQuery || !isRegexValid) {
+      return label;
+    }
+
+    let regex;
+    try {
+      regex = new RegExp(`(${searchQuery})`, isCaseSensitive ? "g" : "gi");
+    } catch {
+      return label;
+    }
+
+    const parts = label.split(regex);
+
+    return (
+      <>
+        {parts.map((part, i) =>
+          i % 2 === 1 ? (
+            <span key={i} className="rounded-uk-xs bg-accent-warning">
+              {part}
+            </span>
+          ) : (
+            part
+          ),
+        )}
+      </>
+    );
+  };
+
+  return (
+    <div className={cn("flex flex-col", className)}>
+      {isSearchable && (
+        <TreeSearchBar
+          searchQuery={searchQuery}
+          setSearchQuery={setSearchQuery}
+          isCaseSensitive={isCaseSensitive}
+          setIsCaseSensitive={setIsCaseSensitive}
+          isRegex={isRegex}
+          setIsRegex={setIsRegex}
+          isRegexValid={isRegexValid}
+          searchResultsCount={searchResultsCount}
+        />
+      )}
+      <TreeEntries
+        visibleData={visibleData}
+        hoveredId={hoveredId}
+        onItemHover={onItemHover}
+        isSelectable={isSelectable}
+        selectedItemId={selectedItemId}
+        handleItemSelect={handleItemSelect}
+        expandedItems={expandedItems}
+        toggleItem={toggleItem}
+        alwaysShowExpand={alwaysShowExpand}
+        hasDescendants={hasDescendants}
+        getIcon={getIcon}
+        renderLabel={renderLabel}
+        dataWithMeta={dataWithMeta}
+        useSyncScroll={useSyncScroll}
+      />
+    </div>
+  );
+}
+
+/**
+ * Search bar component for the TreeView
+ */
+export type TreeSearchBarProps = {
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  isCaseSensitive: boolean;
+  setIsCaseSensitive: (value: boolean | ((prev: boolean) => boolean)) => void;
+  isRegex: boolean;
+  setIsRegex: (value: boolean | ((prev: boolean) => boolean)) => void;
+  isRegexValid: boolean;
+  searchResultsCount: number;
+};
+
+export function TreeSearchBar({
+  searchQuery,
+  setSearchQuery,
+  isCaseSensitive,
+  setIsCaseSensitive,
+  isRegex,
+  setIsRegex,
+  isRegexValid,
+  searchResultsCount,
+}: TreeSearchBarProps) {
+  return (
+    <div className="shrink-0">
+      <div className="flex items-center gap-1 py-1">
+        <InputRoot
+          type="text"
+          placeholder="Search..."
+          size="md"
+          className="flex-1"
+          inputClassName={cn(!isRegexValid && "text-red-500")}
+          value={searchQuery}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
+        >
+          <InputSlot side="left">
+            <Search className="text-text-secondary size-4 stroke-1" />
+          </InputSlot>
+          <InputSlot side="right">
+            <TooltipProvider delayDuration={200}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    onClick={() => setIsCaseSensitive((prev) => !prev)}
+                    className={cn(
+                      "rounded-uk-sm mr-1 p-1",
+                      isCaseSensitive ? "bg-shadow-secondary" : "",
+                    )}
+                  >
+                    <CaseSensitive className="size-4" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Case Sensitive</p>
+                </TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    onClick={() => setIsRegex((prev) => !prev)}
+                    className={cn("rounded-uk-sm p-1", isRegex && "bg-shadow-secondary")}
+                  >
+                    <Regex className="size-4" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Use Regular Expression</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </InputSlot>
+        </InputRoot>
+      </div>
+      {searchQuery && isRegexValid && (
+        <div className="flex justify-end px-2 pb-1">
+          <span className="text-uk-xs text-text-secondary">
+            {searchResultsCount} result{searchResultsCount !== 1 ? "s" : ""}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Individual tree entry item component
+ */
+export type TreeEntryItemProps<T extends TreeDataItem> = {
+  item: TreeDataItemWithMeta<T>;
+  hoveredId?: string | null;
+  onItemHover?: (id: string | null) => void;
+  isSelectable?: boolean;
+  selectedItemId?: string | null;
+  handleItemSelect: (id: string) => void;
+  expandedItems: Set<string>;
+  toggleItem: (id: string) => void;
+  alwaysShowExpand?: boolean;
+  hasDescendants: (id: string) => boolean;
+  getIcon: (item: T) => ReactNode;
+  renderLabel: (label: string) => ReactNode;
+  dataWithMeta: TreeDataItemWithMeta<T>[];
+};
+
+export function TreeEntryItem<T extends TreeDataItem>({
+  item,
+  hoveredId,
+  onItemHover,
+  isSelectable,
+  selectedItemId,
+  handleItemSelect,
+  expandedItems,
+  toggleItem,
+  alwaysShowExpand,
+  hasDescendants,
+  getIcon,
+  renderLabel,
+  dataWithMeta,
+}: TreeEntryItemProps<T>) {
+  return (
+    <div
+      key={item.id}
+      className={cn(
+        "group relative flex h-[32px] items-center",
+        isSelectable && "rounded-uk-md",
+        !item.disable && "cursor-pointer",
+        hoveredId === item.id && !item.disable && "bg-bg-secondary",
+        isSelectable && selectedItemId === item.id && "bg-brand-primary text-text-withbg",
+      )}
+      onMouseEnter={() => onItemHover?.(item.id)}
+      onMouseLeave={() => onItemHover?.(null)}
+      onClick={() => !item.disable && handleItemSelect(item.id)}
+    >
+      {/* Guide Lines */}
+      <div className="absolute top-0 left-[-0.28rem] z-0 flex h-full items-center">
+        {item.ancestors.map((ancestor, index) => {
+          const parentIsLast = dataWithMeta.find((d) => d.id === ancestor.id)?.isLast;
+          return (
+            <div
+              key={index}
+              className={cn(
+                "h-full w-[1.25rem]",
+                parentIsLast ? "" : "border-l",
+                "border-line-primary",
+              )}
+            />
+          );
+        })}
+        {item.indent > 0 && (
+          <div className="relative h-full w-[1.24rem]">
+            <div
+              className={cn(
+                "absolute top-0 left-0 h-1/2 w-1/2 border-b border-l",
+                item.isLast ? "rounded-bl-md" : "",
+                "border-line-primary",
+              )}
+            />
+            {!item.isLast && (
+              <div className="border-line-primary absolute top-1/2 left-0 h-1/2 w-1/2 border-l" />
+            )}
+          </div>
+        )}
+      </div>
+
+      <div
+        className="text-uk-md z-10 flex w-full items-center justify-between gap-2 px-2 whitespace-nowrap"
+        style={{ paddingLeft: `${item.indent * 1.25 + 0.5}rem` }}
+      >
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          {alwaysShowExpand && hasDescendants(item.id) && !expandedItems.has(item.id) ? (
+            <>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  toggleItem(item.id);
+                }}
+                className="flex size-4 cursor-pointer items-center justify-center"
+              >
+                <ChevronDown
+                  className={cn(
+                    "size-4 -rotate-90 transition-transform",
+                    item.disable && "text-icon-tertiary",
+                  )}
+                />
+              </button>
+              <div
+                className={cn(
+                  "flex size-4 items-center justify-center",
+                  item.disable && "text-icon-tertiary",
+                )}
+              >
+                {getIcon(item)}
+              </div>
+            </>
+          ) : (
+            <div className="relative flex size-4 items-center justify-center">
+              {item.isCollapsible && (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    toggleItem(item.id);
+                  }}
+                  className="absolute z-20 flex cursor-pointer items-center justify-center opacity-0 transition-opacity group-hover:opacity-100"
+                >
+                  <ChevronDown
+                    className={cn(
+                      "size-4 transition-transform",
+                      !expandedItems.has(item.id) && "-rotate-90",
+                      item.disable && "text-icon-tertiary",
+                    )}
+                  />
+                </button>
+              )}
+              <div
+                className={cn(
+                  "cursor-pointer transition-opacity",
+                  item.isCollapsible && "group-hover:opacity-0",
+                  item.disable && "text-icon-tertiary",
+                )}
+              >
+                {getIcon(item)}
+              </div>
+            </div>
+          )}
+          <span className={cn("truncate", item.disable && "text-text-tertiary")}>
+            {renderLabel(item.label)}
+          </span>
+        </div>
+        {item.actions && (
+          <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
+            {item.actions}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Tree entries wrapper component
+ */
+export type TreeEntriesProps<T extends TreeDataItem> = {
+  visibleData: TreeDataItemWithMeta<T>[];
+  hoveredId?: string | null;
+  onItemHover?: (id: string | null) => void;
+  isSelectable?: boolean;
+  selectedItemId?: string | null;
+  handleItemSelect: (id: string) => void;
+  expandedItems: Set<string>;
+  toggleItem: (id: string) => void;
+  alwaysShowExpand?: boolean;
+  hasDescendants: (id: string) => boolean;
+  getIcon: (item: T) => ReactNode;
+  renderLabel: (label: string) => ReactNode;
+  dataWithMeta: TreeDataItemWithMeta<T>[];
+  useSyncScroll?: boolean;
+  className?: string;
+};
+
+export function TreeEntries<T extends TreeDataItem>({
+  visibleData,
+  hoveredId,
+  onItemHover,
+  isSelectable,
+  selectedItemId,
+  handleItemSelect,
+  expandedItems,
+  toggleItem,
+  alwaysShowExpand,
+  hasDescendants,
+  getIcon,
+  renderLabel,
+  dataWithMeta,
+  useSyncScroll = false,
+  className,
+}: TreeEntriesProps<T>) {
+  const content = visibleData.map((item) => (
+    <TreeEntryItem
+      key={item.id}
+      item={item}
+      hoveredId={hoveredId}
+      onItemHover={onItemHover}
+      isSelectable={isSelectable}
+      selectedItemId={selectedItemId}
+      handleItemSelect={handleItemSelect}
+      expandedItems={expandedItems}
+      toggleItem={toggleItem}
+      alwaysShowExpand={alwaysShowExpand}
+      hasDescendants={hasDescendants}
+      getIcon={getIcon}
+      renderLabel={renderLabel}
+      dataWithMeta={dataWithMeta}
+    />
+  ));
+
+  if (useSyncScroll) {
+    return (
+      <SyncScroll className={cn("scrollbar-track-transparent flex-1", className)}>
+        {content}
+      </SyncScroll>
+    );
+  }
+
+  return <div className={cn("flex-1 overflow-y-auto", className)}>{content}</div>;
+}