wip: placeholder sheets modal

apps/client/src/features/editors/Editor.tsx

@@ -5,6 +5,7 @@ import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary'
 import MenuBar from '../menu/MenuBar';
 import AboutModal from '../modals/about-modal/AboutModal';
 import QuickStart from '../modals/quick-start/QuickStart';
+import SheetsModal from '../modals/sheets-modal/SheetsModal';
 import UploadModal from '../modals/upload-modal/UploadModal';
 
 import styles from './Editor.module.scss';
@@ -28,6 +29,7 @@ export default function Editor() {
   } = useDisclosure();
   const { isOpen: isAboutModalOpen, onOpen: onAboutModalOpen, onClose: onAboutModalClose } = useDisclosure();
   const { isOpen: isQuickStartOpen, onOpen: onQuickStartOpen, onClose: onQuickStartClose } = useDisclosure();
+  const { isOpen: isSheetsOpen, onOpen: onSheetsOpen, onClose: onSheetsClose } = useDisclosure();
 
   // Set window title
   useEffect(() => {
@@ -42,6 +44,7 @@ export default function Editor() {
         <IntegrationModal onClose={onIntegrationModalClose} isOpen={isIntegrationModalOpen} />
         <AboutModal onClose={onAboutModalClose} isOpen={isAboutModalOpen} />
         <SettingsModal isOpen={isSettingsOpen} onClose={onSettingsClose} />
+        <SheetsModal onClose={onSheetsClose} isOpen={isSheetsOpen} />
       </ErrorBoundary>
       <div className={styles.mainContainer} data-testid='event-editor'>
         <div id='settings' className={styles.settings}>
@@ -58,6 +61,8 @@ export default function Editor() {
               onAboutOpen={onAboutModalOpen}
               isQuickStartOpen={isQuickStartOpen}
               onQuickStartOpen={onQuickStartOpen}
+              isSheetsOpen={isSheetsOpen}
+              onSheetsOpen={onSheetsOpen}
             />
           </ErrorBoundary>
         </div>

apps/client/src/features/menu/MenuBar.tsx

@@ -1,5 +1,6 @@
 import { memo, useCallback, useEffect, useState } from 'react';
 import { VStack } from '@chakra-ui/react';
+import { IoCalendarOutline } from '@react-icons/all-files/io5/IoCalendarOutline';
 import { IoColorWand } from '@react-icons/all-files/io5/IoColorWand';
 import { IoExtensionPuzzle } from '@react-icons/all-files/io5/IoExtensionPuzzle';
 import { IoExtensionPuzzleOutline } from '@react-icons/all-files/io5/IoExtensionPuzzleOutline';
@@ -31,6 +32,8 @@ interface MenuBarProps {
   onAboutOpen: () => void;
   isQuickStartOpen: boolean;
   onQuickStartOpen: () => void;
+  isSheetsOpen: boolean;
+  onSheetsOpen: () => void;
 }
 
 const buttonStyle = {
@@ -58,6 +61,8 @@ const MenuBar = (props: MenuBarProps) => {
     onAboutOpen,
     isQuickStartOpen,
     onQuickStartOpen,
+    isSheetsOpen,
+    onSheetsOpen,
   } = props;
   const { isElectron, sendToElectron } = useElectronEvent();
 
@@ -174,6 +179,16 @@ const MenuBar = (props: MenuBarProps) => {
       />
 
       <div className={style.gap} />
+      <TooltipActionBtn
+        {...buttonStyle}
+        isDisabled={appMode === AppMode.Run}
+        icon={<IoCalendarOutline />}
+        className={isSheetsOpen ? style.open : ''}
+        clickHandler={onSheetsOpen}
+        tooltip='Sheets'
+        aria-label='Sheets'
+        size='sm'
+      />
       <TooltipActionBtn
         {...buttonStyle}
         isDisabled={appMode === AppMode.Run}

apps/client/src/features/modals/sheets-modal/SheetsModal.tsx

@@ -0,0 +1,86 @@
+import { ChangeEvent, useRef, useState } from 'react';
+import {
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react';
+
+interface SheetsModalProps {
+  onClose: () => void;
+  isOpen: boolean;
+}
+
+export default function SheetsModal(props: SheetsModalProps) {
+  const { isOpen, onClose } = props;
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  const handleClose = () => onClose();
+  const handleClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFile = (event: ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = event?.target?.files?.[0];
+    if (!selectedFile) {
+      setFile(null);
+      return;
+    }
+    setFile(selectedFile);
+  };
+
+  const handleAuthenticate = () => {}
+  const handlePullData = () => {}
+
+  return (
+    <Modal
+      onClose={handleClose}
+      isOpen={isOpen}
+      closeOnOverlayClick={false}
+      motionPreset='slideInBottom'
+      size='xl'
+      scrollBehavior='inside'
+      preserveScrollBarGap
+      variant='ontime-upload'
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Sheets!</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Input
+            ref={fileInputRef}
+            style={{ display: 'none' }}
+            type='file'
+            onChange={handleFile}
+            accept='.json'
+            data-testid='file-input'
+          />
+          <div>Need to add some help here</div>
+          <div>
+            <Button onClick={handleClick}>Upload Token</Button>
+          </div>
+          {file && <div>We got a file</div>}
+          <div>You are authenticated</div>
+          <div>
+            <Button variant='ontime-filled' padding='0 2em' onClick={handlePullData}>
+              Pull data
+            </Button>
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button variant='ontime-ghost-on-light'>Reset</Button>
+          <Button variant='ontime-filled' padding='0 2em' onClick={handleAuthenticate}>
+            Authenticate
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}