react-better-html 1.1.232 → 1.1.233

package/dist/index.mjs

@@ -3001,7 +3001,8 @@ function BetterHtmlProviderInternal({ config, plugins, children }) {
           tabsWithDots,
           setTabsWithDots
         }
-      }
+      },
+      devMode: config?.devMode
     }),
     [config, alerts, sideMenuIsCollapsed, sideMenuIsOpenMobile, plugins, tabGroups, tabsWithDots]
   );
@@ -3040,7 +3041,8 @@ function BetterHtmlProvider({ config, ...props }) {
       app: config?.app,
       sideMenuIsCollapsed: config?.sideMenuIsCollapsed,
       sideMenuIsOpenMobile: config?.sideMenuIsOpenMobile,
-      components: config?.components
+      components: config?.components,
+      devMode: config?.devMode
     }),
     [config]
   );
@@ -3200,6 +3202,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() {
@@ -3266,6 +3274,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
 import { forwardRef as forwardRef8, memo as memo13 } from "react";
 import { useTheme as useTheme14 } from "react-better-core";
@@ -7891,6 +8073,8 @@ export {
   eventStopPropagation,
   filterHover,
   formatPhoneNumber,
+  generateApi,
+  generateEventEmitter,
   generateLocalStorage,
   generateRandomString,
   getBrowser,