dynamic-modal 1.1.8 → 1.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dynamic-modal",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "description": "The dynamic-modal is a solution of creation different modals into project using a json configuration file",
   "main": "index.js",
   "scripts": {
@@ -26,17 +26,19 @@
   },
   "homepage": "https://gitlab.com/f.salazar/dynamic-modal#readme",
   "devDependencies": {
-    "@eslint/js": "^9.22.0",
+    "@eslint/js": "^9.29.0",
+    "@typescript-eslint/eslint-plugin": "^8.34.1",
+    "@typescript-eslint/parser": "^8.34.1",
+    "eslint": "^9.29.0",
+    "eslint-config-next": "15.2.2",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-prettier": "^5.5.0",
+    "typescript-eslint": "^8.34.1",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "@typescript-eslint/eslint-plugin": "^8.26.1",
-    "@typescript-eslint/parser": "^8.26.1",
-    "eslint": "^9.22.0",
-    "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-hooks": "^5.2.0",
     "globals": "^16.0.0",
-    "typescript": "^5.8.2",
-    "typescript-eslint": "^8.26.1"
+    "prettier": "^3.5.3",
+    "typescript": "^5.8.3"
   },
   "dependencies": {
     "react": "^19.0.0",

package/src/components/input-upload/input-upload.tsx

@@ -1,48 +1,59 @@
-'use client'
+'use client';
 
-import React, { ChangeEvent, FC } from 'react'
-import { IFileResult, IInputUpload } from '../../interfaces/input-upload'
+import React, { ChangeEvent, FC } from 'react';
 
-const InputUpload: FC<IInputUpload> = ({ onChange, readAsArrayBuffer, ...props }: IInputUpload) => {
-  
+import { IFileResult, IInputUpload } from '../../interfaces/input-upload';
+
+const InputUpload: FC<IInputUpload> = ({
+  onChange,
+  readAsArrayBuffer,
+  ...props
+}: IInputUpload) => {
   const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
     if (props.read && event.target.files) {
       readFileBlob(event.target.files[0], false)
         .then((result) => onChange(result))
         .catch((err) => {
-          console.error('file read error', err)
-          onChange({name:'', size: 0, data: ''})
-        })
+          console.error('file read error', err);
+          onChange({ name: '', size: 0, data: '' });
+        });
     } else {
-      onChange(event.target.files)
+      onChange(event.target.files);
     }
-  }
+  };
 
   const readFileBlob = (blob: File, image: boolean): Promise<IFileResult> => {
     return new Promise((resolve, reject) => {
-      const fileReader = new FileReader()
-      if(image) fileReader.readAsDataURL(blob) 
-      else if (readAsArrayBuffer) fileReader.readAsArrayBuffer(blob)
-      else fileReader.readAsText(blob)
+      const fileReader = new FileReader();
+      if (image) fileReader.readAsDataURL(blob);
+      else if (readAsArrayBuffer) fileReader.readAsArrayBuffer(blob);
+      else fileReader.readAsText(blob);
 
       fileReader.onload = () => {
         const fileResult: IFileResult = {
           name: blob.name,
           size: blob.size,
-          data: fileReader.result as string
-        }
+          data: fileReader.result as string,
+        };
 
-        resolve(fileResult)
-      }
+        resolve(fileResult);
+      };
       fileReader.onerror = (error) => {
-        reject(error)
-      }
-    })
-  }
+        reject(error);
+      };
+    });
+  };
 
   return (
-    <div className='flex flex-col w-full gap-1 text-center'>
-      {props.label && <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white" htmlFor={`file-input-${props.id}`}>{props.label}</label>}
+    <div className="flex flex-col w-full gap-1 text-center">
+      {props.label && (
+        <label
+          className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+          htmlFor={`file-input-${props.id}`}
+        >
+          {props.label}
+        </label>
+      )}
       <input
         className="file:transition-all file:delay-150 block w-full text-sm text-slate-500
         file:mr-4 file:py-2 file:px-4 file:rounded-md
@@ -57,11 +68,12 @@ const InputUpload: FC<IInputUpload> = ({ onChange, readAsArrayBuffer, ...props }
       />
       <p
         className="mt-1 text-sm text-gray-500 dark:text-gray-300 text-start"
-        id={`file-input-${props.id}-help`}>
+        id={`file-input-${props.id}-help`}
+      >
         {props.helpText?.toUpperCase()}
       </p>
     </div>
-  )
-}
+  );
+};
 
