dynamic-modal 1.1.19 → 1.1.21

package/src/interfaces/custom-upload.ts

@@ -1,13 +0,0 @@
-import { ChangeEvent, CSSProperties } from 'react';
-
-export interface ICustomUpload {
-  id?: string;
-  value?: string;
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-  accept?: string;
-  label?: string;
-  helpText?: string;
-  style?: CSSProperties;
-  name: string;
-  disabled?: boolean;
-}

package/src/interfaces/field.ts

@@ -1,43 +0,0 @@
-import { CSSProperties } from 'react';
-import {
-  Control,
-  FieldValues,
-  UseFormSetValue,
-  UseFormUnregister,
-  UseFormWatch,
-} from 'react-hook-form';
-
-import { IModalRenderCondition } from './modal';
-
-export interface IValidationBase<T> {
-  value: T;
-  message: string;
-}
-
-export interface IField {
-  name: string;
-  id?: string;
-  label?: string;
-  style?: CSSProperties;
-  placeholder?: string;
-  defaultValue?: any;
-  renderIf?: IModalRenderCondition;
-  enableIf?: IModalRenderCondition;
-  validation: {
-    required: boolean;
-    regex?: RegExp;
-    message?: string;
-    maxLength?: IValidationBase<number>;
-    minLength?: IValidationBase<number>;
-    min?: IValidationBase<number | string>;
-    max?: IValidationBase<number | string>;
-  };
-  disabled?: boolean;
-}
-
-export interface IFieldProps {
-  control: Control<FieldValues, unknown>;
-  watch: UseFormWatch<FieldValues>;
-  setValue: UseFormSetValue<FieldValues>;
-  unregister: UseFormUnregister<FieldValues>;
-}

package/src/interfaces/input-upload.ts

@@ -1,23 +0,0 @@
-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/src/interfaces/make-button.ts

@@ -1,23 +0,0 @@
-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/src/interfaces/make-description.ts

@@ -1,15 +0,0 @@
-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-table.ts

@@ -1,29 +0,0 @@
-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/src/interfaces/make-upload.ts

@@ -1,14 +0,0 @@
-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/src/interfaces/modal.ts

@@ -1,75 +0,0 @@
-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/src/interfaces/option.ts

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

package/src/interfaces/portal.ts

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

package/src/modal.tsx

