dynamic-modal 1.0.0

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

@@ -0,0 +1,45 @@
+import React, { FC, useEffect } from 'react'
+import { Controller } from 'react-hook-form'
+import { useFieldRender } from '../../hooks/field-render'
+import { generateId } from '../../tools/general'
+import { IMakeTextareaProps } from '../../interfaces/make-textarea'
+import { Textarea } from '@nextui-org/react'
+
+const MakeTextarea: FC<IMakeTextareaProps> = ({ 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, props.watch])
+
+  return (
+    render
+      ? <Controller
+        name={element.name}
+        control={props.control}
+        rules={{
+          required: element.validation.required,
+          pattern: {
+            value: element.validation.regex as RegExp ?? /(.*)/,
+            message: element.validation.message ?? ''
+          }
+        }}
+        render={({ field: { onChange, value }, fieldState: { invalid } }) => (
+          <Textarea
+            {...element}
+            disableAutosize
+            id={element.id ?? generateId()}
+            onChange={onChange}
+            label={element.label}
+            value={value ?? ''}
+            errorMessage={invalid ? (element.validation.message ?? '') : undefined}
+            disabled={element.disabled ?? !enable}
+          />
+        )}
+      />
+      : null
+  )
+}
+
+export default MakeTextarea

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

@@ -0,0 +1,12 @@
+import React, { FC } from 'react'
+import { IMakeTitle } from '../../interfaces/make-title'
+
+const MakeTitle: FC<IMakeTitle> = ({ title }) => {
+  return (
+    <div className='flex text-center items-center justify-center text-xl'>
+      {title}
+    </div>
+  )
+}
+
+export default MakeTitle

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

@@ -0,0 +1,44 @@
+import React, { FC, useEffect } from 'react'
+import { Controller } from 'react-hook-form'
+import { useFieldRender } from '../../hooks/field-render'
+import { IMakeToggleProps } from '../../interfaces/make-toggle'
+import { Switch } from '@nextui-org/react'
+import { generateId } from '../../tools/general'
+
+const MakeToggle: FC<IMakeToggleProps> = (props) => {
+  const { render, enable, checkField } = useFieldRender(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={props.element.name}
+        rules={{
+          required: props.element.validation.required,
+          pattern: {
+            value: props.element.validation.regex as RegExp ?? /(.*)/,
+            message: props.element.validation.message ?? ''
+          }
+        }}
+        render={({ field: { onChange, value } }) => (
+          <Switch
+            {...props.element}
+            id={props.element.id ?? generateId()}
+            isSelected={value}
+            onValueChange={onChange}
+            isDisabled={props.element.disabled ?? !enable}
+          >
+            {props.element.label}
+          </Switch>
+        )}
+      />
+      : null
+  )
+}
+
+export default MakeToggle

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

@@ -0,0 +1,40 @@
+import React,{ FC } from 'react'
+import { Controller } from 'react-hook-form'
+import InputUpload from '../input-upload/input-upload'
+import { useFieldRender } from '../../hooks/field-render'
+import { IMakeUploadProps } from '../../interfaces/make-upload'
+
+const MakeUpload : FC<IMakeUploadProps> = (props) => {
+  const { render, enable } = useFieldRender(props)
+
+  return (
+    render
+      ? <Controller
+        control={props.control}
+        name={props.element.name}
+        rules={{
+          required: props.element.validation.required,
+          pattern: {
+            value: props.element.validation.regex as RegExp ?? /(.*)/,
+            message: props.element.validation.message ?? ''
+          }
+        }}
+        render={({ field: { onChange } }) => (
+          <InputUpload
+            id={props.element.id}
+            name={props.element.name}
+            disabled={props.element.disabled ?? !enable}
+            onChange={onChange}
+            label={props.element.label}
+            helpText={props.element.helpText}
+            style={props.element.styles}
+            accept={props.element.accept}
+            read={props.element.read}
+          />
+        )}
+      />
+      : null
+  )
+}
+
+export default MakeUpload

