formaze 1.0.9 → 2.0.1

package/README.md

@@ -1,9 +1,9 @@
-# Formaze: A stomizable Form Validation package for React
+# Formaze: An Easy Form Builder for React
 
-Formaze is a flexible and customizable form validation package for react built with `React Hook Form`, `Zod`, and `TailwindCSS`. It provides an easy way to define form validation schemas and handles complex form validation logic efficiently with proper type-safety.
+Formaze is a flexible and customizable form builder for React built with `React Hook Form`, `Zod`, and `TailwindCSS`. It provides an easy way to build forms with custom validation schemas and handles complex form validation logic efficiently with proper type-safety.
 
 -  Supports multiple field types such as `string`, `email`, `password`, `number`, `date`, and `boolean`.
--  Efficient utilization of zod's built-in validation like `min`, `max`, `regex`, and `optional`.
+-  Efficient utilization of Zod's built-in validation like `min`, `max`, `regex`, and `optional`.
 -  Custom error messages.
 
 ## Installation
@@ -23,108 +23,108 @@ npm install formaze
 // "use client"
 import { z } from "zod";
 import { makeFormSchema, createFormValidator } from "formaze";
-/* pre-styled css (you can check the styling guide below) */
+/* pre-styled CSS (you can check the styling guide below) */
 import "formaze/dist/style.css";
 
 // create the validation schema
 const formSchema = makeFormSchema({
- email: { type: "email" },
- password: { type: "password", minLength: { value: 8 } },
+	email: { type: "email" },
+	password: { type: "password", minLength: { value: 8 } },
 });
 
 // create the form
 const Form = createFormValidator(formSchema);
 
 export function MyForm() {
- // for TypeScript
- function handleSubmit(data: z.infer<typeof formSchema>) {
-  const result = formSchema.safeParse(data);
-
-  if (!result.success) throw new Error("Invalid inputs");
-
-  console.log(data);
- }
-
-// for JavaScript
-// /**@param {import("zod").infer<typeof formSchema>} data */
-// function handleSubmit(data) {
-//  const result = formSchema.safeParse(data);
-
-//  if (!result.success) throw new Error("Invalid inputs");
-
-//  console.log(data);
-// }
-
- return (
-  <Form onSubmit={handleSubmit}>
-   <Form.Input
-    label="Email"
-    type="email"
-    name="email"
-    placeholder="Enter your email"
-   />
-   <Form.Input
-    label="Password"
-    type="password"
-    name="password"
-    placeholder="Enter your password"
-   />
-   <button
-    className="rounded-md bg-blue-500 py-1 px-3 text-white hover:bg-blue-600"
-    type="submit"
-   >
-    Submit
-   </button>
-  </Form>
- );
+	// for TypeScript
+	function handleSubmit(data: z.infer<typeof formSchema>) {
+		const result = formSchema.safeParse(data);
+
+		if (!result.success) throw new Error("Invalid inputs");
+
+		console.log(data);
+	}
+
+	// for JavaScript
+	// /**@param {import("zod").infer<typeof formSchema>} data */
+	// function handleSubmit(data) {
+	//  const result = formSchema.safeParse(data);
+
+	//  if (!result.success) throw new Error("Invalid inputs");
+
+	//  console.log(data);
+	// }
+
+	return (
+		<Form onSubmit={handleSubmit}>
+			<Form.Input
+				label="Email"
+				type="email"
+				name="email"
+				placeholder="Enter your email"
+			/>
+			<Form.Input
+				label="Password"
+				type="password"
+				name="password"
+				placeholder="Enter your password"
+			/>
+			<button
+				className="rounded-md bg-blue-500 py-1 px-3 text-white hover:bg-blue-600"
+				type="submit"
+			>
+				Submit
+			</button>
+		</Form>
+	);
 }
 ```
 
 ## Define Validation Schema
 
-The makeFormSchema method allows you to define validation rules for each field in the form. You can specify field types (`string`, `email`, `password`, `number`, `date`, `boolean`) along with their specific validation constraints like `minLength`, `maxLength`, `min`, `max`, `regex`, and `optional`.
+The makeFormSchema method allows you to define validation rules for each field in the form. You can specify field types (`string`, `email`, `password`, `number`, `date`, `boolean`) along with specific validation constraints like `minLength`, `maxLength`, `min`, `max`, `regex`, and `optional`.
 
 ```js
 const formSchema = makeFormSchema({
-email: {
- type: "email",
-  customMessage: "A valid email is required",
- },
- password: {
-  type: "password",
-  minLength: {
-   value: 8,
-   message: "Password must be at least 8 characters",
-  },
-  maxLength: {
-   value: 16,
-   message: "Password must be less than 16 characters",
-  },
- },
- username: {
-  type: "string",
-  maxLength: {
-   value: 12,
-   message: "Username must be less than 12 characters",
-  },
-  customMessage: "Username must not be empty",
- },
- terms: {
-  type: "boolean",
-  customMessage: "You must accept the terms to continue",
- },
+	email: {
+		type: "email",
+		customMessage: "A valid email is required",
+	},
+	password: {
+		type: "password",
+		minLength: {
+			value: 8,
+			message: "Password must be at least 8 characters",
+		},
+		maxLength: {
+			value: 16,
+			message: "Password must be less than 16 characters",
+		},
+	},
+	username: {
+		type: "string",
+		maxLength: {
+			value: 12,
+			message: "Username must be less than 12 characters",
+		},
+		customMessage: "Username must not be empty",
+	},
+	terms: {
+		type: "boolean",
+		customMessage: "You must accept the terms to continue",
+	},
 });
 ```
 
-Though, you can directly use `zod` to define schema as well and pass it to the Form props created through `createFormValidator` method.
+You can also directly use `Zod` to define schema as well and pass it to the Form props created through `createFormValidator` method.
 
 ```tsx
 import { z } from "zod";
 import { createFormValidator } from "formaze";
 
 const formSchema = z.object({
- email: z.string().email(),
- name: z.string().min(3, { message: "Required" }),
+	email: z.string().email(),
+	name: z.string().min(3, { message: "Required" }),
 });
 
 const Form = createFormValidator(formSchema);
