add simple validation to react lib, minLength, maxLength

.changeset/perfect-walls-switch.md

@@ -1,5 +0,0 @@
----
-"@formbricks/react": patch
----
-
-provide basic form functionality with text, textarea and submit types

packages/react/package.json

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

packages/react/src/components/Formbricks.tsx

@@ -1,17 +1,13 @@
 import React, { useContext, useEffect, useMemo } from "react";
 import { generateId } from "../lib/utils";
+import { getValidationRules } from "../lib/validation";
 import { SchemaContext } from "./Form";
-import { Text } from "./inputs/Text";
+import { Text, TextInputUniqueProps } from "./inputs/Text";
 import { Textarea } from "./inputs/Textarea";
 import { Help } from "./shared/Help";
 
-interface BasicTypeProps {
-  id?: string;
-  name: string;
-  label?: string;
-  placeholder?: string;
+interface FormbricksInputProps {
   type: "text" | "textarea";
-  help?: string;
 }
 
 interface SubmitTypeProps {
@@ -21,20 +17,51 @@ interface SubmitTypeProps {
   placeholder?: string;
   type: "submit";
   help?: string;
+  validation?: string;
 }
 
-type FormbricksProps = BasicTypeProps | SubmitTypeProps;
+export interface UniversalInputProps {
+  id?: string;
+  help?: string;
+  name: string;
+  label?: string;
+  elemId: string;
+  validation: string[];
+}
 
-export function Formbricks({ id, name, label, placeholder, help, type }: FormbricksProps) {
+type FormbricksProps = FormbricksInputProps & UniversalInputProps & SubmitTypeProps & TextInputUniqueProps;
+
+export function Formbricks({
+  id,
+  name,
+  label,
+  placeholder,
+  help,
+  type,
+  validation,
+  minLength,
+  maxLength,
+}: FormbricksProps) {
   const elemId = useMemo(() => (typeof id !== "undefined" ? id : `${name}=${generateId(3)}`), [id]);
-  const { schema, setSchema } = useContext(SchemaContext);
+  const { setSchema } = useContext(SchemaContext);
+  const validationRules = getValidationRules(validation);
 
   useEffect(() => {
     setSchema((schema: any) => {
       const newSchema = JSON.parse(JSON.stringify(schema));
       let elementIdx = newSchema.findIndex((e: any) => e.name === name);
       if (elementIdx === -1) {
-        newSchema.push({ name, type, label, help });
+        newSchema.push({
+          id,
+          name,
+          label,
+          placeholder,
+          help,
+          type,
+          validation,
+          minLength,
+          maxLength,
+        });
         elementIdx = newSchema.length - 1;
       }
       /* if (["checkbox", "radio"].includes(type)) {
@@ -48,9 +75,25 @@ export function Formbricks({ id, name, label, placeholder, help, type }: Formbri
     <div className="formbricks-outer" data-type={type} data-family={type}>
       <div className="formbricks-wrapper">
         {type === "text" ? (
-          <Text name={name} label={label} elemId={elemId} placeholder={placeholder} />
+          <Text
+            name={name}
+            label={label}
+            elemId={elemId}
+            placeholder={placeholder}
+            validation={validationRules}
+            minLength={minLength}
+            maxLength={maxLength}
+          />
         ) : type === "textarea" ? (
-          <Textarea name={name} label={label} elemId={elemId} placeholder={placeholder} />
+          <Textarea
+            name={name}
+            label={label}
+            elemId={elemId}
+            placeholder={placeholder}
+            validation={validationRules}
+            minLength={minLength}
+            maxLength={maxLength}
+          />
         ) : type === "submit" ? (
           <button className="formbricks-input" type="submit" id={elemId}>
             {label}

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

@@ -1,15 +1,25 @@
 import React from "react";
 import { useFormContext } from "react-hook-form";
+import { UniversalInputProps } from "../Formbricks";
 import { Label } from "../shared/Label";
 
-interface TextProps {
-  name: string;
-  label?: string;
-  elemId: string;
-  placeholder?: string;
+export interface TextInputUniqueProps {
+  maxLength: number;
+  minLength: number;
+  placeholder: string;
 }
 
-export function Text({ name, label, elemId, placeholder }: TextProps) {
+type TextProps = UniversalInputProps & TextInputUniqueProps;
+
+export function Text({
+  name,
+  label,
+  elemId,
+  placeholder,
+  validation,
+  minLength = 0,
+  maxLength = 524288,
+}: TextProps) {
   const { register } = useFormContext();
   return (
     <>
@@ -20,7 +30,7 @@ export function Text({ name, label, elemId, placeholder }: TextProps) {
           type="text"
           id={elemId}
           placeholder={placeholder || ""}
-          {...register(name)}
+          {...(register(name), { required: validation?.includes("required"), minLength, maxLength })}
         />
       </div>
     </>

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

@@ -1,15 +1,25 @@
 import React from "react";
 import { useFormContext } from "react-hook-form";
+import { UniversalInputProps } from "../Formbricks";
 import { Label } from "../shared/Label";
 
-interface TextareaProps {
-  name: string;
-  label?: string;
-  elemId: string;
-  placeholder?: string;
+export interface TextInputUniqueProps {
+  maxLength: number;
+  minLength: number;
+  placeholder: string;
 }
 
-export function Textarea({ name, label, elemId, placeholder }: TextareaProps) {
+type TextareaProps = UniversalInputProps & TextInputUniqueProps;
+
+export function Textarea({
+  name,
+  label,
+  elemId,
+  placeholder,
+  validation,
+  minLength = 0,
+  maxLength = 524288,
+}: TextareaProps) {
   const { register } = useFormContext();
   return (
     <>
@@ -19,7 +29,7 @@ export function Textarea({ name, label, elemId, placeholder }: TextareaProps) {
           className="formbricks-input"
           id={elemId}
           placeholder={placeholder || ""}
-          {...register(name)}
+          {...(register(name), { required: validation?.includes("required"), minLength, maxLength })}
         />
       </div>
     </>

packages/react/src/lib/validation.ts

@@ -0,0 +1,12 @@
+export const getValidationRules = (validation: string) => {
+  const validationRules: string[] = [];
+  if (!validation) {
+    return validationRules;
+  }
+  for (const validationRule of validation.split("|")) {
+    if (validationRule === "required" || !validationRules.includes("required")) {
+      validationRules.push("required");
+    }
+  }
+  return validationRules;
+};

packages/tailwind-config/package.json

@@ -2,11 +2,9 @@
   "name": "@formbricks/tailwind-config",
   "version": "1.0.0",
   "main": "index.js",
+  "private": true,
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.3",
     "tailwindcss": "^3.1.8"
-  },
-  "publishConfig": {
-    "access": "public"
   }
 }