-export default InputUpload
+export default InputUpload;

package/src/components/make-button/make-button.tsx

@@ -1,18 +1,16 @@
-'use client'
+'use client';
 
-import React, { FC, useContext, useMemo } from 'react'
-import { IMakeButtonProps } from '../../interfaces/make-button'
-import { ComponentStateContext } from '../../context/component/component-state'
-import { generateId } from '../../tools/general'
+import React, { FC, useContext, useId } from 'react';
+
+import { IMakeButtonProps } from '../../interfaces/make-button';
+import { ComponentStateContext } from '../../context/component/component-state';
 
 const MakeButton: FC<IMakeButtonProps> = ({ element }) => {
-  const { Button } = useContext(ComponentStateContext)
+  const { Button } = useContext(ComponentStateContext);
+
+  const elementId = useId();
 
-  const elementId = useMemo(() => element.id ?? generateId(), [])
-  
-  return (
-    <Button {...element} id={elementId} />
-  )
-}
+  return <Button {...element} id={elementId} />;
+};
 
-export default MakeButton
+export default MakeButton;

package/src/components/make-description/make-description.tsx

@@ -1,15 +1,21 @@
-'use client'
+'use client';
 
-import React, { FC } from 'react'
-import { IMakeDescriptionProps } from '../../interfaces/make-description'
+import React, { FC } from 'react';
 
-const MakeDescription: FC<IMakeDescriptionProps> = ({ element: { text, Icon, containerStyle, textStyle } }) => {
+import { IMakeDescriptionProps } from '../../interfaces/make-description';
+
+const MakeDescription: FC<IMakeDescriptionProps> = ({
+  element: { text, Icon, containerStyle, textStyle },
+}) => {
   return (
-    <div className='flex gap-4 w-full h-auto text-xs text-center p-2 border-1 rounded-md' style={containerStyle}>
+    <div
+      className="flex gap-4 w-full h-auto text-xs text-center p-2 border-1 rounded-md"
+      style={containerStyle}
+    >
       {Icon && <Icon />}
       <p style={textStyle}>{text}</p>
     </div>
-  )
-}
+  );
+};
 
-export default MakeDescription
+export default MakeDescription;

package/src/components/make-input/make-input.tsx

@@ -1,53 +1,100 @@
-'use client'
+'use client';
 
-import React, { FC, useContext, useEffect, useMemo } from 'react'
-import { Controller } from 'react-hook-form'
-import { useFieldRender } from '../../hooks/field-render'
-import { IMakeInputProps } from '../../interfaces/make-input'
-import { ComponentStateContext } from '../../context/component/component-state'
-import { generateId } from '../../tools/general'
+import React, { FC, useContext, useEffect, useId } from 'react';
+import { Controller } from 'react-hook-form';
 
