refactor: cleanup picker implementations

apps/client/src/common/components/input/colour-input/SwatchPicker.tsx

@@ -1,10 +1,11 @@
 import { useCallback } from 'react';
+import { useController, UseControllerProps } from 'react-hook-form';
 import { IoEyedrop } from '@react-icons/all-files/io5/IoEyedrop';
-import Color from 'color';
+import { ViewSettings } from 'ontime-types';
 
 import PopoverPicker from '../../../../common/components/input/popover-picker/PopoverPicker';
 import { debounce } from '../../../../common/utils/debounce';
-import { cx } from '../../../utils/styleUtils';
+import { cx, getAccessibleColour } from '../../../utils/styleUtils';
 
 import style from './SwatchSelect.module.scss';
 
@@ -15,26 +16,9 @@ interface SwatchPickerProps {
   alwaysDisplayColor?: boolean;
 }
 
-const getIconColor = (color: string, isSelected: boolean) => {
-  if (isSelected) {
-    try {
-      const isLight = Color(color).isLight();
-      return isLight ? '#000000' : '#ffffff';
-    } catch (_error) {
-      /* we are not handling the error here */
-    }
-  }
-
-  return '#ffffff';
-};
-
 export default function SwatchPicker(props: SwatchPickerProps) {
   const { color, onChange, isSelected, alwaysDisplayColor } = props;
 
-  const classes = cx([style.swatch, isSelected ? style.selected : null, style.selectable]);
-
-  const iconColor = getIconColor(color, (alwaysDisplayColor || isSelected) ?? false);
-
   const debouncedOnChange = useCallback(
     debounce((newValue: string) => {
       onChange(newValue);
@@ -43,15 +27,34 @@ export default function SwatchPicker(props: SwatchPickerProps) {
   );
 
   const displayColor = alwaysDisplayColor || isSelected ? color : '';
+  const { color: iconColor } = getAccessibleColour(displayColor);
 
   return (
-    <div className={classes}>
-      <PopoverPicker
-        color={displayColor}
-        onChange={debouncedOnChange}
-        icon={<IoEyedrop color={iconColor} />}
-        hasInput
-      />
-    </div>
+    <PopoverPicker color={displayColor} onChange={debouncedOnChange}>
+      <div
+        className={cx([style.swatch, isSelected && style.selected, style.selectable])}
+        style={{ backgroundColor: displayColor }}
+      >
+        <IoEyedrop color={iconColor} />
+      </div>
+    </PopoverPicker>
+  );
+}
+
+export function SwatchPickerRHF(props: UseControllerProps<ViewSettings>) {
+  const { name, control } = props;
+  const {
+    field: { onChange, value },
+  } = useController({ control, name });
+
+  const displayColor = typeof value === 'string' ? value : '';
+  const { color: iconColor } = getAccessibleColour(displayColor);
+
+  return (
+    <PopoverPicker color={value as string} onChange={onChange}>
+      <div className={cx([style.swatch, style.selectable])} style={{ backgroundColor: displayColor }}>
+        <IoEyedrop color={iconColor} />
+      </div>
+    </PopoverPicker>
   );
 }