vzcode 0.5.0 → 0.7.0

package/src/client/Sidebar/DirectoryListing.tsx

@@ -0,0 +1,77 @@
+import { useCallback, useMemo } from 'react';
+import { Item } from './Item';
+import { Listing } from './Listing';
+import { DirectoryArrowSVG } from './DirectoryArrowSVG';
+import { FileTree, FileTreeFile } from '../../types';
+
+export const DirectoryListing = ({
+  name,
+  path,
+  children,
+  handleRenameFileClick,
+  handleDeleteFileClick,
+  handleFileClick,
+  isDirectoryOpen,
+  toggleDirectory,
+}: {
+  name: string;
+  path: string;
+  children: Array<FileTree | FileTreeFile>;
+  handleRenameFileClick: (fileId: string) => void;
+  handleDeleteFileClick: (fileId: string, event: React.MouseEvent) => void;
+  handleFileClick: (fileId: string) => void;
+  isDirectoryOpen: (path: string) => boolean;
+  toggleDirectory: (path: string) => void;
+}) => {
+  const handleClick = useCallback(() => {
+    toggleDirectory(path);
+  }, [toggleDirectory]);
+
+  const handleDeleteClick = useCallback(() => {
+    console.log('TODO handleDeleteDirectoryClick');
+  }, []);
+
+  const handleRenameClick = useCallback(() => {
+    console.log('TODO handleRenameDirectoryClick');
+  }, []);
+
+  const isOpen = useMemo(() => isDirectoryOpen(path), [isDirectoryOpen, path]);
+
+  return (
+    <>
+      <Item
+        name={name}
+        handleClick={handleClick}
+        handleDeleteClick={handleDeleteClick}
+        handleRenameClick={handleRenameClick}
+      >
+        <div
+          className="arrow-wrapper"
+          style={{ transform: `rotate(${isOpen ? 90 : 0}deg)` }}
+        >
+          <DirectoryArrowSVG />
+        </div>
+        {name}
+      </Item>
+      {children && isOpen ? (
+        <div className="indentation">
+          {children.map((entity) => {
+            const { fileId } = entity as FileTreeFile;
+            const { path } = entity as FileTree;
+            return (
+              <Listing
+                entity={entity}
+                key={fileId || path}
+                handleRenameFileClick={handleRenameFileClick}
+                handleDeleteFileClick={handleDeleteFileClick}
+                handleFileClick={handleFileClick}
+                isDirectoryOpen={isDirectoryOpen}
+                toggleDirectory={toggleDirectory}
+              />
+            );
+          })}
+        </div>
+      ) : null}
+    </>
+  );
+};

package/src/client/Sidebar/{File.jsx → FileListing.tsx}

@@ -1,20 +1,30 @@
 import { useCallback } from 'react';
 import { Item } from './Item';
+import { FileId } from '../../types';
 
