refactor: migrate UI components and remove chakra

migrate pin page migrate copy tag migrate pin input migrate dropdown menus migrate radio buttons migrate switch migrate select migrate textarea migrate colour picker migrate select migrate context menu migrate viewparams remove chakra
2026-08-12 10:53:51 +00:00 · 2025-07-08 20:50:49 +02:00
parent 4d359445a7
commit e1e8410ba4
100 changed files with 1222 additions and 1990 deletions
@@ -1,28 +0,0 @@
-import { RefObject, useEffect } from 'react';
-import { Textarea, TextareaProps } from '@chakra-ui/react';
-// @ts-expect-error no types from library
-import autosize from 'autosize/dist/autosize';
-
-export const AutoTextArea = (props: TextareaProps & { inputref: RefObject<unknown> }) => {
-  const { value, inputref } = props;
-
-  useEffect(() => {
-    const node = inputref.current;
-    autosize(inputref.current);
-    return () => {
-      autosize.destroy(node);
-    };
-  }, [inputref, value]);
-
-  return (
-    <Textarea
-      overflow='hidden'
-      w='100%'
-      ref={inputref}
-      resize='none'
-      transition='height none'
-      variant='ontime-transparent'
-      {...props}
-    />
-  );
-};
@@ -0,0 +1,26 @@
+import { RefObject, useEffect } from 'react';
+// @ts-expect-error no types from library
+import autosize from 'autosize/dist/autosize';
+
+import Textarea, { type TextareaProps } from '../textarea/Textarea';
+
+interface AutoTextAreaProps extends TextareaProps {
+  inputref: RefObject<HTMLTextAreaElement>;
+}
+
+/**
+ * A textarea that automatically resizes based on its content
+ */
+export function AutoTextarea({ value, inputref, ...textAreaProps }: AutoTextAreaProps) {
+  // when the value changes, we use the ref to reapply autosize
+  useEffect(() => {
+    const node = inputref.current;
+    autosize(inputref.current);
+
+    return () => {
+      autosize.destroy(node);
+    };
+  }, [inputref, value]);
+
+  return <Textarea ref={inputref} value={value} {...textAreaProps} />;
+}
@@ -1,9 +1,8 @@
-import { useCallback } from 'react';
 import { useController, UseControllerProps } from 'react-hook-form';
 import { IoEyedrop } from 'react-icons/io5';
+import { useDebouncedCallback } from '@mantine/hooks';
 import { ViewSettings } from 'ontime-types';

-import { debounce } from '../../../utils/debounce';
 import { cx, getAccessibleColour } from '../../../utils/styleUtils';
 import PopoverPicker from '../popover-picker/PopoverPicker';

