@vuer-ai/vuer-uikit 0.0.96 → 0.0.98

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

@@ -0,0 +1,604 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { cva } from "class-variance-authority";
+import { ChevronRight } from "lucide-react";
+import {
+  forwardRef,
+  HTMLAttributes,
+  useCallback,
+  useMemo,
+  useState,
+  type ComponentType,
+  type SVGProps,
+  type ReactNode,
+  type ElementRef,
+  type ComponentPropsWithoutRef,
+  type DragEvent,
+  type MouseEvent as ReactMouseEvent,
+} from "react";
+
+import { cn, createClientOnlyComponent } from "../hooks";
+
+/**
+ * Base CSS variants for tree row visuals.
+ */
+const treeVariants = cva(
+  "text-text-primary group hover:before:opacity-100 before:absolute before:rounded-uk-sm before:left-0 before:w-full before:opacity-0 before:bg-bg-secondary before:h-[28px] before:z-0",
+);
+
+/** Highlight styling when a row is selected. */
+const selectedTreeVariants = cva("before:opacity-100 before:bg-brand-primary text-text-withbg");
+
+/** Visual style while an item is a drag-over target. */
+const dragOverVariants = cva("before:opacity-100 before:bg-brand-primary/20 text-text-withbg");
+
+type IconComponent = ComponentType<SVGProps<SVGSVGElement>>;
+/**
+ * Tree node data used by `TreeView`.
+ */
+interface TreeDataItem {
+  id: string;
+  name: string;
+  icon?: IconComponent;
+  selectedIcon?: IconComponent;
+  openIcon?: IconComponent;
+  children?: TreeDataItem[];
+  actions?: ReactNode;
+  onClick?: () => void;
+  draggable?: boolean;
+  droppable?: boolean;
+  disabled?: boolean;
+}
+
+/**
+ * Props for the hierarchical tree view component.
+ */
+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;
+};
+
+/**
+ * Interactive tree view supporting expand/collapse and drag-and-drop.
+ */
+const TreeViewRoot = 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 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 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(
+          "px-sm relative w-[300px] w-full overflow-x-auto overflow-y-hidden",
+          className,
+        )}
+      >
+        <TreeItem
+          data={data}
+          ref={ref}
+          selectedItemId={selectedItemId}
+          handleSelectChange={handleSelectChange}
+          expandedItemIds={expandedItemIds}
+          defaultLeafIcon={defaultLeafIcon}
+          defaultNodeIcon={defaultNodeIcon}
+          handleDragStart={handleDragStart}
+          handleDrop={handleDrop}
+          draggedItem={draggedItem}
+          {...props}
+        />
+        <div
+          className="h-[0px] w-full"
+          onDrop={() => {
+            handleDrop({ id: "", name: "parent_div" });
+          }}
+        ></div>
+      </div>
+    );
+  },
+);
+TreeViewRoot.displayName = "TreeViewRoot";
+
+/** SSR fallback rendering for the tree view. */
+const TreeViewFallback = forwardRef<HTMLDivElement, TreeProps>(
+  ({ data, initialSelectedItemId, onSelectChange, className, ...props }, ref) => {
+    const [selectedItemId, setSelectedItemId] = useState<string | undefined>(initialSelectedItemId);
+
+    const dataArray = Array.isArray(data) ? data : [data];
+
+    return (
+      <div
+        ref={ref}
+        className={cn("px-sm relative w-[300px] overflow-hidden", className)}
+        {...props}
+      >
+        <div role="tree">
+          <ul style={{ margin: 0, padding: 0 }}>
+            {dataArray.map((item) => (
+              <li key={item.id} style={{ margin: 0 }}>
+                <div
+                  className={cn(
+                    "py-sm flex items-center pl-[20px] text-left",
+                    treeVariants(),
+                    selectedItemId === item.id && selectedTreeVariants(),
+                  )}
+                  onClick={() => {
+                    setSelectedItemId(item.id);
+                    onSelectChange?.(item);
+                    item.onClick?.();
+                  }}
+                >
+                  <span className="text-uk-sm leading-uk-sm z-10 flex-grow truncate">
+                    {item.name}
+                  </span>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    );
+  },
+);
+TreeViewFallback.displayName = "TreeViewFallback";
+
+const TreeView = createClientOnlyComponent(TreeViewRoot, TreeViewFallback);
+
+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;
+};
+
+/**
+ * Internal renderer that maps an item or array into nodes/leaves.
+ */
+const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
+  (
+    {
+      className,
+      data,
+      selectedItemId,
+      handleSelectChange,
+      expandedItemIds,
+      defaultNodeIcon,
+      defaultLeafIcon,
+      handleDragStart,
+      handleDrop,
+      draggedItem,
+      ...props
+    },
+    ref,
+  ) => {
+    if (!(data instanceof Array)) {
+      data = [data];
+    }
+    return (
+      <div ref={ref} role="tree" className={className} {...props}>
+        <ul style={{ margin: 0, padding: 0 }}>
+          {data.map((item) => (
+            <li key={item.id} style={{ margin: 0 }}>
+              {item.children ? (
+                <TreeNode
+                  item={item}
+                  selectedItemId={selectedItemId}
+                  expandedItemIds={expandedItemIds}
+                  handleSelectChange={handleSelectChange}
+                  defaultNodeIcon={defaultNodeIcon}
+                  defaultLeafIcon={defaultLeafIcon}
+                  handleDragStart={handleDragStart}
+                  handleDrop={handleDrop}
+                  draggedItem={draggedItem}
+                />
+              ) : (
+                <TreeLeaf
+                  item={item}
+                  selectedItemId={selectedItemId}
+                  handleSelectChange={handleSelectChange}
+                  defaultLeafIcon={defaultLeafIcon}
+                  handleDragStart={handleDragStart}
+                  handleDrop={handleDrop}
+                  draggedItem={draggedItem}
+                />
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  },
+);
+TreeItem.displayName = "TreeItem";
+
+/**
+ * A node item that can expand to show children.
+ */
+const TreeNode = ({
+  item,
+  handleSelectChange,
+  expandedItemIds,
+  selectedItemId,
+  defaultNodeIcon,
+  defaultLeafIcon,
+  handleDragStart,
+  handleDrop,
+  draggedItem,
+}: {
+  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;
+}) => {
+  const [value, setValue] = useState(expandedItemIds.includes(item.id) ? [item.id] : []);
+  const [isDragOver, setIsDragOver] = 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);
+  };
+
+  const handleSelect = () => {
+    handleSelectChange(item);
+    item.onClick?.();
+  };
+
+  return (
+    <AccordionPrimitive.Root type="multiple" value={value} onValueChange={(s) => setValue(s)}>
+      <AccordionPrimitive.Item value={item.id}>
+        <div
+          className={cn(
+            treeVariants(),
+            selectedItemId === item.id && selectedTreeVariants(),
+            isDragOver && dragOverVariants(),
+          )}
+          onClick={handleSelect}
+          draggable={!!item.draggable}
+          onDragStart={onDragStart}
+          onDragOver={onDragOver}
+          onDragLeave={onDragLeave}
+          onDrop={onDrop}
+        >
+          <AccordionTrigger
+            className={cn(
+              "flex-1",
+              selectedItemId === item.id && "text-text-withbg",
+              isDragOver && "text-text-withbg",
+            )}
+            onClick={(e: ReactMouseEvent) => {
+              e.stopPropagation();
+            }}
+          >
+            <TreeIcon
+              onClick={(e: ReactMouseEvent) => {
+                e.stopPropagation();
+                handleSelect();
+              }}
+              item={item}
+              isSelected={selectedItemId === item.id}
+              isOpen={value.includes(item.id)}
+              default={defaultNodeIcon}
+            />
+            <span
+              className="text-uk-sm leading-uk-sm z-10 truncate"
+              onClick={(e: ReactMouseEvent) => {
+                e.stopPropagation();
+                handleSelect();
+              }}
+            >
+              {item.name}
+            </span>
+            <TreeActions
+              isSelected={selectedItemId === item.id}
+              onClick={(e: ReactMouseEvent) => {
+                e.stopPropagation();
+              }}
+            >
+              {item.actions}
+            </TreeActions>
+          </AccordionTrigger>
+        </div>
+        <AccordionContent className="pl-[20px]">
+          <TreeItem
+            data={item.children ? item.children : item}
+            selectedItemId={selectedItemId}
+            handleSelectChange={handleSelectChange}
+            expandedItemIds={expandedItemIds}
+            defaultLeafIcon={defaultLeafIcon}
+            defaultNodeIcon={defaultNodeIcon}
+            handleDragStart={handleDragStart}
+            handleDrop={handleDrop}
+            draggedItem={draggedItem}
+          />
+        </AccordionContent>
+      </AccordionPrimitive.Item>
+    </AccordionPrimitive.Root>
+  );
+};
+
+/**
+ * A leaf item without children.
+ */
+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;
+  }
+>(
+  (
+    {
+      className,
+      item,
+      selectedItemId,
+      handleSelectChange,
+      defaultLeafIcon,
+      handleDragStart,
+      handleDrop,
+      draggedItem,
+      ...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(
+          "py-sm flex items-center pl-[20px] text-left before:right-1",
+          treeVariants(),
+          className,
+          selectedItemId === item.id && selectedTreeVariants(),
+          isDragOver && dragOverVariants(),
+          item.disabled && "text-text-tertiary pointer-events-none cursor-not-allowed",
+        )}
+        onClick={() => {
+          if (item.disabled) return;
+          handleSelectChange(item);
+          item.onClick?.();
+        }}
+        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-uk-sm leading-uk-sm z-10 flex-grow truncate">{item.name}</span>
+        <TreeActions isSelected={selectedItemId === item.id && !item.disabled}>
+          {item.actions}
+        </TreeActions>
+      </div>
+    );
+  },
+);
+TreeLeaf.displayName = "TreeLeaf";
+
+/**
+ * Styled trigger for collapsible node rows.
+ */
+const AccordionTrigger = forwardRef<
+  ElementRef<typeof AccordionPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header style={{ margin: 0, fontWeight: 400 }}>
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "py-sm flex w-full flex-1 items-center transition-all first:[&[data-state=open]>svg]:rotate-90",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronRight className="z-10 mr-[6px] size-[14px] shrink-0 cursor-pointer transition-transform duration-200" />
+      {children}
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+/**
+ * Styled content area for nested children.
+ */
+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-sm text-text-primary leading-uk-sm z-10 overflow-hidden transition-all",
+      className,
+    )}
+    {...props}
+  >
+    <div>{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+/**
+ * Chooses the most appropriate icon based on selection/open state.
+ */
+const TreeIcon = ({
+  item,
+  isOpen,
+  isSelected,
+  default: defaultIcon,
+  onClick,
+}: {
+  item: TreeDataItem;
+  isOpen?: boolean;
+  isSelected?: boolean;
+  default?: IconComponent;
+  onClick?: (e: ReactMouseEvent) => void;
+}) => {
+  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;
+  }
+  return Icon ? <Icon className="z-10 mr-[6px] size-[14px] shrink-0" onClick={onClick} /> : <></>;
+};
+
+/**
+ * Right-aligned action slot shown when row is active/selected.
+ */
+const TreeActions = ({
+  children,
+  isSelected,
+  onClick,
+}: {
+  children: ReactNode;
+  isSelected: boolean;
+  onClick?: (e: ReactMouseEvent) => void;
+}) => {
+  return (
+    <div
+      className={cn(
+        isSelected ? "block" : "hidden",
+        "absolute right-[10px] z-10 group-hover:block",
+      )}
+      onClick={onClick}
+    >
+      {children}
+    </div>
+  );
+};
+
+export { TreeView as SimpleTreeView, type TreeDataItem as SimpleTreeDataItem };

package/src/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { ComponentProps } from "react";
+
+import { cn } from "../hooks";
+
+function Skeleton({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-bg-secondary rounded-uk-sm animate-pulse", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };