dynamic-modal 1.0.0

package/README-ES.md

@@ -0,0 +1,75 @@
+# dynamic-modal
+
+`dynamic-modal` es una librería construida en typescript para crear modales reutilizables en aplicaciones React y Next.js, utilizando JSON para configurar su estructura sin necesidad de escribir HTML. Esto facilita su construcción y personalización, permitiendo abrir y cerrar modales mediante un custom hook.
+
+## Requisitos
+
+Para que `dynamic-modal` funcione correctamente, debes instalar las siguientes dependencias:
+
+- React 18
+- React-DOM 18
+- react-hook-form
+- NextUI
+
+Además, es compatible con **Next.js 14**.
+
+## Instalación
+
+Puedes instalar la librería a través de npm:
+
+```bash
+npm install dynamic-modal
+```
+
+## Configuración para Next.js 14
+En el layout principal de tu aplicación Next.js, debes envolver tu aplicación con el componente `NextUIProvider` para que `dynamic-modal` funcione adecuadamente. Aquí un ejemplo:
+
+```jsx
+import { NextUIProvider } from '@nextui-org/react';
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <NextUIProvider>
+      <Component {...pageProps} />
+    </NextUIProvider>
+  );
+}
+
+export default MyApp;
+
+```
+
+## Uso
+Para controlar la apertura y cierre del modal, obtén el custom hook `useModalHandler` y llama a `openModal` cuando necesites mostrar el modal.
+
+```jsx
+import { useModalHandler, DynamicModal } from 'dynamic-modal';
+import { Button } from '@nextui-org/react';
+
+function ExampleComponent() {
+  const { openModal, modalProps } = useModalHandler();
+
+  return (
+    <>
+      <Button
+        onClick={() => {
+          openModal(testModal.default({}, (data) => {
+            console.log('modal data', data);
+          }));
+        }}
+      >
+        Open modal
+      </Button>
+
+      <DynamicModal {...modalProps} />
+    </>
+  );
+}
+
+export default ExampleComponent;
+
+```
+
+## Ejemplos
+La carpeta `examples` en el repositorio contiene distintos modos de configuración para ayudarte a personalizar tu modal.
+

package/README.md

@@ -0,0 +1,75 @@
+# dynamic-modal
+
+`dynamic-modal` is a TypeScript library for creating reusable modals in React and Next.js applications. It uses JSON objects to configure the modal structure, eliminating the need to write HTML. This approach simplifies modal creation and customization, allowing you to open and close modals using a custom hook.
+
+## Requirements
+
+To use `dynamic-modal` properly, ensure you have the following dependencies installed:
+
+- React 18
+- React-DOM 18
+- react-hook-form
+- NextUI
+
+Additionally, `dynamic-modal` is compatible with **Next.js 14**.
+
+## Installation
+
+Install the library via npm:
+
+```bash
+npm install dynamic-modal
+```
+
+## Setup for Next.js 14
+In the main layout of your Next.js application, wrap your app with the `NextUIProvider` component to ensure `dynamic-modal` functions properly. Here’s an example:
+
+```jsx
+import { NextUIProvider } from '@nextui-org/react';
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <NextUIProvider>
+      <Component {...pageProps} />
+    </NextUIProvider>
+  );
+}
+
+export default MyApp;
+
+```
+
+## Usage
+To control the modal’s open and close states, use the `useModalHandler` custom hook and call `openModal` whenever you need to display the modal.
+
+```jsx
+import { useModalHandler, DynamicModal } from 'dynamic-modal';
+import { Button } from '@nextui-org/react';
+
+function ExampleComponent() {
+  const { openModal, modalProps } = useModalHandler();
+
+  return (
+    <>
+      <Button
+        onClick={() => {
+          openModal(testModal.default({}, (data) => {
+            console.log('modal data', data);
+          }));
+        }}
+      >
+        Open modal
+      </Button>
+
+      <DynamicModal {...modalProps} />
+    </>
+  );
+}
+
+export default ExampleComponent;
+
+```
+
+## Examples
+The examples folder in the repository contains different configuration modes to help you customize your modal.
+

package/eslint.config.mjs

