add error messages to react lib, multiple bugfixes, minify styles.css for react lib

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formbricks/react",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "author": "Formbricks <hola@formbricks.com>",
   "description": "Building React forms has never been quicker.",
   "homepage": "https://formbricks.com",
@@ -19,12 +19,11 @@
   },
   "license": "MIT",
   "scripts": {
-    "build": "tsup --dts && tailwindcss -i ./src/styles.css -o ./dist/styles.css",
-    "dev": "concurrently \"tsup src/index.tsx --format esm,cjs --dts --external react --watch\" \"tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch\"",
+    "build": "tsup --dts && tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify",
+    "dev": "concurrently \"tsup --dts --external react --watch && generate-tailwind\" \"tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch\"",
     "clean": "rm -rf dist"
   },
   "devDependencies": {
-    "@formbricks/tailwind-config": "workspace:*",
     "@formbricks/tsconfig": "workspace:*",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
@@ -37,6 +36,7 @@
     "typescript": "^4.8.4"
   },
   "dependencies": {
+    "@hookform/error-message": "^2.0.1",
     "clsx": "^1.2.1",
     "react-hook-form": "^7.39.1"
   },

packages/react/postcss.config.js

@@ -1,13 +0,0 @@
-// If you want to use other PostCSS plugins, see the following:
-// https://tailwindcss.com/docs/using-with-preprocessors
-
-const config = require("@formbricks/tailwind-config/tailwind.config.js");
-
-module.exports = {
-  plugins: {
-    // Specifying the config is not necessary in most cases, but it is included
-    // here to share the same config across the entire monorepo
-    tailwindcss: { config },
-    autoprefixer: {},
-  },
-};

packages/react/src/components/Form.tsx

