@tenorlab/react-dashboard 1.4.1 → 1.4.3

package/dist/core.d.ts

@@ -5,7 +5,7 @@ export declare const blankDashboardConfig: IDashboardConfig;
  * Helper function to create dynamic entries
  * This helps keep the catalog registration clean
  */
-export declare const createDynamicEntry: (key: string, loader: TWidgetFactoryBase, metaData: TWidgetMetaInfoBase) => [string, IDynamicWidgetCatalogEntryBase];
+export declare const createDynamicEntry: (key: string, loader: TWidgetFactoryBase, isRemote: boolean, metaData: TWidgetMetaInfoBase) => [string, IDynamicWidgetCatalogEntryBase];
 
 /**
  * @name createStaticEntry
@@ -14,6 +14,12 @@ export declare const createDynamicEntry: (key: string, loader: TWidgetFactoryBas
  */
 export declare const createStaticEntry: <TFrameworkComponentType = any>(key: string, component: TFrameworkComponentType, metaData?: TWidgetMetaInfoBase) => [string, IDynamicWidgetCatalogEntryBase];
 
+/**
+ * @name cssSettingsCatalog
+ * @description Catalog of available dashboard settings (array of IDashboardSettingEntry)
+ * @see IDashboardSettingEntry
+ * @remarks step should never be less than 0.1 as we do some rounding in other places ...
+ */
 export declare const cssSettingsCatalog: IDashboardSettingEntry[];
 
 /**
@@ -49,7 +55,18 @@ export declare const DashboardMaxZoomScale: 1;
 
 export declare const DashboardMinZoomScale: 0.7;
 
+/**
+ * @name dashboardSettingsUtils
+ * @description Contains utils for the dashboard custom settings
+ */
 export declare const dashboardSettingsUtils: {
+    /**
+     * @name incrementOrDecrementValue
+     * @description Increments or decrement a value based on the direction parameter
+     * @param item: an instance of IDashboardSettingEntry
+     * @param direction: -1 (for decrement) or 1 (for increment)
+     * @returns the update item
+     */
     incrementOrDecrementValue: (item: IDashboardSettingEntry, direction: -1 | 1) => IDashboardSettingEntry;
 };
 
@@ -168,6 +185,7 @@ export declare interface IDynamicWidgetCatalogEntryBase<TFrameworkElementType =
     key: TDashboardWidgetKey;
     title: string;
     isContainer?: boolean;
+    isRemote?: boolean;
     meta?: TWidgetMetaInfoBase<TFrameworkElementType>;
     component?: TFrameworkComponentType;
     loader?: TWidgetFactoryBase<TFrameworkComponentType>;
@@ -272,6 +290,13 @@ export declare type TWidgetMetaInfoBase<TFrameworkElementType = any> = {
 
 export declare type TWidgetSize = 'default' | 'large' | 'xlarge';
 
+/**
+ * @name useDashboardStorageService
+ * @description
+ * This implementation of IDashboardStorageService uses localStorage to store custom dashboard configurations.
+ * Developers can implement their own version of the dashboard storage service to store the data in a database or other way if needed.
+ * @returns An instance of IDashboardStorageService
+ */
 export declare const useDashboardStorageService: () => IDashboardStorageService;
 
 export { }

package/dist/core.es.js

@@ -77,61 +77,68 @@ const w = [
     value: "1.0rem"
   }
 ], S = ["rem", "pc", "cm", "in", "em", "vh", "vw", "%"], b = (e, t) => S.includes(e) ? t : 1, E = {
+  /**
+   * @name incrementOrDecrementValue
+   * @description Increments or decrement a value based on the direction parameter
+   * @param item: an instance of IDashboardSettingEntry
+   * @param direction: -1 (for decrement) or 1 (for increment)
+   * @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,
@@ -153,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) {
@@ -254,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;
@@ -288,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
@@ -323,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) => [
@@ -340,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,
@@ -355,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

@@ -169,6 +169,7 @@ export declare interface IDynamicWidgetCatalogEntryBase<TFrameworkElementType =
     key: TDashboardWidgetKey;
     title: string;
     isContainer?: boolean;
+    isRemote?: boolean;
     meta?: TWidgetMetaInfoBase<TFrameworkElementType>;
     component?: TFrameworkComponentType;
     loader?: TWidgetFactoryBase<TFrameworkComponentType>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenorlab/react-dashboard",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "Foundation components for creating user-configurable dashboards in React",
   "author": "Damiano Fusco",
   "type": "module",
@@ -54,7 +54,7 @@
     "zustand": "^5.0.0 || ^5.0.9"
   },
   "devDependencies": {
-    "@tenorlab/dashboard-core": "^1.0.1",
+    "@tenorlab/dashboard-core": "^1.4.2",
     "@types/node": "^24.10.1",
     "@types/react": "19.2.3",
     "@types/react-dom": "19.2.3",