package/src/components/portal/portal.tsx

@@ -0,0 +1,36 @@
+'use client'
+import React, { useRef, useEffect, useState, FC } from 'react'
+import { createPortal } from 'react-dom'
+import { IPortal } from '../../interfaces/portal'
+
+export const Portal: FC<IPortal> = (props) => {
+  const ref = useRef<Element | null>(null)
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    if (mounted && !props.portalOpen && props.closeTime > 0) {
+      const timeoutId = setTimeout(() => {
+        setMounted(false)
+        ref.current = null
+      }, props.closeTime)
+
+      return () => clearTimeout(timeoutId)
+    } else if (mounted && !props.portalOpen) {
+      setMounted(false)
+      ref.current = null
+    } else if (!mounted && props.portalOpen) {
+      ref.current = document.querySelector<HTMLElement>(props.portalTag ?? '#portal')
+      setMounted(true)
+    }
+  }, [mounted, props.closeTime, props.portalOpen, props.portalTag])
+
+  return (
+    mounted && ref.current
+      ? createPortal(
+        <div className='transition-all delay-100 fixed top-0 left-0 w-full h-full grid place-items-center bg-black bg-opacity-40 z-20'>
+          {props.children}
+        </div>
+        , ref.current)
+      : null
+  )
+}

package/src/hooks/field-render.ts

@@ -0,0 +1,104 @@
+'use client'
+import { useCallback, useMemo, useState } from 'react'
+import { IField, IFieldProps } from '../interfaces/field'
+import { IOption } from '../interfaces/option'
+import { IModalLiveDataCondition, IModalRenderCondition } from '../interfaces/modal'
+
+export type IFormData = Record<string, unknown>
+
+export interface IWatchEvent {
+  name: string | undefined;
+  type: string | undefined;
+}
+
+export interface IFieldRender {
+  render: boolean | null;
+  enable: boolean | null;
+  checkField: (formData: IFormData, { name, type }: IWatchEvent) => void;
+  liveData?: Array<IOption>;
+  liveSearching?: boolean;
+}
+
+export interface IFieldRenderProps extends Pick<IFieldProps, 'setValue'> {
+  element: Partial<Pick<IField, 'enableIf'|'renderIf'|'name' >> & Partial<Record<'liveData', IModalLiveDataCondition>>
+}
+
+export const useFieldRender = (props: IFieldRenderProps): IFieldRender => {
+  const [render, setRender] = useState<boolean|null>(null)
+  const [enable, setEnable] = useState<boolean|null>(null)
+  const [liveSearching, setLiveSearching] = useState<boolean>(false)
+  const [liveData, setLiveData] = useState<Array<IOption> | undefined>(undefined)
+
+  const renderCondition = useMemo<boolean>(
+    () => {
+      const isRender: boolean = props.element.renderIf !== undefined
+      if (render === null) setRender(!isRender)
+      return isRender
+    }, [props.element.renderIf, render]
+  )
+
+  const enableCondition = useMemo<boolean>(
+    () => {
+      const isEnable: boolean = props.element.enableIf !== undefined
+      if (enable === null) setEnable(!isEnable)
+      return isEnable
+    }, [props.element.enableIf, enable]
+  )
+
+  const liveDataCondition = useMemo<boolean>(
+    () => {
+      return props.element.liveData !== undefined
+    }, [props.element.liveData]
+  )
+
+  const renderConditionList: string[] = useMemo(() => {
+    return renderCondition ? Object.keys(props.element.renderIf as IModalRenderCondition) : []
+  }, [props.element.renderIf, renderCondition])
+
+  const enableConditionList: string[] = useMemo(() => {
+    return enableCondition ? Object.keys(props.element.enableIf as IModalRenderCondition) : []
+  }, [enableCondition, props.element.enableIf])
+
+  const liveDataAction = useCallback(
+    async (field: string |number | Array<unknown>, formData: IFormData) => {
+      if (typeof field === 'string' && props.element.liveData?.action) {
+        const options = props.element.liveData.action(field, formData)
+        return options ?? []
+      }
+      return [] as Array<IOption>
+    }, [props.element.liveData]
+  )
+
+  const checkField = useCallback(
+    async (formData: IFormData, { name }: IWatchEvent) => {
+      const key: string = name ?? ''
+      const targetField  = formData[key] as string | number
+
+      if (renderCondition && renderConditionList.includes(key)) {
+        const renderStatus: boolean = (props.element.renderIf as IModalRenderCondition)[key].includes(targetField)
+        if (render !== renderStatus) setRender(renderStatus)
+      } else if (enableCondition && enableConditionList.includes(key)) {
+        const enableStatus: boolean = (props.element.enableIf as IModalRenderCondition)[key].includes(targetField)
+        if (enable !== enableStatus) setEnable(enableStatus)
+      }
+
+      if (liveDataCondition && key === props.element.liveData?.condition) {
+        if (targetField) {
+          setLiveSearching(true)
+          const options: Array<IOption> = await liveDataAction(targetField, formData)
+          if (liveData && JSON.stringify(liveData) !== JSON.stringify(options)) { props.setValue(props.element.name as string, options) }
+          setLiveData(options)
+          setLiveSearching(false)
+        }
+      }
+    }, [enable, enableCondition, enableConditionList, liveData, liveDataAction, liveDataCondition, props, render, renderCondition, renderConditionList]
+  )
+
+  return {
+    render,
+    enable,
+    checkField,
+    liveData,
+    liveSearching
+  }
+}

