Tree Data

Tree Data

Pass a nested JavaScript object to the tree data source to create a hierarchical grid layout.

Data Object

Use the useTreeDataSource hook to render a nested object as a row set. The data property must be a JavaScript object. Pass these functions to control how the hook creates rows from the source object:

rowValueFn: Returns the data associated with a specific row.
rowChildrenFn: Returns an array of objects used to generate child rows.

The demo below uses objects with a children key to define the hierarchy.

Custom Keys

1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import { Grid, useTreeDataSource } from "@1771technologies/lytenyte-pro";
3
import { data } from "./tree.js";
4
import { AvatarCell, GroupCell, ModifiedCell, SizeCell } from "./components.jsx";
5

6
export interface GridSpec {
7
  readonly data: {
8
    kind: string;
9
    size: number;
10
    name: string;
11
    modified: string;
12
    lastEditedBy: string;
13
    permissions: string;
14
  };
15
}
16

17
const group: Grid.RowGroupColumn<GridSpec> = {
18
  width: 240,
19
  cellRenderer: GroupCell,
20
  pin: "start",
21
};
22

23
const columns: Grid.Column<GridSpec>[] = [
24
  { id: "size", type: "number", name: "Size", cellRenderer: SizeCell },
25
  { id: "modified", name: "Modified", cellRenderer: ModifiedCell, width: 130 },
26
  { id: "lastEditedBy", name: "Last Edited By", cellRenderer: AvatarCell },
27
  { id: "permissions", name: "Permissions" },
28
];
29

30
const base: Grid.ColumnBase<GridSpec> = { widthFlex: 1, width: 120 };
31

32
export default function TreeDataDemo() {
33
  const ds = useTreeDataSource({
34
    data: data,
35
    rowGroupDefaultExpansion: true,
36

37
    rowChildrenFn: (x: any) => {
38
      if (!x.children) return [];
39
      return x.children.map((r: any) => [r.name, r]);
40
    },
41
    rowValueFn: (x) => ({
42
      name: x.name,
43
      kind: x.kind,
44
      size: x.size || null,
45
      modified: x.modified,
46
      lastEditedBy: x.lastEditedBy,
47
      permissions: x.permissions,
48
    }),
49
  });
50

51
  return (
52
    <div className="ln-grid" style={{ height: 500 }}>
53
      <Grid rowSource={ds} rowGroupColumn={group} columnBase={base} columns={columns} />
54
    </div>
55
  );
56
}

1
import "@1771technologies/lytenyte-pro/components.css";
2
import type { Grid } from "@1771technologies/lytenyte-pro";
3
import type { GridSpec } from "./demo.jsx";
4
import {
5
  ComponentsFolderClose,
6
  ComponentsFolderOpen,
7
  ConfigFolderClosed,
8
  ConfigFolderOpen,
9
  CSSIcon,
10
  DocumentIcon,
11
  DotFile,
12
  FolderBaseOpen,
13
  FolderIcon,
14
  GitIcon,
15
  HooksFolderClosedIcon,
16
  HooksFolderOpenIcon,
17
  HtmlIcon,
18
  IcoIcon,
19
  ImageIcon,
20
  JSIcon,
21
  JSONIcon,
22
  JSXIcon,
23
  MarkdownIcon,
24
  PublicFolderClosed,
25
  PublicFolderOpen,
26
  SrcFolderClosed,
27
  SrcFolderOpen,
28
  SvgIcon,
29
  TestsFolderClosed,
30
  TestsFolderOpen,
31
  TestsIcon,
32
  UtilsFolderClosedIcon,
33
  UtilsFolderOpenIcon,
34
} from "./icons.jsx";
35
import { useMemo } from "react";
36
import { format } from "date-fns";
37
import { customerToAvatar } from "@1771technologies/grid-sample-data/orders";
38

39
export function GroupCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
40
  const expanded = api.rowIsGroup(row) && row.expandable && row.expanded;
41
  const expandable = api.rowIsGroup(row) && row.expandable;
42
  const name = api.rowIsGroup(row) ? (row.key ?? "") : ((row.data.name as string) ?? "");
43

44
  const Icon = useMemo(() => {
45
    if (name.includes(".test")) return TestsIcon;
46
    if (name.includes(".git")) return GitIcon;
47
    if (name.includes(".env")) return DotFile;
48

49
    if (name === "public") return expanded ? PublicFolderOpen : PublicFolderClosed;
50

51
    if (name === "src") return expanded ? SrcFolderOpen : SrcFolderClosed;
52
    if (name === "utils") return expanded ? UtilsFolderOpenIcon : UtilsFolderClosedIcon;
53
    if (name === "components") return expanded ? ComponentsFolderOpen : ComponentsFolderClose;
54
    if (name === "tests") return expanded ? TestsFolderOpen : TestsFolderClosed;
55
    if (name === "hooks") return expanded ? HooksFolderOpenIcon : HooksFolderClosedIcon;
56
    if (name === "config") return expanded ? ConfigFolderOpen : ConfigFolderClosed;
57

58
    if (name.endsWith(".jsx")) return JSXIcon;
59
    if (name.endsWith(".js")) return JSIcon;
60
    if (name.endsWith(".png") || name.endsWith(".jpg") || name.endsWith(".jpeg")) return ImageIcon;
61
    if (name.endsWith(".json")) return JSONIcon;
62
    if (name.endsWith(".md") || name.endsWith(".mdx")) return MarkdownIcon;
63
    if (name.endsWith(".html")) return HtmlIcon;
64
    if (name.endsWith(".ico")) return IcoIcon;
65
    if (name.endsWith(".svg")) return SvgIcon;
66
    if (name.endsWith(".css")) return CSSIcon;
67

68
    if (name.includes(".") || !expandable) return DocumentIcon;
69
    return expanded ? FolderBaseOpen : FolderIcon;
70
  }, [expandable, expanded, name]);
71

72
  return (
73
    <div
74
      className="relative flex h-full w-full items-center text-sm"
75
      style={{ paddingInlineStart: row.depth * 22 }}
76
    >
77
      {row.depth > 0 &&
78
        Array.from({ length: row.depth }, (_, i) => {
79
          return (
80
            <div
81
              key={i}
82
              className="border-ln-gray-30 absolute h-full border-s border-dashed"
83
              style={{ left: i === 0 ? 16 : i * 16 + 16 + i * 6 }}
84
            />
85
          );
86
        })}
87
      {expandable && (
88
        <button
89
          onClick={() => api.rowGroupToggle(row.id)}
90
          data-ln-button="secondary"
91
          data-ln-size="md"
92
          data-ln-icon
93
        >
94
          <Icon className="size-4" />
95
        </button>
96
      )}
97
      {!expandable && (
98
        <div className="flex size-8 items-center justify-center">
99
          <Icon className="size-4" />
100
        </div>
101
      )}
102
      <div>{name}</div>
103
    </div>
104
  );
105
}
106

107
const number = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0, minimumFractionDigits: 0 });
108

109
export function SizeCell({ api, column, row }: Grid.T.CellRendererParams<GridSpec>) {
110
  if (!api.rowIsGroup(row)) return null;
111

112
  const field = api.columnField(column, row);
113

114
  if (typeof field !== "number") return "-";
115

116
  return (
117
    <div className="flex items-baseline gap-1 tabular-nums">
118
      {number.format(field)}
119
      <span className="text-ln-text-xlight text-xs font-semibold">kb</span>
120
    </div>
121
  );
122
}
123

124
export function ModifiedCell({ api, column, row }: Grid.T.CellRendererParams<GridSpec>) {
125
  if (!api.rowIsGroup(row)) return;
126

127
  const field = api.columnField(column, row);
128

129
  if (typeof field !== "string") return "-";
130

131
  return <div className="text-sm tabular-nums">{format(field, "yyyy MMM dd | hh:mm")}</div>;
132
}
133

134
export function AvatarCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
135
  if (!api.rowIsGroup(row)) return;
136

137
  const name = api.columnField(column, row);
138

139
  if (typeof name !== "string") return;
140
  const url = customerToAvatar[name];
141

142
  return (
143
    <div className="flex h-full w-full items-center gap-2">
144
      <img className="border-ln-border-strong h-7 w-7 rounded-full border" src={url} alt={name} />
145
      <div className="text-ln-text-dark flex flex-col gap-0.5">
146
        <div>{name}</div>
147
      </div>
148
    </div>
149
  );
150
}

1
import React from "react";
2
import type { SVGProps } from "react";
3

4
export function ImageIcon(props: SVGProps<SVGSVGElement>) {
5
  return (
6
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" {...props}>
7
      <path
8
        fill="#26a69a"
9
        d="M8.5 6h4l-4-4zM3.875 1H9.5l4 4v8.6c0 .773-.616 1.4-1.375 1.4h-8.25c-.76 0-1.375-.627-1.375-1.4V2.4c0-.777.612-1.4 1.375-1.4M4 13.6h8V8l-2.625 2.8L8 9.4zm1.25-7.7c-.76 0-1.375.627-1.375 1.4s.616 1.4 1.375 1.4c.76 0 1.375-.627 1.375-1.4S6.009 5.9 5.25 5.9"
10
      ></path>
11
    </svg>
12
  );
13
}
14

15
export function FolderIcon(props: SVGProps<SVGSVGElement>) {
16
  return (
17
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 32 32" {...props}>
18
      <path
19
        fill="#8d6e63"
20
        d="m13.844 7.536l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464"
21
      ></path>
22
      <rect width={18} height={6} x={14} y={22} fill="#d7ccc8" rx={1}></rect>
23
    </svg>
24
  );
25
}
26

27
export function FolderBaseOpen(props: SVGProps<SVGSVGElement>) {
28
  return (
29
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
30
      <path
31
        fill="#8d6e63"
32
        d="M28.967 12H9.442a2 2 0 0 0-1.898 1.368L4 24V10h24a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h22l4.805-11.212A2 2 0 0 0 28.967 12"
33
      ></path>
34
      <rect width={18} height={6} x={14} y={22} fill="#d7ccc8" rx={1}></rect>
35
    </svg>
36
  );
37
}
38

39
export function DocumentIcon(props: SVGProps<SVGSVGElement>) {
40
  return (
41
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 24 24" {...props}>
42
      <g fill="none">
43
        <path d="M0 0h24v24H0z"></path>
44
        <path
45
          fill="#42a5f5"
46
          d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8zm4 18H6V4h7v5h5z"
47
        ></path>
48
      </g>
49
    </svg>
50
  );
51
}
52

53
export function JSONIcon(props: SVGProps<SVGSVGElement>) {
54
  return (
55
    <svg xmlns="http://www.w3.org/2000/svg" width={960} height={960} viewBox="0 -960 960 960" {...props}>
56
      <path
57
        fill="#f9a825"
58
        d="M560-160v-80h120q17 0 28.5-11.5T720-280v-80q0-38 22-69t58-44v-14q-36-13-58-44t-22-69v-80q0-17-11.5-28.5T680-720H560v-80h120q50 0 85 35t35 85v80q0 17 11.5 28.5T840-560h40v160h-40q-17 0-28.5 11.5T800-360v80q0 50-35 85t-85 35zm-280 0q-50 0-85-35t-35-85v-80q0-17-11.5-28.5T120-400H80v-160h40q17 0 28.5-11.5T160-600v-80q0-50 35-85t85-35h120v80H280q-17 0-28.5 11.5T240-680v80q0 38-22 69t-58 44v14q36 13 58 44t22 69v80q0 17 11.5 28.5T280-240h120v80z"
59
      ></path>
60
    </svg>
61
  );
62
}
63

64
export function MarkdownIcon(props: SVGProps<SVGSVGElement>) {
65
  return (
66
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
67
      <path fill="#ffca28" d="m14 10l-4 3.5L6 10H4v12h4v-6l2 2l2-2v6h4V10zm12 6v-6h-4v6h-4l6 8l6-8z"></path>
68
    </svg>
69
  );
70
}
71

72
export function HtmlIcon(props: SVGProps<SVGSVGElement>) {
73
  return (
74
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
75
      <path
76
        fill="#e65100"
77
        d="m4 4l2 22l10 2l10-2l2-22Zm19.72 7H11.28l.29 3h11.86l-.802 9.335L15.99 25l-6.635-1.646L8.93 19h3.02l.19 2l3.86.77l3.84-.77l.29-4H8.84L8 8h16Z"
78
      ></path>
79
    </svg>
80
  );
81
}
82

83
export function IcoIcon(props: SVGProps<SVGSVGElement>) {
84
  return (
85
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
86
      <path fill="#ffd54f" d="m16 24l10 6l-4-10l8-8l-10-.032L16 2l-4 10H2l8 8l-4 10Z"></path>
87
    </svg>
88
  );
89
}
90

