fix: color input validation

Author: Seldszar

src/browser/components/ColorPicker.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useMemo, useState } from "react";
 import tw, { styled } from "twin.macro";
 
 import { PRESET_COLORS } from "~/common/constants";
@@ -24,7 +25,7 @@ const Button = styled.button<ButtonProps>`
 `;
 
 const ColorInput = styled(Input)`
-  ${tw`w-32`}
+  ${tw`font-mono w-32`}
 `;
 
 export interface ColorPickerProps {
@@ -36,6 +37,18 @@ export interface ColorPickerProps {
 }
 
 function ColorPicker(props: ColorPickerProps) {
+  const [inputValue, setInputValue] = useState("");
+
+  const computedValue = useMemo(() => inputValue || props.value, [inputValue, props.value]);
+  const isValid = useMemo(() => CSS.supports("color", computedValue), [computedValue]);
+
+  useEffect(() => setInputValue(""), [props.value]);
+  useEffect(() => {
+    if (isValid && inputValue.length > 0) {
+      props.onChange(inputValue);
+    }
+  }, [isValid, inputValue]);
+
   return (
     <Wrapper className={props.className} disabled={props.disabled}>
       {PRESET_COLORS.map((color, index) => (
@@ -48,7 +61,7 @@ function ColorPicker(props: ColorPickerProps) {
         />
       ))}
 
-      <ColorInput value={props.value} onChange={props.onChange} />
+      <ColorInput error={!isValid} value={computedValue} onChange={setInputValue} />
     </Wrapper>
   );
 }

src/browser/components/Input.tsx

@@ -5,19 +5,26 @@ const Ornament = styled.div`
   ${tw`flex-none self-center`}
 `;
 
-const Wrapper = styled.fieldset`
+interface WrapperProps {
+  error?: boolean;
+}
+
+const Wrapper = styled.label<WrapperProps>`
   ${tw`flex gap-3 rounded bg-neutral-300 dark:bg-neutral-700 px-3 disabled:(cursor-default opacity-25)!`}
 
   input {
-    ${tw`appearance-none bg-transparent flex-1 outline-none px-1 py-2 text-black dark:text-white`}
+    ${tw`appearance-none bg-transparent flex-1 outline-none px-1 py-2 text-current`}
   }
+
+  ${(props) => props.error && tw`outline outline-2 outline-red-500 text-red-500!`}
 `;
 
 export interface InputProps {
   className?: string;
 
   value?: string;
   placeholder?: string;
+  error?: boolean;
 
   leftOrnament?: ReactNode;
   rightOrnament?: ReactNode;
@@ -27,7 +34,7 @@ export interface InputProps {
 
 function Input(props: InputProps) {
   return (
-    <Wrapper className={props.className}>
+    <Wrapper error={props.error} className={props.className}>
       {props.leftOrnament && <Ornament>{props.leftOrnament}</Ornament>}
 
       <input