add more validations to react lib

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formbricks/react",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "author": "Formbricks <hola@formbricks.com>",
   "description": "Building React forms has never been quicker.",
   "homepage": "https://formbricks.com",

packages/react/src/components/inputs/Text.tsx

@@ -3,7 +3,7 @@ import React, { useMemo } from "react";
 import { useFormContext } from "react-hook-form";
 import { getElementId } from "../../lib/element";
 import { useEffectUpdateSchema } from "../../lib/schema";
-import { getValidationRules } from "../../lib/validation";
+import { getValidationRules, validate } from "../../lib/validation";
 import { NameRequired, UniversalInputProps } from "../../types";
 import { Help } from "../shared/Help";
 import { Label } from "../shared/Label";
@@ -41,7 +41,7 @@ export function Text(props: FormbricksProps) {
             placeholder={props.placeholder || ""}
             aria-invalid={errors[props.name] ? "true" : "false"}
             {...register(props.name, {
-              required: { value: validationRules?.includes("required"), message: "This field is required" },
+              required: { value: "required" in validationRules, message: "This field is required" },
               minLength: {
                 value: props.minLength || 0,
                 message: `Your answer must be at least ${props.minLength} characters long`,
@@ -50,10 +50,7 @@ export function Text(props: FormbricksProps) {
                 value: props.maxLength || 524288,
                 message: `Your answer musn't be longer than ${props.maxLength} characters`,
               },
-              pattern: {
-                value: /\d+/,
-                message: "This input is number only.",
-              },
+              validate: validate(validationRules),
             })}
           />
         </div>

packages/react/src/components/inputs/Textarea.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import { useFormContext } from "react-hook-form";
 import { getElementId } from "../../lib/element";
 import { useEffectUpdateSchema } from "../../lib/schema";
-import { getValidationRules } from "../../lib/validation";
+import { getValidationRules, validate } from "../../lib/validation";
 import { NameRequired, UniversalInputProps } from "../../types";
 import { Help } from "../shared/Help";
 import { Label } from "../shared/Label";
@@ -41,10 +41,18 @@ export function Textarea(props: TextareaProps) {
             placeholder={props.placeholder || ""}
             cols={props.cols}
             rows={props.rows}
+            aria-invalid={errors[props.name] ? "true" : "false"}
             {...register(props.name, {
-              required: validationRules?.includes("required"),
-              minLength: props.minLength,
-              maxLength: props.maxLength,
+              required: { value: "required" in validationRules, message: "This field is required" },
+              minLength: {
+                value: props.minLength || 0,
+                message: `Your answer must be at least ${props.minLength} characters long`,
+              },
+              maxLength: {
+                value: props.maxLength || 524288,
+                message: `Your answer musn't be longer than ${props.maxLength} characters`,
+              },
+              validate: validate(validationRules),
             })}
           />
         </div>

packages/react/src/components/shared/Messages.tsx

@@ -36,7 +36,8 @@ export function Messages({ errors, messagesClassName, messageClassName, name }:
               <li
                 className={clsx("formbricks-message", messageClassName)}
                 id={`${name}-${type}`}
-                data-message-type={type}>
+                data-message-type={type}
+                role="alert">
                 {message}
               </li>
             </ul>

packages/react/src/lib/validation.ts

@@ -1,12 +1,40 @@
 export const getValidationRules = (validation: string | undefined) => {
-  const validationRules: string[] = [];
+  const validationRules: any = {};
   if (!validation) {
     return validationRules;
   }
   for (const validationRule of validation.split("|")) {
-    if (validationRule === "required" || !validationRules.includes("required")) {
-      validationRules.push("required");
+    if (validationRule === "required" && !("required" in validationRules)) {
+      validationRules.required = {};
+    }
+    if (validationRule === "number" && !("number" in validationRules)) {
+      validationRules.number = {};
+    }
+    if (validationRule.startsWith("max:") && !("max" in validationRules)) {
+      validationRules.max = { value: validationRule.split(":")[1] };
+    }
+    if (validationRule.startsWith("min:") && !("min" in validationRules)) {
+      validationRules.min = { value: validationRule.split(":")[1] };
     }
   }
   return validationRules;
 };
+
+export const validate = (validationRules: any) => {
+  const validation: any = {};
+  if ("max" in validationRules) {
+    validation.max = (v: string) =>
+      parseInt(v) <= validationRules.max.value ||
+      `Input must be less or equal to ${validationRules.max.value}`;
+  }
+  if ("min" in validationRules) {
+    validation.min = (v: string) =>
+      parseInt(v) >= validationRules.min.value ||
+      `Input must be more or equal to ${validationRules.min.value}`;
+  }
+  if ("number" in validationRules) {
+    validation.number = (v: string) =>
+      ("number" in validationRules && /^[+-]?([0-9]*[.])?[0-9]+$/.test(v)) || "Input must be a number";
+  }
+  return validation;
+};