dynamic-modal 1.1.19 → 1.1.21

package/dist/src/interfaces/input-upload.d.ts

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

package/dist/src/interfaces/input-upload.js

@@ -0,0 +1 @@
+export {};

package/dist/src/interfaces/make-button.d.ts

@@ -0,0 +1,20 @@
+import { CSSProperties, ReactNode } from 'react';
+import { IFieldProps } from './field';
+import { FieldValues, UseFormGetValues } from 'react-hook-form';
+export interface IMakeButton {
+    id?: string;
+    elementType: 'button';
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    variant?: string;
+    text?: string;
+    type?: 'button' | 'submit' | 'reset';
+    onClick?: (formData: FieldValues) => void;
+    color?: string;
+    children?: ReactNode;
+}
+export interface IMakeButtonProps extends IFieldProps {
+    element: Omit<IMakeButton, 'elementType'>;
+    getValues: UseFormGetValues<FieldValues>;
+}

package/dist/src/interfaces/make-button.js

@@ -0,0 +1 @@
+export {};

package/{src/interfaces/make-custom-upload.ts → dist/src/interfaces/make-custom-upload.d.ts}

@@ -1,9 +1,7 @@
 import { IField, IFieldProps } from './field';
-
 export interface IMakeCustomUpload extends IField {
-  elementType: 'custom-upload';
+    elementType: 'custom-upload';
 }
-
 export interface IMakeCustomUploadProps extends IFieldProps {
-  element: Omit<IMakeCustomUpload, 'elementType'>;
+    element: Omit<IMakeCustomUpload, 'elementType'>;
 }

package/dist/src/interfaces/make-custom-upload.js

@@ -0,0 +1 @@
+export {};

package/dist/src/interfaces/make-description.d.ts

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

package/dist/src/interfaces/make-description.js

@@ -0,0 +1 @@
+export {};

package/{src/interfaces/make-field-group.ts → dist/src/interfaces/make-field-group.d.ts}

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

package/dist/src/interfaces/make-field-group.js

@@ -0,0 +1 @@
+export {};

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

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

package/dist/src/interfaces/make-input.js

@@ -0,0 +1 @@
+export {};

package/{src/interfaces/make-select.ts → dist/src/interfaces/make-select.d.ts}

@@ -1,15 +1,13 @@
 import { IField, IFieldProps } from './field';
 import { IModalLiveDataCondition } from './modal';
 import { IOption } from './option';
-
 export interface IMakeSelect extends IField {
-  elementType: 'select';
-  options: Array<IOption>;
-  liveData?: IModalLiveDataCondition;
-  isSearch?: boolean;
-  isMulti?: boolean;
+    elementType: 'select';
+    options: Array<IOption>;
+    liveData?: IModalLiveDataCondition;
+    isSearch?: boolean;
+    isMulti?: boolean;
 }
-
 export interface IMakeSelectProps extends IFieldProps {
-  element: Omit<IMakeSelect, 'elementType'>;
+    element: Omit<IMakeSelect, 'elementType'>;
 }

package/dist/src/interfaces/make-select.js

@@ -0,0 +1 @@
+export {};

package/dist/src/interfaces/make-table.d.ts

@@ -0,0 +1,26 @@
+import { CSSProperties, JSX } from 'react';
+import { IField, IFieldProps } from './field';
+import { IModalLiveDataCondition } from './modal';
+export interface ITableColumn extends Pick<IField, 'style'> {
+    title: string;
+    key?: string;
+    isButton?: boolean;
+    isDeleteAction?: boolean;
+    Icon?: (props: any) => JSX.Element;
+    action?: (row: any) => void;
+}
+export interface IMakeTable extends Omit<IField, 'label' | 'defaultValue' | 'validation' | 'disabled' | 'enableIf' | 'id'> {
+    elementType: 'table';
+    selectValueName: string;
+    selectTitleName: string;
+    selectPlaceholder?: string;
+    selectActionName: string;
+    buttonStyle?: CSSProperties;
+    columns: Array<ITableColumn>;
+    defaultSelected?: Array<string>;
+    data: Array<any>;
+    liveData?: IModalLiveDataCondition;
+}
+export interface IMakeTableProps extends Omit<IFieldProps, 'unregister'> {
+    element: Omit<IMakeTable, 'elementType'>;
+}

package/dist/src/interfaces/make-table.js

@@ -0,0 +1 @@
+export {};

package/{src/interfaces/make-textarea.ts → dist/src/interfaces/make-textarea.d.ts}

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

