Refactor/vite (#209)

* refactor(vite): add dependencies
* refactor(vite): necessary code migrations
* refactor(vite): convert file to tsx
* refactor(vite): config
* refactor(vite): doctype casing

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

@@ -3,17 +3,25 @@ import { IconButton } from '@chakra-ui/button';
 import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
 import { Tooltip } from '@chakra-ui/tooltip';
 import { IoSunny } from '@react-icons/all-files/io5/IoSunny';
-import PropTypes from 'prop-types';
 
 import { tooltipDelayMid } from '../../../ontimeConfig';
 
 import style from './MessageControl.module.scss';
 
-export default function InputRow(props) {
-  const { label, placeholder, text, visible, actionHandler, changeHandler } = props;
-  const [inputText, setInputText] = useState(text || '');
+interface InputRowProps {
+  label: string;
+  placeholder: string;
+  text: string;
+  visible: boolean;
+  actionHandler: (action: string, payload: object) => void;
+  changeHandler: (newValue: string) => void;
+}
 
-  const handleInputChange = (newValue) => {
+export default function InputRow(props: InputRowProps) {
+  const { label, placeholder, text, visible, actionHandler, changeHandler } = props;
+  const [inputText, setInputText] = useState<string>(text || '');
+
+  const handleInputChange = (newValue: string) => {
     setInputText(newValue);
     changeHandler(newValue);
   };
@@ -26,7 +34,7 @@ export default function InputRow(props) {
 
 
   return (
-    <div className={`${visible ? style.inputRowActive: ''}`}>
+    <div className={`${visible ? style.inputRowActive : ''}`}>
       <span className={style.label}>{label}</span>
       <div className={style.inputItems}>
         <Editable
@@ -53,12 +61,3 @@ export default function InputRow(props) {
     </div>
   );
 }
-
-InputRow.propTypes = {
-  label: PropTypes.string,
-  placeholder: PropTypes.string,
-  text: PropTypes.string,
-  visible: PropTypes.bool,
-  actionHandler: PropTypes.func.isRequired,
-  changeHandler: PropTypes.func.isRequired,
-};

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

@@ -1,24 +0,0 @@
-import { QueryClientProvider } from '@tanstack/react-query';
-import { render, screen } from '@testing-library/react';
-
-import { queryClientMock } from '../../../__mocks__/QueryClient.mock';
-import MenuBar from '../MenuBar';
-
-const onOpenHandler = jest.fn();
-const onCloseHandler = jest.fn();
-
-const renderInMock = () => {
-  render(
-    <QueryClientProvider client={queryClientMock}>
-      <MenuBar onOpen={onOpenHandler} onClose={onCloseHandler} />
-    </QueryClientProvider>
-  );
-};
-
-test('check that menu bar renders correctly', () => {
-  // need to inject the react query provider
-  renderInMock();
-
-  const nButtons = screen.getAllByRole('button').length;
-  expect(nButtons).toBe(7);
-});

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

@@ -1,10 +1,11 @@
 import { render, screen } from '@testing-library/react';
+import { vi } from 'vitest';
 
-import MenuActionButtons from "../MenuActionButtons";
+import MenuActionButtons from '../MenuActionButtons';
 
-const actionHandler = jest.fn();
+const actionHandler = vi.fn();
 const renderInMock = () => {
-  render(<MenuActionButtons actionHandler={actionHandler} />)
+  render(<MenuActionButtons actionHandler={actionHandler} />);
 };
 
 test('check that menu bar renders correctly', () => {
@@ -12,8 +13,8 @@ test('check that menu bar renders correctly', () => {
   renderInMock();
 
   const b = screen.getByRole('button', {
-    name: /create menu/i
-  })
+    name: /create menu/i,
+  });
 
   expect(b).toBeInTheDocument();
-});
+});

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

@@ -1,19 +1,22 @@
 import { QueryClientProvider } from '@tanstack/react-query';
 import { render, screen } from '@testing-library/react';
+import { vi } from 'vitest';
 
 import { queryClientMock } from '../../../__mocks__/QueryClient.mock';
 import MenuBar from '../MenuBar';
 
-const onOpenHandler = jest.fn();
-const onCloseHandler = jest.fn();
+const onOpenHandler = vi.fn();
+const onCloseHandler = vi.fn();
 const isOpen = false;
-const onUploadOpenHandler = jest.fn();
+const onUploadOpenHandler = vi.fn();
 
 const renderInMock = () => {
   render(
     <QueryClientProvider client={queryClientMock}>
-      <MenuBar onOpen={onOpenHandler} onClose={onCloseHandler} isOpen={isOpen} onUploadOpen={onUploadOpenHandler} />
-    </QueryClientProvider>
+      <MenuBar isSettingsOpen={isOpen} onSettingsOpen={onOpenHandler}
+               onSettingsClose={onCloseHandler} isUploadOpen={isOpen}
+               onUploadOpen={onUploadOpenHandler} />
+    </QueryClientProvider>,
   );
 };
 

client/src/features/modals/AppSettingsModal.jsx

@@ -17,6 +17,7 @@ import { getSettings, ontimePlaceholderSettings, postSettings } from 'common/api
 import { useFetch } from 'common/hooks/useFetch';
 import { useAtom } from 'jotai';
 
+import { version } from '../../../package.json';
 import { eventSettingsAtom } from '../../common/atoms/LocalEventSettings';
 import TooltipActionBtn from '../../common/components/buttons/TooltipActionBtn';
 import { LoggingContext } from '../../common/context/LoggingContext';
@@ -26,9 +27,6 @@ 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() {
   const { data, status, refetch } = useFetch(APP_SETTINGS, getSettings);
   const { emitError, emitWarning } = useContext(LoggingContext);

client/src/features/table/__tests__/__snapshots__/utils.test.js.snap

@@ -1,4 +1,52 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1
+
+exports[`makeTable() > returns array of arrays with given fields 1`] = `
+[
+  [
+    "Ontime · Schedule Template",
+  ],
+  [
+    "Event Name",
+    "",
+  ],
+  [
+    "Event URL",
+    "",
+  ],
+  [],
+  [
+    "Time Start",
+    "Time End",
+    "Event Title",
+    "Presenter Name",
+    "Event Subtitle",
+    "Is Public? (x)",
+    "Notes",
+    "Colour",
+    "user0:test",
+  ],
+  [
+    "00:00:00",
+    "00:00:00",
+    "test title 1",
+    "",
+    "",
+    "x",
+    "",
+    "",
+    "test",
+    "test",
+    "",
+    "",
+    "",
+    "",
+    "",
+    "",
+    "",
+    "",
+  ],
+]
+`;
 
 exports[`makeTable() returns array of arrays with given fields 1`] = `
 Array [

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

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import useFitText from 'use-fit-text';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import NavLogo from '../../../common/components/nav/NavLogo';
+import useFitText from '../../../common/hooks/useFitText';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
 import { formatDisplay } from '../../../common/utils/dateConfig';
 import {