@idem.agency/form-builder 0.0.11 → 0.0.13

package/dist/index.d.cts

@@ -10,6 +10,19 @@ declare const fieldShema: z.ZodObject<{
 }, z.core.$strip>;
 type TField = z.infer<typeof fieldShema>;
 //#endregion
+//#region src/plugins/validation/types/index.d.ts
+interface IUserRule {
+  code: string;
+  fn: (value: any, data: FormData, args: string[]) => boolean;
+  message: string;
+}
+//#endregion
+//#region src/plugins/validation/provider.d.ts
+type TValidator = {
+  rules?: IUserRule[];
+  onSubmit?: boolean;
+};
+//#endregion
 //#region src/shared/types/common.d.ts
 type ConfigFunctionComponent<P> = FC<P> & {
   fieldProps?: string[];
@@ -19,21 +32,14 @@ type RC<T = {}> = ConfigFunctionComponent<T & {
   children?: ReactNode;
 }>;
 type FormData = Record<string, any>;
-interface IRule {
-  getName: () => string;
-  validate: (value: string, formData: FormData) => boolean;
-  message: () => string;
-}
 type FormFieldBase = {
-  validation?: (string | IRule)[];
+  validation?: string[];
   viewConfig?: TGroupRules;
 } & TField;
 type FormFieldConfig = FormFieldBase & Record<string, any>;
 type FormElementProps<F extends FormFieldConfig = FormFieldConfig> = {
   field: F;
-  builder: TDynamicBuilder;
-  plugins: FormElementRegistry;
-  path: string[];
+  path: string;
   value: any;
   errors?: Record<string, string>;
   onChange: (value: any) => void;
@@ -44,16 +50,12 @@ type TFormBuilder = {
   formData?: FormData;
   className?: string;
   layout: FormFieldConfig[];
-  plugins: FormElementRegistry;
+  fields: FormElementRegistry;
+  validator?: TValidator;
   onChange?: (formData: any) => void;
   onSubmit?: (formData: any) => void;
   children?: ReactNode;
 };
-type TDynamicBuilder = RC<{
-  layout: FormFieldConfig[];
-  plugins: FormElementRegistry;
-  path?: string[];
-}>;
 type TCommonRule = {
   operator: string;
   field: string;
@@ -82,5 +84,5 @@ type FormGroupConfig = FormFieldBase & {
 };
 declare const FormGroup: RC<FormElementProps<FormGroupConfig>>;
 //#endregion
-export { FormBuilder, type FormBuilderRef, type FormElementProps, type FormElementRegistry, type FormFieldConfig, FormGroup, type IRule, type TGroupRules, TextField, fieldShema };
+export { FormBuilder, type FormBuilderRef, type FormElementProps, type FormElementRegistry, type FormFieldConfig, FormGroup, type TGroupRules, TextField, fieldShema };
 //# sourceMappingURL=index.d.cts.map

package/dist/index.d.mts

@@ -10,6 +10,19 @@ declare const fieldShema: z.ZodObject<{
 }, z.core.$strip>;
 type TField = z.infer<typeof fieldShema>;
 //#endregion
+//#region src/plugins/validation/types/index.d.ts
+interface IUserRule {
+  code: string;
+  fn: (value: any, data: FormData, args: string[]) => boolean;
+  message: string;
+}
+//#endregion
+//#region src/plugins/validation/provider.d.ts
+type TValidator = {
+  rules?: IUserRule[];
+  onSubmit?: boolean;
+};
+//#endregion
 //#region src/shared/types/common.d.ts
 type ConfigFunctionComponent<P> = FC<P> & {
   fieldProps?: string[];
@@ -19,21 +32,14 @@ type RC<T = {}> = ConfigFunctionComponent<T & {
   children?: ReactNode;
 }>;
 type FormData = Record<string, any>;
-interface IRule {
-  getName: () => string;
-  validate: (value: string, formData: FormData) => boolean;
-  message: () => string;
-}
 type FormFieldBase = {
-  validation?: (string | IRule)[];
+  validation?: string[];
   viewConfig?: TGroupRules;
 } & TField;
 type FormFieldConfig = FormFieldBase & Record<string, any>;
 type FormElementProps<F extends FormFieldConfig = FormFieldConfig> = {
   field: F;
-  builder: TDynamicBuilder;
-  plugins: FormElementRegistry;
-  path: string[];
+  path: string;
   value: any;
   errors?: Record<string, string>;
   onChange: (value: any) => void;
@@ -44,16 +50,12 @@ type TFormBuilder = {
   formData?: FormData;
   className?: string;
   layout: FormFieldConfig[];
-  plugins: FormElementRegistry;
+  fields: FormElementRegistry;
+  validator?: TValidator;
   onChange?: (formData: any) => void;
   onSubmit?: (formData: any) => void;
   children?: ReactNode;
 };
-type TDynamicBuilder = RC<{
-  layout: FormFieldConfig[];
-  plugins: FormElementRegistry;
-  path?: string[];
-}>;
 type TCommonRule = {
   operator: string;
   field: string;
@@ -82,5 +84,5 @@ type FormGroupConfig = FormFieldBase & {
 };
 declare const FormGroup: RC<FormElementProps<FormGroupConfig>>;
 //#endregion
-export { FormBuilder, type FormBuilderRef, type FormElementProps, type FormElementRegistry, type FormFieldConfig, FormGroup, type IRule, type TGroupRules, TextField, fieldShema };
+export { FormBuilder, type FormBuilderRef, type FormElementProps, type FormElementRegistry, type FormFieldConfig, FormGroup, type TGroupRules, TextField, fieldShema };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { createContext, forwardRef, useContext, useId, useImperativeHandle, useRef, useSyncExternalStore } from "react";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useMemo, useRef, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { z } from "zod";
@@ -17,18 +17,29 @@ function createStore(reducer, initialState) {
 		},
 		subscribe(listener) {
 			listeners.add(listener);
-			return () => listeners.delete(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		subscribeSelector(selector, listener) {
+			let prev = selector(state);
+			return this.subscribe(() => {
+				const next = selector(state);
+				if (next !== prev) {
+					prev = next;
+					listener(next);
+				}
+			});
 		}
 	};
 }
 
 //#endregion
 //#region src/shared/model/store/createStoreContext.tsx
-function createStoreContext$1(reducer, initialState) {
+function createStoreContext(reducer, defaultState) {
 	const StoreContext = createContext(null);
-	const Provider = ({ children }) => {
-		const storeRef = useRef(null);
-		if (!storeRef.current) storeRef.current = createStore(reducer, initialState);
+	const Provider = ({ children, initialState }) => {
+		const storeRef = useRef(createStore(reducer, initialState ?? defaultState));
 		return /* @__PURE__ */ jsx(StoreContext.Provider, {
 			value: storeRef.current,
 			children
@@ -44,51 +55,56 @@ function createStoreContext$1(reducer, initialState) {
 		if (!store) throw new Error("StoreProvider missing");
 		return store.dispatch;
 	}
-	function useSubmit(onSubmit) {
+	function useStoreInstance() {
 		const store = useContext(StoreContext);
-		return () => {
-			if (store) onSubmit(store.getState());
-		};
+		if (!store) throw new Error("StoreProvider missing");
+		return store;
 	}
 	return {
 		Provider,
 		useStore,
-		useSubmit,
-		useDispatch
+		useDispatch,
+		useStoreInstance
 	};
 }
 
 //#endregion
 //#region src/shared/utils.ts
 function updateNestedValue(obj, path, value) {
-	if (path.length === 0) return value;
+	if (!path) return value;
+	return _updateByKeys(obj, path.split("."), value);
+}
+function _updateByKeys(obj, keys, value) {
+	if (keys.length === 0) return value;
 	const newObj = Array.isArray(obj) ? [...obj] : { ...obj };
-	const currentKey = path[0];
-	if (path.length === 1) newObj[currentKey] = value;
+	const currentKey = keys[0];
+	if (currentKey === "__proto__" || currentKey === "constructor" || currentKey === "prototype") throw new Error(`Forbidden path key: ${currentKey}`);
+	if (keys.length === 1) newObj[currentKey] = value;
 	else {
-		const remainingPath = path.slice(1);
+		const remainingKeys = keys.slice(1);
 		const nestedObj = newObj[currentKey];
-		if (typeof nestedObj === "undefined" || nestedObj === null) newObj[currentKey] = typeof remainingPath[0] === "number" ? [] : {};
-		newObj[currentKey] = updateNestedValue(newObj[currentKey], remainingPath, value);
+		if (typeof nestedObj === "undefined" || nestedObj === null) newObj[currentKey] = typeof remainingKeys[0] === "number" ? [] : {};
+		newObj[currentKey] = _updateByKeys(newObj[currentKey], remainingKeys, value);
 	}
 	return newObj;
 }
 function getNestedValue(obj, path) {
-	return path.reduce((acc, key) => acc && acc[key] !== void 0 ? acc[key] : void 0, obj);
+	if (!path) return obj;
+	return path.split(".").reduce((acc, key) => acc && acc[key] !== void 0 ? acc[key] : void 0, obj);
 }
 
 //#endregion
-//#region src/shared/model/store/index.ts
-const initialState = {
-	formData: {},
-	errors: {}
-};
+//#region src/shared/model/store/index.tsx
 function reducer(state, action) {
 	const newData = { ...state };
 	switch (action.type) {
 		case "setValue":
 			newData.formData = updateNestedValue(newData.formData, action.path, action.value);
 			break;
+		case "setFieldValue":
+			newData.formData = updateNestedValue(newData.formData, action.path, action.value);
+			newData.errors = updateNestedValue(newData.errors, action.path, action?.errors?.length ? action.errors : null);
+			break;
 		case "setError":
 			newData.errors = updateNestedValue(newData.errors, action.path, action.value);
 			break;
@@ -102,106 +118,262 @@ function reducer(state, action) {
 	}
 	return newData;
 }
-const { Provider: FormStoreProvider, useStore: useFormStore, useDispatch: useFormDispatch, useSubmit } = createStoreContext$1(reducer, initialState);
+const { Provider, useStore: useFormStore, useDispatch: useFormDispatch, useStoreInstance: useFormStoreInstance } = createStoreContext(reducer, {
+	formData: {},
+	errors: {}
+});
+const FormStoreProvider = ({ children, formData }) => /* @__PURE__ */ jsx(Provider, {
+	initialState: {
+		formData: formData ?? {},
+		errors: {}
+	},
+	children
+});
+
+//#endregion
+//#region src/plugins/validation/rules/confirm.ts
+const confirm = {
+	code: "confirm",
+	fn: (value, data, args) => {
+		const attr = args[0] ?? false;
+		return attr ? value == getNestedValue(data, attr) : false;
+	},
+	message: "Поле не совпадает с ::attr(1)"
+};
+
+//#endregion
+//#region src/plugins/validation/rules/required.ts
+const required = {
+	code: "required",
+	fn: (value) => {
+		return value !== void 0 && value !== null && value.length > 0;
+	},
+	message: "Поле обязательно для заполнения"
+};
+
+//#endregion
+//#region src/plugins/validation/rules/email.ts
+const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+const email = {
+	code: "email",
+	fn: (value) => {
+		return emailRegex.test(value);
+	},
+	message: "Поле не является email"
+};
+
+//#endregion
+//#region src/plugins/validation/rules/index.ts
+var rules_default = [
+	confirm,
+	required,
+	email
+];
+
+//#endregion
+//#region src/plugins/validation/validation.ts
+var Validation = class {
+	registry = [];
+	registerFields = {};
+	constructor(onSubmit, rules = []) {
+		this.onSubmit = onSubmit;
+		this.registry = [...rules, ...rules_default];
+	}
+	validateRule(rule, data, formData) {
+		const [code, rawArgs] = rule.split(":");
+		const args = rawArgs ? rawArgs.split(",") : [];
+		const userRule = this.registry.find((i) => i.code == code);
+		if (!userRule) return null;
+		return !userRule.fn(data, formData, args) ? this.replaceMessageArgs(userRule.message, args) : null;
+	}
+	replaceMessageArgs(message, args = []) {
+		const replaceArgs = args.reduce((acc, arg, index) => {
+			acc[`::attr(${index})`] = arg;
+			return acc;
+		}, {});
+		return message.replace(/::attr\(\d\)/g, (i) => replaceArgs[i]);
+	}
+	registerField(path, validators) {
+		this.registerFields[path] = validators;
+	}
+	_validate(rules, data, formData) {
+		return rules.map((rule) => {
+			return this.validateRule(rule, data, formData);
+		}).filter((i) => i !== null);
+	}
+	validate(rules, data, formData) {
+		return !this.onSubmit ? this._validate(rules, data, formData) : [];
+	}
+	validateAll(formData) {
+		return Object.entries(this.registerFields).reduce((acc, [path, rules]) => {
+			const value = getNestedValue(formData, path);
+			const validationMessage = this._validate(rules, value, formData);
+			if (validationMessage.length) acc[path] = validationMessage;
+			return acc;
+		}, {});
+	}
+};
+
+//#endregion
+//#region src/plugins/validation/provider.tsx
+function createValidationProvider() {
+	const Context = createContext(null);
+	const Provider = ({ validator = {
+		onSubmit: false,
+		rules: []
+	}, children }) => {
+		const core = useMemo(() => new Validation(validator.onSubmit ?? false, validator.rules ?? []), [validator]);
+		return /* @__PURE__ */ jsx(Context.Provider, {
+			value: core,
+			children
+		});
+	};
+	const useValidate = (rules) => {
+		const core = useContext(Context);
+		if (!core) throw new Error("ValidationProvider missing");
+		return (data, formData) => {
+			return core.validate(rules ?? [], data, formData);
+		};
+	};
+	const useRegister = (currentFieldPath, field) => {
+		const core = useContext(Context);
+		if (!core) throw new Error("ValidationProvider missing");
+		core.registerField(currentFieldPath, field.validation ?? []);
+		return useValidate(field.validation);
+	};
+	const useSubmitValidation = () => {
+		const core = useContext(Context);
+		if (!core) throw new Error("ValidationProvider missing");
+		return (formData) => core.validateAll(formData);
+	};
+	return {
+		Provider,
+		useRegister,
+		useSubmitValidation
+	};
+}
+
+//#endregion
+//#region src/plugins/validation/index.ts
+const { Provider: ValidationProvider, useRegister, useSubmitValidation } = createValidationProvider();
 
 //#endregion
-//#region src/widgets/dynamicBuilder/element.tsx
-const BuilderElement = (props) => {
+//#region src/entity/dynamicBuilder/element.tsx
+const DynamicBuilderElement = (props) => {
 	const Element = props.element;
 	const field = props.field;
-	const currentFieldPath = [...props.path, field.name];
+	const currentFieldPath = props.path ? `${props.path}.${field.name}` : field.name;
 	const value = useFormStore(((s) => getNestedValue(s.formData, currentFieldPath)));
-	const errors = useFormStore(((s) => getNestedValue(s.errors, currentFieldPath)));
+	const errors = useFormStore(((s) => s.errors[currentFieldPath]));
 	const dispatch = useFormDispatch();
+	const store = useFormStoreInstance();
+	const validator = useRegister(currentFieldPath, field);
 	return /* @__PURE__ */ jsx(Element, {
 		field: { ...field },
-		builder: props.DynamicBuilder,
 		path: currentFieldPath,
-		plugins: props.plugins,
 		value,
 		errors,
 		onChange: (value) => {
+			const data = store.getState().formData;
 			dispatch({
-				type: "setValue",
+				type: "setFieldValue",
 				path: currentFieldPath,
-				value
-			});
-			dispatch({
-				type: "setError",
-				path: currentFieldPath,
-				value: ""
+				value,
+				errors: validator(value, data)
 			});
 		}
 	});
 };
 
 //#endregion
-//#region src/widgets/dynamicBuilder/index.tsx
-const DynamicBuilder = (props) => {
-	const path = props.path ?? [];
-	return props.layout.map((field, index) => {
-		const FormElement = props.plugins[field.type];
-		if (!FormElement) {
-			console.warn(`Неизвестный тип поля: ${field.type}. Проверьте formRegistry.`);
-			return null;
-		}
-		return /* @__PURE__ */ jsx(BuilderElement, {
-			element: FormElement,
-			path,
-			field
-		}, `${field.name}${index}`);
-	});
-};
-
-//#endregion
-//#region src/shared/model/builder/createContext.tsx
-function createStoreContext() {
+//#region src/entity/dynamicBuilder/model/createBuilderContext.tsx
+function createBuilderContext() {
 	const BuilderContext = createContext(null);
-	const Provider = ({ plugins, children }) => {
-		const storeRef = useRef(null);
-		if (!storeRef.current) storeRef.current = (layout, path, children) => {
+	const Provider = ({ fields, children }) => {
+		const builder = useCallback((layout, path, children) => {
 			return /* @__PURE__ */ jsx(DynamicBuilder, {
 				layout,
 				path,
-				plugins,
 				children
 			});
-		};
+		}, [fields]);
 		return /* @__PURE__ */ jsx(BuilderContext.Provider, {
-			value: storeRef.current,
+			value: {
+				builder,
+				fields
+			},
 			children
 		});
 	};
 	function useBuilder() {
 		const store = useContext(BuilderContext);
 		if (!store) throw new Error("StoreProvider missing");
-		return store;
+		return store.builder;
+	}
+	function useFields() {
+		const store = useContext(BuilderContext);
+		if (!store) throw new Error("StoreProvider missing");
+		return store.fields;
 	}
 	return {
 		Provider,
-		useBuilder
+		useBuilder,
+		useFields
 	};
 }
 
 //#endregion
-//#region src/shared/model/builder/index.ts
-const { Provider: BuilderProvider, useBuilder } = createStoreContext();
+//#region src/entity/dynamicBuilder/model/index.ts
+const { Provider: BuilderProvider, useBuilder, useFields } = createBuilderContext();
 
 //#endregion
-//#region src/app/index.tsx
-const FormBuilder = forwardRef((props, ref) => {
-	const submitHdl = useSubmit((data) => {
-		if (props.onSubmit) props.onSubmit(data);
+//#region src/entity/dynamicBuilder/index.tsx
+const DynamicBuilder = (props) => {
+	const path = props.path ?? "";
+	const fields = useFields();
+	return props.layout.map((field, index) => {
+		const FormElement = fields[field.type];
+		if (!FormElement) {
+			console.warn(`Неизвестный тип поля: ${field.type}. Проверьте formRegistry.`);
+			return null;
+		}
+		return /* @__PURE__ */ jsx(DynamicBuilderElement, {
+			element: FormElement,
+			path,
+			field
+		}, `${field.name}-${index}`);
 	});
-	useImperativeHandle(ref, () => ({
-		reset: () => {},
-		submit: () => {
-			submitHdl();
-		},
-		errors: () => {
-			return {};
+};
+
+//#endregion
+//#region src/widgets/form/form.tsx
+const Form = forwardRef((props, ref) => {
+	const dispatch = useFormDispatch();
+	const store = useFormStoreInstance();
+	const changeRef = useRef(props.onChange);
+	useEffect(() => {
+		return store.subscribeSelector((s) => s.formData, (formData) => changeRef.current?.(formData));
+	}, [store]);
+	const validation = useSubmitValidation();
+	const submitHdl = useCallback(() => {
+		if (props.onSubmit) {
+			const errors = validation(store.getState().formData);
+			if (Object.keys(errors).length == 0) props.onSubmit(store.getState().formData);
+			else dispatch({
+				type: "setErrors",
+				errors
+			});
 		}
-	}), [props.onSubmit]);
+	}, [props.onSubmit, validation]);
+	useImperativeHandle(ref, () => ({
+		reset: () => dispatch({ type: "reset" }),
+		submit: () => submitHdl(),
+		errors: () => store.getState().errors
+	}), [
+		submitHdl,
+		dispatch,
+		store
+	]);
 	return /* @__PURE__ */ jsxs("form", {
 		onSubmit: (e) => {
 			e.preventDefault();
@@ -209,13 +381,10 @@ const FormBuilder = forwardRef((props, ref) => {
 		},
 		className: props?.className,
 		children: [
-			/* @__PURE__ */ jsx(FormStoreProvider, { children: /* @__PURE__ */ jsx(BuilderProvider, {
-				plugins: props.plugins,
-				children: /* @__PURE__ */ jsx(DynamicBuilder, {
-					layout: props.layout,
-					plugins: props.plugins
-				})
-			}) }),
+			/* @__PURE__ */ jsx(BuilderProvider, {
+				fields: props.fields,
+				children: /* @__PURE__ */ jsx(DynamicBuilder, { layout: props.layout })
+			}),
 			/* @__PURE__ */ jsx("input", {
 				type: "submit",
 				style: { display: "none" }
@@ -225,6 +394,22 @@ const FormBuilder = forwardRef((props, ref) => {
 	});
 });
 
+//#endregion
+//#region src/app/index.tsx
+const FormBuilder = forwardRef((props, ref) => {
+	const { formData, ...innerProps } = props;
+	return /* @__PURE__ */ jsx(FormStoreProvider, {
+		formData,
+		children: /* @__PURE__ */ jsx(ValidationProvider, {
+			validator: props.validator,
+			children: /* @__PURE__ */ jsx(Form, {
+				...innerProps,
+				ref
+			})
+		})
+	});
+});
+
 //#endregion
 //#region src/entity/inputs/ui/input/index.tsx
 function isTextFieldConfig(field) {
@@ -266,7 +451,7 @@ const TextField = ({ field, value, errors, onChange }) => {
 //#endregion
 //#region src/entity/inputs/ui/group/index.tsx
 function isGroupConfig(field) {
-	return field.fields;
+	return Array.isArray(field.fields);
 }
 const FormGroup = ({ field, path }) => {
 	if (!isGroupConfig(field)) return null;
@@ -277,7 +462,6 @@ const FormGroup = ({ field, path }) => {
 		children: Builder
 	})] });
 };
-FormGroup.fieldProps = ["fields"];
 
 //#endregion
 //#region src/shared/model/index.ts