npm - @idem.agency/form-builder - Versions diffs - 0.0.9 - Mend

@idem.agency/form-builder 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/CHANGELOG.md +32 -0
package/README.md +20 -0
package/eslint.config.js +23 -0
package/index.html +14 -0
package/package.json +39 -0
package/src/app/debug.tsx +89 -0
package/src/app/index.tsx +69 -0
package/src/app/test.css +1 -0
package/src/index.ts +6 -0
package/src/main.tsx +9 -0
package/src/shared/hook/useUpdateEffect.tsx +23 -0
package/src/shared/lib/VisibleCore.spec.ts +103 -0
package/src/shared/lib/VisibleCore.ts +43 -0
package/src/shared/lib/validation/core.spec.ts +103 -0
package/src/shared/lib/validation/core.ts +79 -0
package/src/shared/lib/validation/rules/base.ts +10 -0
package/src/shared/lib/validation/rules/confirm.spec.ts +17 -0
package/src/shared/lib/validation/rules/confirm.ts +32 -0
package/src/shared/lib/validation/rules/email.spec.ts +12 -0
package/src/shared/lib/validation/rules/email.ts +13 -0
package/src/shared/lib/validation/rules/require.spec.ts +13 -0
package/src/shared/lib/validation/rules/require.ts +12 -0
package/src/shared/model/index.ts +13 -0
package/src/shared/model/store.tsx +52 -0
package/src/shared/types/common.ts +79 -0
package/src/shared/utils.ts +25 -0
package/src/widgets/dynamicBuilder/index.tsx +63 -0
package/src/widgets/form/index.ts +2 -0
package/src/widgets/form/ui/group/index.tsx +27 -0
package/src/widgets/form/ui/input/index.tsx +29 -0
package/tsconfig.app.json +26 -0
package/tsconfig.json +7 -0
package/tsconfig.node.json +24 -0
package/vite-env.d.ts +1 -0
package/vite.config.ts +20 -0

package/CHANGELOG.md ADDED Viewed

@@ -0,0 +1,32 @@
+# Change Log
+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)
+**Note:** Version bump only for package @idem.agency/form-builder

package/README.md ADDED Viewed

@@ -0,0 +1,20 @@
+# React Form Builder
+Построитель форм с валидацией и проверкой отображения полей.
+Легко расширяется за счет системы плагинов для валидаторов и полей
+### Параметры
+| Название параметра | Описание                                  | Является обязательным |
+|:-------------------|:------------------------------------------|:---------------------:|
+| formData           | Стартовые данные формы                    |                       |
+| layout             | Структура формы                           |          Да           |
+| plugins            | Объект с доступными компонентами формы    |          Да           |
+| onChange           | Событие на изменение данных формы         |                       |
+| onSubmit           | Событие на отправку формы                 |                       |
+| children           | Элемент который добавляется внутри формы  |                       |

package/eslint.config.js ADDED Viewed

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { globalIgnores } from 'eslint/config'
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

package/index.html ADDED Viewed

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <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>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,39 @@
+{
+  "name": "@idem.agency/form-builder",
+  "version": "0.0.9",
+  "description": "Построитель форм",
+  "main": "src/index.ts",
+  "author": "idem.agency",
+  "license": "ISC",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "clsx": "2.1.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "9.39.2",
+    "@tailwindcss/vite": "4.1.18",
+    "@testing-library/react": "16.3.1",
+    "@types/react": "19.2.8",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react-swc": "3.11.0",
+    "eslint": "9.39.2",
+    "eslint-plugin-react-hooks": "5.2.0",
+    "eslint-plugin-react-refresh": "0.4.26",
+    "globals": "17.0.0",
+    "tailwindcss": "4.1.18",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.53.0",
+    "vite": "7.3.1",
+    "vite-plugin-dts": "4.5.4",
+    "vitest": "4.0.17"
+  }
+}

package/src/app/debug.tsx ADDED Viewed

@@ -0,0 +1,89 @@
+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

package/src/app/index.tsx ADDED Viewed

