dynamic-modal/README.md

The dynamic-modal is a solution of creation different modals into project using a json configuration file

# 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

Additionally, `dynamic-modal` is compatible with **Next.js**.

## Installation

Install the library via npm:

```bash
npm install dynamic-modal
```

## Setup for Next.js (14 or 15)
Define your components for use inside modal, create file and configure all modal components. Here´s an example using HeroUI (previously NextUI):

```jsx
'use client'
import { Autocomplete, AutocompleteItem, Button, Input, Select, SelectItem, Switch, Textarea } from "@heroui/react"
import { IComponentState } from "dynamic-modal/src/interfaces/component-state"

export const ModalComponents: IComponentState = {
  ModalButtonCancel: (props) => {
    return (
      <Button 
        {...props} 
        color={props.color as "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined}  
        variant={'bordered'}
      >
        {props.text}
      </Button>
    )
  },
  ModalButtonAction: (props) => {
    return (
      <Button 
        {...props} 
        color={props.color as "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined} 
        variant={'solid'}
      >
        {props.text}
      </Button>)
  },
  Button: ({ text, ...props }) => {
    return (
      <Button 
        {...props} 
        color={props.color as "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined}  
        variant={props.variant as "flat" | "bordered" | "solid" | "light" | "faded" | "shadow" | "ghost" | undefined}
      >
        {text}
      </Button>)
  },
  Input: ({ invalid, error, disabled, onChange, ...props }) => {
    return (
      <Input 
        {...props}
        onValueChange={onChange}
        errorMessage={error?.message}
        isInvalid={invalid}
        isDisabled={disabled}
        />
    )
  },
  Select: ({ options, invalid, error, isMulti, isSearch, disabled, onChange, value, ...props }) => {
    return (
      !isSearch ?
      <Select 
        {...props}
        selectedKeys={isMulti ? value : [value]}
        onSelectionChange={onChange}
        selectionMode={isMulti ? 'multiple' : 'single'}
        errorMessage={error?.message}
        isInvalid={invalid}
        isDisabled={disabled}
        >
        {options.map((option) => (
          <SelectItem key={option.id}>{option.name}</SelectItem>
        ))}
      </Select> :
      <Autocomplete 
        {...props} 
        selectedKey={value}
        onSelectionChange={onChange}
        errorMessage={error?.message}
        isInvalid={invalid}
        isDisabled={disabled}
        >
        {options.map((item) => (
          <AutocompleteItem key={item.id}>{item.name}</AutocompleteItem>
        ))}
      </Autocomplete>
    )
  },
  Textarea: ({ invalid, error, disabled, ...props }) => {
    return (
      <Textarea 
        {...props}
        errorMessage={error?.message}
        isInvalid={invalid}
        isDisabled={disabled}
        />
    )
  },
  Toggle: ({ value, onChange, label, invalid, ...props }) => {
    return(
      <Switch {...props} isSelected={value} onValueChange={onChange}>
        {label}
      </Switch>
    )
  }
}
```

In the main provider of your React application, import your modal components (defined previously) and wrap your app with the `ComponentState` component to ensure `dynamic-modal` functions properly. Here’s an example:

```jsx
import { ComponentState } from 'dynamic-modal'
import { ModalComponents } from "@data/modal-component/modal-component"

function Provider({ children }: Readonly<{ children: ReactNode }>) {
  return (
    <ComponentState components={ModalComponents}>
      <Component {...pageProps} />
    </ComponentState>
  )
}

export default Provider

```
In the root layout define `portal` for modal (this component use react portal)

```jsx
//imports...

export default function RootLayout ({
  children
}: Readonly<{
  children: ReactNode
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Provider>
          {children}
        </Provider>
        <div id='modal-portal'/>
      </body>
    </html>
  )
}
```

## Setup for Next.js 13 and old
Edit file named `_document.tsx` and define `portal` for modal (this component use react portal)

```jsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document () {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <div id='modal-portal'/>
        <NextScript />
      </body>
    </Html>
  )
}
```

## 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'
//Create your modal, import and use
import testModal from '@modal-config/test'

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.