dynamic-modal 1.0.11 → 1.0.13

package/examples/simple.ts

@@ -1,77 +1,77 @@
-import { IModalConfigLoader } from '../src/interfaces/modal'
-
-type IncomingProps = {
-  reserved: string
-  input1: string
-  store?: boolean
-  clear?: boolean
-}
-
-type ResultProps = IncomingProps
-
-export interface ISimpleModal {
-  default: IModalConfigLoader<IncomingProps, ResultProps> //Define others modals if you want
-}
-
-const simpleModal: ISimpleModal = {
-  default: (props, action) => {
-    return {
-      reservedData: { reserved: props.reserved }, //Put here any data that you want store and receive into modal output
-      fields: [ //Put here any elements for render into modal
-        {
-          elementType: 'input',
-          label: 'Input 1',
-          defaultValue: props.input1,
-          name: 'input1',
-          validation: {
-            required: true,
-            message: 'This field is required',
-            regex: undefined //Use regex for custom validation
-          }
-        },
-        {
-          elementType: 'group', //Put here groups of element into same line and customize using styles
-          groups: [
-            {
-              elementType: 'toggle',
-              label: 'Store',
-              defaultValue: `${props.store ?? false}`,
-              name: 'store',
-              styles: {
-                width: '50%'
-              },
-              validation: {
-                required: false
-              }
-            },
-            {
-              elementType: 'toggle',
-              label: 'Clear',
-              defaultValue: `${props.clear ?? false}`,
-              name: 'clear',
-              styles: {
-                width: '50%'
-              },
-              validation: {
-                required: false
-              }
-            }
-          ]
-        },
-      ],
-      styles: { // Put here styles for modal like height or width
-        width: '500px'
-      },
-      title: `Title of simple modal`, //Title of modal
-      action: {
-        name: 'Save', //Name of action button 
-        action //Function to receive data from modal
-      },
-      cancel: {
-        name: 'Cancel', //Name of cancel button
-      }
-    }
-  }
-}
-
+import { IModalConfigLoader } from '../src/interfaces/modal'
+
+type IncomingProps = {
+  reserved: string
+  input1: string
+  store?: boolean
+  clear?: boolean
+}
+
+type ResultProps = IncomingProps
+
+export interface ISimpleModal {
+  default: IModalConfigLoader<IncomingProps, ResultProps> //Define others modals if you want
+}
+
+const simpleModal: ISimpleModal = {
+  default: (props, action) => {
+    return {
+      reservedData: { reserved: props.reserved }, //Put here any data that you want store and receive into modal output
+      fields: [ //Put here any elements for render into modal
+        {
+          elementType: 'input',
+          label: 'Input 1',
+          defaultValue: props.input1,
+          name: 'input1',
+          validation: {
+            required: true,
+            message: 'This field is required',
+            regex: undefined //Use regex for custom validation
+          }
+        },
+        {
+          elementType: 'group', //Put here groups of element into same line and customize using styles
+          groups: [
+            {
+              elementType: 'toggle',
+              label: 'Store',
+              defaultValue: `${props.store ?? false}`,
+              name: 'store',
+              styles: {
+                width: '50%'
+              },
+              validation: {
+                required: false
+              }
+            },
+            {
+              elementType: 'toggle',
+              label: 'Clear',
+              defaultValue: `${props.clear ?? false}`,
+              name: 'clear',
+              styles: {
+                width: '50%'
+              },
+              validation: {
+                required: false
+              }
+            }
+          ]
+        },
+      ],
+      styles: { // Put here styles for modal like height or width
+        width: '500px'
+      },
+      title: `Title of simple modal`, //Title of modal
+      action: {
+        name: 'Save', //Name of action button 
+        action //Function to receive data from modal
+      },
+      cancel: {
+        name: 'Cancel', //Name of cancel button
+      }
+    }
+  }
+}
+
 export default simpleModal

package/index.ts

@@ -1,3 +1,3 @@
-export { default as DynamicModal } from './src/modal';
-export type { IModalConfigLoader, IModalConfigProps, IModalRenderCondition, IModalField, IModalLiveDataCondition } from './src/interfaces/modal'
+export { default as DynamicModal } from './src/modal';
+export type { IModalConfigLoader, IModalConfigProps, IModalRenderCondition, IModalField, IModalLiveDataCondition } from './src/interfaces/modal'
 export { useModalHandler } from './src/hooks/modal-handler'