-const MakeInput: FC<IMakeInputProps> = ({ element: { validation: { required, ...validation }, enableIf, renderIf, ...element }, ...props }) => {
-  const { Input } = useContext(ComponentStateContext)
-  const { render, enable, checkField } = useFieldRender({ ...props, element: { enableIf, renderIf, ...element} })
+import { IMakeInputProps } from '../../interfaces/make-input';
+import { ComponentStateContext } from '../../context/component/component-state';
+import useEnableIf from '../../hooks/use-enable-if';
+import useRenderIf from '../../hooks/use-render-if';
+
+const MakeInput: FC<IMakeInputProps> = ({
+  element,
+  control,
+  watch,
+  unregister,
+}) => {
+  const { Input } = useContext(ComponentStateContext);
+
+  const {
+    name: elementName,
+    validation: { required, message, regex, ...otherValidation },
+    enableIf,
+    renderIf,
+    ...inputProps
+  } = element;
+
+  const { checkEnable, enable, setEnable } = useEnableIf({
+    elementEnableIf: enableIf,
+  });
+  const { checkRender, render, setRender } = useRenderIf({
+    elementRenderIf: renderIf,
+  });
+
+  const elementId = useId();
 
-  const elementId = useMemo(() => element.id ?? generateId(), [])
-  
   useEffect(() => {
-    const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }))
-    return () => subscription.unsubscribe()
-  }, [checkField, props])
+    const { unsubscribe } = watch((formData, { name, type }) => {
+      if (!name) return;
+
+      if (enableIf) {
+        checkEnable(formData, { name, type }).then((enableStatus) => {
+          if (enableStatus === undefined || enableStatus === null) return;
+          if (enable !== enableStatus) setEnable(enableStatus);
+        });
+      }
+
+      if (renderIf) {
+        checkRender(formData, { name, type }).then((renderStatus) => {
+          if (renderStatus === undefined || renderStatus === null) return;
+
+          if (render !== renderStatus) {
+            if (render && !renderStatus) unregister(elementName as string);
+            setRender(!!renderStatus);
+          }
+        });
+      }
+    });
+
+    return () => unsubscribe();
+  }, [watch, render, enable]);
+
+  if (!render) return null;
 
   return (
-    render
-      ? <Controller
-        control={props.control}
-        name={element.name}
-        rules={{
-          required: {
-            value: required,
-            message: validation.message ?? ''
-          },
-          pattern: validation.regex ?  {
-            value: validation.regex,
-            message: validation.message ?? ''
-          } : undefined,
-          ...validation
-        }}
-        render={({ field: { onChange, value }, fieldState: { invalid, error } }) => (
-          <Input 
-            {...element} 
-            id={elementId}
-            onChange={onChange} 
-            value={value ?? ''} 
-            invalid={invalid}
-            error={error} 
-            disabled={element.disabled ?? !enable} 
-            />
-        )}
-      />
-      : null
-  )
-}
-
-export default MakeInput
+    <Controller
+      control={control}
+      name={elementName}
+      rules={{
+        required: {
+          value: required,
+          message: message ?? '',
+        },
+        pattern: regex
+          ? {
+              value: regex,
+              message: message ?? '',
+            }
+          : undefined,
+        ...otherValidation,
+      }}
+      render={({
+        field: { onChange, value },
+        fieldState: { invalid, error },
+      }) => (
+        <Input
+          {...inputProps}
+          name={elementName}
+          id={elementId}
+          onChange={onChange}
+          value={value ?? ''}
+          invalid={invalid}
+          error={error}
+          disabled={element.disabled ?? !enable}
+        />
+      )}
+    />
+  );
+};
+
+export default MakeInput;

package/src/components/make-select/make-select.tsx

@@ -1,55 +1,125 @@
-'use client'
+'use client';
 
-import React, { FC, useContext, useEffect, useMemo } from 'react'
-import { Controller } from 'react-hook-form'
-import { useFieldRender } from '../../hooks/field-render'
-import { generateId } from '../../tools/general'
-import { IMakeSelectProps } from '../../interfaces/make-select'
-import { ComponentStateContext } from '../../context/component/component-state'
+import React, { FC, useContext, useEffect, useId, useState } from 'react';
+import { Controller } from 'react-hook-form';
 