91
export function SvgIcon(props: SVGProps<SVGSVGElement>) {
92
  return (
93
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
94
      <path
95
        fill="#ffb300"
96
        d="M29.168 14.03a2.7 2.7 0 0 0-1.968-.83a2.51 2.51 0 0 0-1.929.8h-4.443l3.078-3.078a2.835 2.835 0 0 0 2.857-2.842a2.6 2.6 0 0 0-.831-1.969a2.82 2.82 0 0 0-2.014-.788a2.67 2.67 0 0 0-1.968.788a2.36 2.36 0 0 0-.812 1.922L18 11.17V6.726a2.51 2.51 0 0 0 .8-1.929a2.7 2.7 0 0 0-.832-1.968a2.745 2.745 0 0 0-3.936 0a2.7 2.7 0 0 0-.832 1.968a2.51 2.51 0 0 0 .8 1.93v4.443l-3.138-3.138a2.36 2.36 0 0 0-.812-1.922a2.66 2.66 0 0 0-1.968-.788a2.83 2.83 0 0 0-2.014.788a2.6 2.6 0 0 0-.831 1.969a2.74 2.74 0 0 0 .831 2.013a2.8 2.8 0 0 0 2.026.829l3.078 3.078H6.729a2.51 2.51 0 0 0-1.929-.8a2.7 2.7 0 0 0-1.968.831a2.745 2.745 0 0 0 0 3.937a2.7 2.7 0 0 0 1.968.832a2.51 2.51 0 0 0 1.929-.8h4.443l-3.078 3.077a2.835 2.835 0 0 0-2.857 2.842a2.6 2.6 0 0 0 .831 1.969a2.82 2.82 0 0 0 2.014.788a2.67 2.67 0 0 0 1.968-.788a2.36 2.36 0 0 0 .812-1.922L14 20.827v4.444a2.51 2.51 0 0 0-.8 1.929a2.784 2.784 0 0 0 4.768 1.968A2.7 2.7 0 0 0 18.8 27.2a2.51 2.51 0 0 0-.8-1.929v-4.444l3.138 3.138a2.36 2.36 0 0 0 .812 1.922a2.66 2.66 0 0 0 1.968.788a2.83 2.83 0 0 0 2.014-.788a2.6 2.6 0 0 0 .831-1.969a2.74 2.74 0 0 0-.831-2.013a2.8 2.8 0 0 0-2.026-.829L20.828 18h4.443a2.51 2.51 0 0 0 1.93.8a2.784 2.784 0 0 0 1.967-4.769Z"
97
      ></path>
98
    </svg>
99
  );
100
}
101

102
export function PublicFolderClosed(props: SVGProps<SVGSVGElement>) {
103
  return (
104
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
105
      <path
106
        fill="#039be5"
107
        d="m13.844 7.536l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464"
108
      ></path>
109
      <path
110
        fill="#b3e5fc"
111
        d="M22 10a10 10 0 1 0 10 10a10 10 0 0 0-10-10m6.918 6H25.96a15.8 15.8 0 0 0-1.342-3.54a8.04 8.04 0 0 1 4.3 3.54M22 12a14.1 14.1 0 0 1 1.89 4h-3.78A14.1 14.1 0 0 1 22 12m-2.618.46A15.8 15.8 0 0 0 18.04 16h-2.958a8.04 8.04 0 0 1 4.3-3.54M14.263 22a7.7 7.7 0 0 1 0-4h3.407a15.5 15.5 0 0 0 0 4Zm.82 2h2.957a15.8 15.8 0 0 0 1.342 3.54a8.04 8.04 0 0 1-4.3-3.54ZM22 28a14.1 14.1 0 0 1-1.89-4h3.78A14.1 14.1 0 0 1 22 28m2.31-6h-4.62a13.4 13.4 0 0 1 0-4h4.62a13.4 13.4 0 0 1 0 4m.308 5.54A15.8 15.8 0 0 0 25.96 24h2.958a8.04 8.04 0 0 1-4.3 3.54M29.737 22H26.33a15.5 15.5 0 0 0 0-4h3.407a7.7 7.7 0 0 1 0 4"
112
      ></path>
113
    </svg>
114
  );
115
}
116

117
export function PublicFolderOpen(props: SVGProps<SVGSVGElement>) {
118
  return (
119
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
120
      <path
121
        fill="#039be5"
122
        d="M28.967 12H9.442a2 2 0 0 0-1.898 1.368L4 24V10h24a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h22l4.805-11.212A2 2 0 0 0 28.967 12"
123
      ></path>
124
      <path
125
        fill="#b3e5fc"
126
        d="M22 10a10 10 0 1 0 10 10a10 10 0 0 0-10-10m6.918 6H25.96a15.8 15.8 0 0 0-1.342-3.54a8.04 8.04 0 0 1 4.3 3.54M22 12a14.1 14.1 0 0 1 1.89 4h-3.78A14.1 14.1 0 0 1 22 12m-2.618.46A15.8 15.8 0 0 0 18.04 16h-2.958a8.04 8.04 0 0 1 4.3-3.54M14.263 22a7.7 7.7 0 0 1 0-4h3.407a15.5 15.5 0 0 0 0 4Zm.82 2h2.957a15.8 15.8 0 0 0 1.342 3.54a8.04 8.04 0 0 1-4.3-3.54ZM22 28a14.1 14.1 0 0 1-1.89-4h3.78A14.1 14.1 0 0 1 22 28m2.31-6h-4.62a13.4 13.4 0 0 1 0-4h4.62a13.4 13.4 0 0 1 0 4m.308 5.54A15.8 15.8 0 0 0 25.96 24h2.958a8.04 8.04 0 0 1-4.3 3.54M29.737 22H26.33a15.5 15.5 0 0 0 0-4h3.407a7.7 7.7 0 0 1 0 4"
127
      ></path>
128
    </svg>
129
  );
130
}
131

132
export function ComponentsFolderClose(props: SVGProps<SVGSVGElement>) {
133
  return (
134
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" {...props}>
135
      <path
136
        fill="#00bcd4"
137
        d="m6.922 3.768l-.644-.536A1 1 0 0 0 5.638 3H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H7.562a1 1 0 0 1-.64-.232"
138
      ></path>
139
      <g fill="#b2ebf2">
140
        <path d="M10.5 8.399c2.924 0 4.714 1.037 4.714 1.6s-1.79 1.602-4.714 1.602S5.785 10.564 5.785 10s1.79-1.601 4.715-1.601m0-.8c-3.038 0-5.5 1.075-5.5 2.4s2.462 2.402 5.5 2.402S16 11.326 16 10s-2.463-2.401-5.5-2.401"></path>
141
        <path d="M10.5 9.2a.786.8 0 1 0 .785.8a.786.8 0 0 0-.785-.8"></path>
142
        <path d="M8.322 5.8c.793 0 2.333 1.272 3.538 3.4c1.463 2.58 1.476 4.677.997 4.959a.354.36 0 0 1-.18.04c-.792 0-2.333-1.271-3.538-3.399c-1.463-2.58-1.476-4.677-.997-4.96a.354.36 0 0 1 .18-.04m0-.8a1.128 1.149 0 0 0-.572.147c-1.128.663-.81 3.374.708 6.054C9.748 13.478 11.491 15 12.678 15a1.128 1.149 0 0 0 .572-.148c1.127-.663.81-3.373-.71-6.053C11.25 6.522 9.509 5 8.323 5Z"></path>
143
        <path d="M12.677 5.8a.354.36 0 0 1 .18.04c.48.283.466 2.38-.997 4.96c-1.206 2.128-2.746 3.4-3.538 3.4a.354.36 0 0 1-.18-.04c-.48-.284-.466-2.38.997-4.96c1.206-2.128 2.746-3.4 3.538-3.4m0-.8c-1.186 0-2.929 1.522-4.22 3.8c-1.517 2.68-1.835 5.39-.707 6.052a1.128 1.149 0 0 0 .572.148c1.186 0 2.929-1.523 4.22-3.8c1.517-2.68 1.835-5.39.708-6.052A1.128 1.149 0 0 0 12.677 5"></path>
144
      </g>
145
    </svg>
146
  );
147
}
148

149
export function ComponentsFolderOpen(props: SVGProps<SVGSVGElement>) {
150
  return (
151
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" {...props}>
152
      <path
153
        fill="#00bcd4"
154
        d="M14.484 6H4.72a1 1 0 0 0-.949.684L2 12V5h13a1 1 0 0 0-1-1H7.562a1 1 0 0 1-.64-.232l-.644-.536A1 1 0 0 0 5.638 3H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h11l2.403-5.606A1 1 0 0 0 14.483 6"
155
      ></path>
156
      <g fill="#b2ebf2">
157
        <path d="M10.5 8.399c2.924 0 4.714 1.037 4.714 1.6s-1.79 1.602-4.714 1.602S5.785 10.564 5.785 10s1.79-1.601 4.715-1.601m0-.8c-3.038 0-5.5 1.075-5.5 2.4s2.462 2.402 5.5 2.402S16 11.326 16 10s-2.463-2.401-5.5-2.401"></path>
158
        <path d="M10.5 9.2a.786.8 0 1 0 .785.8a.786.8 0 0 0-.785-.8"></path>
159
        <path d="M8.322 5.8c.793 0 2.333 1.272 3.538 3.4c1.463 2.58 1.476 4.677.997 4.959a.354.36 0 0 1-.18.04c-.792 0-2.333-1.271-3.538-3.399c-1.463-2.58-1.476-4.677-.997-4.96a.354.36 0 0 1 .18-.04m0-.8a1.128 1.149 0 0 0-.572.147c-1.128.663-.81 3.374.708 6.054C9.748 13.478 11.491 15 12.678 15a1.128 1.149 0 0 0 .572-.148c1.127-.663.81-3.373-.71-6.053C11.25 6.522 9.509 5 8.323 5Z"></path>
160
        <path d="M12.677 5.8a.354.36 0 0 1 .18.04c.48.283.466 2.38-.997 4.96c-1.206 2.128-2.746 3.4-3.538 3.4a.354.36 0 0 1-.18-.04c-.48-.284-.466-2.38.997-4.96c1.206-2.128 2.746-3.4 3.538-3.4m0-.8c-1.186 0-2.929 1.522-4.22 3.8c-1.517 2.68-1.835 5.39-.707 6.052a1.128 1.149 0 0 0 .572.148c1.186 0 2.929-1.523 4.22-3.8c1.517-2.68 1.835-5.39.708-6.052A1.128 1.149 0 0 0 12.677 5"></path>
161
      </g>
162
    </svg>
163
  );
164
}
165

166
export function CSSIcon(props: SVGProps<SVGSVGElement>) {
167
  return (
168
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
169
      <path
170
        fill="#7e57c2"
171
        d="M20 18h-2v-2h-2v2c0 .193 0 .703 1.254 1.033A3.345 3.345 0 0 1 20 22h2v2h2v-2c0-.388-.562-.851-1.254-1.034C20.356 20.34 20 18.84 20 18m-3.254 2.966C14.356 20.34 14 18.84 14 18h-2v-2h-2v8h2v-2h4v2h2v-2c0-.388-.562-.851-1.254-1.034"
172
      ></path>
173
      <path
174
        fill="#7e57c2"
175
        d="M24 4H4v20a4 4 0 0 0 4 4h16.16A3.84 3.84 0 0 0 28 24.16V8a4 4 0 0 0-4-4m2 14h-2v-2h-2v2c0 .193 0 .703 1.254 1.033A3.345 3.345 0 0 1 26 22v2a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2Z"
176
      ></path>
177
    </svg>
178
  );
179
}
180

181
export function SrcFolderClosed(props: SVGProps<SVGSVGElement>) {
182
  return (
183
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
184
      <path
185
        fill="#4caf50"
186
        d="m13.844 7.536l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464"
187
      ></path>
188
      <path
189
        fill="#c8e6c9"
190
        d="M18.435 30a1 1 0 0 1-.238-.028a1.137 1.137 0 0 1-.828-1.323l3.093-15.744a1.13 1.13 0 0 1 .507-.744a1.06 1.06 0 0 1 .8-.134a1.14 1.14 0 0 1 .828 1.324l-3.1 15.744a1.12 1.12 0 0 1-.505.743a1.06 1.06 0 0 1-.557.162m6.2-2h-.077a1.08 1.08 0 0 1-.762-.412a1.164 1.164 0 0 1 .113-1.548l5.32-4.967l-5.297-4.623a1.165 1.165 0 0 1-.162-1.544a1.08 1.08 0 0 1 .754-.437a1.06 1.06 0 0 1 .81.258l6.244 5.455a1.156 1.156 0 0 1 .004 1.723l-6.22 5.808a1.07 1.07 0 0 1-.728.289Zm-9.31 0a1.07 1.07 0 0 1-.728-.292l-6.225-5.811a1.16 1.16 0 0 1-.01-1.692l.02-.018l6.246-5.454a1.03 1.03 0 0 1 .8-.26a1.08 1.08 0 0 1 .758.436a1.165 1.165 0 0 1-.16 1.547l-5.293 4.62l5.32 4.964a1.156 1.156 0 0 1 .112 1.548a1.07 1.07 0 0 1-.762.412Z"
191
      ></path>
192
    </svg>
193
  );
194
}
195

196
export function SrcFolderOpen(props: SVGProps<SVGSVGElement>) {
197
  return (
198
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
199
      <path
200
        fill="#4caf50"
201
        d="M28.967 12H9.442a2 2 0 0 0-1.898 1.368L4 24V10h24a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h22l4.805-11.212A2 2 0 0 0 28.967 12"
202
      ></path>
203
      <path
204
        fill="#c8e6c9"
205
        d="M18.473 30a1 1 0 0 1-.238-.028a1.137 1.137 0 0 1-.828-1.323L20.5 12.905a1.13 1.13 0 0 1 .507-.744a1.06 1.06 0 0 1 .8-.134a1.14 1.14 0 0 1 .828 1.324l-3.101 15.744a1.12 1.12 0 0 1-.504.743a1.06 1.06 0 0 1-.557.162m6.2-2h-.077a1.08 1.08 0 0 1-.762-.412a1.164 1.164 0 0 1 .113-1.548l5.319-4.967l-5.296-4.623a1.165 1.165 0 0 1-.162-1.544a1.08 1.08 0 0 1 .754-.437a1.06 1.06 0 0 1 .81.258l6.244 5.455a1.156 1.156 0 0 1 .003 1.723l-6.218 5.808a1.07 1.07 0 0 1-.729.289Zm-9.31 0a1.07 1.07 0 0 1-.728-.292l-6.226-5.811a1.16 1.16 0 0 1-.01-1.692l.02-.018l6.246-5.454a1.03 1.03 0 0 1 .8-.26a1.08 1.08 0 0 1 .76.436a1.165 1.165 0 0 1-.16 1.547l-5.294 4.62l5.32 4.964a1.156 1.156 0 0 1 .112 1.548a1.07 1.07 0 0 1-.762.412Z"
206
      ></path>
207
    </svg>
208
  );
209
}
210

