vzcode 2.2.0 → 2.3.0

package/src/client/PresenceNotifications/index.tsx

@@ -1,158 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import { PresenceId, Username } from '../../types';
-import './style.scss';
-
-type PresenceNotification = {
-  user: Username;
-  join: boolean;
-  presenceId: PresenceId;
-};
-
-export const extractTimestampFromId = (
-  id: string,
-): number => {
-  const [timestampPart] = id.split('-');
-  return parseInt(timestampPart, 36);
-};
-
-export const shouldShowNotification = (
-  remotePresenceId: PresenceId,
-  localPresenceId: PresenceId,
-): boolean => {
-  const remotePresenceTimestamp = extractTimestampFromId(
-    remotePresenceId,
-  );
-  const localPresenceTimestamp =
-    extractTimestampFromId(localPresenceId);
-  return remotePresenceTimestamp > localPresenceTimestamp;
-};
-
-export const handleJoin = (
-  presenceId: PresenceId,
-  username: Username,
-  alreadyJoined: React.MutableRefObject<
-    Map<PresenceId, Username>
-  >,
-  setPresenceNotifications: any,
-) => {
-  if (!alreadyJoined.current.has(presenceId)) {
-    alreadyJoined.current.set(presenceId, username);
-    setPresenceNotifications(
-      (prev: PresenceNotification[]) => [
-        ...prev,
-        { user: username, join: true, presenceId },
-      ],
-    );
-  } else {
-    alreadyJoined.current.set(presenceId, username); // Update in case username changed
-  }
-};
-
-export const handleLeave = (
-  presenceId: PresenceId,
-  alreadyJoined: React.MutableRefObject<
-    Map<PresenceId, Username>
-  >,
-  setPresenceNotifications: any,
-) => {
-  const user = alreadyJoined.current.get(presenceId);
-  if (user) {
-    alreadyJoined.current.delete(presenceId);
-    setPresenceNotifications(
-      (prev: PresenceNotification[]) => [
-        ...prev,
-        { user, join: false, presenceId },
-      ],
-    );
-  }
-};
-
-export const PresenceNotifications = ({
-  docPresence,
-  localPresence,
-}: {
-  docPresence?: any;
-  localPresence?: any;
-}) => {
-  // `presenceNotifications`:
-  // - State variable containing a list of user presence notifications.
-  // - Each notification indicates if a user has joined or left a session.
-  const [presenceNotifications, setPresenceNotifications] =
-    useState<PresenceNotification[]>([]);
-
-  // `alreadyJoined`:
-  // - Ref (persistent across re-renders) containing a Map.
-  // - Map's key: `PresenceId` (unique identifier for user's presence).
-  // - Map's value: `Username` of the associated user.
-  // - Tracks users who have joined the session and their possible username changes.
-  const alreadyJoined = useRef<Map<PresenceId, Username>>(
-    new Map(),
-  );
-
-  useEffect(() => {
-    if (docPresence) {
-      const handleReceive = (
-        presenceId: PresenceId,
-        update: any,
-      ) => {
-        const join = update !== null;
-        if (
-          shouldShowNotification(
-            presenceId,
-            localPresence.presenceId,
-          )
-        ) {
-          if (join) {
-            const username =
-              docPresence.remotePresences[presenceId]
-                ?.username;
-            handleJoin(
-              presenceId,
-              username,
-              alreadyJoined,
-              setPresenceNotifications,
-            );
-          } else {
-            handleLeave(
-              presenceId,
-              alreadyJoined,
-              setPresenceNotifications,
-            );
-          }
-
-          const timeoutId = setTimeout(() => {
-            setPresenceNotifications((prev) =>
-              prev.slice(1),
-            );
-          }, 5000);
-
-          return () => {
-            clearTimeout(timeoutId);
-          };
-        }
-      };
-
-      docPresence.on('receive', handleReceive);
-      return () => {
-        docPresence.off('receive', handleReceive);
-      };
-    }
-  }, [docPresence, localPresence]);
-
-  return presenceNotifications.length > 0 ? (
-    <div className="vz-notification">
-      {presenceNotifications.map(
-        ({ user, join, presenceId }) => (
-          <div
-            key={presenceId}
-            className="vz-notification-item"
-          >
-            {join
-              ? `${user} has joined the session.`
-              : `${user} has left the session.`}
-          </div>
-        ),
-      )}
-    </div>
-  ) : null;
-};

package/src/client/PresenceNotifications/style.scss

