vzcode 0.6.0 → 0.8.0

package/src/client/Sidebar/DirectoryListing.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { Item } from './Item';
 import { Listing } from './Listing';
 import { DirectoryArrowSVG } from './DirectoryArrowSVG';
@@ -11,7 +11,7 @@ export const DirectoryListing = ({
   handleRenameFileClick,
   handleDeleteFileClick,
   handleFileClick,
-  openDirectories,
+  isDirectoryOpen,
   toggleDirectory,
 }: {
   name: string;
@@ -20,7 +20,7 @@ export const DirectoryListing = ({
   handleRenameFileClick: (fileId: string) => void;
   handleDeleteFileClick: (fileId: string, event: React.MouseEvent) => void;
   handleFileClick: (fileId: string) => void;
-  openDirectories: { [path: string]: boolean };
+  isDirectoryOpen: (path: string) => boolean;
   toggleDirectory: (path: string) => void;
 }) => {
   const handleClick = useCallback(() => {
@@ -35,7 +35,8 @@ export const DirectoryListing = ({
     console.log('TODO handleRenameDirectoryClick');
   }, []);
 
-  const isOpen = openDirectories[path];
+  const isOpen = useMemo(() => isDirectoryOpen(path), [isDirectoryOpen, path]);
+
   return (
     <>
       <Item
@@ -64,7 +65,7 @@ export const DirectoryListing = ({
                 handleRenameFileClick={handleRenameFileClick}
                 handleDeleteFileClick={handleDeleteFileClick}
                 handleFileClick={handleFileClick}
-                openDirectories={openDirectories}
+                isDirectoryOpen={isDirectoryOpen}
                 toggleDirectory={toggleDirectory}
               />
             );

package/src/client/Sidebar/FileListing.tsx

@@ -23,7 +23,7 @@ export const FileListing = ({
     (event) => {
       handleDeleteFileClick(fileId, event);
     },
-    [fileId]
+    [fileId],
   );
 
   const handleRenameClick = useCallback(() => {

package/src/client/Sidebar/Listing.tsx

@@ -9,14 +9,14 @@ export const Listing = ({
   handleRenameFileClick,
   handleDeleteFileClick,
   handleFileClick,
-  openDirectories,
+  isDirectoryOpen,
   toggleDirectory,
 }: {
   entity: FileTree | FileTreeFile;
   handleRenameFileClick: (fileId: FileId) => void;
   handleDeleteFileClick: (fileId: FileId, event: React.MouseEvent) => void;
   handleFileClick: (fileId: FileId) => void;
-  openDirectories: { [path: string]: boolean };
+  isDirectoryOpen: (path: string) => boolean;
   toggleDirectory: (path: string) => void;
 }) => {
   const { name, file, fileId } = entity as FileTreeFile;
@@ -37,7 +37,7 @@ export const Listing = ({
       handleRenameFileClick={handleRenameFileClick}
       handleDeleteFileClick={handleDeleteFileClick}
       handleFileClick={handleFileClick}
-      openDirectories={openDirectories}
+      isDirectoryOpen={isDirectoryOpen}
       toggleDirectory={toggleDirectory}
     />
   );

package/src/client/Sidebar/index.tsx

@@ -1,9 +1,8 @@
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { getFileTree } from '../getFileTree';
 import { sortFileTree } from '../sortFileTree';
 import { disableSettings } from '../featureFlags';
 import { Listing } from './Listing';
-import { useOpenDirectories } from './useOpenDirectories';
 
 import './styles.scss';
 import { FileId, FileTree, FileTreeFile, Files } from '../../types';
@@ -15,7 +14,8 @@ export const Sidebar = ({
   handleDeleteFileClick,
   handleFileClick,
   setIsSettingsOpen,
-  isSettingsOpen,
+  isDirectoryOpen,
+  toggleDirectory,
 }: {
   files: Files;
   createFile?: () => void;
@@ -23,14 +23,17 @@ export const Sidebar = ({
   handleDeleteFileClick?: (fileId: FileId, event: React.MouseEvent) => void;
   handleFileClick?: (fileId: FileId) => void;
   setIsSettingsOpen?: (isSettingsOpen: boolean) => void;
-  isSettingsOpen?: boolean;
+  isDirectoryOpen?: (path: string) => boolean;
+  toggleDirectory?: (path: string) => void;
 }) => {
   const fileTree = useMemo(
     () => (files ? sortFileTree(getFileTree(files)) : null),
-    [files]
+    [files],
   );
 
-  const { openDirectories, toggleDirectory } = useOpenDirectories();
+  const handleSettingsClick = useCallback(() => {
+    setIsSettingsOpen(true);
+  }, []);
 
   return (
     <div className="vz-sidebar">
@@ -53,14 +56,15 @@ export const Sidebar = ({
           ? fileTree.children.map((entity) => {
               const { fileId } = entity as FileTreeFile;
               const { path } = entity as FileTree;
+              const key = fileId ? fileId : path;
               return (
                 <Listing
                   entity={entity}
-                  key={fileId || path}
+                  key={key}
                   handleRenameFileClick={handleRenameFileClick}
                   handleDeleteFileClick={handleDeleteFileClick}
                   handleFileClick={handleFileClick}
-                  openDirectories={openDirectories}
+                  isDirectoryOpen={isDirectoryOpen}
                   toggleDirectory={toggleDirectory}
                 />
               );
@@ -68,10 +72,7 @@ export const Sidebar = ({
           : null}
       </div>
       {disableSettings ? null : (
-        <div
-          className="settings"
-          onClick={() => setIsSettingsOpen(!isSettingsOpen)}
-        >
+        <div className="settings" onClick={handleSettingsClick}>
           Settings
         </div>
       )}

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/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/style.scss

@@ -45,49 +45,5 @@ body,
     flex: 1;
     flex-direction: column;
     min-width: 0;
-
-    .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);
-      }
-    }
-
-    .editor {
-      flex: 1;
-      display: flex;
-      font-family: var(--vzcode-font-family);
-      overflow-x: auto;
-    }
   }
 }
-
-.themes {
-  color: rgb(37, 37, 38);
-}

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.ts → useOpenDirectories.ts}

@@ -18,20 +18,26 @@ 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 = () => {
-  const [openDirectories, setOpenDirectories] = useState<{
-    [path: string]: boolean;
-  }>({});
+  // 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) => {
-      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 };
+};

package/src/types.ts

@@ -55,3 +55,15 @@ export interface FileTreeFile {
   file: File;
   fileId: FileId;
 }
+
+// `ShareDBDoc`
+// A ShareDB Document.
+// TODO better types? Integrate with upstream how?
+// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/sharedb/lib/sharedb.d.ts#L110
+export type ShareDBDoc<T> = {
+  data: T;
+  ingestSnapshot: (snapshot: any, callback) => void;
+  subscribe: (callback) => void;
+  on: (event: string, callback: () => void) => void;
+  off: (event: string, callback: () => void) => void;
+};