@ii_elif_ii/ui-node-tree 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +123 -0
- package/dist/index.cjs +880 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.css +87 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.mts +120 -0
- package/dist/index.d.ts +120 -0
- package/dist/index.js +843 -0
- package/dist/index.js.map +1 -0
- package/dist/node-tree.css +87 -0
- package/dist/node-tree.css.map +1 -0
- package/dist/node-tree.d.mts +2 -0
- package/dist/node-tree.d.ts +2 -0
- package/package.json +60 -0
package/README.md
ADDED
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
# @ii_elif_ii/ui-node-tree
|
|
2
|
+
|
|
3
|
+
Animated React node-tree component with configurable layouts and SVG connection lines.
|
|
4
|
+
Built primarily for my personal use.
|
|
5
|
+
|
|
6
|
+
## Install
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
npm install @ii_elif_ii/ui-node-tree
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
Peer dependencies (install in consuming app if needed):
|
|
13
|
+
|
|
14
|
+
- `react`
|
|
15
|
+
- `react-dom`
|
|
16
|
+
|
|
17
|
+
## Usage
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
import * as React from "react";
|
|
21
|
+
import { NodeTree, type TreeNode } from "@ii_elif_ii/ui-node-tree";
|
|
22
|
+
import "@ii_elif_ii/ui-node-tree/styles.css";
|
|
23
|
+
|
|
24
|
+
const tree: TreeNode[] = [
|
|
25
|
+
{
|
|
26
|
+
id: "root",
|
|
27
|
+
render: ({ node }) => <div className="rounded border p-3">{node.id}</div>,
|
|
28
|
+
children: {
|
|
29
|
+
layout: "row",
|
|
30
|
+
nodes: [
|
|
31
|
+
{ id: "child-1", render: ({ node }) => <div>{node.id}</div> },
|
|
32
|
+
{ id: "child-2", render: ({ node }) => <div>{node.id}</div> },
|
|
33
|
+
],
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
];
|
|
37
|
+
|
|
38
|
+
export function Demo() {
|
|
39
|
+
return (
|
|
40
|
+
<NodeTree
|
|
41
|
+
nodeTree={tree}
|
|
42
|
+
debug={false}
|
|
43
|
+
className={{ frame: "my-node-frame" }}
|
|
44
|
+
layout={{ direction: "down", root: "stack", gap: 64 }}
|
|
45
|
+
connection={{ color: "rgba(255,255,255)", width: 1, opacity: 0.15 }}
|
|
46
|
+
animation={{ durationMs: 2000 }}
|
|
47
|
+
nodeFrame={{ style: { borderRadius: 12 } }}
|
|
48
|
+
/>
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## API
|
|
54
|
+
|
|
55
|
+
### `NodeTree`
|
|
56
|
+
|
|
57
|
+
Main React component that renders the tree and animated SVG connections.
|
|
58
|
+
|
|
59
|
+
### `TreeNode`
|
|
60
|
+
|
|
61
|
+
Node model for `nodeTree`.
|
|
62
|
+
|
|
63
|
+
```ts
|
|
64
|
+
type TreeNode<TData = unknown> = {
|
|
65
|
+
id: string;
|
|
66
|
+
data?: TData;
|
|
67
|
+
render: (context: TreeNodeRenderContext<TData>) => React.ReactNode;
|
|
68
|
+
children?: {
|
|
69
|
+
layout?: "stack" | "row";
|
|
70
|
+
nodes: TreeNode<TData>[];
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### `TreeNodeRenderContext`
|
|
76
|
+
|
|
77
|
+
Render callback context:
|
|
78
|
+
|
|
79
|
+
- `node`: current `TreeNode`
|
|
80
|
+
- `index`: sibling index
|
|
81
|
+
- `depth`: depth from root (`0` for root)
|
|
82
|
+
- `parentId`: parent node id (undefined for root)
|
|
83
|
+
- `path`: ancestor path ending with current node id
|
|
84
|
+
- `isLeaf`: whether node has no children
|
|
85
|
+
- `childCount`: direct children count
|
|
86
|
+
- `isNodeAnimationDone`: whether node enter animation has finished
|
|
87
|
+
|
|
88
|
+
### `NodeTreeProps`
|
|
89
|
+
|
|
90
|
+
Props for `NodeTree`:
|
|
91
|
+
|
|
92
|
+
- `nodeTree: TreeNode[]` root nodes to render
|
|
93
|
+
- `className?: NodeTreeClassNameOptions` slot classes (`root`, `canvas`, `renderer`, `frame`, `connections`)
|
|
94
|
+
- `layout?: NodeTreeLayoutOptions` layout config
|
|
95
|
+
- `align?: "center" | "start" | "end" | { x, y }`
|
|
96
|
+
- `direction?: "down" | "right"`
|
|
97
|
+
- `root?: "stack" | "row"`
|
|
98
|
+
- `gap?: number`
|
|
99
|
+
- `padding?: number`
|
|
100
|
+
- `containerPadding?: number`
|
|
101
|
+
- `connection?: NodeTreeConnectionOptions`
|
|
102
|
+
- `color?: string`
|
|
103
|
+
- `width?: number`
|
|
104
|
+
- `opacity?: number`
|
|
105
|
+
- `animation?: NodeTreeAnimationOptions`
|
|
106
|
+
- `durationMs?: number`
|
|
107
|
+
- `nodeFrame?: NodeTreeFrameOptions`
|
|
108
|
+
- `style?: React.CSSProperties`
|
|
109
|
+
- `debug?: boolean`
|
|
110
|
+
|
|
111
|
+
### Exported Types
|
|
112
|
+
|
|
113
|
+
- `TreeNode`
|
|
114
|
+
- `TreeNodeChildren`
|
|
115
|
+
- `TreeNodeRenderContext`
|
|
116
|
+
- `TreeNodeEdge`
|
|
117
|
+
- `NodeTreeProps`
|
|
118
|
+
- `NodeTreeLayoutOptions`
|
|
119
|
+
- `NodeTreeConnectionOptions`
|
|
120
|
+
- `NodeTreeAnimationOptions`
|
|
121
|
+
- `NodeTreeClassNameOptions`
|
|
122
|
+
- `NodeTreeFrameOptions`
|
|
123
|
+
- `NodeFrameProps`
|