vzcode 2.0.0 → 2.3.0

package/src/client/VZSidebar/CreateFileModal.tsx

@@ -1,111 +0,0 @@
-import {
-  useState,
-  useCallback,
-  useRef,
-  useEffect,
-  useContext,
-} from 'react';
-import { Modal, Form, Button } from '../bootstrap';
-import { VZCodeContext } from '../VZCodeContext';
-
-export const CreateFileModal = ({
-  initialFileName = '',
-}) => {
-  const [newName, setNewName] = useState(initialFileName);
-  const inputRef = useRef(null);
-
-  const {
-    files,
-    isCreateFileModalOpen,
-    handleCloseCreateFileModal,
-    handleCreateFileClick,
-  } = useContext(VZCodeContext);
-
-  useEffect(() => {
-    if (isCreateFileModalOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isCreateFileModalOpen]);
-
-  const handleNameChange = useCallback((event) => {
-    setNewName(event.target.value);
-  }, []);
-
-  const onCreateClick = useCallback(() => {
-    handleCreateFileClick(newName);
-    setNewName('');
-  }, [newName, handleCreateFileClick]);
-
-  // Returns true if file name is valid, false otherwise.
-  const validateFileName = useCallback(
-    (fileName: string) => {
-      let valid;
-      //General Character Check
-      const regex =
-        /^[a-zA-Z0-9](?:[a-zA-Z0-9 ./+=_-]*[a-zA-Z0-9])?$/;
-      valid = regex.test(fileName);
-
-      //Check for Duplicate Filename
-      for (const key in files) {
-        if (fileName === files[key].name) {
-          valid = false;
-        }
-      }
-
-      return valid;
-    },
-    [files],
-  );
-
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (
-        e.key === 'Enter' &&
-        validateFileName(newName) &&
-        (e.ctrlKey ||
-          e.shiftKey ||
-          (!e.altKey && !e.metaKey))
-      ) {
-        onCreateClick();
-      }
-    },
-    [onCreateClick, validateFileName, newName],
-  );
-
-  return isCreateFileModalOpen ? (
-    <Modal
-      show={isCreateFileModalOpen}
-      onHide={handleCloseCreateFileModal}
-      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={onCreateClick}
-          disabled={!validateFileName(newName)}
-        >
-          Create File
-        </Button>
-      </Modal.Footer>
-    </Modal>
-  ) : null;
-};

package/src/client/VZSidebar/DeleteConfirmationModal.tsx

@@ -1,76 +0,0 @@
-import { Button, Modal } from '../bootstrap';
-import { useCallback, useEffect } 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,
-}) => {
-  const handleEnterKey = useCallback(
-    (event: KeyboardEvent) => {
-      if (event.key === 'Enter') {
-        onConfirm();
-      }
-    },
-    [onConfirm],
-  );
-
-  useEffect(() => {
-    if (show) {
-      window.addEventListener('keydown', handleEnterKey);
-    } else {
-      window.removeEventListener('keydown', handleEnterKey);
-    }
-
-    return () => {
-      window.removeEventListener('keydown', handleEnterKey);
-    };
-  }, [show, handleEnterKey]);
-
-  return (
-    <Modal show={show} onHide={onClose} centered>
-      <Modal.Header closeButton onClick={onClose}>
-        <Modal.Title>
-          Delete{' '}
-          {name === 'all files'
-            ? 'All Files'
-            : isDirectory
-              ? 'Directory'
-              : 'File'}
-        </Modal.Title>
-      </Modal.Header>
-
-      <Modal.Body>
-        <p>
-          {name === 'all files' ? (
-            'This will delete all files in the project.'
-          ) : (
-            <>
-              This will delete the{' '}
-              {isDirectory ? 'directory' : 'file'}{' '}
-              <strong>{name}</strong>.
-            </>
-          )}
-        </p>
-      </Modal.Body>
-
-      <Modal.Footer>
-        <Button
-          variant="secondary"
-          type="button"
-          onClick={onClose}
-        >
-          Cancel
-        </Button>
-        <Button variant="primary" onClick={onConfirm}>
-          Delete
-        </Button>
-      </Modal.Footer>
-    </Modal>
-  );
-};

package/src/client/VZSidebar/DirectoryListing.tsx

