formaze 2.2.0 → 2.3.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { SubmitHandler, DefaultValues } from "react-hook-form";
+import { DefaultValues, SubmitHandler } from "react-hook-form";
 
 export interface FormProps<T extends z.ZodSchema>
 	extends React.FormHTMLAttributes<HTMLFormElement> {
@@ -12,58 +12,58 @@ export interface FormProps<T extends z.ZodSchema>
 }
 
 // @ts-ignore
-export interface InputProps<T extends z.ZodSchema>
+interface InputProps<T extends z.ZodSchema>
 	extends React.InputHTMLAttributes<HTMLInputElement> {
 	name: keyof z.infer<T>;
-	label: string;
+	label?: string;
 }
 
-export interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
+interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
 	name: string;
 	children: React.ReactNode;
 }
 
-export type OptionalAndCustomMessageConfig = {
+type OptionalAndCustomMessageConfig = {
 	optional?: boolean;
 	customMessage?: string;
 };
 
-export type StringFieldConfig = {
+type StringFieldConfig = {
 	type: "string";
 	minLength?: { value: number; message?: string };
 	maxLength?: { value: number; message?: string };
 	regex?: { value: RegExp; message?: string };
 };
 
-export type EmailFieldConfig = {
+type EmailFieldConfig = {
 	type: "email";
 	regex?: { value: RegExp; message?: string };
 };
 
-export type PasswordFieldConfig = {
+type PasswordFieldConfig = {
 	type: "password";
 	minLength?: { value: number; message?: string };
 	maxLength?: { value: number; message?: string };
 	regex?: { value: RegExp; message?: string };
 };
 
-export type NumberFieldConfig = {
+type NumberFieldConfig = {
 	type: "number";
 	min?: { value: number | string | Date; message?: string };
 	max?: { value: number | string | Date; message?: string };
 };
 
-export type DateFieldConfig = {
+type DateFieldConfig = {
 	type: "date";
 	min?: { value: string; message?: string };
 	max?: { value: string; message?: string };
 };
 
-export type BooleanFieldConfig = {
+type BooleanFieldConfig = {
 	type: "boolean";
 };
 
-export type FieldConfig = OptionalAndCustomMessageConfig &
+type FieldConfig = OptionalAndCustomMessageConfig &
 	(
 		| StringFieldConfig
 		| EmailFieldConfig
@@ -73,13 +73,11 @@ export type FieldConfig = OptionalAndCustomMessageConfig &
 		| BooleanFieldConfig
 	);
 
-export type SchemaConfig<T extends Record<string, FieldConfig>> = {
+type SchemaConfig<T extends Record<string, FieldConfig>> = {
 	[K in keyof T]: T[K];
 };
 
-export type SchemaKeyValuePair<
-	T extends SchemaConfig<Record<string, FieldConfig>>
-> = {
+type SchemaKeyValuePair<T extends SchemaConfig<Record<string, FieldConfig>>> = {
 	[K in keyof T]: T[K]["optional"] extends true
 		? z.ZodOptional<
 				T[K]["type"] extends "email" | "password" | "string"
@@ -102,3 +100,102 @@ export type SchemaKeyValuePair<
 		? z.ZodDate
 		: z.ZodTypeAny;
 };
+
+/**
+ * Generates a Form component with built-in validation using Zod and React Hook Form.
+ * The returned Form component also includes an Input component for form fields with automatic schema-based validation.
+ *
+ * @template T - The Zod schema used to define the structure and validation rules for the form.
+ * @param {T} formSchema - Zod schema generated through makeFormSchema or directly from Zod.
+ * @returns {{
+ *   ({schema, children, className, onSubmit, mode, ...props}: FormProps<T>): JSX.Element;
+ *   Input: ({label, name, className, ...props}: InputProps<T>) => JSX.Element;
+ * }} - The generated Form component that supports schema-based form handling and an Input component for each form field.
+ *
+ * @component Form
+ * @param {T} schema - Optional Zod schema defining the form fields and validation rules.
+ * @param {SubmitHandler<z.infer<T>>} onSubmit - Function to handle form submission after successful validation.
+ * @param {DefaultValues<z.infer<T>>} [defaultValues] - Optional default values to pre-populate the form fields.
+ * @param {React.ReactNode} children - Form fields and other JSX components, including Form.Input components.
+ * @param {string} [className] - Optional class for the form element.
+ * @param {string} mode - Optional mode for when to trigger validation error. Default is onSubmit.
+ *
+ * @component Input
+ * @param {keyof z.infer<T>} name - The name of the form field, matching the key of the schema.
+ * @param {string} label - Label for the form input.
+ * @param {string} [className] - Optional class for the input element.
+ *
+ * @example
+ * // Create a form schema
+ * const schema = makeFormSchema({
+ *   email: { type: "email" },
+ *   password: { type: "string", minLength: { value: 8 } },
+ * });
+ *
+ * // Generate the Form component
+ * const MyForm = createFormValidator(schema);
+ *
+ * <MyForm onSubmit={(data) => {}}>
+ *   <MyForm.Input name="email" label="Email" type="email" />
+ *   <MyForm.Input name="password" label="Password" type="password" />
+ *   <button type="submit">Submit</button>
+ * </MyForm>;
+ */
+
+declare const createFormValidator: <T extends z.ZodSchema>(
+	formSchema: T
+) => {
+	({
+		schema,
+		onSubmit,
+		children,
+		className,
+		...props
+	}: FormProps<T>): JSX.Element;
+	Input({ name, label, className, ...props }: InputProps<T>): JSX.Element;
+};
+
+/**
+ * Generates a Zod schema based on the provided configuration.
+ * This utility function is useful for creating dynamic form schemas with validation rules.
+ *
+ * @template T - The shape of the schema config, where T extends a record of field configurations.
+ *
+ * @param {SchemaConfig<T>} schemaConfig - An object that defines the fields and validation rules for the form.
+ * Each key in the object represents a form field, and its value specifies the field's type, optional status, and any additional validation logic.
+ *
+ * @returns {z.ZodObject<T>} - Returns a Zod schema that can be used for form validation.
+ *
+ * @example
+ * const schema = makeFormSchema({
+ *   email: { type: "email" },
+ *   password: {
+ *     type: "string",
+ *     minLength: { value: 8 },
+ *   },
+ * });
+ */
+
+declare const makeFormSchema: <
+	T extends SchemaConfig<Record<string, FieldConfig>>
+>(
+	schemaConfig: SchemaConfig<T>
+) => z.ZodObject<
+	SchemaKeyValuePair<T>,
+	"strip",
+	z.ZodTypeAny,
+	{
+		[k in keyof z.objectUtil.addQuestionMarks<
+			z.baseObjectOutputType<SchemaKeyValuePair<T>>,
+			any
+		>]: z.objectUtil.addQuestionMarks<
+			z.baseObjectOutputType<SchemaKeyValuePair<T>>,
+			any
+		>[k];
+	},
+	{
+		[k_1 in keyof z.baseObjectInputType<
+			SchemaKeyValuePair<T>
+		>]: z.baseObjectInputType<SchemaKeyValuePair<T>>[k_1];
+	}
+>;

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Easily build forms with custom validation logic for React",
 	"main": "dist/formaze.js",
 	"types": "dist/index.d.ts",
-	"version": "2.2.0",
+	"version": "2.3.0",
 	"type": "module",
 	"keywords": [
 		"react",