vzcode 2.2.0 → 2.3.0

package/src/client/VZSidebar/CreateDirModal.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 CreateDirModal = ({
-  initialFileName = '',
-}) => {
-  const [newName, setNewName] = useState(initialFileName);
-  const inputRef = useRef(null);
-
-  const {
-    files,
-    isCreateDirModalOpen,
-    handleCloseCreateDirModal,
-    handleCreateDirClick,
-  } = useContext(VZCodeContext);
-
-  useEffect(() => {
-    if (isCreateDirModalOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isCreateDirModalOpen]);
-
-  const handleNameChange = useCallback((event) => {
-    setNewName(event.target.value);
-  }, []);
-
-  const onCreateClick = useCallback(() => {
-    handleCreateDirClick(newName);
-    setNewName('');
-  }, [newName, handleCreateDirClick]);
-
-  // 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 isCreateDirModalOpen ? (
-    <Modal
-      show={isCreateDirModalOpen}
-      onHide={handleCloseCreateDirModal}
-      animation={false}
-      onKeyDown={handleKeyDown}
-    >
-      <Modal.Header closeButton>
-        <Modal.Title>Create Directory</Modal.Title>
-      </Modal.Header>
-      <Modal.Body>
-        <Form.Group className="mb-3" controlId="fileName">
-          <Form.Label>Directory 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 Directory
-        </Button>
-      </Modal.Footer>
-    </Modal>
-  ) : null;
-};

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>
-);