-export const File = ({
+export const FileListing = ({
   name,
   fileId,
   handleRenameFileClick,
   handleDeleteFileClick,
   handleFileClick,
+}: {
+  name: string;
+  fileId: FileId;
+  handleRenameFileClick: (fileId: FileId) => void;
+  handleDeleteFileClick: (fileId: FileId, event: React.MouseEvent) => void;
+  handleFileClick: (fileId: FileId) => void;
 }) => {
   const handleClick = useCallback(() => {
     handleFileClick(fileId);
   }, [fileId, handleFileClick]);
 
-  const handleDeleteClick = useCallback(() => {
-    handleDeleteFileClick(fileId);
-  }, [fileId]);
+  const handleDeleteClick = useCallback(
+    (event) => {
+      handleDeleteFileClick(fileId, event);
+    },
+    [fileId],
+  );
 
   const handleRenameClick = useCallback(() => {
     handleRenameFileClick(fileId);

package/src/client/Sidebar/Listing.tsx

@@ -0,0 +1,44 @@
+import { DirectoryListing } from './DirectoryListing';
+import { FileId, FileTree, FileTreeFile } from '../../types';
+import { FileListing } from './FileListing';
+
+// A "Listing" is a "FileListing" or a "DirectoryListing"
+// that appears in the Sidebar.
+export const Listing = ({
+  entity,
+  handleRenameFileClick,
+  handleDeleteFileClick,
+  handleFileClick,
+  isDirectoryOpen,
+  toggleDirectory,
+}: {
+  entity: FileTree | FileTreeFile;
+  handleRenameFileClick: (fileId: FileId) => void;
+  handleDeleteFileClick: (fileId: FileId, event: React.MouseEvent) => void;
+  handleFileClick: (fileId: FileId) => void;
+  isDirectoryOpen: (path: string) => boolean;
+  toggleDirectory: (path: string) => void;
+}) => {
+  const { name, file, fileId } = entity as FileTreeFile;
+  const { path, children } = entity as FileTree;
+  return file ? (
+    <FileListing
+      fileId={fileId}
+      name={name}
+      handleRenameFileClick={handleRenameFileClick}
+      handleDeleteFileClick={handleDeleteFileClick}
+      handleFileClick={handleFileClick}
+    />
+  ) : (
+    <DirectoryListing
+      name={name}
+      path={path}
+      children={children}
+      handleRenameFileClick={handleRenameFileClick}
+      handleDeleteFileClick={handleDeleteFileClick}
+      handleFileClick={handleFileClick}
+      isDirectoryOpen={isDirectoryOpen}
+      toggleDirectory={toggleDirectory}
+    />
+  );
+};

package/src/client/Sidebar/index.tsx

@@ -0,0 +1,81 @@
+import { useCallback, useMemo } from 'react';
+import { getFileTree } from '../getFileTree';
+import { sortFileTree } from '../sortFileTree';
+import { disableSettings } from '../featureFlags';
+import { Listing } from './Listing';
+
+import './styles.scss';
+import { FileId, FileTree, FileTreeFile, Files } from '../../types';
+
+export const Sidebar = ({
+  createFile,
+  files,
+  handleRenameFileClick,
+  handleDeleteFileClick,
+  handleFileClick,
+  setIsSettingsOpen,
+  isDirectoryOpen,
+  toggleDirectory,
+}: {
+  files: Files;
+  createFile?: () => void;
+  handleRenameFileClick?: (fileId: FileId) => void;
+  handleDeleteFileClick?: (fileId: FileId, event: React.MouseEvent) => void;
+  handleFileClick?: (fileId: FileId) => void;
+  setIsSettingsOpen?: (isSettingsOpen: boolean) => void;
+  isDirectoryOpen?: (path: string) => boolean;
+  toggleDirectory?: (path: string) => void;
+}) => {
+  const fileTree = useMemo(
+    () => (files ? sortFileTree(getFileTree(files)) : null),
+    [files],
+  );
+
+  const handleSettingsClick = useCallback(() => {
+    setIsSettingsOpen(true);
+  }, []);
+
+  return (
+    <div className="vz-sidebar">
+      <div className="files">
+        <div className="full-box">
+          <div>
+            <a className="link-name" href="#">
+              Files
+            </a>
+          </div>
+          <div>
+            <i
+              className="bx bxs-file-plus new-btn"
+              style={{ color: '#dbdde1' }}
+              onClick={createFile}
+            ></i>
+          </div>
+        </div>
+        {fileTree
+          ? fileTree.children.map((entity) => {
+              const { fileId } = entity as FileTreeFile;
+              const { path } = entity as FileTree;
+              const key = fileId ? fileId : path;
+              return (
+                <Listing
+                  entity={entity}
+                  key={key}
+                  handleRenameFileClick={handleRenameFileClick}
+                  handleDeleteFileClick={handleDeleteFileClick}
+                  handleFileClick={handleFileClick}
+                  isDirectoryOpen={isDirectoryOpen}
+                  toggleDirectory={toggleDirectory}
+                />
+              );
+            })
+          : null}
+      </div>
+      {disableSettings ? null : (
+        <div className="settings" onClick={handleSettingsClick}>
+          Settings
+        </div>
+      )}
+    </div>
+  );
+};

package/src/client/Sidebar/styles.scss

@@ -0,0 +1,84 @@
+.vz-sidebar {
+  height: 100%;
+  width: 200px;
+  background: rgb(54, 65, 89);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .full-box {
+    padding: 7px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .files {
+    overflow: auto;
+  }
+
+  .file-or-directory {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    margin: 0 10px;
+    color: rgb(219, 221, 225);
+    border-radius: 5px;
+  }
+
+  .link-name {
+    margin-top: 30px;
+    margin-left: 10px;
+    color: rgb(154, 160, 172);
+    font-size: 12px;
+    text-decoration: none;
+  }
+
+  .new-btn {
+    justify-content: right;
+    margin-right: 10px;
+    cursor: pointer;
+  }
+
+  .utils {
+    display: flex;
+  }
+  .utilities {
+    margin-right: 3px;
+  }
+
+  .file-or-directory:hover,
+  .settings:hover {
+    background-color: rgb(74, 84, 105);
+  }
+
+  .name {
+    display: flex;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .indentation {
+    margin-left: 20px;
+  }
+
+  .arrow-wrapper {
+    margin-right: 4px;
+  }
+
+  .settings {
+    height: 30px;
+    color: rgb(219, 221, 225);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 14px 0;
+    margin: 10px;
+    border-radius: 5px;
+  }
+}

package/src/client/TabList/index.tsx

@@ -0,0 +1,82 @@
+import { useCallback, useMemo } from 'react';
+import { FileId, Files } from '../../types';
+import './style.scss';
+
+// Supports adding the file's containing folder to the tab name
+const fileNameSplit = (fileName) => {
+  const split = fileName.split('/');
+  if (split.length === 1) return split[split.length - 1];
+  return split[split.length - 2] + '/' + split[split.length - 1];
+};
+
+const Tab = ({
+  fileId,
+  isActive,
+  setActiveFileId,
+  closeTab,
+  fileName,
+}: {
+  fileId: FileId;
+  isActive: boolean;
+  setActiveFileId: (fileId: FileId) => void;
+  closeTab: (fileId: FileId) => void;
+  fileName: string;
+}) => {
+  const handleCloseClick = useCallback(
+    (event: React.MouseEvent) => {
+      // Stop propagation so that the outer listener doesn't fire.
+      event.stopPropagation();
+
+      closeTab(fileId);
+    },
+    [closeTab, fileId],
+  );
+
+  const tabName = useMemo(() => fileNameSplit(fileName), [fileName]);
+
+  return (
+    <div
+      className={isActive ? 'tab active' : 'tab'}
+      onClick={() => {
+        setActiveFileId(fileId);
+      }}
+    >
+      {tabName}
+      <div
+        className={isActive ? 'bx bx-x tab-close' : ''}
+        onClick={handleCloseClick}
+      ></div>
+    </div>
+  );
+};
+
+// Displays the list of tabs above the code editor.
+export const TabList = ({
+  files,
+  tabList,
+  activeFileId,
+  setActiveFileId,
+  closeTab,
+}: {
+  files: Files;
+  tabList: FileId[];
+  activeFileId: FileId;
+  setActiveFileId: (fileId: FileId) => void;
+  closeTab: (fileId: FileId) => void;
+}) => {
+  return (
+    <div className="vz-tab-list">
+      {files &&
+        tabList.map((fileId: FileId) => (
+          <Tab
+            key={fileId}
+            fileId={fileId}
+            isActive={fileId === activeFileId}
+            setActiveFileId={setActiveFileId}
+            closeTab={closeTab}
+            fileName={files[fileId].name}
+          />
+        ))}
+    </div>
+  );
+};

package/src/client/TabList/style.scss

@@ -0,0 +1,32 @@
+.vz-tab-list {
+  display: flex;
+  background-color: rgb(37, 37, 38);
+
+  .tab {
+    background: rgb(45, 45, 45);
+    color: #fff;
+    font-family: var(--vzcode-font-family);
+    align-items: center;
+    display: flex;
+    padding-top: 2px;
+    padding-left: 10px;
+    padding-right: 10px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    margin-top: 5px;
+    margin-left: 2px;
+    margin-right: 2px;
+    cursor: pointer;
+
+    .tab-close {
+      margin-left: 5px;
+    }
+    .tab-close:hover {
+      border-radius: 30%;
+      background-color: rgb(37, 37, 38);
+    }
+  }
+  .tab.active {
+    background-color: rgb(41, 44, 52);
+  }
+}

package/src/client/{getFileTree.js → getFileTree.ts}

@@ -1,7 +1,10 @@
 // Inspired by
+
+import { Files, FileTree } from '../types';
+
 // https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/FilesSection/FileTree/getFileTree.js
-export const getFileTree = (files) => {
-  const tree = { name: 'files' };
+export const getFileTree = (files: Files): FileTree => {
+  const tree: FileTree = { name: 'files' };
   for (const fileId of Object.keys(files)) {
     const file = files[fileId];
     const path = file.name.split('/');
@@ -11,7 +14,7 @@ export const getFileTree = (files) => {
     // Walk the path.
     for (let i = 0; i < n - 1; i++) {
       // Search for an existing child.
-      let child;
+      let child: FileTree | undefined;
       const name = path[i];
       if (node.children) {
         for (let j = 0; j < node.children.length; j++) {

package/src/client/main.jsx

@@ -5,5 +5,5 @@ import App from './App';
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );

package/src/client/{sortFileTree.js → sortFileTree.ts}

@@ -1,12 +1,16 @@
 // Recursively sorts the file tree in-place.
 // Sorts first to group directories before files.
 // Sorts second alphabetically.
+
+import { FileTree, FileTreeFile } from '../types';
+
 // From https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/FilesSection/FileTree/sortFileTree.js
-export const sortFileTree = (fileTree) => {
+export const sortFileTree = (fileTree: FileTree) => {
   if (fileTree.children) {
     fileTree.children.sort((a, b) => {
-      const aIsFile = a.file ? 1 : 0;
-      const bIsFile = b.file ? 1 : 0;
+      const aIsFile = (a as FileTreeFile).file ? 1 : 0;
+      const bIsFile = (b as FileTreeFile).file ? 1 : 0;
+      // Directories before files.
       return aIsFile - bIsFile || a.name.localeCompare(b.name);
     });
     fileTree.children.forEach(sortFileTree);

package/src/client/style.scss

@@ -0,0 +1,49 @@
+:root {
+  --vzcode-font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
+    Liberation Mono, monospace;
+}
+
+/* width */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(41, 44, 52);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgb(37, 37, 38);
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+html,
+body,
+#root,
+.app {
+  height: 100%;
+}
+.app {
+  /* TODO use a variable for this */
+  background-color: rgb(41, 44, 52);
+
+  font-family: 'Poppins', sans-serif;
+  display: flex;
+
+  .left {
+    display: flex;
+  }
+  .right {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+  }
+}

package/src/client/themes.ts

@@ -0,0 +1,31 @@
+import { oneDark } from '@codemirror/theme-one-dark';
+import { okaidia } from '@uiw/codemirror-theme-okaidia';
+import { abcdef } from '@uiw/codemirror-theme-abcdef';
+import { dracula } from '@uiw/codemirror-theme-dracula';
+import { eclipse } from '@uiw/codemirror-theme-eclipse';
+import { githubDark } from '@uiw/codemirror-theme-github';
+import { material } from '@uiw/codemirror-theme-material';
+import { nord } from '@uiw/codemirror-theme-nord';
+import { xcodeLight } from '@uiw/codemirror-theme-xcode';
+
+// CodeMirror themes
+export const themes = [
+  { value: abcdef, label: 'abcdef' },
+  { value: dracula, label: 'darcula' },
+  { value: eclipse, label: 'eclipse' },
+  { value: material, label: 'material' },
+  { value: nord, label: 'nord' },
+  { value: oneDark, label: 'oneDark' },
+  { value: okaidia, label: 'okaidia' },
+  { value: githubDark, label: 'github' },
+  { value: xcodeLight, label: 'xcode' },
+];
+
+// Map theme labels to theme values
+export const themesByLabel = themes.reduce((acc, theme) => {
+  acc[theme.label] = theme.value;
+  return acc;
+}, {});
+
+// The default theme
+export const defaultTheme = 'oneDark';

package/src/client/{Sidebar/useOpenDirectories.js → useOpenDirectories.ts}

@@ -17,23 +17,27 @@ import { useState, useCallback } from 'react';
 
 // Inspired by
 // https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/FilesSection/useOpenDirectories.js
-export const useOpenDirectories = (activeFile) => {
-  //const [openDirectories, setOpenDirectories] = useState(
-  //  initialOpenDirectories(activeFile)
-  //);
-  const [openDirectories, setOpenDirectories] = useState({});
+export const useOpenDirectories = () => {
+  // The set of open directories by path/
+  const [openDirectories, setOpenDirectories] = useState<Set<string>>(
+    new Set(),
+  );
+
+  // Whether a directory is open.
+  const isDirectoryOpen: (path: string) => boolean = useCallback(
+    (path) => openDirectories.has(path),
+    [openDirectories],
+  );
 
-  // TODO consider useReducer to avoid event listener churn
+  // Toggle whether a directory is open.
   const toggleDirectory = useCallback(
     (path) => {
-      console.log(openDirectories[path], 'here');
-      setOpenDirectories(
-        Object.assign({}, openDirectories, {
-          [path]: !openDirectories[path],
-        })
-      );
+      const newOpenDirectories = new Set(openDirectories);
+      newOpenDirectories[isDirectoryOpen(path) ? 'delete' : 'add'](path);
+      setOpenDirectories(newOpenDirectories);
     },
-    [openDirectories]
+    [openDirectories, isDirectoryOpen],
   );
-  return { openDirectories, toggleDirectory };
+
+  return { isDirectoryOpen, toggleDirectory };
 };

package/src/client/useTabsState.ts

@@ -0,0 +1,51 @@
+import { useCallback } from 'react';
+import { FileId } from '../types';
+
+// Encapsulates the state and logic for managing the list of open tabs.
+export const useTabsState = (
+  activeFileId: FileId,
+  setActiveFileId: (fileId: FileId | null) => void,
+  tabList: Array<FileId>,
+  setTabList: (tabList: Array<FileId>) => void,
+) => {
+  // Called when a tab is closed.
+  const closeTab = useCallback(
+    (fileIdToRemove: FileId) => {
+      const i = tabList.findIndex((fileId) => fileId === fileIdToRemove);
+
+      // Support calling `closeTab` on a fileId that is not open,
+      // such as when a file is deleted..
+      if (i !== -1) {
+        // Remove the tab from the tab list.
+        const newTabList = [...tabList.slice(0, i), ...tabList.slice(i + 1)];
+        setTabList(newTabList);
+
+        // If we are closing the active file,
+        if (activeFileId === fileIdToRemove) {
+          // set the new active file to the next tab over,
+          if (newTabList.length > 0) {
+            setActiveFileId(i === 0 ? newTabList[i] : newTabList[i - 1]);
+          } else {
+            // or clear out the active file
+            // if we've closed the last tab.
+            setActiveFileId(null);
+          }
+        }
+      }
+    },
+    [tabList, activeFileId],
+  );
+
+  // Called when a tab is opened.
+  const openTab = useCallback(
+    (fileId: FileId) => {
+      setActiveFileId(fileId);
+      if (!tabList.includes(fileId)) {
+        setTabList([...tabList, fileId]);
+      }
+    },
+    [tabList],
+  );
+
+  return { tabList, closeTab, openTab };
+};