211
export function JSXIcon(props: SVGProps<SVGSVGElement>) {
212
  return (
213
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
214
      <path
215
        fill="#0288d1"
216
        d="M16 12c7.444 0 12 2.59 12 4s-4.556 4-12 4s-12-2.59-12-4s4.556-4 12-4m0-2c-7.732 0-14 2.686-14 6s6.268 6 14 6s14-2.686 14-6s-6.268-6-14-6"
217
      ></path>
218
      <path fill="#0288d1" d="M16 14a2 2 0 1 0 2 2a2 2 0 0 0-2-2"></path>
219
      <path
220
        fill="#0288d1"
221
        d="M10.458 5.507c2.017 0 5.937 3.177 9.006 8.493c3.722 6.447 3.757 11.687 2.536 12.392a.9.9 0 0 1-.457.1c-2.017 0-5.938-3.176-9.007-8.492C8.814 11.553 8.779 6.313 10 5.608a.9.9 0 0 1 .458-.1m-.001-2A2.87 2.87 0 0 0 9 3.875C6.13 5.532 6.938 12.304 10.804 19c3.284 5.69 7.72 9.493 10.74 9.493A2.87 2.87 0 0 0 23 28.124c2.87-1.656 2.062-8.428-1.804-15.124c-3.284-5.69-7.72-9.493-10.74-9.493Z"
222
      ></path>
223
      <path
224
        fill="#0288d1"
225
        d="M21.543 5.507a.9.9 0 0 1 .457.1c1.221.706 1.186 5.946-2.536 12.393c-3.07 5.316-6.99 8.493-9.007 8.493a.9.9 0 0 1-.457-.1C8.779 25.686 8.814 20.446 12.536 14c3.07-5.316 6.99-8.493 9.007-8.493m0-2c-3.02 0-7.455 3.804-10.74 9.493C6.939 19.696 6.13 26.468 9 28.124a2.87 2.87 0 0 0 1.457.369c3.02 0 7.455-3.804 10.74-9.493C25.061 12.304 25.87 5.532 23 3.876a2.87 2.87 0 0 0-1.457-.369"
226
      ></path>
227
    </svg>
228
  );
229
}
230

231
export function JSIcon(props: SVGProps<SVGSVGElement>) {
232
  return (
233
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
234
      <path
235
        fill="#8bc34a"
236
        d="M16 20.003v2h4a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-2v-2h4v-2h-4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2v2Z"
237
      ></path>
238
      <path
239
        fill="#8bc34a"
240
        d="m16 3.003l-12 7v14l4 2h6v-13.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v11.5H8l-2-1.034V11.15l10-5.833l10 5.833v11.703l-10 5.833l-1.745-1.022L13 29.253l3 1.75l12-7v-14Z"
241
      ></path>
242
    </svg>
243
  );
244
}
245

246
export function TestsFolderClosed(props: SVGProps<SVGSVGElement>) {
247
  return (
248
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
249
      <path
250
        fill="#00bfa5"
251
        d="m13.844 7.536l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464"
252
      ></path>
253
      <path
254
        fill="#a7ffeb"
255
        d="M16 12v2h2v12a4 4 0 0 0 8 0V14h2v-2Zm5 14a1 1 0 1 1 1-1a1 1 0 0 1-1 1m2-4a1 1 0 1 1 1-1a1 1 0 0 1-1 1m1-4h-4v-4h4Z"
256
      ></path>
257
    </svg>
258
  );
259
}
260

261
export function TestsFolderOpen(props: SVGProps<SVGSVGElement>) {
262
  return (
263
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
264
      <path
265
        fill="#00bfa5"
266
        d="M28.967 12H9.442a2 2 0 0 0-1.898 1.368L4 24V10h24a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h22l4.805-11.212A2 2 0 0 0 28.967 12"
267
      ></path>
268
      <path
269
        fill="#a7ffeb"
270
        d="M16 12v2h2v12a4 4 0 0 0 8 0V14h2v-2Zm5 14a1 1 0 1 1 1-1a1 1 0 0 1-1 1m2-4a1 1 0 1 1 1-1a1 1 0 0 1-1 1m1-4h-4v-4h4Z"
271
      ></path>
272
    </svg>
273
  );
274
}
275

276
export function TestsIcon(props: SVGProps<SVGSVGElement>) {
277
  return (
278
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
279
      <path
280
        fill="#0288d1"
281
        d="M20 4v2h-2v4.531l.264.461l7.473 13.078a2 2 0 0 1 .263.992V26a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-.938a2 2 0 0 1 .264-.992l7.473-13.078l.263-.46V6h-2V4zm0-2h-8a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2v2L4.527 23.078A4 4 0 0 0 4 25.062V26a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4v-.938a4 4 0 0 0-.527-1.984L20 10V8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2"
282
      ></path>
283
      <circle cx={17} cy={17} r={1} fill="#0288d1"></circle>
284
      <path
285
        fill="#0288d1"
286
        d="M19.72 20.715a1 1 0 0 0-1.134-.318a5 5 0 0 1-1.18.262a3.95 3.95 0 0 1-1.862-.292a2.74 2.74 0 0 0-3.371.489a2 2 0 0 0-.237.35L10 24h12Z"
287
      ></path>
288
    </svg>
289
  );
290
}
291

292
export function ConfigFolderClosed(props: SVGProps<SVGSVGElement>) {
293
  return (
294
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
295
      <path
296
        fill="#00acc1"
297
        d="m13.844 7.536l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464"
298
      ></path>
299
      <path
300
        fill="#80deea"
301
        d="M23.001 24.15A3.195 3.195 0 0 1 19.762 21a3.24 3.24 0 1 1 3.239 3.15m6.875-2.277a7 7 0 0 0 .064-.874a8 8 0 0 0-.064-.9l1.951-1.467a.446.446 0 0 0 .113-.576l-1.853-3.112a.46.46 0 0 0-.564-.199l-2.302.9a6.8 6.8 0 0 0-1.565-.882l-.342-2.385A.464.464 0 0 0 24.85 12h-3.7a.464.464 0 0 0-.463.378l-.341 2.385a6.8 6.8 0 0 0-1.563.881l-2.304-.899a.46.46 0 0 0-.564.198l-1.851 3.113a.436.436 0 0 0 .112.576l1.95 1.468a8 8 0 0 0-.064.9a7 7 0 0 0 .064.873l-1.95 1.493a.436.436 0 0 0-.112.576l1.85 3.115a.47.47 0 0 0 .565.198l2.304-.91a6.4 6.4 0 0 0 1.563.892l.342 2.385a.464.464 0 0 0 .463.378h3.7a.464.464 0 0 0 .464-.378l.34-2.385a6.8 6.8 0 0 0 1.566-.891l2.302.909a.475.475 0 0 0 .566-.198l1.85-3.115a.446.446 0 0 0-.112-.576Z"
302
      ></path>
303
    </svg>
304
  );
305
}
306

307
export function ConfigFolderOpen(props: SVGProps<SVGSVGElement>) {
308
  return (
309
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
310
      <path
311
        fill="#00acc1"
312
        d="M28.967 12H9.442a2 2 0 0 0-1.898 1.368L4 24V10h24a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h22l4.805-11.212A2 2 0 0 0 28.967 12"
313
      ></path>
314
      <path
315
        fill="#80deea"
316
        d="M23.001 24.15A3.195 3.195 0 0 1 19.762 21a3.24 3.24 0 1 1 3.239 3.15m6.875-2.277a7 7 0 0 0 .064-.874a8 8 0 0 0-.064-.9l1.951-1.467a.446.446 0 0 0 .113-.576l-1.853-3.112a.46.46 0 0 0-.564-.199l-2.302.9a6.8 6.8 0 0 0-1.565-.882l-.342-2.385A.464.464 0 0 0 24.85 12h-3.7a.464.464 0 0 0-.463.378l-.341 2.385a6.8 6.8 0 0 0-1.563.881l-2.304-.899a.46.46 0 0 0-.564.198l-1.851 3.113a.436.436 0 0 0 .112.576l1.95 1.468a8 8 0 0 0-.064.9a7 7 0 0 0 .064.873l-1.95 1.493a.436.436 0 0 0-.112.576l1.85 3.115a.47.47 0 0 0 .565.198l2.304-.91a6.4 6.4 0 0 0 1.563.892l.342 2.385a.464.464 0 0 0 .463.378h3.7a.464.464 0 0 0 .464-.378l.34-2.385a6.8 6.8 0 0 0 1.566-.891l2.302.909a.475.475 0 0 0 .566-.198l1.85-3.115a.446.446 0 0 0-.112-.576Z"
317
      ></path>
318
    </svg>
319
  );
320
}
321

322
export function UtilsFolderClosedIcon(props: SVGProps<SVGSVGElement>) {
323
  return (
324
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
325
      <path
326
        fill="#7cb342"
327
        d="m13.844 7.536l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464"
328
      ></path>
329
      <path
330
        fill="#dcedc8"
331
        d="M31 12H19a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V13a1 1 0 0 0-1-1m-1 8h-4v4h-2v-4h-4v-2h4v-4h2v4h4Z"
332
      ></path>
333
      <path fill="#dcedc8" d="M16 28V16h-2v13a1 1 0 0 0 1 1h13v-2Z"></path>
334
    </svg>
335
  );
336
}
337

338
export function UtilsFolderOpenIcon(props: SVGProps<SVGSVGElement>) {
339
  return (
340
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
341
      <path
342
        fill="#7cb342"
343
        d="M28.967 12H9.442a2 2 0 0 0-1.898 1.368L4 24V10h24a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h22l4.805-11.212A2 2 0 0 0 28.967 12"
344
      ></path>
345
      <path
346
        fill="#dcedc8"
347
        d="M31 12H19a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V13a1 1 0 0 0-1-1m-1 8h-4v4h-2v-4h-4v-2h4v-4h2v4h4Z"
348
      ></path>
349
      <path fill="#dcedc8" d="M16 28V16h-2v13a1 1 0 0 0 1 1h13v-2Z"></path>
350
    </svg>
351
  );
352
}
353

354
export function HooksFolderClosedIcon(props: SVGProps<SVGSVGElement>) {
355
  return (
356
    <svg xmlns="http://www.w3.org/2000/svg" width={1024} height={1024} viewBox="0 0 1024 1024" {...props}>
357
      <path
358
        fill="#7e57c2"
359
        d="m443.008 241.152l-41.216-34.304A64 64 0 0 0 360.832 192H128a64 64 0 0 0-64 64v512a64 64 0 0 0 64 64h768a64 64 0 0 0 64-64V320a64 64 0 0 0-64-64H483.968a64 64 0 0 1-40.96-14.848"
360
      ></path>
361
      <path
362
        fill="#d1c4e9"
363
        d="M800 320c-53.02 0-96 42.98-96 96c.104 40.593 25.729 76.733 64 90.264V768c0 35.346-28.654 64-64 64s-64-28.654-64-64v-64h64L576 576v192c0 70.692 57.308 128 128 128s128-57.308 128-128V506.264c38.271-13.531 63.896-49.671 64-90.264c0-53.02-42.98-96-96-96m0 64c17.673 0 32 14.327 32 32s-14.327 32-32 32s-32-14.327-32-32s14.327-32 32-32"
364
      ></path>
365
    </svg>
366
  );
367
}
368

369
export function HooksFolderOpenIcon(props: SVGProps<SVGSVGElement>) {
370
  return (
371
    <svg xmlns="http://www.w3.org/2000/svg" width={1024} height={1024} viewBox="0 0 1024 1024" {...props}>
372
      <path
373
        fill="#7e57c2"
374
        d="M926.944 384h-624.8a64 64 0 0 0-60.736 43.776L128 768V320h768a64 64 0 0 0-64-64H483.968a64 64 0 0 1-40.96-14.848l-41.216-34.304A64 64 0 0 0 360.832 192H128a64 64 0 0 0-64 64v512a64 64 0 0 0 64 64h704l153.76-358.784A64 64 0 0 0 926.944 384"
375
      ></path>
376
      <path
377
        fill="#d1c4e9"
378
        d="M800 320c-53.02 0-96 42.98-96 96c.104 40.593 25.729 76.733 64 90.264V768c0 35.346-28.654 64-64 64s-64-28.654-64-64v-64h64L576 576v192c0 70.692 57.308 128 128 128s128-57.308 128-128V506.264c38.271-13.531 63.896-49.671 64-90.264c0-53.02-42.98-96-96-96m0 64c17.673 0 32 14.327 32 32s-14.327 32-32 32s-32-14.327-32-32s14.327-32 32-32"
379
      ></path>
380
    </svg>
381
  );
382
}
383

