@alepha/ui 0.18.2 → 0.19.0

package/src/admin/components/parameters/ParameterTree.tsx

@@ -1,31 +1,17 @@
 import { ActionButton, Flex, Text } from "@alepha/ui";
-import { Collapse, ScrollArea, TextInput, UnstyledButton } from "@mantine/core";
-import {
-  IconChevronDown,
-  IconChevronRight,
-  IconFolder,
-  IconFolderOpen,
-  IconRefresh,
-  IconSearch,
-  IconSettings,
-} from "@tabler/icons-react";
-import type { ParameterTreeNode } from "alepha/api/parameters";
-import { memo, useCallback, useMemo, useState } from "react";
-
-export interface ParameterTreeProps {
-  treeData: ParameterTreeNode[];
-  selectedConfig: string | null;
-  onSelect: (name: string) => void;
-  onRefresh: () => void;
-}
+import { ScrollArea, TextInput } from "@mantine/core";
+import { IconRefresh, IconSearch } from "@tabler/icons-react";
+import type { ParameterTreeNode as ParameterTreeNodeData } from "alepha/api/parameters";
+import { useCallback, useMemo, useState } from "react";
+import ParameterTreeNode from "./ParameterTreeNode.tsx";
 
 /**
  * Filters tree nodes by search query.
  */
 const filterTree = (
-  nodes: ParameterTreeNode[],
+  nodes: ParameterTreeNodeData[],
   query: string,
-): ParameterTreeNode[] => {
+): ParameterTreeNodeData[] => {
   if (!query.trim()) return nodes;
 
   const lowerQuery = query.toLowerCase();
@@ -45,163 +31,16 @@ const filterTree = (
 
       return null;
     })
-    .filter((node): node is ParameterTreeNode => node !== null);
+    .filter((node): node is ParameterTreeNodeData => node !== null);
 };
 
-interface TreeNodeProps {
-  node: ParameterTreeNode;
-  level: number;
-  selectedConfig: string | null;
-  onSelect: (name: string) => void;
-  expandedNodes: Set<string>;
-  onToggle: (path: string) => void;
-}
-
-/**
- * Memoized tree node to prevent unnecessary re-renders.
- */
-const TreeNode = memo(
-  ({
-    node,
-    level,
-    selectedConfig,
-    onSelect,
-    expandedNodes,
-    onToggle,
-  }: TreeNodeProps) => {
-    const [isHovered, setIsHovered] = useState(false);
-    const hasChildren = node.children.length > 0;
-    const isExpanded = expandedNodes.has(node.path);
-    const isSelected = selectedConfig === node.path;
-    const isLeaf = !hasChildren;
-
-    const handleClick = useCallback(() => {
-      if (hasChildren) {
-        onToggle(node.path);
-      } else {
-        onSelect(node.path);
-      }
-    }, [hasChildren, node.path, onToggle, onSelect]);
-
-    const handleMouseEnter = useCallback(() => setIsHovered(true), []);
-    const handleMouseLeave = useCallback(() => setIsHovered(false), []);
-
-    return (
-      <Flex>
-        <UnstyledButton
-          onClick={handleClick}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-          w="100%"
-          style={{ display: "block" }}
-        >
-          <Flex
-            gap={6}
-            wrap="nowrap"
-            p="4px 8px"
-            pl={8 + level * 16}
-            style={{
-              borderRadius: "var(--mantine-radius-sm)",
-              backgroundColor:
-                isSelected || isHovered
-                  ? "var(--mantine-color-default-hover)"
-                  : undefined,
-            }}
-          >
-            {hasChildren ? (
-              <>
-                <Flex
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: 16,
-                  }}
-                >
-                  {isExpanded ? (
-                    <IconChevronDown
-                      size={14}
-                      color="var(--mantine-color-dimmed)"
-                    />
-                  ) : (
-                    <IconChevronRight
-                      size={14}
-                      color="var(--mantine-color-dimmed)"
-                    />
-                  )}
-                </Flex>
-                {isExpanded ? (
-                  <IconFolderOpen
-                    size={16}
-                    color="var(--mantine-color-dimmed)"
-                    style={{ flexShrink: 0 }}
-                  />
-                ) : (
-                  <IconFolder
-                    size={16}
-                    color="var(--mantine-color-dimmed)"
-                    style={{ flexShrink: 0 }}
-                  />
-                )}
-              </>
-            ) : (
-              <>
-                <Flex w={16} />
-                <IconSettings
-                  size={16}
-                  color={
-                    isSelected
-                      ? "var(--mantine-color-blue-6)"
-                      : "var(--mantine-color-dimmed)"
-                  }
-                  style={{ flexShrink: 0 }}
-                />
-              </>
-            )}
-            <Text
-              size="sm"
-              fw={isSelected ? 600 : 400}
-              c={isSelected ? undefined : isLeaf ? undefined : "dimmed"}
-              style={{
-                whiteSpace: "nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-              }}
-            >
-              {node.name}
-            </Text>
-          </Flex>
-        </UnstyledButton>
-
-        {hasChildren && (
-          <Collapse in={isExpanded}>
-            {node.children.map((child: ParameterTreeNode) => (
-              <TreeNode
-                key={child.path}
-                node={child}
-                level={level + 1}
-                selectedConfig={selectedConfig}
-                onSelect={onSelect}
-                expandedNodes={expandedNodes}
-                onToggle={onToggle}
-              />
-            ))}
-          </Collapse>
-        )}
-      </Flex>
-    );
-  },
-);
-
-TreeNode.displayName = "TreeNode";
-
 /**
  * Collects all folder paths to expand by default.
  */
