dynamic-modal 1.1.4 → 1.1.7

package/examples/render-if.ts

@@ -1,129 +1,129 @@
-  
-import { IModalConfigLoader } from '../src/interfaces/modal'
-
-export type IncomingProps = object
-
-type ResultProps = Record<'optionId', string> & Partial<Record<'input1ReadOnly' | 'input1WriteValue' | 'input2ReadOnly' | 'input2WriteValue', string>>
-
-export interface IRenderIfModal {
-  default: IModalConfigLoader<IncomingProps, ResultProps>
-}
-
-const renderIfModal: IRenderIfModal = {
-  default: (props, action) => {
-    return {
-      reservedData: {}, //Put here any data that you want store and receive into modal output
-      fields: [ //Put here any elements for render into modal
-        {
-          elementType: 'select',
-          label: 'option',
-          defaultValue: '0',
-          options: [
-            {
-              id: '0',
-              name:'Select...'
-            },
-            {
-              id: '1',
-              name:'Option 1'
-            },
-            {
-              id: '2',
-              name:'Option 2'
-            }
-          ],
-          name: 'optionId', //Element to be observed
-          validation: {
-            required: true,
-            message: 'Please select a valid option'
-          }
-        },
-        {
-          elementType: 'group', //Put here groups of element into same line and customize using styles
-          groups: [
-            {
-              elementType: 'input',
-              label: 'Input 1 (Read)',
-              name: 'input1ReadOnly',
-              disabled: true,
-              styles: {
-                width: '50%'
-              },
-              validation: {
-                required: false
-              },
-              //Define render condition (element will be show when value of element observed match with array condition)
-              renderIf: {
-                optionId: ['1']
-              }
-            },
-            {
-              elementType: 'input',
-              label: 'Input 1',
-              name: 'input1WriteValue',
-              styles: {
-                width: '50%'
-              },
-              validation: {
-                required: true,
-                message: `Write a valid input value`
-              },
-              //Define render condition (element will be show when value of element observed match with array condition)
-              renderIf: {
-                optionId: ['1']
-              }
-            },
-          ]
-        },
-        {
-          elementType: 'group', //Put here groups of element into same line and customize using styles
-          groups: [
-            {
-              elementType: 'input',
-              label: 'Input 2 (Read)',
-              name: 'input2ReadOnly',
-              disabled: true,
-              styles: {
-                width: '50%'
-              },
-              validation: {
-                required: false
-              },
-              //Define render condition (element will be show when value of element observed match with array condition)
-              renderIf: {
-                optionId: ['2']
-              }
-            },
-            {
-              elementType: 'input',
-              label: 'Input 2',
-              name: 'input2WriteValue',
-              styles: {
-                width: '50%'
-              },
-              validation: {
-                required: true,
-                message: `Write a valid input value`
-              },
-              //Define render condition (element will be show when value of element observed match with array condition)
-              renderIf: {
-                optionId: ['2']
-              }
-            },
-          ]
-        },
-      ],
-      style: { // Put here styles for modal like height or width
-        width: '500px'
-      },
-      title: `Title of enable if modal`, //Title of modal
-      out: action, //Function to receive data from modal
-      actions: { //Actions of modal, all props that you define here will be pass to ModalButtonCancel and ModalButtonAction components in your ComponentState
-        action: { text:'Action', color: 'Primary' },
-        cancel: { text: 'Cancel', color: 'Danger' }
-      }
-    }
-  }
-}
-
+  
+import { IModalConfigLoader } from '../src/interfaces/modal'
+
+export type IncomingProps = object
+
+type ResultProps = Record<'optionId', string> & Partial<Record<'input1ReadOnly' | 'input1WriteValue' | 'input2ReadOnly' | 'input2WriteValue', string>>
+
+export interface IRenderIfModal {
+  default: IModalConfigLoader<IncomingProps, ResultProps>
+}
+
+const renderIfModal: IRenderIfModal = {
+  default: (props, action) => {
+    return {
+      reservedData: {}, //Put here any data that you want store and receive into modal output
+      fields: [ //Put here any elements for render into modal
+        {
+          elementType: 'select',
+          label: 'option',
+          defaultValue: '0',
+          options: [
+            {
+              id: '0',
+              name:'Select...'
+            },
+            {
+              id: '1',
+              name:'Option 1'
+            },
+            {
+              id: '2',
+              name:'Option 2'
+            }
+          ],
+          name: 'optionId', //Element to be observed
+          validation: {
+            required: true,
+            message: 'Please select a valid option'
+          }
+        },
+        {
+          elementType: 'group', //Put here groups of element into same line and customize using styles
+          groups: [
+            {
+              elementType: 'input',
+              label: 'Input 1 (Read)',
+              name: 'input1ReadOnly',
+              disabled: true,
+              styles: {
+                width: '50%'
+              },
+              validation: {
+                required: false
+              },
+              //Define render condition (element will be show when value of element observed match with array condition)
+              renderIf: {
+                optionId: ['1']
+              }
+            },
+            {
+              elementType: 'input',
+              label: 'Input 1',
+              name: 'input1WriteValue',
+              styles: {
+                width: '50%'
+              },
+              validation: {
+                required: true,
+                message: `Write a valid input value`
+              },
+              //Define render condition (element will be show when value of element observed match with array condition)
+              renderIf: {
+                optionId: ['1']
+              }
+            },
+          ]
+        },
+        {
+          elementType: 'group', //Put here groups of element into same line and customize using styles
+          groups: [
+            {
+              elementType: 'input',
+              label: 'Input 2 (Read)',
+              name: 'input2ReadOnly',
+              disabled: true,
+              styles: {
+                width: '50%'
+              },
+              validation: {
+                required: false
+              },
+              //Define render condition (element will be show when value of element observed match with array condition)
+              renderIf: {
+                optionId: ['2']
+              }
+            },
+            {
+              elementType: 'input',
+              label: 'Input 2',
+              name: 'input2WriteValue',
+              styles: {
+                width: '50%'
+              },
+              validation: {
+                required: true,
+                message: `Write a valid input value`
+              },
+              //Define render condition (element will be show when value of element observed match with array condition)
+              renderIf: {
+                optionId: ['2']
+              }
+            },
+          ]
+        },
+      ],
+      style: { // Put here styles for modal like height or width
+        width: '500px'
+      },
+      title: `Title of enable if modal`, //Title of modal
+      out: action, //Function to receive data from modal
+      actions: { //Actions of modal, all props that you define here will be pass to ModalButtonCancel and ModalButtonAction components in your ComponentState
+        action: { text:'Action', color: 'Primary' },
+        cancel: { text: 'Cancel', color: 'Danger' }
+      }
+    }
+  }
+}
+
 export default renderIfModal

