dynamic-modal 1.0.12 → 1.1.1

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

@@ -1,6 +1,7 @@
-import React, { ChangeEvent, FC, useMemo } from 'react'
+'use client'
+
+import React, { ChangeEvent, FC } from 'react'
 import { IFileResult, IInputUpload } from '../../interfaces/input-upload'
-import { generateId } from '../../tools/general'
 
 const InputUpload: FC<IInputUpload> = ({ onChange, readAsArrayBuffer, ...props }: IInputUpload) => {
   
@@ -39,30 +40,24 @@ const InputUpload: FC<IInputUpload> = ({ onChange, readAsArrayBuffer, ...props }
     })
   }
 
-  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>}
+      {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-${elementId}-help`}
-        id={`file-input-${elementId}`}
+        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-${elementId}-help`}>
+        id={`file-input-${props.id}-help`}>
         {props.helpText?.toUpperCase()}
       </p>
     </div>

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

@@ -1,16 +1,17 @@
-import React, { FC } from 'react'
+'use client'
+
+import React, { FC, useContext, useMemo } from 'react'
 import { IMakeButtonProps } from '../../interfaces/make-button'
+import { ComponentStateContext } from '../../context/component/component-state'
+import { generateId } from '../../tools/general'
+
+const MakeButton: FC<IMakeButtonProps> = ({ element }) => {
+  const { Button } = useContext(ComponentStateContext)
 
-const MakeButton: FC<IMakeButtonProps> = ({
-  element: { text, ...element }
-}) => {
+  const elementId = useMemo(() => element.id ?? generateId(), [])
+  
   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>
+    <Button {...element} id={elementId} />
   )
 }
 

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

@@ -0,0 +1,15 @@
+'use client'
+
+import React, { FC } from 'react'
+import { IMakeDescriptionProps } from '../../interfaces/make-description'
+
+const MakeDescription: FC<IMakeDescriptionProps> = ({ element: { text, Icon, containerStyle, textStyle } }) => {
+  return (
+    <div className='flex gap-4 w-full h-auto text-xs text-center p-2 border-1 rounded-md' style={containerStyle}>
+      {Icon && <Icon />}
+      <p style={textStyle}>{text}</p>
+    </div>
+  )
+}
+
+export default MakeDescription

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

@@ -1,13 +1,18 @@
-import React, { FC, useEffect } from 'react'
+'use client'
+
+import React, { FC, useContext, useEffect, useMemo } 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 { IMakeInputProps } from '../../interfaces/make-input'
+import { ComponentStateContext } from '../../context/component/component-state'
 import { generateId } from '../../tools/general'
 
 const MakeInput: FC<IMakeInputProps> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
+  const { Input } = useContext(ComponentStateContext)
   const { render, enable, checkField } = useFieldRender({ ...props, element })
 
+  const elementId = useMemo(() => element.id ?? generateId(), [])
+  
   useEffect(() => {
     const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }))
     return () => subscription.unsubscribe()