384
export function GitIcon(props: SVGProps<SVGSVGElement>) {
385
  return (
386
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
387
      <path
388
        fill="#e64a19"
389
        d="M13.172 2.828L11.78 4.22l1.91 1.91l2 2A2.986 2.986 0 0 1 20 10.81a3.25 3.25 0 0 1-.31 1.31l2.06 2a2.68 2.68 0 0 1 3.37.57a2.86 2.86 0 0 1 .88 2.117a3.02 3.02 0 0 1-.856 2.109A2.9 2.9 0 0 1 23 19.81a2.93 2.93 0 0 1-2.13-.87a2.694 2.694 0 0 1-.56-3.38l-2-2.06a3 3 0 0 1-.31.12V20a3 3 0 0 1 1.44 1.09a2.92 2.92 0 0 1 .56 1.72a2.88 2.88 0 0 1-.878 2.128a2.98 2.98 0 0 1-2.048.871a2.981 2.981 0 0 1-2.514-4.719A3 3 0 0 1 16 20v-6.38a2.96 2.96 0 0 1-1.44-1.09a2.9 2.9 0 0 1-.56-1.72a2.9 2.9 0 0 1 .31-1.31l-3.9-3.9l-7.579 7.572a4 4 0 0 0-.001 5.658l10.342 10.342a4 4 0 0 0 5.656 0l10.344-10.344a4 4 0 0 0 0-5.656L18.828 2.828a4 4 0 0 0-5.656 0"
390
      ></path>
391
    </svg>
392
  );
393
}
394

395
export function DotFile(props: SVGProps<SVGSVGElement>) {
396
  return (
397
    <svg xmlns="http://www.w3.org/2000/svg" width={400} height={400} viewBox="0 0 400 400" {...props}>
398
      <g fill="#2196f3" fillOpacity={0.604} transform="translate(-6.66 100.49)">
399
        <ellipse
400
          cx={37.18}
401
          cy={-256.97}
402
          rx={110.14}
403
          ry={139.47}
404
          transform="matrix(-.3005 .95378 -.96071 -.27755 0 0)"
405
        ></ellipse>
406
        <ellipse
407
          cx={38.835}
408
          cy={-197.03}
409
          rx={110.14}
410
          ry={139.47}
411
          transform="matrix(-.3005 .95378 -.96071 -.27755 0 0)"
412
        ></ellipse>
413
        <ellipse
414
          cx={-224.78}
415
          cy={-5.066}
416
          rx={110.14}
417
          ry={139.47}
418
          transform="matrix(-.95378 -.3005 .27755 -.96071 0 0)"
419
        ></ellipse>
420
        <ellipse
421
          cx={-228.55}
422
          cy={-60.291}
423
          rx={110.14}
424
          ry={139.47}
425
          transform="matrix(-.95378 -.3005 .27755 -.96071 0 0)"
426
        ></ellipse>
427
      </g>
428
    </svg>
429
  );
430
}

1
export const data = {
2
  root: {
3
    name: "root",
4
    kind: "folder",
5
    size: 0,
6
    modified: "2026-01-22T09:00:00Z",
7
    children: [
8
      {
9
        name: "package.json",
10
        kind: "file",
11
        size: 1840,
12
        modified: "2026-01-21T18:12:00Z",
13
        lastEditedBy: "Joseph Allen",
14
        permissions: "rw-r--r--",
15
      },
16
      {
17
        name: "package-lock.json",
18
        kind: "file",
19
        size: 92000,
20
        modified: "2026-01-21T18:12:30Z",
21
        lastEditedBy: "Joseph Allen",
22
        permissions: "rw-r--r--",
23
      },
24
      {
25
        name: "README.md",
26
        kind: "file",
27
        size: 1240,
28
        modified: "2026-01-20T10:05:00Z",
29
        lastEditedBy: "Betty Hall",
30
        permissions: "rw-r--r--",
31
      },
32
      {
33
        name: ".gitignore",
34
        kind: "file",
35
        size: 180,
36
        modified: "2026-01-19T09:00:00Z",
37
        lastEditedBy: "Betty Hall",
38
        permissions: "rw-r--r--",
39
      },
40
      {
41
        name: ".env",
42
        kind: "file",
43
        size: 220,
44
        modified: "2026-01-21T08:30:00Z",
45
        lastEditedBy: "Nancy Lewis",
46
        permissions: "rw-------",
47
      },
48

49
      {
50
        name: "public",
51
        kind: "folder",
52
        size: 0,
53
        modified: "2026-01-18T12:00:00Z",
54
        children: [
55
          {
56
            name: "index.html",
57
            kind: "file",
58
            size: 3420,
59
            modified: "2026-01-18T12:01:00Z",
60
            lastEditedBy: "Charles Clark",
61
            permissions: "rw-r--r--",
62
          },
63
          {
64
            name: "favicon.ico",
65
            kind: "file",
66
            size: 5430,
67
            modified: "2026-01-18T12:01:30Z",
68
            lastEditedBy: "Charles Clark",
69
            permissions: "rw-r--r--",
70
          },
71
          {
72
            name: "manifest.json",
73
            kind: "file",
74
            size: 820,
75
            modified: "2026-01-18T12:02:00Z",
76
            lastEditedBy: "Charles Clark",
77
            permissions: "rw-r--r--",
78
          },
79
          {
80
            name: "assets",
81
            kind: "folder",
82
            size: 0,
83
            modified: "2026-01-17T15:40:00Z",
84
            children: [
85
              {
86
                name: "logo.svg",
87
                kind: "file",
88
                size: 2048,
89
                modified: "2026-01-17T15:42:00Z",
90
                lastEditedBy: "Richard White",
91
                permissions: "rw-r--r--",
92
              },
93
              {
94
                name: "hero.png",
95
                kind: "file",
96
                size: 482000,
97
                modified: "2026-01-17T15:45:00Z",
98
                lastEditedBy: "Richard White",
99
                permissions: "rw-r--r--",
100
              },
101
            ],
102
          },
103
        ],
104
      },
105

106
      {
107
        name: "src",
108
        kind: "folder",
109
        size: 0,
110
        modified: "2026-01-22T08:30:00Z",
111
        children: [
112
          {
113
            name: "assets",
114
            kind: "folder",
115
            size: 0,
116
            modified: "2026-01-20T14:00:00Z",
117
            children: [
118
              {
119
                name: "global.css",
120
                kind: "file",
121
                size: 2140,
122
                modified: "2026-01-20T14:05:00Z",
123
                lastEditedBy: "Jennifer Taylor",
124
                permissions: "rw-r--r--",
125
              },
126
              {
127
                name: "variables.css",
128
                kind: "file",
129
                size: 980,
130
                modified: "2026-01-20T14:04:00Z",
131
                lastEditedBy: "Jennifer Taylor",
132
                permissions: "rw-r--r--",
133
              },
134
            ],
135
          },
136

137
          {
138
            name: "components",
139
            kind: "folder",
140
            size: 0,
141
            modified: "2026-01-21T09:30:00Z",
142
            children: [
143
              {
144
                name: "Button",
145
                kind: "folder",
146
                size: 0,
147
                modified: "2026-01-21T09:31:00Z",
148
                children: [
149
                  {
150
                    name: "Button.jsx",
151
                    kind: "file",
152
                    size: 1620,
153
                    modified: "2026-01-21T09:35:00Z",
154
                    lastEditedBy: "Sarah Wilson",
155
                    permissions: "rw-r--r--",
156
                  },
157
                  {
158
                    name: "Button.module.css",
159
                    kind: "file",
160
                    size: 740,
161
                    modified: "2026-01-21T09:34:00Z",
162
                    lastEditedBy: "Sarah Wilson",
163
                    permissions: "rw-r--r--",
164
                  },
165
                  {
166
                    name: "Button.test.jsx",
167
                    kind: "file",
168
                    size: 1280,
169
                    modified: "2026-01-21T09:36:00Z",
170
                    lastEditedBy: "Joseph Allen",
171
                    permissions: "rw-r--r--",
172
                  },
173
                ],
174
              },
175

176
              {
177
                name: "Modal",
178
                kind: "folder",
179
                size: 0,
180
                modified: "2026-01-21T11:10:00Z",
181
                children: [
182
                  {
183
                    name: "Modal.jsx",
184
                    kind: "file",
185
                    size: 1980,
186
                    modified: "2026-01-21T11:15:00Z",
187
                    lastEditedBy: "Nancy Lewis",
188
                    permissions: "rw-r--r--",
189
                  },
190
                  {
191
                    name: "Modal.css",
192
                    kind: "file",
193
                    size: 860,
194
                    modified: "2026-01-21T11:14:00Z",
195
                    lastEditedBy: "Nancy Lewis",
196
                    permissions: "rw-r--r--",
197
                  },
198
                ],
199
              },
200
            ],
201
          },
202

203
          {
204
            name: "hooks",
205
            kind: "folder",
206
            size: 0,
207
            modified: "2026-01-19T16:00:00Z",
208
            children: [
209
              {
210
                name: "useAuth.js",
211
                kind: "file",
212
                size: 1320,
213
                modified: "2026-01-19T16:05:00Z",
214
                lastEditedBy: "Betty Hall",
215
                permissions: "rw-r--r--",
216
              },
217
              {
218
                name: "useFetch.js",
219
                kind: "file",
220
                size: 1740,
221
                modified: "2026-01-19T16:06:00Z",
222
                lastEditedBy: "Betty Hall",
223
                permissions: "rw-r--r--",
224
              },
225
            ],
226
          },
227

228
          {
229
            name: "context",
230
            kind: "folder",
231
            size: 0,
232
            modified: "2026-01-20T10:40:00Z",
233
            children: [
234
              {
235
                name: "AuthContext.jsx",
236
                kind: "file",
237
                size: 1560,
238
                modified: "2026-01-20T10:42:00Z",
239
                lastEditedBy: "Jennifer Taylor",
240
                permissions: "rw-r--r--",
241
              },
242
            ],
243
          },
244

245
          {
246
            name: "services",
247
            kind: "folder",
248
            size: 0,
249
            modified: "2026-01-20T11:30:00Z",
250
            children: [
251
              {
252
                name: "api.js",
253
                kind: "file",
254
                size: 980,
255
                modified: "2026-01-20T11:32:00Z",
256
                lastEditedBy: "Charles Clark",
257
                permissions: "rw-r--r--",
258
              },
259
              {
260
                name: "authService.js",
261
                kind: "file",
262
                size: 1420,
263
                modified: "2026-01-20T11:33:00Z",
264
                lastEditedBy: "Charles Clark",
265
                permissions: "rw-r--r--",
266
              },
267
            ],
268
          },
269

270
          {
271
            name: "utils",
272
            kind: "folder",
273
            size: 0,
274
            modified: "2026-01-19T15:10:00Z",
275
            children: [
276
              {
277
                name: "constants.js",
278
                kind: "file",
279
                size: 540,
280
                modified: "2026-01-19T15:12:00Z",
281
                lastEditedBy: "Richard White",
282
                permissions: "rw-r--r--",
283
              },
284
              {
285
                name: "formatDate.js",
286
                kind: "file",
287
                size: 620,
288
                modified: "2026-01-19T15:11:00Z",
289
                lastEditedBy: "Richard White",
290
                permissions: "rw-r--r--",
291
              },
292
            ],
293
          },
294

295
          {
296
            name: "routes.jsx",
297
            kind: "file",
298
            size: 1240,
299
            modified: "2026-01-22T08:10:00Z",
300
            lastEditedBy: "Sarah Wilson",
301
            permissions: "rw-r--r--",
302
          },
303
          {
304
            name: "App.jsx",
305
            kind: "file",
306
            size: 2140,
307
            modified: "2026-01-22T08:20:00Z",
308
            lastEditedBy: "Sarah Wilson",
309
            permissions: "rw-r--r--",
310
          },
311
          {
312
            name: "main.jsx",
313
            kind: "file",
314
            size: 860,
315
            modified: "2026-01-22T08:25:00Z",
316
            lastEditedBy: "Sarah Wilson",
317
            permissions: "rw-r--r--",
318
          },
319
        ],
320
      },
321

322
      {
323
        name: "tests",
324
        kind: "folder",
325
        size: 0,
326
        modified: "2026-01-21T13:00:00Z",
327
        children: [
328
          {
329
            name: "setupTests.js",
330
            kind: "file",
331
            size: 520,
332
            modified: "2026-01-21T13:01:00Z",
333
            lastEditedBy: "Joseph Allen",
334
            permissions: "rw-r--r--",
335
          },
336
          {
337
            name: "App.test.jsx",
338
            kind: "file",
339
            size: 1620,
340
            modified: "2026-01-21T13:02:00Z",
341
            lastEditedBy: "Joseph Allen",
342
            permissions: "rw-r--r--",
343
          },
344
        ],
345
      },
346

347
      {
348
        name: "config",
349
        kind: "folder",
350
        size: 0,
351
        modified: "2026-01-18T17:00:00Z",
352
        children: [
353
          {
354
            name: "vite.config.js",
355
            kind: "file",
356
            size: 1120,
357
            modified: "2026-01-18T17:02:00Z",
358
            lastEditedBy: "Betty Hall",
359
            permissions: "rw-r--r--",
360
          },
361
          {
362
            name: "eslint.config.js",
363
            kind: "file",
364
            size: 980,
365
            modified: "2026-01-18T17:01:00Z",
366
            lastEditedBy: "Betty Hall",
367
            permissions: "rw-r--r--",
368
          },
369
        ],
370
      },
371
    ],
372
  },
373
};

Root Rows

Define rowRootFn to specify the initial root rows. This function is required when using a wrapper object where the top-level property should not appear as a row.

The following demo uses rowRootFn to bypass a root property and return the nested contents as the starting rows.

Root Rows

1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import { Grid, useTreeDataSource } from "@1771technologies/lytenyte-pro";
3
import { data } from "./tree.js";
4
import { AvatarCell, GroupCell, ModifiedCell, SizeCell } from "./components.jsx";
5