@@ -0,0 +1,69 @@
+'use client';
+import type {FormBuilderRef, TFormBuilder} from "../shared/types/common";
+import {StoreContext, storeReducer,} from "../shared/model/store";
+import {DynamicBuilder} from "../widgets/dynamicBuilder";
+import { forwardRef, useImperativeHandle, useMemo, useReducer } from "react";
+import {ValidationCore} from "../shared/lib/validation/core";
+import { useUpdateEffect } from '../shared/hook/useUpdateEffect.tsx';
+export const FormBuilder = forwardRef<FormBuilderRef, TFormBuilder>((props, ref) => {
+  const validator = useMemo(() => {
+    return (new ValidationCore(props.layout, props.plugins))
+  }, [props.layout, props.plugins]);
+  const [state, dispatch] = useReducer(storeReducer, {
+    formData: props.formData ?? {},
+    errors: {},
+  });
+  useUpdateEffect(() => {
+    if (props.onChange) {
+      props.onChange(state.formData);
+    }
+  }, [state.formData, props.onChange]);
+  const submit = () => {
+    const errors = validator.validate(state.formData);
+    if (Object.keys(errors).length == 0) {
+      if (props.onSubmit) {
+        props.onSubmit(state.formData)
+      }
+    } else {
+      dispatch({
+        type: 'setErrors',
+        payload: {
+          errors
+        }
+      });
+    }
+  }
+  useImperativeHandle(ref, () => ({
+    reset: () => {
+      dispatch({type: 'reset'})
+    },
+    submit: () => {
+      submit();
+    },
+    errors: () => {
+      return state?.errors ?? {};
+    }
+  }), [state, props.onSubmit]);
+  return <form onSubmit={(e) => {
+      e.preventDefault();
+      submit();
+    }}
+    className={props?.className}
+  >
+      <StoreContext.Provider value={{state, dispatch}}>
+        <DynamicBuilder layout={props.layout} plugins={props.plugins} />
+      </StoreContext.Provider>
+      <input type="submit" style={{ display: 'none' }}/>
+      {props.children}
+    </form>
+});
+export default FormBuilder;

package/src/app/test.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ @import "tailwindcss";

package/src/index.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import FormBuilder from "./app";
+import type { IRule, TGroupRules, FormFieldConfig, FormElementProps, FormElementRegistry, FormBuilderRef} from "./shared/types/common.ts";
+export {FormGroup, TextField} from "./widgets/form";
+export type {IRule, TGroupRules, FormFieldConfig, FormElementProps, FormElementRegistry, FormBuilderRef};
+export { FormBuilder };
+export { fieldShema } from './shared/model';

package/src/main.tsx ADDED Viewed

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import Debug from './app/debug.tsx'
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <Debug />
+  </StrictMode>,
+)

package/src/shared/hook/useUpdateEffect.tsx ADDED Viewed

@@ -0,0 +1,23 @@
+import {
+  useEffect,
+  useRef,
+  type DependencyList,
+  type EffectCallback,
+} from 'react';
+/**
+ * Хук как useEffect, но не выполняется на первом рендере.
+ * Выполняется только на обновлениях, когда меняются зависимости.
+ */
+export const useUpdateEffect = (effect: EffectCallback, deps: DependencyList): void => {
+  const isFirstRenderRef = useRef(true);
+  useEffect(() => {
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+      return;
+    }
+    return effect();
+  }, deps);
+};

package/src/shared/lib/VisibleCore.spec.ts ADDED Viewed

@@ -0,0 +1,103 @@
+import {expect, test} from "vitest";
+import {VisibleCore} from "./VisibleCore.ts";
+import type { TGroupRules } from "../../index.ts";
+test.each([
+    {
+      operator: 'logic: and, operator: in',
+      setting: {
+        logic: 'and',
+        rules: [
+          {
+            field: 'test',
+            operator: 'in',
+            value: ['Alex']
+          },
+        ]
+      } as TGroupRules,
+      formData: {},
+      result: false,
+    },
+  {
+    operator: 'logic: and, operator: in',
+    setting: {
+      logic: 'and',
+      rules: [
+        {
+          field: 'test',
+          operator: 'in',
+          value: ['Alex', 'Habr']
+        },
+      ]
+    } as TGroupRules,
+    formData: {test: 'Alex'},
+    result: true,
+  },
+  {
+    operator: 'logic: and, operator =',
+    setting: {
+      logic: 'and',
+      rules: [
+        {
+          field: 'test',
+          operator: '=',
+          value: "habr"
+        },
+      ]
+    } as TGroupRules,
+    formData: {test: 'habr'},
+    result: true,
+  },
+  {
+    operator: 'logic: or, operator =',
+    setting: {
+      logic: 'or',
+      rules: [
+        {
+          field: 'test',
+          operator: '=',
+          value: "habr"
+        },
+        {
+          field: 'operator',
+          operator: '=',
+          value: "habr"
+        },
+      ]
+    } as TGroupRules,
+    formData: {operator: 'habr'},
+    result: true,
+  },
+  {
+    operator: 'logic: or, deep rules, operator =',
+    setting: {
+      logic: 'or',
+      rules: [
+        {
+          field: 'test',
+          operator: '=',
+          value: "habr"
+        },
+        {
+          logic: 'and',
+          rules: [
+            {
+              field: 'test',
+              operator: '=',
+              value: "1"
+            },
+            {
+              field: 'test2',
+              operator: '=',
+              value: "2"
+            }
+          ]
+        },
+      ]
+    } as TGroupRules,
+    formData: {test: '1', test2: '2'},
+    result: true,
+  },
+])('is visible for operation $operator with data $formData', ({setting, formData, result}) => {
+  expect(VisibleCore.isVisible(setting, formData)).toBe(result)
+});

