vzcode 0.28.0 → 0.29.0

package/src/client/VZSidebar/CreateFileModal.tsx

@@ -0,0 +1,93 @@
+import {
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+} from 'react';
+import { Modal, Form, Button } from '../bootstrap';
+
+export const CreateFileModal = ({
+  show,
+  onClose,
+  onRename,
+  initialFileName = '',
+}) => {
+  const [newName, setNewName] = useState(initialFileName);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (show && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [show]);
+
+  const handleNameChange = useCallback((event) => {
+    setNewName(event.target.value);
+  }, []);
+
+  const handleRenameClick = useCallback(() => {
+    onRename(newName);
+    setNewName('');
+  }, [newName, onRename]);
+
+  // Returns true if file name is valid, false otherwise.
+  const validateFileName = useCallback(
+    (fileName: string) => {
+      const regex =
+        /^[a-zA-Z0-9](?:[a-zA-Z0-9 ./+=_-]*[a-zA-Z0-9])?$/;
+      return regex.test(fileName);
+    },
+    [],
+  );
+
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (
+        e.key === 'Enter' &&
+        (e.ctrlKey ||
+          e.shiftKey ||
+          (!e.altKey && !e.metaKey))
+      ) {
+        handleRenameClick();
+      }
+    },
+    [handleRenameClick],
+  );
+
+  return show ? (
+    <Modal
+      show={show}
+      onHide={onClose}
+      animation={false}
+      onKeyDown={handleKeyDown}
+    >
+      <Modal.Header closeButton>
+        <Modal.Title>Create File</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Form.Group className="mb-3" controlId="fileName">
+          <Form.Label>File Name</Form.Label>
+          <Form.Control
+            type="text"
+            value={newName}
+            onChange={handleNameChange}
+            ref={inputRef}
+            spellCheck="false"
+          />
+          <Form.Text className="text-muted">
+            Enter the name for your file
+          </Form.Text>
+        </Form.Group>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button
+          variant="primary"
+          onClick={handleRenameClick}
+          disabled={!validateFileName(newName)}
+        >
+          Create File
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  ) : null;
+};

package/src/client/VZSidebar/DeleteConfirmationModal.tsx

@@ -1,36 +1,54 @@
 import { Button, Modal } from '../bootstrap';
+import { useCallback } from 'react';
 
 // Confirmation modal for deleting a file or directory.
 // Inspired by https://react-bootstrap.netlify.app/docs/components/modal/#live-demo
+
 export const DeleteConfirmationModal = ({
   show,
   onClose,
   onConfirm,
   isDirectory,
   name,
-}) => (
-  <Modal show={show} onHide={onClose} centered>
-    <Modal.Header closeButton onClick={onClose}>
-      <Modal.Title>
-        Delete {isDirectory ? 'Directory' : 'File'}
-      </Modal.Title>
-    </Modal.Header>
+}) => {
+  const handleSubmit = useCallback(
+    (event) => {
+      event.preventDefault();
+      onConfirm();
+    },
+    [onConfirm],
+  );
+
+  return (
+    <Modal show={show} onHide={onClose} centered>
+      <form onSubmit={handleSubmit}>
+        <Modal.Header closeButton onClick={onClose}>
+          <Modal.Title>
+            Delete {isDirectory ? 'Directory' : 'File'}
+          </Modal.Title>
+        </Modal.Header>
 
-    <Modal.Body>
-      <p>
-        This will delete the{' '}
-        {isDirectory ? 'directory' : 'file'}{' '}
-        <strong>{name}</strong>.
-      </p>
-    </Modal.Body>
+        <Modal.Body>
+          <p>
+            This will delete the{' '}
+            {isDirectory ? 'directory' : 'file'}{' '}
+            <strong>{name}</strong>.
+          </p>
+        </Modal.Body>
 
-    <Modal.Footer>
-      <Button variant="secondary" onClick={onClose}>
-        Cancel
-      </Button>
-      <Button variant="primary" onClick={onConfirm}>
-        Delete
-      </Button>
-    </Modal.Footer>
-  </Modal>
-);
+        <Modal.Footer>
+          <Button
+            variant="secondary"
+            type="button"
+            onClick={onClose}
+          >
+            Cancel
+          </Button>
+          <Button variant="primary" type="submit">
+            Delete
+          </Button>
+        </Modal.Footer>
+      </form>
+    </Modal>
+  );
+};

package/src/client/VZSidebar/index.tsx

