refactor: cuesheet v2 (#435)

* refactor: typescript migration

* chore: remove prop-types package

* refactor: file structure

* refactor: migrate ontime table to tanstack table 8

* refactor: rundown controller uses service as data source

* refactor: convert to typescript

* feat: caching store

* refactor: add delay values to rundown

* feat: toggle past visibility

* chore: update tests

* refactor: add extra fields to CSV

* style: show skipped events

* chore: add route to navigation menu

* style: allow jumping to bottom

* chore: add tests

apps/client/src/common/components/input/auto-text-area/AutoTextArea.tsx

@@ -3,12 +3,7 @@ import { Textarea, TextareaProps } from '@chakra-ui/react';
 // @ts-expect-error no types from library
 import autosize from 'autosize/dist/autosize';
 
-interface AutoTextAreaProps extends TextareaProps {
-  isDark?: boolean;
-}
-
-export const AutoTextArea = (props: AutoTextAreaProps) => {
-  const { isDark, ...rest } = props;
+export const AutoTextArea = (props: TextareaProps) => {
   const ref = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
@@ -26,8 +21,8 @@ export const AutoTextArea = (props: AutoTextAreaProps) => {
       resize='none'
       ref={ref}
       transition='height none'
-      variant={isDark ? 'ontime-filled' : 'ontime-filled-on-light'}
-      {...rest}
+      variant='ontime-transparent'
+      {...props}
     />
   );
 };

apps/client/src/common/components/navigation-menu/NavigationMenu.tsx

@@ -112,6 +112,11 @@ function NavigationMenu() {
               </div>
             </div>
             <hr className={style.separator} />
+            <Link to='/cuesheet' className={style.link} tabIndex={0}>
+              Cuesheet
+              <IoArrowUp className={style.linkIcon} />
+            </Link>
+            <hr className={style.separator} />
             {navigatorConstants.map((route) => (
               <Link
                 key={route.url}

apps/client/src/common/context/TableSettingsContext.jsx

@@ -1,79 +0,0 @@
-import { createContext, useCallback, useState } from 'react';
-
-import { useLocalStorage } from '../hooks/useLocalStorage';
-
-export const TableSettingsContext = createContext({
-  theme: '',
-  showSettings: false,
-  followSelected: false,
-
-  toggleSettings: () => undefined,
-  toggleTheme: () => undefined,
-  toggleFollow: () => undefined,
-});
-
-export const TableSettingsProvider = ({ children }) => {
-  const [theme, setTheme] = useLocalStorage('table-color-theme', 'dark');
-  const [followSelected, setFollowSelected] = useLocalStorage('table-follow-selected', false);
-  const [showSettings, setShowSettings] = useState(false);
-
-  /**
-   * @description Toggles the current value of dark mode
-   * @param {string} val - 'light' or 'dark'
-   */
-  const toggleTheme = useCallback(
-    (val) => {
-      if (val === undefined) {
-        setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
-      } else {
-        setTheme(val);
-      }
-    },
-    [setTheme]
-  );
-
-  /**
-   * @description Toggles visibility state for settings
-   * @param {boolean} val - whether the settings window is visible
-   */
-  const toggleSettings = useCallback(
-    (val) => {
-      if (val === undefined) {
-        setShowSettings((prev) => !prev);
-      } else {
-        setShowSettings(val);
-      }
-    },
-    [setShowSettings]
-  );
-
-  /**
-   * @description Toggles follow option
-   * @param {boolean} val - whether the window follows selected event
-   */
-  const toggleFollow = useCallback(
-    (val) => {
-      if (val === undefined) {
-        setFollowSelected((prev) => !prev);
-      } else {
-        setFollowSelected(val);
-      }
-    },
-    [setFollowSelected]
-  );
-
-  return (
-    <TableSettingsContext.Provider
-      value={{
-        theme,
-        showSettings,
-        followSelected,
-        toggleSettings,
-        toggleTheme,
-        toggleFollow,
-      }}
-    >
-      {children}
-    </TableSettingsContext.Provider>
-  );
-};

apps/client/src/common/stores/logger.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { Log, LogLevel } from 'ontime-types';
+import { Log, LogLevel, LogOrigin } from 'ontime-types';
 import { generateId, millisToString } from 'ontime-utils';
 import { useStore } from 'zustand';
 import { createStore } from 'zustand/vanilla';
@@ -34,7 +34,7 @@ export function useEmitLog() {
   const _emit = useCallback((text: string, level: LogLevel) => {
     const log = {
       id: generateId(),
-      origin: 'CLIENT',
+      origin: LogOrigin.Client,
       time: millisToString(nowInMillis()),
       level,
       text,

apps/client/src/common/utils/__tests__/dateConfig.test.js

@@ -1,4 +1,21 @@
-import { forgivingStringToMillis, millisToDelayString, millisToMinutes, millisToSeconds } from '../dateConfig';
+import {
+  forgivingStringToMillis,
+  millisToDelayString,
+  millisToMinutes,
+  millisToSeconds,
+  secondsInMillis,
+} from '../dateConfig';
+
+describe('test secondsInMillis function', () => {
+  it('return 0 if value is null', () => {
+    expect(secondsInMillis(null)).toBe(0);
+  });
+  it('returns the seconds value of a millis date', () => {
+    const date = 1686255053619; // Thu Jun 08 2023 20:10:53
+    const seconds = secondsInMillis(date);
+    expect(seconds).toBe(53);
+  });
+});
 
 describe('test millisToSeconds function', () => {
   it('test with null values', () => {

apps/client/src/common/utils/dateConfig.ts

@@ -5,6 +5,13 @@ import { mth, mtm, mts } from './timeConstants';
 export const timeFormat = 'HH:mm';
 export const timeFormatSeconds = 'HH:mm:ss';
 
+export function secondsInMillis(millis: number | null) {
+  if (!millis) {
+    return 0;
+  }
+  return Math.floor((millis % mtm) / mts);
+}
+
 /**
  * @description Converts milliseconds to seconds
  * @param {number | null} millis - time in seconds

apps/client/src/common/utils/eventsManager.ts

@@ -41,7 +41,7 @@ export const getEventsWithDelay = (rundown: OntimeRundownEntry[]): OntimeEvent[]
  * @param {number} limit - max number of events to return
  * @returns {Object[]} Event list with maximum <limit> objects
  */
-export const trimRundown = (rundown: OntimeRundownEntry[], selectedId: string, limit: number) => {
+export const trimRundown = (rundown: OntimeEvent[], selectedId: string, limit: number): OntimeEvent[] => {
   if (rundown == null) return [];
 
   const BEFORE = 2;
@@ -78,7 +78,7 @@ export const formatEventList = (
   selectedId: string,
   nextId: string,
   options: FormatEventListOptionsProp,
-) => {
+): ScheduleEvent[] => {
   if (rundown == null) return [];
   const { showEnd = false } = options;
 
@@ -103,6 +103,15 @@ export const formatEventList = (
   return formattedEvents;
 };
 
+export type ScheduleEvent = {
+  id: string;
+  time: string;
+  title: string;
+  isNow: boolean;
+  isNext: boolean;
+  colour: string;
+};
+
 /**
  * @description Creates a safe duplicate of an event
  * @param {object} event