-const collectAllFolderPaths = (nodes: ParameterTreeNode[]): Set<string> => {
+const collectAllFolderPaths = (nodes: ParameterTreeNodeData[]): Set<string> => {
   const paths = new Set<string>();
 
-  const traverse = (nodeList: ParameterTreeNode[]) => {
+  const traverse = (nodeList: ParameterTreeNodeData[]) => {
     for (const node of nodeList) {
       if (node.children.length > 0) {
         paths.add(node.path);
@@ -214,21 +53,26 @@ const collectAllFolderPaths = (nodes: ParameterTreeNode[]): Set<string> => {
   return paths;
 };
 
-const ParameterTree = ({
-  treeData,
-  selectedConfig,
-  onSelect,
-  onRefresh,
-}: ParameterTreeProps) => {
+interface Props {
+  treeData: ParameterTreeNodeData[];
+  selectedConfig: string | null;
+  onSelect: (name: string) => void;
+  onRefresh: () => void;
+}
+
+/**
+ * Parameter tree sidebar with search and refresh.
+ */
+const ParameterTree = (props: Props) => {
   const [searchQuery, setSearchQuery] = useState("");
   const [expandedNodes, setExpandedNodes] = useState<Set<string>>(() =>
-    collectAllFolderPaths(treeData),
+    collectAllFolderPaths(props.treeData),
   );
 
   // Filter tree by search query
   const filteredTreeData = useMemo(
-    () => filterTree(treeData, searchQuery),
-    [treeData, searchQuery],
+    () => filterTree(props.treeData, searchQuery),
+    [props.treeData, searchQuery],
   );
 
   const handleToggle = useCallback((path: string) => {
@@ -270,7 +114,7 @@ const ParameterTree = ({
           <ActionButton
             variant="subtle"
             size="compact-xs"
-            onClick={onRefresh}
+            onClick={props.onRefresh}
             tooltip="Refresh"
           >
             <IconRefresh size={14} />
@@ -293,12 +137,12 @@ const ParameterTree = ({
           ) : (
             <Flex direction="column" gap={0} style={{ gap: 1 }}>
               {filteredTreeData.map((node) => (
-                <TreeNode
+                <ParameterTreeNode
                   key={node.path}
                   node={node}
                   level={0}
-                  selectedConfig={selectedConfig}
-                  onSelect={onSelect}
+                  selectedConfig={props.selectedConfig}
+                  onSelect={props.onSelect}
                   expandedNodes={expandedNodes}
                   onToggle={handleToggle}
                 />

package/src/admin/components/parameters/ParameterTreeNode.tsx

@@ -0,0 +1,151 @@
+import { Flex, Text } from "@alepha/ui";
+import { Collapse, UnstyledButton } from "@mantine/core";
+import {
+  IconChevronDown,
+  IconChevronRight,
+  IconFolder,
+  IconFolderOpen,
+  IconSettings,
+} from "@tabler/icons-react";
+import type { ParameterTreeNode as ParameterTreeNodeData } from "alepha/api/parameters";
+import { memo, useCallback, useState } from "react";
+
+interface Props {
+  node: ParameterTreeNodeData;
+  level: number;
+  selectedConfig: string | null;
+  onSelect: (name: string) => void;
+  expandedNodes: Set<string>;
+  onToggle: (path: string) => void;
+}
+
+/**
+ * Memoized tree node to prevent unnecessary re-renders.
+ */
+const ParameterTreeNode = memo((props: Props) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const hasChildren = props.node.children.length > 0;
+  const isExpanded = props.expandedNodes.has(props.node.path);
+  const isSelected = props.selectedConfig === props.node.path;
+  const isLeaf = !hasChildren;
+
+  const handleClick = useCallback(() => {
+    if (hasChildren) {
+      props.onToggle(props.node.path);
+    } else {
+      props.onSelect(props.node.path);
+    }
+  }, [hasChildren, props.node.path, props.onToggle, props.onSelect]);
+
+  const handleMouseEnter = useCallback(() => setIsHovered(true), []);
+  const handleMouseLeave = useCallback(() => setIsHovered(false), []);
+
+  return (
+    <Flex>
+      <UnstyledButton
+        onClick={handleClick}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        w="100%"
+        style={{ display: "block" }}
+      >
+        <Flex
+          gap={6}
+          wrap="nowrap"
+          p="4px 8px"
+          pl={8 + props.level * 16}
+          style={{
+            borderRadius: "var(--mantine-radius-sm)",
+            backgroundColor:
+              isSelected || isHovered
+                ? "var(--mantine-color-default-hover)"
+                : undefined,
+          }}
+        >
+          {hasChildren ? (
+            <>
+              <Flex
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: 16,
+                }}
+              >
+                {isExpanded ? (
+                  <IconChevronDown
+                    size={14}
+                    color="var(--mantine-color-dimmed)"
+                  />
+                ) : (
+                  <IconChevronRight
+                    size={14}
+                    color="var(--mantine-color-dimmed)"
+                  />
+                )}
+              </Flex>
+              {isExpanded ? (
+                <IconFolderOpen
+                  size={16}
+                  color="var(--mantine-color-dimmed)"
+                  style={{ flexShrink: 0 }}
+                />
+              ) : (
+                <IconFolder
+                  size={16}
+                  color="var(--mantine-color-dimmed)"
+                  style={{ flexShrink: 0 }}
+                />
+              )}
+            </>
+          ) : (
+            <>
+              <Flex w={16} />
+              <IconSettings
+                size={16}
+                color={
+                  isSelected
+                    ? "var(--mantine-color-blue-6)"
+                    : "var(--mantine-color-dimmed)"
+                }
+                style={{ flexShrink: 0 }}
+              />
+            </>
+          )}
+          <Text
+            size="sm"
+            fw={isSelected ? 600 : 400}
+            c={isSelected ? undefined : isLeaf ? undefined : "dimmed"}
+            style={{
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+            }}
+          >
+            {props.node.name}
+          </Text>
+        </Flex>
+      </UnstyledButton>
+
+      {hasChildren && (
+        <Collapse in={isExpanded}>
+          {props.node.children.map((child: ParameterTreeNodeData) => (
+            <ParameterTreeNode
+              key={child.path}
+              node={child}
+              level={props.level + 1}
+              selectedConfig={props.selectedConfig}
+              onSelect={props.onSelect}
+              expandedNodes={props.expandedNodes}
+              onToggle={props.onToggle}
+            />
+          ))}
+        </Collapse>
+      )}
+    </Flex>
+  );
+});
+
+ParameterTreeNode.displayName = "ParameterTreeNode";
+
+export default ParameterTreeNode;

package/src/admin/components/shared/AdminResourceHeader.tsx

@@ -14,8 +14,8 @@ import {
   IconChevronLeft,
   IconExternalLink,
 } from "@tabler/icons-react";
-import { useRouter } from "alepha/react/router";
 import type { ComponentType, ReactNode } from "react";
+import AdminResourceHeaderMenuItem from "./AdminResourceHeaderMenuItem.tsx";
 
 export interface AdminResourceAction {
   label: string;
@@ -107,29 +107,6 @@ export interface AdminResourceHeaderProps {
   loading?: boolean;
 }
 
-const ActionMenuItem = (props: { action: AdminResourceAction }) => {
-  const { action } = props;
-  const router = useRouter();
-
-  const menuItemProps: Record<string, unknown> = {};
-  if (action.href) {
-    Object.assign(menuItemProps, router.anchor(action.href));
-  } else if (action.onClick) {
-    menuItemProps.onClick = action.onClick;
-  }
-
-  return (
-    <Menu.Item
-      leftSection={action.icon ? <action.icon size={16} /> : undefined}
-      color={action.color}
-      disabled={action.disabled}
-      {...menuItemProps}
-    >
-      {action.label}
-    </Menu.Item>
-  );
-};
-
 const AdminResourceHeader = (props: AdminResourceHeaderProps) => {
   const {
     backHref,
@@ -271,7 +248,7 @@ const AdminResourceHeader = (props: AdminResourceHeaderProps) => {
               </Menu.Target>
               <Menu.Dropdown>
                 {menuActions.map((action, index) => (
-                  <ActionMenuItem key={index} action={action} />
+                  <AdminResourceHeaderMenuItem key={index} action={action} />
                 ))}
               </Menu.Dropdown>
             </Menu>

package/src/admin/components/shared/AdminResourceHeaderMenuItem.tsx

@@ -0,0 +1,37 @@
+import { Menu } from "@mantine/core";
+import { useRouter } from "alepha/react/router";
+import type { AdminResourceAction } from "./AdminResourceHeader.tsx";
+
+export interface AdminResourceHeaderMenuItemProps {
+  /**
+   * Action configuration
+   */
+  action: AdminResourceAction;
+}
+
+const AdminResourceHeaderMenuItem = (
+  props: AdminResourceHeaderMenuItemProps,
+) => {
+  const { action } = props;
+  const router = useRouter();
+
+  const menuItemProps: Record<string, unknown> = {};
+  if (action.href) {
+    Object.assign(menuItemProps, router.anchor(action.href));
+  } else if (action.onClick) {
+    menuItemProps.onClick = action.onClick;
+  }
+
+  return (
+    <Menu.Item
+      leftSection={action.icon ? <action.icon size={16} /> : undefined}
+      color={action.color}
+      disabled={action.disabled}
+      {...menuItemProps}
+    >
+      {action.label}
+    </Menu.Item>
+  );
+};
+
+export default AdminResourceHeaderMenuItem;

package/src/admin/components/shared/AdminResourceTabs.tsx

@@ -1,6 +1,6 @@
 import { Tabs } from "@mantine/core";
-import { useActive, useRouter } from "alepha/react/router";
 import type { ComponentType, ReactNode } from "react";
+import AdminResourceTabsItem from "./AdminResourceTabsItem.tsx";
 
 export interface AdminResourceTab {
   /**
@@ -51,30 +51,6 @@ export interface AdminResourceTabsProps {
   children?: ReactNode;
 }
 
-const TabItem = (props: { tab: AdminResourceTab }) => {
-  const { tab } = props;
-  const router = useRouter();
-  const { isActive, isPending } = useActive({ href: tab.href });
-  const anchorProps = router.anchor(tab.href);
-
-  return (
-    <Tabs.Tab
-      value={tab.value}
-      component="a"
-      leftSection={tab.icon ? <tab.icon size={16} /> : undefined}
-      disabled={tab.disabled}
-      data-active={isActive || undefined}
-      style={{
-        opacity: isPending ? 0.6 : 1,
-      }}
-      {...anchorProps}
-    >
-      {tab.label}
-      {tab.count !== undefined && tab.count > 0 && ` (${tab.count})`}
-    </Tabs.Tab>
-  );
-};
-
 const AdminResourceTabs = (props: AdminResourceTabsProps) => {
   const { tabs, activeTab, children } = props;
 
@@ -82,7 +58,7 @@ const AdminResourceTabs = (props: AdminResourceTabsProps) => {
     <Tabs value={activeTab} variant="default">
       <Tabs.List>
         {tabs.map((tab) => (
-          <TabItem key={tab.value} tab={tab} />
+          <AdminResourceTabsItem key={tab.value} tab={tab} />
         ))}
       </Tabs.List>
 

package/src/admin/components/shared/AdminResourceTabsItem.tsx

@@ -0,0 +1,36 @@
+import { Tabs } from "@mantine/core";
+import { useActive, useRouter } from "alepha/react/router";
+import type { AdminResourceTab } from "./AdminResourceTabs.tsx";
+
+export interface AdminResourceTabsItemProps {
+  /**
+   * Tab configuration
+   */
+  tab: AdminResourceTab;
+}
+
+const AdminResourceTabsItem = (props: AdminResourceTabsItemProps) => {
+  const { tab } = props;
+  const router = useRouter();
+  const { isActive, isPending } = useActive({ href: tab.href });
+  const anchorProps = router.anchor(tab.href);
+
+  return (
+    <Tabs.Tab
+      value={tab.value}
+      component="a"
+      leftSection={tab.icon ? <tab.icon size={16} /> : undefined}
+      disabled={tab.disabled}
+      data-active={isActive || undefined}
+      style={{
+        opacity: isPending ? 0.6 : 1,
+      }}
+      {...anchorProps}
+    >
+      {tab.label}
+      {tab.count !== undefined && tab.count > 0 && ` (${tab.count})`}
+    </Tabs.Tab>
+  );
+};
+
+export default AdminResourceTabsItem;