@@ -19,12 +18,9 @@ interface SwatchPickerProps {
 export default function SwatchPicker(props: SwatchPickerProps) {
  const { color, onChange, isSelected, alwaysDisplayColor } = props;

-  const debouncedOnChange = useCallback(
-    debounce((newValue: string) => {
-      onChange(newValue);
-    }, 500),
-    [onChange],
-  );
+  const debouncedOnChange = useDebouncedCallback((newValue: string) => {
+    onChange(newValue);
+  }, 100);

  const displayColor = alwaysDisplayColor || isSelected ? color : '';
  const { color: iconColor } = getAccessibleColour(displayColor);
@@ -0,0 +1,62 @@
+.radioGroup {
+  color: $gray-900;
+  font-size: calc(1rem - 3px);
+  color: $label-gray;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  line-height: 1.2em;
+
+  &:has([data-checked]) {
+    color: $ui-white;
+  }
+}
+
+.radio {
+  box-sizing: border-box;
+  display: flex;
+  width: 0.75rem;
+  height: 0.75rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  outline: 0;
+  border: none;
+
+  &[data-unchecked] {
+    background-color: $gray-1200;
+  }
+
+  &[data-checked] {
+    background-color: $gray-1200;
+
+    &:hover {
+      border-color: $gray-1000;
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid $blue-500;
+    outline-offset: 2px;
+  }
+}
+
+.indicator {
+  display: grid;
+  place-content: center;
+
+  &[data-unchecked] {
+    display: none;
+  }
+
+  &::before {
+    content: '';
+    border-radius: 100%;
+    width: 0.5em;
+    height: 0.5em;
+    background-color: $blue-500;
+  }
+}
@@ -0,0 +1,35 @@
+import { Radio } from '@base-ui-components/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui-components/react/radio-group';
+
+import style from './BlockRadio.module.scss';
+
+interface BlockRadioProps<T extends string | number | boolean> extends Omit<BaseRadioGroup.Props, 'onValueChange'> {
+  items: {
+    value: T;
+    label: string;
+  }[];
+  onValueChange?: (value: T) => void;
+}
+
+export default function BlockRadio<T extends string | number | boolean>({
+  items,
+  onValueChange,
+  ...elementProps
+}: BlockRadioProps<T>) {
+  return (
+    <BaseRadioGroup
+      onValueChange={(value) => onValueChange?.(value as T)}
+      className={style.radioGroup}
+      {...elementProps}
+    >
+      {items.map((item) => (
+        <label className={style.item} key={item.value.toString()}>
+          <Radio.Root value={item.value.toString()} className={style.radio}>
+            <Radio.Indicator className={style.indicator} />
+          </Radio.Root>
+          {item.label}
+        </label>
+      ))}
+    </BaseRadioGroup>
+  );
+}
@@ -1,22 +1,12 @@
-$input-font-size: 15px;
-
 .delayInput {
  display: flex;
  gap: $element-spacing;
  align-items: center;
-  font-size: $text-body-size;
-
-
-  .inputField {
-    font-size: $input-font-size;
-    letter-spacing: 0.5px;
-    max-width: 7em;
-    padding-left: 16px;
-    color: $ontime-delay-text
-  }
 }

-.delayOptions {
-  display: flex;
-  flex-direction: column;
+.inputField {
+  text-align: center;
+  letter-spacing: 1px;
+  max-width: 7em;
+  color: $ontime-delay-text
 }
@@ -1,8 +1,10 @@
 import { KeyboardEvent, useEffect, useRef, useState } from 'react';
-import { Input, Radio, RadioGroup } from '@chakra-ui/react';
 import { millisToString, parseUserTime } from 'ontime-utils';

 import { useEntryActions } from '../../../hooks/useEntryAction';
+import Input from '../input/Input';
+
+import BlockRadio from './BlockRadio';

 import style from './DelayInput.module.scss';

@@ -105,13 +107,10 @@ export default function DelayInput(props: DelayInputProps) {
  return (
    <div className={style.delayInput}>
      <Input
-        size='sm'
        ref={inputRef}
        data-testid='delay-input'
        className={style.inputField}
-        type='text'
        placeholder='-'
-        variant='ontime-filled'
        onFocus={handleFocus}
        onChange={(event) => setValue(event.target.value)}
        onBlur={(event) => validateAndSubmit(event.target.value)}
@@ -119,16 +118,14 @@ export default function DelayInput(props: DelayInputProps) {
        value={value}
        maxLength={9}
      />
-      <RadioGroup
-        className={style.delayOptions}
-        onChange={handleSlipChange}
+      <BlockRadio
+        onValueChange={handleSlipChange}
        value={checkedOption}
-        variant='ontime-block'
-        size='sm'
-      >
-        <Radio value='add'>Add time</Radio>
-        <Radio value='subtract'>Subtract time</Radio>
-      </RadioGroup>
+        items={[
+          { value: 'add', label: 'Add time' },
+          { value: 'subtract', label: 'Subtract time' },
+        ]}
+      />
    </div>
  );
 }
@@ -1,20 +1,36 @@
+// styles from Input.module.scss
 .input {
-  color: $gray-200;
-  border: 1px solid transparent;
-  border-radius: 0 0 8px 8px;
-  background-color: $gray-1200;
-  padding: 0 0.5rem;
+  width: 100%;
+  margin-top: 0.25rem;
+  box-sizing: border-box;
+
  font-size: 1rem;
+  font-weight: 400;
+  color: $gray-200;
+  border-radius: $component-border-radius-md;
+  background-color: $gray-1200;
+  border: 1px solid transparent;
+
  height: 2rem;
+  padding-inline: 0.5em;
  outline: none;

-  &:hover {
+  &:hover:not(:disabled) {
    background-color: $gray-1100;
  }

-  &:focus {
+  &:focus:not(:read-only) {
    background-color: $gray-1000;
-    color: $gray-50;
    border: 1px solid $blue-500;
  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &::placeholder {
+    color: $gray-500;
+    letter-spacing: 0;
+  }
 }
@@ -1,6 +1,8 @@
 import { PropsWithChildren } from 'react';
 import { HexAlphaColorPicker, HexColorInput } from 'react-colorful';
-import { Popover, PopoverContent, PopoverTrigger } from '@chakra-ui/react';
+import { Popover } from '@base-ui-components/react/popover';
+
+import PopoverContents from '../../popover/Popover';

 import style from './PopoverPicker.module.scss';

@@ -9,15 +11,14 @@ interface PopoverPickerProps {
  onChange: (color: string) => void;
 }

-export default function PopoverPicker(props: PropsWithChildren<PopoverPickerProps>) {
-  const { color, onChange, children } = props;
+export default function PopoverPicker({ color, onChange, children }: PropsWithChildren<PopoverPickerProps>) {
  return (
-    <Popover>
-      <PopoverTrigger>{children}</PopoverTrigger>
-      <PopoverContent className={style.small} style={{ borderRadius: '9px', width: 'auto' }}>
+    <Popover.Root>
+      <Popover.Trigger>{children}</Popover.Trigger>
+      <PopoverContents>
        <HexAlphaColorPicker color={color} onChange={onChange} />
        <HexColorInput color={color} onChange={onChange} className={style.input} prefixed />
-      </PopoverContent>
-    </Popover>
+      </PopoverContents>
+    </Popover.Root>
  );
 }
@@ -11,7 +11,7 @@ interface UseReactiveTextInputReturn {
 export default function useReactiveTextInput(
  initialText: string,
  submitCallback: (newValue: string) => void,
-  ref: RefObject<HTMLInputElement>,
+  ref: RefObject<HTMLInputElement | HTMLTextAreaElement>,
  options?: {
    submitOnEnter?: boolean;
    submitOnCtrlEnter?: boolean;
@@ -101,25 +101,31 @@ export default function useReactiveTextInput(
    ];

    if (options?.submitOnEnter) {
-      hotKeys.push(['Enter', () => {
-        isKeyboardSubmitting.current = true;
-        handleSubmit(text);
-        // clear flag after blur has been processed
-        setTimeout(() => {
-          isKeyboardSubmitting.current = false;
-        }, 0);
-      }]);
+      hotKeys.push([
+        'Enter',
+        () => {
+          isKeyboardSubmitting.current = true;
+          handleSubmit(text);
+          // clear flag after blur has been processed
+          setTimeout(() => {
+            isKeyboardSubmitting.current = false;
+          }, 0);
+        },
+      ]);
    }

    if (options?.submitOnCtrlEnter) {
-      hotKeys.push(['mod + Enter', () => {
-        isKeyboardSubmitting.current = true;
-        handleSubmit(text);
-        // clear flag after blur has been processed
-        setTimeout(() => {
-          isKeyboardSubmitting.current = false;
-        }, 0);
-      }]);
+      hotKeys.push([
+        'mod + Enter',
+        () => {
+          isKeyboardSubmitting.current = true;
+          handleSubmit(text);
+          // clear flag after blur has been processed
+          setTimeout(() => {
+            isKeyboardSubmitting.current = false;
+          }, 0);
+        },
+      ]);
    }

    const hotKeyHandler = getHotkeyHandler(hotKeys);
@@ -1,7 +1,6 @@
-@use '../../../../theme/viewerDefs' as *;
-
 .textarea {
  box-sizing: border-box;
+  min-height: 2rem;

  display: block;
  font-size: 1rem;