Chore/ts (#199)

* chore: add typescript and dependencies
* refactor: remove react imports
* refactor: fix entrypoint
* chore: upgrade chakra and deps
* chore: configure eslint

client/src/features/FeatureWrapper.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 import ProtectRoute from '../common/components/protectRoute/ProtectRoute';

client/src/features/control/__tests__/MessageControl.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { render, screen } from '@testing-library/react';
 import SocketProvider from 'common/context/socketContext';

client/src/features/control/__tests__/PlaybackControl.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { render, screen } from '@testing-library/react';
 import SocketProvider from 'common/context/socketContext';

client/src/features/control/message/InputRow.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
 import { Tooltip } from '@chakra-ui/tooltip';

client/src/features/control/message/MessageControl.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { Tooltip } from '@chakra-ui/tooltip';
 import { IoMicOffOutline } from '@react-icons/all-files/io5/IoMicOffOutline';

client/src/features/control/message/MessageControlExport.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box } from '@chakra-ui/layout';
 import { FiArrowUpRight } from '@react-icons/all-files/fi/FiArrowUpRight';
 

client/src/features/control/playback/Playback.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 import PauseIconBtn from '../../../common/components/buttons/PauseIconBtn';

client/src/features/control/playback/PlaybackButtons.jsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import PropTypes from 'prop-types';
 
 import Playback from './Playback';

client/src/features/control/playback/PlaybackControl.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { usePlaybackControlProvider } from '../../../common/hooks/useSocketProvider';
 
 import PlaybackButtons from './PlaybackButtons';

client/src/features/control/playback/PlaybackTimer.jsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { Button } from '@chakra-ui/button';
 import { Tooltip } from '@chakra-ui/react';
 import TimerDisplay from 'common/components/countdown/TimerDisplay';

client/src/features/control/playback/TimerControlExport.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box } from '@chakra-ui/layout';
 import { FiArrowUpRight } from '@react-icons/all-files/fi/FiArrowUpRight';
 

client/src/features/control/playback/Transport.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { IoArrowUndo } from '@react-icons/all-files/io5/IoArrowUndo';
 import { IoPlaySkipBack } from '@react-icons/all-files/io5/IoPlaySkipBack';
 import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward';

client/src/features/editors/BlockBlock/BlockBlock.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import { HStack } from '@chakra-ui/react';
 import { FiMoreVertical } from '@react-icons/all-files/fi/FiMoreVertical';

client/src/features/editors/DelayBlock/DelayBlock.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import { HStack } from '@chakra-ui/react';
 import { FiCheck } from '@react-icons/all-files/fi/FiCheck';

client/src/features/editors/Editor.jsx

@@ -1,4 +1,4 @@
-import React, { lazy } from 'react';
+import { lazy } from 'react';
 import { useDisclosure } from '@chakra-ui/hooks';
 import { Box } from '@chakra-ui/layout';
 import ErrorBoundary from 'common/components/errorBoundary/ErrorBoundary';

client/src/features/editors/EntryBlock/EntryBlock.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Checkbox } from '@chakra-ui/react';
 import { Tooltip } from '@chakra-ui/tooltip';
 import { useAtomValue } from 'jotai';

client/src/features/editors/EventBlock/CollapsedBlock.jsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { HStack } from '@chakra-ui/react';
 import { FiMoreVertical } from '@react-icons/all-files/fi/FiMoreVertical';
 import PropTypes from 'prop-types';

client/src/features/editors/EventBlock/EventBlock.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import Icon from '@chakra-ui/icon';
 import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';

client/src/features/editors/EventBlock/ExpandedBlock.jsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { VStack } from '@chakra-ui/react';
 import { FiMoreVertical } from '@react-icons/all-files/fi/FiMoreVertical';
 import { IoRemove } from '@react-icons/all-files/io5/IoRemove';

client/src/features/editors/ProtectedEditor.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import ProtectRoute from '../../common/components/protectRoute/ProtectRoute';
 
 import Editor from './Editor';

client/src/features/editors/list/EventList.jsx

@@ -1,4 +1,4 @@
-import React, { createRef, useCallback, useContext, useEffect } from 'react';
+import { createRef, useCallback, useContext, useEffect } from 'react';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import Empty from 'common/components/state/Empty';
 import { useAtomValue } from 'jotai';