-const MakeSelect: FC<IMakeSelectProps> = ({ element: { validation: { required, ...validation }, enableIf, renderIf, ...element }, ...props }) => {
-  const { Select } = useContext(ComponentStateContext)
-  const { render, enable, checkField, liveData, liveSearching } = useFieldRender({ ...props, element: { renderIf, enableIf, ...element} })
+import { IMakeSelectProps } from '../../interfaces/make-select';
+import { ComponentStateContext } from '../../context/component/component-state';
+import useEnableIf from '../../hooks/use-enable-if';
+import useRenderIf from '../../hooks/use-render-if';
+import useLiveData from '../../hooks/use-live-data';
 
-  const elementId = useMemo(() => element.id ?? generateId(), [])
+const MakeSelect: FC<IMakeSelectProps> = ({
+  element,
+  control,
+  watch,
+  setValue,
+  unregister,
+}) => {
+  const { Select } = useContext(ComponentStateContext);
+
+  const {
+    name: elementName,
+    validation: { required, message, regex, ...otherValidation },
+    enableIf,
+    renderIf,
+    liveData: elementLiveData,
+    ...inputProps
+  } = element;
+
+  const [liveSearching, setLiveSearching] = useState<boolean>(false);
+
+  const { checkLiveData, liveData, setLiveData } = useLiveData({
+    elementLiveData,
+  });
+  const { checkEnable, enable, setEnable } = useEnableIf({
+    elementEnableIf: enableIf,
+  });
+  const { checkRender, render, setRender } = useRenderIf({
+    elementRenderIf: renderIf,
+  });
+
+  const elementId = useId();
 
   useEffect(() => {
-    const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }))
-    return () => subscription.unsubscribe()
-  }, [checkField, props, props.watch])
+    const { unsubscribe } = watch((formData, { name, type }) => {
+      if (!name) return;
+
+      if (enableIf) {
+        checkEnable(formData, { name, type }).then((enableStatus) => {
+          if (enableStatus === undefined || enableStatus === null) return;
+          if (enable !== enableStatus) setEnable(enableStatus);
+        });
+      }
+
+      if (renderIf) {
+        checkRender(formData, { name, type }).then((renderStatus) => {
+          if (renderStatus === undefined || renderStatus === null) return;
+
+          if (render !== renderStatus) {
+            if (render && !renderStatus) unregister(elementName as string);
+            setRender(!!renderStatus);
+          }
+        });
+      }
+
+      if (elementLiveData) {
+        setLiveSearching(true);
+
+        checkLiveData(formData, { name, type })
+          .then((options) => {
+            if (options === undefined || options === null) return;
+
+            setLiveData(options);
+            setValue(elementName, options);
+          })
+          .finally(() => {
+            setLiveSearching(false);
+          });
+      }
+    });
+
+    return () => unsubscribe();
+  }, [watch, render, enable, liveData]);
+
+  if (!render) return null;
 
   return (
-    render
-      ? <Controller
-        control={props.control}
-        name={element.name}
-        rules={{
-          required: {
-            value: required,
-            message: validation.message ?? ''
-          },
-          pattern: validation.regex ?  {
-            value: validation.regex,
-            message: validation.message ?? ''
-          } : undefined,
-          ...validation
-        }}
-        render={({ field: { onChange, value }, fieldState: { invalid, error } }) => (
-          <Select
-            {...element}
-            id={elementId}
-            onChange={onChange}
-            value={value}
-            invalid={invalid}
-            error={error}
-            disabled={element.disabled ?? !enable} 
-            liveSearching={liveSearching}
-            options={liveData || (element.options ?? [])}
-          />
-        )}
-      />
-      : <></>
-  )
-}
-
-export default MakeSelect
+    <Controller
+      control={control}
+      name={elementName}
+      rules={{
+        required: {
+          value: required,
+          message: message ?? '',
+        },
+        pattern: regex
+          ? {
+              value: regex,
+              message: message ?? '',
+            }
+          : undefined,
+        ...otherValidation,
+      }}
+      render={({
+        field: { onChange, value },
+        fieldState: { invalid, error },
+      }) => (
+        <Select
+          {...inputProps}
+          id={elementId}
+          name={elementName}
+          onChange={onChange}
+          value={value}
+          invalid={invalid}
+          error={error}
+          disabled={element.disabled ?? !enable}
+          liveSearching={liveSearching}
+          options={liveData || (element.options ?? [])}
+        />
+      )}
+    />
+  );
+};
+
+export default MakeSelect;

package/src/components/make-textarea/make-textarea.tsx

@@ -1,53 +1,100 @@
-'use client'
+'use client';
 