6
export interface GridSpec {
7
  readonly data: {
8
    kind: string;
9
    name: string;
10
    size: number;
11
    modified: string;
12
    lastEditedBy: string;
13
    permissions: string;
14
  };
15
}
16

17
const group: Grid.RowGroupColumn<GridSpec> = {
18
  width: 240,
19
  cellRenderer: GroupCell,
20
  pin: "start",
21
};
22

23
const columns: Grid.Column<GridSpec>[] = [
24
  { id: "size", type: "number", name: "Size", cellRenderer: SizeCell },
25
  { id: "modified", name: "Modified", cellRenderer: ModifiedCell, width: 130 },
26
  { id: "lastEditedBy", name: "Last Edited By", cellRenderer: AvatarCell },
27
  { id: "permissions", name: "Permissions" },
28
];
29

30
const base: Grid.ColumnBase<GridSpec> = { widthFlex: 1, width: 120 };
31

32
export default function TreeDataDemo() {
33
  const ds = useTreeDataSource({
34
    data: data,
35
    rowGroupDefaultExpansion: true,
36

37
    rowRootFn: (x: any) => {
38
      return x.children.map((row: any) => [row.name, row]);
39
    },
40
    rowChildrenFn: (x: any) => {
41
      if (!x.children) return [];
42
      return x.children.map((r: any) => [r.name, r]);
43
    },
44
    rowValueFn: (x) => ({
45
      name: x.name,
46
      kind: x.kind,
47
      size: x.size || null,
48
      modified: x.modified,
49
      lastEditedBy: x.lastEditedBy,
50
      permissions: x.permissions,
51
    }),
52
  });
53

54
  return (
55
    <div className="ln-grid" style={{ height: 500 }}>
56
      <Grid rowSource={ds} rowGroupColumn={group} columnBase={base} columns={columns} />
57
    </div>
58
  );
59
}

1
import "@1771technologies/lytenyte-pro/components.css";
2
import type { Grid } from "@1771technologies/lytenyte-pro";
3
import type { GridSpec } from "./demo.jsx";
4
import {
5
  ComponentsFolderClose,
6
  ComponentsFolderOpen,
7
  ConfigFolderClosed,
8
  ConfigFolderOpen,
9
  CSSIcon,
10
  DocumentIcon,
11
  DotFile,
12
  FolderBaseOpen,
13
  FolderIcon,
14
  GitIcon,
15
  HooksFolderClosedIcon,
16
  HooksFolderOpenIcon,
17
  HtmlIcon,
18
  IcoIcon,
19
  ImageIcon,
20
  JSIcon,
21
  JSONIcon,
22
  JSXIcon,
23
  MarkdownIcon,
24
  PublicFolderClosed,
25
  PublicFolderOpen,
26
  SrcFolderClosed,
27
  SrcFolderOpen,
28
  SvgIcon,
29
  TestsFolderClosed,
30
  TestsFolderOpen,
31
  TestsIcon,
32
  UtilsFolderClosedIcon,
33
  UtilsFolderOpenIcon,
34
} from "./icons.jsx";
35
import { useMemo } from "react";
36
import { format } from "date-fns";
37
import { customerToAvatar } from "@1771technologies/grid-sample-data/orders";
38

39
export function GroupCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
40
  const expanded = api.rowIsGroup(row) && row.expandable && row.expanded;
41
  const expandable = api.rowIsGroup(row) && row.expandable;
42
  const name = api.rowIsGroup(row) ? (row.key ?? "") : ((row.data.name as string) ?? "");
43

44
  const Icon = useMemo(() => {
45
    if (name.includes(".test")) return TestsIcon;
46
    if (name.includes(".git")) return GitIcon;
47
    if (name.includes(".env")) return DotFile;
48

49
    if (name === "public") return expanded ? PublicFolderOpen : PublicFolderClosed;
50

51
    if (name === "src") return expanded ? SrcFolderOpen : SrcFolderClosed;
52
    if (name === "utils") return expanded ? UtilsFolderOpenIcon : UtilsFolderClosedIcon;
53
    if (name === "components") return expanded ? ComponentsFolderOpen : ComponentsFolderClose;
54
    if (name === "tests") return expanded ? TestsFolderOpen : TestsFolderClosed;
55
    if (name === "hooks") return expanded ? HooksFolderOpenIcon : HooksFolderClosedIcon;
56
    if (name === "config") return expanded ? ConfigFolderOpen : ConfigFolderClosed;
57

58
    if (name.endsWith(".jsx")) return JSXIcon;
59
    if (name.endsWith(".js")) return JSIcon;
60
    if (name.endsWith(".png") || name.endsWith(".jpg") || name.endsWith(".jpeg")) return ImageIcon;
61
    if (name.endsWith(".json")) return JSONIcon;
62
    if (name.endsWith(".md") || name.endsWith(".mdx")) return MarkdownIcon;
63
    if (name.endsWith(".html")) return HtmlIcon;
64
    if (name.endsWith(".ico")) return IcoIcon;
65
    if (name.endsWith(".svg")) return SvgIcon;
66
    if (name.endsWith(".css")) return CSSIcon;
67

68
    if (name.includes(".") || !expandable) return DocumentIcon;
69
    return expanded ? FolderBaseOpen : FolderIcon;
70
  }, [expandable, expanded, name]);
71

72
  return (
73
    <div
74
      className="relative flex h-full w-full items-center text-sm"
75
      style={{ paddingInlineStart: row.depth * 22 }}
76
    >
77
      {row.depth > 0 &&
78
        Array.from({ length: row.depth }, (_, i) => {
79
          return (
80
            <div
81
              key={i}
82
              className="border-ln-gray-30 absolute h-full border-s border-dashed"
83
              style={{ left: i === 0 ? 16 : i * 16 + 16 + i * 6 }}
84
            />
85
          );
86
        })}
87
      {expandable && (
88
        <button
89
          onClick={() => api.rowGroupToggle(row.id)}
90
          data-ln-button="secondary"
91
          data-ln-size="md"
92
          data-ln-icon
93
        >
94
          <Icon className="size-4" />
95
        </button>
96
      )}
97
      {!expandable && (
98
        <div className="flex size-8 items-center justify-center">
99
          <Icon className="size-4" />
100
        </div>
101
      )}
102
      <div>{name}</div>
103
    </div>
104
  );
105
}
106

107
const number = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0, minimumFractionDigits: 0 });
108

109
export function SizeCell({ api, column, row }: Grid.T.CellRendererParams<GridSpec>) {
110
  if (!api.rowIsGroup(row)) return null;
111

112
  const field = api.columnField(column, row);
113

114
  if (typeof field !== "number") return "-";
115

116
  return (
117
    <div className="flex items-baseline gap-1 tabular-nums">
118
      {number.format(field)}
119
      <span className="text-ln-text-xlight text-xs font-semibold">kb</span>
120
    </div>
121
  );
122
}
123

124
export function ModifiedCell({ api, column, row }: Grid.T.CellRendererParams<GridSpec>) {
125
  if (!api.rowIsGroup(row)) return;
126

127
  const field = api.columnField(column, row);
128

129
  if (typeof field !== "string") return "-";
130

131
  return <div className="text-sm tabular-nums">{format(field, "yyyy MMM dd | hh:mm")}</div>;
132
}
133

134
export function AvatarCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
135
  if (!api.rowIsGroup(row)) return;
136

137
  const name = api.columnField(column, row);
138

139
  if (typeof name !== "string") return;
140
  const url = customerToAvatar[name];
141

142
  return (
143
    <div className="flex h-full w-full items-center gap-2">
144
      <img className="border-ln-border-strong h-7 w-7 rounded-full border" src={url} alt={name} />
145
      <div className="text-ln-text-dark flex flex-col gap-0.5">
146
        <div>{name}</div>
147
      </div>
148
    </div>
149
  );
150
}

1
import React from "react";
2
import type { SVGProps } from "react";
3

4
export function ImageIcon(props: SVGProps<SVGSVGElement>) {
5
  return (
6
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" {...props}>
7
      <path
8
        fill="#26a69a"
9
        d="M8.5 6h4l-4-4zM3.875 1H9.5l4 4v8.6c0 .773-.616 1.4-1.375 1.4h-8.25c-.76 0-1.375-.627-1.375-1.4V2.4c0-.777.612-1.4 1.375-1.4M4 13.6h8V8l-2.625 2.8L8 9.4zm1.25-7.7c-.76 0-1.375.627-1.375 1.4s.616 1.4 1.375 1.4c.76 0 1.375-.627 1.375-1.4S6.009 5.9 5.25 5.9"
10
      ></path>
11
    </svg>
12
  );
13
}
14

15
export function FolderIcon(props: SVGProps<SVGSVGElement>) {
16
  return (
17
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 32 32" {...props}>
18
      <path
19
        fill="#8d6e63"
20
        d="m13.844 7.536l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464"
21
      ></path>
22
      <rect width={18} height={6} x={14} y={22} fill="#d7ccc8" rx={1}></rect>
23
    </svg>
24
  );
25
}
26

27
export function FolderBaseOpen(props: SVGProps<SVGSVGElement>) {
28
  return (
29
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
30
      <path
31
        fill="#8d6e63"
32
        d="M28.967 12H9.442a2 2 0 0 0-1.898 1.368L4 24V10h24a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h22l4.805-11.212A2 2 0 0 0 28.967 12"
33
      ></path>
34
      <rect width={18} height={6} x={14} y={22} fill="#d7ccc8" rx={1}></rect>
35
    </svg>
36
  );
37
}
38

39
export function DocumentIcon(props: SVGProps<SVGSVGElement>) {
40
  return (
41
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 24 24" {...props}>
42
      <g fill="none">
43
        <path d="M0 0h24v24H0z"></path>
44
        <path
45
          fill="#42a5f5"
46
          d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8zm4 18H6V4h7v5h5z"
47
        ></path>
48
      </g>
49
    </svg>
50
  );
51
}
52

53
export function JSONIcon(props: SVGProps<SVGSVGElement>) {
54
  return (
55
    <svg xmlns="http://www.w3.org/2000/svg" width={960} height={960} viewBox="0 -960 960 960" {...props}>
56
      <path
57
        fill="#f9a825"
58
        d="M560-160v-80h120q17 0 28.5-11.5T720-280v-80q0-38 22-69t58-44v-14q-36-13-58-44t-22-69v-80q0-17-11.5-28.5T680-720H560v-80h120q50 0 85 35t35 85v80q0 17 11.5 28.5T840-560h40v160h-40q-17 0-28.5 11.5T800-360v80q0 50-35 85t-85 35zm-280 0q-50 0-85-35t-35-85v-80q0-17-11.5-28.5T120-400H80v-160h40q17 0 28.5-11.5T160-600v-80q0-50 35-85t85-35h120v80H280q-17 0-28.5 11.5T240-680v80q0 38-22 69t-58 44v14q36 13 58 44t22 69v80q0 17 11.5 28.5T280-240h120v80z"
59
      ></path>
60
    </svg>
61
  );
62
}
63

64
export function MarkdownIcon(props: SVGProps<SVGSVGElement>) {
65
  return (
66
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
67
      <path fill="#ffca28" d="m14 10l-4 3.5L6 10H4v12h4v-6l2 2l2-2v6h4V10zm12 6v-6h-4v6h-4l6 8l6-8z"></path>
68
    </svg>
69
  );
70
}
71

72
export function HtmlIcon(props: SVGProps<SVGSVGElement>) {
73
  return (
74
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
75
      <path
76
        fill="#e65100"
77
        d="m4 4l2 22l10 2l10-2l2-22Zm19.72 7H11.28l.29 3h11.86l-.802 9.335L15.99 25l-6.635-1.646L8.93 19h3.02l.19 2l3.86.77l3.84-.77l.29-4H8.84L8 8h16Z"
78
      ></path>
79
    </svg>
80
  );
81
}
82

83
export function IcoIcon(props: SVGProps<SVGSVGElement>) {
84
  return (
85
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
86
      <path fill="#ffd54f" d="m16 24l10 6l-4-10l8-8l-10-.032L16 2l-4 10H2l8 8l-4 10Z"></path>
87
    </svg>
88
  );
89
}
90

91
export function SvgIcon(props: SVGProps<SVGSVGElement>) {
92
  return (
93
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
94
      <path
95
        fill="#ffb300"
96
        d="M29.168 14.03a2.7 2.7 0 0 0-1.968-.83a2.51 2.51 0 0 0-1.929.8h-4.443l3.078-3.078a2.835 2.835 0 0 0 2.857-2.842a2.6 2.6 0 0 0-.831-1.969a2.82 2.82 0 0 0-2.014-.788a2.67 2.67 0 0 0-1.968.788a2.36 2.36 0 0 0-.812 1.922L18 11.17V6.726a2.51 2.51 0 0 0 .8-1.929a2.7 2.7 0 0 0-.832-1.968a2.745 2.745 0 0 0-3.936 0a2.7 2.7 0 0 0-.832 1.968a2.51 2.51 0 0 0 .8 1.93v4.443l-3.138-3.138a2.36 2.36 0 0 0-.812-1.922a2.66 2.66 0 0 0-1.968-.788a2.83 2.83 0 0 0-2.014.788a2.6 2.6 0 0 0-.831 1.969a2.74 2.74 0 0 0 .831 2.013a2.8 2.8 0 0 0 2.026.829l3.078 3.078H6.729a2.51 2.51 0 0 0-1.929-.8a2.7 2.7 0 0 0-1.968.831a2.745 2.745 0 0 0 0 3.937a2.7 2.7 0 0 0 1.968.832a2.51 2.51 0 0 0 1.929-.8h4.443l-3.078 3.077a2.835 2.835 0 0 0-2.857 2.842a2.6 2.6 0 0 0 .831 1.969a2.82 2.82 0 0 0 2.014.788a2.67 2.67 0 0 0 1.968-.788a2.36 2.36 0 0 0 .812-1.922L14 20.827v4.444a2.51 2.51 0 0 0-.8 1.929a2.784 2.784 0 0 0 4.768 1.968A2.7 2.7 0 0 0 18.8 27.2a2.51 2.51 0 0 0-.8-1.929v-4.444l3.138 3.138a2.36 2.36 0 0 0 .812 1.922a2.66 2.66 0 0 0 1.968.788a2.83 2.83 0 0 0 2.014-.788a2.6 2.6 0 0 0 .831-1.969a2.74 2.74 0 0 0-.831-2.013a2.8 2.8 0 0 0-2.026-.829L20.828 18h4.443a2.51 2.51 0 0 0 1.93.8a2.784 2.784 0 0 0 1.967-4.769Z"
97
      ></path>
98
    </svg>
99
  );
100
}
101

