react-better-html 1.1.231 → 1.1.233

package/dist/index.js

@@ -69,6 +69,8 @@ __export(index_exports, {
   eventStopPropagation: () => import_react_better_core30.eventStopPropagation,
   filterHover: () => filterHover,
   formatPhoneNumber: () => import_react_better_core30.formatPhoneNumber,
+  generateApi: () => generateApi,
+  generateEventEmitter: () => generateEventEmitter,
   generateLocalStorage: () => generateLocalStorage,
   generateRandomString: () => import_react_better_core30.generateRandomString,
   getBrowser: () => getBrowser,
@@ -2335,15 +2337,19 @@ var ModalComponent = (0, import_react11.forwardRef)(function Modal({
     }
     onOpen?.();
   }, [onOpen, urlQuery, name]);
-  const onClickClose = (0, import_react11.useCallback)(() => {
-    setIsOpened.setFalse();
-    onClose?.();
-    if (urlQuery && name) urlQuery.removeQuery(`${name}-modal`, false);
-    setTimeout(() => {
-      dialogRef.current?.close();
-      setIsOpenedLate.setFalse();
-    }, 0.2 * 1e3);
-  }, [onClose, urlQuery, name]);
+  const onClickClose = (0, import_react11.useCallback)(
+    (event) => {
+      event?.stopPropagation();
+      setIsOpened.setFalse();
+      onClose?.();
+      if (urlQuery && name) urlQuery.removeQuery(`${name}-modal`, false);
+      setTimeout(() => {
+        dialogRef.current?.close();
+        setIsOpenedLate.setFalse();
+      }, 0.2 * 1e3);
+    },
+    [onClose, urlQuery, name]
+  );
   const onKeyDown = (0, import_react11.useCallback)(
     (event) => {
       if (event.key === "Escape") {
@@ -2357,17 +2363,13 @@ var ModalComponent = (0, import_react11.forwardRef)(function Modal({
     if (!defaultIsOpened) return;
     onClickOpen();
   }, []);
-  (0, import_react11.useImperativeHandle)(
-    ref,
-    () => {
-      return {
-        open: onClickOpen,
-        close: onClickClose,
-        isOpened
-      };
-    },
-    [onClickOpen, onClickClose, isOpened]
-  );
+  (0, import_react11.useImperativeHandle)(ref, () => {
+    return {
+      open: onClickOpen,
+      close: onClickClose,
+      isOpened
+    };
+  }, [onClickOpen, onClickClose, isOpened]);
   const headerVertical = headerTextAlign === "center";
   return (0, import_react_dom.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -3064,7 +3066,8 @@ function BetterHtmlProviderInternal({ config, plugins, children }) {
           tabsWithDots,
           setTabsWithDots
         }
-      }
+      },
+      devMode: config?.devMode
     }),
     [config, alerts, sideMenuIsCollapsed, sideMenuIsOpenMobile, plugins, tabGroups, tabsWithDots]
   );
@@ -3103,7 +3106,8 @@ function BetterHtmlProvider({ config, ...props }) {
       app: config?.app,
       sideMenuIsCollapsed: config?.sideMenuIsCollapsed,
       sideMenuIsOpenMobile: config?.sideMenuIsOpenMobile,
-      components: config?.components
+      components: config?.components,
+      devMode: config?.devMode
     }),
     [config]
   );
@@ -3263,6 +3267,12 @@ function findClosestNumber(numbers, target) {
   }
   return closest;
 }
+var constructQuery = (query) => {
+  if (!query) return "";
+  return Object.entries(query).filter(([_, queryVale]) => queryVale !== void 0 && queryVale !== null).map(
+    ([queryName, queryVale]) => typeof queryVale === "object" ? queryVale.map((value) => `${queryName}=${value}`) : [`${queryName}=${queryVale}`]
+  ).flat().join("&");
+};
 
 // src/utils/localStorage.ts
 function generateLocalStorage() {
@@ -3329,6 +3339,180 @@ function generateLocalStorage() {
   };
 }
 