-import React, { FC, useContext, useEffect, useMemo } from 'react'
-import { Controller } from 'react-hook-form'
-import { useFieldRender } from '../../hooks/field-render'
-import { generateId } from '../../tools/general'
-import { IMakeTextareaProps } from '../../interfaces/make-textarea'
-import { ComponentStateContext } from '../../context/component/component-state'
+import React, { FC, useContext, useEffect, useId } from 'react';
+import { Controller } from 'react-hook-form';
 
-const MakeTextarea: FC<IMakeTextareaProps> = ({ element: { validation: { required, ...validation }, enableIf, renderIf, ...element }, ...props }) => {
-  const { Textarea } = useContext(ComponentStateContext)
-  const { render, enable, checkField } = useFieldRender({ ...props, element: { enableIf, renderIf, ...element } })
+import { IMakeTextareaProps } from '../../interfaces/make-textarea';
+import { ComponentStateContext } from '../../context/component/component-state';
+import useEnableIf from '../../hooks/use-enable-if';
+import useRenderIf from '../../hooks/use-render-if';
+
+const MakeTextarea: FC<IMakeTextareaProps> = ({
+  element,
+  control,
+  watch,
+  unregister,
+}) => {
+  const { Textarea } = useContext(ComponentStateContext);
+
+  const {
+    name: elementName,
+    validation: { required, message, regex, ...otherValidation },
+    enableIf,
+    renderIf,
+    ...inputProps
+  } = element;
+
+  const { checkEnable, enable, setEnable } = useEnableIf({
+    elementEnableIf: enableIf,
+  });
+  const { checkRender, render, setRender } = useRenderIf({
+    elementRenderIf: renderIf,
+  });
+
+  const elementId = useId();
 
-  const elementId = useMemo(() => element.id ?? generateId(), [])
-  
   useEffect(() => {
-    const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }))
-    return () => subscription.unsubscribe()
-  }, [checkField, props, props.watch])
+    const { unsubscribe } = watch((formData, { name, type }) => {
+      if (!name) return;
+
+      if (enableIf) {
+        checkEnable(formData, { name, type }).then((enableStatus) => {
+          if (enableStatus === undefined || enableStatus === null) return;
+          if (enable !== enableStatus) setEnable(enableStatus);
+        });
+      }
+
+      if (renderIf) {
+        checkRender(formData, { name, type }).then((renderStatus) => {
+          if (renderStatus === undefined || renderStatus === null) return;
+
+          if (render !== renderStatus) {
+            if (render && !renderStatus) unregister(elementName as string);
+            setRender(!!renderStatus);
+          }
+        });
+      }
+    });
+
+    return () => unsubscribe();
+  }, [watch, render, enable]);
+
+  if (!render) return null;
 
   return (
-    render
-      ? <Controller
-        name={element.name}
-        control={props.control}
-        rules={{
-          required: {
-            value: required,
-            message: validation.message ?? ''
-          },
-          pattern: validation.regex ?  {
-            value: validation.regex,
-            message: validation.message ?? ''
-          } : undefined,
-          ...validation
-        }}
-        render={({ field: { onChange, value }, fieldState: { invalid, error } }) => (
-          <Textarea
-            {...element}
-            id={elementId}
-            onChange={onChange}
-            value={value ?? ''}
-            invalid={invalid}
-            error={error}
-            disabled={element.disabled ?? !enable}
-          />
-        )}
-      />
-      : null
-  )
-}
-
-export default MakeTextarea
+    <Controller
+      name={elementName}
+      control={control}
+      rules={{
+        required: {
+          value: required,
+          message: message ?? '',
+        },
+        pattern: regex
+          ? {
+              value: regex,
+              message: message ?? '',
+            }
+          : undefined,
+        ...otherValidation,
+      }}
+      render={({
+        field: { onChange, value },
+        fieldState: { invalid, error },
+      }) => (
+        <Textarea
+          {...inputProps}
+          id={elementId}
+          name={elementName}
+          onChange={onChange}
+          value={value ?? ''}
+          invalid={invalid}
+          error={error}
+          disabled={element.disabled ?? !enable}
+        />
+      )}
+    />
+  );
+};
+
+export default MakeTextarea;