@@ -20,7 +20,7 @@ interface FormProps {
 
 export function Form({ onSubmit, children }: FormProps) {
   const [schema, setSchema] = useState<any>([]);
-  const methods = useForm();
+  const methods = useForm({ criteriaMode: "all", mode: "onChange" });
   const onFormSubmit = (data: any, event: React.BaseSyntheticEvent<object, any, any> | undefined) =>
     onSubmit({ data, schema, event });
   return (

packages/react/src/components/Inputs.tsx

@@ -1,3 +1,4 @@
+export * from "./inputs/Button";
 export * from "./inputs/Submit";
 export * from "./inputs/Text";
 export * from "./inputs/Textarea";

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

@@ -0,0 +1,31 @@
+import clsx from "clsx";
+import React, { useMemo } from "react";
+import { getElementId } from "../../lib/element";
+import { useEffectUpdateSchema } from "../../lib/schema";
+import { SVGComponent, UniversalInputProps } from "../../types";
+import ButtonComponent from "../shared/ButtonComponent";
+import { Help } from "../shared/Help";
+
+interface ButtonInputUniqueProps {
+  PrefixIcon?: SVGComponent;
+  SuffixIcon?: SVGComponent;
+  onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+}
+
+type FormbricksProps = ButtonInputUniqueProps & UniversalInputProps;
+
+const inputType = "button";
+
+export function Button(props: FormbricksProps) {
+  const elemId = useMemo(() => getElementId(props.id, props.name), [props.id, props.name]);
+  useEffectUpdateSchema(props, inputType);
+
+  return (
+    <div className={clsx("formbricks-outer", props.outerClassName)} data-type={inputType}>
+      <div className={clsx("formbricks-wrapper", props.wrapperClassName)}>
+        <ButtonComponent elemId={elemId} {...props} />
+      </div>
+      {props.help && <Help help={props.help} elemId={elemId} />}
+    </div>
+  );
+}

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

@@ -1,10 +1,15 @@
+import clsx from "clsx";
 import React, { useMemo } from "react";
 import { getElementId } from "../../lib/element";
 import { useEffectUpdateSchema } from "../../lib/schema";
-import { UniversalInputProps } from "../../types";
+import { SVGComponent, UniversalInputProps } from "../../types";
+import ButtonComponent from "../shared/ButtonComponent";
 import { Help } from "../shared/Help";
 
-interface SubmitInputUniqueProps {}
+interface SubmitInputUniqueProps {
+  PrefixIcon?: SVGComponent;
+  SuffixIcon?: SVGComponent;
+}
 
 type FormbricksProps = SubmitInputUniqueProps & UniversalInputProps;
 
@@ -15,11 +20,9 @@ export function Submit(props: FormbricksProps) {
   useEffectUpdateSchema(props, inputType);
 
   return (
-    <div className="formbricks-outer" data-type={inputType}>
-      <div className="formbricks-wrapper">
-        <button className="formbricks-input" type="submit" id={elemId}>
-          {props.label}
-        </button>
+    <div className={clsx("formbricks-outer", props.outerClassName)} data-type={inputType}>
+      <div className={clsx("formbricks-wrapper", props.wrapperClassName)}>
+        <ButtonComponent type="submit" elemId={elemId} {...props} />
       </div>
       {props.help && <Help help={props.help} elemId={elemId} />}
     </div>

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

@@ -4,9 +4,10 @@ import { useFormContext } from "react-hook-form";
 import { getElementId } from "../../lib/element";
 import { useEffectUpdateSchema } from "../../lib/schema";
 import { getValidationRules } from "../../lib/validation";
-import { UniversalInputProps } from "../../types";
+import { NameRequired, UniversalInputProps } from "../../types";
 import { Help } from "../shared/Help";
 import { Label } from "../shared/Label";
+import { Messages } from "../shared/Messages";
 
 interface TextInputUniqueProps {
   maxLength?: number;
@@ -14,7 +15,7 @@ interface TextInputUniqueProps {
   placeholder?: string;
 }
 
-type FormbricksProps = TextInputUniqueProps & UniversalInputProps;
+type FormbricksProps = TextInputUniqueProps & UniversalInputProps & NameRequired;
 
 const inputType = "text";
 
@@ -22,7 +23,10 @@ export function Text(props: FormbricksProps) {
   const elemId = useMemo(() => getElementId(props.id, props.name), [props.id, props.name]);
   useEffectUpdateSchema(props, inputType);
 
-  const { register } = useFormContext();
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
   const validationRules = getValidationRules(props.validation);
 
   return (
@@ -31,19 +35,31 @@ export function Text(props: FormbricksProps) {
         <Label label={props.label} elemId={elemId} />
         <div className={clsx("formbricks-inner", props.innerClassName)}>
           <input
-            className={clsx("formbricks-input", props.inputClassName)}
+            className={clsx("form-input", "formbricks-input", props.inputClassName)}
             type="text"
             id={elemId}
             placeholder={props.placeholder || ""}
+            aria-invalid={errors[props.name] ? "true" : "false"}
             {...register(props.name, {
-              required: validationRules?.includes("required"),
-              minLength: props.minLength,
-              maxLength: props.maxLength,
+              required: { value: validationRules?.includes("required"), 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`,
+              },
+              pattern: {
+                value: /\d+/,
+                message: "This input is number only.",
+              },
             })}
           />
         </div>
       </div>
       {props.help && <Help help={props.help} elemId={elemId} helpClassName={props.helpClassName} />}
+      <Messages errors={errors} {...props} />
     </div>
   );
 }

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

@@ -3,19 +3,20 @@ import { useFormContext } from "react-hook-form";
 import { getElementId } from "../../lib/element";
 import { useEffectUpdateSchema } from "../../lib/schema";
 import { getValidationRules } from "../../lib/validation";
-import { UniversalInputProps } from "../../types";
+import { NameRequired, UniversalInputProps } from "../../types";
 import { Help } from "../shared/Help";
 import { Label } from "../shared/Label";
+import { Messages } from "../shared/Messages";
 
 interface TextareaInputUniqueProps {
   cols?: number;
   maxLength?: number;
   minLength?: number;
   placeholder?: string;
-  rows?: string;
+  rows?: number;
 }
 
-type TextareaProps = TextareaInputUniqueProps & UniversalInputProps;
+type TextareaProps = TextareaInputUniqueProps & UniversalInputProps & NameRequired;
 
 const inputType = "textarea";
 
@@ -23,7 +24,10 @@ export function Textarea(props: TextareaProps) {
   const elemId = useMemo(() => getElementId(props.id, props.name), [props.id, props.name]);
   useEffectUpdateSchema(props, inputType);
 
-  const { register } = useFormContext();
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
   const validationRules = getValidationRules(props.validation);
 
   return (
@@ -35,6 +39,8 @@ export function Textarea(props: TextareaProps) {
             className="formbricks-input"
             id={elemId}
             placeholder={props.placeholder || ""}
+            cols={props.cols}
+            rows={props.rows}
             {...register(props.name, {
               required: validationRules?.includes("required"),
               minLength: props.minLength,
@@ -44,6 +50,7 @@ export function Textarea(props: TextareaProps) {
         </div>
       </div>
       {props.help && <Help help={props.help} elemId={elemId} />}
+      <Messages errors={errors} {...props} />
     </div>
   );
 }

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

@@ -0,0 +1,31 @@
+import clsx from "clsx";
+import React from "react";
+import { SVGComponent } from "../../types";
+
+interface ButtonProps {
+  elemId: string;
+  label?: string;
+  type?: "button" | "submit" | "reset";
+  inputClassName?: string;
+  onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+  PrefixIcon?: SVGComponent;
+  SuffixIcon?: SVGComponent;
+}
+
+export default function ButtonComponent({
+  inputClassName,
+  label,
+  onClick,
+  PrefixIcon,
+  SuffixIcon,
+  type = "button",
+  elemId,
+}: ButtonProps) {
+  return (
+    <button className={clsx("formbricks-input", inputClassName)} type={type} id={elemId} onClick={onClick}>
+      {PrefixIcon && <PrefixIcon className={clsx("formbricks-prefix-icon")} />}
+      {label}
+      {SuffixIcon && <SuffixIcon className={clsx("formbricks-suffix-icon")} />}
+    </button>
+  );
+}

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

@@ -0,0 +1,48 @@
+import { ErrorMessage } from "@hookform/error-message";
+import clsx from "clsx";
+import React from "react";
+import { FieldError, FieldErrorsImpl, Merge } from "react-hook-form";
+
+interface HelpProps {
+  name: string;
+  errors?: Partial<
+    FieldErrorsImpl<{
+      [x: string]: any;
+    }>
+  >;
+  messagesClassName?: string;
+  messageClassName?: string;
+}
+
+export function Messages({ errors, messagesClassName, messageClassName, name }: HelpProps) {
+  return (
+    <>
+      {/* <ul className={clsx("formbricks-messages", messagesClassName)}>
+        {console.log(messages)}
+        <li
+          className={clsx("formbricks-message", messageClassName)}
+          id="input_1-rule_required"
+          data-message-type="validation">
+          FormKit Input is required.
+        </li>
+      </ul> */}
+      <ErrorMessage
+        errors={errors}
+        name={name}
+        render={({ messages }) =>
+          messages &&
+          Object.entries(messages).map(([type, message]) => (
+            <ul className={clsx("formbricks-messages", messagesClassName)}>
+              <li
+                className={clsx("formbricks-message", messageClassName)}
+                id={`${name}-${type}`}
+                data-message-type={type}>
+                {message}
+              </li>
+            </ul>
+          ))
+        }
+      />
+    </>
+  );
+}

packages/react/src/lib/element.ts

@@ -1,4 +1,4 @@
 import { generateId } from "./utils";
 
-export const getElementId = (id: string | undefined, name: string) =>
-  typeof id !== "undefined" ? id : `${name}=${generateId(3)}`;
+export const getElementId = (id: string | undefined, name?: string) =>
+  typeof id !== "undefined" ? id : name ? name : generateId(3);

packages/react/src/styles.css

@@ -7,21 +7,33 @@
 }
 
 .formbricks-label {
-  @apply block text-sm font-medium text-gray-700;
+  @apply block text-base font-medium text-gray-700 font-sans sm:text-sm;
 }
 
 button.formbricks-input {
-  @apply my-2 inline-flex items-center rounded-md border border-transparent bg-slate-600 px-3 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2;
+  @apply my-2 inline-flex items-center rounded-md border border-transparent bg-slate-600 px-3 py-2 text-base font-medium leading-4 text-white shadow-sm hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 sm:text-sm;
 }
 
 input.formbricks-input {
-  @apply block rounded-md border-gray-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm;
+  @apply form-input text-base block rounded-md border-gray-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm;
 }
 
 textarea.formbricks-input {
-  @apply block rounded-md border-gray-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm;
+  @apply form-textarea text-base font-sans block rounded-md border-gray-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm;
 }
 
 .formbricks-help {
-  @apply text-sm text-gray-500;
+  @apply font-sans text-base sm:text-sm text-gray-500;
+}
+
+.formbricks-prefix-icon {
+  @apply font-sans inline h-4 w-4 -ml-1 mr-2;
+}
+
+.formbricks-messages {
+  @apply m-0 p-0 list-none;
+}
+
+.formbricks-message {
+  @apply font-sans text-base sm:text-sm text-red-500;
 }

packages/react/src/types.ts

@@ -1,7 +1,9 @@
+export type SVGComponent = React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+
 export interface UniversalInputProps {
   id?: string;
   help?: string;
-  name: string;
+  name?: string;
   label?: string;
   validation?: string;
   outerClassName?: string;
@@ -9,4 +11,10 @@ export interface UniversalInputProps {
   innerClassName?: string;
   inputClassName?: string;
   helpClassName?: string;
+  messagesClassName?: string;
+  messageClassName?: string;
+}
+
+export interface NameRequired {
+  name: string;
 }

packages/react/tailwind.config.js

@@ -1,3 +1,15 @@
-const config = require("@formbricks/tailwind-config/tailwind.config.js");
-
-module.exports = config;
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  corePlugins: {
+    preflight: false,
+  },
+  content: [],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require("@tailwindcss/forms")({
+      strategy: "class", // only generate classes
+    }),
+  ],
+};

pnpm-lock.yaml

@@ -20,6 +20,7 @@ importers:
       '@formbricks/tailwind-config': workspace:*
       '@formbricks/tsconfig': workspace:*
       '@formbricks/ui': workspace:*
+      '@heroicons/react': ^2.0.13
       '@types/node': ^18.11.9
       '@types/react': ^18.0.25
       '@types/react-dom': ^18.0.8
@@ -34,6 +35,7 @@ importers:
     dependencies:
       '@formbricks/react': link:../../packages/react
       '@formbricks/ui': link:../../packages/ui
+      '@heroicons/react': 2.0.13_react@18.2.0
       next: 13.0.4_biqbaboplfbrettd7655fr4n2y
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
@@ -211,6 +213,7 @@ importers:
     specifiers:
       '@formbricks/tailwind-config': workspace:*
       '@formbricks/tsconfig': workspace:*
+      '@hookform/error-message': ^2.0.1
       '@types/react': ^18.0.25
       '@types/react-dom': ^18.0.8
       clsx: ^1.2.1
@@ -223,6 +226,7 @@ importers:
       tsup: ^6.4.0
       typescript: ^4.8.4
     dependencies:
+      '@hookform/error-message': 2.0.1_xeasdhygclnvhqc4vip3thr4da
       clsx: 1.2.1
       react-hook-form: 7.39.4_react@18.2.0
     devDependencies:
@@ -2169,6 +2173,18 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@hookform/error-message/2.0.1_xeasdhygclnvhqc4vip3thr4da:
+    resolution: {integrity: sha512-U410sAr92xgxT1idlu9WWOVjndxLdgPUHEB8Schr27C9eh7/xUnITWpCMF93s+lGiG++D4JnbSnrb5A21AdSNg==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+      react-hook-form: ^7.0.0
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-hook-form: 7.39.4_react@18.2.0
+    dev: false
+
   /@humanwhocodes/config-array/0.10.7:
     resolution: {integrity: sha512-MDl6D6sBsaV452/QSdX+4CXIjZhIcI0PELsxUjk4U828yd58vk3bTIvk/6w5FY+4hIy9sLW0sfrV7K7Kc++j/w==}
     engines: {node: '>=10.10.0'}