package/src/hooks/modal-handler.ts

@@ -0,0 +1,37 @@
+'use client'
+import {  useState } from 'react'
+import { IModal, IModalConfigProps } from '../interfaces/modal'
+
+interface IModalHandler {
+  openModal: (config: IModalConfigProps) => void
+  modalProps: IModal
+}
+
+export function useModalHandler (): IModalHandler {
+  const initialState: IModalHandler = {
+    modalProps: {
+      config: {} as IModalConfigProps,
+      close: () => {},
+      open: false,
+    },
+    openModal: () => {},
+  }
+
+  const [modalConfig, setModalConfig] = useState<IModalHandler>(initialState)
+
+  const openModal = (config: IModalConfigProps) => {
+    if (!config) {
+      alert(`¡WARNING! this modal was not returned config, please check before use`)
+      return
+    }
+
+    setModalConfig({ openModal, modalProps: { config, open: true, close } })
+  }
+
+  const closeModal = () => setModalConfig(initialState)
+
+  return {
+    openModal,
+    modalProps: { ...modalConfig.modalProps, close: closeModal },
+  }
+}

package/src/interfaces/field.ts

@@ -0,0 +1,30 @@
+import { CSSProperties } from 'react'
+import { Control, FieldValues, UseFormSetValue, UseFormWatch } from 'react-hook-form'
+import { IOption } from './option'
+
+export interface IFieldLiveData {
+  action: (data: string, ...args: unknown[]) => Promise<Array<IOption>>;
+  condition: string
+}
+
+export interface IField {
+  name: string
+  id?: string
+  label?: string
+  styles?: CSSProperties
+  defaultValue?: string
+  renderIf?: Record<string, Array<string | number>>
+  enableIf?: Record<string, Array<string | number>>
+  validation: {
+    required: boolean
+    regex?: RegExp
+    message?: string
+  }
+  disabled?: boolean
+}
+
+export interface IFieldProps {
+  control: Control<FieldValues, unknown>;
+  watch: UseFormWatch<FieldValues>;
+  setValue: UseFormSetValue<FieldValues>
+}

package/src/interfaces/input-upload.ts