102
export function PublicFolderClosed(props: SVGProps<SVGSVGElement>) {
103
  return (
104
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
105
      <path
106
        fill="#039be5"
107
        d="m13.844 7.536l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464"
108
      ></path>
109
      <path
110
        fill="#b3e5fc"
111
        d="M22 10a10 10 0 1 0 10 10a10 10 0 0 0-10-10m6.918 6H25.96a15.8 15.8 0 0 0-1.342-3.54a8.04 8.04 0 0 1 4.3 3.54M22 12a14.1 14.1 0 0 1 1.89 4h-3.78A14.1 14.1 0 0 1 22 12m-2.618.46A15.8 15.8 0 0 0 18.04 16h-2.958a8.04 8.04 0 0 1 4.3-3.54M14.263 22a7.7 7.7 0 0 1 0-4h3.407a15.5 15.5 0 0 0 0 4Zm.82 2h2.957a15.8 15.8 0 0 0 1.342 3.54a8.04 8.04 0 0 1-4.3-3.54ZM22 28a14.1 14.1 0 0 1-1.89-4h3.78A14.1 14.1 0 0 1 22 28m2.31-6h-4.62a13.4 13.4 0 0 1 0-4h4.62a13.4 13.4 0 0 1 0 4m.308 5.54A15.8 15.8 0 0 0 25.96 24h2.958a8.04 8.04 0 0 1-4.3 3.54M29.737 22H26.33a15.5 15.5 0 0 0 0-4h3.407a7.7 7.7 0 0 1 0 4"
112
      ></path>
113
    </svg>
114
  );
115
}
116

117
export function PublicFolderOpen(props: SVGProps<SVGSVGElement>) {
118
  return (
119
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
120
      <path
121
        fill="#039be5"
122
        d="M28.967 12H9.442a2 2 0 0 0-1.898 1.368L4 24V10h24a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h22l4.805-11.212A2 2 0 0 0 28.967 12"
123
      ></path>
124
      <path
125
        fill="#b3e5fc"
126
        d="M22 10a10 10 0 1 0 10 10a10 10 0 0 0-10-10m6.918 6H25.96a15.8 15.8 0 0 0-1.342-3.54a8.04 8.04 0 0 1 4.3 3.54M22 12a14.1 14.1 0 0 1 1.89 4h-3.78A14.1 14.1 0 0 1 22 12m-2.618.46A15.8 15.8 0 0 0 18.04 16h-2.958a8.04 8.04 0 0 1 4.3-3.54M14.263 22a7.7 7.7 0 0 1 0-4h3.407a15.5 15.5 0 0 0 0 4Zm.82 2h2.957a15.8 15.8 0 0 0 1.342 3.54a8.04 8.04 0 0 1-4.3-3.54ZM22 28a14.1 14.1 0 0 1-1.89-4h3.78A14.1 14.1 0 0 1 22 28m2.31-6h-4.62a13.4 13.4 0 0 1 0-4h4.62a13.4 13.4 0 0 1 0 4m.308 5.54A15.8 15.8 0 0 0 25.96 24h2.958a8.04 8.04 0 0 1-4.3 3.54M29.737 22H26.33a15.5 15.5 0 0 0 0-4h3.407a7.7 7.7 0 0 1 0 4"
127
      ></path>
128
    </svg>
129
  );
130
}
131

132
export function ComponentsFolderClose(props: SVGProps<SVGSVGElement>) {
133
  return (
134
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" {...props}>
135
      <path
136
        fill="#00bcd4"
137
        d="m6.922 3.768l-.644-.536A1 1 0 0 0 5.638 3H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H7.562a1 1 0 0 1-.64-.232"
138
      ></path>
139
      <g fill="#b2ebf2">
140
        <path d="M10.5 8.399c2.924 0 4.714 1.037 4.714 1.6s-1.79 1.602-4.714 1.602S5.785 10.564 5.785 10s1.79-1.601 4.715-1.601m0-.8c-3.038 0-5.5 1.075-5.5 2.4s2.462 2.402 5.5 2.402S16 11.326 16 10s-2.463-2.401-5.5-2.401"></path>
141
        <path d="M10.5 9.2a.786.8 0 1 0 .785.8a.786.8 0 0 0-.785-.8"></path>
142
        <path d="M8.322 5.8c.793 0 2.333 1.272 3.538 3.4c1.463 2.58 1.476 4.677.997 4.959a.354.36 0 0 1-.18.04c-.792 0-2.333-1.271-3.538-3.399c-1.463-2.58-1.476-4.677-.997-4.96a.354.36 0 0 1 .18-.04m0-.8a1.128 1.149 0 0 0-.572.147c-1.128.663-.81 3.374.708 6.054C9.748 13.478 11.491 15 12.678 15a1.128 1.149 0 0 0 .572-.148c1.127-.663.81-3.373-.71-6.053C11.25 6.522 9.509 5 8.323 5Z"></path>
143
        <path d="M12.677 5.8a.354.36 0 0 1 .18.04c.48.283.466 2.38-.997 4.96c-1.206 2.128-2.746 3.4-3.538 3.4a.354.36 0 0 1-.18-.04c-.48-.284-.466-2.38.997-4.96c1.206-2.128 2.746-3.4 3.538-3.4m0-.8c-1.186 0-2.929 1.522-4.22 3.8c-1.517 2.68-1.835 5.39-.707 6.052a1.128 1.149 0 0 0 .572.148c1.186 0 2.929-1.523 4.22-3.8c1.517-2.68 1.835-5.39.708-6.052A1.128 1.149 0 0 0 12.677 5"></path>
144
      </g>
145
    </svg>
146
  );
147
}
148

149
export function ComponentsFolderOpen(props: SVGProps<SVGSVGElement>) {
150
  return (
151
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" {...props}>
152
      <path
153
        fill="#00bcd4"
154
        d="M14.484 6H4.72a1 1 0 0 0-.949.684L2 12V5h13a1 1 0 0 0-1-1H7.562a1 1 0 0 1-.64-.232l-.644-.536A1 1 0 0 0 5.638 3H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h11l2.403-5.606A1 1 0 0 0 14.483 6"
155
      ></path>
156
      <g fill="#b2ebf2">
157
        <path d="M10.5 8.399c2.924 0 4.714 1.037 4.714 1.6s-1.79 1.602-4.714 1.602S5.785 10.564 5.785 10s1.79-1.601 4.715-1.601m0-.8c-3.038 0-5.5 1.075-5.5 2.4s2.462 2.402 5.5 2.402S16 11.326 16 10s-2.463-2.401-5.5-2.401"></path>
158
        <path d="M10.5 9.2a.786.8 0 1 0 .785.8a.786.8 0 0 0-.785-.8"></path>
159
        <path d="M8.322 5.8c.793 0 2.333 1.272 3.538 3.4c1.463 2.58 1.476 4.677.997 4.959a.354.36 0 0 1-.18.04c-.792 0-2.333-1.271-3.538-3.399c-1.463-2.58-1.476-4.677-.997-4.96a.354.36 0 0 1 .18-.04m0-.8a1.128 1.149 0 0 0-.572.147c-1.128.663-.81 3.374.708 6.054C9.748 13.478 11.491 15 12.678 15a1.128 1.149 0 0 0 .572-.148c1.127-.663.81-3.373-.71-6.053C11.25 6.522 9.509 5 8.323 5Z"></path>
160
        <path d="M12.677 5.8a.354.36 0 0 1 .18.04c.48.283.466 2.38-.997 4.96c-1.206 2.128-2.746 3.4-3.538 3.4a.354.36 0 0 1-.18-.04c-.48-.284-.466-2.38.997-4.96c1.206-2.128 2.746-3.4 3.538-3.4m0-.8c-1.186 0-2.929 1.522-4.22 3.8c-1.517 2.68-1.835 5.39-.707 6.052a1.128 1.149 0 0 0 .572.148c1.186 0 2.929-1.523 4.22-3.8c1.517-2.68 1.835-5.39.708-6.052A1.128 1.149 0 0 0 12.677 5"></path>
161
      </g>
162
    </svg>
163
  );
164
}
165

166
export function CSSIcon(props: SVGProps<SVGSVGElement>) {
167
  return (
168
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
169
      <path
170
        fill="#7e57c2"
171
        d="M20 18h-2v-2h-2v2c0 .193 0 .703 1.254 1.033A3.345 3.345 0 0 1 20 22h2v2h2v-2c0-.388-.562-.851-1.254-1.034C20.356 20.34 20 18.84 20 18m-3.254 2.966C14.356 20.34 14 18.84 14 18h-2v-2h-2v8h2v-2h4v2h2v-2c0-.388-.562-.851-1.254-1.034"
172
      ></path>
173
      <path
174
        fill="#7e57c2"
175
        d="M24 4H4v20a4 4 0 0 0 4 4h16.16A3.84 3.84 0 0 0 28 24.16V8a4 4 0 0 0-4-4m2 14h-2v-2h-2v2c0 .193 0 .703 1.254 1.033A3.345 3.345 0 0 1 26 22v2a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2Z"
176
      ></path>
177
    </svg>
178
  );
179
}
180

181
export function SrcFolderClosed(props: SVGProps<SVGSVGElement>) {
182
  return (
183
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
184
      <path
185
        fill="#4caf50"
186
        d="m13.844 7.536l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464"
187
      ></path>
188
      <path
189
        fill="#c8e6c9"
190
        d="M18.435 30a1 1 0 0 1-.238-.028a1.137 1.137 0 0 1-.828-1.323l3.093-15.744a1.13 1.13 0 0 1 .507-.744a1.06 1.06 0 0 1 .8-.134a1.14 1.14 0 0 1 .828 1.324l-3.1 15.744a1.12 1.12 0 0 1-.505.743a1.06 1.06 0 0 1-.557.162m6.2-2h-.077a1.08 1.08 0 0 1-.762-.412a1.164 1.164 0 0 1 .113-1.548l5.32-4.967l-5.297-4.623a1.165 1.165 0 0 1-.162-1.544a1.08 1.08 0 0 1 .754-.437a1.06 1.06 0 0 1 .81.258l6.244 5.455a1.156 1.156 0 0 1 .004 1.723l-6.22 5.808a1.07 1.07 0 0 1-.728.289Zm-9.31 0a1.07 1.07 0 0 1-.728-.292l-6.225-5.811a1.16 1.16 0 0 1-.01-1.692l.02-.018l6.246-5.454a1.03 1.03 0 0 1 .8-.26a1.08 1.08 0 0 1 .758.436a1.165 1.165 0 0 1-.16 1.547l-5.293 4.62l5.32 4.964a1.156 1.156 0 0 1 .112 1.548a1.07 1.07 0 0 1-.762.412Z"
191
      ></path>
192
    </svg>
193
  );
194
}
195

196
export function SrcFolderOpen(props: SVGProps<SVGSVGElement>) {
197
  return (
198
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
199
      <path
200
        fill="#4caf50"
201
        d="M28.967 12H9.442a2 2 0 0 0-1.898 1.368L4 24V10h24a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h22l4.805-11.212A2 2 0 0 0 28.967 12"
202
      ></path>
203
      <path
204
        fill="#c8e6c9"
205
        d="M18.473 30a1 1 0 0 1-.238-.028a1.137 1.137 0 0 1-.828-1.323L20.5 12.905a1.13 1.13 0 0 1 .507-.744a1.06 1.06 0 0 1 .8-.134a1.14 1.14 0 0 1 .828 1.324l-3.101 15.744a1.12 1.12 0 0 1-.504.743a1.06 1.06 0 0 1-.557.162m6.2-2h-.077a1.08 1.08 0 0 1-.762-.412a1.164 1.164 0 0 1 .113-1.548l5.319-4.967l-5.296-4.623a1.165 1.165 0 0 1-.162-1.544a1.08 1.08 0 0 1 .754-.437a1.06 1.06 0 0 1 .81.258l6.244 5.455a1.156 1.156 0 0 1 .003 1.723l-6.218 5.808a1.07 1.07 0 0 1-.729.289Zm-9.31 0a1.07 1.07 0 0 1-.728-.292l-6.226-5.811a1.16 1.16 0 0 1-.01-1.692l.02-.018l6.246-5.454a1.03 1.03 0 0 1 .8-.26a1.08 1.08 0 0 1 .76.436a1.165 1.165 0 0 1-.16 1.547l-5.294 4.62l5.32 4.964a1.156 1.156 0 0 1 .112 1.548a1.07 1.07 0 0 1-.762.412Z"
206
      ></path>
207
    </svg>
208
  );
209
}
210

