diff --git a/package-lock.json b/package-lock.json index 08d0f02..0240847 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,7 +35,6 @@ "@radix-ui/react-toggle": "^1.1.9", "@radix-ui/react-toggle-group": "^1.1.10", "@radix-ui/react-tooltip": "^1.2.7", - "@sinm/react-file-tree": "^1.1.1", "@uiw/codemirror-theme-vscode": "^4.25.4", "@uiw/react-codemirror": "^4.25.4", "class-variance-authority": "^0.7.1", @@ -2745,16 +2744,6 @@ "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==", "license": "MIT" }, - "node_modules/@sinm/react-file-tree": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@sinm/react-file-tree/-/react-file-tree-1.1.1.tgz", - "integrity": "sha512-XlHLLNV18zWx7mYEH5gtlBb7jYFX7GaBA5jmhsG9YXhgwyyK33JgymrbU+IHDDBakAoZ+xISLKzu2ldzKbA/wg==", - "license": "MIT", - "dependencies": { - "@types/react-virtualized": "^9.21.15", - "react-virtualized": "^9.22.3" - } - }, "node_modules/@swc/helpers": { "version": "0.5.15", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz", @@ -3108,16 +3097,11 @@ "undici-types": "~6.21.0" } }, - "node_modules/@types/prop-types": { - "version": "15.7.15", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz", - "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==", - "license": "MIT" - }, "node_modules/@types/react": { "version": "19.2.10", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.10.tgz", "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==", + "devOptional": true, "license": "MIT", "dependencies": { "csstype": "^3.2.2" @@ -3133,16 +3117,6 @@ "@types/react": "^19.2.0" } }, - "node_modules/@types/react-virtualized": { - "version": "9.22.3", - "resolved": "https://registry.npmjs.org/@types/react-virtualized/-/react-virtualized-9.22.3.tgz", - "integrity": "sha512-UKRWeBIrECaKhE4O//TSFhlgwntMwyiEIOA7WZoVkr52Jahv0dH6YIOorqc358N2V3oKFclsq5XxPmx2PiYB5A==", - "license": "MIT", - "dependencies": { - "@types/prop-types": "*", - "@types/react": "*" - } - }, "node_modules/@uiw/codemirror-extensions-basic-setup": { "version": "4.25.4", "resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.25.4.tgz", @@ -4326,12 +4300,6 @@ "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", "license": "MIT" }, - "node_modules/react-lifecycles-compat": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", - "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==", - "license": "MIT" - }, "node_modules/react-remove-scroll": { "version": "2.7.2", "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz", @@ -4432,33 +4400,6 @@ "react-dom": ">=16.6.0" } }, - "node_modules/react-virtualized": { - "version": "9.22.6", - "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.6.tgz", - "integrity": "sha512-U5j7KuUQt3AaMatlMJ0UJddqSiX+Km0YJxSqbAzIiGw5EmNz0khMyqP2hzgu4+QUtm+QPIrxzUX4raJxmVJnHg==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.7.2", - "clsx": "^1.0.4", - "dom-helpers": "^5.1.3", - "loose-envify": "^1.4.0", - "prop-types": "^15.7.2", - "react-lifecycles-compat": "^3.0.4" - }, - "peerDependencies": { - "react": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", - "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" - } - }, - "node_modules/react-virtualized/node_modules/clsx": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", - "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", - "license": "MIT", - "engines": { - "node": ">=6" - } - }, "node_modules/recharts": { "version": "2.15.4", "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.4.tgz", diff --git a/package.json b/package.json index cc7a044..db0abb3 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,6 @@ "@radix-ui/react-toggle": "^1.1.9", "@radix-ui/react-toggle-group": "^1.1.10", "@radix-ui/react-tooltip": "^1.2.7", - "@sinm/react-file-tree": "^1.1.1", "@uiw/codemirror-theme-vscode": "^4.25.4", "@uiw/react-codemirror": "^4.25.4", "class-variance-authority": "^0.7.1", diff --git a/src/app/run/components/FileTree.tsx b/src/app/run/components/FileTree.tsx new file mode 100644 index 0000000..4bd23e7 --- /dev/null +++ b/src/app/run/components/FileTree.tsx @@ -0,0 +1,60 @@ +"use client"; + +import { useState } from "react"; +import { Folder, FolderMinus, FolderPlus, File } from "lucide-react"; + +type TreeNode = { + type: "directory" | "file"; + uri: string; + children?: TreeNode[]; +}; + +interface FileTreeProps { + tree: TreeNode; + level?: number; // for indentation +} + +export const FileTree: React.FC = ({ tree, level = 0 }) => { + const [expanded, setExpanded] = useState( + tree.type !== "directory" || level === 0 ? true : false, + ); + + const toggleExpand = () => { + if (tree.type === "directory") { + setExpanded(!expanded); + } + }; + + return ( +
+ {/* Directory/File Row */} +
+ {tree.type === "directory" ? ( + expanded ? ( + + ) : ( + + ) + ) : ( + + )} + {tree.uri} +
+ + {/* Children */} + {expanded && + tree.children?.map((child) => ( + + ))} +
+ ); +}; diff --git a/src/app/run/page.tsx b/src/app/run/page.tsx index 52e573a..2e86e67 100644 --- a/src/app/run/page.tsx +++ b/src/app/run/page.tsx @@ -1,12 +1,14 @@ "use client"; -import { FileTree } from "@sinm/react-file-tree"; import CodeMirror, { EditorState } from "@uiw/react-codemirror"; import { vscodeDark } from "@uiw/codemirror-theme-vscode"; import { Card, CardContent } from "@/components/ui/card"; import RunTimer, { RunInfo } from "./components/RunTimer"; import RunChat, { ChatMessage } from "./components/RunChat"; +import { useState } from "react"; +import { FileTree } from "./components/FileTree"; +import { File } from "lucide-react"; export default function Run() { const runInfo: RunInfo = { @@ -34,16 +36,22 @@ export default function Run() { tree={{ type: "directory", uri: "my-app", - expanded: true, - children: [{ type: "file", uri: "myfile.js" }], + children: [ + { type: "file", uri: "myfile.js" }, + { + type: "directory", + uri: "my-app", + children: [{ type: "file", uri: "myfile.js" }], + }, + ], }} /> {/* Code */}
-
- myfile.js +
+ myfile.js