package/package.json

@@ -1,48 +1,48 @@
-{
-  "name": "dynamic-modal",
-  "version": "1.0.11",
-  "description": "The dynamic-modal is a solution of creation differents modals into project using a json configuration file",
-  "main": "index.js",
-  "scripts": {
-    "build": "tsc",
-    "lint": "eslint .",
-    "publish": "npm publish --access public",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://gitlab.com/f.salazar/dynamic-modal.git"
-  },
-  "keywords": [
-    "modal",
-    "react",
-    "next",
-    "dynamic",
-    "json"
-  ],
-  "author": "Francisco J. Salazar G",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://gitlab.com/f.salazar/dynamic-modal/issues"
-  },
-  "homepage": "https://gitlab.com/f.salazar/dynamic-modal#readme",
-  "devDependencies": {
-    "@eslint/js": "^9.13.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@typescript-eslint/eslint-plugin": "^8.11.0",
-    "@typescript-eslint/parser": "^8.11.0",
-    "eslint": "^9.13.0",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "globals": "^15.11.0",
-    "typescript": "^5.0.0",
-    "typescript-eslint": "^8.11.0"
-  },
-  "dependencies": {
-    "@nextui-org/react": "^2.2.9",
-    "react": "^18.0.0",
-    "react-dom": " ^18.0.0",
-    "react-hook-form": "^7.0.0"
-  }
-}
+{
+  "name": "dynamic-modal",
+  "version": "1.0.13",
+  "description": "The dynamic-modal is a solution of creation different modals into project using a json configuration file",
+  "main": "index.js",
+  "scripts": {
+    "build": "tsc",
+    "lint": "eslint .",
+    "publish": "npm publish --access public",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/f.salazar/dynamic-modal.git"
+  },
+  "keywords": [
+    "modal",
+    "react",
+    "next",
+    "dynamic",
+    "json"
+  ],
+  "author": "Francisco J. Salazar G",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://gitlab.com/f.salazar/dynamic-modal/issues"
+  },
+  "homepage": "https://gitlab.com/f.salazar/dynamic-modal#readme",
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.11.0",
+    "@typescript-eslint/parser": "^8.11.0",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "globals": "^15.11.0",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.11.0"
+  },
+  "dependencies": {
+    "@nextui-org/react": "^2.2.9",
+    "react": "^18.0.0",
+    "react-dom": " ^18.0.0",
+    "react-hook-form": "^7.0.0"
+  }
+}

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

@@ -1,72 +1,72 @@
-import React, { ChangeEvent, FC, useMemo } from 'react'
-import { IFileResult, IInputUpload } from '../../interfaces/input-upload'
-import { generateId } from '../../tools/general'
-
-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: ''})
-        })
-    } else {
-      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)
-
-      fileReader.onload = () => {
-        const fileResult: IFileResult = {
-          name: blob.name,
-          size: blob.size,
-          data: fileReader.result as string
-        }
-
-        resolve(fileResult)
-      }
-      fileReader.onerror = (error) => {
-        reject(error)
-      }
-    })
-  }
-
-  const elementId = useMemo<string>(
-    () => {
-      return props.id ?? generateId()
-    }, [props.id]
-  )
-
-  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-${elementId}`}>{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
-        file:border-0 file:text-sm file:font-semibold
-        file:bg-gray-100 file:text-blue-600
-        hover:file:bg-blue-700 hover:file:text-white cursor-pointer disabled:cursor-not-allowed"
-        aria-describedby={`file-input-${elementId}-help`}
-        id={`file-input-${elementId}`}
-        type="file"
-        onChange={onChangeHandler}
-        {...props}
-      />
-      <p
-        className="mt-1 text-sm text-gray-500 dark:text-gray-300 text-start"
-        id={`file-input-${elementId}-help`}>
-        {props.helpText?.toUpperCase()}
-      </p>
-    </div>
-  )
-}
-
-export default InputUpload
+import React, { ChangeEvent, FC, useMemo } from 'react'
+import { IFileResult, IInputUpload } from '../../interfaces/input-upload'
+import { generateId } from '../../tools/general'
+
+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: ''})
+        })
+    } else {
+      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)
+
+      fileReader.onload = () => {
+        const fileResult: IFileResult = {
+          name: blob.name,
+          size: blob.size,
+          data: fileReader.result as string
+        }
+
+        resolve(fileResult)
+      }
+      fileReader.onerror = (error) => {
+        reject(error)
+      }
+    })
+  }
+
+  const elementId = useMemo<string>(
+    () => {
+      return props.id ?? generateId()
+    }, [props.id]
+  )
+
+  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-${elementId}`}>{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
+        file:border-0 file:text-sm file:font-semibold
+        file:bg-gray-100 file:text-blue-600
+        hover:file:bg-blue-700 hover:file:text-white cursor-pointer disabled:cursor-not-allowed"
+        aria-describedby={`file-input-${elementId}-help`}
+        id={`file-input-${elementId}`}
+        type="file"
+        onChange={onChangeHandler}
+        {...props}
+      />
+      <p
+        className="mt-1 text-sm text-gray-500 dark:text-gray-300 text-start"
+        id={`file-input-${elementId}-help`}>
+        {props.helpText?.toUpperCase()}
+      </p>
+    </div>
+  )
+}
+
+export default InputUpload

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