211
export function JSXIcon(props: SVGProps<SVGSVGElement>) {
212
  return (
213
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
214
      <path
215
        fill="#0288d1"
216
        d="M16 12c7.444 0 12 2.59 12 4s-4.556 4-12 4s-12-2.59-12-4s4.556-4 12-4m0-2c-7.732 0-14 2.686-14 6s6.268 6 14 6s14-2.686 14-6s-6.268-6-14-6"
217
      ></path>
218
      <path fill="#0288d1" d="M16 14a2 2 0 1 0 2 2a2 2 0 0 0-2-2"></path>
219
      <path
220
        fill="#0288d1"
221
        d="M10.458 5.507c2.017 0 5.937 3.177 9.006 8.493c3.722 6.447 3.757 11.687 2.536 12.392a.9.9 0 0 1-.457.1c-2.017 0-5.938-3.176-9.007-8.492C8.814 11.553 8.779 6.313 10 5.608a.9.9 0 0 1 .458-.1m-.001-2A2.87 2.87 0 0 0 9 3.875C6.13 5.532 6.938 12.304 10.804 19c3.284 5.69 7.72 9.493 10.74 9.493A2.87 2.87 0 0 0 23 28.124c2.87-1.656 2.062-8.428-1.804-15.124c-3.284-5.69-7.72-9.493-10.74-9.493Z"
222
      ></path>
223
      <path
224
        fill="#0288d1"
225
        d="M21.543 5.507a.9.9 0 0 1 .457.1c1.221.706 1.186 5.946-2.536 12.393c-3.07 5.316-6.99 8.493-9.007 8.493a.9.9 0 0 1-.457-.1C8.779 25.686 8.814 20.446 12.536 14c3.07-5.316 6.99-8.493 9.007-8.493m0-2c-3.02 0-7.455 3.804-10.74 9.493C6.939 19.696 6.13 26.468 9 28.124a2.87 2.87 0 0 0 1.457.369c3.02 0 7.455-3.804 10.74-9.493C25.061 12.304 25.87 5.532 23 3.876a2.87 2.87 0 0 0-1.457-.369"
226
      ></path>
227
    </svg>
228
  );
229
}
230

231
export function JSIcon(props: SVGProps<SVGSVGElement>) {
232
  return (
233
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
234
      <path
235
        fill="#8bc34a"
236
        d="M16 20.003v2h4a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-2v-2h4v-2h-4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2v2Z"
237
      ></path>
238
      <path
239
        fill="#8bc34a"
240
        d="m16 3.003l-12 7v14l4 2h6v-13.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v11.5H8l-2-1.034V11.15l10-5.833l10 5.833v11.703l-10 5.833l-1.745-1.022L13 29.253l3 1.75l12-7v-14Z"
241
      ></path>
242
    </svg>
243
  );
244
}
245

246
export function TestsFolderClosed(props: SVGProps<SVGSVGElement>) {
247
  return (
248
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
249
      <path
250
        fill="#00bfa5"
251
        d="m13.844 7.536l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464"
252
      ></path>
253
      <path
254
        fill="#a7ffeb"
255
        d="M16 12v2h2v12a4 4 0 0 0 8 0V14h2v-2Zm5 14a1 1 0 1 1 1-1a1 1 0 0 1-1 1m2-4a1 1 0 1 1 1-1a1 1 0 0 1-1 1m1-4h-4v-4h4Z"
256
      ></path>
257
    </svg>
258
  );
259
}
260

261
export function TestsFolderOpen(props: SVGProps<SVGSVGElement>) {
262
  return (
263
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
264
      <path
265
        fill="#00bfa5"
266
        d="M28.967 12H9.442a2 2 0 0 0-1.898 1.368L4 24V10h24a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h22l4.805-11.212A2 2 0 0 0 28.967 12"
267
      ></path>
268
      <path
269
        fill="#a7ffeb"
270
        d="M16 12v2h2v12a4 4 0 0 0 8 0V14h2v-2Zm5 14a1 1 0 1 1 1-1a1 1 0 0 1-1 1m2-4a1 1 0 1 1 1-1a1 1 0 0 1-1 1m1-4h-4v-4h4Z"
271
      ></path>
272
    </svg>
273
  );
274
}
275

276
export function TestsIcon(props: SVGProps<SVGSVGElement>) {
277
  return (
278
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
279
      <path
280
        fill="#0288d1"
281
        d="M20 4v2h-2v4.531l.264.461l7.473 13.078a2 2 0 0 1 .263.992V26a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-.938a2 2 0 0 1 .264-.992l7.473-13.078l.263-.46V6h-2V4zm0-2h-8a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2v2L4.527 23.078A4 4 0 0 0 4 25.062V26a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4v-.938a4 4 0 0 0-.527-1.984L20 10V8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2"
282
      ></path>
283
      <circle cx={17} cy={17} r={1} fill="#0288d1"></circle>
284
      <path
285
        fill="#0288d1"
286
        d="M19.72 20.715a1 1 0 0 0-1.134-.318a5 5 0 0 1-1.18.262a3.95 3.95 0 0 1-1.862-.292a2.74 2.74 0 0 0-3.371.489a2 2 0 0 0-.237.35L10 24h12Z"
287
      ></path>
288
    </svg>
289
  );
290
}
291

292
export function ConfigFolderClosed(props: SVGProps<SVGSVGElement>) {
293
  return (
294
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
295
      <path
296
        fill="#00acc1"
297
        d="m13.844 7.536l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464"
298
      ></path>
299
      <path
300
        fill="#80deea"
301
        d="M23.001 24.15A3.195 3.195 0 0 1 19.762 21a3.24 3.24 0 1 1 3.239 3.15m6.875-2.277a7 7 0 0 0 .064-.874a8 8 0 0 0-.064-.9l1.951-1.467a.446.446 0 0 0 .113-.576l-1.853-3.112a.46.46 0 0 0-.564-.199l-2.302.9a6.8 6.8 0 0 0-1.565-.882l-.342-2.385A.464.464 0 0 0 24.85 12h-3.7a.464.464 0 0 0-.463.378l-.341 2.385a6.8 6.8 0 0 0-1.563.881l-2.304-.899a.46.46 0 0 0-.564.198l-1.851 3.113a.436.436 0 0 0 .112.576l1.95 1.468a8 8 0 0 0-.064.9a7 7 0 0 0 .064.873l-1.95 1.493a.436.436 0 0 0-.112.576l1.85 3.115a.47.47 0 0 0 .565.198l2.304-.91a6.4 6.4 0 0 0 1.563.892l.342 2.385a.464.464 0 0 0 .463.378h3.7a.464.464 0 0 0 .464-.378l.34-2.385a6.8 6.8 0 0 0 1.566-.891l2.302.909a.475.475 0 0 0 .566-.198l1.85-3.115a.446.446 0 0 0-.112-.576Z"
302
      ></path>
303
    </svg>
304
  );
305
}
306

307
export function ConfigFolderOpen(props: SVGProps<SVGSVGElement>) {
308
  return (
309
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
310
      <path
311
        fill="#00acc1"
312
        d="M28.967 12H9.442a2 2 0 0 0-1.898 1.368L4 24V10h24a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h22l4.805-11.212A2 2 0 0 0 28.967 12"
313
      ></path>
314
      <path
315
        fill="#80deea"
316
        d="M23.001 24.15A3.195 3.195 0 0 1 19.762 21a3.24 3.24 0 1 1 3.239 3.15m6.875-2.277a7 7 0 0 0 .064-.874a8 8 0 0 0-.064-.9l1.951-1.467a.446.446 0 0 0 .113-.576l-1.853-3.112a.46.46 0 0 0-.564-.199l-2.302.9a6.8 6.8 0 0 0-1.565-.882l-.342-2.385A.464.464 0 0 0 24.85 12h-3.7a.464.464 0 0 0-.463.378l-.341 2.385a6.8 6.8 0 0 0-1.563.881l-2.304-.899a.46.46 0 0 0-.564.198l-1.851 3.113a.436.436 0 0 0 .112.576l1.95 1.468a8 8 0 0 0-.064.9a7 7 0 0 0 .064.873l-1.95 1.493a.436.436 0 0 0-.112.576l1.85 3.115a.47.47 0 0 0 .565.198l2.304-.91a6.4 6.4 0 0 0 1.563.892l.342 2.385a.464.464 0 0 0 .463.378h3.7a.464.464 0 0 0 .464-.378l.34-2.385a6.8 6.8 0 0 0 1.566-.891l2.302.909a.475.475 0 0 0 .566-.198l1.85-3.115a.446.446 0 0 0-.112-.576Z"
317
      ></path>
318
    </svg>
319
  );
320
}
321

322
export function UtilsFolderClosedIcon(props: SVGProps<SVGSVGElement>) {
323
  return (
324
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
325
      <path
326
        fill="#7cb342"
327
        d="m13.844 7.536l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464"
328
      ></path>
329
      <path
330
        fill="#dcedc8"
331
        d="M31 12H19a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V13a1 1 0 0 0-1-1m-1 8h-4v4h-2v-4h-4v-2h4v-4h2v4h4Z"
332
      ></path>
333
      <path fill="#dcedc8" d="M16 28V16h-2v13a1 1 0 0 0 1 1h13v-2Z"></path>
334
    </svg>
335
  );
336
}
337

338
export function UtilsFolderOpenIcon(props: SVGProps<SVGSVGElement>) {
339
  return (
340
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
341
      <path
342
        fill="#7cb342"
343
        d="M28.967 12H9.442a2 2 0 0 0-1.898 1.368L4 24V10h24a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464l-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h22l4.805-11.212A2 2 0 0 0 28.967 12"
344
      ></path>
345
      <path
346
        fill="#dcedc8"
347
        d="M31 12H19a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V13a1 1 0 0 0-1-1m-1 8h-4v4h-2v-4h-4v-2h4v-4h2v4h4Z"
348
      ></path>
349
      <path fill="#dcedc8" d="M16 28V16h-2v13a1 1 0 0 0 1 1h13v-2Z"></path>
350
    </svg>
351
  );
352
}
353

354
export function HooksFolderClosedIcon(props: SVGProps<SVGSVGElement>) {
355
  return (
356
    <svg xmlns="http://www.w3.org/2000/svg" width={1024} height={1024} viewBox="0 0 1024 1024" {...props}>
357
      <path
358
        fill="#7e57c2"
359
        d="m443.008 241.152l-41.216-34.304A64 64 0 0 0 360.832 192H128a64 64 0 0 0-64 64v512a64 64 0 0 0 64 64h768a64 64 0 0 0 64-64V320a64 64 0 0 0-64-64H483.968a64 64 0 0 1-40.96-14.848"
360
      ></path>
361
      <path
362
        fill="#d1c4e9"
363
        d="M800 320c-53.02 0-96 42.98-96 96c.104 40.593 25.729 76.733 64 90.264V768c0 35.346-28.654 64-64 64s-64-28.654-64-64v-64h64L576 576v192c0 70.692 57.308 128 128 128s128-57.308 128-128V506.264c38.271-13.531 63.896-49.671 64-90.264c0-53.02-42.98-96-96-96m0 64c17.673 0 32 14.327 32 32s-14.327 32-32 32s-32-14.327-32-32s14.327-32 32-32"
364
      ></path>
365
    </svg>
366
  );
367
}
368

369
export function HooksFolderOpenIcon(props: SVGProps<SVGSVGElement>) {
370
  return (
371
    <svg xmlns="http://www.w3.org/2000/svg" width={1024} height={1024} viewBox="0 0 1024 1024" {...props}>
372
      <path
373
        fill="#7e57c2"
374
        d="M926.944 384h-624.8a64 64 0 0 0-60.736 43.776L128 768V320h768a64 64 0 0 0-64-64H483.968a64 64 0 0 1-40.96-14.848l-41.216-34.304A64 64 0 0 0 360.832 192H128a64 64 0 0 0-64 64v512a64 64 0 0 0 64 64h704l153.76-358.784A64 64 0 0 0 926.944 384"
375
      ></path>
376
      <path
377
        fill="#d1c4e9"
378
        d="M800 320c-53.02 0-96 42.98-96 96c.104 40.593 25.729 76.733 64 90.264V768c0 35.346-28.654 64-64 64s-64-28.654-64-64v-64h64L576 576v192c0 70.692 57.308 128 128 128s128-57.308 128-128V506.264c38.271-13.531 63.896-49.671 64-90.264c0-53.02-42.98-96-96-96m0 64c17.673 0 32 14.327 32 32s-14.327 32-32 32s-32-14.327-32-32s14.327-32 32-32"
379
      ></path>
380
    </svg>
381
  );
382
}
383

384
export function GitIcon(props: SVGProps<SVGSVGElement>) {
385
  return (
386
    <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 32 32" {...props}>
387
      <path
388
        fill="#e64a19"
389
        d="M13.172 2.828L11.78 4.22l1.91 1.91l2 2A2.986 2.986 0 0 1 20 10.81a3.25 3.25 0 0 1-.31 1.31l2.06 2a2.68 2.68 0 0 1 3.37.57a2.86 2.86 0 0 1 .88 2.117a3.02 3.02 0 0 1-.856 2.109A2.9 2.9 0 0 1 23 19.81a2.93 2.93 0 0 1-2.13-.87a2.694 2.694 0 0 1-.56-3.38l-2-2.06a3 3 0 0 1-.31.12V20a3 3 0 0 1 1.44 1.09a2.92 2.92 0 0 1 .56 1.72a2.88 2.88 0 0 1-.878 2.128a2.98 2.98 0 0 1-2.048.871a2.981 2.981 0 0 1-2.514-4.719A3 3 0 0 1 16 20v-6.38a2.96 2.96 0 0 1-1.44-1.09a2.9 2.9 0 0 1-.56-1.72a2.9 2.9 0 0 1 .31-1.31l-3.9-3.9l-7.579 7.572a4 4 0 0 0-.001 5.658l10.342 10.342a4 4 0 0 0 5.656 0l10.344-10.344a4 4 0 0 0 0-5.656L18.828 2.828a4 4 0 0 0-5.656 0"
390
      ></path>
391
    </svg>
392
  );
393
}
394