@@ -1,4 +1,10 @@
-import { useCallback, useContext, useMemo } from 'react';
+import {
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  useEffect,
+} from 'react';
 import {
   FileId,
   FileTree,
@@ -11,14 +17,15 @@ import { sortFileTree } from '../sortFileTree';
 import { disableSettings } from '../featureFlags';
 import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
 import { Listing } from './Listing';
+import { CreateFileModal } from './CreateFileModal';
 import './styles.scss';
 
-const CreateFileButton = ({ createFile }) => {
+const CreateFileButton = ({ handleCreateFile }) => {
   return (
     <i
       className="bx bxs-file-plus new-btn"
       style={{ color: '#dbdde1' }}
-      onClick={createFile}
+      onClick={handleCreateFile}
       // TODO better tooltip
       title="Create file"
     ></i>
@@ -31,13 +38,14 @@ export const VZSidebar = ({
   deleteFile,
   deleteDirectory,
   openTab,
+  closeTabs,
   setIsSettingsOpen,
   isDirectoryOpen,
   toggleDirectory,
   activeFileId,
 }: {
   files: Files;
-  createFile: () => void;
+  createFile: (fileName) => void;
   renameFile: (fileId: FileId, newName: string) => void;
   deleteFile: (fileId: FileId) => void;
   deleteDirectory: (path: FileTreePath) => void;
@@ -48,6 +56,7 @@ export const VZSidebar = ({
     fileId: FileId;
     isTransient?: boolean;
   }) => void;
+  closeTabs: (fileIds: FileId[]) => void;
   setIsSettingsOpen: (isSettingsOpen: boolean) => void;
   isDirectoryOpen: (path: string) => boolean;
   toggleDirectory: (path: string) => void;
@@ -58,11 +67,53 @@ export const VZSidebar = ({
     [files],
   );
 
+  const [isModalOpen, setIsModalOpen] = useState(false); // State to control the modal's visibility
+
+  const handleCreateFile = useCallback(() => {
+    setIsModalOpen(true);
+  }, [setIsModalOpen]);
+
+  const handleCloseModal = useCallback(() => {
+    setIsModalOpen(false);
+  }, [setIsModalOpen]);
+
+  const handleRename = useCallback(
+    (newFileName: string) => {
+      createFile(newFileName);
+      setIsModalOpen(false);
+    },
+    [createFile, setIsModalOpen],
+  );
+
+  const handleKeyPress = useCallback(
+    (event: { altKey: boolean; key: string }) => {
+      if (event.altKey == true) {
+        if (event.key == 'w') {
+          closeTabs([activeFileId]);
+        }
+        if (event.key == 'n') {
+          handleCreateFile();
+        }
+      }
+    },
+    [createFile, closeTabs, activeFileId],
+  );
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyPress);
+    return () => {
+      document.removeEventListener(
+        'keydown',
+        handleKeyPress,
+      );
+    };
+  }, [handleKeyPress]);
+
   const handleSettingsClick = useCallback(() => {
     setIsSettingsOpen(true);
   }, []);
 
-  const { codeEditorWidth } = useContext(
+  const { sidebarWidth } = useContext(
     SplitPaneResizeContext,
   );
 
@@ -91,13 +142,15 @@ export const VZSidebar = ({
   return (
     <div
       className="vz-sidebar"
-      style={{ width: codeEditorWidth + 'px' }}
+      style={{ width: sidebarWidth + 'px' }}
     >
       <div className="files">
         <div className="full-box">
           <div className="sidebar-section-hint">Files</div>
           <div>
-            <CreateFileButton createFile={createFile} />
+            <CreateFileButton
+              handleCreateFile={handleCreateFile}
+            />
           </div>
         </div>
         {filesExist ? (
@@ -130,7 +183,9 @@ export const VZSidebar = ({
               your first file.
             </div>
 
-            <CreateFileButton createFile={createFile} />
+            <CreateFileButton
+              handleCreateFile={handleCreateFile}
+            />
           </div>
         )}
       </div>
@@ -139,9 +194,14 @@ export const VZSidebar = ({
           className="settings"
           onClick={handleSettingsClick}
         >
-          Settings
+          Editor Settings
         </div>
       )}
+      <CreateFileModal
+        show={isModalOpen}
+        onClose={handleCloseModal}
+        onRename={handleRename}
+      />
     </div>
   );
 };

package/src/client/useFileCRUD.ts

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import {
   FileId,
   FileTreePath,
@@ -26,24 +26,24 @@ export const useFileCRUD = ({
   }) => void;
 }) => {
   // Create a new file
-  const createFile = useCallback(() => {
-    // TODO use Bootstrap modals not native prompts
-    // See https://github.com/vizhub-core/vzcode/issues/252
-    const name = prompt('Enter new file name');
-    if (name) {
-      const fileId: FileId = randomId();
-      submitOperation((document: VZCodeContent) => ({
-        ...document,
-        files: {
-          ...document.files,
-          [fileId]: { name, text: '' },
-        },
-      }));
-      // When a new file is created, open it in a new tab
-      // and focus the editor on it.
-      openTab({ fileId, isTransient: false });
-    }
-  }, [submitOperation]);
+  const createFile = useCallback(
+    (name: string) => {
+      if (name) {
+        const fileId: FileId = randomId();
+        submitOperation((document: VZCodeContent) => ({
+          ...document,
+          files: {
+            ...document.files,
+            [fileId]: { name, text: '' },
+          },
+        }));
+        // When a new file is created, open it in a new tab
+        // and focus the editor on it.
+        openTab({ fileId, isTransient: false });
+      }
+    },
+    [submitOperation],
+  );
 
   // Called when a file in the sidebar is renamed.
   const renameFile = useCallback(

package/src/client/useOpenDirectories.ts

@@ -15,17 +15,22 @@ import { useState, useCallback } from 'react';
 //  return openDirectories;
 //};
 
+type VZPath = string;
+
 // Inspired by
 // https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/FilesSection/useOpenDirectories.js
 // TODO move this into reducer
-export const useOpenDirectories = () => {
+export const useOpenDirectories = (): {
+  isDirectoryOpen: (path: VZPath) => boolean;
+  toggleDirectory: (path: VZPath) => void;
+} => {
   // The set of open directories by path/
   const [openDirectories, setOpenDirectories] = useState<
-    Set<string>
+    Set<VZPath>
   >(new Set());
 
   // Whether a directory is open.
-  const isDirectoryOpen: (path: string) => boolean =
+  const isDirectoryOpen: (path: VZPath) => boolean =
     useCallback(
       (path) => openDirectories.has(path),
       [openDirectories],
@@ -37,21 +42,20 @@ export const useOpenDirectories = () => {
    * If it's closed, it will open it.
    */
   const toggleDirectory = useCallback(
-    (directoryPath: string) => {
+    (path: VZPath) => {
       // Create a copy of the currently open directories
       const updatedOpenDirectories = new Set(
         openDirectories,
       );
 
       // Check if the directory is currently open
-      const directoryIsOpen =
-        isDirectoryOpen(directoryPath);
+      const directoryIsOpen = isDirectoryOpen(path);
 
       // Toggle the directory's state
       if (directoryIsOpen) {
-        updatedOpenDirectories.delete(directoryPath);
+        updatedOpenDirectories.delete(path);
       } else {
-        updatedOpenDirectories.add(directoryPath);
+        updatedOpenDirectories.add(path);
       }
 
       // Update the state with the modified set of open directories

package/src/client/usePrettier/index.ts

@@ -7,7 +7,7 @@ import {
 import { useEffect, useRef, useState } from 'react';
 
 // The time in milliseconds by which auto-saving is debounced.
-const autoPrettierDebounceTimeMS = 1200;
+export const autoPrettierDebounceTimeMS = 1200;
 
 // Computes a file extension from a file name.
 // Example: 'foo.js' => '.js'
@@ -128,6 +128,10 @@ export const usePrettier = (
       );
     }
 
+    //Stops prettier from running when you perform a mouse move or a keydown
+    window.addEventListener('mousemove', debouncePrettier);
+    window.addEventListener('keydown', debouncePrettier);
+
     // Listen for changes
     shareDBDoc.on(
       'op batch',
@@ -186,6 +190,14 @@ export const usePrettier = (
         'message',
         handleMessage,
       );
+      window.removeEventListener(
+        'keydown',
+        debouncePrettier,
+      );
+      window.removeEventListener(
+        'mousemove',
+        debouncePrettier,
+      );
 
       // Clear the timeout
       clearTimeout(debounceTimeout);

package/src/client/useTypeScript/index.ts

@@ -0,0 +1,44 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { VZCodeContent } from '../../types';
+import { autoPrettierDebounceTimeMS } from '../usePrettier';
+
+// We don't want to send the message _before_ Prettier runs,
+// so we need to wait at least as long as Prettier takes to run,
+// plus some "wiggle room" which is amount of time it may take
+// to aactually run Prettier and update the document.
+const wiggleRoom = 500;
+
+// The time in milliseconds by which auto-saving is debounced.
+const sendMessageDebounceTimeMS =
+  autoPrettierDebounceTimeMS + wiggleRoom;
+
+export const useTypeScript = ({
+  content,
+  typeScriptWorker,
+}: {
+  content: VZCodeContent;
+  typeScriptWorker: Worker;
+}) => {
+  // When Content changes, update the TypeScript worker
+  // with the new content, but debounced.
+
+  // This keeps track of the setTimeout ID across renders.
+  const debounceTimeoutId = useRef<number | null>(null);
+
+  const debounceUpdateContent = useCallback(
+    (content: VZCodeContent) => {
+      clearTimeout(debounceTimeoutId.current);
+      debounceTimeoutId.current = window.setTimeout(() => {
+        typeScriptWorker.postMessage({
+          event: 'update-content',
+          details: content,
+        });
+      }, sendMessageDebounceTimeMS);
+    },
+    [typeScriptWorker],
+  );
+
+  useEffect(() => {
+    debounceUpdateContent(content);
+  }, [content]);
+};

package/src/client/useTypeScript/requestTypes.ts

@@ -0,0 +1,29 @@
+import ts from 'typescript';
+import { VZCodeContent } from '../../types';
+
+export type AutocompleteRequest = {
+  event: 'autocomplete-request';
+  fileName: string;
+  fileContent: string;
+  position: number;
+  requestId: string;
+};
+
+export type AutocompleteResponse = {
+  event: 'post-completions';
+  completions: any;
+  requestId: string;
+};
+
+export type LinterRequest = {
+  event: 'lint-request';
+  fileName: string;
+  fileContent: string;
+  requestId: string;
+};
+
+export type LinterResponse = {
+  event: 'post-error-linter';
+  tsErrors: ts.Diagnostic[];
+  requestId: string;
+};