@@ -1,89 +0,0 @@
-import { useCallback, useContext, useMemo } from 'react';
-import type { FileTree, FileTreeFile } from '../../types';
-import { DirectoryArrowSVG } from '../Icons';
-import { VZCodeContext } from '../VZCodeContext';
-import { Item } from './Item';
-import { Listing } from './Listing';
-
-export const DirectoryListing = ({
-  name,
-  path,
-  children,
-  handleFileClick,
-  handleFileDoubleClick,
-}: {
-  name: string;
-  path: string;
-  children: Array<FileTree | FileTreeFile>;
-  handleFileClick: (fileId: string) => void;
-  handleFileDoubleClick: (fileId: string) => void;
-}) => {
-  const {
-    renameDirectory,
-    deleteDirectory,
-    isDirectoryOpen,
-    toggleDirectory,
-    sidebarPresenceIndicators,
-  } = useContext(VZCodeContext);
-
-  const handleClick = useCallback(() => {
-    toggleDirectory(path);
-  }, [toggleDirectory, path]);
-
-  const handleDeleteClick = useCallback(() => {
-    deleteDirectory(path);
-  }, [deleteDirectory, path]);
-
-  const handleRenameClick = useCallback(
-    (newName: string) => {
-      renameDirectory(path, name, newName);
-    },
-    [renameDirectory, path, name],
-  );
-
-  const isOpen = useMemo(
-    () => isDirectoryOpen(path),
-    [isDirectoryOpen, path],
-  );
-
-  return (
-    <>
-      <Item
-        id={path}
-        name={name}
-        handleClick={handleClick}
-        handleDeleteClick={handleDeleteClick}
-        handleRenameClick={handleRenameClick}
-        isDirectory={true}
-      >
-        <div
-          className="arrow-wrapper"
-          style={{
-            transform: `rotate(${isOpen ? 90 : 0}deg)`,
-          }}
-        >
-          <DirectoryArrowSVG />
-        </div>
-        <div className="name">{name}</div>
-      </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}
-                handleFileClick={handleFileClick}
-                handleFileDoubleClick={
-                  handleFileDoubleClick
-                }
-              />
-            );
-          })}
-        </div>
-      ) : null}
-    </>
-  );
-};

package/src/client/VZSidebar/EmptyState.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-interface EmptyStateProps {
-  children: React.ReactNode;
-}
-
-export const EmptyState: React.FC<EmptyStateProps> = ({
-  children,
-}) => {
-  return <div className="empty-state">{children}</div>;
-};

package/src/client/VZSidebar/FileListing.tsx

