[F] Implement Coloris color picker

Author: 1aurend

client/package.json

@@ -58,6 +58,7 @@
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.14.1",
     "@loadable/component": "^5.16.7",
+    "@melloware/coloris": "^0.25.0",
     "@vidstack/react": "^1.12.13",
     "ace-builds": "^1.x",
     "actioncable": "~5.0.7",

client/src/global/components/form/BaseInput/index.js

@@ -119,6 +119,7 @@ export class FormBaseInput extends PureComponent {
       <InputComponent
         ref={input => {
           this.inputElement = input;
+          if (this.props.colorRef) this.props.colorRef.current = input;
         }}
         id={id}
         name={this.props.name}

client/src/global/components/form/ColorInput/ColorInput.js

@@ -0,0 +1,65 @@
+import { useId, useEffect, useRef } from "react";
+import Coloris from "@melloware/coloris";
+import setter from "../setter";
+import * as Styled from "./styles";
+
+function ColorInput({ defaultValue, ...props }) {
+  const id = useId();
+  const inputRef = useRef();
+  const colorRef = useRef(props.value || defaultValue);
+
+  const inputId = `color-input-${id}`;
+
+  useEffect(() => {
+    Coloris.init();
+
+    const setColor = event => {
+      const isTarget = event.detail.currentEl.id === inputId;
+      if (isTarget) colorRef.current = event.detail.color;
+    };
+
+    document.addEventListener("coloris:pick", setColor);
+
+    return () => document.removeEventListener("coloris:pick", setColor);
+  }, [inputId, props]);
+
+  useEffect(() => {
+    const onClose = () => {
+      props.onChange({ target: { value: colorRef.current } });
+    };
+
+    const inputEl = inputRef.current;
+
+    if (inputEl) {
+      Coloris({
+        el: inputEl,
+        format: "mixed",
+        formatToggle: true,
+        themeMode: "dark",
+        clearButton: true,
+        defaultColor: defaultValue,
+        margin: 5
+      });
+
+      inputEl.addEventListener("close", onClose);
+
+      return () => inputEl.removeEventListener("close", onClose);
+    }
+  }, [inputRef, defaultValue, colorRef, props]);
+
+  return (
+    <Styled.ColorInput
+      id={inputId}
+      colorRef={inputRef}
+      idForError={`color-input-error-${id}`}
+      idForInstructions={`color-input-instructions-${id}`}
+      placeholder={defaultValue}
+      {...props}
+      $defaultColor={defaultValue}
+    />
+  );
+}
+
+export default setter(ColorInput);
+
+ColorInput.displayName = "Form.ColorInput";

client/src/global/components/form/ColorInput/index.js

@@ -1,21 +1,7 @@
-import { useId } from "react";
-import PropTypes from "prop-types";
-import * as Styled from "./styles";
+import loadable from "@loadable/component";
 
-export default function ColorInput({ defaultValue, ...props }) {
-  const id = useId();
+const ColorInput = loadable(() =>
+  import(/* webpackChunkName: "coloris" */ "./ColorInput")
+);
 
-  const renderValue = value => value ?? defaultValue;
-  return (
-    <Styled.ColorInput
-      inputType="color"
-      id={`color-input-${id}`}
-      idForError={`color-input-error-${id}`}
-      idForInstructions={`color-input-instructions-${id}`}
-      renderValue={renderValue}
-      {...props}
-    />
-  );
-}
-
-ColorInput.displayName = "Form.ColorInput";
+export default ColorInput;

client/src/global/components/form/ColorInput/styles.js

@@ -1,7 +1,9 @@
 import styled from "@emotion/styled";
-import BaseInput from "../BaseInput";
+import { FormBaseInput } from "../BaseInput";
+
+export const ColorInput = styled(FormBaseInput)`
+  --ColorInput-default-color: ${({ $defaultColor }) => $defaultColor};
 
-export const ColorInput = styled(BaseInput)`
   input[type="color"] {
     width: 24px;
     height: 24px;