package/src/shared/lib/VisibleCore.ts ADDED Viewed

@@ -0,0 +1,43 @@
+import type {TCommonRule, TGroupRules, FormData, TInRule, TEqualRule} from "../types/common";
+import {getNestedValue} from "../utils";
+export class VisibleCore {
+  private static isGroupRule(i: TGroupRules | TCommonRule): i is TGroupRules {
+    return 'rules' in i;
+  }
+  private static isInOperator(i: TCommonRule): i is TInRule  {
+    return i.operator == 'in' ;
+  }
+  private static isEqualOperand(i: TCommonRule): i is TEqualRule  {
+    return i.operator == '=' ;
+  }
+  static checkGroup(groupRule: TGroupRules, formData: FormData): boolean {
+    const logic = groupRule.logic;
+    const items: boolean[] = [];
+    groupRule.rules.forEach((rule: TGroupRules | TCommonRule) => {
+      if (this.isGroupRule(rule)) {
+        items.push(this.checkGroup(rule, formData));
+      } else {
+        const value = getNestedValue(formData, rule.field.split('.'))
+        if (this.isInOperator(rule)) {
+          items.push(rule.value.indexOf(value) !== -1);
+        } else if (this.isEqualOperand(rule)) {
+          items.push(rule.value == value);
+        }
+      }
+    })
+    if (logic == 'or') {
+      return items.indexOf(true) != -1
+    } else {
+      return items.indexOf(false) == -1;
+    }
+  }
+  static isVisible(setting: TGroupRules, formData: FormData): boolean {
+    return this.checkGroup(setting, formData);
+  }
+}

package/src/shared/lib/validation/core.spec.ts ADDED Viewed

