react-better-html 1.1.158 → 1.1.160

package/dist/index.mjs

@@ -1526,19 +1526,6 @@ import { memo as memo7 } from "react";
 import { memo as memo6, useCallback as useCallback2, useEffect as useEffect3, useMemo, useRef, useState } from "react";
 import styled6 from "styled-components";
 
-// src/plugins/react-router-dom.ts
-import { Link as RouterLink, NavLink as RouterNavLink } from "react-router-dom";
-var reactRouterDomPlugin = () => ({
-  name: "react-router-dom",
-  components: {
-    Link: RouterLink,
-    NavLink: RouterNavLink
-  },
-  initialize: () => {
-    console.log("react-router-dom plugin initialized");
-  }
-});
-
 // src/plugins/alerts.ts
 var defaultAlertsPluginOptions = {
   position: "bottom",
@@ -1559,6 +1546,39 @@ var alertsPlugin = (options) => ({
   })
 });
 
+// src/plugins/reactRouterDom.ts
+import { Link as RouterLink, NavLink as RouterNavLink } from "react-router-dom";
+var defaultReactRouterDomPluginOptions = {};
+var reactRouterDomPlugin = (options) => ({
+  name: "react-router-dom",
+  components: {
+    Link: RouterLink,
+    NavLink: RouterNavLink
+  },
+  initialize: () => {
+    console.log("react-router-dom plugin initialized");
+  },
+  getConfig: () => ({
+    ...defaultReactRouterDomPluginOptions,
+    ...options
+  })
+});
+
+// src/plugins/localStorage.ts
+var defaultLocalStoragePluginOptions = {
+  encryption: {}
+};
+var localStoragePlugin = (options) => ({
+  name: "localStorage",
+  initialize: () => {
+    console.log("localStorage plugin initialized");
+  },
+  getConfig: () => ({
+    ...defaultLocalStoragePluginOptions,
+    ...options
+  })
+});
+
 // src/components/Icon.tsx
 import { forwardRef, memo, useEffect } from "react";
 import styled from "styled-components";
