@idem.agency/form-builder 0.0.9 → 0.0.11

package/CHANGELOG.md

@@ -3,30 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.0.9](https://gitlab.idem.agency/idem-project/front-package/compare/@idem.agency/form-builder@0.0.8...@idem.agency/form-builder@0.0.9) (2026-01-13)
-
-**Note:** Version bump only for package @idem.agency/form-builder
-
-
-
-
-
-## [0.0.8](https://gitlab.idem.agency/idem-project/front-package/compare/@idem.agency/form-builder@0.0.7...@idem.agency/form-builder@0.0.8) (2026-01-13)
-
-**Note:** Version bump only for package @idem.agency/form-builder
-
-
-
-
-
-## 0.0.7 (2026-01-13)
-
-**Note:** Version bump only for package @idem.agency/form-builder
-
-
-
-
-
-## 0.0.6 (2026-01-13)
+## [0.0.11](https://gitlab.idem.agency/idem-project/front-package/compare/@idem.agency/form-builder@0.0.10...@idem.agency/form-builder@0.0.11) (2026-02-09)
 
 **Note:** Version bump only for package @idem.agency/form-builder

package/dist/index.cjs

@@ -0,0 +1,325 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+let react = require("react");
+react = __toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let clsx = require("clsx");
+clsx = __toESM(clsx);
+let zod = require("zod");
+
+//#region src/shared/model/store/store.ts
+function createStore(reducer, initialState) {
+	let state = initialState;
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		getState() {
+			return state;
+		},
+		dispatch(action) {
+			state = reducer(state, action);
+			listeners.forEach((l) => l());
+		},
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		}
+	};
+}
+
+//#endregion
+//#region src/shared/model/store/createStoreContext.tsx
+function createStoreContext$1(reducer, initialState) {
+	const StoreContext = (0, react.createContext)(null);
+	const Provider = ({ children }) => {
+		const storeRef = (0, react.useRef)(null);
+		if (!storeRef.current) storeRef.current = createStore(reducer, initialState);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StoreContext.Provider, {
+			value: storeRef.current,
+			children
+		});
+	};
+	function useStore(selector) {
+		const store = (0, react.useContext)(StoreContext);
+		if (!store) throw new Error("StoreProvider missing");
+		return (0, react.useSyncExternalStore)(store.subscribe, () => selector(store.getState()), () => selector(store.getState()));
+	}
+	function useDispatch() {
+		const store = (0, react.useContext)(StoreContext);
+		if (!store) throw new Error("StoreProvider missing");
+		return store.dispatch;
+	}
+	function useSubmit(onSubmit) {
+		const store = (0, react.useContext)(StoreContext);
+		return () => {
+			if (store) onSubmit(store.getState());
+		};
+	}
+	return {
+		Provider,
+		useStore,
+		useSubmit,
+		useDispatch
+	};
+}
+
+//#endregion
+//#region src/shared/utils.ts
+function updateNestedValue(obj, path, value) {
+	if (path.length === 0) return value;
+	const newObj = Array.isArray(obj) ? [...obj] : { ...obj };
+	const currentKey = path[0];
+	if (path.length === 1) newObj[currentKey] = value;
+	else {
+		const remainingPath = path.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);
+	}
+	return newObj;
+}
+function getNestedValue(obj, path) {
+	return path.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: {}
+};
+function reducer(state, action) {
+	const newData = { ...state };
+	switch (action.type) {
+		case "setValue":
+			newData.formData = updateNestedValue(newData.formData, action.path, action.value);
+			break;
+		case "setError":
+			newData.errors = updateNestedValue(newData.errors, action.path, action.value);
+			break;
+		case "reset":
+			newData.formData = {};
+			newData.errors = {};
+			break;
+		case "setErrors":
+			newData.errors = { ...action.errors };
+			break;
+	}
+	return newData;
+}
+const { Provider: FormStoreProvider, useStore: useFormStore, useDispatch: useFormDispatch, useSubmit } = createStoreContext$1(reducer, initialState);
+
+//#endregion
+//#region src/widgets/dynamicBuilder/element.tsx
+const BuilderElement = (props) => {
+	const Element = props.element;
+	const field = props.field;
+	const currentFieldPath = [...props.path, field.name];
+	const value = useFormStore(((s) => getNestedValue(s.formData, currentFieldPath)));
+	const errors = useFormStore(((s) => getNestedValue(s.errors, currentFieldPath)));
+	const dispatch = useFormDispatch();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Element, {
+		field: { ...field },
+		builder: props.DynamicBuilder,
+		path: currentFieldPath,
+		plugins: props.plugins,
+		value,
+		errors,
+		onChange: (value) => {
+			dispatch({
+				type: "setValue",
+				path: currentFieldPath,
+				value
+			});
+			dispatch({
+				type: "setError",
+				path: currentFieldPath,
+				value: ""
+			});
+		}
+	});
+};
+
+//#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__ */ (0, react_jsx_runtime.jsx)(BuilderElement, {
+			element: FormElement,
+			path,
+			field
+		}, `${field.name}${index}`);
+	});
+};
+
+//#endregion
+//#region src/shared/model/builder/createContext.tsx
+function createStoreContext() {
+	const BuilderContext = (0, react.createContext)(null);
+	const Provider = ({ plugins, children }) => {
+		const storeRef = (0, react.useRef)(null);
+		if (!storeRef.current) storeRef.current = (layout, path, children) => {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DynamicBuilder, {
+				layout,
+				path,
+				plugins,
+				children
+			});
+		};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BuilderContext.Provider, {
+			value: storeRef.current,
+			children
+		});
+	};
+	function useBuilder() {
+		const store = (0, react.useContext)(BuilderContext);
+		if (!store) throw new Error("StoreProvider missing");
+		return store;
+	}
+	return {
+		Provider,
+		useBuilder
+	};
+}
+
+//#endregion
+//#region src/shared/model/builder/index.ts
+const { Provider: BuilderProvider, useBuilder } = createStoreContext();
+
+//#endregion
+//#region src/app/index.tsx
+const FormBuilder = (0, react.forwardRef)((props, ref) => {
+	const submitHdl = useSubmit((data) => {
+		if (props.onSubmit) props.onSubmit(data);
+	});
+	(0, react.useImperativeHandle)(ref, () => ({
+		reset: () => {},
+		submit: () => {
+			submitHdl();
+		},
+		errors: () => {
+			return {};
+		}
+	}), [props.onSubmit]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+		onSubmit: (e) => {
+			e.preventDefault();
+			submitHdl();
+		},
+		className: props?.className,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormStoreProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BuilderProvider, {
+				plugins: props.plugins,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DynamicBuilder, {
+					layout: props.layout,
+					plugins: props.plugins
+				})
+			}) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "submit",
+				style: { display: "none" }
+			}),
+			props.children
+		]
+	});
+});
+
+//#endregion
+//#region src/entity/inputs/ui/input/index.tsx
+function isTextFieldConfig(field) {
+	return field.type === "text" || field.type === "email" || field.type === "password";
+}
+const TextField = ({ field, value, errors, onChange }) => {
+	if (!isTextFieldConfig(field)) {
+		console.warn(`TextField received an invalid field config for type: ${field.type}`);
+		return null;
+	}
+	const id = (0, react.useId)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: { marginBottom: "15px" },
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				htmlFor: id,
+				children: [field.label, ":"]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: field.type,
+				id,
+				name: field.name,
+				placeholder: field.placeholder,
+				value: value || "",
+				onChange: (e) => onChange(e.target.value),
+				style: { borderColor: errors ? "red" : "#ccc" }
+			}),
+			errors && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				style: {
+					color: "red",
+					fontSize: "0.8em"
+				},
+				children: Object.values(errors).join(", ")
+			})
+		]
+	});
+};
+
+//#endregion
+//#region src/entity/inputs/ui/group/index.tsx
+function isGroupConfig(field) {
+	return field.fields;
+}
+const FormGroup = ({ field, path }) => {
+	if (!isGroupConfig(field)) return null;
+	const Builder = useBuilder()(field.fields, path);
+	const className = (field.variant ?? "col") == "col" ? "flex-col" : "flex-row";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: field.label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)(className, "flex"),
+		children: Builder
+	})] });
+};
+FormGroup.fieldProps = ["fields"];
+
+//#endregion
+//#region src/shared/model/index.ts
+const fieldShema = zod.z.object({
+	name: zod.z.string(),
+	label: zod.z.string().optional(),
+	type: zod.z.string()
+});
+
+//#endregion
+exports.FormBuilder = FormBuilder;
+exports.FormGroup = FormGroup;
+exports.TextField = TextField;
+exports.fieldShema = fieldShema;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["createStoreContext","createStoreContext","z"],"sources":["../src/shared/model/store/store.ts","../src/shared/model/store/createStoreContext.tsx","../src/shared/utils.ts","../src/shared/model/store/index.ts","../src/widgets/dynamicBuilder/element.tsx","../src/widgets/dynamicBuilder/index.tsx","../src/shared/model/builder/createContext.tsx","../src/shared/model/builder/index.ts","../src/app/index.tsx","../src/entity/inputs/ui/input/index.tsx","../src/entity/inputs/ui/group/index.tsx","../src/shared/model/index.ts"],"sourcesContent":["export type Reducer<S, A> = (state: S, action: A) => S;\n\nexport function createStore<S, A>(\n  reducer: Reducer<S, A>,\n  initialState: S\n) {\n  let state = initialState;\n  const listeners = new Set<() => void>();\n  \n  return {\n    getState(): S {\n      return state;\n    },\n    \n    dispatch(action: A) {\n      state = reducer(state, action);\n      listeners.forEach(l => l());\n    },\n    \n    subscribe(listener: () => void) {\n      listeners.add(listener);\n      return () => listeners.delete(listener);\n    }\n  };\n}\n\nexport type Store<S, A> = ReturnType<typeof createStore<S, A>>;\n","import {\n  createContext,\n  useContext,\n  useRef,\n  useSyncExternalStore\n} from \"react\";\nimport { createStore, type Reducer, type Store } from \"./store\";\n\nexport function createStoreContext<S, A>(\n  reducer: Reducer<S, A>,\n  initialState: S\n) {\n  const StoreContext = createContext<Store<S, A> | null>(null);\n  \n  const Provider: React.FC<{ children: React.ReactNode }> = ({\n                                                               children\n                                                             }) => {\n    const storeRef = useRef<Store<S, A>>(null);\n    \n    if (!storeRef.current) {\n      storeRef.current = createStore(reducer, initialState);\n    }\n\n    return (\n      <StoreContext.Provider value={storeRef.current}>\n        {children}\n      </StoreContext.Provider>\n    );\n  };\n  \n  function useStore<T>(\n    selector: (state: S) => T\n  ): T {\n    const store = useContext(StoreContext);\n\n    if (!store) {\n      throw new Error(\"StoreProvider missing\");\n    }\n    \n    return useSyncExternalStore(\n      store.subscribe,\n      () => selector(store.getState()),\n      () => selector(store.getState())\n    );\n  }\n  \n  function useDispatch() {\n    const store = useContext(StoreContext);\n    \n    if (!store) {\n      throw new Error(\"StoreProvider missing\");\n    }\n    \n    return store.dispatch;\n  }\n  \n  function useSubmit(onSubmit: (state: S) => void) {\n    const store = useContext(StoreContext);\n    \n    return () => {\n      if (store) {\n        const state = store.getState();\n        onSubmit(state);\n      }\n    };\n  }\n  \n  return {\n    Provider,\n    useStore,\n    useSubmit,\n    useDispatch\n  };\n}\n","export function updateNestedValue(obj: any, path: string[], value: any): any {\n  if (path.length === 0) {\n    return value;\n  }\n  \n  const newObj = Array.isArray(obj) ? [...obj] : { ...obj }; // Создаем копию\n  const currentKey = path[0];\n  \n  if (path.length === 1) {\n    // Последний элемент пути, просто обновляем значение\n    newObj[currentKey] = value;\n  } else {\n    const remainingPath = path.slice(1);\n    const nestedObj = newObj[currentKey];\n    \n    if (typeof nestedObj === 'undefined' || nestedObj === null) {\n      newObj[currentKey] = typeof remainingPath[0] === 'number' ? [] : {};\n    }\n    newObj[currentKey] = updateNestedValue(newObj[currentKey], remainingPath, value);\n  }\n  return newObj;\n}\nexport function getNestedValue(obj: any, path: string[]): any {\n  return path.reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : undefined), obj);\n}\n","import { createStoreContext } from \"./createStoreContext\";\nimport type {FormData} from \"@/shared/types/common\";\nimport {updateNestedValue} from \"@/shared/utils\";\n\ntype State = {\n  formData: FormData\n  errors: Record<string, any>\n};\n\ntype Action =\n  | { type: \"setValue\"; path: string[]; value: unknown }\n  | { type: \"setError\"; path: string[]; value?: string }\n  | { type: \"reset\"; }\n  | { type: \"setErrors\"; errors?: object };\n\nconst initialState: State = {\n  formData: {},\n  errors: {}\n};\n\nfunction reducer(state: State, action: Action): State {\n  const newData = {...state};\n  switch (action.type) {\n    case 'setValue':\n      newData.formData = updateNestedValue(newData.formData, action.path, action.value);\n      break;\n    case 'setError':\n      newData.errors = updateNestedValue(newData.errors, action.path, action.value);\n      break;\n    case 'reset':\n      newData.formData = {};\n      newData.errors = {};\n      break;\n    case 'setErrors':\n      newData.errors = {...action.errors};\n      break;\n  }\n  return newData;\n}\n\nexport const {\n  Provider: FormStoreProvider,\n  useStore: useFormStore,\n  useDispatch: useFormDispatch,\n  useSubmit,\n} = createStoreContext(reducer, initialState);\n","import {useFormStore, useFormDispatch} from \"@/shared/model/store\";\nimport {getNestedValue} from \"@/shared/utils\";\n\nexport const BuilderElement = (props: any) => {\n  const Element = props.element;\n  const field = props.field;\n  const currentFieldPath = [...props.path, field.name];\n  const value = useFormStore((s=> getNestedValue(s.formData, currentFieldPath)));\n  const errors = useFormStore((s=> getNestedValue(s.errors, currentFieldPath)));\n  const dispatch= useFormDispatch();\n  return <Element\n    field={{...field}}\n    builder={props.DynamicBuilder}\n    path={currentFieldPath}\n    plugins={props.plugins}\n    value={value}\n    errors={errors}\n    onChange={(value: any) => {\n      dispatch({\n        type: 'setValue',\n        path: currentFieldPath,\n        value\n      });\n      dispatch({\n        type: 'setError',\n        path: currentFieldPath,\n        value: ''\n      });\n    }}\n  />;\n}\n","import type {TDynamicBuilder} from \"@/shared/types/common\";\nimport {BuilderElement} from \"@/widgets/dynamicBuilder/element\";\n// import {getNestedValue} from \"@/shared/utils\";\n// import {useCallback} from \"react\";\n// import {VisibleCore} from \"@/shared/lib/VisibleCore\";\n// import {use} from \"@/shared/model/store\";\n\nexport const DynamicBuilder: TDynamicBuilder = (props) => {\n  const path = props.path ?? [];\n  \n  // const isShow = useCallback((field: FormFieldConfig) => {\n  //   let result = true;\n  //\n  //   if (field.viewConfig) {\n  //     result = VisibleCore.isVisible(field.viewConfig, state.formData);\n  //   }\n  //   return result;\n  // }, [state]);\n  \n  \n  return props.layout.map((field, index) => {\n    const FormElement = props.plugins[field.type];\n    \n    if (!FormElement) {\n      console.warn(`Неизвестный тип поля: ${field.type}. Проверьте formRegistry.`);\n      return null;\n    }\n    \n    // const currentValue = getNestedValue(state.formData, currentFieldPath);\n    // const currentErrors = getNestedValue(state.errors, currentFieldPath) as (Record<string, string> | undefined);\n    return <BuilderElement key={`${field.name}${index}`} element={FormElement} path={path} field={field}/>\n  })\n}\n","import React, {createContext, type ReactNode, useContext, useRef,} from \"react\";\nimport {DynamicBuilder} from \"@/widgets/dynamicBuilder\";\n\nexport function createStoreContext() {\n  const BuilderContext = createContext<((layout: any, path: string[]|undefined, children?: ReactNode) => ReactNode) | null>(null);\n  \n  const Provider: React.FC<{ children: React.ReactNode, plugins: any }> = ({\n                                                                             plugins,\n                                                                           children\n                                                                         }) => {\n    const storeRef = useRef<(layout: any, path: string[]|undefined, children?: ReactNode) => ReactNode>(null);\n    \n    if (!storeRef.current) {\n      storeRef.current = (layout: any, path: string[]|undefined, children?: ReactNode) => {\n        return <DynamicBuilder layout={layout} path={path} plugins={plugins}>{children}</DynamicBuilder>\n      };\n    }\n    \n    return (\n      <BuilderContext.Provider value={storeRef.current}>\n        {children}\n      </BuilderContext.Provider>\n    );\n  };\n  \n  function useBuilder(): (layout: any, path: string[]|undefined, children?: ReactNode) => ReactNode {\n    const store = useContext(BuilderContext);\n    \n    if (!store) {\n      throw new Error(\"StoreProvider missing\");\n    }\n    \n    return store\n  }\n  \n  return {\n    Provider,\n    useBuilder\n  };\n}\n","import {createStoreContext} from \"@/shared/model/builder/createContext\";\n\nexport const {\n  Provider: BuilderProvider,\n  useBuilder,\n} = createStoreContext();\n","'use client';\n\nimport type {FormBuilderRef, TFormBuilder} from \"../shared/types/common\";\n// import {StoreContext, storeReducer,} from \"@/shared/model\";\n\nimport {DynamicBuilder} from \"../widgets/dynamicBuilder\";\nimport { forwardRef, useImperativeHandle} from \"react\";\n// import {ValidationCore} from \"@/shared/lib/validation/core\";\n// import { useUpdateEffect } from '@/shared/hook/useUpdateEffect';\nimport {FormStoreProvider, useSubmit} from \"@/shared/model/store\";\nimport {BuilderProvider} from \"@/shared/model/builder\";\n\nexport const FormBuilder = forwardRef<FormBuilderRef, TFormBuilder>((props, ref) => {\n  // const validator = useMemo(() => {\n  //   return (new ValidationCore(props.layout, props.plugins))\n  // }, [props.layout, props.plugins]);\n\n  // const [state, dispatch] = useReducer(storeReducer, {\n  //   formData: props.formData ?? {},\n  //   errors: {},\n  // });\n  //\n  // useUpdateEffect(() => {\n  //   if (props.onChange) {\n  //     props.onChange(state.formData);\n  //   }\n  // }, [state.formData, props.onChange]);\n  const submitHdl = useSubmit((data) => {\n    if (props.onSubmit) {\n      props.onSubmit(data);\n    }\n  });\n  \n  // const submit = () => {\n  //\n  //   // const errors = validator.validate(state.formData);\n  //   // if (Object.keys(errors).length == 0) {\n  //   //   if (props.onSubmit) {\n  //   //     props.onSubmit(state.formData)\n  //   //   }\n  //   // } else {\n  //   //   dispatch({\n  //   //     type: 'setErrors',\n  //   //     payload: {\n  //   //       errors\n  //   //     }\n  //   //   });\n  //   // }\n  // }\n\n  useImperativeHandle(ref, () => ({\n    reset: () => {\n      // dispatch({type: 'reset'})\n    },\n    submit: () => {\n      submitHdl();\n    },\n    errors: () => {\n      return {}\n      // return state?.errors ?? {};\n    }\n  }), [props.onSubmit]);\n\n  return <form onSubmit={(e) => {\n      e.preventDefault();\n      submitHdl();\n    }}\n    className={props?.className}\n  >\n      <FormStoreProvider>\n        <BuilderProvider plugins={props.plugins}>\n          <DynamicBuilder layout={props.layout} plugins={props.plugins} />\n        </BuilderProvider>\n      </FormStoreProvider>\n      <input type=\"submit\" style={{ display: 'none' }}/>\n      {props.children}\n    </form>\n});\n\nexport default FormBuilder;\n","import type { FormElementProps, FormFieldConfig, FormFieldBase, RC } from '../../../../shared/types/common';\nimport { useId } from \"react\";\n\nexport type TextFieldConfig = FormFieldBase & { type: 'text' | 'email' | 'password';  placeholder?: string; };\n\nfunction isTextFieldConfig(field: FormFieldConfig): field is TextFieldConfig {\n  return field.type === 'text' || field.type === 'email' || field.type === 'password';\n}\n\nexport const TextField: RC<FormElementProps> = ({ field, value, errors, onChange }) => {\n  if (!isTextFieldConfig(field)) {\n    console.warn(`TextField received an invalid field config for type: ${field.type}`);\n    return null;\n  }\n  const id = useId();\n  return (\n    <div style={{ marginBottom: '15px' }}>\n      <label htmlFor={id}>{field.label}:</label>\n      <input\n        type={field.type}\n        id={id}\n        name={field.name}\n        placeholder={field.placeholder}\n        value={value || ''}\n        onChange={(e) => onChange(e.target.value)}\n        style={{ borderColor: errors ? 'red' : '#ccc' }}\n      />\n      {errors && <p style={{ color: 'red', fontSize: '0.8em' }}>{Object.values(errors).join(', ')}</p>}\n    </div>\n  );\n};\n","import type {FormElementProps, FormFieldBase, FormFieldConfig, RC} from \"../../../../shared/types/common.ts\";\nimport clsx from \"clsx\";\nimport {useBuilder} from \"@/shared/model/builder\";\nexport type FormGroupConfig = FormFieldBase & { variant?: 'row' | 'col', fields: FormFieldConfig[] };\n\nfunction isGroupConfig(field: FormFieldConfig): field is FormGroupConfig {\n  return field.fields;\n}\n\n\nexport const FormGroup: RC<FormElementProps<FormGroupConfig>> = ({field, path}) => {\n  if (!isGroupConfig(field)) {\n    return null;\n  }\n  const Builder = useBuilder()(field.fields, path);\n  const variant = field.variant ?? 'col';\n  \n  const className = variant == 'col' ? 'flex-col' : 'flex-row';\n\n  return <div>\n    <div>{field.label}</div>\n    <div className={clsx(className, 'flex')}>\n      {Builder}\n    </div>\n  </div>;\n};\n\nFormGroup.fieldProps = ['fields'];\n","import { z } from 'zod';\n\nconst fieldShema = z.object({\n  name: z.string(),\n  label: z.string().optional(),\n  type: z.string(),\n});\n\ntype TField = z.infer<typeof fieldShema>;\n\nexport type { TField };\nexport { fieldShema };\n"],"mappings":"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"}