@@ -1,17 +0,0 @@
-.vz-notification {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  bottom: 20px;
-  right: 20px;
-
-  color: rgb(154, 160, 172);
-  padding: 15px;
-
-  .vz-notification-item {
-    background-color: rgb(54, 65, 89);
-    padding: 5px;
-    border-radius: 5px;
-  }
-}

package/src/client/RunCodeWidget/index.tsx

@@ -1,117 +0,0 @@
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from 'react';
-import { PlaySVG } from '../Icons';
-import { SplitEditorSVG } from '../Icons/SplitEditorSVG';
-import { VZCodeContext } from '../VZCodeContext';
-import { OverlayTrigger, Tooltip } from '../bootstrap';
-
-import './style.scss';
-
-// Feature flag for split pane feature (WIP)
-const enableSplitPane = false;
-
-export const RunCodeWidget = ({
-  runCodeWidgetTooltipText = (
-    <>
-      <strong>Run Code</strong>
-      <div>(Shift + Enter or Ctrl + s)</div>
-    </>
-  ),
-}: {
-  runCodeWidgetTooltipText?: JSX.Element;
-}) => {
-  const { runCodeRef, runPrettierRef, splitCurrentPane } =
-    useContext(VZCodeContext);
-  const [isRunning, setIsRunning] = useState(false);
-
-  const handleClick = useCallback(
-    (event?: React.MouseEvent) => {
-      setIsRunning(true); // Set the running state to true
-
-      // Run Prettier
-      const runPrettier = runPrettierRef.current;
-      if (runPrettier !== null) {
-        runPrettier();
-      }
-
-      // Run the code
-      const runCode = runCodeRef.current;
-      if (runCode !== null) {
-        runCode();
-      }
-
-      // Optional: reset the icon state after animation completes (e.g., 1 second)
-      setTimeout(() => setIsRunning(false), 1000);
-    },
-    [runCodeRef, runPrettierRef],
-  );
-
-  const handleSplitEditor = useCallback(() => {
-    splitCurrentPane();
-  }, [splitCurrentPane]);
-
-  // Add the keyboard event listener for Ctrl+S and Shift+Enter
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (
-        (event.ctrlKey && event.key === 's') ||
-        (event.shiftKey && event.key === 'Enter')
-      ) {
-        event.preventDefault();
-        handleClick();
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-
-    // Cleanup the event listener on component unmount
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [handleClick]);
-
-  return (
-    <div>
-      <div className="vz-code-split-view-widget">
-        {enableSplitPane && (
-          <OverlayTrigger
-            placement="bottom"
-            overlay={
-              <Tooltip id="fork-file-tooltip">
-                Split Editor
-              </Tooltip>
-            }
-          >
-            <i
-              onClick={handleSplitEditor}
-              className="icon-button icon-button-dark"
-            >
-              <SplitEditorSVG />
-            </i>
-          </OverlayTrigger>
-        )}
-      </div>
-      <div className="vz-code-run-code-widget">
-        <OverlayTrigger
-          placement="bottom"
-          overlay={
-            <Tooltip id="run-code-widget-tooltip">
-              {runCodeWidgetTooltipText}
-            </Tooltip>
-          }
-        >
-          <i
-            className={`icon-button icon-button-dark ${isRunning ? 'rotate-icon' : ''}`}
-            onClick={handleClick}
-          >
-            <PlaySVG />
-          </i>
-        </OverlayTrigger>
-      </div>
-    </div>
-  );
-};

package/src/client/RunCodeWidget/style.scss

