](sample/structure.gif)
48 |
49 | - BreadCrumbs\
50 | [
](sample/breadcrumbs.gif)
51 |
52 | - Tabs\
53 | [
](sample/tabs.gif)
54 |
55 | - Search\
56 | [
](sample/search.gif)
57 |
58 | ## API
59 |
60 | VFS comes with a typescript definition file.
61 |
62 | ```ts
63 | declare module "@litecode-ide/virtual-file-system" {
64 | type ItemType = "file" | "folder";
65 |
66 | interface BreadcrumbsProps {
67 | containerClassName?: string;
68 | textClassName?: string;
69 | miniFolderCollapseBtnClassName?: string;
70 | miniFolderCollapseBtnStyle?: React.CSSProperties;
71 | miniFolderContainerClassName?: string;
72 | itemTitleClassName?: string;
73 | onBreadcrumbFileClick?: (id: string) => void;
74 | }
75 |
76 | interface StructureProps {
77 | deleteConfirmationClassName?: string;
78 | fileInputClassName?: string;
79 | fileInputStyle?: React.CSSProperties;
80 | contextMenuClassName?: string;
81 | contextMenuHrColor?: string;
82 | contextMenuClickableAreaClassName?: string;
83 | fileActionsBtnClassName?: string;
84 | projectName?: string;
85 | fileActionsDisableCollapse?: true;
86 | fileActionsDisableTooltip?: true;
87 | fileActionsDisableDownload?: true;
88 | folderCollapseBtnClassname?: string;
89 | folderCollapseBtnStyle?: React.CSSProperties;
90 | folderThreeDotPrimaryClass?: string;
91 | folderThreeDotSecondaryClass?: string;
92 | folderClickableAreaClassName?: string;
93 | folderSelectedClickableAreaClassName?: string;
94 | folderContextSelectedClickableAreaClassName?: string;
95 | itemTitleClassName?: string;
96 | structureContainerClassName?: string;
97 | containerHeight?: string;
98 | onItemSelected?: (item: { id: string; type: ItemType }) => void;
99 | onNewItemClick?: (parentFolderId: string, type: ItemType) => void;
100 | onAreaCollapsed?: (collapsed: boolean) => void;
101 | onItemContextSelected?: (item: { id: string; type: ItemType }) => void;
102 | onNodeDeleted?: (id: string) => void;
103 | onNewItemCreated?: (id: string) => void;
104 | validExtensions: string[];
105 | }
106 |
107 | interface TabsProps {
108 | containerClassName?: string;
109 | tabClassName?: string;
110 | selectedTabClassName?: string;
111 | onTabClick?: (id: string) => void;
112 | onTabClose?: (id: string) => void;
113 | }
114 |
115 | interface MatchingFile {
116 | id: string;
117 | name: string;
118 | extension: string;
119 | matches: MatchingLine[];
120 | }
121 |
122 | interface MatchingLine {
123 | line: number;
124 | content: string;
125 | }
126 |
127 | interface SearchResults {
128 | files: MatchingFile[];
129 | numOfResults: number;
130 | numOfLines: number;
131 | }
132 |
133 | interface SearchInputProps {
134 | className?: string;
135 | style?: React.CSSProperties;
136 | onSearchFiles?: (searchTerm: string, searchResults: SearchResults) => void;
137 | }
138 |
139 | interface SearchContainerProps {
140 | highlightedTextClassName?: string;
141 | headerClassName?: string;
142 | headerStyle?: React.CSSProperties;
143 | titleClassName?: string;
144 | searchResultClicked: (fileId: string, line: number) => void;
145 | }
146 |
147 | const FileExplorer: React.FC
14 |
44 | );
45 | }
46 |
47 | export default App;
48 |
--------------------------------------------------------------------------------
/src/assets/cross.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/css.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/delete.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/src/assets/down-arrow.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/assets/download.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/assets/error.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LiteCode-IDE/virtual-file-system/f79637f985663ba90d1617a7779fd3914eebd570/src/assets/error.png
--------------------------------------------------------------------------------
/src/assets/folder.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/js.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/jsx.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/left-arrow.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/assets/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#000000"
25 | }
26 |
--------------------------------------------------------------------------------
/src/assets/new-file-colored.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/assets/new-file.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/assets/new-folder.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/assets/new-project.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/src/assets/open-project.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/src/assets/opened-folder.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/readme.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/src/assets/rename.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/assets/three-dots.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/typescript.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/file-structure/Folder.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | collapseOrExpand,
4 | contextSelectedItem,
5 | selectedItem,
6 | contextClick,
7 | clipboard,
8 | setSelected,
9 | type Directory,
10 | type FileInFolder,
11 | ItemType,
12 | } from "../../state/features/structure/structureSlice";
13 | import { type RootState } from "../../state/store";
14 | import { useTypedDispatch, useTypedSelector } from "../../state/hooks";
15 | import { setActiveTabAsync } from "../../state/features/tabs/tabsSlice";
16 | import CollapseBtn from "./widgets/CollapseBtn";
17 | import ThreeDots from "./widgets/ThreeDots";
18 | import ItemTitle from "./widgets/ItemTitle";
19 |
20 | interface FolderProps {
21 | data: Array
15 |
36 |
16 |
25 |
32 |
33 |
37 |
40 |
41 |
43 | 0 && "w-full"}`}>
68 | {children.map((item) => {
69 | return (
70 |
183 | );
184 | };
185 |
186 | export default Folder;
187 |
--------------------------------------------------------------------------------
/src/components/file-structure/MiniFolder.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ItemTitle from "./widgets/ItemTitle";
3 | import CollapseBtn from "./widgets/CollapseBtn";
4 | import { type MiniStructure } from "../../state/features/structure/miniStructureSlice";
5 | import { type Identifier } from "../../state/features/structure/structureSlice";
6 |
7 | interface MiniFolderProps {
8 | data: MiniStructure;
9 | init: boolean;
10 | onClickItem: (item: Identifier) => void;
11 | onCollapseMiniStructure: (id: string) => void;
12 | collapseBtnClassName?: string;
13 | collapseBtnStyle?: React.CSSProperties;
14 | containerClassName?: string;
15 | titleClassName?: string;
16 | }
17 |
18 | const MiniFolder: React.FC
74 |
180 | );
181 | })}
182 |
87 | {
90 | e.stopPropagation();
91 | dispatch(setSelected({ id: item.id, type: item.type }));
92 | setShowBlue(true);
93 | setShowGray(false);
94 | if (item.type === "file") {
95 | dispatch(setActiveTabAsync(item.id));
96 | } else {
97 | dispatch(
98 | collapseOrExpand({
99 | item: { id: item.id, type: item.type },
100 | collapse: true,
101 | })
102 | );
103 | }
104 | onItemSelected({ id: item.id, type: item.type });
105 | }}
106 | className={itemTitleClassName}
107 | />
108 | {
115 | e.stopPropagation();
116 | setShowBlue(false);
117 | setShowGray(true);
118 | dispatch(
119 | contextClick({
120 | id: item.id,
121 | type: item.type,
122 | threeDot: { x: e.clientY, y: e.clientX },
123 | })
124 | );
125 | onItemContextSelected({ id: item.id, type: item.type });
126 | }}
127 | />
128 |
129 | <>
130 |
131 | {item.type === "folder" && !item.collapsed && (
132 |
133 | {
138 | e.stopPropagation();
139 | setShowBlue(true);
140 | setShowGray(false);
141 | dispatch(setSelected({ id: item.id, type: item.type }));
142 | dispatch(
143 | collapseOrExpand({
144 | item: { id: item.id, type: item.type },
145 | collapse: true,
146 | })
147 | );
148 | }}
149 | />
150 | {
152 | const childFolder = data.find((newItem) => {
153 | return newItem.id === item.id;
154 | });
155 | return childFolder?.subFoldersAndFiles as Directory[];
156 | })()}
157 | showBlue={showBlue}
158 | setShowBlue={setShowBlue}
159 | showGray={showGray}
160 | setShowGray={setShowGray}
161 | collapseBtnClassname={collapseBtnClassname}
162 | collapseBtnStyle={collapseBtnStyle}
163 | threeDotPrimaryClass={threeDotPrimaryClass}
164 | threeDotSecondaryClass={threeDotSecondaryClass}
165 | clickableAreaClassName={clickableAreaClassName}
166 | selectedClickableAreaClassName={
167 | selectedClickableAreaClassName
168 | }
169 | contextSelectedClickableAreaClassName={
170 | contextSelectedClickableAreaClassName
171 | }
172 | itemTitleClassName={itemTitleClassName}
173 | onItemSelected={onItemSelected}
174 | onItemContextSelected={onItemContextSelected}
175 | />
176 |
177 | )}
178 |
179 |
32 | {children.map((item, i) => {
33 | return (
34 |
81 | );
82 | };
83 |
84 | export default MiniFolder;
85 |
--------------------------------------------------------------------------------
/src/components/file-structure/Structure.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useEffect, useState } from "react";
2 |
3 | import {
4 | type ItemType,
5 | getInitialSet,
6 | setContextSelectedForFileAction,
7 | setSelected,
8 | setProjectName,
9 | } from "../../state/features/structure/structureSlice";
10 | import Folder from "./Folder";
11 | import useOutsideAlerter from "../../hooks/useOutsideAlerter";
12 |
13 | import MenuContext from "../menus/MenuContext";
14 | import CustomInput from "./widgets/CustomInput";
15 | import { createPortal } from "react-dom";
16 |
17 | import Dialog from "../menus/Dialog";
18 | import {
19 | addNode,
20 | collapseOrExpand,
21 | contextClick,
22 | contextSelectedEvent,
23 | contextSelectedItem,
24 | removeNode,
25 | renameNode,
26 | getItem,
27 | setToCopy,
28 | copyNode,
29 | contextSelectedItemType,
30 | contextSelectedObj,
31 | clipboard,
32 | folderIds,
33 | fileIds,
34 | selectedItem,
35 | setParentItemId,
36 | getCurrentItems,
37 | } from "../../state/features/structure/structureSlice";
38 | import { usePrependPortal } from "../../hooks/usePrependPortal";
39 | import FileActions from "./widgets/FileActions";
40 | import { useTypedDispatch, useTypedSelector } from "../../state/hooks";
41 | import { removeTabAsync } from "../../state/features/tabs/tabsSlice";
42 | import downloadZip from "../../state/features/structure/utils/downloadZip";
43 | import { findParent } from "../../state/features/structure/utils/traversal";
44 | import { store } from "../../state/store";
45 |
46 | export interface StructureProps {
47 | deleteConfirmationClassName?: string;
48 | fileInputClassName?: string;
49 | fileInputStyle?: React.CSSProperties;
50 | contextMenuClassName?: string;
51 | contextMenuHrColor?: string;
52 | contextMenuClickableAreaClassName?: string;
53 | fileActionsBtnClassName?: string;
54 | projectName?: string;
55 | fileActionsDisableCollapse?: true;
56 | fileActionsDisableTooltip?: true;
57 | fileActionsDisableDownload?: true;
58 | folderCollapseBtnClassname?: string;
59 | folderCollapseBtnStyle?: React.CSSProperties;
60 | folderThreeDotPrimaryClass?: string;
61 | folderThreeDotSecondaryClass?: string;
62 | folderClickableAreaClassName?: string;
63 | folderSelectedClickableAreaClassName?: string;
64 | folderContextSelectedClickableAreaClassName?: string;
65 | itemTitleClassName?: string;
66 | structureContainerClassName?: string;
67 | containerHeight?: string;
68 | onItemSelected?: (item: { id: string; type: ItemType }) => void;
69 | onNewItemClick?: (parentFolderId: string, type: ItemType) => void;
70 | onAreaCollapsed?: (collapsed: boolean) => void;
71 | onItemContextSelected?: (item: { id: string; type: ItemType }) => void;
72 | onNodeDeleted?: (id: string) => void;
73 | onNewItemCreated?: (id: string) => void;
74 | validExtensions: string[];
75 | }
76 |
77 | const Structure: React.FC
35 |
78 | );
79 | })}
80 |
45 | {
48 | onClickItem({ id: item.id, type: item.type });
49 | }}
50 | className={titleClassName}
51 | />
52 |
53 | <>
54 | {item.type === "folder" && !item.collapsed && (
55 |
56 | {
61 | onCollapseMiniStructure(item.id);
62 | }}
63 |
64 | />
65 |
75 | )}
76 |
77 |
460 |
644 |
645 | {usePrependPortal(
646 |
466 |
609 | {showDialog &&
610 | createPortal(
611 |
467 |
477 | {
488 | dispatch(setSelected({ id: "head", type: "folder" }));
489 | onItemSelected({ id: "head", type: "folder" });
490 | }}
491 | onContextMenu={(e) => {
492 | contextHandler(e);
493 | }}
494 | // onClick={(e) => fileStructureClickHandler(e, fileSysRef)}
495 | >
496 |
608 |
502 |
600 | e.stopPropagation()}
530 | onContextMenu={(e) => {
531 | contextHandler(e);
532 | onItemContextSelected({ id: "head", type: "folder" });
533 | }}
534 | className="mx-auto flex items-center pl-3 pr-4"
535 | >
536 |
598 | )}
599 |
541 |
597 |
546 |
596 |
551 | Create a file or folder...
552 |
553 |
558 |
576 |
594 |
595 |
605 |
606 |
607 | {
23 | openAtLine(lineNum);
24 | }}
25 | className="whitespace-nowrap my-1 ml-3 pl-1 cursor-pointer hover:bg-slate-200">
26 | {parts.map((part) =>
27 | (() => {
28 | if (part === hightlight) {
29 | return {part};
30 | }
31 | return part;
32 | })(),
33 | )}
34 |
35 | );
36 | };
37 |
38 | export default HighlightedText;
39 |
--------------------------------------------------------------------------------
/src/components/file-structure/search/SearchContainer.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import SearchResults from "./SearchResults";
3 | import { useTypedDispatch, useTypedSelector } from "../../../state/hooks";
4 | import {
5 | getSearchResults,
6 | setSelected,
7 | } from "../../../state/features/structure/structureSlice";
8 | import {
9 | selectedTab,
10 | setActiveTabAsync,
11 | } from "../../../state/features/tabs/tabsSlice";
12 |
13 | export interface SearchContainerProps {
14 | highlightedTextClassName?: string;
15 | headerClassName?: string;
16 | headerStyle?: React.CSSProperties;
17 | titleClassName?: string;
18 | searchResultClicked: (fileId: string, line: number) => void;
19 | }
20 |
21 | const SearchContainer: React.FC
42 |
59 | );
60 | };
61 |
62 | export default SearchContainer;
63 |
--------------------------------------------------------------------------------
/src/components/file-structure/search/SearchInput.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef, useState } from "react";
2 | import { useTypedDispatch, useTypedSelector } from "../../../state/hooks";
3 | import {
4 | SearchResults,
5 | getSearchResults,
6 | search,
7 | } from "../../../state/features/structure/structureSlice";
8 |
9 | export interface SearchInputProps {
10 | className?: string;
11 | style?: React.CSSProperties;
12 | onSearchFiles?: (searchTerm: string, searchResults: SearchResults) => void;
13 | }
14 |
15 | const SearchInput: React.FC
43 | {searchData.numOfLines} result{searchData.numOfLines !== 1 && "s"} in{" "}
44 | {searchData.numOfResults} file{searchData.numOfResults !== 1 && "s"}
45 |
46 | {searchData.files.map((file) => (
47 |
48 |
57 | ))}
58 |
47 |
66 |
67 | );
68 | };
69 |
70 | export default SearchInput;
71 |
--------------------------------------------------------------------------------
/src/components/file-structure/search/SearchResults.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import ItemTitle from "../widgets/ItemTitle";
3 | import downArrowLogo from "../../../assets/left-arrow.svg";
4 | import HighlightedText from "./HighlightedText";
5 | import {
6 | type MatchingFile,
7 | getSearchTerm,
8 | } from "../../../state/features/structure/structureSlice";
9 | import { useTypedSelector } from "../../../state/hooks";
10 |
11 | interface SearchResultsProps {
12 | matchingFile: MatchingFile;
13 | fileAtLineClick: (id: string, lineNum: number) => void;
14 | headerClassName?: string;
15 | headerStyle?: React.CSSProperties;
16 | titleClassName?: string;
17 | highlightClass?: string;
18 | }
19 |
20 | const SearchResults: React.FC
32 |
72 | );
73 | };
74 |
75 | export default SearchResults;
76 |
--------------------------------------------------------------------------------
/src/components/file-structure/utils/index.ts:
--------------------------------------------------------------------------------
1 | const trimName = (
2 | item:
3 | | {
4 | name: string;
5 | type: "folder";
6 | }
7 | | {
8 | name: string;
9 | type: "file";
10 | extension: string;
11 | }
12 | ) => {
13 | let newName = "";
14 | if (item.type === "file") {
15 | const fullName = `${item.name}.${item.extension}`;
16 | // const [fname, ext] = fullName.split(".");
17 | // if (fname.length > 10) {
18 | // newName = `${fname.slice(0, 10)}...${ext}`;
19 | // } else {
20 | // newName = fullName;
21 | // }
22 | newName = fullName;
23 | } else if (item.type === "folder") {
24 | // if (item.name.length > 12) {
25 | // newName = `${item.name.slice(0, 12)}...`;
26 | // } else {
27 | // newName = item.name;
28 | // }
29 | newName = item.name;
30 | }
31 | return newName;
32 | };
33 |
34 | const getLogo = (fileType: string) => {
35 | return `${fileType}-logo`;
36 | // let logo: string = "";
37 | // switch (fileType) {
38 | // case "js":
39 | // logo = "js-logo";
40 | // break;
41 | // case "jsx":
42 | // logo = "jsx-logo";
43 | // break;
44 | // case "css":
45 | // logo = "css-logo";
46 | // break;
47 | // case "md":
48 | // logo = "md-logo";
49 | // break;
50 | // case "ts":
51 | // case "tsx":
52 | // logo = "typescript-logo";
53 | // break;
54 | // default:
55 | // logo = "file-logo";
56 | // break;
57 | // }
58 | // return logo;
59 | };
60 |
61 | const validateFile = (
62 | preValidate: true | undefined,
63 | value: string,
64 | existingItems: Array<{ wholeName: string; type: string }>,
65 | validExtensions: string[],
66 | item: {
67 | type: "file" | "folder" | "";
68 | rename:
69 | | {
70 | wholeName?: string;
71 | }
72 | | undefined;
73 | }
74 | ): { error: boolean; errorMessage: string; ext?: string } => {
75 | // const regexp = new RegExp(/^(.*?)(\.[^.]*)?$/);
76 | const regex = /^([^\\]*)\.(\w+)$/;
77 | const regexFileName =
78 | /^[a-zA-Z0-9](?:[a-zA-Z0-9 ._-]*[a-zA-Z0-9])?\.[a-zA-Z0-9_-]+$/;
79 |
80 | const lettersNumbersSymbols = /^[a-z0-9._-]+$/i;
81 |
82 | const isValid = value.match(regexFileName);
83 | const matches = value.match(regex);
84 | const isLns = value.match(lettersNumbersSymbols);
85 |
86 | if (matches && isLns) {
87 | const validFiles = validExtensions;
88 |
89 | const filename = matches[1];
90 | const ext = matches[2];
91 | // setExtension(ext);
92 | if (isValid && isLns && validFiles.includes(ext)) {
93 | for (const { wholeName: name, type } of existingItems) {
94 | if (
95 | name.toLowerCase() === value.toLowerCase() &&
96 | type === item.type &&
97 | name.split(".").reverse()[0] === ext
98 | ) {
99 | return {
100 | error: true,
101 | errorMessage:
102 | "A file with this name already exists. Please choose a different name.",
103 | };
104 |
105 | // setError(true);
106 | // setLogo(errorIcon);
107 | // setErrorMessage(
108 | // "A file with this name already exists. Please choose a different name."
109 | // );
110 | }
111 | }
112 | return {
113 | error: false,
114 | errorMessage: "",
115 | ext,
116 | };
117 | // setLogo(getLogo(ext));
118 | // setError(false);
119 | // setErrorMessage("");
120 | } else if (ext !== "" || !isValid) {
121 | // setError(true);
122 | // setLogo(errorIcon);
123 | if (validFiles.includes(ext)) {
124 | if (filename === "") {
125 | return {
126 | error: true,
127 | errorMessage:
128 | "The file name cannot be empty. Please enter a valid file name.",
129 | };
130 | // setErrorMessage(
131 | // "The file name cannot be empty. Please enter a valid file name."
132 | // );
133 | } else {
134 | return {
135 | error: true,
136 | errorMessage:
137 | "This name is not valid as a file name. Please choose a different name.",
138 | };
139 | // setErrorMessage(
140 | // "This name is not valid as a file name. Please choose a different name."
141 | // );
142 | }
143 | } else {
144 | return {
145 | error: true,
146 | errorMessage:
147 | "This file type is not supported. Please choose a different file extension.",
148 | };
149 | // setErrorMessage(
150 | // "This file type is not supported. Please choose a different file extension."
151 | // );
152 | }
153 | }
154 | } else if (!isLns && value !== "") {
155 | return {
156 | error: true,
157 | errorMessage:
158 | "This name is not valid as a file name. Please choose a different name.",
159 | };
160 | // setError(true);
161 | // setLogo(errorIcon);
162 | // setErrorMessage(
163 | // "This name is not valid as a file name. Please choose a different name."
164 | // );
165 | } else if (preValidate) {
166 | return {
167 | error: true,
168 | errorMessage:
169 | "The file type cannot be empty. Please choose a valid file extension.",
170 | };
171 | // setError(true);
172 | // setLogo(errorIcon);
173 | // setErrorMessage(
174 | // "The file type cannot be empty. Please choose a valid file extension."
175 | // );
176 | }
177 | return {
178 | error: true,
179 | errorMessage: "",
180 | };
181 | // setError(true);
182 | // setLogo(originalLogo);
183 | // setErrorMessage("");
184 | };
185 |
186 | const validateFolder = (
187 | value: string,
188 | existingItems: Array<{ wholeName: string; type: string }>
189 | ): { error: boolean; errorMessage: string } => {
190 | const regex = /^[a-zA-Z0-9_[\]-\s]+$/;
191 | const isValid = value.match(regex);
192 |
193 | if (isValid || value === "") {
194 | for (const { wholeName: name, type } of existingItems) {
195 | if (name.toLowerCase() === value.toLowerCase() && type === "folder") {
196 | return {
197 | error: true,
198 | errorMessage:
199 | "A folder with this name already exists. Please choose a different name.",
200 | };
201 | // setError(true);
202 | // setLogo(errorIcon);
203 | // setErrorMessage(
204 | // "A folder with this name already exists. Please choose a different name."
205 | // );
206 | }
207 | }
208 | return {
209 | error: false,
210 | errorMessage: "",
211 | };
212 | // setError(false);
213 | // setErrorMessage("");
214 | // setLogo(originalLogo);
215 | } else {
216 | return {
217 | error: true,
218 | errorMessage:
219 | "This name is not valid as a folder name. Please choose a different name.",
220 | };
221 | // setError(true);
222 | // setLogo(errorIcon);
223 | // setErrorMessage(
224 | // "This name is not valid as a folder name. Please choose a different name."
225 | // );
226 | }
227 | };
228 |
229 | const validate = (
230 | preValidate: true | undefined,
231 | item: {
232 | type: "file" | "folder" | "";
233 | rename:
234 | | {
235 | wholeName?: string;
236 | }
237 | | undefined;
238 | },
239 | value: string,
240 | existingItems: Array<{ wholeName: string; type: string }>,
241 | validExtensions: string[]
242 | ) => {
243 | if (item.type === "file") {
244 | return validateFile(
245 | preValidate,
246 | value,
247 | existingItems,
248 | validExtensions,
249 | item
250 | );
251 | } else if (item.type === "folder") {
252 | return validateFolder(value, existingItems);
253 | }
254 | return {
255 | error: true,
256 | errorMessage: "",
257 | };
258 | };
259 |
260 | export { getLogo, trimName, validate };
261 |
--------------------------------------------------------------------------------
/src/components/file-structure/widgets/CollapseBtn.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { type ItemType } from "../../../state/features/structure/structureSlice";
3 |
4 | interface CollapseBtnProps {
5 | item: {
6 | id: string;
7 | name: string;
8 | type: ItemType;
9 | };
10 | className?: string;
11 | style?: React.CSSProperties;
12 | onClickE: (e: React.MouseEvent {
34 | setShowResults(!showResults);
35 | }}
36 | style={headerStyle}
37 | className={`flex items-center w-full cursor-pointer hover:bg-slate-200 ${headerClassName}`}
38 | >
39 | 
46 | {}}
52 | className={titleClassName}
53 | />
54 |
55 | {showResults && (
56 |
57 | {matchingFile.matches.map(({ line, content }, i) => (
58 | {
64 | fileAtLineClick(matchingFile.id, l);
65 | }}
66 | highlightClass={highlightClass}
67 | />
68 | ))}
69 |
70 | )}
71 |
164 |
221 | );
222 | };
223 |
224 | export default CustomInput;
225 |
--------------------------------------------------------------------------------
/src/components/file-structure/widgets/FileActions.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import downArrowLogo from "../../../assets/left-arrow.svg";
3 | import newFileIcon from "../../../assets/new-file.svg";
4 | import newFolderIcon from "../../../assets/new-folder.svg";
5 | import downloadIcon from "../../../assets/download.svg";
6 |
7 | import { Tooltip } from "react-tooltip";
8 |
9 | interface FileActionProps {
10 | newFile: () => void;
11 | newFolder: () => void;
12 | download: () => void;
13 | collapseArea: () => void;
14 | collapsed: boolean;
15 | projectName?: string;
16 | btnClassName?: string;
17 | disableTooltip?: true;
18 | disableCollapse?: true;
19 | disableDownload?: true;
20 | }
21 |
22 | const FileActions: React.FC
165 |
166 |
167 |
168 |
220 |
169 | {
179 | setValue(e.target.value);
180 | }}
181 | onKeyDown={(e) => {
182 | if (e.key === "Enter") {
183 | if (!error && value.trim().length > 0) {
184 | submit(value);
185 | } else if (value.trim().length === 0) {
186 | setError(true);
187 | setLogo(errorIcon);
188 | setErrorMessage(
189 | `The ${item.type} name cannot be empty. Please enter a valid name.`
190 | );
191 | } else {
192 | const res = validate(
193 | true,
194 | item,
195 | value,
196 | existingItems,
197 | validExtensions
198 | );
199 | setValidationResult(res);
200 | }
201 | } else if (e.key === "Escape") {
202 | submit(false);
203 | }
204 | }}
205 | ref={inputRef}
206 | />
207 |
208 | {error && errorMessage !== "" && (
209 |
219 |
215 | {errorMessage}
216 |
217 | )}
218 | {
37 | if (!disableCollapse) {
38 | collapseArea();
39 | }
40 | }}
41 | className={`flex w-full select-none flex-row items-center ${
42 | !disableCollapse ? "cursor-pointer" : "cursor-default"
43 | }`}
44 | >
45 |
52 |
53 |
54 | {projectName ? projectName : "Files"}
55 |
56 |
57 |
58 | {!disableTooltip && (
59 |
140 | );
141 | };
142 |
143 | export default FileActions;
144 |
--------------------------------------------------------------------------------
/src/components/file-structure/widgets/ItemTitle.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { type ItemType } from "../../../state/features/structure/structureSlice";
3 | import { getLogo } from "../utils";
4 |
5 | interface ItemTitleProps {
6 | item: {
7 | id: string;
8 | name: string;
9 | type: ItemType;
10 | collapsed?: boolean;
11 | extension?: string;
12 | };
13 | onClickE: (e: React.MouseEvent {
34 | onClickE(e);
35 | }}
36 | parent-id={item.id}
37 | typeof-item={item.type}
38 | className={`w-full py-[0.32rem] pl-3 flex flex-row justify-start items-center collapsable ${className}`}
39 | >
40 | {
41 |
46 |
47 |
48 | }
49 |
50 | {(() => {
51 | let newName = "";
52 | if (item.type === "file") {
53 | const fullName = `${item.name}.${item.extension}`;
54 | newName = fullName;
55 | } else if (item.type === "folder") {
56 | newName = item.name;
57 | }
58 | return newName;
59 | })()}
60 |
61 |
62 | );
63 | };
64 |
65 | export default ItemTitle;
66 |
--------------------------------------------------------------------------------
/src/components/file-structure/widgets/ThreeDots.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { type ItemType } from "../../../state/features/structure/structureSlice";
3 | interface ThreeDotsProp {
4 | item: { id: string; type: ItemType };
5 | selected: string;
6 | showBlue: boolean;
7 | primaryClass?: string;
8 | secondaryClass?: string;
9 | onClickE: (e: React.MouseEvent
113 | {
117 | if (item.type === "folder") {
118 | dispatch(collapseMiniStructure(item.id));
119 | } else {
120 | dispatch(setSelected({ id, type: "file" }));
121 | dispatch(setActiveTabAsync(item.id));
122 | setShowMiniStructure(false);
123 | onBreadcrumbFileClick(item.id);
124 | }
125 | }}
126 | onCollapseMiniStructure={(id) => {
127 | dispatch(collapseMiniStructure(id));
128 | }}
129 | collapseBtnClassName={miniFolderCollapseBtnClassName}
130 | collapseBtnStyle={miniFolderCollapseBtnStyle}
131 | containerClassName={miniFolderContainerClassName}
132 | titleClassName={itemTitleClassName}
133 | />
134 |
,
135 | element
136 | );
137 | }
138 | })()}
139 |
140 | )}
141 |
142 | )}
143 |
144 | );
145 | };
146 |
147 | export default Breadcrumbs;
148 |
--------------------------------------------------------------------------------
/src/components/menus/Dialog.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from "react";
2 | import useOutsideAlerter from "../../hooks/useOutsideAlerter";
3 | import deleteLogo from "../../assets/delete.svg";
4 | import cross from "../../assets/cross.svg";
5 |
6 | interface DialogProps {
7 | title: string;
8 | content: string;
9 | actionText: string;
10 | close: (show: boolean) => void;
11 | action: () => void;
12 | className?: string;
13 | }
14 |
15 | const Dialog: React.FC
29 |
74 | );
75 | };
76 |
77 | export default Dialog;
78 |
--------------------------------------------------------------------------------
/src/components/menus/MenuContext.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from "react";
2 | import useOutsideAlerter from "../../hooks/useOutsideAlerter";
3 |
4 | interface MenuContextProps {
5 | top: number;
6 | left: number;
7 | showContext: boolean;
8 | setShowContext: React.Dispatch
32 |
73 |
33 | {title}
34 |
35 | 
{
38 | close(false);
39 | }}
40 | alt="close"
41 | className="transition-colors p-1 h-5 w-5 cursor-pointer hover:bg-slate-500 rounded-md align-baseline"
42 | />
43 |
44 |
45 | {content}
46 |
47 |
48 |
72 |
49 |
57 |
70 |
71 |
46 |
79 | );
80 | };
81 |
82 | export default MenuContext;
83 |
--------------------------------------------------------------------------------
/src/components/menus/Tab.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import cross from "../../assets/cross.svg";
3 | import { getLogo } from "../file-structure/utils";
4 | // import { Tooltip } from "react-tooltip";
5 |
6 | interface TabProps {
7 | id: string;
8 | name: string;
9 | type: string;
10 | selected: boolean;
11 | onSelect: (id: string) => void;
12 | onClose: (id: string) => void;
13 | className?: string;
14 | selectedTabClassName?: string;
15 | }
16 |
17 | const Tab: React.FC-
47 | {actions.map((action, index) => {
48 | if (action.type === "hr") {
49 | return (
50 |
- { 61 | if (!action.disabled) { 62 | action.handler(); 63 | setShowContext(false); 64 | } 65 | }} 66 | className={`rounded-md px-7 py-1 ${ 67 | !action.disabled 68 | ? `hover:bg-hover-blue cursor-pointer text-white ${clickableAreaClassName}` 69 | : "text-zinc-500" 70 | } `} 71 | > 72 | {action.title} 73 | 74 | ); 75 | } 76 | })} 77 |
55 | ); 56 | } else { 57 | return ( 58 |
{
37 | if (!selected) onSelect(id);
38 | }}
39 | className={`hover-show hover:bg-slate-700 hover:text-white border-t-dark-bg border-t transition-colors py-2 pl-3 pr-2 flex flex-row flex-shrink-0 cursor-pointer select-none items-center rounded-sm mx-[1px] ${className} ${
40 | selected
41 | ? `bg-dark-hover text-white border-t-slate-200 ${selectedTabClassName}`
42 | : ""
43 | }`}>
44 |
45 | {name}
46 |
47 | {/*
65 | );
66 | };
67 |
68 | export default Tab;
69 |
--------------------------------------------------------------------------------
/src/components/menus/Tabs.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Tab from "./Tab";
3 |
4 | import { useTypedDispatch, useTypedSelector } from "../../state/hooks";
5 |
6 | import {
7 | activeTabs,
8 | closeTab,
9 | selectTab,
10 | selectedTab,
11 | } from "../../state/features/tabs/tabsSlice";
12 |
13 | export interface TabsProps {
14 | containerClassName?: string;
15 | tabClassName?: string;
16 | selectedTabClassName?: string;
17 | onTabClick?: (id: string) => void;
18 | onTabClose?: (id: string) => void;
19 | }
20 |
21 | const Tabs: React.FC
47 |
67 | );
68 | };
69 |
70 | export default Tabs;
71 |
--------------------------------------------------------------------------------
/src/hooks/useOutsideAlerter.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 |
3 | export default function useOutsideAlerter(
4 | ref: React.RefObject
48 |
66 |
51 | {tabs.map((item) => (
52 |
65 |