feat: field-error-messages

Author: tractorss

src/lib/form/bignumber-field/index.tsx

@@ -47,6 +47,7 @@ function BigNumberField({
     groupProps,
     descriptionProps,
     errorMessageProps,
+    validationResult,
   } = useBigNumberField({ id, isDisabled, placeholder, isReadOnly, ...props });
 
   return (
@@ -68,6 +69,8 @@ function BigNumberField({
           <>
             <Input
               {...inputProps}
+              id="BigNumberField"
+              aria-errormessage="BigNumberFieldError"
               name={name}
               className={cn(
                 "hover-short-transition bg-klerosUIComponentsWhiteBackground size-full",
@@ -83,6 +86,7 @@ function BigNumberField({
                   "border-klerosUIComponentsError": variant === "error",
                   "border-klerosUIComponentsSuccess": variant === "success",
                 },
+                "invalid:border-klerosUIComponentsError",
                 inputProps?.className,
               )}
             />
@@ -181,6 +185,18 @@ function BigNumberField({
           {message}
         </div>
       )}
+      {props.showFieldError && validationResult.isInvalid && (
+        <span
+          id="BigNumberFieldError"
+          aria-label={validationResult.validationError}
+          className={cn(
+            "text-klerosUIComponentsError mt-1 text-sm break-words",
+            props.fieldErrorClassName,
+          )}
+        >
+          {validationResult.validationError}
+        </span>
+      )}
     </div>
   );
 }

src/lib/form/bignumber-field/useBigNumberField.tsx

@@ -63,6 +63,15 @@ export interface BigNumberFieldProps {
   formatOptions?: FormatOptions;
   /** Additional props for the input element. */
   inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  /** A function that returns an error message if a given value is invalid.
+   * Return a string to denote invalid.*/
+  validate?: (value: BigNumber | null) => true | null | undefined | string;
+  /** Flag to enable field errors, alternative to `message`
+   * This will show the validation errors from browser, or custom error in case `validate` is setup on Field.
+   */
+  showFieldError?: boolean;
+  /** ClassName for field error message. */
+  fieldErrorClassName?: string;
 }
 
 // Default format configuration
@@ -124,6 +133,12 @@ export function useBigNumberField(props: BigNumberFieldProps) {
   // State to track if the input is currently formatted
   const [isFormatted, setIsFormatted] = useState<boolean>(false);
 
+  // State to track input's validation
+  const [validationResult, setValidationResult] = useState<{
+    isInvalid: boolean;
+    validationError?: string;
+  }>({ isInvalid: false });
+
   // State for the numeric value
   const [numberValue, setNumberValue] = useState<BigNumber | null>(() => {
     try {
@@ -231,6 +246,7 @@ export function useBigNumberField(props: BigNumberFieldProps) {
     setInputValue(newValue.toString());
     setIsFormatted(false);
     onChange?.(newValue);
+    setValidationResult(getValidationResult(newValue));
   };
 
   const decrement = () => {
@@ -252,6 +268,7 @@ export function useBigNumberField(props: BigNumberFieldProps) {
     setInputValue(newValue.toString());
     setIsFormatted(false);
     onChange?.(newValue);
+    setValidationResult(getValidationResult(newValue));
   };
 
   // Helper function to escape special characters in regex
@@ -415,6 +432,8 @@ export function useBigNumberField(props: BigNumberFieldProps) {
     } else if (inputValue !== "" && inputValue !== "-") {
       setInputValue("");
     }
+
+    setValidationResult(getValidationResult());
   };
 
   // Handle keyboard events
@@ -552,6 +571,7 @@ export function useBigNumberField(props: BigNumberFieldProps) {
       readOnly: isReadOnly,
       required: props.isRequired,
       placeholder: props.placeholder,
+      "aria-invalid": validationResult?.isInvalid,
       ...getAriaAttributes(),
       ...props.inputProps,
     });
@@ -561,6 +581,32 @@ export function useBigNumberField(props: BigNumberFieldProps) {
     htmlFor: id,
   });
 
+  // Field Error Render props
+  const getValidationResult = (value?: BigNumber) => {
+    const fieldErrorProps = {
+      isInvalid: false,
+      validationError: "",
+    };
+
+    if (
+      props.isRequired &&
+      (value ? value.toString() : inputValue).trim() === ""
+    ) {
+      fieldErrorProps.isInvalid = true;
+      fieldErrorProps.validationError = "Please fill out this field.";
+    }
+
+    const validate = props.validate;
+    if (validate) {
+      const result = validate(value ?? numberValue);
+      if (typeof result === `string`) {
+        fieldErrorProps.isInvalid = true;
+        fieldErrorProps.validationError = result;
+      }
+    }
+    return fieldErrorProps;
+  };
+
   // Increment button props
   const getIncrementButtonProps = () => ({
     type: "button" as const,
@@ -603,6 +649,7 @@ export function useBigNumberField(props: BigNumberFieldProps) {
     groupProps: getGroupProps(),
     descriptionProps: getDescriptionProps(),
     errorMessageProps: getErrorMessageProps(),
+    validationResult,
     inputValue,
     numberValue,
     canIncrement: canIncrement(),

src/lib/form/number-field.tsx

@@ -15,6 +15,8 @@ import {
   type NumberFieldProps as AriaNumberFieldProps,
   Label,
   Text,
+  type FieldErrorProps,
+  FieldError,
 } from "react-aria-components";
 import { cn } from "../../utils";
 import clsx from "clsx";
@@ -29,6 +31,14 @@ interface NumberFieldProps extends AriaNumberFieldProps {
    */
   inputProps?: InputProps;
   label?: string;
+  /** Flag to enable field errors, alternative to `message`
+   * This will show the validation errors from browser, or custom error in case `validate` is setup on Field.
+   */
+  showFieldError?: boolean;
+  /** Props for FieldError in case `showFieldError` is true.
+   * [See FieldErrorProps](https://react-spectrum.adobe.com/react-aria/NumberField.html#fielderror)
+   */
+  fieldErrorProps?: FieldErrorProps;
 }
 
 /** A number field allows a user to enter a number, and increment or decrement the value using stepper buttons. */
@@ -41,6 +51,8 @@ function NumberField({
   label,
   isDisabled,
   inputProps,
+  showFieldError,
+  fieldErrorProps,
   ...props
 }: Readonly<NumberFieldProps>) {
   return (
@@ -170,6 +182,18 @@ function NumberField({
           {message}
         </Text>
       )}
+
+      {showFieldError && (
+        <FieldError
+          {...fieldErrorProps}
+          className={cn(
+            "text-klerosUIComponentsError mt-1 text-sm break-words",
+            fieldErrorProps?.className,
+          )}
+        >
+          {fieldErrorProps?.children}
+        </FieldError>
+      )}
     </AriaNumberField>
   );
 }

src/lib/form/searchbar.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import SearchIcon from "../../assets/svgs/form/search.svg";
 import {
+  FieldError,
+  type FieldErrorProps,
   Group,
   Input,
   type InputProps,
@@ -18,13 +20,23 @@ interface SearchbarProps extends SearchFieldProps {
    * [See InputProps](https://react-spectrum.adobe.com/react-aria/NumberField.html#input-1)
    */
   inputProps?: InputProps;
+  /** Flag to enable field errors, alternative to `message`
+   * This will show the validation errors from browser, or custom error in case `validate` is setup on Field.
+   */
+  showFieldError?: boolean;
+  /** Props for FieldError in case `showFieldError` is true.
+   * [See FieldErrorProps](https://react-spectrum.adobe.com/react-aria/SearchField.html#fielderror)
+   */
+  fieldErrorProps?: FieldErrorProps;
 }
 /** A search field allows a user to enter and clear a search query. */
 function Searchbar({
   label,
   placeholder,
   inputProps,
   className,
+  showFieldError,
+  fieldErrorProps,
   ...props
 }: Readonly<SearchbarProps>) {
   return (
@@ -57,6 +69,17 @@ function Searchbar({
           )}
         />
       </Group>
+      {showFieldError && (
+        <FieldError
+          {...fieldErrorProps}
+          className={cn(
+            "text-klerosUIComponentsError mt-1 text-sm break-words",
+            fieldErrorProps?.className,
+          )}
+        >
+          {fieldErrorProps?.children}
+        </FieldError>
+      )}
     </SearchField>
   );
 }

src/lib/form/text-area.tsx

@@ -12,6 +12,8 @@ import {
   type TextFieldProps,
   type TextAreaProps as AriaTextAreaProps,
   Text,
+  type FieldErrorProps,
+  FieldError,
 } from "react-aria-components";
 import { cn } from "../../utils";
 
@@ -28,6 +30,14 @@ interface TextAreaProps extends TextFieldProps {
   resizeX?: boolean;
   /** Allow resizing along y-axis */
   resizeY?: boolean;
+  /** Flag to enable field errors, alternative to `message`
+   * This will show the validation errors from browser, or custom error in case `validate` is setup on Field.
+   */
+  showFieldError?: boolean;
+  /** Props for FieldError in case `showFieldError` is true.
+   * [See FieldErrorProps](https://react-spectrum.adobe.com/react-aria/TextField.html#fielderror)
+   */
+  fieldErrorProps?: FieldErrorProps;
 }
 
 /** TextArea components supports multiline input and can be configured to resize. */
@@ -39,6 +49,8 @@ function TextArea({
   placeholder,
   resizeX = false,
   resizeY = false,
+  showFieldError,
+  fieldErrorProps,
   ...props
 }: Readonly<TextAreaProps>) {
   return (
@@ -101,6 +113,17 @@ function TextArea({
           {message}
         </Text>
       )}
+      {showFieldError && (
+        <FieldError
+          {...fieldErrorProps}
+          className={cn(
+            "text-klerosUIComponentsError mt-1 text-sm break-words",
+            fieldErrorProps?.className,
+          )}
+        >
+          {fieldErrorProps?.children}
+        </FieldError>
+      )}
     </TextField>
   );
 }

src/lib/form/text-field.tsx

@@ -12,6 +12,8 @@ import {
   type TextFieldProps as AriaTextFieldProps,
   Label,
   Group,
+  FieldError,
+  type FieldErrorProps,
 } from "react-aria-components";
 import { cn } from "../../utils";
 
@@ -25,6 +27,14 @@ interface TextFieldProps extends AriaTextFieldProps {
    */
   inputProps?: InputProps;
   label?: string;
+  /** Flag to enable field errors, alternative to `message`
+   * This will show the validation errors from browser, or custom error in case `validate` is setup on Field.
+   */
+  showFieldError?: boolean;
+  /** Props for FieldError in case `showFieldError` is true.
+   * [See FieldErrorProps](https://react-spectrum.adobe.com/react-aria/TextField.html#fielderror)
+   */
+  fieldErrorProps?: FieldErrorProps;
 }
 /** A text field allows a user to enter a plain text value with a keyboard. */
 function TextField({
@@ -34,6 +44,8 @@ function TextField({
   className,
   placeholder,
   label,
+  showFieldError,
+  fieldErrorProps,
   ...props
 }: Readonly<TextFieldProps>) {
   return (
@@ -109,6 +121,18 @@ function TextField({
           {message}
         </Text>
       )}
+
+      {showFieldError && (
+        <FieldError
+          {...fieldErrorProps}
+          className={cn(
+            "text-klerosUIComponentsError mt-1 text-sm break-words",
+            fieldErrorProps?.className,
+          )}
+        >
+          {fieldErrorProps?.children}
+        </FieldError>
+      )}
     </AriaTextField>
   );
 }

src/stories/bignumber-field.stories.tsx

@@ -1,8 +1,10 @@
+import React from "react";
 import { Meta, StoryObj } from "@storybook/react";
 import BigNumberField from "../lib/form/bignumber-field";
 import Telegram from "../assets/svgs/telegram.svg";
 import BigNumber from "bignumber.js";
 import { IPreviewArgs } from "./utils";
+import { Button, Form } from "../lib";
 
 const meta: Meta<typeof BigNumberField> = {
   title: "Form/BigNumberField",
@@ -183,3 +185,33 @@ export const ReadOnly: Story = {
     defaultValue: "42",
   },
 };
+
+/** Make a field required. Optionally you can choose to show the validation error and customize their style. */
+export const Required: Story = {
+  args: {
+    ...Default.args,
+    isRequired: true,
+  },
+  render: (args) => (
+    <Form
+      onSubmit={(e) => {
+        e.preventDefault();
+      }}
+    >
+      <BigNumberField
+        {...args}
+        placeholder="Enter '0'"
+        showFieldError
+        validate={(value) => (value?.eq(0) ? "Zero not allowed" : null)}
+      />
+      <Button
+        variant="primary"
+        type="submit"
+        aria-pressed="true"
+        text="Click me!"
+        small
+        className="mt-4"
+      />
+    </Form>
+  ),
+};