Tree Data
Tree Editing
Edit the nested tree data object using the grid's cell editing capabilities.
Note
This guide assumes familiarity with cell editing. Read the Cell Editing guide for more details.
Editing Tree Cells
To edit a tree cell, make the column for that cell editable and provide an editRenderer
component. You must also set the editMode property on the grid to "cell" or "row".
When a cell is edited, LyteNyte Grid calls the onRowDataChange method on the tree data
source. Set the onRowDataChange property on the useTreeDataSource hook to handle these
data updates.
The onRowDataChange handler receives the applied cell changes, along with any data changes
applied to rows pinned to the top or bottom of the grid. The full function interface is shown
below:
1type OnTreeRowDataChange = (params: {2 readonly changes: { next: object; prev: object; parent: object; key: string; path: string[] }[];3 readonly top: Map<number, T>;4 readonly bottom: Map<number, T>;5}) => void;The demo below shows tree cell editing. Double-click a cell in the Size column to start editing.
Tree Data Editing
1import "@1771technologies/lytenyte-pro/light-dark.css";2import { Grid, useTreeDataSource } from "@1771technologies/lytenyte-pro";3import { data as initialData } from "./tree.js";4import {5 AvatarCell,6 getNumberValue,7 GroupCell,8 ModifiedCell,9 NumberEditor,10 SizeCell,11} from "./components.jsx";12import { useState } from "react";13
14export interface GridSpec {15 readonly data: {16 kind: string;17 name: string;18 size: number;19 modified: string;20 lastEditedBy: string;21 permissions: string;22 };23}24
25const group: Grid.RowGroupColumn<GridSpec> = {26 width: 240,27 cellRenderer: GroupCell,28 pin: "start",29};30
31const columns: Grid.Column<GridSpec>[] = [32 {33 id: "size",34 type: "number",35 name: "Size",36 cellRenderer: SizeCell,37 editable: (r) => r.row.data.size != null,38 editRenderer: NumberEditor,39 editSetter: (p) => {40 const currentValue =41 typeof p.editValue !== "string" ? 0 : Number.parseFloat(getNumberValue(p.editValue)) || 0;42 const data = { ...(p.editData as Record<string, unknown>), [p.column.id]: currentValue };43
44 return data;45 },46 },47 { id: "modified", name: "Modified", cellRenderer: ModifiedCell, width: 130 },48 { id: "lastEditedBy", name: "Last Edited By", cellRenderer: AvatarCell },49 { id: "permissions", name: "Permissions" },50];51
52const base: Grid.ColumnBase<GridSpec> = { widthFlex: 1, width: 120 };53
54export default function TreeDataDemo() {55 const [data, setData] = useState(() => structuredClone(initialData));56 const ds = useTreeDataSource({57 data,58 rowGroupDefaultExpansion: true,59
60 onRowDataChange: ({ changes }) => {61 for (const x of changes) {62 x.parent[x.key] = x.next;63 }64 setData({ ...data });65 },66 });67
68 return (69 <div className="ln-grid" style={{ height: 500 }}>70 <Grid rowSource={ds} rowGroupColumn={group} columnBase={base} columns={columns} editMode="cell" />71 </div>72 );73}1import "@1771technologies/lytenyte-pro/components.css";2import type { Grid } from "@1771technologies/lytenyte-pro";3import type { GridSpec } from "./demo.jsx";4import {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";35import { useMemo } from "react";36import { format } from "date-fns";37import { customerToAvatar } from "@1771technologies/grid-sample-data/orders";38
39export 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 <div74 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 <div81 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 <button89 onClick={() => api.rowGroupToggle(row.id)}90 data-ln-button="secondary"91 data-ln-size="md"92 data-ln-icon93 >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
107const number = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0, minimumFractionDigits: 0 });108
109export 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
124export 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
134export 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}151
152export function NumberEditor({ changeValue, editValue }: Grid.T.EditParams<GridSpec>) {153 return (154 <input155 className="focus:outline-ln-primary-50 h-full w-full px-2"156 value={`${editValue}`}157 onChange={(e) => {158 const value = getNumberValue(e.target.value);159 changeValue(value || 0);160 }}161 />162 );163}164
165export const getNumberValue = (e: string) => {166 const value = e.trim();167
168 // Allow empty input169 if (value === "") return "";170
171 // Allow minus sign only at the start172 if (value === "-") return "-";173
174 // Convert to number and check if it's valid175 const number = Number.parseFloat(value);176
177 if (value && !Number.isNaN(number)) {178 return String(number) + (value.endsWith(".") ? "." : "");179 } else {180 // If not a valid number, revert to previous value181 return value.slice(0, -1) || "";182 }183};1import React from "react";2import type { SVGProps } from "react";3
4export 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 <path8 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
15export 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 <path19 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
27export 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 <path31 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
39export 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 <path45 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
53export 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 <path57 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
64export 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
72export 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 <path76 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
83export 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
91export 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 <path95 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
102export 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 <path106 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 <path110 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
117export 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 <path121 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 <path125 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
132export 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 <path136 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
149export 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 <path153 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
166export 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 <path170 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 <path174 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
181export 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 <path185 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 <path189 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
196export 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 <path200 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 <path204 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
211export 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 <path215 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 <path220 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 <path224 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
231export 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 <path235 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 <path239 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
246export 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 <path250 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 <path254 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
261export 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 <path265 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 <path269 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
276export 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 <path280 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 <path285 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
292export 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 <path296 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 <path300 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
307export 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 <path311 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 <path315 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
322export 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 <path326 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 <path330 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
338export 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 <path342 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 <path346 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
354export 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 <path358 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 <path362 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
369export 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 <path373 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 <path377 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
384export 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 <path388 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
395export 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 <ellipse400 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 <ellipse407 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 <ellipse414 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 <ellipse421 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}1export const data = {2 root: {3 name: "root",4 kind: "folder",5 size: null,6 modified: "2026-01-22T09:00:00Z",7 "package.json": {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 "package-lock.json": {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 "README.md": {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 ".gitignore": {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 ".env": {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 public: {49 name: "public",50 kind: "folder",51 size: null,52 modified: "2026-01-18T12:00:00Z",53 "index.html": {54 name: "index.html",55 kind: "file",56 size: 3420,57 modified: "2026-01-18T12:01:00Z",58 lastEditedBy: "Charles Clark",59 permissions: "rw-r--r--",60 },61 "favicon.ico": {62 name: "favicon.ico",63 kind: "file",64 size: 5430,65 modified: "2026-01-18T12:01:30Z",66 lastEditedBy: "Charles Clark",67 permissions: "rw-r--r--",68 },69 "manifest.json": {70 name: "manifest.json",71 kind: "file",72 size: 820,73 modified: "2026-01-18T12:02:00Z",74 lastEditedBy: "Charles Clark",75 permissions: "rw-r--r--",76 },77 assets: {78 name: "assets",79 kind: "folder",80 size: null,81 modified: "2026-01-17T15:40:00Z",82 "logo.svg": {83 name: "logo.svg",84 kind: "file",85 size: 2048,86 modified: "2026-01-17T15:42:00Z",87 lastEditedBy: "Richard White",88 permissions: "rw-r--r--",89 },90 "hero.png": {91 name: "hero.png",92 kind: "file",93 size: 482000,94 modified: "2026-01-17T15:45:00Z",95 lastEditedBy: "Richard White",96 permissions: "rw-r--r--",97 },98 },99 },100
101 src: {102 name: "src",103 kind: "folder",104 size: null,105 modified: "2026-01-22T08:30:00Z",106 assets: {107 name: "assets",108 kind: "folder",109 size: null,110 modified: "2026-01-20T14:00:00Z",111 "global.css": {112 name: "global.css",113 kind: "file",114 size: 2140,115 modified: "2026-01-20T14:05:00Z",116 lastEditedBy: "Jennifer Taylor",117 permissions: "rw-r--r--",118 },119 "variables.css": {120 name: "variables.css",121 kind: "file",122 size: 980,123 modified: "2026-01-20T14:04:00Z",124 lastEditedBy: "Jennifer Taylor",125 permissions: "rw-r--r--",126 },127
128 components: {129 name: "components",130 kind: "folder",131 size: null,132 modified: "2026-01-21T09:30:00Z",133 Button: {134 name: "Button",135 kind: "folder",136 size: null,137 modified: "2026-01-21T09:31:00Z",138 "Button.jsx": {139 name: "Button.jsx",140 kind: "file",141 size: 1620,142 modified: "2026-01-21T09:35:00Z",143 lastEditedBy: "Sarah Wilson",144 permissions: "rw-r--r--",145 },146 "Button.module.css": {147 name: "Button.module.css",148 kind: "file",149 size: 740,150 modified: "2026-01-21T09:34:00Z",151 lastEditedBy: "Sarah Wilson",152 permissions: "rw-r--r--",153 },154 "Button.test.jsx": {155 name: "Button.test.jsx",156 kind: "file",157 size: 1280,158 modified: "2026-01-21T09:36:00Z",159 lastEditedBy: "Joseph Allen",160 permissions: "rw-r--r--",161 },162 },163
164 Modal: {165 name: "Modal",166 kind: "folder",167 size: null,168 modified: "2026-01-21T11:10:00Z",169 children: {170 "Modal.jsx": {171 name: "Modal.jsx",172 kind: "file",173 size: 1980,174 modified: "2026-01-21T11:15:00Z",175 lastEditedBy: "Nancy Lewis",176 permissions: "rw-r--r--",177 },178 "Modal.css": {179 name: "Modal.css",180 kind: "file",181 size: 860,182 modified: "2026-01-21T11:14:00Z",183 lastEditedBy: "Nancy Lewis",184 permissions: "rw-r--r--",185 },186 },187 },188 },189 },190
191 hooks: {192 name: "hooks",193 kind: "folder",194 size: null,195 modified: "2026-01-19T16:00:00Z",196 "useAuth.js": {197 name: "useAuth.js",198 kind: "file",199 size: 1320,200 modified: "2026-01-19T16:05:00Z",201 lastEditedBy: "Betty Hall",202 permissions: "rw-r--r--",203 },204 "useFetch.js": {205 name: "useFetch.js",206 kind: "file",207 size: 1740,208 modified: "2026-01-19T16:06:00Z",209 lastEditedBy: "Betty Hall",210 permissions: "rw-r--r--",211 },212 },213
214 context: {215 name: "context",216 kind: "folder",217 size: null,218 modified: "2026-01-20T10:40:00Z",219 "AuthContext.jsx": {220 name: "AuthContext.jsx",221 kind: "file",222 size: 1560,223 modified: "2026-01-20T10:42:00Z",224 lastEditedBy: "Jennifer Taylor",225 permissions: "rw-r--r--",226 },227 },228
229 services: {230 name: "services",231 kind: "folder",232 size: null,233 modified: "2026-01-20T11:30:00Z",234 "api.js": {235 name: "api.js",236 kind: "file",237 size: 980,238 modified: "2026-01-20T11:32:00Z",239 lastEditedBy: "Charles Clark",240 permissions: "rw-r--r--",241 },242 "authService.js": {243 name: "authService.js",244 kind: "file",245 size: 1420,246 modified: "2026-01-20T11:33:00Z",247 lastEditedBy: "Charles Clark",248 permissions: "rw-r--r--",249 },250 },251
252 utils: {253 name: "utils",254 kind: "folder",255 size: null,256 modified: "2026-01-19T15:10:00Z",257 "constants.js": {258 name: "constants.js",259 kind: "file",260 size: 540,261 modified: "2026-01-19T15:12:00Z",262 lastEditedBy: "Richard White",263 permissions: "rw-r--r--",264 },265 "formatDate.js": {266 name: "formatDate.js",267 kind: "file",268 size: 620,269 modified: "2026-01-19T15:11:00Z",270 lastEditedBy: "Richard White",271 permissions: "rw-r--r--",272 },273 },274
275 "routes.jsx": {276 name: "routes.jsx",277 kind: "file",278 size: 1240,279 modified: "2026-01-22T08:10:00Z",280 lastEditedBy: "Sarah Wilson",281 permissions: "rw-r--r--",282 },283 "App.jsx": {284 name: "App.jsx",285 kind: "file",286 size: 2140,287 modified: "2026-01-22T08:20:00Z",288 lastEditedBy: "Sarah Wilson",289 permissions: "rw-r--r--",290 },291 "main.jsx": {292 name: "main.jsx",293 kind: "file",294 size: 860,295 modified: "2026-01-22T08:25:00Z",296 lastEditedBy: "Sarah Wilson",297 permissions: "rw-r--r--",298 },299 },300
301 tests: {302 name: "tests",303 kind: "folder",304 size: null,305 modified: "2026-01-21T13:00:00Z",306 "setupTests.js": {307 name: "setupTests.js",308 kind: "file",309 size: 520,310 modified: "2026-01-21T13:01:00Z",311 lastEditedBy: "Joseph Allen",312 permissions: "rw-r--r--",313 },314 "App.test.jsx": {315 name: "App.test.jsx",316 kind: "file",317 size: 1620,318 modified: "2026-01-21T13:02:00Z",319 lastEditedBy: "Joseph Allen",320 permissions: "rw-r--r--",321 },322 },323
324 config: {325 name: "config",326 kind: "folder",327 size: null,328 modified: "2026-01-18T17:00:00Z",329 "vite.config.js": {330 name: "vite.config.js",331 kind: "file",332 size: 1120,333 modified: "2026-01-18T17:02:00Z",334 lastEditedBy: "Betty Hall",335 permissions: "rw-r--r--",336 },337 "eslint.config.js": {338 name: "eslint.config.js",339 kind: "file",340 size: 980,341 modified: "2026-01-18T17:01:00Z",342 lastEditedBy: "Betty Hall",343 permissions: "rw-r--r--",344 },345 },346 },347};Editing Tree Groups
To enable group cell editing, replace the LyteNyte Group column with
a custom group column. First, set rowGroupColumn to false to prevent
the grid from creating an automatic group column.
Next, add a custom group column to your definitions.
Since you define this column, set the editable and
editRenderer properties to enable editing.
The demo below replaces the Group column with a custom Files column. Double-click a file name cell to edit it.
Note
The demo sorts rows by Size. Renaming a group can change the branch order when the underlying JavaScript object is updated. Sorting by Size ensures the rows maintain a stable order.
Tree Group Editing
1import "@1771technologies/lytenyte-pro/light-dark.css";2import { Grid, useTreeDataSource } from "@1771technologies/lytenyte-pro";3import { data as initialData } from "./tree.js";4import { AvatarCell, GroupCell, ModifiedCell, SizeCell, TextCellEditor } from "./components.jsx";5import { useState } from "react";6
7export interface GridSpec {8 readonly data: {9 kind: string;10 name: string;11 size: number;12 modified: string;13 lastEditedBy: string;14 permissions: string;15 };16}17
18const columns: Grid.Column<GridSpec>[] = [19 {20 id: "name",21 name: "Files",22 cellRenderer: GroupCell,23 width: 240,24 pin: "start",25 editable: true,26 editRenderer: TextCellEditor,27 },28 {29 id: "size",30 type: "number",31 name: "Size",32 cellRenderer: SizeCell,33 },34 { id: "modified", name: "Modified", cellRenderer: ModifiedCell, width: 130 },35 { id: "lastEditedBy", name: "Last Edited By", cellRenderer: AvatarCell },36 { id: "permissions", name: "Permissions" },37];38
39const base: Grid.ColumnBase<GridSpec> = { widthFlex: 1, width: 120 };40
41const sortBySize: Grid.T.SortFn<GridSpec["data"]> = (left, right) => {42 const leftData = left.data.size as number | null;43 const rightData = right.data.size as number | null;44
45 if (left == null && right == null) return 0;46 else if (left == null && right != null) return 1;47 else if (left != null && right == null) return -1;48 else {49 return rightData! - leftData!;50 }51};52
53export default function TreeDataDemo() {54 const [data, setData] = useState(() => structuredClone(initialData));55 const ds = useTreeDataSource({56 data,57 rowGroupDefaultExpansion: true,58
59 sort: sortBySize,60
61 onRowDataChange: ({ changes }) => {62 for (const x of changes) {63 x.parent[x.key] = x.next;64 }65 setData({ ...data });66 },67 });68
69 return (70 <div className="ln-grid" style={{ height: 500 }}>71 <Grid rowSource={ds} rowGroupColumn={false} columnBase={base} columns={columns} editMode="cell" />72 </div>73 );74}1import "@1771technologies/lytenyte-pro/components.css";2import type { Grid } from "@1771technologies/lytenyte-pro";3import type { GridSpec } from "./demo.jsx";4import {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";35import { useMemo } from "react";36import { format } from "date-fns";37import { customerToAvatar } from "@1771technologies/grid-sample-data/orders";38
39export 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.data.name as string) ?? "") : ((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 <div74 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 <div81 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 <button89 onClick={() => api.rowGroupToggle(row.id)}90 data-ln-button="secondary"91 data-ln-size="md"92 data-ln-icon93 >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
107const number = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0, minimumFractionDigits: 0 });108
109export 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
124export 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
134export 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}151
152export function TextCellEditor({ changeValue, editValue }: Grid.T.EditParams<GridSpec>) {153 return (154 <input155 className="focus:outline-ln-primary-50 h-full w-full px-2"156 value={`${editValue}`}157 onChange={(e) => changeValue(e.target.value)}158 />159 );160}1import React from "react";2import type { SVGProps } from "react";3
4export 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 <path8 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
15export 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 <path19 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
27export 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 <path31 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
39export 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 <path45 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
53export 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 <path57 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
64export 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
72export 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 <path76 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
83export 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
91export 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 <path95 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
102export 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 <path106 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 <path110 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
117export 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 <path121 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 <path125 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
132export 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 <path136 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
149export 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 <path153 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
166export 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 <path170 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 <path174 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
181export 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 <path185 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 <path189 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
196export 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 <path200 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 <path204 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
211export 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 <path215 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 <path220 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 <path224 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
231export 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 <path235 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 <path239 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
246export 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 <path250 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 <path254 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
261export 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 <path265 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 <path269 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
276export 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 <path280 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 <path285 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
292export 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 <path296 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 <path300 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
307export 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 <path311 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 <path315 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
322export 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 <path326 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 <path330 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
338export 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 <path342 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 <path346 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
354export 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 <path358 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 <path362 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
369export 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 <path373 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 <path377 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
384export 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 <path388 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
395export 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 <ellipse400 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 <ellipse407 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 <ellipse414 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 <ellipse421 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}1export const data = {2 root: {3 name: "root",4 kind: "folder",5 size: null,6 modified: "2026-01-22T09:00:00Z",7 "package.json": {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 "package-lock.json": {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 "README.md": {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 ".gitignore": {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 ".env": {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 public: {49 name: "public",50 kind: "folder",51 size: null,52 modified: "2026-01-18T12:00:00Z",53 "index.html": {54 name: "index.html",55 kind: "file",56 size: 3420,57 modified: "2026-01-18T12:01:00Z",58 lastEditedBy: "Charles Clark",59 permissions: "rw-r--r--",60 },61 "favicon.ico": {62 name: "favicon.ico",63 kind: "file",64 size: 5430,65 modified: "2026-01-18T12:01:30Z",66 lastEditedBy: "Charles Clark",67 permissions: "rw-r--r--",68 },69 "manifest.json": {70 name: "manifest.json",71 kind: "file",72 size: 820,73 modified: "2026-01-18T12:02:00Z",74 lastEditedBy: "Charles Clark",75 permissions: "rw-r--r--",76 },77 assets: {78 name: "assets",79 kind: "folder",80 size: null,81 modified: "2026-01-17T15:40:00Z",82 "logo.svg": {83 name: "logo.svg",84 kind: "file",85 size: 2048,86 modified: "2026-01-17T15:42:00Z",87 lastEditedBy: "Richard White",88 permissions: "rw-r--r--",89 },90 "hero.png": {91 name: "hero.png",92 kind: "file",93 size: 482000,94 modified: "2026-01-17T15:45:00Z",95 lastEditedBy: "Richard White",96 permissions: "rw-r--r--",97 },98 },99 },100
101 src: {102 name: "src",103 kind: "folder",104 size: null,105 modified: "2026-01-22T08:30:00Z",106 assets: {107 name: "assets",108 kind: "folder",109 size: null,110 modified: "2026-01-20T14:00:00Z",111 "global.css": {112 name: "global.css",113 kind: "file",114 size: 2140,115 modified: "2026-01-20T14:05:00Z",116 lastEditedBy: "Jennifer Taylor",117 permissions: "rw-r--r--",118 },119 "variables.css": {120 name: "variables.css",121 kind: "file",122 size: 980,123 modified: "2026-01-20T14:04:00Z",124 lastEditedBy: "Jennifer Taylor",125 permissions: "rw-r--r--",126 },127
128 components: {129 name: "components",130 kind: "folder",131 size: null,132 modified: "2026-01-21T09:30:00Z",133 Button: {134 name: "Button",135 kind: "folder",136 size: null,137 modified: "2026-01-21T09:31:00Z",138 "Button.jsx": {139 name: "Button.jsx",140 kind: "file",141 size: 1620,142 modified: "2026-01-21T09:35:00Z",143 lastEditedBy: "Sarah Wilson",144 permissions: "rw-r--r--",145 },146 "Button.module.css": {147 name: "Button.module.css",148 kind: "file",149 size: 740,150 modified: "2026-01-21T09:34:00Z",151 lastEditedBy: "Sarah Wilson",152 permissions: "rw-r--r--",153 },154 "Button.test.jsx": {155 name: "Button.test.jsx",156 kind: "file",157 size: 1280,158 modified: "2026-01-21T09:36:00Z",159 lastEditedBy: "Joseph Allen",160 permissions: "rw-r--r--",161 },162 },163
164 Modal: {165 name: "Modal",166 kind: "folder",167 size: null,168 modified: "2026-01-21T11:10:00Z",169 children: {170 "Modal.jsx": {171 name: "Modal.jsx",172 kind: "file",173 size: 1980,174 modified: "2026-01-21T11:15:00Z",175 lastEditedBy: "Nancy Lewis",176 permissions: "rw-r--r--",177 },178 "Modal.css": {179 name: "Modal.css",180 kind: "file",181 size: 860,182 modified: "2026-01-21T11:14:00Z",183 lastEditedBy: "Nancy Lewis",184 permissions: "rw-r--r--",185 },186 },187 },188 },189 },190
191 hooks: {192 name: "hooks",193 kind: "folder",194 size: null,195 modified: "2026-01-19T16:00:00Z",196 "useAuth.js": {197 name: "useAuth.js",198 kind: "file",199 size: 1320,200 modified: "2026-01-19T16:05:00Z",201 lastEditedBy: "Betty Hall",202 permissions: "rw-r--r--",203 },204 "useFetch.js": {205 name: "useFetch.js",206 kind: "file",207 size: 1740,208 modified: "2026-01-19T16:06:00Z",209 lastEditedBy: "Betty Hall",210 permissions: "rw-r--r--",211 },212 },213
214 context: {215 name: "context",216 kind: "folder",217 size: null,218 modified: "2026-01-20T10:40:00Z",219 "AuthContext.jsx": {220 name: "AuthContext.jsx",221 kind: "file",222 size: 1560,223 modified: "2026-01-20T10:42:00Z",224 lastEditedBy: "Jennifer Taylor",225 permissions: "rw-r--r--",226 },227 },228
229 services: {230 name: "services",231 kind: "folder",232 size: null,233 modified: "2026-01-20T11:30:00Z",234 "api.js": {235 name: "api.js",236 kind: "file",237 size: 980,238 modified: "2026-01-20T11:32:00Z",239 lastEditedBy: "Charles Clark",240 permissions: "rw-r--r--",241 },242 "authService.js": {243 name: "authService.js",244 kind: "file",245 size: 1420,246 modified: "2026-01-20T11:33:00Z",247 lastEditedBy: "Charles Clark",248 permissions: "rw-r--r--",249 },250 },251
252 utils: {253 name: "utils",254 kind: "folder",255 size: null,256 modified: "2026-01-19T15:10:00Z",257 "constants.js": {258 name: "constants.js",259 kind: "file",260 size: 540,261 modified: "2026-01-19T15:12:00Z",262 lastEditedBy: "Richard White",263 permissions: "rw-r--r--",264 },265 "formatDate.js": {266 name: "formatDate.js",267 kind: "file",268 size: 620,269 modified: "2026-01-19T15:11:00Z",270 lastEditedBy: "Richard White",271 permissions: "rw-r--r--",272 },273 },274
275 "routes.jsx": {276 name: "routes.jsx",277 kind: "file",278 size: 1240,279 modified: "2026-01-22T08:10:00Z",280 lastEditedBy: "Sarah Wilson",281 permissions: "rw-r--r--",282 },283 "App.jsx": {284 name: "App.jsx",285 kind: "file",286 size: 2140,287 modified: "2026-01-22T08:20:00Z",288 lastEditedBy: "Sarah Wilson",289 permissions: "rw-r--r--",290 },291 "main.jsx": {292 name: "main.jsx",293 kind: "file",294 size: 860,295 modified: "2026-01-22T08:25:00Z",296 lastEditedBy: "Sarah Wilson",297 permissions: "rw-r--r--",298 },299 },300
301 tests: {302 name: "tests",303 kind: "folder",304 size: null,305 modified: "2026-01-21T13:00:00Z",306 "setupTests.js": {307 name: "setupTests.js",308 kind: "file",309 size: 520,310 modified: "2026-01-21T13:01:00Z",311 lastEditedBy: "Joseph Allen",312 permissions: "rw-r--r--",313 },314 "App.test.jsx": {315 name: "App.test.jsx",316 kind: "file",317 size: 1620,318 modified: "2026-01-21T13:02:00Z",319 lastEditedBy: "Joseph Allen",320 permissions: "rw-r--r--",321 },322 },323
324 config: {325 name: "config",326 kind: "folder",327 size: null,328 modified: "2026-01-18T17:00:00Z",329 "vite.config.js": {330 name: "vite.config.js",331 kind: "file",332 size: 1120,333 modified: "2026-01-18T17:02:00Z",334 lastEditedBy: "Betty Hall",335 permissions: "rw-r--r--",336 },337 "eslint.config.js": {338 name: "eslint.config.js",339 kind: "file",340 size: 980,341 modified: "2026-01-18T17:01:00Z",342 lastEditedBy: "Betty Hall",343 permissions: "rw-r--r--",344 },345 },346 },347};Next Steps
- Cell Editing: Edit cell values and commit updates in the grid.
- Tree Filtering: Remove tree data rows by providing a custom filter function.
- Tree Data: Generate hierarchical rows from nested object data.