@idem.agency/form-builder 0.0.11 → 0.0.13

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

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

@@ -1,79 +0,0 @@
-import type {FormData, FormElementRegistry, FormFieldConfig, IRule} from "@/shared/types/common";
-import {getNestedValue, updateNestedValue} from "@/shared/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.name];
-
-        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

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

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

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

@@ -1,32 +0,0 @@
-import type {IRule, FormData} from "@/shared/types/common";
-import {BaseRule} from "./base";
-import {getNestedValue} from "@/shared/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

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

@@ -1,13 +0,0 @@
-import type {IRule} from "@/shared/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

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

@@ -1,12 +0,0 @@
-import type {IRule} from "@/shared/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/builder/createContext.tsx

@@ -1,40 +0,0 @@
-import React, {createContext, type ReactNode, useContext, useRef,} from "react";
-import {DynamicBuilder} from "@/widgets/dynamicBuilder";
-
-export function createStoreContext() {
-  const BuilderContext = createContext<((layout: any, path: string[]|undefined, children?: ReactNode) => ReactNode) | null>(null);
-  
-  const Provider: React.FC<{ children: React.ReactNode, plugins: any }> = ({
-                                                                             plugins,
-                                                                           children
-                                                                         }) => {
-    const storeRef = useRef<(layout: any, path: string[]|undefined, children?: ReactNode) => ReactNode>(null);
-    
-    if (!storeRef.current) {
-      storeRef.current = (layout: any, path: string[]|undefined, children?: ReactNode) => {
-        return <DynamicBuilder layout={layout} path={path} plugins={plugins}>{children}</DynamicBuilder>
-      };
-    }
-    
-    return (
-      <BuilderContext.Provider value={storeRef.current}>
-        {children}
-      </BuilderContext.Provider>
-    );
-  };
-  
-  function useBuilder(): (layout: any, path: string[]|undefined, children?: ReactNode) => ReactNode {
-    const store = useContext(BuilderContext);
-    
-    if (!store) {
-      throw new Error("StoreProvider missing");
-    }
-    
-    return store
-  }
-  
-  return {
-    Provider,
-    useBuilder
-  };
-}

package/src/shared/model/builder/index.ts

@@ -1,6 +0,0 @@
-import {createStoreContext} from "@/shared/model/builder/createContext";
-
-export const {
-  Provider: BuilderProvider,
-  useBuilder,
-} = createStoreContext();

package/src/shared/model/index.ts

@@ -1,12 +0,0 @@
-import { z } from 'zod';
-
-const fieldShema = z.object({
-  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/createStoreContext.tsx

@@ -1,74 +0,0 @@
-import {
-  createContext,
-  useContext,
-  useRef,
-  useSyncExternalStore
-} from "react";
-import { createStore, type Reducer, type Store } from "./store";
-
-export function createStoreContext<S, A>(
-  reducer: Reducer<S, A>,
-  initialState: S
-) {
-  const StoreContext = createContext<Store<S, A> | null>(null);
-  
-  const Provider: React.FC<{ children: React.ReactNode }> = ({
-                                                               children
-                                                             }) => {
-    const storeRef = useRef<Store<S, A>>(null);
-    
-    if (!storeRef.current) {
-      storeRef.current = createStore(reducer, initialState);
-    }
-
-    return (
-      <StoreContext.Provider value={storeRef.current}>
-        {children}
-      </StoreContext.Provider>
-    );
-  };
-  
-  function useStore<T>(
-    selector: (state: S) => T
-  ): T {
-    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: (state: S) => void) {
-    const store = useContext(StoreContext);
-    
-    return () => {
-      if (store) {
-        const state = store.getState();
-        onSubmit(state);
-      }
-    };
-  }
-  
-  return {
-    Provider,
-    useStore,
-    useSubmit,
-    useDispatch
-  };
-}

package/src/shared/model/store/index.ts

@@ -1,46 +0,0 @@
-import { createStoreContext } from "./createStoreContext";
-import type {FormData} from "@/shared/types/common";
-import {updateNestedValue} from "@/shared/utils";
-
-type State = {
-  formData: FormData
-  errors: Record<string, any>
-};
-
-type Action =
-  | { type: "setValue"; path: string[]; value: unknown }
-  | { type: "setError"; path: string[]; value?: string }
-  | { type: "reset"; }
-  | { type: "setErrors"; errors?: object };
-
-const initialState: State = {
-  formData: {},
-  errors: {}
-};
-
-function reducer(state: State, action: Action): State {
-  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;
-}
-
-export const {
-  Provider: FormStoreProvider,
-  useStore: useFormStore,
-  useDispatch: useFormDispatch,
-  useSubmit,
-} = createStoreContext(reducer, initialState);

package/src/shared/model/store/store.ts

@@ -1,27 +0,0 @@
-export type Reducer<S, A> = (state: S, action: A) => S;
-
-export function createStore<S, A>(
-  reducer: Reducer<S, A>,
-  initialState: S
-) {
-  let state = initialState;
-  const listeners = new Set<() => void>();
-  
-  return {
-    getState(): S {
-      return state;
-    },
-    
-    dispatch(action: A) {
-      state = reducer(state, action);
-      listeners.forEach(l => l());
-    },
-    
-    subscribe(listener: () => void) {
-      listeners.add(listener);
-      return () => listeners.delete(listener);
-    }
-  };
-}
-
-export type Store<S, A> = ReturnType<typeof createStore<S, A>>;

package/src/shared/types/common.ts

@@ -1,79 +0,0 @@
-import {type FC, type ReactNode} from "react";
-import type { TField } from '@/shared/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

@@ -1,25 +0,0 @@
-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/element.tsx

@@ -1,31 +0,0 @@
-import {useFormStore, useFormDispatch} from "@/shared/model/store";
-import {getNestedValue} from "@/shared/utils";
-
-export const BuilderElement = (props: any) => {
-  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 <Element
-    field={{...field}}
-    builder={props.DynamicBuilder}
-    path={currentFieldPath}
-    plugins={props.plugins}
-    value={value}
-    errors={errors}
-    onChange={(value: any) => {
-      dispatch({
-        type: 'setValue',
-        path: currentFieldPath,
-        value
-      });
-      dispatch({
-        type: 'setError',
-        path: currentFieldPath,
-        value: ''
-      });
-    }}
-  />;
-}

package/src/widgets/dynamicBuilder/index.tsx

@@ -1,33 +0,0 @@
-import type {TDynamicBuilder} from "@/shared/types/common";
-import {BuilderElement} from "@/widgets/dynamicBuilder/element";
-// import {getNestedValue} from "@/shared/utils";
-// import {useCallback} from "react";
-// import {VisibleCore} from "@/shared/lib/VisibleCore";
-// import {use} from "@/shared/model/store";
-
-export const DynamicBuilder: TDynamicBuilder = (props) => {
-  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, index) => {
-    const FormElement = props.plugins[field.type];
-    
-    if (!FormElement) {
-      console.warn(`Неизвестный тип поля: ${field.type}. Проверьте formRegistry.`);
-      return null;
-    }
-    
-    // const currentValue = getNestedValue(state.formData, currentFieldPath);
-    // const currentErrors = getNestedValue(state.errors, currentFieldPath) as (Record<string, string> | undefined);
-    return <BuilderElement key={`${field.name}${index}`} element={FormElement} path={path} field={field}/>
-  })
-}