@@ -1,24 +0,0 @@
-.vz-code-run-code-widget {
-  position: absolute;
-  right: 16px;
-  top: 9px;
-  color: var(--vh-color-neutral-04);
-  .rotate-icon {
-    animation: spin 1s linear;
-  }
-}
-.vz-code-split-view-widget {
-  position: absolute;
-  right: 51px;
-  top: 9px;
-  color: var(--vh-color-neutral-04);
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

package/src/client/SplitPaneResizeContext.tsx

@@ -1,159 +0,0 @@
-// From https://github.com/vizhub-core/vizhub/edit/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/SplitPaneResizeContext/index.js
-import {
-  createContext,
-  useReducer,
-  useCallback,
-  useEffect,
-} from 'react';
-
-export type Side = 'left' | 'right';
-
-export type SplitPaneResizeContextValue = {
-  codeEditorWidth: number;
-  sidebarWidth: number;
-  moveSplitPane: (a: number, side: Side) => void;
-  isDraggingRight: boolean;
-  isDraggingLeft: boolean;
-  setIsDragging: (a: boolean, side: Side) => void;
-  setSidebarView: (isAIChatOpen: boolean) => void;
-};
-
-// Default widths for different sidebar views
-const filesViewWidth = 300;
-const aiChatViewWidth = 800;
-const initialCodeEditorWidthDefault = 800;
-
-const initialValue: SplitPaneResizeContextValue = {
-  codeEditorWidth: initialCodeEditorWidthDefault,
-  sidebarWidth: filesViewWidth, // Default to files view
-  moveSplitPane: () => {},
-  isDraggingRight: false,
-  isDraggingLeft: false,
-  setIsDragging: () => {},
-  setSidebarView: () => {},
-};
-
-export const SplitPaneResizeContext =
-  createContext<SplitPaneResizeContextValue>(initialValue);
-
-type SplitPaneState = {
-  // The width of the sidebar, in pixels.
-  sidebarWidth: number;
-  codeEditorWidth: number;
-  isDraggingLeft: boolean;
-  isDraggingRight: boolean;
-};
-
-const initialState: SplitPaneState = {
-  sidebarWidth: filesViewWidth,
-  codeEditorWidth: initialCodeEditorWidthDefault,
-  isDraggingLeft: false,
-  isDraggingRight: false,
-};
-
-type SplitPaneAction =
-  | {
-      type: 'move';
-      side: Side;
-      movementX: number;
-    }
-  | {
-      type: 'setIsDragging';
-      side: Side;
-      isDragging: boolean;
-    }
-  | {
-      type: 'setSidebarView';
-      isAIChatOpen: boolean;
-    };
-
-const splitPaneReducer = (
-  state: SplitPaneState,
-  action: SplitPaneAction,
-) => {
-  switch (action.type) {
-    case 'move':
-      return action.side === 'left'
-        ? {
-            ...state,
-            sidebarWidth:
-              state.sidebarWidth + action.movementX,
-          }
-        : {
-            ...state,
-            codeEditorWidth:
-              state.codeEditorWidth + action.movementX,
-          };
-    // Handle setIsDragging
-    case 'setIsDragging':
-      return action.side === 'left'
-        ? {
-            ...state,
-            isDraggingLeft: action.isDragging,
-          }
-        : {
-            ...state,
-            isDraggingRight: action.isDragging,
-          };
-    case 'setSidebarView':
-      return {
-        ...state,
-        sidebarWidth: action.isAIChatOpen
-          ? aiChatViewWidth
-          : filesViewWidth,
-      };
-    default:
-      return state;
-  }
-};
-
-export const SplitPaneResizeProvider = ({ children }) => {
-  const [state, dispatch] = useReducer(
-    splitPaneReducer,
-    initialState,
-  );
-
-  const setIsDragging = useCallback(
-    (isDragging: boolean, side: Side) => {
-      dispatch({ type: 'setIsDragging', isDragging, side });
-    },
-    [dispatch],
-  );
-
-  const moveSplitPane = useCallback(
-    (movementX: number, side: Side) => {
-      dispatch({ type: 'move', movementX, side });
-    },
-    [dispatch],
-  );
-
-  const setSidebarView = useCallback(
-    (isAIChatOpen: boolean) => {
-      dispatch({ type: 'setSidebarView', isAIChatOpen });
-    },
-    [dispatch],
-  );
-
-  const {
-    sidebarWidth,
-    codeEditorWidth,
-    isDraggingLeft,
-    isDraggingRight,
-  } = state;
-
-  const value: SplitPaneResizeContextValue = {
-    codeEditorWidth,
-    sidebarWidth,
-    moveSplitPane,
-    isDraggingLeft,
-    isDraggingRight,
-    setIsDragging,
-    setSidebarView,
-  };
-
-  return (
-    <SplitPaneResizeContext.Provider value={value}>
-      {children}
-    </SplitPaneResizeContext.Provider>
-  );
-};

package/src/client/TabList/Tab.tsx

@@ -1,73 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import type { TabState } from '../../types';
-import type { VizFileId } from '@vizhub/viz-types';
-import { CloseSVG } from '../Icons';
-
-// 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,
-  isTransient,
-  isActive,
-  setActiveFileId,
-  openTab,
-  closeTabs,
-  fileName,
-}: {
-  fileId: VizFileId;
-  isTransient?: boolean;
-  isActive: boolean;
-  setActiveFileId: (fileId: VizFileId) => void;
-  openTab: (tabState: TabState) => void;
-  closeTabs: (fileIds: VizFileId[]) => 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],
-  );
-
-  const handleClick = useCallback(() => {
-    setActiveFileId(fileId);
-  }, [fileId, setActiveFileId]);
-
-  // Double-clicking a transient tab makes it a persistent tab.
-  const handleDoubleClick = useCallback(() => {
-    openTab({ fileId });
-  }, [fileId, openTab]);
-
-  return (
-    <div
-      className={`tab user-select-none ${
-        isActive ? 'active' : ''
-      } ${isTransient ? 'transient' : ''}`}
-      onClick={handleClick}
-      onDoubleClick={handleDoubleClick}
-    >
-      {tabName}
-      <i
-        className="icon-button icon-button-dark"
-        onClick={handleCloseClick}
-      >
-        <CloseSVG />
-      </i>
-    </div>
-  );
-};

