refactor: event editor color picker (#1400)

* refactor: event editor color picker

* refactor: throttle and debounce function signature

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

@@ -0,0 +1,54 @@
+import { useCallback } from 'react';
+import { IoEyedrop } from '@react-icons/all-files/io5/IoEyedrop';
+import Color from 'color';
+
+import PopoverPicker from '../../../../common/components/input/popover-picker/PopoverPicker';
+import { debounce } from '../../../../common/utils/debounce';
+import { cx } from '../../../utils/styleUtils';
+
+import style from './SwatchSelect.module.scss';
+
+interface SwatchPickerProps {
+  color: string;
+  isSelected?: boolean;
+  onChange: (name: string) => void;
+}
+
+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 } = props;
+
+  const classes = cx([style.swatch, isSelected ? style.selected : null, style.selectable]);
+
+  const iconColor = getIconColor(color, isSelected ?? false);
+
+  const debouncedOnChange = useCallback(
+    debounce((newValue: string) => {
+      onChange(newValue);
+    }, 500),
+    [onChange],
+  );
+
+  return (
+    <div className={classes}>
+      <PopoverPicker
+        color={isSelected ? color : ''}
+        onChange={debouncedOnChange}
+        icon={<IoEyedrop color={iconColor} />}
+        hasInput
+      />
+    </div>
+  );
+}

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

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 
 import Swatch from './Swatch';
+import SwatchPicker from './SwatchPicker';
 
 import style from './SwatchSelect.module.scss';
 
@@ -43,6 +44,7 @@ export default function SwatchSelect(props: ColourInputProps) {
       {colours.map((colour) => (
         <Swatch key={colour} color={colour} onClick={setColour} isSelected={value === colour} />
       ))}
+      <SwatchPicker color={value} onChange={setColour} isSelected={!colours.includes(value)} />
     </div>
   );
 }

apps/client/src/common/components/input/popover-picker/PopoverPicker.module.scss

@@ -1,4 +1,7 @@
 .swatch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 24px;
   height: 24px;
   border-radius: 12px;
@@ -14,3 +17,23 @@
   box-shadow: 0 0 0 1px $blue-300;
 }
 
+.input {
+  color: $gray-200;
+  border: 1px solid transparent;
+  border-radius: 0 3px;
+  background-color: $gray-1200;
+  padding: 0 0.5rem;
+  font-size: 1rem;
+  height: 2rem;
+  outline: none;
+
+  &:hover {
+    background-color: $gray-1100;
+  }
+
+  &:focus {
+    background-color: $gray-1000;
+    color: $gray-50;
+    border: 1px solid $blue-500;
+  }
+}

apps/client/src/common/components/input/popover-picker/PopoverPicker.tsx

@@ -1,4 +1,5 @@
-import { HexAlphaColorPicker } from 'react-colorful';
+import { ReactNode } from 'react';
+import { HexAlphaColorPicker, HexColorInput } from 'react-colorful';
 import { useController, UseControllerProps } from 'react-hook-form';
 import { Popover, PopoverContent, PopoverTrigger } from '@chakra-ui/react';
 import { ViewSettings } from 'ontime-types';
@@ -16,19 +17,24 @@ export function PopoverPickerRHF(props: UseControllerProps<ViewSettings>) {
 
 interface PopoverPickerProps {
   color: string;
+  icon?: ReactNode;
+  hasInput?: boolean;
   onChange: (color: string) => void;
 }
 
 export default function PopoverPicker(props: PopoverPickerProps) {
-  const { color, onChange } = props;
+  const { color, icon, hasInput, onChange } = props;
 
   return (
     <Popover>
       <PopoverTrigger>
-        <div className={style.swatch} style={{ backgroundColor: color }} />
+        <div className={style.swatch} style={{ backgroundColor: color }}>
+          {icon ?? null}
+        </div>
       </PopoverTrigger>
       <PopoverContent style={{ width: 'auto' }}>
         <HexAlphaColorPicker color={color} onChange={onChange} />
+        {hasInput && <HexColorInput color={color} onChange={onChange} className={style.input} prefixed />}
       </PopoverContent>
     </Popover>
   );