feat: automatic validation using validation constraint API (#32)

Author: alexanbj

.changeset/quick-walls-taste.md

@@ -0,0 +1,5 @@
+---
+"@obosbbl/grunnmuren-react": minor
+---
+
+add in built validation to TextField and TextArea using HTML validation constraint API

packages/react/src/TextArea/TextArea.tsx

@@ -16,19 +16,34 @@ export interface TextAreaProps
   error?: string;
   /**  Label for the form control */
   label: string;
+  /** Automatically valdiate the form control using the HTML constraint validation API. @default true */
+  validate?: boolean;
 }
 
 export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
   (props, ref) => {
-    const { description, error, id: idProp, label, required, ...rest } = props;
+    const {
+      description,
+      error,
+      id: idProp,
+      label,
+      required,
+      validate = true,
+      ...rest
+    } = props;
 
     const ownRef = useRef(null);
 
-    const { validity } = useFormControlValidity(ownRef);
+    const { validity, validationMessage } = useFormControlValidity(
+      ownRef,
+      validate,
+    );
 
     const id = useFallbackId(idProp);
-    const helpTextId = id + '-help';
-    const errorMsgId = id + '-err-msg';
+    const helpTextId = id + 'help';
+    const errorMsgId = id + 'err';
+
+    const errorMsg = error ?? validationMessage;
 
     return (
       <div className="grid gap-2">
@@ -54,7 +69,9 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         {description && (
           <FormHelperText id={helpTextId}>{description}</FormHelperText>
         )}
-        {error && <FormErrorMessage id={errorMsgId}>{error}</FormErrorMessage>}
+        {errorMsg && (
+          <FormErrorMessage id={errorMsgId}>{errorMsg}</FormErrorMessage>
+        )}
       </div>
     );
   },

packages/react/src/TextField/TextField.tsx

@@ -17,6 +17,8 @@ export interface TextFieldProps
   /**  Label for the form control */
   label: string;
   prefix?: string;
+  /** Automatically valdiate the form control using the HTML constraint validation API. @default true */
+  validate?: boolean;
 }
 
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
@@ -28,16 +30,22 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       label,
       required,
       type = 'text',
+      validate = true,
       ...rest
     } = props;
 
     const ownRef = useRef(null);
 
-    const { validity } = useFormControlValidity(ownRef);
+    const { validity, validationMessage } = useFormControlValidity(
+      ownRef,
+      validate,
+    );
 
     const id = useFallbackId(idProp);
-    const helpTextId = id + '-help';
-    const errorMsgId = id + '-err';
+    const helpTextId = id + 'help';
+    const errorMsgId = id + 'err';
+
+    const errorMsg = error ?? validationMessage;
 
     return (
       <div className="grid gap-2">
@@ -62,7 +70,9 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         {description && (
           <FormHelperText id={helpTextId}>{description}</FormHelperText>
         )}
-        {error && <FormErrorMessage id={errorMsgId}>{error}</FormErrorMessage>}
+        {errorMsg && (
+          <FormErrorMessage id={errorMsgId}>{errorMsg}</FormErrorMessage>
+        )}
       </div>
     );
   },

packages/react/src/hooks/useFormControlValidity.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, RefObject } from 'react';
+import { useState, useEffect, RefObject, useCallback } from 'react';
 
 type Validity = 'indeterminate' | 'invalid' | 'valid';
 
@@ -10,32 +10,50 @@ type Validity = 'indeterminate' | 'invalid' | 'valid';
  */
 export function useFormControlValidity(
   ref: RefObject<HTMLElement & { checkValidity(): boolean }>,
+  enabled = true,
 ) {
   const [validity, setValidity] = useState<Validity>('indeterminate');
+  const [validationMessage, setValidationMessage] = useState<string>();
 
-  const onBlur = (event: FocusEvent) => {
-    // this triggers an invalid event, so if it's invalid it's handled by the `onInvalid` handler
-    const isValid = (event.target as HTMLInputElement).checkValidity();
-
-    if (isValid) {
-      setValidity('valid');
-    }
-  };
-
-  const onInput = (event: Event) => {
-    if (validity !== 'indeterminate') {
+  const onBlur = useCallback(
+    (event: FocusEvent) => {
       // this triggers an invalid event, so if it's invalid it's handled by the `onInvalid` handler
       const isValid = (event.target as HTMLInputElement).checkValidity();
 
-      if (isValid) {
+      if (isValid && enabled) {
         setValidity('valid');
+        setValidationMessage(undefined);
+      }
+    },
+    [enabled],
+  );
+
+  const onInput = useCallback(
+    (event: Event) => {
+      if (enabled && validity !== 'indeterminate') {
+        // this triggers an invalid event, so if it's invalid it's handled by the `onInvalid` handler
+        const isValid = (event.target as HTMLInputElement).checkValidity();
+
+        if (isValid) {
+          setValidity('valid');
+          setValidationMessage(undefined);
+        }
       }
-    }
-  };
+    },
+    [enabled, validity],
+  );
 
-  const onInvalid = (/*event: Event*/) => {
-    setValidity('invalid');
-  };
+  const onInvalid = useCallback(
+    (event: Event) => {
+      if (enabled) {
+        event.preventDefault();
+        const message = (event.target as HTMLInputElement).validationMessage;
+        setValidationMessage(message);
+        setValidity('invalid');
+      }
+    },
+    [enabled],
+  );
 
   useEffect(() => {
     const { current } = ref;
@@ -50,5 +68,5 @@ export function useFormControlValidity(
     };
   });
 
-  return { validity };
+  return { validity, validationMessage };
 }