package/dist/index.d.cts

@@ -0,0 +1,86 @@
+import * as react from "react";
+import { FC, ReactNode } from "react";
+import { z } from "zod";
+
+//#region src/shared/model/index.d.ts
+declare const fieldShema: z.ZodObject<{
+  name: z.ZodString;
+  label: z.ZodOptional<z.ZodString>;
+  type: z.ZodString;
+}, z.core.$strip>;
+type TField = z.infer<typeof fieldShema>;
+//#endregion
+//#region src/shared/types/common.d.ts
+type ConfigFunctionComponent<P> = FC<P> & {
+  fieldProps?: string[];
+};
+type RC<T = {}> = ConfigFunctionComponent<T & {
+  className?: string;
+  children?: ReactNode;
+}>;
+type FormData = Record<string, any>;
+interface IRule {
+  getName: () => string;
+  validate: (value: string, formData: FormData) => boolean;
+  message: () => string;
+}
+type FormFieldBase = {
+  validation?: (string | IRule)[];
+  viewConfig?: TGroupRules;
+} & TField;
+type FormFieldConfig = FormFieldBase & Record<string, any>;
+type FormElementProps<F extends FormFieldConfig = FormFieldConfig> = {
+  field: F;
+  builder: TDynamicBuilder;
+  plugins: FormElementRegistry;
+  path: string[];
+  value: any;
+  errors?: Record<string, string>;
+  onChange: (value: any) => void;
+};
+type FormElementComponent<F extends FormFieldConfig = FormFieldConfig> = RC<FormElementProps<F>>;
+type FormElementRegistry = Record<string, FormElementComponent<any>>;
+type TFormBuilder = {
+  formData?: FormData;
+  className?: string;
+  layout: FormFieldConfig[];
+  plugins: FormElementRegistry;
+  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;
+  value: any;
+};
+type TGroupRules = {
+  logic: 'and' | 'or';
+  rules: (TGroupRules | TCommonRule)[];
+};
+type FormBuilderRef = {
+  reset: () => void;
+  submit: () => void;
+  errors: () => Record<string, any>;
+};
+//#endregion
+//#region src/app/index.d.ts
+declare const FormBuilder: react.ForwardRefExoticComponent<TFormBuilder & react.RefAttributes<FormBuilderRef>>;
+//#endregion
+//#region src/entity/inputs/ui/input/index.d.ts
+declare const TextField: RC<FormElementProps>;
+//#endregion
+//#region src/entity/inputs/ui/group/index.d.ts
+type FormGroupConfig = FormFieldBase & {
+  variant?: 'row' | 'col';
+  fields: FormFieldConfig[];
+};
+declare const FormGroup: RC<FormElementProps<FormGroupConfig>>;
+//#endregion
+export { FormBuilder, type FormBuilderRef, type FormElementProps, type FormElementRegistry, type FormFieldConfig, FormGroup, type IRule, type TGroupRules, TextField, fieldShema };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.mts