package/dist/src/interfaces/make-textarea.js

@@ -0,0 +1 @@
+export {};

package/{src/interfaces/make-toggle.ts → dist/src/interfaces/make-toggle.d.ts}

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

package/dist/src/interfaces/make-toggle.js

@@ -0,0 +1 @@
+export {};

package/dist/src/interfaces/make-upload.d.ts

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

package/dist/src/interfaces/make-upload.js

@@ -0,0 +1 @@
+export {};

package/{src/interfaces/make-watcher.ts → dist/src/interfaces/make-watcher.d.ts}

@@ -1,10 +1,8 @@
 import { IField, IFieldProps } from './field';
-
 export interface IMakeWatcher extends Pick<IField, 'style' | 'label'> {
-  elementType: 'watcher';
-  watchList: Array<string>;
+    elementType: 'watcher';
+    watchList: Array<string>;
 }
-
 export interface IMakeWatcherProps extends IFieldProps {
-  element: Omit<IMakeWatcher, 'elementType'>;
+    element: Omit<IMakeWatcher, 'elementType'>;
 }

package/dist/src/interfaces/make-watcher.js

@@ -0,0 +1 @@
+export {};

package/dist/src/interfaces/modal.d.ts

@@ -0,0 +1,48 @@
+import { CSSProperties } from 'react';
+import { IMakeSelect } from './make-select';
+import { IMakeInput } from './make-input';
+import { IMakeTextarea } from './make-textarea';
+import { IMakeToggle } from './make-toggle';
+import { IMakeDescription } from './make-description';
+import { IMakeFieldGroup } from './make-field-group';
+import { IMakeUpload } from './make-upload';
+import { IOption } from './option';
+import { IMakeButton } from './make-button';
+import { IMakeCustomUpload } from './make-custom-upload';
+import { IMakeWatcher } from './make-watcher';
+import { IMakeTable } from './make-table';
+export type IModalField = IMakeSelect | IMakeInput | IMakeFieldGroup | IMakeTextarea | IMakeToggle | IMakeDescription | IMakeUpload | IMakeCustomUpload | IMakeWatcher | IMakeButton | IMakeTable;
+export type IFormField = IMakeSelect | IMakeInput | IMakeTextarea | IMakeToggle;
+export interface IModalRenderAction {
+    action: (data: string, ...args: any[]) => Promise<boolean>;
+    condition: Array<string>;
+}
+export type IModalRenderCriteria = Record<string, Array<string | number | boolean> | undefined>;
+export type IModalRenderCondition = IModalRenderAction | IModalRenderCriteria;
+export type IModalLiveDataCondition = {
+    action: (data: string, ...args: any[]) => Promise<Array<IOption>>;
+    condition: Array<string>;
+};
+export interface IModalConfigProps {
+    reservedData?: Record<string, any>;
+    title: string;
+    fields: Array<IModalField>;
+    out: (data: any) => void;
+    onClose?: () => void;
+    style?: CSSProperties;
+    overFlowBody?: string | number;
+    minHeightBody?: string | number;
+    useSubmit?: boolean;
+    useBlur?: boolean;
+    actions: {
+        containerStyle?: CSSProperties;
+        cancel?: Omit<IMakeButton, 'elementType'>;
+        action: Omit<IMakeButton, 'elementType'>;
+    };
+}
+export type IModalConfigLoader<T = any, D = any> = (props: T, action: (modalResult: D) => void) => IModalConfigProps;
+export interface IModal {
+    open: boolean;
+    close: () => void;
+    config: IModalConfigProps;
+}

package/dist/src/interfaces/modal.js

@@ -0,0 +1 @@
+export {};

package/dist/src/interfaces/option.d.ts

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

package/dist/src/interfaces/option.js

@@ -0,0 +1 @@
+export {};

package/dist/src/interfaces/portal.d.ts

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

package/dist/src/interfaces/portal.js

@@ -0,0 +1 @@
+export {};

package/dist/src/modal.d.ts

@@ -0,0 +1,3 @@
+import { IModal } from './interfaces/modal';
+export declare const Modal: ({ open, close, config }: IModal) => import("react/jsx-runtime").JSX.Element | null;
+export default Modal;

package/dist/src/modal.js

