@idem.agency/form-builder 0.0.10 → 0.0.11

package/src/app/index.tsx

@@ -1,66 +1,77 @@
 'use client';
 
 import type {FormBuilderRef, TFormBuilder} from "../shared/types/common";
-import {StoreContext, storeReducer,} from "../shared/model/store";
+// import {StoreContext, storeReducer,} from "@/shared/model";
+
 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';
+import { forwardRef, useImperativeHandle} from "react";
+// import {ValidationCore} from "@/shared/lib/validation/core";
+// import { useUpdateEffect } from '@/shared/hook/useUpdateEffect';
+import {FormStoreProvider, useSubmit} from "@/shared/model/store";
+import {BuilderProvider} from "@/shared/model/builder";
 
 export const FormBuilder = forwardRef<FormBuilderRef, TFormBuilder>((props, ref) => {
+  // const validator = useMemo(() => {
+  //   return (new ValidationCore(props.layout, props.plugins))
+  // }, [props.layout, props.plugins]);
 
-  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);
+  // const [state, dispatch] = useReducer(storeReducer, {
+  //   formData: props.formData ?? {},
+  //   errors: {},
+  // });
+  //
+  // useUpdateEffect(() => {
+  //   if (props.onChange) {
+  //     props.onChange(state.formData);
+  //   }
+  // }, [state.formData, props.onChange]);
+  const submitHdl = useSubmit((data) => {
+    if (props.onSubmit) {
+      props.onSubmit(data);
     }
-  }, [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
-        }
-      });
-    }
-  }
+  // 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'})
+      // dispatch({type: 'reset'})
     },
     submit: () => {
-      submit();
+      submitHdl();
     },
     errors: () => {
-      return state?.errors ?? {};
+      return {}
+      // return state?.errors ?? {};
     }
-  }), [state, props.onSubmit]);
+  }), [props.onSubmit]);
 
   return <form onSubmit={(e) => {
       e.preventDefault();
-      submit();
+      submitHdl();
     }}
     className={props?.className}
   >
-      <StoreContext.Provider value={{state, dispatch}}>
-        <DynamicBuilder layout={props.layout} plugins={props.plugins} />
-      </StoreContext.Provider>
+      <FormStoreProvider>
+        <BuilderProvider plugins={props.plugins}>
+          <DynamicBuilder layout={props.layout} plugins={props.plugins} />
+        </BuilderProvider>
+      </FormStoreProvider>
       <input type="submit" style={{ display: 'none' }}/>
       {props.children}
     </form>

package/src/{widgets/form → entity/inputs}/ui/group/index.tsx

@@ -1,5 +1,6 @@
 import type {FormElementProps, FormFieldBase, FormFieldConfig, RC} from "../../../../shared/types/common.ts";
 import clsx from "clsx";
