feat: validate the color input field

Author: aradzie

packages/keybr-theme-designer/lib/design/input/color/ColorInput.tsx

@@ -5,16 +5,18 @@ import type { ColorEditorProps } from "./types.ts";
 
 export function ColorInput({ color, onChange }: ColorEditorProps) {
   const focus = useRef(false);
+  const [error, setError] = useState("");
   const [value, setValue] = useState("");
   useEffect(() => {
     if (!focus.current) {
-      setValue(String(color.toRgb()));
+      setValue(color.toRgb().formatHex());
     }
   }, [color]);
   return (
     <TextField
       size="full"
-      placeholder="hex, rgb, hsl, etc..."
+      placeholder="hex, rgb(...), hsl(...), etc"
+      error={error}
       value={value}
       onChange={setValue}
       onFocus={() => {
@@ -24,7 +26,10 @@ export function ColorInput({ color, onChange }: ColorEditorProps) {
         focus.current = false;
         const color = tryParseColor(value);
         if (color != null) {
+          setError("");
           onChange(color);
+        } else {
+          setError("Invalid color. We accept hex, rgb(...), hsl(...), etc.");
         }
       }}
     />

packages/keybr-widget/lib/components/textfield/TextField.module.less

@@ -17,6 +17,10 @@
   outline: none;
 }
 
+.root:invalid {
+  color: var(--error);
+}
+
 input.root {
   display: inline-block;
   min-block-size: @field-height;

packages/keybr-widget/lib/components/textfield/TextField.tsx

@@ -4,6 +4,7 @@ import {
   forwardRef,
   type ReactNode,
   type RefObject,
+  useEffect,
   useImperativeHandle,
   useRef,
 } from "react";
@@ -14,6 +15,7 @@ import { type TextFieldProps, type TextFieldRef } from "./TextField.types.ts";
 export const TextField = forwardRef(function TextField(
   {
     disabled,
+    error,
     maxLength,
     name,
     placeholder,
@@ -42,6 +44,9 @@ export const TextField = forwardRef(function TextField(
       element.current?.select();
     },
   }));
+  useEffect(() => {
+    element.current?.setCustomValidity(error ?? "");
+  }, [error]);
   if (type === "textarea") {
     return (
       <textarea

packages/keybr-widget/lib/components/textfield/TextField.types.ts

@@ -10,6 +10,7 @@ import {
 export type TextFieldType = "text" | "textarea" | "email" | "url" | "password";
 
 export type TextFieldProps = {
+  readonly error?: string | null;
   readonly maxLength?: number;
   readonly name?: string;
   readonly placeholder?: string;