@idem.agency/form-builder 0.0.9 → 0.0.11

package/dist/index.mjs

@@ -0,0 +1,292 @@
+import { createContext, forwardRef, useContext, useId, useImperativeHandle, useRef, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { z } from "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 = createContext(null);
+	const Provider = ({ children }) => {
+		const storeRef = useRef(null);
+		if (!storeRef.current) storeRef.current = createStore(reducer, initialState);
+		return /* @__PURE__ */ jsx(StoreContext.Provider, {
+			value: storeRef.current,
+			children
+		});
+	};
+	function useStore(selector) {
+		const store = useContext(StoreContext);
+		if (!store) throw new Error("StoreProvider missing");
+		return useSyncExternalStore(store.subscribe, () => selector(store.getState()), () => selector(store.getState()));
+	}
+	function useDispatch() {
+		const store = useContext(StoreContext);
+		if (!store) throw new Error("StoreProvider missing");
+		return store.dispatch;
+	}
+	function useSubmit(onSubmit) {
+		const store = 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__ */ 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__ */ jsx(BuilderElement, {
+			element: FormElement,
+			path,
+			field
+		}, `${field.name}${index}`);
+	});
+};
+
+//#endregion
+//#region src/shared/model/builder/createContext.tsx
+function createStoreContext() {
+	const BuilderContext = createContext(null);
+	const Provider = ({ plugins, children }) => {
+		const storeRef = useRef(null);
+		if (!storeRef.current) storeRef.current = (layout, path, children) => {
+			return /* @__PURE__ */ jsx(DynamicBuilder, {
+				layout,
+				path,
+				plugins,
+				children
+			});
+		};
+		return /* @__PURE__ */ jsx(BuilderContext.Provider, {
+			value: storeRef.current,
+			children
+		});
+	};
+	function useBuilder() {
+		const store = 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 = forwardRef((props, ref) => {
+	const submitHdl = useSubmit((data) => {
+		if (props.onSubmit) props.onSubmit(data);
+	});
+	useImperativeHandle(ref, () => ({
+		reset: () => {},
+		submit: () => {
+			submitHdl();
+		},
+		errors: () => {
+			return {};
+		}
+	}), [props.onSubmit]);
+	return /* @__PURE__ */ jsxs("form", {
+		onSubmit: (e) => {
+			e.preventDefault();
+			submitHdl();
+		},
+		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("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 = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		style: { marginBottom: "15px" },
+		children: [
+			/* @__PURE__ */ jsxs("label", {
+				htmlFor: id,
+				children: [field.label, ":"]
+			}),
+			/* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", { children: field.label }), /* @__PURE__ */ jsx("div", {
+		className: clsx(className, "flex"),
+		children: Builder
+	})] });
+};
+FormGroup.fieldProps = ["fields"];
+
+//#endregion
+//#region src/shared/model/index.ts
+const fieldShema = z.object({
+	name: z.string(),
+	label: z.string().optional(),
+	type: z.string()
+});
+
+//#endregion
+export { FormBuilder, FormGroup, TextField, fieldShema };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["createStoreContext","createStoreContext"],"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/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@idem.agency/form-builder",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Построитель форм",
   "main": "src/index.ts",
   "author": "idem.agency",
   "license": "ISC",
   "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "tsdown",
+    "dev:lib": "tsdown --watch",
     "lint": "eslint .",
     "preview": "vite preview",
     "test": "vitest run"
@@ -16,7 +20,8 @@
   "dependencies": {
     "clsx": "2.1.1",
     "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "react-dom": "19.2.3",
+    "zod": "4.3.6"
   },
   "devDependencies": {
     "@eslint/js": "9.39.2",
@@ -30,10 +35,13 @@
     "eslint-plugin-react-refresh": "0.4.26",
     "globals": "17.0.0",
     "tailwindcss": "4.1.18",
+    "tsdown": "0.20.3",
     "typescript": "5.9.3",
     "typescript-eslint": "8.53.0",
     "vite": "7.3.1",
     "vite-plugin-dts": "4.5.4",
+    "vite-tsconfig-paths": "6.0.5",
     "vitest": "4.0.17"
-  }
+  },
+  "gitHead": "5c2212eb5f6bc9bf7e422e68b90700cfecd03f41"
 }

package/{index.html → public/index.html}

@@ -5,10 +5,9 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Виджет для генерации форм</title>
-    <link href="/src/app/test.css" rel="stylesheet">
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="main.tsx"></script>
   </body>
 </html>

package/public/main.tsx

@@ -0,0 +1,90 @@
+import {StrictMode} from 'react'
+import {createRoot} from 'react-dom/client'
+import { FormBuilder, FormGroup, TextField } from "~/src/index";
+import type {FormBuilderRef, FormElementRegistry, FormFieldConfig} from "~/src/index";
+import {useRef} from "react";
+
+function Debug() {
+  
+  const plugins: FormElementRegistry = {
+    text: TextField,
+    group: FormGroup,
+  }
+  
+  const layout: FormFieldConfig[] = [
+    {
+      name: 'username',
+      label: 'Имя пользователя',
+      type: 'text',
+      placeholder: 'Введите ваше имя',
+      defaultValue: 'Мое имя',
+      validation: ['required', 'confirm:personal.username_2,Имя 2 пользователя'],
+      viewConfig: {
+        logic: 'and',
+        rules: [
+          {
+            field: 'personal.username_2',
+            operator: 'in',
+            value: ['Alex']
+          },
+        ]
+      }
+    },
+    {
+      name: 'personal',
+      label: 'Группа',
+      type: 'group',
+      variant: 'col',
+      fields: [
+        {
+          id: 'username_2',
+          name: 'username_2',
+          label: 'Имя 2 пользователя',
+          type: 'text',
+          placeholder: 'Введите ваше имя 2',
+          defaultValue: 'Мое имя',
+          validation: ['required'],
+        },
+        {
+          name: 'username_3',
+          label: 'Имя 3 пользователя',
+          type: 'text',
+          placeholder: 'Введите ваше имя 2',
+          defaultValue: 'Мое имя',
+          validation: ['required'],
+        },
+        {
+          name: 'username_4',
+          label: 'Имя 4 пользователя',
+          type: 'text',
+          placeholder: 'Введите ваше имя 2',
+          defaultValue: 'Мое имя',
+          validation: ['required'],
+        },
+      ],
+    },
+  ];
+  
+  const ref = useRef<FormBuilderRef>(null);
+  return <div>
+    <FormBuilder ref={ref} layout={layout} plugins={plugins} formData={{
+      personal: {
+        username_2: "Alex"
+      }
+    }}></FormBuilder>
+    <button onClick={() => {
+      ref.current?.reset();
+    }}>Сбросить
+    </button>
+    <button onClick={() => {
+      ref.current?.submit();
+    }}>Отправить
+    </button>
+  </div>
+}
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <Debug/>
+  </StrictMode>,
+)

package/src/app/debug.tsx

@@ -1,89 +0,0 @@
-import FormBuilder from "./index.tsx";
-import type {FormBuilderRef, FormElementRegistry, FormFieldConfig} from "../shared/types/common.ts";
-import {FormGroup, TextField} from "../widgets/form";
-import {useRef} from "react";
-
-function Debug() {
-  
-  const plugins: FormElementRegistry = {
-    text: TextField,
-    group: FormGroup,
-  }
-  
-  const layout: FormFieldConfig[] = [
-    {
-      id: 'username',
-      name: 'username',
-      label: 'Имя пользователя',
-      type: 'text',
-      placeholder: 'Введите ваше имя',
-      defaultValue: 'Мое имя',
-      validation: ['required', 'confirm:personal.username_2,Имя 2 пользователя'],
-      viewConfig: {
-        logic: 'and',
-        rules: [
-          {
-            field: 'personal.username_2',
-            operator: 'in',
-            value: ['Alex']
-          },
-        ]
-      }
-    },
-    {
-      id: 'personal',
-      name: 'personal',
-      label: 'Группа',
-      type: 'group',
-      variant: 'col',
-      fields: [
-        {
-          id: 'username_2',
-          name: 'username_2',
-          label: 'Имя 2 пользователя',
-          type: 'text',
-          placeholder: 'Введите ваше имя 2',
-          defaultValue: 'Мое имя',
-          validation: ['required'],
-        },
-        {
-          id: 'username_3',
-          name: 'username_3',
-          label: 'Имя 3 пользователя',
-          type: 'text',
-          placeholder: 'Введите ваше имя 2',
-          defaultValue: 'Мое имя',
-          validation: ['required'],
-        },
-        {
-          id: 'username_4',
-          name: 'username_4',
-          label: 'Имя 4 пользователя',
-          type: 'text',
-          placeholder: 'Введите ваше имя 2',
-          defaultValue: 'Мое имя',
-          validation: ['required'],
-        },
-      ],
-    },
-  ];
-  
-  const ref = useRef<FormBuilderRef>(null);
-  return <div>
-    <FormBuilder ref={ref} layout={layout} plugins={plugins} formData={{
-      personal: {
-        username_2: "Alex"
-      }
-    }}></FormBuilder>
-    <button onClick={() => {
-      ref.current?.reset();
-    }}>Сбросить
-    </button>
-    <button onClick={() => {
-      ref.current?.submit();
-    }}>Отправить
-    </button>
-  </div>
-}
-
-export default Debug