feat: implemented fields extend & removed elementsMap

Author: chesterkmr

packages/ui/src/components/organisms/Form/DynamicForm/DynamicForm.tsx

@@ -8,13 +8,14 @@ import { useFieldHelpers } from './hooks/internal/useFieldHelpers';
 import { useTouched } from './hooks/internal/useTouched';
 import { useValidationSchema } from './hooks/internal/useValidationSchema';
 import { useValues } from './hooks/internal/useValues';
+import { extendFieldsRepository, getFieldsRepository } from './repositories';
 import { IDynamicFormProps } from './types';
 
 export const DynamicFormV2: FunctionComponent<IDynamicFormProps> = ({
   elements,
   values: initialValues,
   validationParams,
-  elementsMap,
+  fieldExtends,
   onChange,
   onFieldChange,
   onSubmit,
@@ -36,18 +37,18 @@ export const DynamicFormV2: FunctionComponent<IDynamicFormProps> = ({
       values: valuesApi.values,
       submit,
       fieldHelpers,
-      elementsMap,
+      elementsMap: fieldExtends ? extendFieldsRepository(fieldExtends) : getFieldsRepository(),
       callbacks: {
         onEvent,
       },
     }),
-    [touchedApi.touched, valuesApi.values, submit, fieldHelpers, elementsMap, onEvent],
+    [touchedApi.touched, valuesApi.values, submit, fieldHelpers, fieldExtends, onEvent],
   );
 
   return (
     <DynamicFormContext.Provider value={context}>
       <ValidatorProvider schema={validationSchema} value={context.values} {...validationParams}>
-        <Renderer elements={elements} schema={elementsMap as unknown as TRendererSchema} />
+        <Renderer elements={elements} schema={context.elementsMap as unknown as TRendererSchema} />
       </ValidatorProvider>
     </DynamicFormContext.Provider>
   );

packages/ui/src/components/organisms/Form/DynamicForm/DynamicForm.unit.test.tsx

@@ -9,7 +9,7 @@ import { useFieldHelpers } from './hooks/internal/useFieldHelpers';
 import { useTouched } from './hooks/internal/useTouched';
 import { useValidationSchema } from './hooks/internal/useValidationSchema';
 import { useValues } from './hooks/internal/useValues';
-import { ICommonFieldParams, IDynamicFormProps, IFormElement, TBaseFormElements } from './types';
+import { ICommonFieldParams, IDynamicFormProps, IFormElement } from './types';
 
 // Mock dependencies
 vi.mock('../../Renderer');
@@ -75,20 +75,19 @@ describe('DynamicFormV2', () => {
     elements: [],
     values: {},
     validationParams: {},
-    elementsMap: {},
     onChange: vi.fn(),
     onFieldChange: vi.fn(),
     onSubmit: vi.fn(),
     onEvent: vi.fn(),
-  } as unknown as IDynamicFormProps<object, TBaseFormElements>;
+  } as unknown as IDynamicFormProps;
 
   it('should render without crashing', () => {
     render(<DynamicFormV2 {...mockProps} />);
   });
 
   it('should pass elements to useValidationSchema', () => {
-    const elements = [{ id: 'test', element: 'text' }] as unknown as Array<
-      IFormElement<TBaseFormElements, ICommonFieldParams>
+    const elements = [{ id: 'test', element: 'textfield' }] as unknown as Array<
+      IFormElement<string, ICommonFieldParams>
     >;
     render(<DynamicFormV2 {...mockProps} elements={elements} />);
     expect(useValidationSchema).toHaveBeenCalledWith(elements);
@@ -127,6 +126,7 @@ describe('DynamicFormV2', () => {
       onSubmit: mockProps.onSubmit,
     });
   });
+
   it('should pass context to DynamicFormContext.Provider', () => {
     const touchedMock = {
       touched: { field1: true },
@@ -162,7 +162,7 @@ describe('DynamicFormV2', () => {
       values: valuesMock.values,
       submit: submitMock.submit,
       fieldHelpers: fieldHelpersMock,
-      elementsMap: mockProps.elementsMap,
+      elementsMap: mockProps.fieldExtends ? expect.any(Object) : expect.any(Object),
       callbacks: {
         onEvent: mockProps.onEvent,
       },

packages/ui/src/components/organisms/Form/DynamicForm/hooks/internal/useTouched/useTouched.ts

@@ -3,7 +3,7 @@ import { IFormElement } from '../../../types';
 import { generateTouchedMapForAllElements } from './helpers/generate-touched-map-for-all-elements/generate-touched-map-for-all-elements';
 import { ITouchedState } from './types';
 
-export const useTouched = (elements: IFormElement[], context: object) => {
+export const useTouched = (elements: Array<IFormElement<any, any>>, context: object) => {
   const [touched, setTouchedState] = useState<ITouchedState>({});
 
   const setFieldTouched = useCallback((fieldName: string, isTouched: boolean) => {

packages/ui/src/components/organisms/Form/DynamicForm/hooks/internal/useValidationSchema/useValidationSchema.ts

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { convertFormElementsToValidationSchema } from '../../../helpers/convert-form-emenents-to-validation-schema';
 import { IFormElement } from '../../../types';
 
-export const useValidationSchema = (elements: IFormElement[]) => {
+export const useValidationSchema = (elements: Array<IFormElement<any, any>>) => {
   const validationSchema = useMemo(() => {
     return convertFormElementsToValidationSchema(elements);
   }, [elements]);

packages/ui/src/components/organisms/Form/DynamicForm/repositories/fields-repository.ts

@@ -0,0 +1,44 @@
+import { AutocompleteField } from '../fields/AutocompleteField';
+import { CheckboxField } from '../fields/CheckboxField';
+import { CheckboxListField } from '../fields/CheckboxList';
+import { DateField } from '../fields/DateField';
+import { FieldList } from '../fields/FieldList';
+import { MultiselectField } from '../fields/MultiselectField';
+import { TextField } from '../fields/TextField';
+import { TDynamicFormField } from '../types';
+
+export const baseFields = {
+  autocompletefield: AutocompleteField,
+  checkboxfield: CheckboxField,
+  checkboxlistfield: CheckboxListField,
+  datefield: DateField,
+  multiselectfield: MultiselectField,
+  textfield: TextField,
+  fieldlist: FieldList,
+} as const;
+
+export type TBaseFields = keyof typeof baseFields & string;
+
+export let fieldsRepository = {
+  ...baseFields,
+};
+
+export const getField = <T extends keyof typeof fieldsRepository>(fieldType: T) => {
+  return fieldsRepository[fieldType];
+};
+
+export const extendFieldsRepository = <TNewFields extends string, TParams = unknown>(
+  fields: Record<TNewFields, TDynamicFormField<TNewFields | TBaseFields, TParams>>,
+) => {
+  const updatedRepository = { ...fieldsRepository, ...fields };
+  fieldsRepository = updatedRepository;
+
+  return updatedRepository;
+};
+
+export const getFieldsRepository = <
+  TElements extends string = TBaseFields,
+  TParams = unknown,
+>() => {
+  return fieldsRepository as Record<TElements, TDynamicFormField<TElements, TParams>>;
+};

packages/ui/src/components/organisms/Form/DynamicForm/repositories/index.ts

@@ -0,0 +1 @@
+export * from './fields-repository';

packages/ui/src/components/organisms/Form/DynamicForm/types/index.ts

@@ -3,14 +3,12 @@ import { IRule } from '../../hooks/useRuleEngine';
 import { IValidationError, IValidationParams, TValidators } from '../../Validator';
 import { IFormEventElement, TElementEvent } from '../hooks/internal/useEvents/types';
 
-export type TBaseFormElements = 'textinput' | 'fieldlist';
-
 export interface ICommonFieldParams {
   label?: string;
   placeholder?: string;
 }
 
-export interface IFormElement<TElements = TBaseFormElements, TParams = ICommonFieldParams> {
+export interface IFormElement<TElements = string, TParams = ICommonFieldParams> {
   id: string;
   valueDestination: string;
   element: TElements;
@@ -31,35 +29,33 @@ export interface IFormRef<TValues = object> {
 }
 
 export type TDynamicFormElement<
-  TElements extends string = TBaseFormElements,
+  TElements extends string = string,
   TParams = unknown,
 > = FunctionComponent<{
   element: IFormElement<TElements, TParams>;
 }>;
 
 export type TDynamicFormField<
-  TElements extends string = TBaseFormElements,
+  TElements extends string = string,
   TParams = ICommonFieldParams,
 > = FunctionComponent<{
   element: IFormElement<TElements, TParams>;
   children?: React.ReactNode | React.ReactNode[];
 }>;
 
-export type TElementsMap<TElements extends string = TBaseFormElements> = Record<
-  TElements,
-  TDynamicFormElement
->;
+export type TElementsMap = Record<string, TDynamicFormElement<any, any>>;
 
-export interface IDynamicFormProps<TValues = object, TElements extends string = TBaseFormElements> {
+export interface IDynamicFormProps<TValues = object> {
   values: TValues;
-  elements: Array<IFormElement<TElements>>;
-  elementsMap: TElementsMap<TElements>;
+  elements: Array<IFormElement<string, any>>;
+
+  fieldExtends?: Record<string, TDynamicFormField<string>>;
 
   validationParams?: IValidationParams;
   onChange?: (newValues: TValues) => void;
   onFieldChange?: (fieldName: string, newValue: unknown, newValues: TValues) => void;
   onSubmit?: (values: TValues) => void;
-  onEvent?: (eventName: TElementEvent, element: IFormEventElement<TElements>) => void;
+  onEvent?: (eventName: TElementEvent, element: IFormEventElement<string, any>) => void;
 
   ref?: React.RefObject<IFormRef<TValues>>;
 }