395
export function DotFile(props: SVGProps<SVGSVGElement>) {
396
  return (
397
    <svg xmlns="http://www.w3.org/2000/svg" width={400} height={400} viewBox="0 0 400 400" {...props}>
398
      <g fill="#2196f3" fillOpacity={0.604} transform="translate(-6.66 100.49)">
399
        <ellipse
400
          cx={37.18}
401
          cy={-256.97}
402
          rx={110.14}
403
          ry={139.47}
404
          transform="matrix(-.3005 .95378 -.96071 -.27755 0 0)"
405
        ></ellipse>
406
        <ellipse
407
          cx={38.835}
408
          cy={-197.03}
409
          rx={110.14}
410
          ry={139.47}
411
          transform="matrix(-.3005 .95378 -.96071 -.27755 0 0)"
412
        ></ellipse>
413
        <ellipse
414
          cx={-224.78}
415
          cy={-5.066}
416
          rx={110.14}
417
          ry={139.47}
418
          transform="matrix(-.95378 -.3005 .27755 -.96071 0 0)"
419
        ></ellipse>
420
        <ellipse
421
          cx={-228.55}
422
          cy={-60.291}
423
          rx={110.14}
424
          ry={139.47}
425
          transform="matrix(-.95378 -.3005 .27755 -.96071 0 0)"
426
        ></ellipse>
427
      </g>
428
    </svg>
429
  );
430
}

1
export const data = {
2
  name: "root",
3
  kind: "folder",
4
  size: 0,
5
  modified: "2026-01-22T09:00:00Z",
6
  children: [
7
    {
8
      name: "package.json",
9
      kind: "file",
10
      size: 1840,
11
      modified: "2026-01-21T18:12:00Z",
12
      lastEditedBy: "Joseph Allen",
13
      permissions: "rw-r--r--",
14
    },
15
    {
16
      name: "package-lock.json",
17
      kind: "file",
18
      size: 92000,
19
      modified: "2026-01-21T18:12:30Z",
20
      lastEditedBy: "Joseph Allen",
21
      permissions: "rw-r--r--",
22
    },
23
    {
24
      name: "README.md",
25
      kind: "file",
26
      size: 1240,
27
      modified: "2026-01-20T10:05:00Z",
28
      lastEditedBy: "Betty Hall",
29
      permissions: "rw-r--r--",
30
    },
31
    {
32
      name: ".gitignore",
33
      kind: "file",
34
      size: 180,
35
      modified: "2026-01-19T09:00:00Z",
36
      lastEditedBy: "Betty Hall",
37
      permissions: "rw-r--r--",
38
    },
39
    {
40
      name: ".env",
41
      kind: "file",
42
      size: 220,
43
      modified: "2026-01-21T08:30:00Z",
44
      lastEditedBy: "Nancy Lewis",
45
      permissions: "rw-------",
46
    },
47

48
    {
49
      name: "public",
50
      kind: "folder",
51
      size: 0,
52
      modified: "2026-01-18T12:00:00Z",
53
      children: [
54
        {
55
          name: "index.html",
56
          kind: "file",
57
          size: 3420,
58
          modified: "2026-01-18T12:01:00Z",
59
          lastEditedBy: "Charles Clark",
60
          permissions: "rw-r--r--",
61
        },
62
        {
63
          name: "favicon.ico",
64
          kind: "file",
65
          size: 5430,
66
          modified: "2026-01-18T12:01:30Z",
67
          lastEditedBy: "Charles Clark",
68
          permissions: "rw-r--r--",
69
        },
70
        {
71
          name: "manifest.json",
72
          kind: "file",
73
          size: 820,
74
          modified: "2026-01-18T12:02:00Z",
75
          lastEditedBy: "Charles Clark",
76
          permissions: "rw-r--r--",
77
        },
78
        {
79
          name: "assets",
80
          kind: "folder",
81
          size: 0,
82
          modified: "2026-01-17T15:40:00Z",
83
          children: [
84
            {
85
              name: "logo.svg",
86
              kind: "file",
87
              size: 2048,
88
              modified: "2026-01-17T15:42:00Z",
89
              lastEditedBy: "Richard White",
90
              permissions: "rw-r--r--",
91
            },
92
            {
93
              name: "hero.png",
94
              kind: "file",
95
              size: 482000,
96
              modified: "2026-01-17T15:45:00Z",
97
              lastEditedBy: "Richard White",
98
              permissions: "rw-r--r--",
99
            },
100
          ],
101
        },
102
      ],
103
    },
104

105
    {
106
      name: "src",
107
      kind: "folder",
108
      size: 0,
109
      modified: "2026-01-22T08:30:00Z",
110
      children: [
111
        {
112
          name: "assets",
113
          kind: "folder",
114
          size: 0,
115
          modified: "2026-01-20T14:00:00Z",
116
          children: [
117
            {
118
              name: "global.css",
119
              kind: "file",
120
              size: 2140,
121
              modified: "2026-01-20T14:05:00Z",
122
              lastEditedBy: "Jennifer Taylor",
123
              permissions: "rw-r--r--",
124
            },
125
            {
126
              name: "variables.css",
127
              kind: "file",
128
              size: 980,
129
              modified: "2026-01-20T14:04:00Z",
130
              lastEditedBy: "Jennifer Taylor",
131
              permissions: "rw-r--r--",
132
            },
133
          ],
134
        },
135

136
        {
137
          name: "components",
138
          kind: "folder",
139
          size: 0,
140
          modified: "2026-01-21T09:30:00Z",
141
          children: [
142
            {
143
              name: "Button",
144
              kind: "folder",
145
              size: 0,
146
              modified: "2026-01-21T09:31:00Z",
147
              children: [
148
                {
149
                  name: "Button.jsx",
150
                  kind: "file",
151
                  size: 1620,
152
                  modified: "2026-01-21T09:35:00Z",
153
                  lastEditedBy: "Sarah Wilson",
154
                  permissions: "rw-r--r--",
155
                },
156
                {
157
                  name: "Button.module.css",
158
                  kind: "file",
159
                  size: 740,
160
                  modified: "2026-01-21T09:34:00Z",
161
                  lastEditedBy: "Sarah Wilson",
162
                  permissions: "rw-r--r--",
163
                },
164
                {
165
                  name: "Button.test.jsx",
166
                  kind: "file",
167
                  size: 1280,
168
                  modified: "2026-01-21T09:36:00Z",
169
                  lastEditedBy: "Joseph Allen",
170
                  permissions: "rw-r--r--",
171
                },
172
              ],
173
            },
174

175
            {
176
              name: "Modal",
177
              kind: "folder",
178
              size: 0,
179
              modified: "2026-01-21T11:10:00Z",
180
              children: [
181
                {
182
                  name: "Modal.jsx",
183
                  kind: "file",
184
                  size: 1980,
185
                  modified: "2026-01-21T11:15:00Z",
186
                  lastEditedBy: "Nancy Lewis",
187
                  permissions: "rw-r--r--",
188
                },
189
                {
190
                  name: "Modal.css",
191
                  kind: "file",
192
                  size: 860,
193
                  modified: "2026-01-21T11:14:00Z",
194
                  lastEditedBy: "Nancy Lewis",
195
                  permissions: "rw-r--r--",
196
                },
197
              ],
198
            },
199
          ],
200
        },
201

202
        {
203
          name: "hooks",
204
          kind: "folder",
205
          size: 0,
206
          modified: "2026-01-19T16:00:00Z",
207
          children: [
208
            {
209
              name: "useAuth.js",
210
              kind: "file",
211
              size: 1320,
212
              modified: "2026-01-19T16:05:00Z",
213
              lastEditedBy: "Betty Hall",
214
              permissions: "rw-r--r--",
215
            },
216
            {
217
              name: "useFetch.js",
218
              kind: "file",
219
              size: 1740,
220
              modified: "2026-01-19T16:06:00Z",
221
              lastEditedBy: "Betty Hall",
222
              permissions: "rw-r--r--",
223
            },
224
          ],
225
        },
226

227
        {
228
          name: "context",
229
          kind: "folder",
230
          size: 0,
231
          modified: "2026-01-20T10:40:00Z",
232
          children: [
233
            {
234
              name: "AuthContext.jsx",
235
              kind: "file",
236
              size: 1560,
237
              modified: "2026-01-20T10:42:00Z",
238
              lastEditedBy: "Jennifer Taylor",
239
              permissions: "rw-r--r--",
240
            },
241
          ],
242
        },
243

244
        {
245
          name: "services",
246
          kind: "folder",
247
          size: 0,
248
          modified: "2026-01-20T11:30:00Z",
249
          children: [
250
            {
251
              name: "api.js",
252
              kind: "file",
253
              size: 980,
254
              modified: "2026-01-20T11:32:00Z",
255
              lastEditedBy: "Charles Clark",
256
              permissions: "rw-r--r--",
257
            },
258
            {
259
              name: "authService.js",
260
              kind: "file",
261
              size: 1420,
262
              modified: "2026-01-20T11:33:00Z",
263
              lastEditedBy: "Charles Clark",
264
              permissions: "rw-r--r--",
265
            },
266
          ],
267
        },
268

269
        {
270
          name: "utils",
271
          kind: "folder",
272
          size: 0,
273
          modified: "2026-01-19T15:10:00Z",
274
          children: [
275
            {
276
              name: "constants.js",
277
              kind: "file",
278
              size: 540,
279
              modified: "2026-01-19T15:12:00Z",
280
              lastEditedBy: "Richard White",
281
              permissions: "rw-r--r--",
282
            },
283
            {
284
              name: "formatDate.js",
285
              kind: "file",
286
              size: 620,
287
              modified: "2026-01-19T15:11:00Z",
288
              lastEditedBy: "Richard White",
289
              permissions: "rw-r--r--",
290
            },
291
          ],
292
        },
293

294
        {
295
          name: "routes.jsx",
296
          kind: "file",
297
          size: 1240,
298
          modified: "2026-01-22T08:10:00Z",
299
          lastEditedBy: "Sarah Wilson",
300
          permissions: "rw-r--r--",
301
        },
302
        {
303
          name: "App.jsx",
304
          kind: "file",
305
          size: 2140,
306
          modified: "2026-01-22T08:20:00Z",
307
          lastEditedBy: "Sarah Wilson",
308
          permissions: "rw-r--r--",
309
        },
310
        {
311
          name: "main.jsx",
312
          kind: "file",
313
          size: 860,
314
          modified: "2026-01-22T08:25:00Z",
315
          lastEditedBy: "Sarah Wilson",
316
          permissions: "rw-r--r--",
317
        },
318
      ],
319
    },
320

321
    {
322
      name: "tests",
323
      kind: "folder",
324
      size: 0,
325
      modified: "2026-01-21T13:00:00Z",
326
      children: [
327
        {
328
          name: "setupTests.js",
329
          kind: "file",
330
          size: 520,
331
          modified: "2026-01-21T13:01:00Z",
332
          lastEditedBy: "Joseph Allen",
333
          permissions: "rw-r--r--",
334
        },
335
        {
336
          name: "App.test.jsx",
337
          kind: "file",
338
          size: 1620,
339
          modified: "2026-01-21T13:02:00Z",
340
          lastEditedBy: "Joseph Allen",
341
          permissions: "rw-r--r--",
342
        },
343
      ],
344
    },
345

346
    {
347
      name: "config",
348
      kind: "folder",
349
      size: 0,
350
      modified: "2026-01-18T17:00:00Z",
351
      children: [
352
        {
353
          name: "vite.config.js",
354
          kind: "file",
355
          size: 1120,
356
          modified: "2026-01-18T17:02:00Z",
357
          lastEditedBy: "Betty Hall",
358
          permissions: "rw-r--r--",
359
        },
360
        {
361
          name: "eslint.config.js",
362
          kind: "file",
363
          size: 980,
364
          modified: "2026-01-18T17:01:00Z",
365
          lastEditedBy: "Betty Hall",
366
          permissions: "rw-r--r--",
367
        },
368
      ],
369
    },
370
  ],
371
};

In this example, the grid ignores the top-level root property in the data. The rowRootFn function returns the children property of the root object as an array of entries. Each entry becomes a row, and the grid branches from there.

1
const ds = useTreeDataSource({
2
  data: data,
3
  rowGroupDefaultExpansion: true,
4

5
  rowRootFn: (x) => {
6
    return x.children.map((row) => [row.name, row]);
7
  },
8
  rowChildrenFn: (x) => {
9
    if (!x.children) return [];
10
    return x.children.map((r: any) => [r.name, r]);
11
  },
12
  rowValueFn: (x) => ({
13
    name: x.name,
14
    kind: x.kind,
15
    size: x.size || null,
16
    modified: x.modified,
17
    lastEditedBy: x.lastEditedBy,
18
    permissions: x.permissions,
19
  }),
20
});

Next Steps

Tree Filtering: Remove tree data rows by providing a custom filter function.
Tree Sorting: Sort tree rows in ascending or descending order.
Tree Row Pinning: Freeze rows to the top or bottom of the viewport with the tree source.

Data Object

Custom Keys

Root Rows

Root Rows

Next Steps

On this page