@@ -0,0 +1,36 @@
+import { ChangeEvent, CSSProperties } from 'react'
+
+export interface IFileResult {
+  name: string;
+  size: number;
+  data: string
+}
+
+
+export interface IFile {
+  data?: string
+  name: string;
+  size: number;
+}
+export interface IInputState {
+  state: boolean;
+  file: IFile
+}
+
+export interface IInputStorage {
+  setData: (file: IInputState) => void;
+  clearFuntion: () => void;
+}
+export interface IInputUpload {
+  id?: string;
+  value?: string;
+  onChange: (event: ChangeEvent<HTMLInputElement> | IFileResult | FileList | null) => void;
+  accept?:string;
+  label?: string
+  helpText?: string
+  clearfunction?: () => void;
+  style?:CSSProperties;
+  name: string;
+  disabled?: boolean;
+  read?: boolean;
+}

package/src/interfaces/make-autocomplete.ts

@@ -0,0 +1,15 @@
+import { IField, IFieldProps } from './field'
+import { IModalLiveDataCondition } from './modal'
+import { IOption } from './option'
+
+export interface IMakeAutoComplete extends IField {
+  elementType: 'autocomplete'
+  options: Array<IOption>
+  defaultOption?: boolean
+  defaultOptionName?: string
+  liveData?: IModalLiveDataCondition
+}
+
+export interface IMakeAutoCompleteProps extends IFieldProps {
+  element: IMakeAutoComplete
+}

package/src/interfaces/make-button.ts

@@ -0,0 +1,20 @@
+import { CSSProperties } from 'react'
+import { IFieldProps } from './field'
+
+export interface IMakeButton {
+  elementType: 'button';
+  disabled?: boolean
+  className?: string;
+  variant?: 'solid' | 'light' | 'flat' | 'bordered' | 'faded' | 'shadow' | 'ghost'
+  text?: string;
+  type?: 'button' | 'submit' | 'reset';
+  onClick?: () => void;
+  iconName?: string;
+  iconSize?: number | string;
+  iconClassName?: CSSProperties;
+  color?: 'primary' | 'secondary' | 'default' | 'success' | 'warning' | 'danger'
+}
+
+export interface IMakeButtonProps extends IFieldProps {
+  element: IMakeButton
+}

package/src/interfaces/make-field-group.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react'
+import { IFieldProps } from './field'
+import { IModalField } from './modal'
+
+export interface IMakeFieldGroup {
+  elementType: 'group';
+  groups: Array<IModalField>;
+  style?: CSSProperties;
+}
+
+export interface IMakeFieldGroupProps extends IFieldProps {
+  element: IMakeFieldGroup;
+}

package/src/interfaces/make-field.ts

@@ -0,0 +1,14 @@
+import { HTMLInputTypeAttribute } from 'react'
+import { IField, IFieldProps } from './field'
+
+export interface IMakeInput extends IField {
+  elementType: 'input'
+  placeHolder?: string
+  min?: string
+  max?: string
+  type?: HTMLInputTypeAttribute
+}
+
+export interface IMakeInputProps extends IFieldProps {
+  element: IMakeInput
+}

package/src/interfaces/make-multi-select.ts

@@ -0,0 +1,14 @@
+import { IOption } from './option'
+import { IField, IFieldProps } from './field'
+import { IModalLiveDataCondition } from './modal'
+
+export interface IMakeMultiSelect extends Omit<IField, 'defaultValue'> {
+  elementType: 'multiselect';
+  options: Array<IOption>;
+  liveData?: IModalLiveDataCondition;
+  defaultValue?: Array<string>
+}
+
+export interface IMakeMultiSelectProps extends IFieldProps {
+  element: IMakeMultiSelect
+}

package/src/interfaces/make-select.ts

@@ -0,0 +1,14 @@
+import { IField, IFieldProps } from './field'
+import { IModalLiveDataCondition } from './modal'
+
+export interface IMakeSelect extends IField {
+  elementType: 'select'
+  options: Array<Record<'id'|'name', string>>
+  defaultOption?: boolean
+  defaultOptionName?: string
+  liveData?: IModalLiveDataCondition
+}
+
+export interface IMakeSelectProps extends IFieldProps {
+  element: IMakeSelect
+}

