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/features/cuesheet/tableElements/EditableCell.tsx

@@ -0,0 +1,40 @@
+import { ChangeEvent, memo, useCallback, useEffect, useState } from 'react';
+
+import { AutoTextArea } from '../../../common/components/input/auto-text-area/AutoTextArea';
+
+interface EditableCellProps {
+  value: string;
+  handleUpdate: (newValue: string) => void;
+}
+
+const EditableCell = (props: EditableCellProps) => {
+  const { value: initialValue, handleUpdate } = props;
+
+  // We need to keep and update the state of the cell normally
+  const [value, setValue] = useState(initialValue);
+
+  const onChange = useCallback((event: ChangeEvent<HTMLTextAreaElement>) => setValue(event.target.value), []);
+
+  // We'll only update the external data when the input is blurred
+  const onBlur = useCallback(() => handleUpdate(value), [handleUpdate, value]);
+
+  // If the initialValue is changed external, sync it up with our state
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  return (
+    <AutoTextArea
+      size='sm'
+      value={value}
+      onChange={onChange}
+      onBlur={onBlur}
+      rows={1}
+      transition='none'
+      spellCheck={false}
+      style={{ padding: 0 }}
+    />
+  );
+};
+
+export default memo(EditableCell);

apps/client/src/features/cuesheet/tableElements/PlaybackIcon.tsx

@@ -0,0 +1,36 @@
+import { Tooltip } from '@chakra-ui/react';
+import { IoPause } from '@react-icons/all-files/io5/IoPause';
+import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
+import { IoStop } from '@react-icons/all-files/io5/IoStop';
+import { Playback } from 'ontime-types';
+
+import { tooltipDelayFast } from '../../../ontimeConfig';
+
+interface PlaybackIconProps {
+  state: Playback;
+}
+
+export default function PlaybackIcon(props: PlaybackIconProps) {
+  const { state } = props;
+
+  // if timer is Pause or Armed
+  let label = 'Timer Paused';
+  let Icon = IoPause;
+
+  if (state === Playback.Roll) {
+    label = 'Timer Rolling';
+    Icon = IoPlay;
+  } else if (state === Playback.Play) {
+    label = 'Timer Playing';
+    Icon = IoPlay;
+  } else if (state === Playback.Stop) {
+    label = 'Timer Stopped';
+    Icon = IoStop;
+  }
+
+  return (
+    <Tooltip openDelay={tooltipDelayFast} label={label} shouldWrapChildren>
+      <Icon />
+    </Tooltip>
+  );
+}

apps/client/src/features/cuesheet/tableElements/SortableCell.tsx

@@ -0,0 +1,48 @@
+import { CSSProperties, ReactNode } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Header } from '@tanstack/react-table';
+import { OntimeRundownEntry } from 'ontime-types';
+
+import { cx } from '../../../common/utils/styleUtils';
+
+import styles from '../Cuesheet.module.scss';
+
+interface SortableCellProps {
+  header: Header<OntimeRundownEntry, unknown>;
+  style: CSSProperties;
+  children: ReactNode;
+}
+
+export function SortableCell({ header, style, children }: SortableCellProps) {
+  const { column, colSpan } = header;
+
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: column.id,
+  });
+
+  // build drag styles
+  const dragStyle = {
+    ...style,
+    opacity: isDragging ? 0.5 : 1,
+    transform: CSS.Translate.toString(transform),
+    transition,
+  };
+
+  const resizerClasses = cx([styles.resizer, header.column.getIsResizing() ? styles.isResizing : null]);
+
+  return (
+    <th ref={setNodeRef} style={dragStyle} colSpan={colSpan}>
+      <div {...attributes} {...listeners}>
+        {children}
+      </div>
+      <div
+        {...{
+          onMouseDown: header.getResizeHandler(),
+          onTouchStart: header.getResizeHandler(),
+        }}
+        className={resizerClasses}
+      />
+    </th>
+  );
+}