+// src/utils/logger.ts
+var textColors = {
+  black: "#111111",
+  red: "#f83e4b",
+  green: "#5ac53a",
+  yellow: "#f8d770",
+  blue: "#3d6fdf",
+  magenta: "#9648eb",
+  cyan: "#53b2c8",
+  white: "#f8f8f8"
+};
+var backgroundColors = {
+  black: "#111111",
+  red: "#f83e4b",
+  green: "#5ac53a",
+  yellow: "#f8d770",
+  blue: "#3d6fdf",
+  magenta: "#9648eb",
+  cyan: "#53b2c8",
+  white: "#f8f8f8"
+};
+var logTypes = {
+  info: "cyan",
+  success: "green",
+  warn: "yellow",
+  error: "red"
+};
+function getCssString(options) {
+  const color = options.color ? textColors[options.color] : void 0;
+  const backgroundColor = options.backgroundColor ? backgroundColors[options.backgroundColor] : void 0;
+  const fontWeight = options.bold ? "bold" : "normal";
+  return `${color ? `color: ${color};` : ""}${backgroundColor ? `background-color: ${backgroundColor};` : ""}${fontWeight ? `font-weight: ${fontWeight};` : ""}`;
+}
+function logText(text, options) {
+  if (externalBetterHtmlContextValue?.devMode !== true) return;
+  console.log(`%c${text}`, getCssString(options ?? {}));
+}
+var log = {
+  ...Object.entries(logTypes).reduce(
+    (previousValue, [logType, color]) => {
+      previousValue[logType] = (text = "", bold) => {
+        logText(text, {
+          color,
+          bold
+        });
+      };
+      return previousValue;
+    },
+    {}
+  ),
+  /** @description Default log function */
+  log: (text, options) => {
+    logText(text, options);
+  },
+  /** @description Logs the value in pretty json format */
+  json: (jsonObject, options) => {
+    logText(JSON.stringify(jsonObject, null, 4), options);
+  },
+  /** @description Logs a -=-= pattern */
+  divider: (color) => {
+    logText("-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-", {
+      color
+    });
+  },
+  trace: () => {
+    if (externalBetterHtmlContextValue?.devMode !== true) return;
+    console.trace();
+  }
+};
+
+// src/utils/api.ts
+var methodInitiateToString = {
+  GET: "GET request to      ",
+  PUT: "PUT request to      ",
+  POST: "POST request to     ",
+  PATCH: "PATCH request to    ",
+  DELETE: "DELETE request to   ",
+  HEAD: "HEAD request to     ",
+  OPTIONS: "OPTIONS request to  ",
+  TRACE: "TRACE request to    ",
+  CONNECT: "CONNECT request to  "
+};
+var methodResponseToString = {
+  GET: "GET request from    ",
+  PUT: "PUT request from    ",
+  POST: "POST request from   ",
+  PATCH: "PATCH request from  ",
+  DELETE: "DELETE request from ",
+  HEAD: "HEAD request from   ",
+  OPTIONS: "OPTIONS request from",
+  TRACE: "TRACE request from  ",
+  CONNECT: "CONNECT request from"
+};
+function generateApi(config, apiConfig, getHeaders) {
+  return async function apiCall(name, payload = {}) {
+    if (!apiConfig[name]) {
+      return Promise.reject(
+        new Error(`Endpoint ${name.toString()} is not defined in the \`generateApi\` function.`, {
+          cause: "generateApi.apiConfig.missingEndpoint"
+        })
+      );
+    }
+    const baseURL = config.baseUrl;
+    const path = `${apiConfig[name].path}${payload.path?.length ? `/${payload.path.join("/")}` : ""}`;
+    const query = constructQuery(payload.query);
+    const url = `${baseURL}${path}${query ? `?${query}` : ""}`;
+    const requestHeaders = {
+      "Content-Type": apiConfig[name].bodyWithFormData ? "multipart/form-data" : "application/json",
+      ...getHeaders ? Object.entries(getHeaders).reduce((previousValue, [key, value]) => {
+        if (apiConfig[name].includeHeaders?.includes(key)) {
+          previousValue[key] = value?.();
+        }
+        return previousValue;
+      }, {}) : {}
+    };
+    const body = payload.body;
+    const bodyAsFormData = new FormData();
+    if (body && apiConfig[name].bodyWithFormData) {
+      Object.entries(body).forEach(([key, value]) => {
+        bodyAsFormData.append(key, value);
+      });
+    }
+    const readyBody = JSON.stringify((apiConfig[name].bodyWithFormData ? bodyAsFormData : body) ?? {});
+    log.log(`Initiate ${methodInitiateToString[apiConfig[name].method]} ${url} - ${name.toString()}`, {
+      color: "magenta"
+    });
+    return await call(
+      () => fetch(url, {
+        method: apiConfig[name].method,
+        body: apiConfig[name].method !== "GET" ? readyBody : void 0,
+        headers: requestHeaders
+      })
+    );
+    async function call(callAction) {
+      const response = await callAction();
+      const responseJson = await response.json();
+      log.log(`Response ${methodResponseToString[apiConfig[name].method]} ${url} - ${name.toString()}`, {
+        color: "blue"
+      });
+      return {
+        data: responseJson,
+        headers: response.headers,
+        statusCode: response.status,
+        statusText: response.statusText,
+        url: response.url,
+        ok: response.ok,
+        redirected: response.redirected
+      };
+    }
+  };
+}
+
+// src/utils/eventEmitter.ts
+function generateEventEmitter() {
+  const eventEmitter = new EventTarget();
+  return {
+    emit: (name, data) => {
+      const event = new CustomEvent(name.toString(), {
+        detail: data
+      });
+      eventEmitter.dispatchEvent(event);
+    },
+    listen: (name, callback) => {
+      const listener = (event) => {
+        callback?.(event.detail);
+      };
+      eventEmitter.addEventListener(name.toString(), listener);
+      return () => {
+        eventEmitter.removeEventListener(name.toString(), listener);
+      };
+    }
+  };
+}
+
 // src/components/PageHolder.tsx
 var import_react15 = require("react");
 var import_react_better_core14 = require("react-better-core");