@@ -19,25 +24,26 @@ const MakeInput: FC<IMakeInputProps> = ({ element: { validation: { required, ...
         control={props.control}
         name={element.name}
         rules={{
-          required,
-          pattern: {
-            value: validation.regex as RegExp ?? /(.*)/,
+          required: {
+            value: required,
             message: validation.message ?? ''
           },
-            ...validation
+          pattern: validation.regex ?  {
+            value: validation.regex,
+            message: validation.message ?? ''
+          } : undefined,
+          ...validation
         }}
-        render={({ field: { onChange, value }, fieldState: { invalid } }) => (
-          <Input
-            size='sm'
-            {...element}
-            id={element.id ?? generateId()}
-            onChange={onChange}
-            value={value ?? ''}
-            color={invalid ? 'danger' : undefined}
-            isInvalid={invalid}
-            errorMessage={invalid ? (validation.message ?? '') : undefined}
-            disabled={element.disabled ?? !enable}
-          />
+        render={({ field: { onChange, value }, fieldState: { invalid, error } }) => (
+          <Input 
+            {...element} 
+            id={elementId}
+            onChange={onChange} 
+            value={value ?? ''} 
+            invalid={invalid}
+            error={error} 
+            disabled={element.disabled ?? !enable} 
+            />
         )}
       />
       : null

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

@@ -1,13 +1,18 @@
-import React, { FC, useEffect } from 'react'
+'use client'
+
+import React, { FC, useContext, useEffect, useMemo } 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'
+import { ComponentStateContext } from '../../context/component/component-state'
 
 const MakeSelect: FC<IMakeSelectProps> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
+  const { Select } = useContext(ComponentStateContext)
   const { render, enable, checkField, liveData, liveSearching } = useFieldRender({ ...props, element })
 
+  const elementId = useMemo(() => element.id ?? generateId(), [])
+
   useEffect(() => {
     const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }))
     return () => subscription.unsubscribe()
@@ -19,32 +24,28 @@ const MakeSelect: FC<IMakeSelectProps> = ({ element: { validation: { required, .
         control={props.control}
         name={element.name}
         rules={{
-          required,
-          pattern: {
-            value: validation.regex as RegExp ?? /(.*)/,
+          required: {
+            value: required,
             message: validation.message ?? ''
           },
-            ...validation
+          pattern: validation.regex ?  {
+            value: validation.regex,
+            message: validation.message ?? ''
+          } : undefined,
+          ...validation
         }}
-        render={({ field: { onChange, value }, fieldState: { invalid } }) => (
+        render={({ field: { onChange, value }, fieldState: { invalid, error } }) => (
           <Select
-            size='sm'
             {...element}
-            id={element.id ?? generateId()}
+            id={elementId}
             onChange={onChange}
-            label={liveSearching ? 'Loading...' : element.label}
-            selectedKeys={[value]}
-            color={invalid ? 'danger' : undefined}
-            isInvalid={invalid}
-            errorMessage={invalid ? (validation.message ?? '') : undefined}
-            disabled={element.disabled ?? !enable}
-          >
-            {
-              (liveData || (element.options ?? [])).map((opt) => (
-                <SelectItem key={opt.id} value={opt.id}>{opt.name}</SelectItem>
-              ))
-            }
-          </Select>
+            value={value}
+            invalid={invalid}
+            error={error}
+            disabled={element.disabled ?? !enable} 
+            liveSearching={liveSearching}
+            options={liveData || (element.options ?? [])}
+          />
         )}
       />
       : <></>

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

@@ -1,13 +1,18 @@
-import React, { FC, useEffect } from 'react'
+'use client'
+
+import React, { FC, useContext, useEffect, useMemo } 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'
+import { ComponentStateContext } from '../../context/component/component-state'
 
 const MakeTextarea: FC<IMakeTextareaProps> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
+  const { Textarea } = useContext(ComponentStateContext)
   const { render, enable, checkField } = useFieldRender({ ...props, element })
 
+  const elementId = useMemo(() => element.id ?? generateId(), [])
+  
   useEffect(() => {
     const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }))
     return () => subscription.unsubscribe()
@@ -19,24 +24,24 @@ const MakeTextarea: FC<IMakeTextareaProps> = ({ element: { validation: { require
         name={element.name}
         control={props.control}
         rules={{
-          required,
-          pattern: {
-            value: validation.regex as RegExp ?? /(.*)/,
+          required: {
+            value: required,
             message: validation.message ?? ''
           },
-            ...validation
+          pattern: validation.regex ?  {
+            value: validation.regex,
+            message: validation.message ?? ''
+          } : undefined,
+          ...validation
         }}
-        render={({ field: { onChange, value }, fieldState: { invalid } }) => (
+        render={({ field: { onChange, value }, fieldState: { invalid, error } }) => (
           <Textarea
             {...element}
-            disableAutosize
-            id={element.id ?? generateId()}
+            id={elementId}
             onChange={onChange}
-            label={element.label}
             value={value ?? ''}
-            color={invalid ? 'danger' : undefined}
-            isInvalid={invalid}
-            errorMessage={invalid ? (validation.message ?? '') : undefined}
+            invalid={invalid}
+            error={error}
             disabled={element.disabled ?? !enable}
           />
         )}

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

@@ -1,13 +1,18 @@
-import React, { FC, useEffect } from 'react'
+'use client'
+
+import React, { FC, useContext, useEffect, useMemo } 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'
+import { ComponentStateContext } from '../../context/component/component-state'
 
 const MakeToggle: FC<IMakeToggleProps> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
+  const { Toggle } = useContext(ComponentStateContext)
   const { render, enable, checkField } = useFieldRender({ ...props, element })
 
+  const elementId = useMemo(() => element.id ?? generateId(), [])
+  
   useEffect(() => {
     const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }))
     return () => subscription.unsubscribe()
@@ -19,22 +24,26 @@ const MakeToggle: FC<IMakeToggleProps> = ({ element: { validation: { required, .
         control={props.control}
         name={element.name}
         rules={{
-          required,
-          pattern: {
-            value: validation.regex as RegExp ?? /(.*)/,
+          required: {
+            value: required,
+            message: validation.message ?? ''
+          },
+          pattern: validation.regex ?  {
+            value: validation.regex,
             message: validation.message ?? ''
-          }
+          } : undefined,
+          ...validation
         }}
-        render={({ field: { onChange, value } }) => (
-          <Switch
+        render={({ field: { onChange, value }, fieldState: { invalid, error } }) => (
+          <Toggle
             {...element}
-            id={element.id ?? generateId()}
-            isSelected={value}
-            onValueChange={onChange}
-            isDisabled={element.disabled ?? !enable}
-          >
-            {element.label}
-          </Switch>
+            id={elementId}
+            onChange={onChange}
+            value={value ?? ''}
+            invalid={invalid}
+            error={error}
+            disabled={element.disabled ?? !enable}
+          />
         )}
       />
       : null

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

@@ -1,3 +1,5 @@
+'use client'
+
 import React,{ FC } from 'react'
 import { Controller } from 'react-hook-form'
 import InputUpload from '../input-upload/input-upload'
@@ -13,17 +15,21 @@ const MakeUpload : FC<IMakeUploadProps> = ({ element: { validation: { required,
         control={props.control}
         name={element.name}
         rules={{
-          required,
-          pattern: {
-            value: validation.regex as RegExp ?? /(.*)/,
+          required: {
+            value: required,
+            message: validation.message ?? ''
+          },
+          pattern: validation.regex ?  {
+            value: validation.regex,
             message: validation.message ?? ''
-          }
+          } : undefined,
+          ...validation
         }}
         render={({ field: { onChange } }) => (
           <InputUpload
-              {...element}
-            disabled={element.disabled ?? !enable}
+            {...element}
             onChange={onChange}
+            disabled={element.disabled ?? !enable}
           />
         )}
       />

package/src/components/portal/portal.tsx

@@ -1,4 +1,5 @@
 'use client'
+
 import React, { useRef, useEffect, useState, FC } from 'react'
 import { createPortal } from 'react-dom'
 import { IPortal } from '../../interfaces/portal'

package/src/context/component/component-state.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import React, { useMemo } from "react"
+import { createContext } from "react"
+import { IComponentState, IComponentStateProps } from "../../interfaces/component-state"
+
+export const ComponentStateContext = createContext<IComponentState>({} as IComponentState)
+
+export const ComponentState = ({ children, components }: IComponentStateProps) => {
+
+  const value: IComponentState = useMemo(() => components, [])
+
+  return (
+    <ComponentStateContext.Provider value={value}>
+      {children}
+    </ComponentStateContext.Provider>
+  )
+}

package/src/hooks/field-render.ts

@@ -1,4 +1,5 @@
 'use client'
+
 import { useCallback, useMemo, useState } from 'react'
 import { IField, IFieldProps } from '../interfaces/field'
 import { IOption } from '../interfaces/option'

package/src/hooks/modal-handler.ts

@@ -1,4 +1,5 @@
 'use client'
+
 import {  useState } from 'react'
 import { IModal, IModalConfigProps } from '../interfaces/modal'
 

package/src/interfaces/component-state.ts

@@ -0,0 +1,33 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { FC, PropsWithChildren } from "react"
+import { FieldError } from "react-hook-form"
+import { IOption } from "./option"
+import { IMakeInput } from "./make-input"
+import { IMakeButton } from "./make-button"
+import { IMakeSelect } from "./make-select"
+import { IMakeTextarea } from "./make-textarea"
+import { IMakeToggle } from "./make-toggle"
+
+export interface IComponentAditionalProps {
+  onChange: (...event: any[]) => void
+  value: any
+  invalid: boolean
+  error?: FieldError
+  liveSearching?: boolean
+}
+
+export interface IComponentState {
+  ModalButtonCancel: FC<Omit<IMakeButton, 'elementType'>>
+  ModalButtonAction: FC<Omit<IMakeButton, 'elementType'>>
+  Button: FC<Omit<IMakeButton, 'elementType'>>
+  //Description: FC<Omit<IMakeDescription, 'elementType'>>
+  Input: FC<Omit<IMakeInput, 'elementType' | 'validation' |'renderIf' | 'enableIf'> & IComponentAditionalProps>
+  Select: FC<Omit<IMakeSelect, 'elementType' | 'validation' |'renderIf' | 'enableIf'> & IComponentAditionalProps & Record<'options', Array<IOption>>>
+  Textarea: FC<Omit<IMakeTextarea, 'elementType' | 'validation' |'renderIf' | 'enableIf'> & IComponentAditionalProps>
+  Toggle: FC<Omit<IMakeToggle, 'elementType' | 'validation' |'renderIf' | 'enableIf'> & IComponentAditionalProps>
+}
+
+export interface IComponentStateProps extends PropsWithChildren {
+  components: IComponentState
+}
+

package/src/interfaces/field.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { CSSProperties } from 'react'
 import { Control, FieldValues, UseFormSetValue, UseFormUnregister, UseFormWatch } from 'react-hook-form'
 
@@ -10,8 +11,9 @@ export interface IField {
   name: string
   id?: string
   label?: string
-  styles?: CSSProperties
-  defaultValue?: string
+  style?: CSSProperties
+  placeholder?: string
+  defaultValue?: any
   renderIf?: Record<string, Array<string | number>>
   enableIf?: Record<string, Array<string | number>>
   validation: {
@@ -24,12 +26,11 @@ export interface IField {
     max?: IValidationBase<number | string>
   }
   disabled?: boolean
-  //required?: boolean
 }
 
 export interface IFieldProps {
-  control: Control<FieldValues, unknown>;
-  watch: UseFormWatch<FieldValues>;
-  setValue: UseFormSetValue<FieldValues>;
-  unregister: UseFormUnregister<FieldValues>;
+  control: Control<FieldValues, unknown>
+  watch: UseFormWatch<FieldValues>
+  setValue: UseFormSetValue<FieldValues>
+  unregister: UseFormUnregister<FieldValues>
 }

package/src/interfaces/input-upload.ts

@@ -1,21 +1,21 @@
 import { ChangeEvent, CSSProperties } from 'react'
 
 export interface IFileResult {
-  name: string;
-  size: number;
+  name: string
+  size: number
   data: string
 }
 
 export interface IInputUpload {
-  id?: string;
-  value?: string;
-  onChange: (event: ChangeEvent<HTMLInputElement> | IFileResult | FileList | null) => void;
-  accept?:string;
+  id?: string
+  value?: string
+  onChange: (event: ChangeEvent<HTMLInputElement> | IFileResult | FileList | null) => void
+  accept?:string
   label?: string
   helpText?: string
-  styles?:CSSProperties;
-  readAsArrayBuffer?: boolean;
-  name: string;
-  disabled?: boolean;
-  read?: boolean;
+  style?:CSSProperties
+  readAsArrayBuffer?: boolean
+  name: string
+  disabled?: boolean
+  read?: boolean
 }

package/src/interfaces/make-button.ts

@@ -2,19 +2,18 @@ import { CSSProperties } from 'react'
 import { IFieldProps } from './field'
 
 export interface IMakeButton {
-  elementType: 'button';
+  id?: string
+  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'
+  className?: string
+  style?: CSSProperties
+  variant?: string
+  text?: string
+  type?: 'button' | 'submit' | 'reset'
+  onClick?: () => void
+  color?: string
 }
 
 export interface IMakeButtonProps extends IFieldProps {
-  element: IMakeButton
+  element: Omit<IMakeButton, 'elementType'>
 }

package/src/interfaces/make-description.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, FC } from 'react'
+import { IFieldProps } from './field'
+
+export interface IMakeDescription {
+  elementType: 'text'
+  text: string
+  containerStyle?: CSSProperties
+  textStyle?: CSSProperties
+  Icon?: FC
+}
+
+export interface IMakeDescriptionProps extends IFieldProps {
+  element: Omit<IMakeDescription, 'elementType'>
+}

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

@@ -3,11 +3,12 @@ import { IFieldProps } from './field'
 import { IModalField } from './modal'
 
 export interface IMakeFieldGroup {
-  elementType: 'group';
-  groups: Array<IModalField>;
-  style?: CSSProperties;
+  elementType: 'group'
+  groups: Array<IModalField>
+  style?: CSSProperties
+  title?: string
 }
 
 export interface IMakeFieldGroupProps extends IFieldProps {
-  element: IMakeFieldGroup;
+  element: IMakeFieldGroup
 }

package/src/interfaces/{make-field.ts → make-input.ts}

@@ -3,12 +3,12 @@ import { IField, IFieldProps } from './field'
 
 export interface IMakeInput extends IField {
   elementType: 'input'
-  placeHolder?: string
+  placeholder?: string
   min?: string
   max?: string
   type?: HTMLInputTypeAttribute
 }
 
 export interface IMakeInputProps extends IFieldProps {
-  element: IMakeInput
+  element: Omit<IMakeInput, 'elementType'>
 }

package/src/interfaces/make-select.ts

@@ -5,8 +5,10 @@ export interface IMakeSelect extends IField {
   elementType: 'select'
   options: Array<Record<'id'|'name', string>>
   liveData?: IModalLiveDataCondition
+  isSearch?: boolean
+  isMulti?: boolean
 }
 
 export interface IMakeSelectProps extends IFieldProps {
-  element: IMakeSelect
+  element: Omit<IMakeSelect, 'elementType'>
 }

package/src/interfaces/make-textarea.ts

@@ -7,5 +7,5 @@ export interface IMakeTextarea extends IField {
 }
 
 export interface IMakeTextareaProps extends IFieldProps {
-  element: IMakeTextarea
+  element: Omit<IMakeTextarea, 'elementType'>
 }

package/src/interfaces/make-toggle.ts

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