zebflow 0.6.1

Reactive web automation platform — pipelines, templates, and real-time collaboration in a single binary.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

function toAttrProps(attrs) {
  const out = {};
  if (!attrs || typeof attrs !== "object") {
    return out;
  }
  Object.entries(attrs).forEach(([key, value]) => {
    if (!key) return;
    if (value === null || typeof value === "undefined" || value === false) return;
    out[key] = value === true ? "true" : String(value);
  });
  return out;
}

export interface HierarchyTreeItem {
  id?: string;
  icon?: ReactNode;
  label: ReactNode;
  badge?: ReactNode;
  href?: string;
  active?: boolean;
  expanded?: boolean;
  className?: string;
  rowClassName?: string;
  attrs?: Record<string, string | number | boolean>;
  rowAttrs?: Record<string, string | number | boolean>;
  children?: HierarchyTreeItem[];
  content?: ReactNode;
  onClick?: () => void;
}

interface HierarchyTreeProps {
  items?: HierarchyTreeItem[];
  className?: string;
  listClassName?: string;
  emptyLabel?: string;
  defaultExpandedDepth?: number;
}

function renderTreeNode(node, depth, defaultExpandedDepth) {
  const children = Array.isArray(node?.children) ? node.children : [];
  const isBranch = children.length > 0;
  const liAttrs = toAttrProps(node?.attrs);
  const rowAttrs = toAttrProps(node?.rowAttrs);

  if (!isBranch) {
    const leafClass = cx("project-tree-leaf-link", node?.rowClassName, node?.active ? "is-active" : "");
    const content = node?.content ? (
      node.content
    ) : node?.href ? (
      <a href={node.href} className={leafClass} {...rowAttrs}>
        {node?.icon ? <span className="project-tree-icon">{node.icon}</span> : null}
        <span className="project-tree-segment">{node?.label}</span>
        {node?.badge ? <span className="project-tree-meta">{node.badge}</span> : null}
      </a>
    ) : (
      <div className={leafClass} onClick={node?.onClick} {...rowAttrs}>
        {node?.icon ? <span className="project-tree-icon">{node.icon}</span> : null}
        <span className="project-tree-segment">{node?.label}</span>
        {node?.badge ? <span className="project-tree-meta">{node.badge}</span> : null}
      </div>
    );
    return (
      <li key={node?.id ?? `${depth}:${String(node?.label ?? "")}`} className={cx("project-tree-leaf", node?.className)} {...liAttrs}>
        {content}
      </li>
    );
  }

  const open = typeof node?.expanded === "boolean" ? node.expanded : depth <= defaultExpandedDepth;
  return (
    <li key={node?.id ?? `${depth}:${String(node?.label ?? "")}`} className={cx("project-tree-branch", node?.className)} {...liAttrs}>
      <details className="project-tree-details" open={open}>
        <summary className={cx("project-tree-summary", node?.rowClassName)} onClick={node?.onClick} {...rowAttrs}>
          <span className="project-tree-caret">
            <svg viewBox="0 0 24 24" fill="none" width="14" height="14" aria-hidden="true">
              <path d="M7 10l5 5 5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </span>
          {node?.icon ? <span className="project-tree-icon">{node.icon}</span> : null}
          <span className="project-tree-segment">{node?.label}</span>
          {node?.badge ? <span className="project-tree-meta">{node.badge}</span> : null}
        </summary>
        <div className="project-tree-body">
          <ul className="project-tree-list">
            {children.map((child) => renderTreeNode(child, depth + 1, defaultExpandedDepth))}
          </ul>
        </div>
      </details>
    </li>
  );
}

export default function HierarchyTree(props: HierarchyTreeProps) {
  const items = Array.isArray(props?.items) ? props.items : [];
  if (items.length === 0) {
    return <p className="project-tree-empty">{props?.emptyLabel ?? "No items."}</p>;
  }
  return (
    <ul className={cx("project-tree-root", props?.listClassName, props?.className)}>
      {items.map((item) => renderTreeNode(item, 1, props?.defaultExpandedDepth ?? 1))}
    </ul>
  );
}