@@ -4723,7 +4907,7 @@ InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(function PhoneN
       return;
     }
     setDropdownValue(country.phoneNumberExtension);
-    setInputFieldValue(newValue.slice(country?.phoneNumberExtension.length + 1));
+    setInputFieldValue(newValue.slice(country.phoneNumberExtension.length + 1));
   }, [value]);
   const readyId = id ?? internalId;
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, children: [
@@ -5035,7 +5219,7 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
         const readyHour = readyHours.includes(hours2) ? hours2 : findClosestNumber(readyHours, hours2);
         const readyMinute = readyMinutes.includes(minutes2) ? minutes2 : findClosestNumber(readyMinutes, minutes2);
         const finalHour = minHours && readyHour < minHours ? minHours : maxHours && readyHour > maxHours ? maxHours : readyHour;
-        const finalMinute = minHours !== void 0 && minMinutes !== void 0 && finalHour === minHours && readyMinute < minMinutes ? minMinutes : maxHours !== void 0 && maxMinutes !== void 0 && finalHour === maxHours && readyMinute > maxMinutes ? maxMinutes : readyMinute;
+        const finalMinute = !!minHours && !!minMinutes && finalHour === minHours && readyMinute < minMinutes ? minMinutes : !!maxHours && !!maxMinutes && finalHour === maxHours && readyMinute > maxMinutes ? maxMinutes : readyMinute;
         const newValue = `${finalHour.toString().padStart(2, "0")}:${finalMinute.toString().padStart(2, "0")}`;
         inputFieldProps.onChangeValue?.(newValue);
       }
@@ -7926,6 +8110,8 @@ var SideMenu_default = SideMenu2;
   eventStopPropagation,
   filterHover,
   formatPhoneNumber,
+  generateApi,
+  generateEventEmitter,
   generateLocalStorage,
   generateRandomString,
   getBrowser,