@@ -0,0 +1,103 @@
+import {expect, test} from "vitest";
+import {ValidationCore} from "./core.ts";
+import {FormGroup, TextField} from "../../../widgets/form";
+import type {FormElementRegistry, FormFieldConfig} from "../../../index.ts";
+import {RequireRule} from "./rules/require.ts";
+const testFormConfig: FormFieldConfig[] = [{
+  id: 'test',
+  name: 'test',
+  type: 'text',
+  label: '',
+}];
+const testFormPlugins: FormElementRegistry = {
+  text: TextField,
+  group: FormGroup,
+};
+test('Validation core empty data with required has error', () => {
+  testFormConfig[0].validation = ['required'];
+  const validationCode = new ValidationCore(testFormConfig, testFormPlugins);
+  expect(validationCode.validate({})).not.toBe({})
+});
+test('Validation core has data not errors', () => {
+  testFormConfig[0].validation = ['required'];
+  const validationCode = new ValidationCore(testFormConfig, testFormPlugins);
+  expect(validationCode.validate({test: 'Alex'})).toEqual({});
+});
+test('Validation core: rule as class', () => {
+  testFormConfig[0].validation = [new RequireRule()];
+  const validationCode = new ValidationCore(testFormConfig, testFormPlugins);
+  expect(validationCode.validate({test: 'Alex'})).toEqual({});
+});
+test('Validation core: rule as string with params', () => {
+  testFormConfig[0].validation = ['confirm:confirm'];
+  const validationCode = new ValidationCore(testFormConfig, testFormPlugins);
+  expect(validationCode.validate({test: 'Alex', confirm: 'Alex'})).toEqual({});
+});
+test('Validation core: rule as string with params get correct message', () => {
+  testFormConfig[0].validation = ['required', 'email', 'confirm:confirm,подтверждением'];
+  const validationCode = new ValidationCore(testFormConfig, testFormPlugins);
+  expect(validationCode.validate({test: 1})).toStrictEqual({
+    "test": {
+      "required": "Ошибка валидации поля",
+      "email": "Ошибка валидации поля",
+      "confirm": "Поле не совпадает с подтверждением",
+    }
+  });
+});
+test('Validation core: check empty data', () => {
+  testFormConfig[0].validation = ['required', 'email'];
+  const validationCode = new ValidationCore(testFormConfig, testFormPlugins);
+  expect(validationCode.validate({})).toStrictEqual({
+    "test": {
+      "required": "Ошибка валидации поля",
+      "email": "Ошибка валидации поля",
+    }
+  });
+});
+test('Validation core: check in deep data group', () => {
+  const config: FormFieldConfig[] = [{
+    id: 'group',
+    name: 'group',
+    type: 'group',
+    label: '',
+    fields: [
+      {
+        id: 'personal',
+        name: 'personal',
+        type: 'group',
+        label: '',
+        fields: [
+          {
+            id: 'test',
+            name: 'test',
+            type: 'text',
+            label: '',
+            validation: ['required', 'email']
+          }
+        ]
+      }
+    ]
+  }];
+  const validationCode = new ValidationCore(config, testFormPlugins);
+  expect(validationCode.validate({})).toStrictEqual({
+    "group": {
+      "personal": {
+        "test": {
+          "required": "Ошибка валидации поля",
+          "email": "Ошибка валидации поля",
+        }
+      }
+    }
+  });
+});

package/src/shared/lib/validation/core.ts ADDED Viewed

@@ -0,0 +1,79 @@
+import type {FormData, FormElementRegistry, FormFieldConfig, IRule} from "../../types/common";
+import {getNestedValue, updateNestedValue} from "../../utils";
+import {RequireRule} from "./rules/require";
+import {EmailRule} from "./rules/email";
+import {ConfirmRule} from "./rules/confirm";
+export class ValidationCore {
+  private readonly layout: FormFieldConfig[];
+  private readonly plugins: FormData;
+  constructor(layout: FormFieldConfig[], plugins: FormElementRegistry) {
+    this.layout = layout;
+    this.plugins = plugins
+  }
+  private validationIsConfig(i: any): i is FormFieldConfig[] {
+    return i && Array.isArray(i);
+  }
+  private checkRules(layout: FormFieldConfig[], data: FormData, path: string[] = [], errors = {}) {
+      layout.map((i) => {
+        const element = this.plugins[i.type];
+        const currentPath = [...path, i.id];
+        if (element && element.fieldProps) {
+          element.fieldProps.forEach((fieldProps: string) => {
+            if (this.validationIsConfig(i[fieldProps])) {
+              errors = this.checkRules(i[fieldProps], data, currentPath, errors);
+            }
+          });
+        }
+        if (i.validation && Array.isArray(i.validation)) {
+          i.validation.forEach(validation => {
+            let validationResult: boolean | string = true;
+            let ruleName: string;
+            const value = getNestedValue(data, currentPath);
+            let validationClass: IRule|null = null;
+            if (typeof validation === "string") {
+              const [validator, rawParams] = validation.split(':');
+              const params: string[] = (rawParams ?? '').split(',');
+              switch (validator) {
+                case "required":
+                  validationClass = new RequireRule(...params);
+                  break;
+                case "email":
+                  validationClass = new EmailRule(...params);
+                  break;
+                case "confirm":
+                  validationClass = new ConfirmRule(...params);
+                  break;
+              }
+            } else {
+              validationClass = validation;
+            }
+            if (validationClass) {
+              ruleName = validationClass.getName(),
+              validationResult = validationClass.validate(value, data);
+            } else {
+              ruleName = '';
+              validationResult = true;
+            }
+            if (validationClass && validationResult !== true) {
+              errors = updateNestedValue(errors, [...currentPath, ruleName], validationClass.message())
+            }
+          })
+        }
+      });
+      return errors;
+  }
+  validate(data: FormData) {
+    return this.checkRules(this.layout, data);
+  }
+}