package/src/client/TabList/index.tsx

@@ -1,35 +0,0 @@
-import { useContext } from 'react';
-import { TabState } from '../../types';
-import { VZCodeContext } from '../VZCodeContext';
-import { Tab } from './Tab';
-import './style.scss';
-
-// Displays the list of tabs above the code editor.
-export const TabList = ({ activeFileId, tabList }) => {
-  const { files, setActiveFileId, openTab, closeTabs } =
-    useContext(VZCodeContext);
-
-  return (
-    <div className="vz-tab-list">
-      {files &&
-        tabList
-          // Handles the case that the tab list references a file that was deleted.
-          .filter(
-            (tabState: TabState) =>
-              tabState.fileId in files,
-          )
-          .map((tabState: TabState) => (
-            <Tab
-              key={tabState.fileId}
-              fileId={tabState.fileId}
-              isTransient={tabState.isTransient}
-              isActive={tabState.fileId === activeFileId}
-              setActiveFileId={setActiveFileId}
-              openTab={openTab}
-              closeTabs={closeTabs}
-              fileName={files[tabState.fileId].name}
-            />
-          ))}
-    </div>
-  );
-};

package/src/client/TabList/style.scss

@@ -1,51 +0,0 @@
-.vz-tab-list {
-  display: flex;
-  background-color: #1f2022;
-  // When the tab list becomes too large, a horizontal scroll bar appears.
-  overflow-x: auto;
-
-  .tab {
-    // background: #47546b;
-    color: #fff;
-    font-family: var(--vzcode-font-family);
-    font-weight: 500;
-    align-items: center;
-    display: flex;
-    gap: 6px;
-    padding: 4px 4px 4px 14px;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-    margin-top: 6px;
-    margin-left: 2px;
-    margin-right: 2px;
-    cursor: pointer;
-    // Make sure text doesn't wrap within tabs.
-    white-space: nowrap;
-
-    // No left margin for first child
-    &:first-child {
-      margin-left: 0;
-    }
-
-    // on hover
-    &:hover {
-      // background-color: var(--vh-color-hover-dark);
-      background-color: rgba(255, 255, 255, 0.075);
-    }
-  }
-
-  .tab.active {
-    background-color: #202e46;
-  }
-
-  .tab.transient {
-    font-style: italic;
-  }
-
-  .icon-button {
-    color: var(--vh-color-neutral-03);
-  }
-  .icon-button:hover {
-    color: var(--vh-color-action-03);
-  }
-}

package/src/client/VZCodeContext/index.tsx

@@ -1,29 +0,0 @@
-import React, { Context, createContext } from 'react';
-import {
-  VZCodeContextValue,
-  VZCodeProviderProps,
-} from './types';
-import { useVZCodeState } from './useVZCodeState';
-
-// This context centralizes all the "smart" logic
-// to do with the application state. This includes
-//  * Accessing and manipulating ShareDB data
-//  * Centralized application state
-export const VZCodeContext: Context<VZCodeContextValue | null> =
-  createContext<VZCodeContextValue>(null);
-
-export const VZCodeProvider: React.FC<
-  VZCodeProviderProps
-> = ({ children, ...props }) => {
-  // Use the custom hook to get all the context value
-  const value = useVZCodeState(props);
-
-  return (
-    <VZCodeContext.Provider value={value}>
-      {children}
-    </VZCodeContext.Provider>
-  );
-};
-
-// Re-export types for backward compatibility
-export type { VZCodeContextValue, VZCodeProviderProps };