vzcode 0.17.0 → 0.18.0

package/src/client/Settings.tsx

@@ -3,7 +3,11 @@ import Modal from 'react-bootstrap/Modal';
 import Form from 'react-bootstrap/Form';
 import Button from 'react-bootstrap/Button';
 import Select from 'react-select';
-import { ThemeLabel, themeOptionsByLabel, themes } from './themes';
+import {
+  ThemeLabel,
+  themeOptionsByLabel,
+  themes,
+} from './themes';
 
 const saveTimes = [
   { value: 1, label: '1 second' },
@@ -25,25 +29,21 @@ export const Settings = ({
 }) => {
   const handleChange = useCallback((selectedOption) => {
     setTheme(selectedOption.label);
-    // TODO make this work.
-    // Sketch of algorithm:
-    // for each editor in the editor cache,
-    //   update the theme
-    // editor.dispatch({
-    //   effects: themeSet.reconfigure(selectedOption.value),
-    // });
   }, []);
 
-  const handleSaveTimeChange = useCallback((selectedOption) => {
-    const time = [{ value: selectedOption.value }];
-    fetch('/saveTime', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(time),
-    });
-  }, []);
+  const handleSaveTimeChange = useCallback(
+    (selectedOption) => {
+      const time = [{ value: selectedOption.value }];
+      fetch('/saveTime', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(time),
+      });
+    },
+    [],
+  );
 
   return show ? (
     <Modal
@@ -58,7 +58,10 @@ export const Settings = ({
       <Modal.Body>
         <Form.Group className="mb-3" controlId="formFork">
           <Form.Label>Username</Form.Label>
-          <Form.Control type="text" placeholder="Enter username" />
+          <Form.Control
+            type="text"
+            placeholder="Enter username"
+          />
           <Form.Text className="text-muted">
             Enter a username to be displayed on your cursor
           </Form.Text>
@@ -76,8 +79,13 @@ export const Settings = ({
         </Form.Group>
         <Form.Group className="mb-3" controlId="formFork">
           <Form.Label>Auto-Save Time</Form.Label>
-          <Select options={saveTimes} onChange={handleSaveTimeChange} />
-          <Form.Text className="text-muted">Select an auto save time</Form.Text>
+          <Select
+            options={saveTimes}
+            onChange={handleSaveTimeChange}
+          />
+          <Form.Text className="text-muted">
+            Select an auto save time
+          </Form.Text>
         </Form.Group>
       </Modal.Body>
       <Modal.Footer>

package/src/client/Sidebar/DirectoryArrowSVG.jsx

@@ -1,4 +1,7 @@
-export const DirectoryArrowSVG = ({ height = 10, fill = 'currentcolor' }) => (
+export const DirectoryArrowSVG = ({
+  height = 10,
+  fill = 'currentcolor',
+}) => (
   <svg height={height} viewBox={'4 4 16 16'}>
     <path fill={fill} d="M8 17l9-5-9-5v10z" />
   </svg>

package/src/client/Sidebar/DirectoryListing.tsx

@@ -18,7 +18,10 @@ export const DirectoryListing = ({
   path: string;
   children: Array<FileTree | FileTreeFile>;
   handleRenameFileClick: (fileId: string) => void;
-  handleDeleteFileClick: (fileId: string, event: React.MouseEvent) => void;
+  handleDeleteFileClick: (
+    fileId: string,
+    event: React.MouseEvent,
+  ) => void;
   handleFileClick: (fileId: string) => void;
   isDirectoryOpen: (path: string) => boolean;
   toggleDirectory: (path: string) => void;
@@ -35,7 +38,10 @@ export const DirectoryListing = ({
     console.log('TODO handleRenameDirectoryClick');
   }, []);
 
-  const isOpen = useMemo(() => isDirectoryOpen(path), [isDirectoryOpen, path]);
+  const isOpen = useMemo(
+    () => isDirectoryOpen(path),
+    [isDirectoryOpen, path],
+  );
 
   return (
     <>
@@ -47,7 +53,9 @@ export const DirectoryListing = ({
       >
         <div
           className="arrow-wrapper"
-          style={{ transform: `rotate(${isOpen ? 90 : 0}deg)` }}
+          style={{
+            transform: `rotate(${isOpen ? 90 : 0}deg)`,
+          }}
         >
           <DirectoryArrowSVG />
         </div>
@@ -62,8 +70,12 @@ export const DirectoryListing = ({
               <Listing
                 entity={entity}
                 key={fileId || path}
-                handleRenameFileClick={handleRenameFileClick}
-                handleDeleteFileClick={handleDeleteFileClick}
+                handleRenameFileClick={
+                  handleRenameFileClick
+                }
+                handleDeleteFileClick={
+                  handleDeleteFileClick
+                }
                 handleFileClick={handleFileClick}
                 isDirectoryOpen={isDirectoryOpen}
                 toggleDirectory={toggleDirectory}

package/src/client/Sidebar/FileListing.tsx

@@ -12,7 +12,10 @@ export const FileListing = ({
   name: string;
   fileId: FileId;
   handleRenameFileClick: (fileId: FileId) => void;
-  handleDeleteFileClick: (fileId: FileId, event: React.MouseEvent) => void;
+  handleDeleteFileClick: (
+    fileId: FileId,
+    event: React.MouseEvent,
+  ) => void;
   handleFileClick: (fileId: FileId) => void;
 }) => {
   const handleClick = useCallback(() => {

package/src/client/Sidebar/Listing.tsx

@@ -1,5 +1,9 @@
 import { DirectoryListing } from './DirectoryListing';
-import { FileId, FileTree, FileTreeFile } from '../../types';
+import {
+  FileId,
+  FileTree,
+  FileTreeFile,
+} from '../../types';
 import { FileListing } from './FileListing';
 
 // A "Listing" is a "FileListing" or a "DirectoryListing"
@@ -14,7 +18,10 @@ export const Listing = ({
 }: {
   entity: FileTree | FileTreeFile;
   handleRenameFileClick: (fileId: FileId) => void;
-  handleDeleteFileClick: (fileId: FileId, event: React.MouseEvent) => void;
+  handleDeleteFileClick: (
+    fileId: FileId,
+    event: React.MouseEvent,
+  ) => void;
   handleFileClick: (fileId: FileId) => void;
   isDirectoryOpen: (path: string) => boolean;
   toggleDirectory: (path: string) => void;

package/src/client/Sidebar/index.tsx

@@ -1,11 +1,16 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
+import {
+  FileId,
+  FileTree,
+  FileTreeFile,
+  Files,
+} from '../../types';
 import { getFileTree } from '../getFileTree';
 import { sortFileTree } from '../sortFileTree';
 import { disableSettings } from '../featureFlags';
+import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
 import { Listing } from './Listing';
-
 import './styles.scss';
-import { FileId, FileTree, FileTreeFile, Files } from '../../types';
 
 export const Sidebar = ({
   createFile,
@@ -20,7 +25,10 @@ export const Sidebar = ({
   files: Files;
   createFile?: () => void;
   handleRenameFileClick?: (fileId: FileId) => void;
-  handleDeleteFileClick?: (fileId: FileId, event: React.MouseEvent) => void;
+  handleDeleteFileClick?: (
+    fileId: FileId,
+    event: React.MouseEvent,
+  ) => void;
   handleFileClick?: (fileId: FileId) => void;
   setIsSettingsOpen?: (isSettingsOpen: boolean) => void;
   isDirectoryOpen?: (path: string) => boolean;
@@ -35,8 +43,15 @@ export const Sidebar = ({
     setIsSettingsOpen(true);
   }, []);
 
+  const { codeEditorWidth } = useContext(
+    SplitPaneResizeContext,
+  );
+
   return (
-    <div className="vz-sidebar">
+    <div
+      className="vz-sidebar"
+      style={{ width: codeEditorWidth + 'px' }}
+    >
       <div className="files">
         <div className="full-box">
           <div>
@@ -61,8 +76,12 @@ export const Sidebar = ({
                 <Listing
                   entity={entity}
                   key={key}
-                  handleRenameFileClick={handleRenameFileClick}
-                  handleDeleteFileClick={handleDeleteFileClick}
+                  handleRenameFileClick={
+                    handleRenameFileClick
+                  }
+                  handleDeleteFileClick={
+                    handleDeleteFileClick
+                  }
                   handleFileClick={handleFileClick}
                   isDirectoryOpen={isDirectoryOpen}
                   toggleDirectory={toggleDirectory}
@@ -72,7 +91,10 @@ export const Sidebar = ({
           : null}
       </div>
       {disableSettings ? null : (
-        <div className="settings" onClick={handleSettingsClick}>
+        <div
+          className="settings"
+          onClick={handleSettingsClick}
+        >
           Settings
         </div>
       )}

package/src/client/Sidebar/styles.scss

@@ -1,6 +1,5 @@
 .vz-sidebar {
   height: 100%;
-  width: 200px;
   background: rgb(54, 65, 89);
   display: flex;
   flex-direction: column;

package/src/client/SplitPaneResizeContext.tsx

@@ -0,0 +1,63 @@
+// From https://github.com/vizhub-core/vizhub/edit/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/SplitPaneResizeContext/index.js
+import {
+  useState,
+  createContext,
+  useReducer,
+  useEffect,
+} from 'react';
+
+export const SplitPaneResizeContext = createContext<{
+  codeEditorWidth: number;
+  moveSplitPane: (a: number) => void;
+  isDragging: boolean;
+  setIsDragging: (a: boolean) => void;
+}>(null);
+
+const localStorageWriteDebounceMS = 800;
+
+const localStoragePropertyName = 'vizHubCodeEditorWidth';
+const initialWidthLocalStorage = +localStorage.getItem(
+  localStoragePropertyName,
+);
+// const initialWidthPercentage = window.innerWidth / 3;
+const initialWidthDefault = 220;
+const initialWidth =
+  initialWidthLocalStorage || initialWidthDefault;
+
+const add = (a: number, b: number) => a + b;
+
+export const SplitPaneResizeProvider = ({ children }) => {
+  const [codeEditorWidth, moveSplitPane] = useReducer(
+    add,
+    initialWidth,
+  );
+  const [isDragging, setIsDragging] = useState(false);
+
+  useEffect(() => {
+    if (codeEditorWidth !== initialWidth) {
+      const timeout = setTimeout(() => {
+        localStorage.setItem(
+          localStoragePropertyName,
+          '' + codeEditorWidth,
+        );
+      }, localStorageWriteDebounceMS);
+
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+  }, [codeEditorWidth]);
+
+  return (
+    <SplitPaneResizeContext.Provider
+      value={{
+        codeEditorWidth,
+        moveSplitPane,
+        isDragging,
+        setIsDragging,
+      }}
+    >
+      {children}
+    </SplitPaneResizeContext.Provider>
+  );
+};

package/src/client/TabList/index.tsx

@@ -6,7 +6,9 @@ import './style.scss';
 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];
+  return (
+    split[split.length - 2] + '/' + split[split.length - 1]
+  );
 };
 
 const Tab = ({
@@ -32,7 +34,10 @@ const Tab = ({
     [closeTab, fileId],
   );
 
-  const tabName = useMemo(() => fileNameSplit(fileName), [fileName]);
+  const tabName = useMemo(
+    () => fileNameSplit(fileName),
+    [fileName],
+  );
 
   return (
     <div

package/src/client/diff.js

@@ -3,4 +3,10 @@ import diffMatchPatch from 'diff-match-patch';
 import { json1Presence, textUnicode } from '../ot';
 
 export const diff = (a, b) =>
-  jsondiff(a, b, diffMatchPatch, json1Presence, textUnicode);
+  jsondiff(
+    a,
+    b,
+    diffMatchPatch,
+    json1Presence,
+    textUnicode,
+  );

package/src/client/featureFlags.js

@@ -1,3 +1,4 @@
 // A feature flag to disable settings for release, until it's completed.
 // See https://vitejs.dev/guide/env-and-mode.html
-export const disableSettings = import.meta.env.VITE_DISABLE_SETTINGS === 'true';
+export const disableSettings =
+  import.meta.env.VITE_DISABLE_SETTINGS === 'true';

package/src/client/sortFileTree.ts

@@ -11,7 +11,9 @@ export const sortFileTree = (fileTree: FileTree) => {
       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);
+      return (
+        aIsFile - bIsFile || a.name.localeCompare(b.name)
+      );
     });
     fileTree.children.forEach(sortFileTree);
   }

package/src/client/style.scss

@@ -1,47 +1,53 @@
 :root {
-  --vzcode-font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
-    Liberation Mono, monospace;
+  --vzcode-font-family: ui-monospace, SFMono-Regular,
+    SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+  --vz-bg-color: rgb(
+    41,
+    44,
+    52
+  ); /* Variable for the background color */
 }
 
-/* width */
+/* Scrollbar Styles */
 ::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }
 
-/* Track */
 ::-webkit-scrollbar-track {
-  background: rgb(41, 44, 52);
+  background: var(--app-bg-color);
 }
 
-/* Handle */
 ::-webkit-scrollbar-thumb {
   background: rgb(37, 37, 38);
 }
 
-/* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
   background: #555;
 }
 
+/* Layout Styles */
 html,
 body,
 #root,
 .app {
   height: 100%;
 }
-.app {
-  /* TODO use a variable for this */
-  background-color: rgb(41, 44, 52);
 
+.app {
+  background-color: var(--vz-bg-color);
   font-family: 'Poppins', sans-serif;
   display: flex;
 
-  .left {
+  /* To support Resizer, which is position: absolute */
+  position: relative;
+
+  .left,
+  .right {
     display: flex;
   }
+
   .right {
-    display: flex;
     flex: 1;
     flex-direction: column;
     min-width: 0;

package/src/client/themes.ts

@@ -41,14 +41,16 @@ export const themes: Array<ThemeOption> = [
 ];
 
 // Map theme labels to theme values
-export const themeOptionsByLabel: Record<ThemeLabel, ThemeOption> =
-  themes.reduce(
-    (acc, themeOption: ThemeOption) => {
-      acc[themeOption.label] = themeOption;
-      return acc;
-    },
-    {} as Record<ThemeLabel, any>,
-  );
+export const themeOptionsByLabel: Record<
+  ThemeLabel,
+  ThemeOption
+> = themes.reduce(
+  (acc, themeOption: ThemeOption) => {
+    acc[themeOption.label] = themeOption;
+    return acc;
+  },
+  {} as Record<ThemeLabel, any>,
+);
 
 // The default theme
 export const defaultTheme: ThemeLabel = 'oneDark';

package/src/client/useDynamicTheme.ts

@@ -13,8 +13,11 @@ export const useDynamicTheme = (
       isFirstRun.current = false;
     } else {
       // When the user changes the theme, update the theme of all editors.
-      for (const editorCacheValue of Array.from(editorCache.values())) {
-        const { editor, themeCompartment } = editorCacheValue;
+      for (const editorCacheValue of Array.from(
+        editorCache.values(),
+      )) {
+        const { editor, themeCompartment } =
+          editorCacheValue;
         editor.dispatch({
           effects: themeCompartment.reconfigure([
             themeOptionsByLabel[theme].value,

package/src/client/useOpenDirectories.ts

@@ -19,21 +19,24 @@ import { useState, useCallback } from 'react';
 // https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/FilesSection/useOpenDirectories.js
 export const useOpenDirectories = () => {
   // The set of open directories by path/
-  const [openDirectories, setOpenDirectories] = useState<Set<string>>(
-    new Set(),
-  );
+  const [openDirectories, setOpenDirectories] = useState<
+    Set<string>
+  >(new Set());
 
   // Whether a directory is open.
-  const isDirectoryOpen: (path: string) => boolean = useCallback(
-    (path) => openDirectories.has(path),
-    [openDirectories],
-  );
+  const isDirectoryOpen: (path: string) => boolean =
+    useCallback(
+      (path) => openDirectories.has(path),
+      [openDirectories],
+    );
 
   // Toggle whether a directory is open.
   const toggleDirectory = useCallback(
     (path) => {
       const newOpenDirectories = new Set(openDirectories);
-      newOpenDirectories[isDirectoryOpen(path) ? 'delete' : 'add'](path);
+      newOpenDirectories[
+        isDirectoryOpen(path) ? 'delete' : 'add'
+      ](path);
       setOpenDirectories(newOpenDirectories);
     },
     [openDirectories, isDirectoryOpen],