package/src/interfaces/make-text.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react'
+import { IFieldProps } from './field'
+
+export interface IMakeText {
+  elementType: 'text'
+  text: string
+  styles?: CSSProperties
+}
+
+export interface IMakeTextProps extends IFieldProps {
+  element: IMakeText
+}

package/src/interfaces/make-textarea.ts

@@ -0,0 +1,11 @@
+import { IField, IFieldProps } from './field'
+
+export interface IMakeTextarea extends IField {
+  elementType: 'textarea'
+  cols?: number
+  rows?: number
+}
+
+export interface IMakeTextareaProps extends IFieldProps {
+  element: IMakeTextarea
+}

package/src/interfaces/make-title.ts

@@ -0,0 +1,3 @@
+export interface IMakeTitle {
+  title: string
+}

package/src/interfaces/make-toggle.ts

@@ -0,0 +1,9 @@
+import { IField, IFieldProps } from './field'
+
+export interface IMakeToggle extends IField{
+  elementType: 'toggle'
+}
+
+export interface IMakeToggleProps extends IFieldProps {
+  element: IMakeToggle
+}

package/src/interfaces/make-upload.ts

@@ -0,0 +1,13 @@
+import { IField, IFieldProps } from './field'
+
+export interface IMakeUpload extends Omit<IField, 'defaultValue'> {
+  elementType: 'upload';
+  helpText?: string;
+  read: boolean;
+  image?: boolean;
+  accept?:string;
+}
+
+export interface IMakeUploadProps extends IFieldProps {
+  element: IMakeUpload
+}

package/src/interfaces/modal.ts

@@ -0,0 +1,50 @@
+import { CSSProperties } from 'react'
+import { IMakeSelect } from './make-select'
+import { IMakeInput } from './make-field'
+import { IMakeTextarea } from './make-textarea'
+import { IMakeToggle } from './make-toggle'
+import { IMakeMultiSelect } from './make-multi-select'
+import { IMakeText } from './make-text'
+import { IMakeFieldGroup } from './make-field-group'
+import { IMakeUpload } from './make-upload'
+import { IOption } from './option'
+import { IMakeButton } from './make-button'
+import { IMakeAutoComplete } from './make-autocomplete'
+
+export type IModalField = IMakeSelect | IMakeInput | IMakeFieldGroup | IMakeTextarea | IMakeToggle | IMakeMultiSelect | IMakeText | IMakeUpload | IMakeButton | IMakeAutoComplete
+
+export type IFormField = IMakeSelect | IMakeInput | IMakeTextarea | IMakeToggle | IMakeMultiSelect
+
+export type IModalRenderCondition = Record<string, Array<string | number>>
+
+export type IModalLiveDataCondition = {
+  action: (data: string, ...args: never[]) => Promise<Array<IOption>>;
+  condition: string
+}
+
+export interface IModalConfigProps {
+  fields: Array<IModalField>
+  title: string
+  action: {
+    name: string
+    action?: (data: never) => void
+    hide?: boolean
+  }
+  cancel?: {
+    name?: string;
+    action?: () => void
+    hide?: boolean;
+  }
+  reservedData?: Record<string, string | number>
+  styles?: CSSProperties;
+  overFlowBody?: string | number
+  minHeightBody?: string | number
+}
+
+export type IModalConfigLoader<T = never, D = never> = (props: T, action: (modalResult: D) => void) => IModalConfigProps
+
+export interface IModal {
+  open: boolean;
+  close: () => void
+  config: IModalConfigProps
+}

package/src/interfaces/option.ts

@@ -0,0 +1,4 @@
+export interface IOption {
+  id: string;
+  name: string;
+}

package/src/interfaces/portal.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react'
+
+export interface IPortal {
+  children: ReactNode;
+  closeTime: number;
+  portalOpen: boolean;
+  portalTag?: string;
+}