@tenorlab/react-dashboard 1.2.4 → 1.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenorlab/react-dashboard",
-  "version": "1.2.4",
+  "version": "1.2.7",
   "description": "Foundation components for creating user-configurable dashboards in React",
   "author": "Damiano Fusco",
   "type": "module",
@@ -50,6 +50,7 @@
   "main": "./dist/react-dashboard.umd.js",
   "module": "./dist/react-dashboard.es.js",
   "devDependencies": {
+    "@tenorlab/dashboard-core": "^1.0.0",
     "@types/node": "^24.10.1",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "^5.1.1",

package/dist/components/dashboard-primitives/color-utils.d.ts

@@ -1,12 +0,0 @@
-export declare const resolveColorFromClass: (classNames: string | string[], property?: "color" | "backgroundColor") => string;
-export declare const resolvedColors: {
-    primary: string;
-    secondary: string;
-    success: string;
-    danger: string;
-    warning: string;
-    info: string;
-    disabled: string;
-    neutral: string;
-    body: string;
-};

package/dist/components/dashboard-primitives/css-vars-utils.d.ts

@@ -1,6 +0,0 @@
-import type { IDashboardSettingEntry } from '../interfaces';
-export declare const cssVarsUtils: {
-    getCssVariableValue: (cssPropertyName: string) => string | null;
-    setCssVariableValue: (cssPropertyName: string, value: string) => void;
-    restoreCssVarsFromSettings: (settings: IDashboardSettingEntry[]) => void;
-};

package/dist/components/dashboard-primitives/parse-container-title.d.ts

@@ -1,2 +0,0 @@
-import type { TDashboardWidgetKey } from '../interfaces';
-export declare const parseContainerTitle: (containerWidgetKey: TDashboardWidgetKey) => string;

package/dist/components/dashboard-primitives/use-distinct-css-classes.d.ts

@@ -1 +0,0 @@
-export declare const getDistinctCssClasses: (defaultClasses: string, ...additionalClasses: string[]) => string;

package/dist/components/dashboard-settings/dashboard-settings-utils.d.ts

@@ -1,4 +0,0 @@
-import type { IDashboardSettingEntry } from '../interfaces';
-export declare const dashboardSettingsUtils: {
-    incrementOrDecrementValue: (item: IDashboardSettingEntry, direction: -1 | 1) => IDashboardSettingEntry;
-};

package/dist/components/dashboard-settings/dashboard-settings.d.ts

@@ -1,2 +0,0 @@
-import type { IDashboardSettingEntry } from '../interfaces';
-export declare const cssSettingsCatalog: IDashboardSettingEntry[];

package/dist/components/dashboard-settings/index.d.ts

@@ -1,2 +0,0 @@
-export * from './dashboard-settings';
-export * from './dashboard-settings-utils';

package/dist/components/interfaces/core.base.d.ts

@@ -1,73 +0,0 @@
-export type TDashboardWidgetKey = string;
-export type TWidgetCategory = 'Widget' | 'Chart' | 'Container';
-export type TWidgetMetaInfoBase<TFrameworkElementType = any> = {
-    name: string;
-    description: string;
-    categories: TWidgetCategory[];
-    noDuplicatedWidgets?: boolean;
-    icon: TFrameworkElementType | undefined;
-    externalDependencies: string[];
-};
-export interface IDashboardGridPropsBase {
-    isEditing: boolean;
-    zoomScale: number;
-    responsiveGrid: boolean;
-}
-export type TWidgetSize = 'default' | 'large' | 'xlarge';
-export type TWidgetDirection = 'row' | 'column';
-export interface IDashboardWidgetPropsBase<TExtraProps = any> {
-    index: number;
-    maxIndex: number;
-    widgetKey: TDashboardWidgetKey;
-    parentWidgetKey?: TDashboardWidgetKey;
-    isEditing: boolean;
-    highlight?: boolean;
-    testId?: string;
-    title?: string;
-    size?: TWidgetSize;
-    borderCssClasses?: string;
-    backgroundCssClasses?: string;
-    hideTitle?: boolean;
-    noShadow?: boolean;
-    noBorder?: boolean;
-    noPadding?: boolean;
-    direction?: TWidgetDirection;
-    extraProps?: TExtraProps;
-}
-/**
- * 1. Define the Async Loader type
- * Type for the function that performs the asynchronous dynamic import.
- * It must return a promise that resolves to the module containing the widget component
- * as its default export (or a named export if you change the loading strategy).
- *
- * TFrameworkComponent could be "React.ComponentType<any>"" or "VueComponent" etc
- */
-export type TWidgetFactoryBase<TFrameworkComponent = any> = () => Promise<{
-    default: TFrameworkComponent;
-}>;
-/**
- * 2. Define the flexible Catalog Entry
- * Definition of a single widget or container in the catalog.
- * It must have EITHER a direct 'component' reference OR a 'loader' function.
- *
- * TFrameworkElementType: see TWidgetMetaInfoBase
- * TFrameworkComponentType: i.e. React.ComponentType<any> (see TWidgetFactoryBase)
- */
-export interface IDynamicWidgetCatalogEntryBase<TFrameworkElementType = any, TFrameworkComponentType = any> {
-    key: TDashboardWidgetKey;
-    title: string;
-    isContainer?: boolean;
-    meta?: TWidgetMetaInfoBase<TFrameworkElementType>;
-    component?: TFrameworkComponentType;
-    loader?: TWidgetFactoryBase<TFrameworkComponentType>;
-}
-export type TDashboardWidgetCatalogBase<TFrameworkElementType = any, TFrameworkComponentType = any> = Map<TDashboardWidgetKey, IDynamicWidgetCatalogEntryBase<TFrameworkElementType, TFrameworkComponentType>>;
-export type TGetDefaultWidgetMetaFromKeyOptions = {
-    title?: string;
-    description?: string;
-};
-export type TGetDefaultWidgetMetaFromKey = (widgetKey: TDashboardWidgetKey, options?: TGetDefaultWidgetMetaFromKeyOptions) => TWidgetMetaInfoBase<any>;
-export type TManifestEntry = {
-    url: string;
-    meta: TWidgetMetaInfoBase;
-};

package/dist/components/interfaces/core.interfaces.d.ts

@@ -1,39 +0,0 @@
-import type { TDashboardWidgetKey } from './core.base';
-export interface IChildWidgetConfigEntry {
-    parentWidgetKey: TDashboardWidgetKey;
-    widgetKey: TDashboardWidgetKey;
-}
-export interface IDashboardSettingEntry {
-    key: string;
-    name: string;
-    description: string;
-    cssProperty: string;
-    step: number;
-    defaultUnit: string;
-    minValue: number;
-    defaultValue: string;
-    value: string;
-}
-export interface IDashboardConfig {
-    userID: number | string;
-    clientAppKey: string;
-    dashboardId: string;
-    dashboardName: string;
-    zoomScale: number;
-    responsiveGrid: boolean;
-    widgets: TDashboardWidgetKey[];
-    childWidgetsConfig: IChildWidgetConfigEntry[];
-    cssSettings: IDashboardSettingEntry[];
-    _version?: number;
-    _stateDescription?: string;
-}
-export type TUndoHistoryEntry = {
-    undoIndex: number;
-    config: IDashboardConfig;
-};
-export type TDashboardUndoStatus = {
-    isUndoDisabled: boolean;
-    isRedoDisabled: boolean;
-    _currentIndex?: number;
-    _historyLength?: number;
-};

package/dist/components/interfaces/core.utils.d.ts

@@ -1,66 +0,0 @@
-import type { TDashboardWidgetKey, TWidgetMetaInfoBase, TDashboardWidgetCatalogBase, TGetDefaultWidgetMetaFromKey, TWidgetFactoryBase, IDynamicWidgetCatalogEntryBase } from './core.base';
-import type { IDashboardConfig } from './core.interfaces';
-export declare const blankDashboardConfig: IDashboardConfig;
-export declare const DashboardMinZoomScale: 0.7;
-export declare const DashboardMaxZoomScale: 1;
-export declare const DashboardZoomStep: 0.05;
-export declare const ensureZoomScaleIsWithinRange: (value: number) => number;
-export declare const getNewZoomScaleWithinRange: (currentZoomScale: number, direction: -1 | 1) => number;
-export declare const removeEmptyContainers: (dashboardConfig: IDashboardConfig) => IDashboardConfig;
-/**
- * @name ensureContainersSequence
- * @description
- * Ensures that the container widgets are numbered sequentially in the dashboardConfig, but the original order is preserved.
- */
-export declare const ensureContainersSequence: (dashboardConfig: IDashboardConfig) => IDashboardConfig;
-export declare const getDefaultWidgetMetaFromKey: TGetDefaultWidgetMetaFromKey;
-/**
- * @name getDefaultWidgetMetaFromMap
- * @description Helper to get widget meta info from the catalog by key.
- */
-export declare const getDefaultWidgetMetaFromMap: <TFrameworkElementType = any>(widgetKey: TDashboardWidgetKey, defaultWidgetMetaMap: Record<TDashboardWidgetKey, TWidgetMetaInfoBase<TFrameworkElementType>>, options?: {
-    title?: string;
-    description?: string;
-}) => TWidgetMetaInfoBase<TFrameworkElementType>;
-/**
- * @name getWidgetMetaFromCatalog
- * @description Helper to get widget meta info from the catalog by key.
- */
-export declare const getWidgetMetaFromCatalog: <TFrameworkElementType = any, TFrameworkComponentType = any>(widgetKey: TDashboardWidgetKey, widgetsCatalog: TDashboardWidgetCatalogBase<TFrameworkElementType, TFrameworkComponentType>) => TWidgetMetaInfoBase<TFrameworkElementType>;
-/**
- * @name createStaticEntry
- * Helper function to create static entries
- * This helps keep the catalog registration clean
- */
-export declare const createStaticEntry: <TFrameworkComponentType = any>(key: string, component: TFrameworkComponentType, metaData?: TWidgetMetaInfoBase) => [string, IDynamicWidgetCatalogEntryBase];
-/**
- * @name createDynamicEntry
- * 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];
-/**
- * Enhanced helper to derive key and title from widget file paths.
- * Handles:
- * - widget-revenue-trends1 -> WidgetRevenueTrends1
- * - widget-with-extraprops -> WidgetWithExtraprops
- * - widget-revenue-trends-async -> WidgetRevenueTrendsAsync
- */
-export declare const parseKeyAndTitleFromFilePath: (path: string) => {
-    key: TDashboardWidgetKey;
-    title: string;
-    folder: string;
-} | null;
-export declare const getMetaInfoFromFile: (widgetMetaModules: Record<string, Record<string, TWidgetMetaInfoBase>>, baseSrcPath: string, folder: string, key: string) => TWidgetMetaInfoBase | undefined;
-export declare const remoteWidgetDiscovery: (manifestUrl: string) => Promise<{
-    entries: [string, IDynamicWidgetCatalogEntryBase][];
-    message: string;
-    details: string;
-}>;
-/**
- * @name localWidgetDiscovery
- * @description Scans local directories for widgets.
- * If lazy is true, it registers loaders. If false, it registers static components.
- */
-export declare const localWidgetDiscovery: (baseSrcPath: string, // e.g., "/src/async-widgets" or "/src/bundled-widgets"
-widgetModules: Record<string, any>, widgetMetaModules: Record<string, any>, lazy?: boolean) => [string, IDynamicWidgetCatalogEntryBase][];

package/dist/components/interfaces/storage-service.interfaces.d.ts

@@ -1,8 +0,0 @@
-import type { TDashboardWidgetCatalogBase } from './core.base';
-import type { IDashboardConfig } from './core.interfaces';
-export type TGetSavedDashboards = (userID: number | string, clientAppKey: string, widgetCatalog: TDashboardWidgetCatalogBase, defaultDashboardConfig: IDashboardConfig) => Promise<IDashboardConfig[]>;
-export type TSaveDashboards = (userID: number | string, clientAppKey: string, dashboardConfigs: IDashboardConfig[], widgetCatalog: TDashboardWidgetCatalogBase) => Promise<boolean>;
-export interface IDashboardStorageService {
-    getSavedDashboards: TGetSavedDashboards;
-    saveDashboards: TSaveDashboards;
-}

package/dist/components/use-dashboard-storage-service.d.ts

@@ -1,2 +0,0 @@
-import type { IDashboardStorageService } from './interfaces';
-export declare const useDashboardStorageService: () => IDashboardStorageService;

package/dist/react-dashboard.css

@@ -1 +0,0 @@
-html{--bwj-dashboard-num-columns: 3;--bwj-dashboard-gap: 1.25rem;--bwj-dashboard-transform-scale: 1;--bwj-dashboard-add-cols: 1;--bwj-widget-width: 21rem;--bwj-widget-border-radius: .33rem;--bwj-widget-inner-px: 1rem;--bwj-widget-inner-py: .75rem;--bwj-widget-header-px: var(--bwj-widget-inner-px);--bwj-widget-header-py: 1rem;--bwj-widget-title-size: .8rem;--bwj-widget-title-weight: 600;--bwj-dashboard-debug-container-flex-row: none;--bwj-dashboard-debug-container-flex-column: none;--bwj-dashboard-debug-container-grid-large-inner: none}html .dashboard-main-grid{width:100%;display:grid;grid-template-columns:repeat(var(--bwj-dashboard-num-columns, 4),minmax(var(--bwj-widget-width),1fr));gap:var(--bwj-dashboard-gap, 1.5rem);transform:scale(var(--bwj-dashboard-transform-scale, 1));transform-origin:top left}html .dashboard-main-grid.editing{row-gap:calc(var(--bwj-dashboard-gap) + .8rem)}html .dashboard-main-grid:not(.responsive-grid){max-width:min-content}html .dashboard-main-grid.responsive-grid{width:100%}html .dashboard-widget-container{--bwj-border-opacity: .5;flex:1 1 0%;width:100%}html .dashboard-widget-container .widget-container-header{display:none;position:absolute;height:1.85rem;inset:-1.85rem -1px auto;cursor:pointer;padding:0 .33rem}html .dashboard-widget-container .widget-container-header .actions-inner{transition:all .3s ease-in-out;width:100%;display:none;align-items:center;justify-content:space-between;font-size:.8rem}html .dashboard-widget-container.editing{border-top:none!important;border-bottom-left-radius:var(--bwj-widget-border-radius, .3rem);border-bottom-right-radius:var(--bwj-widget-border-radius, .3rem)}html .dashboard-widget-container.editing .widget-container-header{display:flex;border-bottom:none!important;border-top-left-radius:var(--bwj-widget-border-radius, .3rem);border-top-right-radius:var(--bwj-widget-border-radius, .3rem)}html .dashboard-widget-container.editing .widget-container-header>.actions-inner{display:flex!important}html .dashboard-widget-container.editing.highlight-container:before{content:"";position:absolute;inset:-1.85rem 0 0;box-shadow:0 2px 10px 6px oklch(var(--bwj-primary-okl) var(--bwj-primary-okc) var(--bwj-primary-okh) / .5);pointer-events:none}html .dashboard-widget{flex:1 1 0%;display:flex;flex-direction:column;position:relative;border-radius:var(--bwj-widget-border-radius, .3rem);height:100%;width:100%}html .dashboard-widget:not(.no-shadow){box-shadow:1px 2px 8px #0000001a}html .dashboard-widget.no-shadow{box-shadow:none}html .dashboard-widget.transparent-widget{background-color:transparent}html .dashboard-widget .widget-title-wrapper .widget-title{font-size:var(--bwj-widget-title-size, .75rem);font-weight:var(--bwj-widget-title-weight, 600)}html .dashboard-widget .widget-inner{flex:1 1 0%;display:flex;flex-direction:column;justify-content:space-between}html .dashboard-widget:not(.no-padding) .widget-inner{padding:var(--bwj-widget-inner-py, 1rem) var(--bwj-widget-inner-px, 1.5rem)}html .dashboard-widget.no-padding .widget-inner{padding:0}html .dashboard-widget .widget-header{padding:var(--bwj-widget-header-py, 1rem) var(--bwj-widget-header-px, 1.5rem)}html .dashboard-widget-container .widget-container-inner{padding:0;gap:var(--bwj-dashboard-gap, 1.5rem)}html .dashboard-widget-container.direction-row.widget-container-flex{grid-column:1 / -1;width:100%;outline:var(--bwj-dashboard-debug-container-flex-row)}html .dashboard-widget-container.direction-row.widget-container-flex .widget-container-inner{display:flex;flex-direction:row;height:100%}html .dashboard-widget-container.direction-row.widget-container-flex .widget-container-inner .dashboard-widget{min-width:5%;max-width:100%}html .dashboard-widget-container.direction-column.widget-container-flex .widget-container-inner{display:flex;flex-direction:column;height:100%;outline:var(--bwj-dashboard-debug-container-flex-column)}html .dashboard-widget-container.direction-column.widget-container-flex .widget-container-inner .dashboard-widget{min-width:5%;max-width:100%}html .dashboard-widget-container.large-widget.widget-container-grid .widget-container-inner{display:grid;grid-template-columns:repeat(2,minmax(var(--bwj-widget-width),1fr));outline:var(--bwj-dashboard-debug-container-grid-large-inner)}html .dashboard-main-grid.responsive-grid .dashboard-widget-container:not(.large-widget):not(.xlarge-widget),html .dashboard-main-grid.responsive-grid .dashboard-widget:not(.large-widget):not(.xlarge-widget){min-width:20%;max-width:100%}html .dashboard-main-grid:not(.responsive-grid) .dashboard-widget-container:not(.widget-container-flex):not(.large-widget):not(.xlarge-widget),html .widget-container-flex:not(.direction-row) .dashboard-main-grid:not(.responsive-grid) .dashboard-widget:not(.large-widget):not(.xlarge-widget){min-width:var(--bwj-widget-width);max-width:var(--bwj-widget-width)}html .dashboard-widget-container.large-widget,html .dashboard-widget.large-widget{grid-column:span 2}html .dashboard-main-grid:not(.responsive-grid) .dashboard-widget-container.large-widget,html .dashboard-main-grid:not(.responsive-grid) .dashboard-widget.large-widget{max-width:calc(680px + var(--bwj-dashboard-gap, 1.5rem))}html .dashboard-widget-container.xlarge-widget,html .dashboard-widget.xlarge-widget{grid-column:span 3}html .dashboard-main-grid:not(.responsive-grid) .dashboard-widget-container.xlarge-widget,html .dashboard-main-grid:not(.responsive-grid) .dashboard-widget.xlarge-widget{max-width:calc(1020px + (var(--bwj-dashboard-gap, 1.5rem) * 2))}html .widget-header .actions-inner{display:none;align-items:center;gap:.25rem}html .widget-header .actions-inner .actions-buttons-container{align-items:center;gap:.25rem}html .dashboard-widget.editing:hover .actions-inner{display:flex!important}html .dashboard-widget-container.editing .widget-container-header .actions-inner{display:flex}html .actions-buttons-container{display:flex!important;align-items:center!important;gap:.25rem!important}html .dashboard-number{font-variant-numeric:tabular-nums;font-size:2.5rem;font-weight:700}html .dashboard-number.number-xl{font-size:3.5rem}html .dashboard-number.number-lg{font-size:2.5rem}html .dashboard-number.number-base{font-size:1.5rem}html .dashboard-progress-bar{padding:0;width:100%;height:1.5rem;border-radius:.75rem}html .dashboard-progress{padding:0;height:1.25rem;border-radius:.75rem}@media(max-width:769px){html .dashboard-main-grid{display:flex;flex-direction:column;width:100%;max-width:100%!important}html .dashboard-widget-container.widget-container-flex.direction-row{max-width:100%;grid-column:auto}html .dashboard-widget-container.widget-container-flex.direction-row .widget-container-inner{display:flex;flex-wrap:wrap;flex-direction:column!important;width:100%}}@media(min-width:770px){html .dashboard-main-grid{--bwj-dashboard-num-columns: calc(2 + var(--bwj-dashboard-add-cols))}}@media(max-width:1119px){html .dashboard-widget-container.widget-container-flex.direction-row{max-width:100%;grid-column:auto}html .dashboard-widget-container.widget-container-flex.direction-row .widget-container-inner{display:flex;flex-wrap:wrap;flex-direction:column!important;width:100%}}@media(min-width:1120px){html .dashboard-main-grid{--bwj-dashboard-num-columns: calc(3 + var(--bwj-dashboard-add-cols))}}@media(min-width:1480px){html .dashboard-main-grid{--bwj-dashboard-num-columns: calc(4 + var(--bwj-dashboard-add-cols))}}@media(min-width:1840px){html .dashboard-main-grid{--bwj-dashboard-num-columns: calc(5 + var(--bwj-dashboard-add-cols))}}@media(min-width:2220px){html .dashboard-main-grid{--bwj-dashboard-num-columns: calc(6 + var(--bwj-dashboard-add-cols))}}