@@ -1,53 +1,54 @@
-import React, { FC, useEffect } from 'react'
-import { Controller } from 'react-hook-form'
-import { useFieldRender } from '../../hooks/field-render'
-import { generateId } from '../../tools/general'
-import { Autocomplete, AutocompleteItem } from '@nextui-org/react'
-import { IMakeAutoCompleteProps } from '../../interfaces/make-autocomplete'
-
-const MakeAutocomplete: FC<IMakeAutoCompleteProps> = ({ element, ...props }) => {
-  const { render, enable, checkField, liveData, liveSearching } = useFieldRender({ element, ...props })
-
-  useEffect(() => {
-    const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }))
-    return () => subscription.unsubscribe()
-  }, [checkField, props, props.watch])
-
-  return (
-    render
-      ? <Controller
-        control={props.control}
-        name={element.name}
-        rules={{
-          required: element.validation.required,
-          pattern: {
-            value: element.validation.regex as RegExp ?? /(.*)/,
-            message: element.validation.message ?? ''
-          }
-        }}
-        render={({ field: { onChange, value }, fieldState: { invalid } }) => (
-          <Autocomplete
-            size='sm'
-            {...element}
-            isDisabled={element.disabled ?? !enable}
-            id={element.id ?? generateId()}
-            onSelectionChange={onChange}
-            label={liveSearching ? 'Loading...' : element.label}
-            selectedKey={value}
-            color={invalid ? 'danger' : undefined}
-            isInvalid={invalid}
-            errorMessage={invalid ? (element.validation.message ?? '') : undefined}
-          >
-            {
-              (liveData || (element.options ?? [])).map((opt) => (
-                <AutocompleteItem key={opt.id} value={opt.id}>{opt.name}</AutocompleteItem>
-              ))
-            }
-          </Autocomplete>
-        )}
-      />
-      : <></>
-  )
-}
-
-export default MakeAutocomplete
+import React, { FC, useEffect } from 'react'
+import { Controller } from 'react-hook-form'
+import { useFieldRender } from '../../hooks/field-render'
+import { generateId } from '../../tools/general'
+import { Autocomplete, AutocompleteItem } from '@nextui-org/react'
+import { IMakeAutoCompleteProps } from '../../interfaces/make-autocomplete'
+
+const MakeAutocomplete: FC<IMakeAutoCompleteProps> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
+  const { render, enable, checkField, liveData, liveSearching } = useFieldRender({ ...props, element })
+
+  useEffect(() => {
+    const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }))
+    return () => subscription.unsubscribe()
+  }, [checkField, props, props.watch])
+
+  return (
+    render
+      ? <Controller
+        control={props.control}
+        name={element.name}
+        rules={{
+          required,
+          pattern: {
+            value: validation.regex as RegExp ?? /(.*)/,
+            message: validation.message ?? ''
+          },
+            ...validation
+        }}
+        render={({ field: { onChange, value }, fieldState: { invalid } }) => (
+          <Autocomplete
+            size='sm'
+            {...element}
+            id={element.id ?? generateId()}
+            onSelectionChange={onChange}
+            label={liveSearching ? 'Loading...' : element.label}
+            selectedKey={value}
+            color={invalid ? 'danger' : undefined}
+            isInvalid={invalid}
+            errorMessage={invalid ? (validation.message ?? '') : undefined}
+            isDisabled={element.disabled ?? !enable}
+          >
+            {
+              (liveData || (element.options ?? [])).map((opt) => (
+                <AutocompleteItem key={opt.id} value={opt.id}>{opt.name}</AutocompleteItem>
+              ))
+            }
+          </Autocomplete>
+        )}
+      />
+      : <></>
+  )
+}
+
+export default MakeAutocomplete

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