@@ -3232,11 +3252,11 @@ var Divider_default = {
     })
   ),
   horizontal: memo10(
-    forwardRef5(function Divider2({ width = 1, backgroundColor, text, textColor, ...props }, ref) {
+    forwardRef5(function Divider2({ width = 1, backgroundColor, text, textFontSize, textColor, ...props }, ref) {
       const theme2 = useTheme();
       return /* @__PURE__ */ jsxs5(Div_default.row, { width: "100%", alignItems: "center", gap: text ? theme2.styles.space : void 0, ...props, ref, children: [
         /* @__PURE__ */ jsx10(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border }),
-        text && /* @__PURE__ */ jsx10(Text_default, { color: textColor ?? theme2.colors.textSecondary, children: text }),
+        text && /* @__PURE__ */ jsx10(Text_default, { fontSize: textFontSize, color: textColor ?? theme2.colors.textSecondary, children: text }),
         /* @__PURE__ */ jsx10(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border })
       ] });
     })
@@ -3547,11 +3567,8 @@ var PageHolderComponent = forwardRef7(function PageHolder({ noMaxContentWidth, c
 PageHolderComponent.center = forwardRef7(function Center({
   pageBackgroundColor,
   contentMaxWidth,
-  sideImageSrc,
-  sideImageName,
-  sideImagePosition = "right",
-  sideImageAlignment = "center",
-  sideImageFooter,
+  sideComponent,
+  sideComponentPosition = "right",
   noMaxContentWidth,
   children,
   ...props
@@ -3560,7 +3577,7 @@ PageHolderComponent.center = forwardRef7(function Center({
   const mediaQuery = useMediaQuery();
   const { app } = useBetterHtmlContextInternal();
   const breakingPoint = mediaQuery.size1000;
-  const withSideImage = (sideImageSrc || sideImageName) && !breakingPoint;
+  const withSideComponent = sideComponent && !breakingPoint;
   return /* @__PURE__ */ jsxs7(
     Div_default.row,
     {
@@ -3570,8 +3587,8 @@ PageHolderComponent.center = forwardRef7(function Center({
       justifyContent: "center",
       backgroundColor: pageBackgroundColor,
       children: [
-        sideImagePosition === "left" && withSideImage && /* @__PURE__ */ jsx12(Div_default, { width: "50%" }),
-        /* @__PURE__ */ jsx12(Div_default.column, { width: `${withSideImage ? 50 : 100}%`, alignItems: "center", children: /* @__PURE__ */ jsx12(
+        sideComponentPosition === "left" && withSideComponent && /* @__PURE__ */ jsx12(Div_default, { width: "50%" }),
+        /* @__PURE__ */ jsx12(Div_default.column, { width: `${withSideComponent ? 50 : 100}%`, alignItems: "center", children: /* @__PURE__ */ jsx12(
           Div_default.box,
           {
             width: `calc(100% - ${theme2.styles.space}px * 2)`,
@@ -3583,32 +3600,17 @@ PageHolderComponent.center = forwardRef7(function Center({
             children
           }
         ) }),
-        sideImagePosition === "right" && withSideImage && /* @__PURE__ */ jsx12(Div_default, { width: "50%" }),
-        withSideImage && /* @__PURE__ */ jsxs7(
+        sideComponentPosition === "right" && withSideComponent && /* @__PURE__ */ jsx12(Div_default, { width: "50%" }),
+        withSideComponent && /* @__PURE__ */ jsx12(
           Div_default,
           {
             position: "fixed",
             width: "50%",
             height: "100svh",
             top: 0,
-            left: sideImagePosition === "left" ? 0 : "auto",
-            right: sideImagePosition === "right" ? 0 : "auto",
-            children: [
-              /* @__PURE__ */ jsx12(
-                Div_default.row,
-                {
-                  position: "absolute",
-                  width: "100%",
-                  height: "100%",
-                  top: 0,
-                  left: 0,
-                  justifyContent: sideImageAlignment === "left" ? "flex-start" : sideImageAlignment === "right" ? "flex-end" : "center",
-                  overflow: "hidden",
-                  children: /* @__PURE__ */ jsx12(Image_default, { name: sideImageName, height: "100%", src: sideImageSrc })
-                }
-              ),
-              /* @__PURE__ */ jsx12(Div_default, { position: "absolute", width: "100%", bottom: theme2.styles.space, children: sideImageFooter })
-            ]
+            left: sideComponentPosition === "left" ? 0 : "auto",
+            right: sideComponentPosition === "right" ? 0 : "auto",
+            children: sideComponent
           }
         )
       ]
@@ -5339,6 +5341,62 @@ var countries = [
   }
 ];
 
+// src/utils/functions.ts
+import CryptoJS from "crypto-js";
+
+// src/utils/variableFunctions.ts
+var checkBetterHtmlContextValue = (value, functionsName) => {
+  if (value === void 0) {
+    throw new Error(
+      `\`${functionsName}()\` must be used within a \`<BetterHtmlProvider>\`. Make sure to add one at the root of your component tree.`
+    );
+  }
+  return value !== void 0;
+};
+var loaderControls = {
+  startLoading: (loaderName) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.startLoading")) return;
+    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
+      ...oldValue,
+      [loaderName.toString()]: true
+    }));
+  },
+  stopLoading: (loaderName) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.stopLoading")) return;
+    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
+      ...oldValue,
+      [loaderName.toString()]: false
+    }));
+  }
+};
+var alertControls = {
+  createAlert: (alert) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.createAlert"))
+      return void 0;
+    const readyAlert = {
+      id: crypto.randomUUID(),
+      ...alert
+    };
+    externalBetterHtmlContextValue.setAlerts((oldValue) => [...oldValue, readyAlert]);
+    return readyAlert;
+  },
+  removeAlert: (alertId) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.removeAlert")) return;
+    externalBetterHtmlContextValue.setAlerts((oldValue) => oldValue.filter((alert) => alert.id !== alertId));
+  }
+};
+var colorThemeControls = {
+  toggleTheme: (theme2) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "colorThemeControls.toggleTheme")) return;
+    const currentColorTheme = externalBetterHtmlContextValue.colorTheme;
+    const newColorTheme = theme2 ?? (currentColorTheme === "dark" ? "light" : "dark");
+    setTimeout(() => {
+      window.document.body.parentElement?.setAttribute("data-theme", newColorTheme);
+      localStorage.setItem("theme", newColorTheme);
+    }, 0.01 * 1e3);
+  }
+};
+
 // src/utils/functions.ts
 var generateRandomString = (stringLength, options) => {
   const capitals = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
@@ -5410,6 +5468,40 @@ var eventPreventStop = (event) => {
   event.preventDefault();
   event.stopPropagation();
 };
+var encryptString = (text) => {
+  if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "encryptString")) return void 0;
+  const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find((plugin) => plugin.name === "localStorage");
+  if (!localStoragePlugin2) {
+    throw new Error(
+      "`encryptString` hook requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
+    );
+  }
+  const pluginConfig = localStoragePlugin2.getConfig?.() ?? {};
+  if (!pluginConfig?.encryption?.enabled) return text;
+  const encrypted = CryptoJS.AES.encrypt(text, CryptoJS.enc.Hex.parse(pluginConfig.encryption.secretKey), {
+    iv: CryptoJS.enc.Hex.parse(pluginConfig.encryption.iv),
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.Pkcs7
+  }).toString();
+  return encrypted;
+};
+var decryptString = (text) => {
+  if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "decryptString")) return void 0;
+  const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find((plugin) => plugin.name === "localStorage");
+  if (!localStoragePlugin2) {
+    throw new Error(
+      "`decryptString` hook requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
+    );
+  }
+  const pluginConfig = localStoragePlugin2.getConfig?.() ?? {};
+  if (!pluginConfig?.encryption?.enabled) return text;
+  const decrypted = CryptoJS.AES.decrypt(text, CryptoJS.enc.Hex.parse(pluginConfig.encryption.secretKey), {
+    iv: CryptoJS.enc.Hex.parse(pluginConfig.encryption.iv),
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.Pkcs7
+  });
+  return decrypted.toString(CryptoJS.enc.Utf8);
+};
 
 // src/components/Label.tsx
 import { memo as memo15 } from "react";
@@ -7374,61 +7466,6 @@ var FormRow_default = FormRow2;
 
 // src/components/ColorThemeSwitch.tsx
 import { memo as memo21, useEffect as useEffect9 } from "react";
-
-// src/utils/variableFunctions.ts
-var checkBetterHtmlContextValue = (value, functionsName) => {
-  if (value === void 0) {
-    throw new Error(
-      `\`${functionsName}()\` must be used within a \`<BetterHtmlProvider>\`. Make sure to add one at the root of your component tree.`
-    );
-  }
-  return value !== void 0;
-};
-var loaderControls = {
-  startLoading: (loaderName) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.startLoading")) return;
-    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
-      ...oldValue,
-      [loaderName.toString()]: true
-    }));
-  },
-  stopLoading: (loaderName) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.stopLoading")) return;
-    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
-      ...oldValue,
-      [loaderName.toString()]: false
-    }));
-  }
-};
-var alertControls = {
-  createAlert: (alert) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.createAlert"))
-      return void 0;
-    const readyAlert = {
-      id: crypto.randomUUID(),
-      ...alert
-    };
-    externalBetterHtmlContextValue.setAlerts((oldValue) => [...oldValue, readyAlert]);
-    return readyAlert;
-  },
-  removeAlert: (alertId) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.removeAlert")) return;
-    externalBetterHtmlContextValue.setAlerts((oldValue) => oldValue.filter((alert) => alert.id !== alertId));
-  }
-};
-var colorThemeControls = {
-  toggleTheme: (theme2) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "colorThemeControls.toggleTheme")) return;
-    const currentColorTheme = externalBetterHtmlContextValue.colorTheme;
-    const newColorTheme = theme2 ?? (currentColorTheme === "dark" ? "light" : "dark");
-    setTimeout(() => {
-      window.document.body.parentElement?.setAttribute("data-theme", newColorTheme);
-      localStorage.setItem("theme", newColorTheme);
-    }, 0.01 * 1e3);
-  }
-};
-
-// src/components/ColorThemeSwitch.tsx
 import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 var ColorThemeSwitchComponent = function ColorThemeSwitch({
   withMoon,
@@ -9042,6 +9079,71 @@ FoldableComponent.box = forwardRef18(function Box3({ ...props }, ref) {
 var Foldable2 = memo25(FoldableComponent);
 Foldable2.box = FoldableComponent.box;
 var Foldable_default = Foldable2;
+
+// src/utils/localStorage.ts
+function generateLocalStorage() {
+  return {
+    setItem: (name, value) => {
+      if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "generateLocalStorage"))
+        return void 0;
+      const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find(
+        (plugin) => plugin.name === "localStorage"
+      );
+      if (!localStoragePlugin2) {
+        throw new Error(
+          "`generateLocalStorage` hook requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
+        );
+      }
+      const pluginConfig = localStoragePlugin2.getConfig?.() ?? {};
+      const encryptionEnabled = pluginConfig.encryption?.enabled ?? false;
+      const readyName = encryptionEnabled ? encryptString(name.toString()) : name;
+      const readyValue = encryptionEnabled ? encryptString(JSON.stringify(value)) : JSON.stringify(value);
+      if (value) localStorage.setItem(readyName.toString(), readyValue);
+      else localStorage.removeItem(readyName.toString());
+    },
+    getItem: (name) => {
+      if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "generateLocalStorage"))
+        return void 0;
+      const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find(
+        (plugin) => plugin.name === "localStorage"
+      );
+      if (!localStoragePlugin2) {
+        throw new Error(
+          "`generateLocalStorage` hook requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
+        );
+      }
+      const pluginConfig = localStoragePlugin2.getConfig?.() ?? {};
+      const encryptionEnabled = pluginConfig.encryption?.enabled ?? false;
+      const readyName = encryptionEnabled ? encryptString(name.toString()) : name;
+      const item = localStorage.getItem(readyName.toString());
+      if (item === null) return void 0;
+      try {
+        return encryptionEnabled ? JSON.parse(decryptString(item)) : JSON.parse(item);
+      } catch (error) {
+        return void 0;
+      }
+    },
+    removeItem: (name) => {
+      if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "generateLocalStorage"))
+        return void 0;
+      const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find(
+        (plugin) => plugin.name === "localStorage"
+      );
+      if (!localStoragePlugin2) {
+        throw new Error(
+          "`generateLocalStorage` hook requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
+        );
+      }
+      const pluginConfig = localStoragePlugin2.getConfig?.() ?? {};
+      const encryptionEnabled = pluginConfig.encryption?.enabled ?? false;
+      const readyName = encryptionEnabled ? encryptString(name.toString()) : name;
+      localStorage.removeItem(readyName.toString());
+    },
+    removeAllItems: () => {
+      localStorage.clear();
+    }
+  };
+}
 export {
   BetterHtmlProvider_default as BetterHtmlProvider,
   Button_default as Button,
@@ -9072,17 +9174,21 @@ export {
   countries,
   darkenColor,
   defaultAlertsPluginOptions,
+  defaultLocalStoragePluginOptions,
+  defaultReactRouterDomPluginOptions,
   desaturateColor,
   eventPreventDefault,
   eventPreventStop,
   eventStopPropagation,
   formatPhoneNumber,
+  generateLocalStorage,
   generateRandomString,
   getBrowser,
   getFormErrorObject,
   isMobileDevice,
   lightenColor,
   loaderControls,
+  localStoragePlugin,
   reactRouterDomPlugin,
   saturateColor,
   useAlertControls,