v2 cleanup (#427)

* refactor: remove useless template

* refactor: handle promise

* refactor: associate labels to fields

* refactor: simplify checking if element exists

* refactor: prevent reassigning

* refactor: avoid wildcard imports

* refactor: simplify imports

* refactor: simplify boolean comparison

* chore: version bump

apps/client/src/common/components/buttons/TooltipActionBtn.tsx

@@ -2,7 +2,7 @@ import { MouseEvent } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@chakra-ui/react';
 
 interface TooltipActionBtnProps extends IconButtonProps {
-  clickHandler: (event?: MouseEvent) => void;
+  clickHandler: (event?: MouseEvent) => void | Promise<void>;
   tooltip: string;
   openDelay?: number;
 }

apps/client/src/common/components/edit-form-drawer/EditFormInput.tsx

@@ -1,7 +1,7 @@
 import { useSearchParams } from 'react-router-dom';
 import { Input, Select, Switch } from '@chakra-ui/react';
 
-import { isStringBoolean } from '../../../common/utils/viewUtils';
+import { isStringBoolean } from '../../utils/viewUtils';
 
 import { ParamField } from './types';
 

apps/client/src/common/components/error-boundary/ErrorBoundary.jsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/destructuring-assignment */
 import React from 'react';
+// skipcq: JS-C1003 - sentry does not expose itself as an ES Module.
 import * as Sentry from '@sentry/react';
 
 import style from './ErrorBoundary.module.scss';

apps/client/src/common/components/input/time-input/TimeInput.tsx

@@ -11,6 +11,7 @@ import { TimeEntryField } from '../../../utils/timesManager';
 import style from './TimeInput.module.scss';
 
 interface TimeInputProps {
+  id?: TimeEntryField;
   name: TimeEntryField;
   submitHandler: (field: TimeEntryField, value: number) => void;
   time?: number;
@@ -36,7 +37,7 @@ function ButtonTooltip(name: TimeEntryField, warning?: string) {
 }
 
 export default function TimeInput(props: TimeInputProps) {
-  const { name, submitHandler, time = 0, delay = 0, placeholder, validationHandler, previousEnd = 0, warning } = props;
+  const { id, name, submitHandler, time = 0, delay = 0, placeholder, validationHandler, previousEnd = 0, warning } = props;
   const { emitError } = useEmitLog();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [value, setValue] = useState<string>('');
@@ -189,6 +190,7 @@ export default function TimeInput(props: TimeInputProps) {
       </InputLeftElement>
       <Input
         ref={inputRef}
+        id={id}
         data-testid='time-input'
         className={style.inputField}
         type='text'

apps/client/src/common/hooks/useKeyDown.ts

@@ -8,7 +8,7 @@ export const useKeyDown: UseKeyDown = (callback, targetKey, options = {}) => {
   const onKeyDown = useCallback(
     (event: KeyboardEvent) => {
       const targetKeyPressed = event.key === targetKey && !event.repeat;
-      if (targetKeyPressed && isDisabled === false) {
+      if (targetKeyPressed && !isDisabled) {
         event.preventDefault();
         callback();
       }

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

@@ -9,11 +9,11 @@ import UploadModal from '../modals/upload-modal/UploadModal';
 
 import styles from './Editor.module.scss';
 
-const Rundown = lazy(() => import('../../features/rundown/RundownExport'));
-const TimerControl = lazy(() => import('../../features/control/playback/TimerControlExport'));
-const MessageControl = lazy(() => import('../../features/control/message/MessageControlExport'));
-const Info = lazy(() => import('../../features/info/InfoExport'));
-const EventEditor = lazy(() => import('../../features/event-editor/EventEditorExport'));
+const Rundown = lazy(() => import('../rundown/RundownExport'));
+const TimerControl = lazy(() => import('../control/playback/TimerControlExport'));
+const MessageControl = lazy(() => import('../control/message/MessageControlExport'));
+const Info = lazy(() => import('../info/InfoExport'));
+const EventEditor = lazy(() => import('../event-editor/EventEditorExport'));
 
 const IntegrationModal = lazy(() => import('../modals/integration-modal/IntegrationModal'));
 const SettingsModal = lazy(() => import('../modals/settings-modal/SettingsModal'));

apps/client/src/features/event-editor/composite/CountedTextArea.tsx

@@ -24,10 +24,11 @@ export default function CountedTextArea(props: CountedTextAreaProps) {
   return (
     <div className={`${style.column} ${style.fullHeight}`}>
       <div className={style.countedInput}>
-        <label className={style.inputLabel}>{label}</label>
+        <label className={style.inputLabel} htmlFor={field}>{label}</label>
         <span className={style.charCount}>{`${value.length} characters`}</span>
       </div>
       <Textarea
+        id={field}
         size='sm'
         resize='none'
         variant='ontime-filled'

apps/client/src/features/event-editor/composite/CountedTextInput.tsx

@@ -26,10 +26,11 @@ export default function CountedTextInput(props: CountedTextInputProps) {
   return (
     <div className={style.column}>
       <div className={style.countedInput}>
-        <label className={style.inputLabel}>{label}</label>
+        <label className={style.inputLabel} htmlFor={field}>{label}</label>
         <span className={style.charCount}>{`${value.length} characters`}</span>
       </div>
       <Input
+        id={field}
         size='sm'
         variant='ontime-filled'
         data-testid='input-textfield'

apps/client/src/features/event-editor/composite/EventEditorTimes.tsx

@@ -80,8 +80,11 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
   return (
     <div className={style.timeOptions}>
       <div className={style.timers}>
-        <label className={inputTimeLabels}>{startLabel}</label>
+        <label className={inputTimeLabels} htmlFor='timeStart'>
+          {startLabel}
+        </label>
         <TimeInput
+          id='timeStart'
           name='timeStart'
           submitHandler={handleSubmit}
           validationHandler={timerValidationHandler}
@@ -90,8 +93,11 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
           placeholder='Start'
           warning={warning.start}
         />
-        <label className={inputTimeLabels}>{endLabel}</label>
+        <label className={inputTimeLabels} htmlFor='timeEnd'>
+          {endLabel}
+        </label>
         <TimeInput
+          id='timeEnd'
           name='timeEnd'
           submitHandler={handleSubmit}
           validationHandler={timerValidationHandler}
@@ -100,8 +106,11 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
           placeholder='End'
           warning={warning.end}
         />
-        <label className={style.inputLabel}>Duration</label>
+        <label className={style.inputLabel} htmlFor='durationOverride'>
+          Duration
+        </label>
         <TimeInput
+          id='durationOverride'
           name='durationOverride'
           submitHandler={handleSubmit}
           validationHandler={timerValidationHandler}

apps/client/src/features/rundown/RundownWrapper.tsx

@@ -1,6 +1,6 @@
 import Empty from '../../common/components/state/Empty';
 import useRundown from '../../common/hooks-query/useRundown';
-import RundownMenu from '../../features/menu/RundownMenu';
+import RundownMenu from '../menu/RundownMenu';
 
 import Rundown from './Rundown';
 

apps/client/src/index.tsx

@@ -1,5 +1,6 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+// skipcq: JS-C1003 - sentry does not expose itself as an ES Module.
 import * as Sentry from '@sentry/react';
 import { BrowserTracing } from '@sentry/tracing';
 

apps/client/src/theme/ontimeSwitch.ts

@@ -3,7 +3,7 @@ export const ontimeSwitch = {
     background: '#2d2d2d', // $gray-1100
     border: '1px solid transparent',
     _checked: {
-      background: `#2B5ABC`, // $blue-700
+      background: '#2B5ABC', // $blue-700
     },
     _focus: {
       border: '1px solid #578AF4', // $blue-500
@@ -16,7 +16,7 @@ export const lightSwitch = {
     border: '1px solid transparent',
     background: '#cfcfcf', // $gray-300
     _checked: {
-      background: `#578AF4`, // $blue-500
+      background: '#578AF4', // $blue-500
     },
     _focus: {
       border: '1px solid #D2DDFF', // $blue-200