@@ -1,17 +1,17 @@
-import React, { FC } from 'react'
-import { IMakeButtonProps } from '../../interfaces/make-button'
-
-const MakeButton: FC<IMakeButtonProps> = ({
-  element: { text, ...element }
-}) => {
-  return (
-    <button
-      className='transition-all delay-100 hover:translate-y-1 bg-blue-500 text-white hover:bg-blue-700 rounded w-11/12 h-[40px] p-2'
-      {...element}
-    >
-      {text}
-    </button>
-  )
-}
-
-export default MakeButton
+import React, { FC } from 'react'
+import { IMakeButtonProps } from '../../interfaces/make-button'
+
+const MakeButton: FC<IMakeButtonProps> = ({
+  element: { text, ...element }
+}) => {
+  return (
+    <button
+      className='transition-all delay-100 hover:translate-y-1 bg-blue-500 text-white hover:bg-blue-700 rounded w-11/12 h-[40px] p-2'
+      {...element}
+    >
+      {text}
+    </button>
+  )
+}
+
+export default MakeButton

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

@@ -1,46 +1,47 @@
-import React, { FC, useEffect } from 'react'
-import { Controller } from 'react-hook-form'
-import { useFieldRender } from '../../hooks/field-render'
-import { IMakeInputProps } from '../../interfaces/make-field'
-import { Input } from '@nextui-org/react'
-import { generateId } from '../../tools/general'
-
-const MakeInput: FC<IMakeInputProps> = ({ element, ...props }) => {
-  const { render, enable, checkField } = useFieldRender({ element, ...props })
-
-  useEffect(() => {
-    const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }))
-    return () => subscription.unsubscribe()
-  }, [checkField, props])
-
-  return (
-    render
-      ? <Controller
-        control={props.control}
-        name={element.name}
-        rules={{
-          required: element.validation.required,
-          pattern: {
-            value: element.validation.regex as RegExp ?? /(.*)/,
-            message: element.validation.message ?? ''
-          }
-        }}
-        render={({ field: { onChange, value }, fieldState: { invalid } }) => (
-          <Input
-            size='sm'
-            {...element}
-            id={element.id ?? generateId()}
-            onChange={onChange}
-            value={value ?? ''}
-            color={invalid ? 'danger' : undefined}
-            isInvalid={invalid}
-            errorMessage={invalid ? (element.validation.message ?? '') : undefined}
-            disabled={element.disabled ?? !enable}
-          />
-        )}
-      />
-      : null
-  )
-}
-
-export default MakeInput
+import React, { FC, useEffect } from 'react'
+import { Controller } from 'react-hook-form'
+import { useFieldRender } from '../../hooks/field-render'
+import { IMakeInputProps } from '../../interfaces/make-field'
+import { Input } from '@nextui-org/react'
+import { generateId } from '../../tools/general'
+
+const MakeInput: FC<IMakeInputProps> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
+  const { render, enable, checkField } = useFieldRender({ ...props, element })
+
+  useEffect(() => {
+    const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }))
+    return () => subscription.unsubscribe()
+  }, [checkField, props])
+
+  return (
+    render
+      ? <Controller
+        control={props.control}
+        name={element.name}
+        rules={{
+          required,
+          pattern: {
+            value: validation.regex as RegExp ?? /(.*)/,
+            message: validation.message ?? ''
+          },
+            ...validation
+        }}
+        render={({ field: { onChange, value }, fieldState: { invalid } }) => (
+          <Input
+            size='sm'
+            {...element}
+            id={element.id ?? generateId()}
+            onChange={onChange}
+            value={value ?? ''}
+            color={invalid ? 'danger' : undefined}
+            isInvalid={invalid}
+            errorMessage={invalid ? (validation.message ?? '') : undefined}
+            isDisabled={element.disabled ?? !enable}
+          />
+        )}
+      />
+      : null
+  )
+}
+
+export default MakeInput