package/src/shared/lib/validation/rules/base.ts ADDED Viewed

@@ -0,0 +1,10 @@
+export class BaseRule {
+  params: string[];
+  constructor(...params: string[]) {
+    this.params = params;
+  }
+  message() {
+    return 'Ошибка валидации поля';
+  }
+}

package/src/shared/lib/validation/rules/confirm.spec.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import {expect, test} from 'vitest'
+import {ConfirmRule} from "./confirm.ts"
+test('Confirm rule. Empty data', () => {
+  const rule = new ConfirmRule('personal');
+  expect(rule.validate('test', {})).toBe(false);
+})
+test('Confirm rule. Success data', () => {
+  const rule = new ConfirmRule('personal');
+  expect(rule.validate('test', {personal: 'test'})).toBe(true);
+})
+test('Confirm rule. Set error message', () => {
+  const rule = new ConfirmRule('personal', 'Personal');
+  const validator = rule.validate('test', {personal2: 'test'});
+  expect(!validator ? rule.message() : '').toBe('Поле не совпадает с Personal');
+})

package/src/shared/lib/validation/rules/confirm.ts ADDED Viewed

@@ -0,0 +1,32 @@
+import type {IRule, FormData} from "../../../types/common";
+import {BaseRule} from "./base";
+import {getNestedValue} from "../../../utils";
+export class ConfirmRule extends BaseRule implements IRule {
+  protected confirmField?: string;
+  protected confirmLabel?: string;
+  constructor(...args: string[] ) {
+    super(...args);
+    const confirmField = args.shift();
+    const confirmLabel = args.shift();
+    if (confirmField) {
+      this.confirmField = confirmField;
+    }
+    if (confirmLabel) {
+      this.confirmLabel = confirmLabel;
+    }
+  }
+  getName(): string {
+    return "confirm";
+  }
+  validate(value: string, formData: FormData): boolean {
+    return this.confirmField ? value == getNestedValue(formData, this.confirmField.split('.')) : false;
+  }
+  message(): string {
+    return `Поле не совпадает с ${this.confirmLabel ?? this.confirmField}`;
+  }
+}

package/src/shared/lib/validation/rules/email.spec.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import {expect, test} from 'vitest'
+import {EmailRule} from "./email.ts";
+const rule = new EmailRule();
+test.each([
+  ['test@test.ru', true],
+  ['123123123', false],
+  ['', false],
+  ['123123123@', false],
+])('Email validate %s -> %d', ($email, $result) => {
+  expect(rule.validate($email)).toBe($result);
+});

package/src/shared/lib/validation/rules/email.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import type {IRule} from "../../../types/common";
+import {BaseRule} from "./base";
+export class EmailRule extends BaseRule implements IRule {
+  private emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+  getName(): string {
+    return "email";
+  }
+  validate(value: string): boolean {
+    return this.emailRegex.test(value);
+  }
+}

package/src/shared/lib/validation/rules/require.spec.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import {expect, test} from 'vitest'
+import {RequireRule} from "./require.ts";
+const rule = new RequireRule();
+test.each([
+  ['1123123', true],
+  ['sdfsdfsdf', true],
+  ['', false],
+  [null, false],
+])('Required validate %s -> %d', ($data, $result) => {
+  expect(rule.validate($data as string)).toBe($result);
+});

package/src/shared/lib/validation/rules/require.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import type {IRule} from "../../../types/common";
+import {BaseRule} from "./base";
+export class RequireRule extends BaseRule implements IRule{
+  getName(): string {
+    return "required";
+  }
+  validate(value: string | null | undefined): boolean {
+    return value !== undefined && value !== null && value.length > 0;
+  }
+}

package/src/shared/model/index.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { z } from 'zod';
+const fieldShema = z.object({
+  id: z.string(),
+  name: z.string(),
+  label: z.string().optional(),
+  type: z.string(),
+});
+type TField = z.infer<typeof fieldShema>;
+export type { TField };
+export { fieldShema };

package/src/shared/model/store.tsx ADDED Viewed

