formaze 2.2.0 → 2.4.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.4.0",
 	"type": "module",
 	"keywords": [
 		"react",

package/dist/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>