@@ -1,91 +0,0 @@
-import { useCallback, useContext } from 'react';
-import { Item } from './Item';
-import { PresenceIndicator } from '../../types';
-import { VizFileId } from '@vizhub/viz-types';
-import { VZCodeContext } from '../VZCodeContext';
-import { FileTypeIcon } from './FileTypeIcon';
-import { assignUserColor } from '../presenceColor';
-
-const PresenceIndicators = ({
-  presence,
-}: {
-  presence: PresenceIndicator[];
-}) => {
-  return (
-    <div className="presence-indicators">
-      {presence.map((indicator, index) => {
-        // Get the raw RGB values from assignUserColor
-        const color = assignUserColor(indicator.username);
-
-        // Format it as `rgb()` directly in the component
-        const formattedColor = `rgb(${color})`;
-
-        //console.log(`Username: ${indicator.username}, Assigned Color: ${formattedColor}`);
-
-        return (
-          <div
-            key={index}
-            className="presence-indicator"
-            style={{ backgroundColor: formattedColor }}
-          >
-            {indicator.username[0]}
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-export const FileListing = ({
-  name,
-  fileId,
-  handleFileClick,
-  handleFileDoubleClick,
-  isActive,
-  presence,
-}: {
-  name: string;
-  fileId: VizFileId;
-  handleFileClick: (fileId: VizFileId) => void;
-  handleFileDoubleClick: (fileId: VizFileId) => void;
-  isActive: boolean;
-  presence: PresenceIndicator[];
-}) => {
-  const { renameFile, deleteFile } =
-    useContext(VZCodeContext);
-
-  const handleClick = useCallback(() => {
-    handleFileClick(fileId);
-  }, [fileId, handleFileClick]);
-
-  const handleDoubleClick = useCallback(() => {
-    handleFileDoubleClick(fileId);
-  }, [fileId, handleFileDoubleClick]);
-
-  const handleDeleteClick = useCallback(() => {
-    deleteFile(fileId);
-  }, [fileId, deleteFile]);
-
-  const handleRenameClick = useCallback(
-    (newName: string) => {
-      renameFile(fileId, newName);
-    },
-    [fileId, renameFile],
-  );
-
-  return (
-    <Item
-      id={fileId}
-      name={name}
-      handleClick={handleClick}
-      handleDoubleClick={handleDoubleClick}
-      handleDeleteClick={handleDeleteClick}
-      handleRenameClick={handleRenameClick}
-      isActive={isActive}
-    >
-      <PresenceIndicators presence={presence} />
-      <FileTypeIcon name={name} />
-      {name}
-    </Item>
-  );
-};

package/src/client/VZSidebar/FileTypeIcon.tsx

@@ -1,49 +0,0 @@
-import { useMemo } from 'react';
-import {
-  FileSVG,
-  JavaScriptSVG,
-  TypeScriptSVG,
-  ReactSVG,
-  SvelteSVG,
-  JsonSVG,
-  MarkdownSVG,
-  HtmlSVG,
-  CssSVG,
-} from '../Icons';
-
-export function getExtensionIcon(fileName: string) {
-  const extension = fileName.split('.');
-
-  switch (extension[extension.length - 1]) {
-    case 'jsx':
-    case 'tsx':
-      return <ReactSVG />;
-    case 'js':
-      return <JavaScriptSVG />;
-    case 'ts':
-      return <TypeScriptSVG />;
-    case 'json':
-      return <JsonSVG />;
-    case 'md':
-      return <MarkdownSVG />;
-    case 'html':
-      return <HtmlSVG />;
-    case 'css':
-      return <CssSVG />;
-    case 'svelte':
-      return <SvelteSVG />;
-    default:
-      return <FileSVG />;
-  }
-}
-
-// Various neat icons based on the file extension
-export const FileTypeIcon = ({
-  name,
-}: {
-  name: string;
-}) => (
-  <i className="file-icon">
-    {useMemo(() => getExtensionIcon(name), [name])}
-  </i>
-);

package/src/client/VZSidebar/Item.tsx

@@ -1,237 +0,0 @@
-import {
-  useState,
-  useCallback,
-  useRef,
-  useEffect,
-  useContext,
-} from 'react';
-import { ItemId } from '../../types';
-import { EditSVG, TrashSVG } from '../Icons';
-import { Tooltip, OverlayTrigger } from '../bootstrap';
-import { VZCodeContext } from '../VZCodeContext';
-import { FileTypeIcon } from './FileTypeIcon';
-
-// TODO consider moving this up to a higher level of the component tree
-import { DeleteConfirmationModal } from './DeleteConfirmationModal';
-
-const enableRenameDirectory = true;
-
-// A file or directory in the sidebar.
-export const Item = ({
-  id,
-  name,
-  children,
-  handleClick,
-  handleDoubleClick,
-  handleRenameClick,
-  handleDeleteClick,
-  isDirectory = false,
-  isActive = false,
-  renameFileTooltipText = isDirectory
-    ? 'Rename Directory'
-    : 'Rename File',
-  deleteFileTooltipText = isDirectory
-    ? 'Delete Directory'
-    : 'Delete File',
-}: {
-  id: ItemId;
-  name: string;
-  children: React.ReactNode;
-  handleClick: (event: React.MouseEvent) => void;
-  handleDoubleClick?: (event: React.MouseEvent) => void;
-  handleRenameClick: (newName: string) => void;
-  handleDeleteClick: () => void;
-  isDirectory?: boolean;
-  isActive?: boolean;
-  renameFileTooltipText?: string;
-  deleteFileTooltipText?: string;
-}) => {
-  const { hoveredItemId, setHoveredItemId } =
-    useContext(VZCodeContext);
-  // // Tracks whether the mouse is hovering over the file or directory
-  // const [isHovered, setIsHovered] = useState(false);
-  const isHovered = hoveredItemId === id;
-  const setIsHovered = useCallback(
-    (isHovered: boolean) => {
-      if (isHovered) {
-        setHoveredItemId(id);
-      } else {
-        setHoveredItemId(null);
-      }
-    },
-    [id, setHoveredItemId],
-  );
-
-  // Tracks whether the file is being renamed (inline text input)
-  const [isRenaming, setIsRenaming] = useState(false);
-
-  // Tracks the value of the input field when renaming
-  const [renameValue, setRenameValue] = useState('');
-
-  // Tracks whether the delete confirmation modal is open
-  const [showModal, setShowModal] = useState(false);
-
-  // Ref to track the input DOM, so that we can focus and blur it
-  const renameInputRef = useRef(null);
-
-  const onKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLInputElement>) => {
-      if (event.key === 'Escape') {
-        setIsRenaming(false);
-      } else if (event.key === 'Enter') {
-        renameInputRef.current.blur();
-      }
-    },
-    [],
-  );
-
-  const onBlur = useCallback(() => {
-    setIsRenaming(false);
-    if (renameInputRef.current.value.trim() === '') {
-      // Renaming to empty signals deletion
-      setShowModal(true);
-    } else {
-      handleRenameClick(renameInputRef.current.value);
-    }
-  }, [handleRenameClick]);
-
-  const handleRenameIconClick = useCallback(
-    (event: React.MouseEvent) => {
-      event.stopPropagation();
-      setIsRenaming(!isRenaming);
-      setRenameValue(name);
-    },
-    [name, isRenaming],
-  );
-
-  // Focus the input field when renaming
-  useEffect(() => {
-    if (isRenaming) {
-      renameInputRef.current.focus();
-    }
-  }, [isRenaming]);
-
-  // Function to open the delete file confirmation modal
-  const handleModalOpen = useCallback(
-    (event: React.MouseEvent) => {
-      event.stopPropagation();
-      setShowModal(true);
-    },
-    [],
-  );
-
-  // Function to close the modal
-  const handleModalClose = useCallback(() => {
-    setShowModal(false);
-  }, []);
-
-  // Function to handle confirmation on modal
-  const handleConfirmModal = useCallback(
-    (event: React.MouseEvent | undefined) => {
-      // TODO clean this up.
-      // This was added to prevent parent listeners from firing
-      // when the modal is confirmed.
-      event?.stopPropagation();
-      setShowModal(false);
-      handleDeleteClick();
-    },
-    [handleDeleteClick],
-  );
-
-  const handleMouseEnter = useCallback(() => {
-    setIsHovered(true);
-  }, []);
-
-  const handleMouseLeave = useCallback(() => {
-    setIsHovered(false);
-  }, []);
-
-  const onChange = useCallback(() => {
-    setRenameValue(renameInputRef.current.value);
-  }, []);
-
-  return (
-    <div
-      className={`file-or-directory user-select-none ${
-        isActive ? 'active-file' : ''
-      }`}
-      onClick={isRenaming ? null : handleClick}
-      onDoubleClick={
-        isRenaming || !handleDoubleClick
-          ? null
-          : handleDoubleClick
-      }
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      <div className="name">
-        {isRenaming ? (
-          <>
-            <FileTypeIcon name={renameValue} />
-            <input
-              className="rename-input"
-              ref={renameInputRef}
-              type="text"
-              aria-label="Field name"
-              value={renameValue}
-              onKeyDown={onKeyDown}
-              onBlur={onBlur}
-              onChange={onChange}
-            />
-          </>
-        ) : (
-          children
-        )}
-      </div>
-      {isHovered && !isRenaming ? (
-        <div
-          className="utils"
-          style={{ position: 'relative' }}
-        >
-          {(isDirectory ? enableRenameDirectory : true) ? (
-            <OverlayTrigger
-              placement="top"
-              overlay={
-                <Tooltip id="rename-file-tooltip">
-                  {renameFileTooltipText}
-                </Tooltip>
-              }
-            >
-              <i
-                onClick={handleRenameIconClick}
-                className="icon-button icon-button-dark"
-              >
-                <EditSVG />
-              </i>
-            </OverlayTrigger>
-          ) : null}
-          <OverlayTrigger
-            placement="top"
-            overlay={
-              <Tooltip id="delete-file-tooltip">
-                {deleteFileTooltipText}
-              </Tooltip>
-            }
-          >
-            <i
-              onClick={handleModalOpen}
-              className="icon-button icon-button-dark"
-            >
-              <TrashSVG />
-            </i>
-          </OverlayTrigger>
-        </div>
-      ) : null}
-      {/* TODO Move this up to a higher level of the tree */}
-      {showModal && (
-        <DeleteConfirmationModal
-          show={showModal}
-          onClose={handleModalClose}
-          onConfirm={handleConfirmModal}
-          isDirectory={isDirectory}
-          name={name}
-        />
-      )}
-    </div>
-  );
-};

package/src/client/VZSidebar/Listing.tsx

@@ -1,47 +0,0 @@
-import { useContext } from 'react';
-import { VizFileId } from '@vizhub/viz-types';
-import type { FileTree, FileTreeFile } from '../../types';
-import { VZCodeContext } from '../VZCodeContext';
-import { DirectoryListing } from './DirectoryListing';
-import { FileListing } from './FileListing';
-
-// A "Listing" is a "FileListing" or a "DirectoryListing"
-// that appears in the Sidebar.
-export const Listing = ({
-  entity,
-  handleFileClick,
-  handleFileDoubleClick,
-}: {
-  entity: FileTree | FileTreeFile;
-  handleFileClick: (fileId: VizFileId) => void;
-  handleFileDoubleClick: (fileId: VizFileId) => void;
-}) => {
-  const { activePane, sidebarPresenceIndicators } =
-    useContext(VZCodeContext);
-  const { name, file, fileId } = entity as FileTreeFile;
-  const { path, children } = entity as FileTree;
-
-  const presence =
-    sidebarPresenceIndicators?.filter(
-      (indicator) => indicator.fileId === fileId,
-    ) || [];
-
-  return file ? (
-    <FileListing
-      fileId={fileId}
-      name={name}
-      handleFileClick={handleFileClick}
-      handleFileDoubleClick={handleFileDoubleClick}
-      isActive={fileId === activePane.activeFileId}
-      presence={presence}
-    />
-  ) : (
-    <DirectoryListing
-      name={name}
-      path={path}
-      children={children}
-      handleFileClick={handleFileClick}
-      handleFileDoubleClick={handleFileDoubleClick}
-    />
-  );
-};