@tenorlab/react-dashboard 1.0.1 → 1.0.2

package/README.md

@@ -22,7 +22,12 @@ pnpm add @tenorlab/react-dashboard
 ```
 
 ## Basic Usage
-TODO
+Import the styles in your entry tsx file (usually main.tsx):
+```typescript
+import '@tenorlab/react-dashboard/styles.css'
+```
+
+TODO:
 
 
 ## Features

package/dist/components/DashboardGrid.d.ts

@@ -1,2 +1,2 @@
-import { IDashboardGridProps } from './interfaces';
+import type { IDashboardGridProps } from './interfaces/core-react.interfaces';
 export declare const DashboardGrid: import("react").ForwardRefExoticComponent<IDashboardGridProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/DashboardWidgetBase.d.ts

@@ -1,4 +1,4 @@
-import { IDashboardWidgetProps } from './interfaces';
+import type { IDashboardWidgetProps } from './interfaces/core-react.interfaces';
 export declare const DashboardWidgetBase: (props: IDashboardWidgetProps & {
     ref?: React.ForwardedRef<HTMLDivElement>;
 }) => React.ReactElement | null;

package/dist/components/WidgetContainer.d.ts

@@ -1,4 +1,4 @@
-import { IDashboardWidgetProps, IDashboardWidget } from './interfaces';
+import type { IDashboardWidgetProps, IDashboardWidget } from './interfaces/core-react.interfaces';
 export declare function WidgetContainerColumn(props: IDashboardWidgetProps): IDashboardWidget;
 export declare function WidgetContainerLarge(props: IDashboardWidgetProps): IDashboardWidget;
 export declare function WidgetContainerRow(props: IDashboardWidgetProps): IDashboardWidget;

package/dist/components/WidgetsCatalogFlyout.d.ts

@@ -1,4 +1,4 @@
-import { IDashboardConfig, IDashboardSettingEntry, TDashboardUndoStatus, TDashboardWidgetCatalog, TDashboardWidgetKey } from './interfaces/';
+import type { IDashboardConfig, IDashboardSettingEntry, TDashboardUndoStatus, TDashboardWidgetCatalog, TDashboardWidgetKey } from './interfaces/';
 export type TWidgetsCatalogFlyoutProps = {
     targetContainerKey?: TDashboardWidgetKey;
     widgetsCatalog: TDashboardWidgetCatalog;

package/dist/components/dashboard-primitives/Buttons.d.ts

@@ -1,2 +1,2 @@
-import { IButtonProps } from './interfaces';
+import type { IButtonProps } from './interfaces';
 export declare function Button(props: IButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/dashboard-primitives/ListItem.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { TStackProps } from './Stack';
+import { type TStackProps } from './Stack';
 export declare const ListItem: import("react").ForwardRefExoticComponent<TStackProps & {
     innerClass?: string;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/dashboard-primitives/TextField.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ITextFieldProps } from './interfaces';
+import type { ITextFieldProps } from './interfaces';
 /**
  * A reusable, styled TextField component built with Tailwind CSS.
  */

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { IDashboardSettingEntry } from '../interfaces';
+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 +1,2 @@
-import { IDashboardSettingEntry } from '../interfaces';
+import type { IDashboardSettingEntry } from '../interfaces';
 export declare const cssSettingsCatalog: IDashboardSettingEntry[];

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

@@ -1,6 +1,8 @@
-import type { TDashboardWidgetKey, TWidgetMetaInfoBase, IDashboardWidgetPropsBase, IDashboardGridPropsBase, TWidgetFactoryBase, IDynamicWidgetCatalogEntryBase } from './core.base';
-import type { ReactNode, ElementType, JSX } from 'react';
-export type TWidgetMetaInfo = TWidgetMetaInfoBase<ElementType | undefined>;
+import type { ReactNode, JSX } from 'react';
+import type { TDashboardWidgetKey, TWidgetMetaInfoBase, IDashboardWidgetPropsBase, IDashboardGridPropsBase, TWidgetFactoryBase, IDynamicWidgetCatalogEntryBase, TDashboardWidgetCatalogBase } from './core.base';
+type TFrameworkComponentType = React.ComponentType<any>;
+type TFrameworkElementType = React.ElementType;
+export type TWidgetMetaInfo = TWidgetMetaInfoBase<TFrameworkElementType | undefined>;
 export interface IDashboardGridProps extends IDashboardGridPropsBase {
     children?: ReactNode;
 }
@@ -12,9 +14,8 @@ export interface IDashboardWidgetProps extends IDashboardWidgetPropsBase {
 }
 export interface IDashboardWidget extends JSX.Element {
 }
-type TFrameworkComponentType = React.ComponentType<any>;
 export type TWidgetFactory = TWidgetFactoryBase<TFrameworkComponentType>;
-export interface IDynamicWidgetCatalogEntry extends IDynamicWidgetCatalogEntryBase<TWidgetMetaInfo, TWidgetFactory, TFrameworkComponentType> {
+export interface IDynamicWidgetCatalogEntry extends IDynamicWidgetCatalogEntryBase<TFrameworkElementType, TFrameworkComponentType> {
 }
-export type TDashboardWidgetCatalog = Map<TDashboardWidgetKey, IDynamicWidgetCatalogEntry>;
+export type TDashboardWidgetCatalog = TDashboardWidgetCatalogBase<TFrameworkElementType, TFrameworkComponentType>;
 export {};

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

@@ -1,11 +1,11 @@
 export type TDashboardWidgetKey = string;
 export type TWidgetCategory = 'Widget' | 'Chart' | 'Container';
-export type TWidgetMetaInfoBase<T> = {
+export type TWidgetMetaInfoBase<TFrameworkElementType = any> = {
     displayName: string;
     description: string;
     categories: TWidgetCategory[];
     noDuplicatedWidgets?: boolean;
-    icon: T | undefined;
+    icon: TFrameworkElementType | undefined;
 };
 export interface IDashboardGridPropsBase {
     isEditing: boolean;
@@ -38,10 +38,10 @@ export interface IDashboardWidgetPropsBase {
  * 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).
  *
- * T could be "React.ComponentType<any>"" or "VueComponent" etc
+ * TFrameworkComponent could be "React.ComponentType<any>"" or "VueComponent" etc
  */
-export type TWidgetFactoryBase<T> = () => Promise<{
-    default: T;
+export type TWidgetFactoryBase<TFrameworkComponent = any> = () => Promise<{
+    default: TFrameworkComponent;
 }>;
 /**
  * 2. Define the flexible Catalog Entry
@@ -52,11 +52,25 @@ export type TWidgetFactoryBase<T> = () => Promise<{
  * TWidgetFactory: see TWidgetFactoryBase
  * TComponent: i.e. React.ComponentType<any>
  */
-export interface IDynamicWidgetCatalogEntryBase<TMeta, TFactory, TComponent> {
+/**
+ * 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, TFrameworkComponentType> {
     key: TDashboardWidgetKey;
     title: string;
     isContainer?: boolean;
-    meta?: TMeta;
-    component?: TComponent;
-    loader?: TFactory;
+    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>;

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

@@ -1,4 +1,3 @@
-export * from './core-react.interfaces';
 import type { TDashboardWidgetKey } from './core.base';
 export interface IChildWidgetConfigEntry {
     parentWidgetKey: TDashboardWidgetKey;

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

@@ -1,24 +1,25 @@
-import type { TDashboardWidgetKey } from './core.base';
-import type { IDashboardConfig, TWidgetMetaInfo, TDashboardWidgetCatalog } from './core.interfaces';
+import type { TDashboardWidgetKey, TWidgetMetaInfoBase, TDashboardWidgetCatalogBase, TGetDefaultWidgetMetaFromKey } 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 getDefaultWidgetMetaFromKey: TGetDefaultWidgetMetaFromKey;
 /**
  * @name getDefaultWidgetMetaFromMap
  * @description Helper to get widget meta info from the catalog by key.
  */
-export declare const getDefaultWidgetMetaFromMap: (widgetKey: TDashboardWidgetKey, defaultWidgetMetaMap: Record<TDashboardWidgetKey, TWidgetMetaInfo>, options?: {
+export declare const getDefaultWidgetMetaFromMap: <TFrameworkElementType = any>(widgetKey: TDashboardWidgetKey, defaultWidgetMetaMap: Record<TDashboardWidgetKey, TWidgetMetaInfoBase<TFrameworkElementType>>, options?: {
     title?: string;
     description?: string;
-}) => TWidgetMetaInfo;
+}) => TWidgetMetaInfoBase<TFrameworkElementType>;
 /**
  * @name getWidgetMetaFromCatalog
  * @description Helper to get widget meta info from the catalog by key.
  */
-export declare const getWidgetMetaFromCatalog: (widgetKey: TDashboardWidgetKey, widgetsCatalog: TDashboardWidgetCatalog) => TWidgetMetaInfo;
+export declare const getWidgetMetaFromCatalog: <TFrameworkElementType = any, TFrameworkComponentType = any>(widgetKey: TDashboardWidgetKey, widgetsCatalog: TDashboardWidgetCatalogBase<TFrameworkElementType, TFrameworkComponentType>) => TWidgetMetaInfoBase<TFrameworkElementType>;
 export declare const removeEmptyContainers: (dashboardConfig: IDashboardConfig) => IDashboardConfig;
 /**
  * @name ensureContainersSequence

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

@@ -1,6 +1,7 @@
-import type { TDashboardWidgetCatalog, IDashboardConfig } from './core.interfaces';
-export type TGetSavedDashboards = (userID: number | string, clientAppKey: string, widgetCatalog: TDashboardWidgetCatalog, defaultDashboardConfig: IDashboardConfig) => Promise<IDashboardConfig[]>;
-export type TSaveDashboards = (userID: number | string, clientAppKey: string, dashboardConfigs: IDashboardConfig[], widgetCatalog: TDashboardWidgetCatalog) => Promise<boolean>;
+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 +1,2 @@
-import { IDashboardStorageService } from './interfaces';
+import type { IDashboardStorageService } from './interfaces';
 export declare const useDashboardStorageService: () => IDashboardStorageService;

package/dist/components/use-dashboard-store.d.ts

@@ -1,4 +1,4 @@
-import { IDashboardConfig, TDashboardWidgetKey } from './interfaces';
+import type { IDashboardConfig, TDashboardWidgetKey } from './interfaces';
 type TAddWidgetResponse = {
     success: boolean;
     message?: string;

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

@@ -1,4 +1,4 @@
-import { IDashboardConfig, TUndoHistoryEntry, TDashboardUndoStatus } from './interfaces';
+import type { IDashboardConfig, TUndoHistoryEntry, TDashboardUndoStatus } from './interfaces';
 export declare const useDashboardUndoService: () => {
     initializeHistoryForDashboard: (initialConfig: IDashboardConfig) => void;
     resetAllHistory: () => void;

package/dist/react-dashboard.es.js

@@ -3131,6 +3131,7 @@ export {
   Nt as dashboardSettingsUtils,
   Mt as ensureContainersSequence,
   st as ensureZoomScaleIsWithinRange,
+  lt as getDefaultWidgetMetaFromKey,
   Nn as getDefaultWidgetMetaFromMap,
   Z as getDistinctCssClasses,
   Tn as getNewZoomScaleWithinRange,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenorlab/react-dashboard",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Foundation components for creating user-configurable dashboards in React",
   "author": "Damiano Fusco",
   "type": "module",