vzcode 0.24.0 → 0.26.0

package/src/client/TabList/Tab.tsx

@@ -0,0 +1,56 @@
+import { useCallback, useMemo } from 'react';
+import { FileId } from '../../types';
+
+// Supports adding the file's containing folder to the tab name
+const fileNameSplit = (fileName: string) => {
+  const split = fileName.split('/');
+  if (split.length === 1) return split[split.length - 1];
+  return (
+    split[split.length - 2] + '/' + split[split.length - 1]
+  );
+};
+
+export const Tab = ({
+  fileId,
+  isActive,
+  setActiveFileId,
+  closeTabs,
+  fileName,
+}: {
+  fileId: FileId;
+  isActive: boolean;
+  setActiveFileId: (fileId: FileId) => void;
+  closeTabs: (fileIds: FileId[]) => void;
+  fileName: string;
+}) => {
+  const handleCloseClick = useCallback(
+    (event: React.MouseEvent) => {
+      // Stop propagation so that the outer listener doesn't fire.
+      event.stopPropagation();
+
+      closeTabs([fileId]);
+    },
+    [closeTabs, 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' : ''}
+        className={'bx bx-x tab-close'}
+        onClick={handleCloseClick}
+      ></div>
+    </div>
+  );
+};

package/src/client/TabList/index.tsx

@@ -1,89 +1,37 @@
-import { useCallback, useMemo, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { FileId, Files } from '../../types';
+import { Tab } from './Tab';
 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,
+  closeTabs,
 }: {
   files: Files;
   tabList: FileId[];
   activeFileId: FileId;
   setActiveFileId: (fileId: FileId) => void;
-  closeTab: (fileId: FileId) => void;
+  closeTabs: (fileIds: FileId[]) => void;
 }) => {
-  //Create a function to perform the logic to delete the current tab
+  // Close the active tab on alt+w
   const handleKeyPress = useCallback(
     (event: { altKey: boolean; key: string }) => {
       if (event.altKey == true) {
         if (event.key == 'w') {
-          closeTab(activeFileId);
+          closeTabs([activeFileId]);
         }
       }
     },
-    [closeTab, activeFileId],
+    [closeTabs, activeFileId],
   );
+
+  // Add the global keydown event listener
   useEffect(() => {
-    // attach the event listener
     document.addEventListener('keydown', handleKeyPress);
-    // remove the event listener
     return () => {
       document.removeEventListener(
         'keydown',
@@ -91,6 +39,7 @@ export const TabList = ({
       );
     };
   }, [handleKeyPress]);
+
   return (
     <div className="vz-tab-list">
       {files &&
@@ -100,7 +49,7 @@ export const TabList = ({
             fileId={fileId}
             isActive={fileId === activeFileId}
             setActiveFileId={setActiveFileId}
-            closeTab={closeTab}
+            closeTabs={closeTabs}
             fileName={files[fileId].name}
           />
         ))}

package/src/client/TabList/style.scss

@@ -1,20 +1,20 @@
 .vz-tab-list {
   display: flex;
-  background-color: rgb(37, 37, 38);
+  background-color: #33415b;
   // When the tab list becomes too large, a horizontal scroll bar appears.
   overflow-x: auto;
 
   .tab {
-    background: rgb(45, 45, 45);
+    // background: #47546b;
     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;
+    padding-left: 8px;
+    padding-right: 5px;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
     margin-top: 5px;
     margin-left: 2px;
     margin-right: 2px;
@@ -24,13 +24,25 @@
 
     .tab-close {
       margin-left: 5px;
+      margin-bottom: 2px;
     }
     .tab-close:hover {
-      border-radius: 30%;
-      background-color: rgb(37, 37, 38);
+      border-radius: 50%;
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+
+    // No left margin for first child
+    &:first-child {
+      margin-left: 0;
+    }
+
+    // on hover
+    &:hover {
+      background-color: #47546b;
     }
   }
+
   .tab.active {
-    background-color: rgb(41, 44, 52);
+    background-color: #202e46;
   }
 }

package/src/client/{Settings.tsx → VZSettings.tsx}

@@ -11,7 +11,7 @@ import { ThemeLabel, themes } from './themes';
 
 export let username = 'Anonymous';
 
-export const Settings = ({
+export const VZSettings = ({
   show,
   onClose,
   setTheme,

package/src/client/{Sidebar → VZSidebar}/FileListing.tsx

@@ -8,6 +8,7 @@ export const FileListing = ({
   handleRenameFileClick,
   handleDeleteFileClick,
   handleFileClick,
+  isActive,
 }: {
   name: string;
   fileId: FileId;
@@ -20,6 +21,7 @@ export const FileListing = ({
     event: React.MouseEvent,
   ) => void;
   handleFileClick: (fileId: FileId) => void;
+  isActive: boolean;
 }) => {
   const handleClick = useCallback(() => {
     handleFileClick(fileId);
@@ -46,6 +48,7 @@ export const FileListing = ({
       handleDeleteClick={handleDeleteClick}
       handleRenameClick={handleRenameClick}
       isDir={false}
+      isActive={isActive}
     >
       {name}
     </Item>

package/src/client/{Sidebar → VZSidebar}/Item.tsx

@@ -8,6 +8,7 @@ export const Item = ({
   handleRenameClick,
   handleDeleteClick,
   isDir,
+  isActive = false,
 }) => {
   // Tracks whether the mouse is hovering over the file or directory
   const [isHovered, setIsHovered] = useState(false);
@@ -19,9 +20,9 @@ export const Item = ({
   const [renameValue, setRenameValue] = useState('');
 
   const onKeyDown = useCallback((event) => {
-    // TODO make 'Escape' cancel the changes - do not commit the rename
-    // https://github.com/vizhub-core/vzcode/issues/207
-    if (event.key === 'Enter' || event.key === 'Escape') {
+    if (event.key === 'Escape') {
+      setIsRenaming(false);
+    } else if (event.key === 'Enter') {
       event.target.blur();
     }
   }, []);
@@ -82,7 +83,9 @@ export const Item = ({
 
   return (
     <div
-      className="full-box file-or-directory"
+      className={`full-box file-or-directory ${
+        isActive ? 'active-file' : ''
+      }`}
       onClick={isRenaming ? null : handleClick}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
@@ -105,7 +108,7 @@ export const Item = ({
         <div className="utils">
           <i
             className="bx bxs-edit utilities"
-            style={{ color: '#abdafb' }}
+            style={{ color: '#9edcff' }}
             onClick={(event: React.MouseEvent) => {
               event.stopPropagation();
               setIsRenaming(!isRenaming);
@@ -113,8 +116,8 @@ export const Item = ({
             }}
           ></i>
           <i
-            className="bx bx-trash"
-            style={{ color: '#eb336c' }}
+            className="bx bx-trash utilities"
+            style={{ color: '#ff006b' }}
             onClick={handleModalOpen}
           ></i>
         </div>

package/src/client/{Sidebar → VZSidebar}/Listing.tsx

@@ -15,6 +15,7 @@ export const Listing = ({
   handleFileClick,
   isDirectoryOpen,
   toggleDirectory,
+  activeFileId,
 }: {
   entity: FileTree | FileTreeFile;
   handleRenameFileClick: (
@@ -28,6 +29,7 @@ export const Listing = ({
   handleFileClick: (fileId: FileId) => void;
   isDirectoryOpen: (path: string) => boolean;
   toggleDirectory: (path: string) => void;
+  activeFileId: FileId;
 }) => {
   const { name, file, fileId } = entity as FileTreeFile;
   const { path, children } = entity as FileTree;
@@ -38,6 +40,7 @@ export const Listing = ({
       handleRenameFileClick={handleRenameFileClick}
       handleDeleteFileClick={handleDeleteFileClick}
       handleFileClick={handleFileClick}
+      isActive={fileId === activeFileId}
     />
   ) : (
     <DirectoryListing

package/src/client/{Sidebar → VZSidebar}/index.tsx

@@ -12,7 +12,7 @@ import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
 import { Listing } from './Listing';
 import './styles.scss';
 
-export const Sidebar = ({
+export const VZSidebar = ({
   createFile,
   files,
   handleRenameFileClick,
@@ -21,6 +21,7 @@ export const Sidebar = ({
   setIsSettingsOpen,
   isDirectoryOpen,
   toggleDirectory,
+  activeFileId,
 }: {
   files: Files;
   createFile?: () => void;
@@ -36,6 +37,7 @@ export const Sidebar = ({
   setIsSettingsOpen?: (isSettingsOpen: boolean) => void;
   isDirectoryOpen?: (path: string) => boolean;
   toggleDirectory?: (path: string) => void;
+  activeFileId?: FileId;
 }) => {
   const fileTree = useMemo(
     () => (files ? sortFileTree(getFileTree(files)) : null),
@@ -57,11 +59,7 @@ export const Sidebar = ({
     >
       <div className="files">
         <div className="full-box">
-          <div>
-            <a className="link-name" href="#">
-              Files
-            </a>
-          </div>
+          <div className="sidebar-section-hint">Files</div>
           <div>
             <i
               className="bx bxs-file-plus new-btn"
@@ -88,6 +86,7 @@ export const Sidebar = ({
                   handleFileClick={handleFileClick}
                   isDirectoryOpen={isDirectoryOpen}
                   toggleDirectory={toggleDirectory}
+                  activeFileId={activeFileId}
                 />
               );
             })

package/src/client/{Sidebar → VZSidebar}/styles.scss

@@ -1,12 +1,13 @@
 .vz-sidebar {
   height: 100%;
-  background: rgb(54, 65, 89);
+  color: #d6d9de;
+  background: #33415b;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 
   .full-box {
-    padding: 7px;
+    padding: 3px 6px;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -24,16 +25,14 @@
     justify-content: space-between;
     cursor: pointer;
     margin: 0 10px;
-    color: rgb(219, 221, 225);
-    border-radius: 5px;
+    border-radius: 4px;
   }
 
-  .link-name {
-    margin-top: 30px;
+  .sidebar-section-hint {
+    // margin-top: 30px;
     margin-left: 10px;
-    color: rgb(154, 160, 172);
     font-size: 12px;
-    text-decoration: none;
+    color: #99a0ad;
   }
 
   .new-btn {
@@ -44,14 +43,21 @@
 
   .utils {
     display: flex;
+    gap: 8px;
   }
   .utilities {
-    margin-right: 3px;
+    // margin-right: 3px;
+    transform: scale(1.2);
   }
 
   .file-or-directory:hover,
   .settings:hover {
-    background-color: rgb(74, 84, 105);
+    background-color: #47546b;
+  }
+
+  .active-file,
+  .active-file:hover {
+    background-color: #202e46;
   }
 
   .name {
@@ -71,13 +77,12 @@
 
   .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;
+    border-radius: 4px;
   }
 }

package/src/client/bootstrap.ts

@@ -5,4 +5,7 @@ import Form from 'react-bootstrap/cjs/Form.js';
 import Button from 'react-bootstrap/cjs/Button.js';
 import Modal from 'react-bootstrap/cjs/Modal.js';
 
+// Pull in custom CSS from vizhub-ui.
+import 'vizhub-ui/dist/vizhub-ui.css';
+
 export { Form, Button, Modal };

package/src/client/style.scss

@@ -1,6 +1,7 @@
 :root {
   --vzcode-font-family: ui-monospace, SFMono-Regular,
-    SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+    'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace !important;
+  /* Variable for the background color */
   --vz-bg-color: rgb(
     41,
     44,
@@ -36,7 +37,9 @@ body,
 
 .app {
   background-color: var(--vz-bg-color);
-  font-family: 'Poppins', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    'Noto Sans', Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji';
   display: flex;
 
   /* To support Resizer, which is position: absolute */

package/src/client/themes/index.ts

@@ -0,0 +1,7 @@
+export {
+  themes,
+  defaultTheme,
+  themeOptionsByLabel,
+} from './themes';
+export type { ThemeLabel, ThemeOption } from './themes';
+export { useDynamicTheme } from './useDynamicTheme';

package/src/client/{themes.ts → themes/themes.ts}

@@ -7,7 +7,7 @@ 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';
-// import { vizhub } from './vizhub-theme';
+import { vizhubTheme } from './vizhubTheme';
 
 // CodeMirror themes
 export type ThemeLabel =
@@ -19,8 +19,8 @@ export type ThemeLabel =
   | 'oneDark'
   | 'okaidia'
   | 'github'
-  | 'xcode';
-// | 'vizhub'
+  | 'xcode'
+  | 'vizhub';
 
 export type ThemeOption = {
   value: any;
@@ -37,7 +37,7 @@ export const themes: Array<ThemeOption> = [
   { value: okaidia, label: 'okaidia' },
   { value: githubDark, label: 'github' },
   { value: xcodeLight, label: 'xcode' },
-  // { value: vizhub, label: 'vizhub' },
+  { value: vizhubTheme, label: 'vizhub' },
 ];
 
 // Map theme labels to theme values
@@ -53,4 +53,4 @@ export const themeOptionsByLabel: Record<
 );
 
 // The default theme
-export const defaultTheme: ThemeLabel = 'oneDark';
+export const defaultTheme: ThemeLabel = 'vizhub';

package/src/client/{useDynamicTheme.ts → themes/useDynamicTheme.ts}

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { EditorCache } from './useEditorCache';
+import { EditorCache } from '../useEditorCache';
 import { ThemeLabel, themeOptionsByLabel } from './themes';
 
 export const useDynamicTheme = (

package/src/client/themes/vizhubTheme/colors.ts

@@ -0,0 +1,80 @@
+// import { hcl } from 'd3-color';
+
+// This module defines all the colors for the VizHub theme.
+// Ported from the CodeMirror 5 theme defined here:
+// https://github.com/vizhub-core/vizhub-legacy/blob/01cadfb78a2611df32f981b1fd8136b70447de9e/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/themes/vizHub.js
+
+// This is how the colors were generated:
+// const sidebarDark = hcl('#3d4b65');
+// const sidebarLight = hcl('#5b677d');
+// const luminaceDifference = sidebarLight.l - sidebarDark.l;
+// const backgroundLuminance =
+//   sidebarDark.l - luminaceDifference * 1.1;
+// const luminance = 90;
+// export const backgroundColor = hcl(
+//   sidebarDark.h,
+//   sidebarDark.c,
+//   backgroundLuminance,
+// ).formatHex();
+// export const light = hcl(0, 0, luminance).formatHex();
+// export const dark = hcl(
+//   sidebarDark.h,
+//   sidebarDark.c,
+//   80,
+// ).formatHex();
+// console.log(
+//   JSON.stringify(
+//     {
+//       backgroundColor,
+//       light,
+//       dark,
+//     },
+//     null,
+//     2,
+//   ),
+// );
+
+// These are inlined from the above code, but the code is kept around for future reference.
+export const backgroundColor = '#202e46';
+export const light = '#e2e2e2';
+export const dark = '#b9c7e6';
+
+export const lineNumbers = 'rgba(255,255,255,0.2)';
+export const lineNumbersActive = 'rgba(255,255,255,0.5)';
+export const selectionBackground = '#000';
+export const selectionBackgroundMatch = 'rgba(0,0,0,0.4)';
+export const lineHighlight = 'rgba(0,0,0,0.1)';
+export const caretColor = 'white';
+
+// Compute 6 colors that are evenly spaced in terms of hue
+// Keeping this code around for future reference
+// const rotation = 0.397;
+// const numColors = 6;
+// const highlightColors = Array.from(
+//   { length: numColors },
+//   (_, i) => {
+//     let t = (i / numColors + rotation) % 1;
+//     return hcl(t * 360, saturation, luminance).formatHex();
+//   },
+// );
+// console.log(JSON.stringify(highlightColors));
+
+// We inline the colors here, but the code above is how they were generated.
+const highlightColors = [
+  '#77fd8c',
+  '#00ffff',
+  '#66ecff',
+  '#ffb9ff',
+  '#ffabb3',
+  '#ffdb56',
+];
+
+export const MINT = highlightColors[0];
+export const AQUA = highlightColors[1];
+export const SKY = highlightColors[2];
+export const LAVENDER = highlightColors[3];
+export const SALMON = highlightColors[4];
+export const GOLDENROD = highlightColors[5];
+
+// Red that's not too bright, for errors
+export const PANIC = '#ff2222';