@@ -0,0 +1,52 @@
+import type {FormData} from "../types/common";
+import {
+  type ActionDispatch,
+  createContext,
+  type SetStateAction,
+  useContext,
+} from "react";
+import {updateNestedValue} from "../utils";
+const initState: {
+  formData: FormData
+  errors: Record<string, any>
+}  = {
+  formData: {},
+  errors: {}
+};
+export const StoreContext = createContext<{
+  state: typeof initState;
+  dispatch: ActionDispatch<SetStateAction<any>>;
+}>(null!);
+export function storeReducer(state: any, action: SetStateAction<any>): any {
+  const newData = {...state};
+  switch (action.type){
+    case 'setValue':
+      newData.formData = updateNestedValue(newData.formData, action.payload.path, action.payload.value);
+      break;
+    case 'setError':
+      newData.errors = updateNestedValue(newData.errors, action.payload.path, action.payload.value);
+      break;
+    case 'reset':
+      newData.formData = {};
+      newData.errors = {};
+      break;
+    case 'setErrors':
+      newData.errors = {...action.payload.errors};
+      break;
+  }
+  return newData;
+}
+export const useStore = () => {
+  const context = useContext(StoreContext);
+  if (context === undefined) {
+    throw new Error('useStore must be used within a StoreProvider');
+  }
+  return context;
+};

package/src/shared/types/common.ts ADDED Viewed

@@ -0,0 +1,79 @@
+import {type FC, type ReactNode} from "react";
+import type { TField } from '../model';
+export type ConfigFunctionComponent<P> = FC<P> & {
+  fieldProps?: string[];
+}
+export type RC<T = {}> = ConfigFunctionComponent<T & { className?: string, children?: ReactNode, }>;
+export type FormData = Record<string, any>;
+export interface IRule {
+  getName: () => string;
+  validate: (value: string, formData: FormData) => boolean;
+  message: () => string;
+}
+export type FormFieldBase = {
+  validation?: (string | IRule)[];
+  viewConfig?: TGroupRules
+} & TField;
+export type FormFieldConfig = FormFieldBase & Record<string, any>;
+export type FormElementProps<F extends FormFieldConfig = FormFieldConfig> = {
+  field: F;
+  builder: TDynamicBuilder,
+  plugins: FormElementRegistry,
+  path: string[];
+  value: any;
+  errors?: Record<string, string>;
+  onChange: (value: any) => void;
+};
+export type FormElementComponent<F extends FormFieldConfig = FormFieldConfig> = RC<FormElementProps<F>>;
+export type FormElementRegistry = Record<string, FormElementComponent<any>>;
+export type TFormBuilder = {
+  formData?: FormData,
+  className?: string,
+  layout: FormFieldConfig[],
+  plugins: FormElementRegistry,
+  onChange?: (formData: any) => void,
+  onSubmit?: (formData: any) => void,
+  children?: ReactNode,
+}
+export type TDynamicBuilder = RC<{
+  layout: FormFieldConfig[],
+  plugins: FormElementRegistry,
+  path?: string[],
+}>;
+export type TInRule = {
+  operator: 'in',
+  value: (string | number | boolean)[]
+} & TCommonRule
+export type TEqualRule = {
+  operator: '=',
+  value: string | number | boolean
+} & TCommonRule
+export type TCommonRule = {
+  operator: string,
+  field: string,
+  value: any,
+};
+export type TGroupRules = {
+  logic: 'and' | 'or',
+  rules: (TGroupRules | TCommonRule)[]
+}
+export type FormBuilderRef = {
+  reset: () => void;
+  submit: () => void;
+  errors: () => Record<string, any>
+}

package/src/shared/utils.ts ADDED Viewed

@@ -0,0 +1,25 @@
+export function updateNestedValue(obj: any, path: string[], value: any): any {
+  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;
+}
+export function getNestedValue(obj: any, path: string[]): any {
+  return path.reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : undefined), obj);
+}

package/src/widgets/dynamicBuilder/index.tsx ADDED Viewed