@@ -0,0 +1,14 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+
+export default [
+  { files: ['**/*.{ts,tsx}'] },
+  { languageOptions: { globals: globals.browser } },
+  { settings: { react: { version: 'detect' } } },
+  { ignores : ['dist/**', 'node_modules/**'] },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+];

package/examples/live-data.ts

@@ -0,0 +1,63 @@
+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: never) => 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 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
+          }
+        }
+      ],
+      styles: { // Put here styles for modal like height or width
+        width: '500px'
+      },
+      title: `Title of live data 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 liveDataModal

package/examples/simple.ts

@@ -0,0 +1,76 @@
+import { IModalConfigLoader } from '../src/interfaces/modal'
+
+type IncomingProps = {
+  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: {}, //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

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

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "dynamic-modal",
+  "version": "1.0.0",
+  "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 .",
+    "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"
+  },
+  "peerDependencies": {
+    "@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

@@ -0,0 +1,71 @@
+import React, { ChangeEvent, FC, useMemo } from 'react'
+import { IFileResult, IInputUpload } from '../../interfaces/input-upload'
+import { generateId } from '../../tools/general'
+
+const InputUpload: FC<IInputUpload> = ({ onChange, ...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 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

@@ -0,0 +1,51 @@
+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, disable, 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={disable || !enable || element.disabled}
+            id={element.id ?? generateId()}
+            onSelectionChange={onChange}
+            label={liveSearching ? 'Loading...' : element.label}
+            selectedKey={value}
+            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

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

@@ -0,0 +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

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

@@ -0,0 +1,44 @@
+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 ?? ''}
+            errorMessage={invalid ? (element.validation.message ?? '') : undefined}
+            disabled={element.disabled ?? !enable}
+          />
+        )}
+      />
+      : null
+  )
+}
+
+export default MakeInput

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

@@ -0,0 +1,53 @@
+import React, { FC, useEffect } from 'react'
+import { Controller } from 'react-hook-form'
+import { useFieldRender } from '../../hooks/field-render'
+import { generateId } from '../../tools/general'
+import { IMakeMultiSelectProps } from '../../interfaces/make-multi-select'
+import { Select, SelectItem } from '@nextui-org/react'
+
+const MakeMultiSelect: FC<IMakeMultiSelectProps> = ({ 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 } }) => (
+          <Select
+            size='sm'
+            {...element}
+            id={element.id ?? generateId()}
+            onSelectionChange={onChange}
+            label={liveSearching ? 'Loading...' : element.label}
+            selectionMode="multiple"
+            selectedKeys={value}
+            errorMessage={invalid ? (element.validation.message ?? '') : undefined}
+            disabled={element.disabled ?? !enable}
+            className='max-w-lg'
+          >
+            {
+              (liveData || (element.options ?? [])).map((opt) => (
+                <SelectItem key={opt.id} value={opt.id}>{opt.name}</SelectItem>
+              ))
+            }
+          </Select>
+        )}
+      />
+      : null
+  )
+}
+
+export default MakeMultiSelect

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

@@ -0,0 +1,51 @@
+import React, { FC, useEffect } 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 { Select, SelectItem } from '@nextui-org/react'
+
+const MakeSelect: FC<IMakeSelectProps> = ({ 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 } }) => (
+          <Select
+            size='sm'
+            {...element}
+            id={element.id ?? generateId()}
+            onChange={onChange}
+            label={liveSearching ? 'Loading...' : element.label}
+            selectedKeys={[value]}
+            errorMessage={invalid ? (element.validation.message ?? '') : undefined}
+            disabled={element.disabled ?? !enable}
+          >
+            {
+              (liveData || (element.options ?? [])).map((opt) => (
+                <SelectItem key={opt.id} value={opt.id}>{opt.name}</SelectItem>
+              ))
+            }
+          </Select>
+        )}
+      />
+      : <></>
+  )
+}
+
+export default MakeSelect

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

@@ -0,0 +1,16 @@
+import React, { FC } from 'react'
+import { IMakeTextProps } from '../../interfaces/make-text'
+
+const MakeText: FC<IMakeTextProps> = ({
+  element
+}) => {
+  return (
+    <div className='text-xs text-center'>
+      <p style={element.styles}>
+        {element.text}
+      </p>
+    </div>
+  )
+}
+
+export default MakeText