@vuer-ai/vuer-uikit 0.0.96 → 0.0.98

package/src/ui/tooltip.tsx

@@ -0,0 +1,171 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { ComponentProps, useEffect, useState } from "react";
+
+import { cn } from "../hooks";
+
+/**
+ * Provider for tooltip behavior; renders children during SSR to avoid mismatch.
+ */
+function TooltipProvider({
+  delayDuration = 0,
+  children,
+  ...props
+}: ComponentProps<typeof TooltipPrimitive.Provider>) {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  // Don't render anything during SSR
+  if (!isClient) {
+    return <>{children}</>;
+  }
+
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    >
+      {children}
+    </TooltipPrimitive.Provider>
+  );
+}
+
+/**
+ * Wrapper root for a tooltip. Skips tooltip logic during SSR.
+ */
+function Tooltip({ children, ...props }: ComponentProps<typeof TooltipPrimitive.Root>) {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  // During SSR, just render children without tooltip functionality
+  if (!isClient) {
+    return <>{children}</>;
+  }
+
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props}>
+        {children}
+      </TooltipPrimitive.Root>
+    </TooltipProvider>
+  );
+}
+
+/**
+ * Element that triggers the tooltip.
+ */
+function TooltipTrigger({ ...props }: ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  // During SSR, just render children without tooltip functionality
+  if (!isClient) {
+    return <>{props.children}</>;
+  }
+
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+/**
+ * Floating tooltip content panel.
+ */
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  side,
+  ...props
+}: ComponentProps<typeof TooltipPrimitive.Content>) {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  // During SSR, don't render tooltip content
+  if (!isClient) {
+    return null;
+  }
+
+  const getLiquidBgClass = (side?: string) => {
+    switch (side) {
+      case "top":
+        return "liquid:liquid-bg-tooltip-top";
+      case "bottom":
+        return "liquid:liquid-bg-tooltip-bottom";
+      case "left":
+        return "liquid:liquid-bg-tooltip-left";
+      case "right":
+        return "liquid:liquid-bg-tooltip-right";
+      default:
+        return "liquid:liquid-bg-tooltip-content";
+    }
+  };
+
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        side={side}
+        className={cn(
+          "bg-bg-primary",
+          getLiquidBgClass(side),
+          "text-text-primary",
+          "animate-in",
+          "text-uk-sm",
+          "leading-uk-sm",
+          "rounded-uk-md",
+          "px-lg",
+          "py-md",
+          "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+          "liquid:shadow-none",
+          "fade-in-0",
+          "zoom-in-95",
+          "data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0",
+          "data-[state=closed]:zoom-out-95",
+          "data-[side=bottom]:slide-in-from-top-2",
+          "data-[side=left]:slide-in-from-right-2",
+          "data-[side=right]:slide-in-from-left-2",
+          "data-[side=top]:slide-in-from-bottom-2",
+          "z-50",
+          "w-fit",
+          "origin-(--radix-tooltip-content-transform-origin)",
+          "text-balance",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow asChild>
+          <div
+            className={cn(
+              "z-50",
+              "h-[9px] w-[15px]",
+              "border-none",
+              "bg-bg-primary",
+              "liquid:liquid-bg-tooltip-arrow",
+              "relative",
+            )}
+            style={{
+              clipPath: "polygon(50% 100%, 0% 0%, 100% 0%)",
+              borderRadius: "1px 1px 0 0",
+            }}
+          />
+        </TooltipPrimitive.Arrow>
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

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

@@ -0,0 +1,88 @@
+import { CaseSensitive, Regex, Search } from "lucide-react";
+import React from "react";
+
+import { cn } from "../../hooks";
+import { InputRoot, InputSlot } from "../inputs/input";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip";
+
+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;
+  className?: string;
+};
+
+export function TreeSearchBar({
+  searchQuery,
+  setSearchQuery,
+  isCaseSensitive,
+  setIsCaseSensitive,
+  isRegex,
+  setIsRegex,
+  isRegexValid,
+  searchResultsCount,
+  className,
+}: TreeSearchBarProps) {
+  return (
+    <div className={cn("shrink-0", className)}>
+      <InputRoot
+        type="text"
+        placeholder="Search..."
+        size="sm"
+        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>
+      {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>
+  );
+}

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

@@ -0,0 +1,232 @@
+import { ChevronDown } from "lucide-react";
+import { type ReactNode } from "react";
+
+import { TreeDataItem, TreeDataItemWithMeta } from "./types";
+import { cn } from "../../hooks";
+
+/**
+ * Props for the view-only tree component
+ */
+export type TreeViewProps<T extends TreeDataItem> = {
+  data: TreeDataItemWithMeta<T>[];
+  getIcon: (item: T, expanded?: boolean) => ReactNode;
+  expandedItems?: Set<string>;
+  onToggleItem?: (id: string) => void;
+  onItemHover?: (id: string | null) => void;
+  hoveredId?: string | null;
+  isSelectable?: boolean;
+  selectedItemId?: string | null;
+  onSelectChange?: (id: string | null) => void;
+  hideExpand?: boolean;
+  hasDescendants?: (id: string) => boolean;
+  renderLabel?: (label: string, itemId: string) => ReactNode;
+  className?: string;
+};
+
+/**
+ * TreeView component - a simple wrapper that maps over data.
+ * For more control, use TreeEntryItem directly.
+ * Wrap with SyncScroll if synchronized scrolling is needed.
+ */
+export function TreeView<T extends TreeDataItem>({
+  data,
+  getIcon,
+  expandedItems,
+  onToggleItem,
+  onItemHover,
+  hoveredId,
+  isSelectable = false,
+  selectedItemId,
+  onSelectChange,
+  hideExpand = false,
+  hasDescendants = () => false,
+  renderLabel = (label) => label,
+  className,
+}: TreeViewProps<T>) {
+  return (
+    <div className={cn("flex-1 overflow-y-auto", className)}>
+      {data.map((item) => (
+        <TreeEntryItem
+          key={item.id}
+          item={item}
+          hoveredId={hoveredId}
+          onItemHover={onItemHover}
+          isSelectable={isSelectable}
+          selectedItemId={selectedItemId}
+          onSelectChange={onSelectChange}
+          expandedItems={expandedItems}
+          toggleItem={onToggleItem}
+          hideExpand={hideExpand}
+          hasDescendants={hasDescendants}
+          getIcon={getIcon}
+          renderLabel={renderLabel}
+          dataWithMeta={data}
+        />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Individual tree entry item component - can be used directly for custom implementations
+ */
+export function TreeEntryItem<T extends TreeDataItem>({
+  item,
+  hoveredId,
+  onItemHover,
+  isSelectable,
+  selectedItemId,
+  onSelectChange,
+  expandedItems,
+  toggleItem = () => {},
+  hideExpand = false,
+  hasDescendants = () => false,
+  getIcon = () => null,
+  renderLabel = (label) => label,
+  dataWithMeta = [],
+}: {
+  item: TreeDataItemWithMeta<T>;
+  hoveredId?: string | null;
+  onItemHover?: (id: string | null) => void;
+  isSelectable?: boolean;
+  selectedItemId?: string | null;
+  onSelectChange?: (id: string | null) => void;
+  expandedItems?: Set<string>;
+  toggleItem?: (id: string) => void;
+  hideExpand?: boolean;
+  hasDescendants?: (id: string) => boolean;
+  getIcon?: (item: T, expanded?: boolean) => ReactNode;
+  renderLabel?: (label: string, itemId: string) => ReactNode;
+  dataWithMeta?: TreeDataItemWithMeta<T>[];
+}) {
+  const handleItemSelect = () => {
+    if (!item.disable && isSelectable && onSelectChange) {
+      onSelectChange(selectedItemId === item.id ? null : item.id);
+    }
+  };
+
+  // Ensure we have the required metadata
+  const ancestors = item.ancestors || [];
+  const indent = item.indent || 0;
+  const isLast = item.isLast !== undefined ? item.isLast : false;
+
+  return (
+    <div
+      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={handleItemSelect}
+    >
+      {/* Guidelines */}
+      <div className="absolute top-0 left-[-0.28rem] z-0 flex h-full items-center">
+        {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",
+              )}
+            />
+          );
+        })}
+        {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",
+                isLast ? "rounded-bl-md" : "",
+                "border-line-primary",
+              )}
+            />
+            {!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 font-light whitespace-nowrap"
+        style={{ paddingLeft: `${indent * 1.25 + 0.5}rem` }}
+      >
+        <div className="flex min-w-0 flex-1 items-center gap-1">
+          {!hideExpand && hasDescendants(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 transition-transform",
+                    expandedItems && !expandedItems?.has(item.id) && "-rotate-90",
+                    item.disable && "text-icon-tertiary",
+                  )}
+                  strokeWidth={1.5}
+                />
+              </button>
+              <div
+                className={cn(
+                  "flex size-4 items-center justify-center",
+                  item.disable && "text-icon-tertiary",
+                )}
+              >
+                {getIcon(item, expandedItems?.has?.(item.id))}
+              </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 && !expandedItems?.has(item.id) && "-rotate-90",
+                      item.disable && "text-icon-tertiary",
+                    )}
+                    strokeWidth={1.5}
+                  />
+                </button>
+              )}
+              <div
+                className={cn(
+                  "cursor-pointer transition-opacity",
+                  item.isCollapsible && "group-hover:opacity-0",
+                  item.disable && "text-icon-tertiary",
+                )}
+              >
+                {getIcon(item, expandedItems?.has(item.id))}
+              </div>
+            </div>
+          )}
+          <span className={cn("truncate", item.disable && "text-text-tertiary")}>
+            {renderLabel(item.label, item.id)}
+          </span>
+        </div>
+        {item.actions && (
+          <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
+            {item.actions}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}