@@ -145,58 +145,57 @@ You can specify the following validation options for each field:
 
 -  For Tailwind (pre-styled)
 
-Follow the [Official Tailwind Docs](https://tailwindcss.com/docs/installation/framework-guides) for initializing project with vite or next.js
+Follow the [Official Tailwind Docs](https://tailwindcss.com/docs/installation/framework-guides) for initializing project with vite or next.js.
 
-You can add your own styles or import the below css (styled with tailwind css) file into the main or App component or the component where the form is being used
+You can add your own styles or import the CSS below (styled with TailwindCSS) file into the main or App component or the component where the form is being used.
 
 ```js
 import "formaze/dist/style.css";
 ```
 
--  For Pure CSS
-   Here are the css classes with default styles, add it into main css file
+-  For Pure CSS, here are the CSS classes with default styles, add them to your main CSS file
 
 ```css
 .form-control {
- display: flex;
- flex-direction: column;
- justify-content: center;
- gap: 1rem;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	gap: 1rem;
 }
 
 .form-control .form-field {
- display: flex;
- flex-direction: column;
- justify-content: center;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
 }
 
 .form-control .form-field .form-input {
- padding: 10px 1rem;
- border-radius: 10px;
- border-width: 1px;
- border-color: rgb(209 213 219);
+	padding: 10px 1rem;
+	border-radius: 10px;
+	border-width: 1px;
+	border-color: rgb(209 213 219);
 }
 
 .form-control .form-field .form-input:focus {
- border-color: rgb(59 130 246);
- outline: none;
+	border-color: rgb(59 130 246);
+	outline: none;
 }
 
 .form-control .form-field-error-text {
- color: rgb(220, 38, 38);
- font-size: 0.875rem;
+	color: rgb(220, 38, 38);
+	font-size: 0.875rem;
 }
 
 /* or */
 
 .form-control .form-field-error {
- color: rgb(220, 38, 38);
+	color: rgb(220, 38, 38);
 }
 ```
 
 ## For Next.js (app router)
 
-You just have to add `"use client"` directive at the top of your file where you are using this form and its related methods
+You just need to add `"use client"` directive at the top of your file where you are using this form and its related methods
 
 ```tsx
 "use client";
@@ -222,14 +221,14 @@ The createFormValidator function accepts an argument which is a type of zod sche
 -  Type: `T` (A Zod schema) (optional)
 
 -  Description:
-   This optional schema prop is a schema used to define the structure and validation rules for the form. This schema determines the expected fields, their types, and any validation logic, such as required fields, minimum/maximum values, regex patterns, etc. **NOTE: In future version this prop will be deprecated. As of now this prop is no longer needed.**
+   This optional schema prop defines the structure and validation rules for the form. This schema determines the expected fields, their types, and any validation logic, such as required fields, minimum/maximum values, regex etc. **NOTE: In future version this prop will be deprecated. As of now this prop is no longer needed.**
 
 -  Example:
 
 ```tsx
 const schema = makeFormSchema({
- email: { type: "email" },
- password: { type: "string", minLength: { value: 8 } },
+	email: { type: "email" },
+	password: { type: "string", minLength: { value: 8 } },
 });
 
 const Form = createFormValidator(schema);
@@ -248,14 +247,14 @@ const Form = createFormValidator(schema);
 
 ```tsx
 const schema = makeFormSchema({
- email: { type: "email" },
- password: { type: "string" },
+	email: { type: "email" },
+	password: { type: "string" },
 });
 
 const Form = createFormValidator(schema);
 
 const handleSubmit = (data: z.infer<typeof schema>) => {
- console.log(data); // { email: "test@example.com", password: "securePassword" }
+	console.log(data); // { email: "test@example.com", password: "securePassword" }
 };
 
 <Form onSubmit={handleSubmit} />;
@@ -272,15 +271,15 @@ const handleSubmit = (data: z.infer<typeof schema>) => {
 
 ```tsx
 const schema = makeFormSchema({
- email: { type: "email" },
- password: { type: "string" },
+	email: { type: "email" },
+	password: { type: "string" },
 });
 
 const Form = createFormValidator(schema);
 
 const defaultValues = {
- email: "example@example.com",
- password: "",
+	email: "example@example.com",
+	password: "",
 };
 
 <Form defaultValues={defaultValues} />;
@@ -291,17 +290,17 @@ const defaultValues = {
 -  Type: `React.ReactNode`
 
 -  Description:
-   The children prop accepts form inputs and other JSX elements to be rendered inside the Form component. It specifically expects components like Form.Input, which is designed to integrate with the form's validation logic. The Form.Input component handles binding form fields to the Zod schema, ensuring that validation rules are properly applied.
+   The children prop accepts form inputs and other JSX elements to be rendered inside the Form component. It specifically expects components like `Form.Input`, which is designed to integrate with the form's validation logic. The `Form.Input` component handles binding form fields to the Zod schema, ensuring that validation rules are properly applied.
 
-You can include Form.Input for each form field, along with any other elements like buttons or additional form elements. The Form.Input automatically manages validation states based on the schema.
+You can include `Form.Input` for each form field, along with any other elements like buttons or additional form elements. The `Form.Input` automatically manages validation states based on the schema.
 
 -  Example:
 
 ```tsx
 <Form onSubmit={onSubmit} defaultValues={defaultValues}>
- <Form.Input type="email" name="email" placeholder="Email" />
- <Form.Input type="password" name="password" placeholder="Password" />
- <button type="submit">Submit</button>
+	<Form.Input type="email" name="email" placeholder="Email" />
+	<Form.Input type="password" name="password" placeholder="Password" />
+	<button type="submit">Submit</button>
 </Form>
 ```
 
@@ -326,15 +325,18 @@ The Form.Input component is a form input field that is connected to a Zod-based
 
 **Props:**
 
--  name: `keyof z.infer<T>`
+name: `keyof z.infer<T>`
+
 -  Description:
    The name of the form field, which should correspond to one of the keys in the Zod schema used in the form. This connects the input to the form's validation logic.
 
--  label: `string` (optional)
+label: `string` (optional)
+
 -  Description:
    A label for the form field. This is used for displaying a descriptive text for the input field.
 
--  ...props: `React.HTMLAttributes<HTMLInputElement>`
+...props: `React.InputHTMLAttributes<HTMLInputElement>`
+
 -  Description:
    Any additional props that can be passed to an HTML input element. These props allow you to customize the input field, such as adding a placeholder, className, type, etc.
 
@@ -355,14 +357,14 @@ The makeFormSchema is a function that generates a Zod schema based on the provid
 
 ```tsx
 const schema = makeFormSchema({
- email: { type: "email" },
- password: {
-  type: "string",
-  minLength: {
-   value: 8,
-   message: "Password must be at least 8 characters long",
-  },
- },
+	email: { type: "email" },
+	password: {
+		type: "string",
+		minLength: {
+			value: 8,
+			message: "Password must be at least 8 characters long",
+		},
+	},
 });
 ```
 
@@ -372,14 +374,17 @@ This schema can then be passed to the Form component returned by `createFormVali
 
 1. The `createFormValidator` has been changed and now it is accepting an argument which is a type of zod schema generated through `makeFormSchema` or directly from `Zod` and the rest of the logic will be the same as before.
 
-In order to give proper type support for JavaScript project and to simplify the defining process this change has been made.
+In order to give proper type support for JavaScript projects and to simplify the defining process this change has been made.
 
 **From this**
-```tsx 
+
+```tsx
 const Form = createFormValidator<typeof formSchema>(); ❌
 ```
+
 **To this**
-```tsx 
+
+```tsx
 const Form = createFormValidator(formSchema); ✔
 ```
 

package/package.json

@@ -1,9 +1,9 @@
 {
 	"name": "formaze",
-	"description": "An easy form validation package for react, built by using React hook form and zod library",
+	"description": "Easily build forms with custom validation logic for React",
 	"main": "dist/formaze.js",
 	"types": "dist/index.d.ts",
-	"version": "1.0.9",
+	"version": "2.0.1",
 	"type": "module",
 	"keywords": [
 		"react",