@@ -0,0 +1,135 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useContext, useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { Portal } from './components/portal/portal';
+import MakeToggle from './components/make-toggle/make-toggle';
+import MakeInput from './components/make-input/make-input';
+import MakeSelect from './components/make-select/make-select';
+import MakeTextarea from './components/make-textarea/make-textarea';
+import MakeDescription from './components/make-description/make-description';
+import MakeUpload from './components/make-upload/make-upload';
+import MakeButton from './components/make-button/make-button';
+import { ComponentStateContext } from './context/component/component-state';
+import MakeCustomUpload from './components/make-custom-upload/make-custom-upload';
+import MakeWatcher from './components/make-watcher/make-watcher';
+import MakeTable from './components/make-table/make-table';
+export const Modal = ({ open, close, config }) => {
+    const { ModalButtonAction, ModalButtonCancel } = useContext(ComponentStateContext);
+    const [modalReady, setModalReady] = useState(undefined);
+    const [defaultLoaded, setDefaultLoaded] = useState(false);
+    const { control, handleSubmit, getValues, unregister, setValue, watch, trigger, reset, getFieldState, } = useForm();
+    const formValueHandler = (element) => {
+        if ([
+            'group',
+            'upload',
+            'custom-upload',
+            'text',
+            'description',
+            'watcher',
+            'table',
+        ].includes(element.elementType))
+            return;
+        if (!element.defaultValue && element.renderIf) {
+            unregister(element.name);
+            return;
+        }
+        const defaultValue = element.defaultValue ?? '';
+        const parsedValue = defaultValue === 'true'
+            ? true
+            : defaultValue === 'false'
+                ? false
+                : defaultValue;
+        setValue(element.name, parsedValue ?? '');
+    };
+    const autoLoadGroup = (groupFields) => {
+        groupFields.forEach((element) => {
+            formValueHandler(element);
+        });
+    };
+    const autoLoadField = (modalFields) => {
+        if (defaultLoaded)
+            return;
+        modalFields.forEach((element) => {
+            if (element.elementType === 'group') {
+                autoLoadGroup(element.groups);
+                return;
+            }
+            formValueHandler(element);
+        });
+        setDefaultLoaded(true);
+    };
+    const getUseSubmit = (modalConfig) => {
+        const useSubmit = modalConfig.useSubmit === undefined
+            ? true
+            : modalConfig.useSubmit === false
+                ? false
+                : true;
+        return useSubmit;
+    };
+    const getRender = ({ elementType, ...element }, index, isEndOfRender = false) => {
+        if (isEndOfRender && modalReady)
+            setTimeout(() => autoLoadField(modalReady.fields), 200);
+        const props = {
+            control,
+            watch,
+            setValue,
+            unregister,
+        };
+        return elementType === 'input' ? (_createElement(MakeInput, { ...props, key: `modal-input-${index}`, element: element })) : elementType === 'select' ? (_createElement(MakeSelect, { ...props, key: `modal-select-${index}`, element: element })) : elementType === 'textarea' ? (_createElement(MakeTextarea, { ...props, key: `modal-textarea-${index}`, element: element })) : elementType === 'toggle' ? (_createElement(MakeToggle, { ...props, key: `modal-toggle-${index}`, element: element })) : elementType === 'text' ? (_createElement(MakeDescription, { ...props, key: `modal-text-${index}`, element: element })) : elementType === 'upload' ? (_createElement(MakeUpload, { ...props, key: `modal-upload-${index}`, element: element })) : elementType === 'custom-upload' ? (_createElement(MakeCustomUpload, { ...props, key: `modal-custom-upload-${index}`, element: element })) : elementType === 'watcher' ? (_createElement(MakeWatcher, { ...props, key: `modal-watcher-${index}`, element: element })) : elementType === 'button' ? (_createElement(MakeButton, { ...props, key: `modal-button-${index}`, element: element, getValues: getValues })) : elementType === 'table' ? (_createElement(MakeTable, { ...props, key: `modal-table-${index}`, element: element })) : null;
+    };
+    const closeHandler = () => {
+        if (modalReady?.onClose)
+            modalReady.onClose();
+        setTimeout(() => {
+            setModalReady(undefined);
+            setDefaultLoaded(false);
+            reset();
+            close();
+        }, 200);
+    };
+    const manualSubmit = async () => {
+        const form = getValues();
+        const fields = Object.keys(form);
+        await trigger(fields);
+        const validations = fields.map((field) => {
+            const { invalid } = getFieldState(field);
+            return invalid;
+        });
+        const result = validations.some((isInvalid) => isInvalid)
+            ? undefined
+            : form;
+        if (!result)
+            return;
+        actionHandler({ ...(modalReady?.reservedData ?? {}), ...form });
+    };
+    const actionHandler = (data) => {
+        modalReady?.out({ ...(modalReady?.reservedData ?? {}), ...data });
+        closeHandler();
+    };
+    useEffect(() => {
+        if (open && !modalReady)
+            setModalReady(config);
+    }, [config, modalReady, open]);
+    if (!modalReady)
+        return null;
+    return (_jsx(Portal, { closeTime: 200, portalOpen: open, portalTag: '#modal-portal', useBlur: modalReady.useBlur, children: _jsx("div", { className: `rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px] ${modalReady.useBlur && 'shadow-md border border-gray-200'}`, style: modalReady.style, children: _jsxs("form", { className: "flex flex-col p-4 gap-4", autoComplete: "off", onSubmit: handleSubmit(actionHandler), children: [_jsx("h2", { className: "text-bold text-center border-b pb-4 font-semibold", children: modalReady.title }), _jsx("div", { className: "flex flex-col gap-4 py-4", style: {
+                            overflowY: modalReady.overFlowBody ? 'auto' : undefined,
+                            height: modalReady.overFlowBody,
+                            minHeight: modalReady.minHeightBody,
+                        }, children: modalReady.fields.map((element, index) => {
+                            const isEndOfRender = index + 1 === modalReady.fields.length;
+                            if (element.elementType === 'group') {
+                                const groupElements = element.groups
+                                    .filter((sub) => !['group', 'watcher', 'table'].includes(sub.elementType))
+                                    .map((sub, subIndex) => getRender(sub, index + subIndex, isEndOfRender));
+                                const hideDiv = groupElements.filter((render) => render).length === 0;
+                                return (_jsxs("div", { className: `flex flex-col w-full gap-2 ${hideDiv && 'hidden'}`, children: [element.title && (_jsx("h3", { className: "font-bold border-b-2 pb-2 mb-2", children: element.title })), _jsx("div", { className: "flex gap-4 w-full", style: element.style, children: groupElements.map((component) => component) })] }, `modal-group-${index}`));
+                            }
+                            else {
+                                return getRender(element, index, isEndOfRender);
+                            }
+                        }) }), _jsxs("div", { className: "flex gap-4 items-center justify-center border-t p-2", style: modalReady?.actions.containerStyle, children: [modalReady.actions.cancel && (_jsx(ModalButtonCancel, { ...modalReady.actions.cancel, onClick: closeHandler })), getUseSubmit(modalReady) ? (_jsx(ModalButtonAction, { ...modalReady.actions.action, type: "submit" })) : (_jsx(ModalButtonAction, { ...modalReady.actions.action, onClick: manualSubmit, type: "button" }))] })] }) }) }));
+};
+export default Modal;

