dynamic-modal 1.1.1 → 1.1.7

package/examples/live-data.ts

@@ -1,62 +1,62 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { IModalConfigLoader } from '../src/interfaces/modal'
-import { IOption } from '../src/interfaces/option'
-
-type IncomingProps = {
-  typeList: Array<IOption>
-
-  //Define function to receive selected element and formData (if you need to use) make read or select operations and build 
-  //next select array of elements
-  optionReadAction : (typeId: string, formData: any) => Promise<Array<IOption>>
-}
-
-type ResultProps = Omit<IncomingProps,'optionReadAction'|'typeList'> & Record<'typeId'|'optionId', string>
-
-export interface ILiveDataModal {
-  default: IModalConfigLoader<IncomingProps, ResultProps>
-}
-
-const liveDataModal: ILiveDataModal = {
-  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: 'Type',
-          options: props.typeList,
-          name: 'typeId', //Element to be observed
-          validation: {
-            required: true,
-            message: 'Please select a valid type'
-          }
-        },
-        {
-          elementType: 'select',
-          label: 'Options',
-          options: [],
-          name: 'optionId',
-          validation: {
-            required: true,
-            message: 'Please select a valid option'
-          },
-          liveData: {
-            action: props.optionReadAction, //Define live data action (function that receive data selected from other field for execute and build other options)
-            condition: ['typeId'] //Define element into modal was to observed
-          }
-        }
-      ],
-      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' }
-      }
-    }
-  }
-}
-
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { IModalConfigLoader } from '../src/interfaces/modal'
+import { IOption } from '../src/interfaces/option'
+
+type IncomingProps = {
+  typeList: Array<IOption>
+
+  //Define function to receive selected element and formData (if you need to use) make read or select operations and build 
+  //next select array of elements
+  optionReadAction : (typeId: string, formData: any) => Promise<Array<IOption>>
+}
+
+type ResultProps = Omit<IncomingProps,'optionReadAction'|'typeList'> & Record<'typeId'|'optionId', string>
+
+export interface ILiveDataModal {
+  default: IModalConfigLoader<IncomingProps, ResultProps>
+}
+
+const liveDataModal: ILiveDataModal = {
+  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: 'Type',
+          options: props.typeList,
+          name: 'typeId', //Element to be observed
+          validation: {
+            required: true,
+            message: 'Please select a valid type'
+          }
+        },
+        {
+          elementType: 'select',
+          label: 'Options',
+          options: [],
+          name: 'optionId',
+          validation: {
+            required: true,
+            message: 'Please select a valid option'
+          },
+          liveData: {
+            action: props.optionReadAction, //Define live data action (function that receive data selected from other field for execute and build other options)
+            condition: ['typeId'] //Define element into modal was to observed
+          }
+        }
+      ],
+      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 liveDataModal

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.1",
-  "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"
+  }
+}