@vuer-ai/vuer-uikit 0.0.11 → 0.0.13

package/src/ui/tree-view.tsx

@@ -0,0 +1,550 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { cva } from "class-variance-authority";
+import { ChevronRight, ChevronDown, Folder, File } from "lucide-react";
+import {
+  forwardRef,
+  HTMLAttributes,
+  useCallback,
+  useMemo,
+  useState,
+  type ReactNode,
+  type ElementRef,
+  type ComponentPropsWithoutRef,
+  type DragEvent,
+  type ComponentType,
+  type SVGProps,
+} from "react";
+
+import { cn } from "../utils/cn";
+
+type IconComponent = ComponentType<SVGProps<SVGSVGElement>>;
+
+const treeVariants = cva(
+  "text-uk-md group py-1 h-9 text-text-primary rounded transition-colors cursor-pointer text-left relative z-20",
+);
+
+const selectedTreeVariants = cva("");
+
+const dragOverVariants = cva("bg-primary/20 text-primary-foreground");
+
+interface TreeDataItem {
+  id: string;
+  name: string;
+  icon?: IconComponent;
+  selectedIcon?: IconComponent;
+  openIcon?: IconComponent;
+  children?: TreeDataItem[];
+  actions?: ReactNode;
+  onClick?: () => void;
+  draggable?: boolean;
+  droppable?: boolean;
+  disabled?: boolean;
+}
+
+type TreeProps = HTMLAttributes<HTMLDivElement> & {
+  data: TreeDataItem[] | TreeDataItem;
+  initialSelectedItemId?: string;
+  onSelectChange?: (item: TreeDataItem | undefined) => void;
+  expandAll?: boolean;
+  defaultNodeIcon?: IconComponent;
+  defaultLeafIcon?: IconComponent;
+  onDocumentDrag?: (sourceItem: TreeDataItem, targetItem: TreeDataItem) => void;
+};
+
+const TreeView = forwardRef<HTMLDivElement, TreeProps>(
+  (
+    {
+      data,
+      initialSelectedItemId,
+      onSelectChange,
+      expandAll,
+      defaultLeafIcon,
+      defaultNodeIcon,
+      className,
+      onDocumentDrag,
+      ...props
+    },
+    ref,
+  ) => {
+    const [selectedItemId, setSelectedItemId] = useState<string | undefined>(initialSelectedItemId);
+
+    const [draggedItem, setDraggedItem] = useState<TreeDataItem | null>(null);
+
+    const [hoverBackgroundStyle, setHoverBackgroundStyle] = useState<{
+      display: "block" | "none";
+      top: number;
+      height: number;
+    }>({ display: "none", top: 0, height: 0 });
+
+    const handleSelectChange = useCallback(
+      (item: TreeDataItem | undefined) => {
+        setSelectedItemId(item?.id);
+        if (onSelectChange) {
+          onSelectChange(item);
+        }
+      },
+      [onSelectChange],
+    );
+
+    const handleDragStart = useCallback((item: TreeDataItem) => {
+      setDraggedItem(item);
+    }, []);
+
+    const handleDrop = useCallback(
+      (targetItem: TreeDataItem) => {
+        if (draggedItem && onDocumentDrag && draggedItem.id !== targetItem.id) {
+          onDocumentDrag(draggedItem, targetItem);
+        }
+        setDraggedItem(null);
+      },
+      [draggedItem, onDocumentDrag],
+    );
+
+    const handleItemHover = useCallback((element: HTMLElement | null) => {
+      if (element) {
+        const rect = element.getBoundingClientRect();
+        const containerRect = element.closest("[data-tree-container]")?.getBoundingClientRect();
+        if (containerRect) {
+          setHoverBackgroundStyle({
+            display: "block",
+            top: rect.top - containerRect.top,
+            height: rect.height,
+          });
+        }
+      } else {
+        setHoverBackgroundStyle({ display: "none", top: 0, height: 0 });
+      }
+    }, []);
+
+    const expandedItemIds = useMemo(() => {
+      if (!initialSelectedItemId) {
+        return [] as string[];
+      }
+
+      const ids: string[] = [];
+
+      function walkTreeItems(items: TreeDataItem[] | TreeDataItem, targetId: string) {
+        if (items instanceof Array) {
+          for (let i = 0; i < items.length; i++) {
+            ids.push(items[i]!.id);
+            if (walkTreeItems(items[i]!, targetId) && !expandAll) {
+              return true;
+            }
+            if (!expandAll) ids.pop();
+          }
+        } else if (!expandAll && items.id === targetId) {
+          return true;
+        } else if (items.children) {
+          return walkTreeItems(items.children, targetId);
+        }
+      }
+
+      walkTreeItems(data, initialSelectedItemId);
+      return ids;
+    }, [data, expandAll, initialSelectedItemId]);
+
+    return (
+      <div
+        className={cn(
+          "bg-bg-primary rounded-uk-md relative max-w-[300px] min-w-[240px] overflow-hidden p-2",
+          className,
+        )}
+        data-tree-container
+      >
+        <div
+          className="bg-bg-tertiary rounded-uk-sm pointer-events-none absolute right-2 left-2 z-10 transition-all duration-150"
+          style={{
+            display: hoverBackgroundStyle.display,
+            top: hoverBackgroundStyle.top,
+            height: hoverBackgroundStyle.height,
+          }}
+        />
+        <TreeItem
+          data={data}
+          ref={ref}
+          selectedItemId={selectedItemId}
+          handleSelectChange={handleSelectChange}
+          expandedItemIds={expandedItemIds}
+          defaultLeafIcon={defaultLeafIcon}
+          defaultNodeIcon={defaultNodeIcon}
+          handleDragStart={handleDragStart}
+          handleDrop={handleDrop}
+          draggedItem={draggedItem}
+          onItemHover={handleItemHover}
+          {...props}
+        />
+        <div
+          className="h-[48px] w-full"
+          onDrop={() => {
+            handleDrop({ id: "", name: "parent_div" });
+          }}
+        ></div>
+      </div>
+    );
+  },
+);
+TreeView.displayName = "TreeView";
+
+type TreeItemProps = TreeProps & {
+  selectedItemId?: string;
+  handleSelectChange: (item: TreeDataItem | undefined) => void;
+  expandedItemIds: string[];
+  defaultNodeIcon?: IconComponent;
+  defaultLeafIcon?: IconComponent;
+  handleDragStart?: (item: TreeDataItem) => void;
+  handleDrop?: (item: TreeDataItem) => void;
+  draggedItem: TreeDataItem | null;
+  onItemHover?: (element: HTMLElement | null) => void;
+};
+
+const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
+  (
+    {
+      className,
+      data,
+      selectedItemId,
+      handleSelectChange,
+      expandedItemIds,
+      defaultLeafIcon,
+      defaultNodeIcon,
+      handleDragStart,
+      handleDrop,
+      draggedItem,
+      onItemHover,
+      ...props
+    },
+    ref,
+  ) => {
+    if (!(data instanceof Array)) {
+      data = [data];
+    }
+    return (
+      <div ref={ref} role="tree" className={className} {...props}>
+        <ul style={{ margin: 0, paddingLeft: "1rem" }}>
+          {data.map((item) => (
+            <li key={item.id} style={{ margin: 0 }}>
+              {item.children ? (
+                <TreeNode
+                  item={item}
+                  handleSelectChange={handleSelectChange}
+                  expandedItemIds={expandedItemIds}
+                  selectedItemId={selectedItemId}
+                  defaultNodeIcon={defaultNodeIcon}
+                  defaultLeafIcon={defaultLeafIcon}
+                  handleDragStart={handleDragStart}
+                  handleDrop={handleDrop}
+                  draggedItem={draggedItem}
+                  onItemHover={onItemHover}
+                />
+              ) : (
+                <TreeLeaf
+                  item={item}
+                  selectedItemId={selectedItemId}
+                  handleSelectChange={handleSelectChange}
+                  defaultLeafIcon={defaultLeafIcon}
+                  handleDragStart={handleDragStart}
+                  handleDrop={handleDrop}
+                  draggedItem={draggedItem}
+                  onItemHover={onItemHover}
+                />
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  },
+);
+TreeItem.displayName = "TreeItem";
+
+const TreeNode = ({
+  item,
+  handleSelectChange,
+  expandedItemIds,
+  selectedItemId,
+  defaultNodeIcon,
+  defaultLeafIcon,
+  handleDragStart,
+  handleDrop,
+  draggedItem,
+  onItemHover,
+}: {
+  item: TreeDataItem;
+  handleSelectChange: (item: TreeDataItem | undefined) => void;
+  expandedItemIds: string[];
+  selectedItemId?: string;
+  defaultNodeIcon?: IconComponent;
+  defaultLeafIcon?: IconComponent;
+  handleDragStart?: (item: TreeDataItem) => void;
+  handleDrop?: (item: TreeDataItem) => void;
+  draggedItem: TreeDataItem | null;
+  onItemHover?: (element: HTMLElement | null) => void;
+}) => {
+  const [value, setValue] = useState(expandedItemIds.includes(item.id) ? [item.id] : []);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const onDragStart = (e: DragEvent) => {
+    if (!item.draggable) {
+      e.preventDefault();
+      return;
+    }
+    e.dataTransfer.setData("text/plain", item.id);
+    handleDragStart?.(item);
+  };
+
+  const onDragOver = (e: DragEvent) => {
+    if (item.droppable !== false && draggedItem && draggedItem.id !== item.id) {
+      e.preventDefault();
+      setIsDragOver(true);
+    }
+  };
+
+  const onDragLeave = () => {
+    setIsDragOver(false);
+  };
+
+  const onDrop = (e: DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    handleDrop?.(item);
+  };
+
+  return (
+    <AccordionPrimitive.Root type="multiple" value={value} onValueChange={(s) => setValue(s)}>
+      <AccordionPrimitive.Item value={item.id} className="m-0">
+        <AccordionTrigger
+          style={{ margin: 0 }}
+          className={cn(
+            treeVariants(),
+            selectedItemId === item.id && selectedTreeVariants(),
+            isDragOver && dragOverVariants(),
+            item.disabled &&
+              "hover:bg-bg-primary pointer-events-none cursor-not-allowed opacity-50",
+          )}
+          onClick={() => {
+            if (item.disabled) return;
+            handleSelectChange(item);
+            item.onClick?.();
+          }}
+          onMouseEnter={(e) => {
+            setIsHovered(true);
+            onItemHover?.(e.currentTarget);
+          }}
+          onMouseLeave={() => {
+            setIsHovered(false);
+            onItemHover?.(null);
+          }}
+          draggable={!!item.draggable && !item.disabled}
+          onDragStart={onDragStart}
+          onDragOver={onDragOver}
+          onDragLeave={onDragLeave}
+          onDrop={onDrop}
+        >
+          {isHovered ? (
+            value.includes(item.id) ? (
+              <ChevronDown className="text-text-primary mr-2 h-4 w-4 shrink-0 transition-transform duration-200" />
+            ) : (
+              <ChevronRight className="text-text-primary mr-2 h-4 w-4 shrink-0 transition-transform duration-200" />
+            )
+          ) : (
+            <TreeIcon
+              item={item}
+              isSelected={selectedItemId === item.id}
+              isOpen={value.includes(item.id)}
+              default={defaultNodeIcon}
+            />
+          )}
+          <span className="text-text-primary text-uk-md flex-grow truncate text-left">
+            {item.name}
+          </span>
+          <TreeActions isSelected={selectedItemId === item.id && !item.disabled}>
+            {item.actions}
+          </TreeActions>
+        </AccordionTrigger>
+        <AccordionContent>
+          <TreeItem
+            data={item.children ? item.children : item}
+            selectedItemId={selectedItemId}
+            handleSelectChange={handleSelectChange}
+            expandedItemIds={expandedItemIds}
+            defaultLeafIcon={defaultLeafIcon}
+            defaultNodeIcon={defaultNodeIcon}
+            handleDragStart={handleDragStart}
+            handleDrop={handleDrop}
+            draggedItem={draggedItem}
+            onItemHover={onItemHover}
+          />
+        </AccordionContent>
+      </AccordionPrimitive.Item>
+    </AccordionPrimitive.Root>
+  );
+};
+
+const TreeLeaf = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & {
+    item: TreeDataItem;
+    selectedItemId?: string;
+    handleSelectChange: (item: TreeDataItem | undefined) => void;
+    defaultLeafIcon?: IconComponent;
+    handleDragStart?: (item: TreeDataItem) => void;
+    handleDrop?: (item: TreeDataItem) => void;
+    draggedItem: TreeDataItem | null;
+    onItemHover?: (element: HTMLElement | null) => void;
+  }
+>(
+  (
+    {
+      className,
+      item,
+      selectedItemId,
+      handleSelectChange,
+      defaultLeafIcon,
+      handleDragStart,
+      handleDrop,
+      draggedItem,
+      onItemHover,
+      ...props
+    },
+    ref,
+  ) => {
+    const [isDragOver, setIsDragOver] = useState(false);
+
+    const onDragStart = (e: DragEvent) => {
+      if (!item.draggable || item.disabled) {
+        e.preventDefault();
+        return;
+      }
+      e.dataTransfer.setData("text/plain", item.id);
+      handleDragStart?.(item);
+    };
+
+    const onDragOver = (e: DragEvent) => {
+      if (item.droppable !== false && !item.disabled && draggedItem && draggedItem.id !== item.id) {
+        e.preventDefault();
+        setIsDragOver(true);
+      }
+    };
+
+    const onDragLeave = () => {
+      setIsDragOver(false);
+    };
+
+    const onDrop = (e: DragEvent) => {
+      if (item.disabled) return;
+      e.preventDefault();
+      setIsDragOver(false);
+      handleDrop?.(item);
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "relative flex items-center",
+          treeVariants(),
+          className,
+          selectedItemId === item.id && selectedTreeVariants(),
+          isDragOver && dragOverVariants(),
+          item.disabled && "hover:bg-bg-primary pointer-events-none cursor-not-allowed opacity-50",
+        )}
+        onClick={() => {
+          if (item.disabled) return;
+          handleSelectChange(item);
+          item.onClick?.();
+        }}
+        onMouseEnter={(e) => onItemHover?.(e.currentTarget)}
+        onMouseLeave={() => onItemHover?.(null)}
+        draggable={!!item.draggable && !item.disabled}
+        onDragStart={onDragStart}
+        onDragOver={onDragOver}
+        onDragLeave={onDragLeave}
+        onDrop={onDrop}
+        {...props}
+      >
+        <TreeIcon item={item} isSelected={selectedItemId === item.id} default={defaultLeafIcon} />
+        <span className="text-text-primary text-uk-md flex-grow truncate text-left">
+          {item.name}
+        </span>
+        <TreeActions isSelected={selectedItemId === item.id && !item.disabled}>
+          {item.actions}
+        </TreeActions>
+      </div>
+    );
+  },
+);
+TreeLeaf.displayName = "TreeLeaf";
+
+const AccordionTrigger = forwardRef<
+  ElementRef<typeof AccordionPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header style={{ margin: 0 }}>
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "relative flex w-full flex-1 items-center justify-between text-left font-medium transition-all",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = forwardRef<
+  ElementRef<typeof AccordionPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down text-uk-md overflow-hidden transition-all",
+      className,
+    )}
+    {...props}
+  >
+    <div className="pt-0 pb-0">{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+const TreeIcon = ({
+  item,
+  isOpen,
+  isSelected,
+  default: defaultIcon,
+}: {
+  item: TreeDataItem;
+  isOpen?: boolean;
+  isSelected?: boolean;
+  default?: IconComponent;
+}) => {
+  let Icon = defaultIcon;
+  if (isSelected && item.selectedIcon) {
+    Icon = item.selectedIcon;
+  } else if (isOpen && item.openIcon) {
+    Icon = item.openIcon;
+  } else if (item.icon) {
+    Icon = item.icon;
+  }
+
+  if (!Icon) {
+    Icon = item.children && item.children.length > 0 ? Folder : File;
+  }
+
+  return Icon ? <Icon className="text-text-primary mr-2 h-4 w-4 shrink-0" /> : <></>;
+};
+
+const TreeActions = ({ children, isSelected }: { children: ReactNode; isSelected: boolean }) => {
+  return (
+    <div className={cn(isSelected ? "block" : "hidden", "absolute right-3 group-hover:block")}>
+      {children}
+    </div>
+  );
+};
+
+export { TreeView, type TreeDataItem };

package/src/ui/version-badge.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+
+import { Badge } from "./badge";
+
+// Version info embedded at build time - safe for production
+const PACKAGE_VERSION = "0.0.11";
+const PACKAGE_NAME = "@vuer-ai/vuer-uikit";
+
+interface VersionBadgeProps {
+  /**
+   * Additional CSS classes to apply to the badge
+   */
+  className?: string;
+  /**
+   * Whether to show just the version or include "v" prefix
+   */
+  showPrefix?: boolean;
+  /**
+   * Whether the badge should be clickable (links to npm)
+   */
+  linkable?: boolean;
+  /**
+   * Override the version display (useful for testing)
+   */
+  version?: string;
+}
+
+/**
+ * A badge component that displays the current package version and optionally links to npm
+ */
+export function VersionBadge({
+  className,
+  showPrefix = true,
+  linkable = true,
+  version: overrideVersion,
+}: VersionBadgeProps) {
+  const currentVersion = overrideVersion || PACKAGE_VERSION;
+  const displayVersion = showPrefix ? `v${currentVersion}` : currentVersion;
+  const npmUrl = `https://www.npmjs.com/package/${PACKAGE_NAME}/v/${currentVersion}`;
+
+  const badge = (
+    <Badge
+      variant="accent"
+      className={className}
+      style={linkable ? { cursor: "pointer" } : undefined}
+    >
+      {displayVersion}
+    </Badge>
+  );
+
+  if (linkable) {
+    return (
+      <a
+        href={npmUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="no-underline hover:no-underline"
+      >
+        {badge}
+      </a>
+    );
+  }
+
+  return badge;
+}

package/src/utils/cn.ts

@@ -0,0 +1,21 @@
+import { type ClassValue, clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+
+const twMerge = extendTailwindMerge({
+  override: {
+    classGroups: {
+      "font-size": [
+        "text-uk-xs",
+        "text-uk-sm",
+        "text-uk-md",
+        "text-uk-lg",
+        "text-uk-xl",
+        "text-uk-xxl",
+      ],
+    },
+  },
+});
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from "./cn";
+export * from "./use-local-storage";

package/src/utils/use-local-storage.ts

@@ -0,0 +1,59 @@
+import { useCallback, useState } from "react";
+
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T,
+): [T, (value: T | ((val: T) => T)) => void] {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    if (typeof window === "undefined") {
+      return initialValue;
+    }
+    try {
+      const item = window.localStorage.getItem(key);
+      if (item === null) return initialValue;
+
+      // Handle different data types
+      if (typeof initialValue === "string") {
+        return item as T;
+      } else if (typeof initialValue === "number") {
+        return (parseFloat(item) || initialValue) as T;
+      } else if (typeof initialValue === "boolean") {
+        return (item === "true") as T;
+      } else {
+        // For objects and arrays, parse JSON
+        return JSON.parse(item);
+      }
+    } catch (error) {
+      console.warn(`Error reading localStorage key "${key}":`, error);
+      return initialValue;
+    }
+  });
+
+  const setValue = useCallback(
+    (value: T | ((val: T) => T)) => {
+      try {
+        // Allow value to be a function for functional updates
+        const valueToStore = value instanceof Function ? value(storedValue) : value;
+        setStoredValue(valueToStore);
+
+        // Save to localStorage only on client
+        if (typeof window !== "undefined") {
+          let stringValue: string;
+          if (typeof valueToStore === "string") {
+            stringValue = valueToStore;
+          } else if (typeof valueToStore === "number" || typeof valueToStore === "boolean") {
+            stringValue = valueToStore.toString();
+          } else {
+            stringValue = JSON.stringify(valueToStore);
+          }
+          window.localStorage.setItem(key, stringValue);
+        }
+      } catch (error) {
+        console.warn(`Error setting localStorage key "${key}":`, error);
+      }
+    },
+    [key, storedValue],
+  );
+
+  return [storedValue, setValue];
+}