formaze 1.0.3 → 1.0.4

package/README.md

@@ -27,49 +27,49 @@ import "formaze/dist/style.css";
 
 // create the validation schema
 const formSchema = useFormSchema({
-	email: {
-		type: "email",
-	},
-	password: {
-		type: "password",
-		minLength: {
-			value: 8, // by default 6
-		},
+  email: {
+	type: "email",
+  },
+  password: {
+	type: "password",
+	minLength: {
+	 value: 8, // by default 6
 	},
+  },
 });
 
 // create the form
 const Form = createFormValidator<typeof formSchema>();
 
 export function RegistrationForm() {
-	function handleSubmit(data: z.infer<typeof formSchema>) {
-		const result = formSchema.safeParse(data);
-
-		if (!result.success) throw new Error("Invalid inputs");
-
-		console.log(data);
-	}
-
-	return (
-		<Form schema={formSchema} onSubmit={handleSubmit}>
-			<Form.Input
-			 	type="email" 
-				name="email" 
-				placeholder="Enter your email"
-			/>
-			<Form.Input
-				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>
-	);
+  function handleSubmit(data: z.infer<typeof formSchema>) {
+   const result = formSchema.safeParse(data);
+
+	if (!result.success) throw new Error("Invalid inputs");
+
+	console.log(data);
+  }
+
+  return (
+	 <Form schema={formSchema} onSubmit={handleSubmit}>
+	  <Form.Input
+		type="email" 
+		name="email" 
+		placeholder="Enter your email"
+	  />
+	  <Form.Input
+		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>
+  );
 }
 ```
 
@@ -79,33 +79,32 @@ The useFormSchema hook allows you to define validation rules for each field in t
 
 ```js
 const formSchema = useFormSchema({
-	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",
+ },
 });
 ```
 
@@ -115,8 +114,8 @@ Though, you can directly use `zod` to define schema as well and pass it to the F
 import { z } from "zod";
 
 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"})
 });
 ```
 
@@ -192,4 +191,120 @@ You just have to add `"use client"` directive at the top of your file where you
 // your code
 ```
 
+## Components and Hooks
+
+### `createFormValidator`
+
+The createFormValidator function returns a Form component with built-in form validation using Zod and React Hook Form. It simplifies the creation of forms that adhere to a Zod schema for type-safe validation.
+
+**Returned Form Component Props**:
+
+**schema: `T`**
+
+- Type: `T` (A Zod schema)
+
+- Description:
+The 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.
+
+- Example:
+
+```tsx
+const schema = useFormSchema({
+  email: { type: "email" },
+  password: { type: "string", minLength: { value: 8 } },
+});
+
+const Form = createFormValidator<typeof schema>();
+
+<Form schema={schema} onSubmit={handleSubmit} />;
+```
+**onSubmit: `SubmitHandler<z.infer<T>>`**
+
+- Type: `SubmitHandler<z.infer<T>>`
+
+- Description:
+The onSubmit prop accepts a function that is called when the form is successfully submitted. The function receives the form's validated data as its argument, which is inferred from the useFormSchema (using Zod) schema (z.infer<T>).
+
+- Example:
+
+```tsx
+const schema = useFormSchema({
+  email: { type: "email" },
+  password: { type: "string" },
+});
+
+const onSubmit = (data: z.infer<typeof schema>) => {
+  console.log(data); // { email: "test@example.com", password: "securePassword" }
+};
+
+<Form schema={schema} onSubmit={onSubmit} />;
+```
+
+**defaultValues?: `DefaultValues<z.infer<T>>`**
+- Type: `DefaultValues<z.infer<T>>`
+
+- Description:
+This optional prop allows you to specify default values for the form fields. The keys should exactly match the fields defined in the useFormSchema/Zod schema, and the values should be of the appropriate type.
+
+- Example:
+
+```tsx
+const schema = useFormSchema({
+  email: { type: "email" },
+  password: { type: "string" },
+});
+
+const defaultValues = {
+  email: "example@example.com",
+  password: "",
+};
+
+<Form schema={schema} defaultValues={defaultValues} onSubmit={onSubmit} />;
+```
+
+**children: React.ReactNode**
+- 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.
+
+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 schema={schema} onSubmit={onSubmit} defaultValues={defaultValues}>
+  <Form.Input name="email" placeholder="Email" />
+  <Form.Input type="password" name="password" placeholder="Password" />
+  <button type="submit">Submit</button>
+</Form>
+```
+
+### `useFormSchema`
+
+useFormSchema is a utility function that generates a Zod schema based on the provided configuration. It supports various field types such as string, email, password, number, date, and boolean, along with validation rules like minLength, maxLength, regex, etc.
+
+#### Arguments
+
+**schemaConfig: `SchemaConfig<T>`**
+
+- Type: `SchemaConfig<T>`
+
+- Description:
+The schemaConfig defines the fields and validation rules for the schema. Each field in the config should specify its type (string, email, password, etc.), whether it is optional, and any additional validation logic, such as minLength, maxLength, or regex.
+
+- Example:
+
+```tsx
+const schema = useFormSchema({
+  email: { type: "email" },
+  password: {
+    type: "string",
+    minLength: { value: 8, message: "Password must be at least 8 characters long" },
+  },
+});
+```
+
+This schema can then be passed to the Form component returned by `createFormValidator`.
+
 ## (That's it!)

package/package.json

@@ -3,7 +3,7 @@
 	"description": "An easy form validation package for react, built by using React hook form and zod library",
 	"main": "dist/formaze.js",
 	"types": "dist/index.d.ts",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"type": "module",
 	"keywords": [
 		"react",
@@ -14,7 +14,7 @@
 	],
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/Its-Samir/formaze"
+		"url": "git+https://github.com/Its-Samir/formaze.git"
 	},
 	"license": "MIT",
 	"scripts": {