+import {useBuilder} from "@/shared/model/builder";
 export type FormGroupConfig = FormFieldBase & { variant?: 'row' | 'col', fields: FormFieldConfig[] };
 
 function isGroupConfig(field: FormFieldConfig): field is FormGroupConfig {
@@ -7,19 +8,19 @@ function isGroupConfig(field: FormFieldConfig): field is FormGroupConfig {
 }
 
 
-export const FormGroup: RC<FormElementProps<FormGroupConfig>> = ({field, path, builder, plugins}) => {
+export const FormGroup: RC<FormElementProps<FormGroupConfig>> = ({field, path}) => {
   if (!isGroupConfig(field)) {
     return null;
   }
+  const Builder = useBuilder()(field.fields, path);
   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}/>
+      {Builder}
     </div>
   </div>;
 };

package/src/{widgets/form → entity/inputs}/ui/input/index.tsx

@@ -1,4 +1,5 @@
-import type {FormElementProps, FormFieldConfig, FormFieldBase, RC} from '../../../../shared/types/common';
+import type { FormElementProps, FormFieldConfig, FormFieldBase, RC } from '../../../../shared/types/common';
+import { useId } from "react";
 
 export type TextFieldConfig = FormFieldBase & { type: 'text' | 'email' | 'password';  placeholder?: string; };
 
@@ -11,12 +12,13 @@ export const TextField: RC<FormElementProps> = ({ field, value, errors, onChange
     console.warn(`TextField received an invalid field config for type: ${field.type}`);
     return null;
   }
+  const id = useId();
   return (
     <div style={{ marginBottom: '15px' }}>
-      <label htmlFor={field.id}>{field.label}:</label>
+      <label htmlFor={id}>{field.label}:</label>
       <input
         type={field.type}
-        id={field.id}
+        id={id}
         name={field.name}
         placeholder={field.placeholder}
         value={value || ''}

package/src/index.ts

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

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

@@ -1,5 +1,5 @@
-import type {FormData, FormElementRegistry, FormFieldConfig, IRule} from "../../types/common";
-import {getNestedValue, updateNestedValue} from "../../utils";
+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";
@@ -19,7 +19,7 @@ export class ValidationCore {
   private checkRules(layout: FormFieldConfig[], data: FormData, path: string[] = [], errors = {}) {
       layout.map((i) => {
         const element = this.plugins[i.type];
-        const currentPath = [...path, i.id];
+        const currentPath = [...path, i.name];
 
         if (element && element.fieldProps) {
           element.fieldProps.forEach((fieldProps: string) => {

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

@@ -1,6 +1,6 @@
-import type {IRule, FormData} from "../../../types/common";
+import type {IRule, FormData} from "@/shared/types/common";
 import {BaseRule} from "./base";
-import {getNestedValue} from "../../../utils";
+import {getNestedValue} from "@/shared/utils";
 
 export class ConfirmRule extends BaseRule implements IRule {
   protected confirmField?: string;

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

@@ -1,4 +1,4 @@
-import type {IRule} from "../../../types/common";
+import type {IRule} from "@/shared/types/common";
 import {BaseRule} from "./base";
 
 export class EmailRule extends BaseRule implements IRule {

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

@@ -1,4 +1,4 @@
-import type {IRule} from "../../../types/common";
+import type {IRule} from "@/shared/types/common";
 import {BaseRule} from "./base";
 
 export class RequireRule extends BaseRule implements IRule{

package/src/shared/model/builder/createContext.tsx

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

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

package/src/shared/model/index.ts

@@ -1,7 +1,6 @@
 import { z } from 'zod';
 
 const fieldShema = z.object({
-  id: z.string(),
   name: z.string(),
   label: z.string().optional(),
   type: z.string(),

package/src/shared/model/store/createStoreContext.tsx

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

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

@@ -0,0 +1,27 @@
+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,5 +1,5 @@
 import {type FC, type ReactNode} from "react";
-import type { TField } from '../model';
+import type { TField } from '@/shared/model';
 
 export type ConfigFunctionComponent<P> = FC<P> & {
   fieldProps?: string[];

package/src/widgets/dynamicBuilder/element.tsx

@@ -0,0 +1,31 @@
+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,63 +1,33 @@
-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";
+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 { 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);
+  
+  // 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;
     }
-    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;
-    })
+    
+    // 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}/>
+  })
 }

package/tsconfig.json

@@ -1,7 +1,24 @@
 {
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
+  "compilerOptions": {
+    "declaration": true,
+    "jsx": "react-jsx",
+    "emitDeclarationOnly": true,
+    "outDir": "dist",
+    "module": "ESNext",
+    "target": "ESNext",
+    "moduleResolution": "bundler",
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "~/*": ["./*"]
+    },
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*", "./*.ts", "./public/*.tsx"]
 }

package/tsdown.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "tsdown";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm", "cjs"],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  skipNodeModulesBundle: true
+});

package/vite.config.ts

@@ -1,20 +1,11 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
-import tailwindcss from "@tailwindcss/vite";
-import dts from 'vite-plugin-dts';
+import { defineConfig } from 'vitest/config'
+import tsconfigPaths from 'vite-tsconfig-paths'
 
 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'],
-    }
+  root: "./public",
+  plugins: [tsconfigPaths({ root: __dirname })],
+  test: {
+    globals: true,
+    environment: 'jsdom',
   }
 })

package/src/main.tsx

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