@@ -1,331 +0,0 @@
-'use client';
-
-import React, { 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 {
-  IModal,
-  IModalField,
-  IModalConfigProps,
-  IFormField,
-} from './interfaces/modal';
-import MakeDescription from './components/make-description/make-description';
-import { IFieldProps } from './interfaces/field';
-import MakeUpload from './components/make-upload/make-upload';
-import MakeButton from './components/make-button/make-button';
-import { IMakeInput } from './interfaces/make-input';
-import { IMakeSelect } from './interfaces/make-select';
-import { IMakeTextarea } from './interfaces/make-textarea';
-import { IMakeToggle } from './interfaces/make-toggle';
-import { IMakeDescription } from './interfaces/make-description';
-import { IMakeUpload } from './interfaces/make-upload';
-import { IMakeButton } from './interfaces/make-button';
-import { ComponentStateContext } from './context/component/component-state';
-import MakeCustomUpload from './components/make-custom-upload/make-custom-upload';
-import { IMakeCustomUpload } from './interfaces/make-custom-upload';
-import MakeWatcher from './components/make-watcher/make-watcher';
-import { IMakeWatcher } from './interfaces/make-watcher';
-import MakeTable from './components/make-table/make-table';
-import { IMakeTable } from './interfaces/make-table';
-
-export const Modal = ({ open, close, config }: IModal) => {
-  const { ModalButtonAction, ModalButtonCancel } = useContext(
-    ComponentStateContext,
-  );
-  const [modalReady, setModalReady] = useState<IModalConfigProps | undefined>(
-    undefined,
-  );
-  const [defaultLoaded, setDefaultLoaded] = useState<boolean>(false);
-
-  const {
-    control,
-    handleSubmit,
-    getValues,
-    unregister,
-    setValue,
-    watch,
-    trigger,
-    reset,
-    getFieldState,
-  } = useForm();
-
-  const formValueHandler = (element: IFormField) => {
-    if (
-      ['group', 'upload', 'custom-upload', 'text'].includes(element.elementType)
-    )
-      return;
-    if (!element.defaultValue && element.renderIf) {
-      unregister(element.name);
-      return;
-    }
-
-    const defaultValue = element.defaultValue ?? '';
-
-    const parsedValue: boolean | string | Array<string> | undefined =
-      defaultValue === 'true'
-        ? true
-        : defaultValue === 'false'
-          ? false
-          : defaultValue;
-
-    setValue(element.name, parsedValue ?? '');
-  };
-
-  const autoLoadGroup = (groupFields: Array<IModalField>) => {
-    groupFields.forEach((element) => {
-      formValueHandler(element as IFormField);
-    });
-  };
-
-  const autoLoadField = (modalFields: Array<IModalField>) => {
-    if (defaultLoaded) return;
-
-    modalFields.forEach((element) => {
-      if (element.elementType === 'group') {
-        autoLoadGroup(element.groups);
-        return;
-      }
-      formValueHandler(element as IFormField);
-    });
-
-    setDefaultLoaded(true);
-  };
-
-  const getUseSubmit = (modalConfig: IModalConfigProps): boolean => {
-    const useSubmit =
-      modalConfig.useSubmit === undefined
-        ? true
-        : modalConfig.useSubmit === false
-          ? false
-          : true;
-
-    return useSubmit;
-  };
-
-  const getRender = (
-    { elementType, ...element }: IModalField,
-    index: number,
-    isEndOfRender: boolean = false,
-  ) => {
-    if (isEndOfRender && modalReady)
-      setTimeout(() => autoLoadField(modalReady.fields), 200);
-
-    const props: IFieldProps = {
-      control,
-      watch,
-      setValue,
-      unregister,
-    };
-
-    return elementType === 'input' ? (
-      <MakeInput
-        {...props}
-        key={`modal-input-${index}`}
-        element={element as IMakeInput}
-      />
-    ) : elementType === 'select' ? (
-      <MakeSelect
-        {...props}
-        key={`modal-select-${index}`}
-        element={element as IMakeSelect}
-      />
-    ) : elementType === 'textarea' ? (
-      <MakeTextarea
-        {...props}
-        key={`modal-textarea-${index}`}
-        element={element as IMakeTextarea}
-      />
-    ) : elementType === 'toggle' ? (
-      <MakeToggle
-        {...props}
-        key={`modal-toggle-${index}`}
-        element={element as IMakeToggle}
-      />
-    ) : elementType === 'text' ? (
-      <MakeDescription
-        {...props}
-        key={`modal-text-${index}`}
-        element={element as IMakeDescription}
-      />
-    ) : elementType === 'upload' ? (
-      <MakeUpload
-        {...props}
-        key={`modal-upload-${index}`}
-        element={element as IMakeUpload}
-      />
-    ) : elementType === 'custom-upload' ? (
-      <MakeCustomUpload
-        {...props}
-        key={`modal-custom-upload-${index}`}
-        element={element as IMakeCustomUpload}
-      />
-    ) : elementType === 'watcher' ? (
-      <MakeWatcher
-        {...props}
-        key={`modal-watcher-${index}`}
-        element={element as IMakeWatcher}
-      />
-    ) : elementType === 'button' ? (
-      <MakeButton
-        {...props}
-        key={`modal-button-${index}`}
-        element={element as IMakeButton}
-        getValues={getValues}
-      />
-    ) :  elementType === 'table' ? (
-      <MakeTable
-        {...props}
-        key={`modal-table-${index}`}
-        element={element as IMakeTable}
-      />
-    ) : null;
-  };
-
-  const closeHandler = (): void => {
-    if (modalReady?.onClose) modalReady.onClose();
-
-    setTimeout(() => {
-      setModalReady(undefined);
-      setDefaultLoaded(false);
-      reset();
-      close();
-    }, 200);
-  };
-
-  const manualSubmit = async (): Promise<void> => {
-    const form = getValues();
-    const fields = Object.keys(form);
-    await trigger(fields);
-
-    const validations: Array<boolean> = 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: Record<string, string | number | object>,
-  ): void => {
-    modalReady?.out({ ...(modalReady?.reservedData ?? {}), ...data });
-    closeHandler();
-  };
-
-  useEffect(() => {
-    if (open && !modalReady) setModalReady(config);
-  }, [config, modalReady, open]);
-
-  if (!modalReady) return null;
-
-  return (
-    <Portal
-      closeTime={200}
-      portalOpen={open}
-      portalTag={'#modal-portal'}
-      useBlur={modalReady.useBlur}
-    >
-      <div
-        className="rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px]"
-        style={modalReady.style}
-      >
-        <form
-          className="flex flex-col p-4 gap-4"
-          autoComplete="off"
-          onSubmit={handleSubmit(actionHandler)}
-        >
-          <h2 className="text-bold text-center border-b pb-4 font-semibold">
-            {modalReady.title}
-          </h2>
-          <div
-            className="flex flex-col gap-4 py-4"
-            style={{
-              overflowY: modalReady.overFlowBody ? 'auto' : undefined,
-              height: modalReady.overFlowBody,
-              minHeight: modalReady.minHeightBody,
-            }}
-          >
-            {modalReady.fields.map((element, index) => {
-              const isEndOfRender: boolean =
-                index + 1 === modalReady.fields.length;
-
-              if (element.elementType === 'group') {
-                return (
-                  <div
-                    key={`modal-group-${index}`}
-                    className="flex flex-col w-full gap-2"
-                  >
-                    {element.title && (
-                      <h3 className="font-bold border-b-2 pb-2 mb-2">
-                        {element.title}
-                      </h3>
-                    )}
-                    <div
-                      key={`modal-group-${index}`}
-                      className="flex gap-4 w-full"
-                      style={element.style}
-                    >
-                      {element.groups
-                        .filter((sub) =>
-                          [
-                            'input',
-                            'select',
-                            'toggle',
-                            'multiselect',
-                            'upload',
-                            'custom-upload',
-                            'watcher',
-                            'button',
-                            'autocomplete',
-                          ].includes(sub.elementType),
-                        )
-                        .map((sub, subIndex) =>
-                          getRender(sub, index + subIndex, isEndOfRender),
-                        )}
-                    </div>
-                  </div>
-                );
-              } else {
-                return getRender(element, index, isEndOfRender);
-              }
-            })}
-          </div>
-          <div
-            className="flex gap-4 items-center justify-center border-t p-2"
-            style={modalReady?.actions.containerStyle}
-          >
-            {modalReady.actions.cancel && (
-              <ModalButtonCancel
-                {...modalReady.actions.cancel}
-                onClick={closeHandler}
-              />
-            )}
-            {getUseSubmit(modalReady) ? (
-              <ModalButtonAction {...modalReady.actions.action} type="submit" />
-            ) : (
-              <ModalButtonAction
-                {...modalReady.actions.action}
-                onClick={manualSubmit}
-                type="button"
-              />
-            )}
-          </div>
-        </form>
-      </div>
-    </Portal>
-  );
-};
-
-export default Modal;

package/src/util/general/general.util.ts

@@ -1,29 +0,0 @@
-'use client';
-
-import { IOption } from '../../interfaces/option';
-
-export const liveDataAction = async (
-  fieldData: string | number | Array<unknown>,
-  formData: Record<string, unknown>,
-  action: (data: string, ...args: any[]) => Promise<IOption[]>,
-) => {
-  if (typeof fieldData === 'string') {
-    const options = await action(fieldData, formData);
-    return options ?? [];
-  }
-
-  return [] as Array<IOption>;
-};
-
-export const liveDataHandler = async (
-  fieldData: string | number | Array<unknown>,
-  formData: Record<string, unknown>,
-  action: (data: string, ...args: any[]) => Promise<boolean>,
-) => {
-  if (typeof fieldData === 'string') {
-    const result = await action(fieldData, formData);
-    return result ?? false;
-  }
-
-  return false;
-};

package/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2020",
-    "module": "commonjs",
-    "declaration": true,
-    "outDir": "./dist",
-    "strict": true,
-    "jsx": "react",
-    "esModuleInterop": true,
-    "skipLibCheck": true
-  },
-  "include": ["src/**/*"]
-}