@tenorlab/react-dashboard 1.4.2 → 1.4.4

package/dist/core.es.js

@@ -85,60 +85,60 @@ const w = [
    * @returns the update item
    */
   incrementOrDecrementValue: (e, t) => {
-    const i = e.value.match(/([\d.]+)/), a = i ? parseFloat(i[1]) : 0, s = e.value.match(/([^\d.]+)/), n = s ? s[1] : e.defaultUnit, r = b(n, e.step) * t, c = `${Math.max(a + r, e.minValue).toFixed(1)}${n}`;
+    const a = e.value.match(/([\d.]+)/), i = a ? parseFloat(a[1]) : 0, s = e.value.match(/([^\d.]+)/), n = s ? s[1] : e.defaultUnit, r = b(n, e.step) * t, c = `${Math.max(i + r, e.minValue).toFixed(1)}${n}`;
     return {
       ...e,
       value: c
     };
   }
-}, f = (e, t) => `dashboards_${t}_${e}`, v = async (e, t, i, a) => {
+}, f = (e, t) => `dashboards_${t}_${e}`, v = async (e, t, a, i) => {
   const s = localStorage.getItem(f(e, t));
   if (s)
     try {
       const n = JSON.parse(s);
-      return n.length < 1 ? [a] : (n.forEach((r) => {
-        r.dashboardId || (r.dashboardId = "default"), r.dashboardName || (r.dashboardName = `Dashboard ${r.dashboardId}`), r.responsiveGrid = r.responsiveGrid ?? !1, (r.widgets || []).length < 1 && (r.widgets = a.widgets);
+      return n.length < 1 ? [i] : (n.forEach((r) => {
+        r.dashboardId || (r.dashboardId = "default"), r.dashboardName || (r.dashboardName = `Dashboard ${r.dashboardId}`), r.responsiveGrid = r.responsiveGrid ?? !1, (r.widgets || []).length < 1 && (r.widgets = i.widgets);
         const c = (r.cssSettings || []).filter(
-          (o) => a.cssSettings.some((d) => d.key === o.key)
+          (o) => i.cssSettings.some((d) => d.key === o.key)
         );
         if (c.length < 1)
-          r.cssSettings = [...a.cssSettings];
+          r.cssSettings = [...i.cssSettings];
         else {
           c.forEach((d) => {
             d.value = (d.value || "").replace(/NaN/g, "");
-            const l = a.cssSettings.find(
+            const l = i.cssSettings.find(
               (g) => g.key === d.key
             );
             l && (Object.keys(l).forEach((g) => {
               g in d || (d[g] = l[g]);
             }), d.step = l.step, d.minValue = l.minValue, d.defaultValue = l.defaultValue, d.defaultUnit = l.defaultUnit, /\d+/g.test(d.value) === !1 && (d.value = l ? l.value : "1.0rem"));
           });
-          const o = a.cssSettings.filter((d) => !c.some(
+          const o = i.cssSettings.filter((d) => !c.some(
             (l) => l.key === d.key
           ));
           r.cssSettings = [...c, ...o];
         }
         r.widgets = r.widgets.filter(
-          (o) => o.includes("WidgetContainer") || i.has(o)
+          (o) => o.includes("WidgetContainer") || a.has(o)
         ), r.childWidgetsConfig = r.childWidgetsConfig.filter(
-          (o) => i.has(o.widgetKey)
+          (o) => a.has(o.widgetKey)
         ), r.zoomScale ? r.zoomScale < 0.7 && (r.zoomScale = 0.7) : r.zoomScale = 1;
       }), n);
     } catch (n) {
       console.warn("Error parsing saved dashboard config:", n);
     }
-  return [a];
-}, C = async (e, t, i, a) => {
-  i.forEach((n) => {
+  return [i];
+}, C = async (e, t, a, i) => {
+  a.forEach((n) => {
     if (n.userID = e, n.clientAppKey = t, n.responsiveGrid = n.responsiveGrid ?? !1, typeof n != "object")
       throw new Error("Invalid dashboard configuration");
     n.widgets = n.widgets.filter(
-      (r) => r.includes("WidgetContainer") || a.has(r)
+      (r) => r.includes("WidgetContainer") || i.has(r)
     ), n.childWidgetsConfig = n.childWidgetsConfig.filter(
-      (r) => a.has(r.widgetKey)
+      (r) => i.has(r.widgetKey)
     ), n.zoomScale ? n.zoomScale < 0.7 && (n.zoomScale = 0.7) : n.zoomScale = 1;
   });
-  const s = JSON.stringify(i);
+  const s = JSON.stringify(a);
   return localStorage.setItem(f(e, t), s), !0;
 }, W = {
   getSavedDashboards: v,
@@ -160,92 +160,94 @@ const w = [
   let t = Number(e || 0);
   return t < m && (t = m), t > p && (t = p), t;
 }, j = (e, t) => {
-  let i = Number(Number((V * t).toFixed(2)).toFixed(2)), a = Number((Number(e) + i).toFixed(2));
-  return D(a);
+  let a = Number(Number((V * t).toFixed(2)).toFixed(2)), i = Number((Number(e) + a).toFixed(2));
+  return D(i);
 }, N = (e) => {
   let t = {
     ...e
   };
-  return t.widgets = t.widgets.filter((i) => {
-    if (`${i}`.includes("WidgetContainer")) {
-      const a = t.childWidgetsConfig.filter(
-        (s) => s.parentWidgetKey === i
+  return t.widgets = t.widgets.filter((a) => {
+    if (`${a}`.includes("WidgetContainer")) {
+      const i = t.childWidgetsConfig.filter(
+        (s) => s.parentWidgetKey === a
       );
-      if (!a || a.length === 0)
+      if (!i || i.length === 0)
         return t.widgets = t.widgets.filter(
-          (s) => s !== i
+          (s) => s !== a
         ), !1;
     }
     return !0;
   }), t;
 }, x = (e) => {
   const t = e.widgets.filter(
-    (a) => a.includes("WidgetContainer")
-  ), i = {};
-  return t.forEach((a, s) => {
-    const n = `${a.split("_container")[0]}_container${s + 1}`;
-    i[a] = n;
-  }), e.widgets = e.widgets.map((a) => i[a] || a), e.childWidgetsConfig = e.childWidgetsConfig.map((a) => {
-    const s = a.parentWidgetKey, n = i[s];
+    (i) => i.includes("WidgetContainer")
+  ), a = {};
+  return t.forEach((i, s) => {
+    const n = `${i.split("_container")[0]}_container${s + 1}`;
+    a[i] = n;
+  }), e.widgets = e.widgets.map((i) => a[i] || i), e.childWidgetsConfig = e.childWidgetsConfig.map((i) => {
+    const s = i.parentWidgetKey, n = a[s];
     return {
-      ...a,
+      ...i,
       // If a new key exists, use it. If not, keep the original key.
       parentWidgetKey: n || s
     };
   }), e;
 }, u = (e, t) => {
-  const i = `${e}`.includes("Container"), a = i ? ["Container"] : ["Widget"], s = t?.name || e, n = t?.description || (i ? "Container" : "Unknown");
+  const a = `${e}`.includes("Container"), i = a ? ["Container"] : ["Widget"], s = t?.name || e, n = t?.description || (a ? "Container" : "Unknown");
   return {
     name: s,
     description: n,
-    categories: a,
+    categories: i,
     noDuplicatedWidgets: !0,
     icon: void 0,
     externalDependencies: []
   };
-}, I = (e, t, i) => t[e] || u(e, i), M = (e, t) => t.get(e)?.meta || u(e), k = (e, t, i) => {
-  const a = i || u(e);
+}, I = (e, t, a) => t[e] || u(e, a), M = (e, t) => t.get(e)?.meta || u(e), k = (e, t, a) => {
+  const i = a || u(e);
   return [
     e,
     {
       key: e,
-      title: a.name,
+      title: i.name,
       isContainer: `${e}`.includes("Container"),
-      meta: a,
+      isRemote: !1,
+      meta: i,
       component: t
     }
   ];
-}, h = (e, t, i) => {
-  const a = i || u(e);
+}, h = (e, t, a, i) => {
+  const s = i || u(e);
   return [
     e,
     {
       key: e,
-      title: a.name,
+      title: s.name,
       isContainer: !1,
-      meta: a,
+      isRemote: a,
+      meta: s,
       loader: t
     }
   ];
 }, F = (e) => {
   const t = e.match(/\/widget-([a-zA-Z0-9-]+)\/index\.ts$/);
   if (t && t[1]) {
-    const i = t[1], a = i.split("-"), s = `Widget${a.map((r) => r.charAt(0).toUpperCase() + r.slice(1)).join("")}`, n = a.map((r) => r.charAt(0).toUpperCase() + r.slice(1)).join(" ");
+    const a = t[1], i = a.split("-"), s = `Widget${i.map((r) => r.charAt(0).toUpperCase() + r.slice(1)).join("")}`, n = i.map((r) => r.charAt(0).toUpperCase() + r.slice(1)).join(" ");
     return {
       key: s,
       title: n,
-      folder: i
+      folder: a
     };
   }
   return null;
-}, $ = (e, t, i, a) => {
-  const s = `${t}/widget-${i}/meta.ts`, n = e[s];
+}, $ = (e, t, a, i) => {
+  const s = `${t}/widget-${a}/meta.ts`, n = e[s];
   if (!n)
     return;
-  const r = `${a}Meta`;
+  const r = `${i}Meta`;
   return n[r] || void 0;
-}, A = async (e) => new Promise(async (t, i) => {
-  const a = [];
+}, A = async (e) => new Promise(async (t, a) => {
+  const i = [];
   try {
     const s = await (await fetch(`${e}?${Math.random()}`)).json();
     for (const n in s) {
@@ -261,32 +263,32 @@ const w = [
         // Or a logic to map a string name to a Lucide component
         externalDependencies: r.meta?.externalDependencies || []
       };
-      a.push(h(n, c, o));
+      i.push(h(n, c, !0, o));
     }
     t({
-      entries: a,
+      entries: i,
       message: "",
       details: ""
     });
   } catch (s) {
-    console.error("Remote plugin discovery failed:", s), i({
+    console.error("Remote plugin discovery failed:", s), a({
       entries: [],
       message: "Remote plugin discovery failed:",
       details: typeof s == "object" ? JSON.stringify(s) : s
     });
   }
-}), K = (e, t, i, a = !0) => {
+}), K = (e, t, a, i = !0) => {
   const s = [];
   for (const n in t) {
     const r = t[n], c = F(n);
     if (c && r) {
       const { key: o, title: d, folder: l } = c;
-      let g = $(i, e, l, o);
+      let g = $(a, e, l, o);
       if (g || (g = u(o, {
-        description: `Local ${a ? "dynamic" : "static"} widget`
-      })), a)
+        description: `Local ${i ? "dynamic" : "static"} widget`
+      })), i)
         s.push(
-          h(o, r, g)
+          h(o, r, !1, g)
         );
       else {
         const y = r.default || r;
@@ -295,13 +297,13 @@ const w = [
     }
   }
   return s;
-}, G = (e, t = "color") => {
+}, R = (e, t = "color") => {
   if (typeof window > "u") return "#FFFFFF";
-  const i = document.createElement("div");
-  Array.isArray(e) ? e.forEach((s) => i.classList.add(s)) : e.split(" ").forEach((s) => i.classList.add(s)), i.style.display = "none", document.body.appendChild(i);
-  const a = window.getComputedStyle(i)[t];
-  return document.body.removeChild(i), a;
-}, R = {
+  const a = document.createElement("div");
+  Array.isArray(e) ? e.forEach((s) => a.classList.add(s)) : e.split(" ").forEach((s) => a.classList.add(s)), a.style.display = "none", document.body.appendChild(a);
+  const i = window.getComputedStyle(a)[t];
+  return document.body.removeChild(a), i;
+}, G = {
   /**
    * @name getCssVariableValue
    * @description Return the value of a CSS custom property from the current HTML document
@@ -330,8 +332,8 @@ const w = [
    */
   restoreCssVarsFromSettings: (e) => {
     const t = document.documentElement;
-    e.forEach((i) => {
-      t.style.setProperty(i.cssProperty, i.value);
+    e.forEach((a) => {
+      t.style.setProperty(a.cssProperty, a.value);
     });
   }
 }, Z = (e, ...t) => [
@@ -347,7 +349,7 @@ export {
   h as createDynamicEntry,
   k as createStaticEntry,
   w as cssSettingsCatalog,
-  R as cssVarsUtils,
+  G as cssVarsUtils,
   E as dashboardSettingsUtils,
   x as ensureContainersSequence,
   D as ensureZoomScaleIsWithinRange,
@@ -362,6 +364,6 @@ export {
   F as parseKeyAndTitleFromFilePath,
   A as remoteWidgetDiscovery,
   N as removeEmptyContainers,
-  G as resolveColorFromClass,
+  R as resolveColorFromClass,
   P as useDashboardStorageService
 };

package/dist/react-dashboard.d.ts

@@ -97,6 +97,11 @@ export declare interface IDashboardConfig {
     _stateDescription?: string;
 }
 
+/**
+ * @name IDashboardGridProps
+ * @description Dashboard grid properties interface specific to React framework.
+ * This interface extends the base dashboard grid properties interface with optional children.
+ */
 export declare interface IDashboardGridProps extends IDashboardGridPropsBase {
     children?: ReactNode;
 }
@@ -124,9 +129,20 @@ export declare interface IDashboardStorageService {
     saveDashboards: TSaveDashboards;
 }
 
+/**
+ * @name IDashboardWidget
+ * @description A type representing a React dashboard widget element.
+ * This type is defined as a JSX.Element.
+ */
 export declare interface IDashboardWidget extends JSX.Element {
 }
 
+/**
+ * @name IDashboardWidgetProps
+ * @description Dashboard widget properties interface specific to React framework.
+ * This interface extends the base dashboard widget properties interface with additional React-specific properties.
+ * @template TExtraProps - Additional properties specific to the widget.
+ */
 export declare interface IDashboardWidgetProps<TExtraProps = any> extends IDashboardWidgetPropsBase<TExtraProps> {
     children?: ReactNode;
     onRemoveClick?: (widgetKey: TDashboardWidgetKey, parentWidgetKey?: TDashboardWidgetKey) => void;
@@ -154,6 +170,13 @@ export declare interface IDashboardWidgetPropsBase<TExtraProps = any> {
     extraProps?: TExtraProps;
 }
 
+/**
+ * @name IDynamicWidgetCatalogEntry
+ * @description Dynamic widget catalog entry interface specific to React framework.
+ * This interface extends the base dynamic widget catalog entry interface with React-specific element and component types.
+ * @template TFrameworkElementType - The React element type.
+ * @template TFrameworkComponentType - The React component type.
+ */
 export declare interface IDynamicWidgetCatalogEntry extends IDynamicWidgetCatalogEntryBase<TFrameworkElementType, TFrameworkComponentType> {
 }
 
@@ -169,6 +192,7 @@ export declare interface IDynamicWidgetCatalogEntryBase<TFrameworkElementType =
     key: TDashboardWidgetKey;
     title: string;
     isContainer?: boolean;
+    isRemote?: boolean;
     meta?: TWidgetMetaInfoBase<TFrameworkElementType>;
     component?: TFrameworkComponentType;
     loader?: TWidgetFactoryBase<TFrameworkComponentType>;
@@ -280,6 +304,13 @@ export declare type TDashboardUndoStatus = {
     _historyLength?: number;
 };
 
+/**
+ * @name TDashboardWidgetCatalog
+ * @description Dashboard widget catalog type specific to React framework.
+ * This type extends the base dashboard widget catalog type with React-specific element and component types.
+ * @template TFrameworkElementType - The React element type.
+ * @template TFrameworkComponentType - The React component type.
+ */
 export declare type TDashboardWidgetCatalog = TDashboardWidgetCatalogBase<TFrameworkElementType, TFrameworkComponentType>;
 
 export declare type TDashboardWidgetCatalogBase<TFrameworkElementType = any, TFrameworkComponentType = any> = Map<TDashboardWidgetKey, IDynamicWidgetCatalogEntryBase<TFrameworkElementType, TFrameworkComponentType>>;
@@ -306,8 +337,16 @@ declare type TDynamicWidgetLoaderProps<TExtraProps = any> = {
  */
 export declare const TextField: default_2.FC<ITextFieldProps>;
 
+/**
+ * @name TFrameworkComponentType
+ * @description A type representing a React component type.
+ */
 declare type TFrameworkComponentType = React.ComponentType<any>;
 
+/**
+ * @name TFrameworkElementType
+ * @description A type representing a React element type.
+ */
 declare type TFrameworkElementType = React.ElementType;
 
 declare type TGetSavedDashboards = (userID: number | string, clientAppKey: string, widgetCatalog: TDashboardWidgetCatalogBase, defaultDashboardConfig: IDashboardConfig) => Promise<IDashboardConfig[]>;
@@ -357,6 +396,12 @@ export declare type TWidgetCategory = 'Widget' | 'Chart' | 'Container';
 
 export declare type TWidgetDirection = 'row' | 'column';
 
+/**
+ * @name TWidgetFactory
+ * @description A type representing a widget factory function specific to React framework.
+ * This type extends the base widget factory type with React-specific component type.
+ * @template TFrameworkComponentType - The React component type.
+ */
 export declare type TWidgetFactory = TWidgetFactoryBase<TFrameworkComponentType>;
 
 /**
@@ -371,6 +416,11 @@ export declare type TWidgetFactoryBase<TFrameworkComponent = any> = () => Promis
     default: TFrameworkComponent;
 }>;
 
+/**
+ * @name TWidgetMetaInfo
+ * @description Widget meta information type specific to React framework.
+ * This type extends the base widget meta information type with React-specific element type.
+ */
 export declare type TWidgetMetaInfo = TWidgetMetaInfoBase<TFrameworkElementType | undefined>;
 
 export declare type TWidgetMetaInfoBase<TFrameworkElementType = any> = {