package/dist/src/util/general/general.util.d.ts

@@ -0,0 +1,3 @@
+import { IOption } from '../../interfaces/option';
+export declare const liveDataAction: (fieldData: string | number | Array<unknown>, formData: Record<string, unknown>, action: (data: string, ...args: any[]) => Promise<IOption[]>) => Promise<IOption[]>;
+export declare const liveDataHandler: (fieldData: string | number | Array<unknown>, formData: Record<string, unknown>, action: (data: string, ...args: any[]) => Promise<boolean>) => Promise<boolean>;

package/dist/src/util/general/general.util.js

@@ -0,0 +1,15 @@
+'use client';
+export const liveDataAction = async (fieldData, formData, action) => {
+    if (typeof fieldData === 'string') {
+        const options = await action(fieldData, formData);
+        return options ?? [];
+    }
+    return [];
+};
+export const liveDataHandler = async (fieldData, formData, action) => {
+    if (typeof fieldData === 'string') {
+        const result = await action(fieldData, formData);
+        return result ?? false;
+    }
+    return false;
+};

package/dist/util/general/general.util.js

@@ -1,5 +1,5 @@
-"use strict";
 'use client';
+"use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.liveDataHandler = exports.liveDataAction = void 0;
 const liveDataAction = async (fieldData, formData, action) => {

package/package.json

@@ -1,8 +1,21 @@
 {
   "name": "dynamic-modal",
-  "version": "1.1.19",
+  "version": "1.1.21",
   "description": "The dynamic-modal is a solution of creation different modals into project using a json configuration file",
-  "main": "index.js",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": ["dist"],
   "scripts": {
     "build": "tsc",
     "lint": "eslint .",
@@ -44,5 +57,10 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-hook-form": "^7.54.2"
   }
 }