Initial commit

2025-11-30 09:05:04 +08:00
commit 7afdd6601b
69 changed files with 9552 additions and 0 deletions
--- a/docs/components/tree-view.md
+++ b/docs/components/tree-view.md
@@ -0,0 +1,98 @@
+1. Home
+2. Components
+3. Simple Tree View
+
+# SimpleTreeView
+
+## Types
+
+```typescript
+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 IconComponent = React.ComponentType<{ className?: string }>;
+```
+
+# Simple Tree View
+
+## Props
+
+### SimpleTreeView
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| data | `TreeDataItem[] | TreeDataItem` |
+| initialSelectedItemId | string | Preselect an item and auto-expand ancestors |
+| onSelectChange | (item?: TreeDataItem) => void | Callback when selection changes |
+| expandAll | boolean | Expand all nodes initially |
+| defaultNodeIcon | IconComponent | Default icon for nodes |
+| defaultLeafIcon | IconComponent | Default icon for leaves |
+| onDocumentDrag | (source: TreeDataItem, target: TreeDataItem) => void | Drag and drop callback |
+
+### TreeDataItem
+
+```ts
+type TreeDataItem = {
+  id: string;
+  name: string;
+  icon?: ComponentType<SVGProps<SVGSVGElement>>;
+  selectedIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+  openIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+  children?: TreeDataItem[];
+  actions?: React.ReactNode;
+  onClick?: () => void;
+  draggable?: boolean;
+  droppable?: boolean;
+  disabled?: boolean;
+}
+```
+
+- Item 1
+- Item 2
+- Item 3
+
+```jsx
+const data = [
+  { id: '1', name: 'Item 1', icon: ArrowRight,
+    children: [
+      { id: '2', name: 'Item 1.1', icon: AlarmClock,
+        children: [
+          { id: '3', name: 'Item 1.1.1', icon: Ambulance },
+          { id: '4', name: 'Item 1.1.2', icon: Angry },
+        ],
+      },
+      { id: '5', name: 'Item 1.2 (disabled)', icon: Album, disabled: true },
+    ],
+  }, {
+    id: '6', name: 'Item 2',
+    children: [
+      { id: '7', name: 'Item 2.1', icon: AlignCenterHorizontal },
+      { id: '8', name: 'Item 2.2', icon: Blend,
+        children: [
+          { id: '9', name: 'Item 2.2.1', icon: Bird },
+          { id: '10', name: 'Item 2.2.2', icon: Biohazard,
+            children: [
+              { id: '11', name: 'Item 2.2.2.1', icon: Cannabis },
+              { id: '12', name: 'Item 2.2.2.2 Item 2.2.2.2 Item 2.2.2.2 Item 2.2.2.2 Item 2.2.2.2', icon: Cannabis }
+            ]
+          },
+        ],
+      },
+    ],
+  },
+  { id: '13', name: 'Item 3' }
+];
+
+<SimpleTreeView data={treeData} className="w-[260px]" />
+```