client/src/features/editors/list/EventListExport.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box } from '@chakra-ui/layout';
 import { FiArrowUpRight } from '@react-icons/all-files/fi/FiArrowUpRight';
 

client/src/features/editors/list/EventListItem.jsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useContext } from 'react';
+import { memo, useCallback, useContext } from 'react';
 import { useAtomValue } from 'jotai';
 import PropTypes from 'prop-types';
 

client/src/features/editors/list/EventListWrapper.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { EVENTS_TABLE } from 'common/api/apiConstants';
 import {

client/src/features/info/Info.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useInfoProvider } from '../../common/hooks/useSocketProvider';
 
 import InfoLogger from './InfoLogger';

client/src/features/info/InfoExport.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box } from '@chakra-ui/layout';
 import { FiArrowUpRight } from '@react-icons/all-files/fi/FiArrowUpRight';
 

client/src/features/info/InfoLogger.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 
 import CollapseBar from '../../common/components/collapseBar/CollapseBar';
 import { LoggingContext } from '../../common/context/LoggingContext';

client/src/features/info/InfoNif.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { APP_TABLE } from 'common/api/apiConstants';
 import { getInfo, ontimePlaceholderInfo } from 'common/api/ontimeApi';
 import { useFetch } from 'common/hooks/useFetch';

client/src/features/info/InfoTitle.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 
 import CollapseBar from '../../common/components/collapseBar/CollapseBar';

client/src/features/info/__tests__/Info.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { render, screen } from '@testing-library/react';
 import SocketProvider from 'common/context/socketContext';

client/src/features/menu/EventListMenu.jsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useContext } from 'react';
+import { memo, useCallback, useContext } from 'react';
 import { ButtonGroup, HStack } from '@chakra-ui/react';
 import { FiChevronsDown } from '@react-icons/all-files/fi/FiChevronsDown';
 import { FiChevronsUp } from '@react-icons/all-files/fi/FiChevronsUp';

client/src/features/menu/MenuActionButtons.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { Divider } from '@chakra-ui/layout';
 import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';

client/src/features/menu/MenuBar.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import { useCallback, useContext, useEffect, useRef } from 'react';
 import { VStack } from '@chakra-ui/react';
 import { FiDownload } from '@react-icons/all-files/fi/FiDownload';
 import { FiHelpCircle } from '@react-icons/all-files/fi/FiHelpCircle';

client/src/features/menu/__tests__/EventListMenu.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { render, screen } from '@testing-library/react';
 

client/src/features/menu/__tests__/MenuActionButtons.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import MenuActionButtons from "../MenuActionButtons";

client/src/features/menu/__tests__/MenuBar.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { render, screen } from '@testing-library/react';
 

client/src/features/modals/AliasesModal.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/anchor-has-content */
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { Button, IconButton } from '@chakra-ui/button';
 import { ModalBody } from '@chakra-ui/modal';
 import { Input } from '@chakra-ui/react';

client/src/features/modals/AppSettingsModal.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { ModalBody } from '@chakra-ui/modal';
 import {
@@ -26,6 +26,7 @@ import SubmitContainer from './SubmitContainer';
 
 import style from './Modals.module.scss';
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const version = require('../../../package.json').version;
 
 export default function AppSettingsModal() {

client/src/features/modals/EventSettingsModal.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { ModalBody } from '@chakra-ui/modal';
 import { FormLabel, Input, Textarea } from '@chakra-ui/react';
 import { EVENT_TABLE } from 'common/api/apiConstants';

client/src/features/modals/IntegrationSettingsModal.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { ModalBody } from '@chakra-ui/modal';
 import { FormControl, FormLabel, Input, Switch } from '@chakra-ui/react';
 import { FiInfo } from '@react-icons/all-files/fi/FiInfo';

client/src/features/modals/ModalManager.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   Modal,
   ModalCloseButton,

client/src/features/modals/OscSettingsModal.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { ModalBody } from '@chakra-ui/modal';
 import { FormControl, FormLabel, Input } from '@chakra-ui/react';
 import { IoInformationCircleOutline } from '@react-icons/all-files/io5/IoInformationCircleOutline';

client/src/features/modals/SubmitContainer.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button } from '@chakra-ui/button';
 import PropTypes from 'prop-types';
 

client/src/features/modals/TableOptionsModal.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { ModalBody } from '@chakra-ui/modal';
 import { Input } from '@chakra-ui/react';
 import { IoInformationCircleOutline } from '@react-icons/all-files/io5/IoInformationCircleOutline';

client/src/features/table/OntimeTable.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useMemo } from 'react';
+import { useCallback, useContext, useEffect, useMemo } from 'react';
 import { useBlockLayout, useColumnOrder, useResizeColumns, useTable } from 'react-table';
 import { Tooltip } from '@chakra-ui/tooltip';
 import {

client/src/features/table/ProtectedTable.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import ProtectRoute from '../../common/components/protectRoute/ProtectRoute';
 import { TableSettingsProvider } from '../../common/context/TableSettingsContext';
 

client/src/features/table/TableHeader.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { Divider } from '@chakra-ui/layout';
 import { Tooltip } from '@chakra-ui/tooltip';
 import { FiSettings } from '@react-icons/all-files/fi/FiSettings';

client/src/features/table/TableWrapper.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext,useEffect } from 'react';
+import { useCallback, useContext,useEffect } from 'react';
 
 import { EVENTS_TABLE, USERFIELDS } from '../../common/api/apiConstants';
 import { fetchAllEvents, requestPatch } from '../../common/api/eventsApi';