package/examples/simple.ts

@@ -1,75 +1,75 @@
-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
-              }
-            }
-          ]
-        },
-      ],
-      style: { // Put here styles for modal like height or width
-        width: '500px'
-      },
-      title: `Title of enable if modal`, //Title of modal
-      out: action, //Function to receive data from modal
-      actions: { //Actions of modal, all props that you define here will be pass to ModalButtonCancel and ModalButtonAction components in your ComponentState
-        action: { text:'Action', color: 'Primary' },
-        cancel: { text: 'Cancel', color: 'Danger' }
-      }
-    }
-  }
-}
-
+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
+              }
+            }
+          ]
+        },
+      ],
+      style: { // Put here styles for modal like height or width
+        width: '500px'
+      },
+      title: `Title of enable if modal`, //Title of modal
+      out: action, //Function to receive data from modal
+      actions: { //Actions of modal, all props that you define here will be pass to ModalButtonCancel and ModalButtonAction components in your ComponentState
+        action: { text:'Action', color: 'Primary' },
+        cancel: { text: 'Cancel', color: 'Danger' }
+      }
+    }
+  }
+}
+
 export default simpleModal

package/index.ts

@@ -1,5 +1,5 @@
-'use client'
-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'
-export { ComponentState, ComponentStateContext } from './src/context/component/component-state';
+'use client'
+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'
+export { ComponentState, ComponentStateContext } from './src/context/component/component-state'

package/package.json

@@ -1,47 +1,46 @@
-{
-  "name": "dynamic-modal",
-  "version": "1.1.4",
-  "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.22.0",
-    "@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"
-  },
-  "dependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-hook-form": "^7.54.2"
-  }
-}
+{
+  "name": "dynamic-modal",
+  "version": "1.1.7",
+  "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 .",
+    "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.22.0",
+    "@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"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.2"
+  }
+}

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

@@ -1,67 +1,67 @@
-'use client'
-
-import React, { ChangeEvent, FC } from 'react'
-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: ''})
-        })
-    } 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)
-      }
-    })
-  }
-
-  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>}
-      <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-${props.id}-help`}
-        id={`file-input-${props.id}`}
-        type="file"
-        onChange={onChangeHandler}
-        {...props}
-      />
-      <p
-        className="mt-1 text-sm text-gray-500 dark:text-gray-300 text-start"
-        id={`file-input-${props.id}-help`}>
-        {props.helpText?.toUpperCase()}
-      </p>
-    </div>
-  )
-}
-
-export default InputUpload
+'use client'
+
+import React, { ChangeEvent, FC } from 'react'
+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: ''})
+        })
+    } 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)
+      }
+    })
+  }
+
+  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>}
+      <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-${props.id}-help`}
+        id={`file-input-${props.id}`}
+        type="file"
+        onChange={onChangeHandler}
+        {...props}
+      />
+      <p
+        className="mt-1 text-sm text-gray-500 dark:text-gray-300 text-start"
+        id={`file-input-${props.id}-help`}>
+        {props.helpText?.toUpperCase()}
+      </p>
+    </div>
+  )
+}
+
+export default InputUpload