dynamic-modal 1.0.13 → 1.1.4

package/index.ts

@@ -1,3 +1,5 @@
-export { default as DynamicModal } from './src/modal';
+'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 { useModalHandler } from './src/hooks/modal-handler'
+export { ComponentState, ComponentStateContext } from './src/context/component/component-state';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dynamic-modal",
-  "version": "1.0.13",
+  "version": "1.1.4",
   "description": "The dynamic-modal is a solution of creation different modals into project using a json configuration file",
   "main": "index.js",
   "scripts": {
@@ -27,22 +27,21 @@
   },
   "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"
+    "@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": {
-    "@nextui-org/react": "^2.2.9",
-    "react": "^18.0.0",
-    "react-dom": " ^18.0.0",
-    "react-hook-form": "^7.0.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.2"
   }
 }

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 { render, enable, checkField } = useFieldRender({ ...props, element })
+const MakeInput: FC<IMakeInputProps> = ({ element: { validation: { required, ...validation }, enableIf, renderIf, ...element }, ...props }) => {
+  const { Input } = useContext(ComponentStateContext)
+  const { render, enable, checkField } = useFieldRender({ ...props, element: { enableIf, renderIf, ...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}
-            isDisabled={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,12 +1,17 @@
-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 }, enableIf, renderIf, ...element }, ...props }) => {
+  const { Select } = useContext(ComponentStateContext)
+  const { render, enable, checkField, liveData, liveSearching } = useFieldRender({ ...props, element: { renderIf, enableIf, ...element} })
 
-const MakeSelect: FC<IMakeSelectProps> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
-  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 }))
@@ -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}
-            isDisabled={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 { render, enable, checkField } = useFieldRender({ ...props, element })
+const MakeTextarea: FC<IMakeTextareaProps> = ({ element: { validation: { required, ...validation }, enableIf, renderIf, ...element }, ...props }) => {
+  const { Textarea } = useContext(ComponentStateContext)
+  const { render, enable, checkField } = useFieldRender({ ...props, element: { enableIf, renderIf, ...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,25 @@ 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}
-            isDisabled={element.disabled ?? !enable}
+            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 { render, enable, checkField } = useFieldRender({ ...props, element })
+const MakeToggle: FC<IMakeToggleProps> = ({ element: { validation: { required, ...validation }, enableIf, renderIf, ...element }, ...props }) => {
+  const { Toggle } = useContext(ComponentStateContext)
+  const { render, enable, checkField } = useFieldRender({ ...props, element: { enableIf, renderIf, ...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,11 +1,13 @@
+'use client'
+
 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> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
-  const { render, enable } = useFieldRender({ ...props, element })
+const MakeUpload : FC<IMakeUploadProps> = ({ element: { validation: { required, ...validation }, enableIf, renderIf, ...element }, ...props }) => {
+  const { render, enable } = useFieldRender({ ...props, element: { enableIf, renderIf, ...element} })
 
   return (
     render
@@ -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'
@@ -19,11 +20,11 @@ export interface IFieldRender {
   liveSearching?: boolean;
 }
 
-export interface IFieldRenderProps extends Pick<IFieldProps, 'setValue'|'unregister'> {
-  element: Partial<Pick<IField, 'enableIf'|'renderIf'|'name' >> & Partial<Record<'liveData', IModalLiveDataCondition>>
+export interface IFieldRenderProps extends Pick<IFieldProps, 'setValue' | 'unregister'> {
+  element: Partial<Pick<IField, 'enableIf' | 'renderIf' | 'name' >> & Partial<Record<'liveData', IModalLiveDataCondition>>
 }
 
-export const useFieldRender = ({element, setValue, unregister}: IFieldRenderProps): IFieldRender => {
+export const useFieldRender = ({ element, setValue, unregister }: IFieldRenderProps): IFieldRender => {
   const [render, setRender] = useState<boolean|null>(null)
   const [enable, setEnable] = useState<boolean|null>(null)
   const [liveSearching, setLiveSearching] = useState<boolean>(false)
@@ -76,13 +77,13 @@ export const useFieldRender = ({element, setValue, unregister}: IFieldRenderProp
       const fieldValidValue: boolean = targetField !== undefined && targetField !== null && targetField !== ''
 
       if (renderCondition && renderConditionList.includes(key) && fieldValidValue) {
-        const renderStatus: boolean = (element.renderIf as IModalRenderCondition)[key].includes(targetField) || (element.renderIf as IModalRenderCondition)[key].includes('*')
+        const renderStatus: boolean = (element.renderIf as IModalRenderCondition)[key]!.includes(targetField) || (element.renderIf as IModalRenderCondition)[key]!.includes('*')
         if (render !== renderStatus) {
           setRender(renderStatus)
           if(!renderStatus) unregister(element.name as string)
         }
       } else if (enableCondition && enableConditionList.includes(key) && fieldValidValue) {
-        const enableStatus: boolean = (element.enableIf as IModalRenderCondition)[key].includes(targetField) || (element.enableIf as IModalRenderCondition)[key].includes('')
+        const enableStatus: boolean = (element.enableIf as IModalRenderCondition)[key]!.includes(targetField) || (element.enableIf as IModalRenderCondition)[key]!.includes('*')
         if (enable !== enableStatus) setEnable(enableStatus)
       }
 

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,5 +1,7 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { CSSProperties } from 'react'
 import { Control, FieldValues, UseFormSetValue, UseFormUnregister, UseFormWatch } from 'react-hook-form'
+import { IModalRenderCondition } from './modal'
 
 export interface IValidationBase<T> {
   value: T
@@ -10,10 +12,11 @@ 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>>
+  style?: CSSProperties
+  placeholder?: string
+  defaultValue?: any
+  renderIf?: IModalRenderCondition
+  enableIf?: IModalRenderCondition
   validation: {
     required: boolean
     regex?: RegExp
@@ -24,12 +27,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
 }