@@ -0,0 +1,63 @@
+import type {FormFieldConfig, TDynamicBuilder} from "../../shared/types/common";
+import {getNestedValue} from "../../shared/utils";
+import {useCallback} from "react";
+import {VisibleCore} from "../../shared/lib/VisibleCore";
+import {useStore} from "../../shared/model/store";
+export const DynamicBuilder: TDynamicBuilder = (props) => {
+  const { state, dispatch } = useStore();
+  const path = props.path ?? [];
+  const isShow = useCallback((field: FormFieldConfig) => {
+    let result = true;
+    if (field.viewConfig) {
+      result = VisibleCore.isVisible(field.viewConfig, state.formData);
+    }
+    return result;
+  }, [state]);
+  return props.layout.map((field) => {
+      const FormElement = props.plugins[field.type];
+      if (!FormElement) {
+        console.warn(`Неизвестный тип поля: ${field.type}. Проверьте formRegistry.`);
+        return null;
+      }
+      const currentFieldPath = [...path, field.id];
+      const currentValue = getNestedValue(state.formData, currentFieldPath);
+      const currentErrors = getNestedValue(state.errors, currentFieldPath) as (Record<string, string> | undefined);
+      return isShow(field) ? (
+        <FormElement
+          key={field.id}
+          field={{...field}}
+          builder={DynamicBuilder}
+          path={currentFieldPath}
+          plugins={props.plugins}
+          value={currentValue}
+          errors={currentErrors}
+          onChange={(value: any) => {
+            dispatch({
+              type: 'setValue',
+              payload: {
+                path: currentFieldPath,
+                value
+              }
+            });
+            dispatch({
+              type: 'setError',
+              payload: {
+                path: currentFieldPath,
+                undefined
+              }
+            });
+          }}
+      />
+    ) : null;
+    })
+}

package/src/widgets/form/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './ui/input/index'
2	+ export * from './ui/group/index'

package/src/widgets/form/ui/group/index.tsx ADDED Viewed

@@ -0,0 +1,27 @@
+import type {FormElementProps, FormFieldBase, FormFieldConfig, RC} from "../../../../shared/types/common.ts";
+import clsx from "clsx";
+export type FormGroupConfig = FormFieldBase & { variant?: 'row' | 'col', fields: FormFieldConfig[] };
+function isGroupConfig(field: FormFieldConfig): field is FormGroupConfig {
+  return field.fields;
+}
+export const FormGroup: RC<FormElementProps<FormGroupConfig>> = ({field, path, builder, plugins}) => {
+  if (!isGroupConfig(field)) {
+    return null;
+  }
+  const variant = field.variant ?? 'col';
+  const Builder = builder;
+  const className = variant == 'col' ? 'flex-col' : 'flex-row';
+  return <div>
+    <div>{field.label}</div>
+    <div className={clsx(className, 'flex')}>
+      <Builder layout={field.fields} plugins={plugins} path={path}/>
+    </div>
+  </div>;
+};
+FormGroup.fieldProps = ['fields'];

package/src/widgets/form/ui/input/index.tsx ADDED Viewed

@@ -0,0 +1,29 @@
+import type {FormElementProps, FormFieldConfig, FormFieldBase, RC} from '../../../../shared/types/common';
+export type TextFieldConfig = FormFieldBase & { type: 'text' | 'email' | 'password';  placeholder?: string; };
+function isTextFieldConfig(field: FormFieldConfig): field is TextFieldConfig {
+  return field.type === 'text' || field.type === 'email' || field.type === 'password';
+}
+export const TextField: RC<FormElementProps> = ({ field, value, errors, onChange }) => {
+  if (!isTextFieldConfig(field)) {
+    console.warn(`TextField received an invalid field config for type: ${field.type}`);
+    return null;
+  }
+  return (
+    <div style={{ marginBottom: '15px' }}>
+      <label htmlFor={field.id}>{field.label}:</label>
+      <input
+        type={field.type}
+        id={field.id}
+        name={field.name}
+        placeholder={field.placeholder}
+        value={value || ''}
+        onChange={(e) => onChange(e.target.value)}
+        style={{ borderColor: errors ? 'red' : '#ccc' }}
+      />
+      {errors && <p style={{ color: 'red', fontSize: '0.8em' }}>{Object.values(errors).join(', ')}</p>}
+    </div>
+  );
+};

package/tsconfig.app.json ADDED Viewed

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json ADDED Viewed

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ /// <reference types="vite/client" />

package/vite.config.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+import tailwindcss from "@tailwindcss/vite";
+import dts from 'vite-plugin-dts';
+export default defineConfig({
+  plugins: [react(), tailwindcss(), dts({ rollupTypes: true, tsconfigPath: './tsconfig.app.json' })],
+  build: {
+    lib: {
+      entry: "./src/index.ts",
+      name: 'index',
+      fileName: "index",
+      formats: ['es']
+    },
+    copyPublicDir: false,
+    rollupOptions: {
+      external: ['react', 'react/jsx-runtime'],
+    }
+  }
+})