client/src/features/table/columns.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
 
 import { stringFromMillis } from '../../common/utils/time.js';

client/src/features/table/tableElements/EditableCell.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { AutoTextArea } from '../../../common/components/input/AutoTextArea';

client/src/features/table/tableElements/PlaybackIcon.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Tooltip } from '@chakra-ui/tooltip';
 import { IoPause } from '@react-icons/all-files/io5/IoPause';
 import { IoPlay } from '@react-icons/all-files/io5/IoPlay';

client/src/features/table/tableElements/SortableCell.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Tooltip } from '@chakra-ui/tooltip';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';

client/src/features/table/tableElements/TableSettings.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button } from '@chakra-ui/button';
 import PropTypes from 'prop-types';
 

client/src/features/table/tableRows/BlockRow.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 import style from '../Table.module.scss';

client/src/features/table/tableRows/DelayRow.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 import { millisToMinutes } from '../../../common/utils/dateConfig';

client/src/features/table/tableRows/EventRow.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Color from 'color';
 import PropTypes from 'prop-types';
 

client/src/features/viewers/ViewWrapper.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/display-name */
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { EVENT_TABLE, EVENTS_TABLE } from '../../common/api/apiConstants';
 import { fetchEvent } from '../../common/api/eventApi';

client/src/features/viewers/backstage/StageManager.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import QRCode from 'react-qr-code';
 import NavLogo from 'common/components/nav/NavLogo';
 import Paginator from 'common/components/views/Paginator';

client/src/features/viewers/countdown/Countdown.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 import PropTypes from 'prop-types';
 

client/src/features/viewers/foh/Public.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import QRCode from 'react-qr-code';
 import NavLogo from 'common/components/nav/NavLogo';
 import Paginator from 'common/components/views/Paginator';

client/src/features/viewers/production/Pip.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import QRCode from 'react-qr-code';
 import { ReactComponent as Emptyimage } from 'assets/images/empty.svg';
 import NavLogo from 'common/components/nav/NavLogo';

client/src/features/viewers/production/lower/LowerClean.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 
 import NavLogo from "../../../../common/components/nav/NavLogo";

client/src/features/viewers/production/lower/LowerLines.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 
 import NavLogo from "../../../../common/components/nav/NavLogo";

client/src/features/viewers/production/lower/LowerWrapper.jsx

@@ -1,9 +1,9 @@
-import React, { memo, useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
+import isEqual from "react-fast-compare";
 import { useSearchParams } from 'react-router-dom';
 
 import LowerClean from './LowerClean';
 import LowerLines from './LowerLines';
-const isEqual = require('react-fast-compare');
 
 const areEqual = (prevProps, nextProps) => {
   return (

client/src/features/viewers/studio/StudioClock.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import useFitText from 'use-fit-text';
 

client/src/features/viewers/timer/MinimalTimer.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useSearchParams } from 'react-router-dom';
 import PropTypes from 'prop-types';
 

client/src/features/viewers/timer/Timer.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import TimerDisplay from 'common/components/countdown/TimerDisplay';
 import MyProgressBar from 'common/components/myProgressBar/MyProgressBar';