@@ -0,0 +1,86 @@
+import * as react from "react";
+import { FC, ReactNode } from "react";
+import { z } from "zod";
+
+//#region src/shared/model/index.d.ts
+declare const fieldShema: z.ZodObject<{
+  name: z.ZodString;
+  label: z.ZodOptional<z.ZodString>;
+  type: z.ZodString;
+}, z.core.$strip>;
+type TField = z.infer<typeof fieldShema>;
+//#endregion
+//#region src/shared/types/common.d.ts
+type ConfigFunctionComponent<P> = FC<P> & {
+  fieldProps?: string[];
+};
+type RC<T = {}> = ConfigFunctionComponent<T & {
+  className?: string;
+  children?: ReactNode;
+}>;
+type FormData = Record<string, any>;
+interface IRule {
+  getName: () => string;
+  validate: (value: string, formData: FormData) => boolean;
+  message: () => string;
+}
+type FormFieldBase = {
+  validation?: (string | IRule)[];
+  viewConfig?: TGroupRules;
+} & TField;
+type FormFieldConfig = FormFieldBase & Record<string, any>;
+type FormElementProps<F extends FormFieldConfig = FormFieldConfig> = {
+  field: F;
+  builder: TDynamicBuilder;
+  plugins: FormElementRegistry;
+  path: string[];
+  value: any;
+  errors?: Record<string, string>;
+  onChange: (value: any) => void;
+};
+type FormElementComponent<F extends FormFieldConfig = FormFieldConfig> = RC<FormElementProps<F>>;
+type FormElementRegistry = Record<string, FormElementComponent<any>>;
+type TFormBuilder = {
+  formData?: FormData;
+  className?: string;
+  layout: FormFieldConfig[];
+  plugins: FormElementRegistry;
+  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;
+  value: any;
+};
+type TGroupRules = {
+  logic: 'and' | 'or';
+  rules: (TGroupRules | TCommonRule)[];
+};
+type FormBuilderRef = {
+  reset: () => void;
+  submit: () => void;
+  errors: () => Record<string, any>;
+};
+//#endregion
+//#region src/app/index.d.ts
+declare const FormBuilder: react.ForwardRefExoticComponent<TFormBuilder & react.RefAttributes<FormBuilderRef>>;
+//#endregion
+//#region src/entity/inputs/ui/input/index.d.ts
+declare const TextField: RC<FormElementProps>;
+//#endregion
+//#region src/entity/inputs/ui/group/index.d.ts
+type FormGroupConfig = FormFieldBase & {
+  variant?: 'row' | 'col';
+  fields: FormFieldConfig[];
+};
+declare const FormGroup: RC<FormElementProps<FormGroupConfig>>;
+//#endregion
+export { FormBuilder, type FormBuilderRef, type FormElementProps, type FormElementRegistry, type FormFieldConfig, FormGroup, type IRule, type TGroupRules, TextField, fieldShema };
+//# sourceMappingURL=index.d.mts.map