@tenorlab/react-dashboard 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/dist/components/DashboardGrid.d.ts +0 -2
- package/dist/components/DashboardWidgetBase.d.ts +0 -4
- package/dist/components/DynamicWidgetLoader.d.ts +0 -23
- package/dist/components/WidgetContainer.d.ts +0 -4
- package/dist/components/WidgetsCatalogFlyout.d.ts +0 -14
- package/dist/components/dashboard-primitives/Buttons.d.ts +0 -2
- package/dist/components/dashboard-primitives/DraggablePanel.d.ts +0 -10
- package/dist/components/dashboard-primitives/ListItem.d.ts +0 -14
- package/dist/components/dashboard-primitives/Stack.d.ts +0 -9
- package/dist/components/dashboard-primitives/TextField.d.ts +0 -6
- package/dist/components/dashboard-primitives/color-utils.d.ts +0 -12
- package/dist/components/dashboard-primitives/css-vars-utils.d.ts +0 -6
- package/dist/components/dashboard-primitives/icons/index.d.ts +0 -29
- package/dist/components/dashboard-primitives/index.d.ts +0 -12
- package/dist/components/dashboard-primitives/interfaces.d.ts +0 -46
- package/dist/components/dashboard-primitives/parse-container-title.d.ts +0 -2
- package/dist/components/dashboard-primitives/use-distinct-css-classes.d.ts +0 -1
- package/dist/components/dashboard-settings/dashboard-settings-utils.d.ts +0 -4
- package/dist/components/dashboard-settings/dashboard-settings.d.ts +0 -2
- package/dist/components/dashboard-settings/index.d.ts +0 -2
- package/dist/components/index.d.ts +0 -11
- package/dist/components/interfaces/core-react.interfaces.d.ts +0 -21
- package/dist/components/interfaces/core.base.d.ts +0 -80
- package/dist/components/interfaces/core.interfaces.d.ts +0 -39
- package/dist/components/interfaces/core.utils.d.ts +0 -51
- package/dist/components/interfaces/index.d.ts +0 -5
- package/dist/components/interfaces/storage-service.interfaces.d.ts +0 -8
- package/dist/components/use-dashboard-storage-service.d.ts +0 -2
- package/dist/components/use-dashboard-store.d.ts +0 -33
- package/dist/components/use-dashboard-undo-service.d.ts +0 -13
- package/dist/index.d.ts +0 -2
- package/dist/react-dashboard.css +0 -1
- package/dist/react-dashboard.es.js +0 -3209
package/package.json
CHANGED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import type { IChildWidgetConfigEntry, TDashboardWidgetCatalog, TDashboardWidgetKey } from './interfaces';
|
|
2
|
-
type TDynamicWidgetLoaderProps = {
|
|
3
|
-
index: number;
|
|
4
|
-
maxIndex: number;
|
|
5
|
-
widgetKey: TDashboardWidgetKey;
|
|
6
|
-
parentWidgetKey?: TDashboardWidgetKey;
|
|
7
|
-
targetContainerKey?: TDashboardWidgetKey;
|
|
8
|
-
childWidgetsConfig?: IChildWidgetConfigEntry[];
|
|
9
|
-
widgetCatalog: TDashboardWidgetCatalog;
|
|
10
|
-
isEditing: boolean;
|
|
11
|
-
onRemoveClick?: (widgetKey: TDashboardWidgetKey, parentWidgetKey?: TDashboardWidgetKey) => void;
|
|
12
|
-
onMoveClick?: (direction: -1 | 1, widgetKey: TDashboardWidgetKey, parentWidgetKey?: TDashboardWidgetKey) => void;
|
|
13
|
-
selectContainer?: (containerKey: TDashboardWidgetKey) => void;
|
|
14
|
-
};
|
|
15
|
-
/**
|
|
16
|
-
* Component to safely load and render dynamic widgets.
|
|
17
|
-
* This ensures the widget component (and its hooks) is called consistently.
|
|
18
|
-
* @param {object} props
|
|
19
|
-
* @param {string} props.widgetKey
|
|
20
|
-
* @param {(key: string) => Promise<void>} props.onRemoveClick
|
|
21
|
-
*/
|
|
22
|
-
export declare function DynamicWidgetLoader({ index, maxIndex, widgetKey, parentWidgetKey, targetContainerKey, childWidgetsConfig, widgetCatalog, isEditing, onRemoveClick, onMoveClick, selectContainer, }: TDynamicWidgetLoaderProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
-
export {};
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import type { IDashboardWidgetProps, IDashboardWidget } from './interfaces/core-react.interfaces';
|
|
2
|
-
export declare function WidgetContainerColumn(props: IDashboardWidgetProps): IDashboardWidget;
|
|
3
|
-
export declare function WidgetContainerLarge(props: IDashboardWidgetProps): IDashboardWidget;
|
|
4
|
-
export declare function WidgetContainerRow(props: IDashboardWidgetProps): IDashboardWidget;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import type { IDashboardConfig, IDashboardSettingEntry, TDashboardUndoStatus, TDashboardWidgetCatalog, TDashboardWidgetKey } from './interfaces/';
|
|
2
|
-
export type TWidgetsCatalogFlyoutProps = {
|
|
3
|
-
targetContainerKey?: TDashboardWidgetKey;
|
|
4
|
-
widgetsCatalog: TDashboardWidgetCatalog;
|
|
5
|
-
currentDashboardConfig: IDashboardConfig;
|
|
6
|
-
undoStatus: TDashboardUndoStatus;
|
|
7
|
-
addWidget: (widgetKey: TDashboardWidgetKey, parentWidgetKey?: TDashboardWidgetKey) => any;
|
|
8
|
-
addContainer: (widgetKey: TDashboardWidgetKey) => any;
|
|
9
|
-
onSettingItemsUpdated: (items: IDashboardSettingEntry[]) => any;
|
|
10
|
-
onResetToDefaultDashboardClick: () => any;
|
|
11
|
-
onUndoOrRedo: (operation: 'Undo' | 'Redo') => any;
|
|
12
|
-
onDoneClick: () => any;
|
|
13
|
-
};
|
|
14
|
-
export declare function WidgetsCatalogFlyout({ targetContainerKey, widgetsCatalog, currentDashboardConfig, undoStatus, addWidget, addContainer, onSettingItemsUpdated, onResetToDefaultDashboardClick, onUndoOrRedo, onDoneClick, }: TWidgetsCatalogFlyoutProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { CSSProperties } from 'react';
|
|
2
|
-
type DraggablePanelProps = {
|
|
3
|
-
testId?: string;
|
|
4
|
-
className: string;
|
|
5
|
-
style?: CSSProperties;
|
|
6
|
-
onDraggingChange?: (isDragging: boolean) => void;
|
|
7
|
-
children: React.ReactNode;
|
|
8
|
-
};
|
|
9
|
-
export declare const DraggablePanel: import("react").ForwardRefExoticComponent<DraggablePanelProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
10
|
-
export {};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import { type TStackProps } from './Stack';
|
|
3
|
-
export declare const ListItem: import("react").ForwardRefExoticComponent<TStackProps & {
|
|
4
|
-
innerClass?: string;
|
|
5
|
-
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
6
|
-
type TListItemChildProps = {
|
|
7
|
-
testId?: string;
|
|
8
|
-
className?: string;
|
|
9
|
-
children?: ReactNode;
|
|
10
|
-
};
|
|
11
|
-
export declare const ListItemLeftChild: import("react").ForwardRefExoticComponent<TListItemChildProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
12
|
-
export declare const ListItemMiddleChild: import("react").ForwardRefExoticComponent<TListItemChildProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
13
|
-
export declare const ListItemRightChild: import("react").ForwardRefExoticComponent<TListItemChildProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
14
|
-
export {};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { CSSProperties } from 'react';
|
|
2
|
-
export type TStackProps = {
|
|
3
|
-
testId?: string;
|
|
4
|
-
classNames?: string;
|
|
5
|
-
direction?: 'row' | 'column';
|
|
6
|
-
style?: CSSProperties;
|
|
7
|
-
children: React.ReactNode;
|
|
8
|
-
};
|
|
9
|
-
export declare function Stack(props: TStackProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
export declare const resolveColorFromClass: (classNames: string | string[], property?: "color" | "backgroundColor") => string;
|
|
2
|
-
export declare const resolvedColors: {
|
|
3
|
-
primary: string;
|
|
4
|
-
secondary: string;
|
|
5
|
-
success: string;
|
|
6
|
-
danger: string;
|
|
7
|
-
warning: string;
|
|
8
|
-
info: string;
|
|
9
|
-
disabled: string;
|
|
10
|
-
neutral: string;
|
|
11
|
-
body: string;
|
|
12
|
-
};
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { IDashboardSettingEntry } from '../interfaces';
|
|
2
|
-
export declare const cssVarsUtils: {
|
|
3
|
-
getCssVariableValue: (cssPropertyName: string) => string | null;
|
|
4
|
-
setCssVariableValue: (cssPropertyName: string, value: string) => void;
|
|
5
|
-
restoreCssVarsFromSettings: (settings: IDashboardSettingEntry[]) => void;
|
|
6
|
-
};
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
export declare function SvgBaseWrapper({ children, className, }: {
|
|
2
|
-
children: React.ReactNode;
|
|
3
|
-
className?: string;
|
|
4
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
5
|
-
type TIconProps = {
|
|
6
|
-
className?: string;
|
|
7
|
-
};
|
|
8
|
-
export declare function AddIcon({ className }: TIconProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
export declare function DeleteIcon({ className }: TIconProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
export declare function EditIcon({ className }: TIconProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
-
export declare function GridIcon({ className }: TIconProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
-
export declare function MonitorIcon({ className }: TIconProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
-
export declare function MonitorSmartphoneIcon({ className }: TIconProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
-
export declare function MoveLeftIcon({ className }: TIconProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
-
export declare function MoveRightIcon({ className }: TIconProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
-
export declare function SettingsIcon({ className }: TIconProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
-
export declare function TabletSmartphoneIcon({ className }: TIconProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
-
export declare function XCircleIcon({ className }: TIconProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
-
export declare function ZoomInIcon({ className }: TIconProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
-
export declare function ZoomOutIcon({ className }: TIconProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
-
export declare function TimerResetIcon({ className }: TIconProps): import("react/jsx-runtime").JSX.Element;
|
|
22
|
-
export declare function UndoIcon({ className }: TIconProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
-
export declare function RedoIcon({ className }: TIconProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
-
export declare function HandIcon({ className }: TIconProps): import("react/jsx-runtime").JSX.Element;
|
|
25
|
-
export declare function HandGrabIcon({ className }: TIconProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
-
export declare function CrosshairIcon({ className }: TIconProps): import("react/jsx-runtime").JSX.Element;
|
|
27
|
-
export declare function TargetIcon({ className }: TIconProps): import("react/jsx-runtime").JSX.Element;
|
|
28
|
-
export declare function CircleQuestionMark({ className }: TIconProps): import("react/jsx-runtime").JSX.Element;
|
|
29
|
-
export {};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
export * from './interfaces';
|
|
2
|
-
export * from './icons';
|
|
3
|
-
export * from './use-distinct-css-classes';
|
|
4
|
-
export * from './color-utils';
|
|
5
|
-
export * from './css-vars-utils';
|
|
6
|
-
export * from './parse-container-title';
|
|
7
|
-
export * from './TextField';
|
|
8
|
-
export * from './Buttons';
|
|
9
|
-
export * from './Stack';
|
|
10
|
-
export * from './ListItem';
|
|
11
|
-
export * from './DraggablePanel';
|
|
12
|
-
export declare const showToast: (options: any) => void;
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
export interface ITooltipProps {
|
|
2
|
-
placement: string;
|
|
3
|
-
title: string;
|
|
4
|
-
}
|
|
5
|
-
export type TButtonType = 'normal' | 'ghost';
|
|
6
|
-
export type TButtonJustifyCss = 'justify-start' | 'justify-center' | 'justify-end';
|
|
7
|
-
export interface IButtonProps {
|
|
8
|
-
disabled?: boolean;
|
|
9
|
-
className?: string;
|
|
10
|
-
tooltip?: ITooltipProps;
|
|
11
|
-
isIconButton?: boolean;
|
|
12
|
-
buttonType?: TButtonType;
|
|
13
|
-
category?: string;
|
|
14
|
-
font?: string;
|
|
15
|
-
border?: number;
|
|
16
|
-
borderHover?: number;
|
|
17
|
-
borderColor?: string;
|
|
18
|
-
px?: number;
|
|
19
|
-
py?: number;
|
|
20
|
-
justifyCss?: TButtonJustifyCss;
|
|
21
|
-
shadow?: string;
|
|
22
|
-
shadowHover?: string;
|
|
23
|
-
addCss?: string;
|
|
24
|
-
onClick: () => any;
|
|
25
|
-
children: React.ReactNode;
|
|
26
|
-
}
|
|
27
|
-
export interface ITooltipProps {
|
|
28
|
-
placement: string;
|
|
29
|
-
title: string;
|
|
30
|
-
}
|
|
31
|
-
export interface IButtonProps {
|
|
32
|
-
disabled?: boolean;
|
|
33
|
-
className?: string;
|
|
34
|
-
tooltip?: ITooltipProps;
|
|
35
|
-
}
|
|
36
|
-
type TSize = 'small' | 'medium';
|
|
37
|
-
export interface ITextFieldProps {
|
|
38
|
-
label: string;
|
|
39
|
-
size?: TSize;
|
|
40
|
-
value: string;
|
|
41
|
-
className?: string;
|
|
42
|
-
placeholder?: string;
|
|
43
|
-
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
44
|
-
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
45
|
-
}
|
|
46
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const getDistinctCssClasses: (defaultClasses: string, ...additionalClasses: string[]) => string;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
export * from './interfaces/';
|
|
2
|
-
export * from './dashboard-settings';
|
|
3
|
-
export * from './use-dashboard-store';
|
|
4
|
-
export * from './use-dashboard-storage-service';
|
|
5
|
-
export * from './use-dashboard-undo-service';
|
|
6
|
-
export * from './dashboard-primitives/';
|
|
7
|
-
export * from './DashboardGrid';
|
|
8
|
-
export * from './DynamicWidgetLoader';
|
|
9
|
-
export * from './DashboardWidgetBase';
|
|
10
|
-
export * from './WidgetContainer';
|
|
11
|
-
export * from './WidgetsCatalogFlyout';
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import type { ReactNode, JSX } from 'react';
|
|
2
|
-
import type { TDashboardWidgetKey, TWidgetMetaInfoBase, IDashboardWidgetPropsBase, IDashboardGridPropsBase, TWidgetFactoryBase, IDynamicWidgetCatalogEntryBase, TDashboardWidgetCatalogBase } from './core.base';
|
|
3
|
-
type TFrameworkComponentType = React.ComponentType<any>;
|
|
4
|
-
type TFrameworkElementType = React.ElementType;
|
|
5
|
-
export type TWidgetMetaInfo = TWidgetMetaInfoBase<TFrameworkElementType | undefined>;
|
|
6
|
-
export interface IDashboardGridProps extends IDashboardGridPropsBase {
|
|
7
|
-
children?: ReactNode;
|
|
8
|
-
}
|
|
9
|
-
export interface IDashboardWidgetProps extends IDashboardWidgetPropsBase {
|
|
10
|
-
children?: ReactNode;
|
|
11
|
-
onRemoveClick?: (widgetKey: TDashboardWidgetKey, parentWidgetKey?: TDashboardWidgetKey) => void;
|
|
12
|
-
onMoveClick?: (direction: -1 | 1, widgetKey: TDashboardWidgetKey, parentWidgetKey?: TDashboardWidgetKey) => void;
|
|
13
|
-
selectContainer?: (containerKey?: TDashboardWidgetKey) => void;
|
|
14
|
-
}
|
|
15
|
-
export interface IDashboardWidget extends JSX.Element {
|
|
16
|
-
}
|
|
17
|
-
export type TWidgetFactory = TWidgetFactoryBase<TFrameworkComponentType>;
|
|
18
|
-
export interface IDynamicWidgetCatalogEntry extends IDynamicWidgetCatalogEntryBase<TFrameworkElementType, TFrameworkComponentType> {
|
|
19
|
-
}
|
|
20
|
-
export type TDashboardWidgetCatalog = TDashboardWidgetCatalogBase<TFrameworkElementType, TFrameworkComponentType>;
|
|
21
|
-
export {};
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
export type TDashboardWidgetKey = string;
|
|
2
|
-
export type TWidgetCategory = 'Widget' | 'Chart' | 'Container';
|
|
3
|
-
export type TWidgetMetaInfoBase<TFrameworkElementType = any> = {
|
|
4
|
-
displayName: string;
|
|
5
|
-
description: string;
|
|
6
|
-
categories: TWidgetCategory[];
|
|
7
|
-
noDuplicatedWidgets?: boolean;
|
|
8
|
-
icon: TFrameworkElementType | undefined;
|
|
9
|
-
};
|
|
10
|
-
export interface IDashboardGridPropsBase {
|
|
11
|
-
isEditing: boolean;
|
|
12
|
-
zoomScale: number;
|
|
13
|
-
responsiveGrid: boolean;
|
|
14
|
-
}
|
|
15
|
-
export type TWidgetSize = 'default' | 'large' | 'xlarge';
|
|
16
|
-
export type TWidgetDirection = 'row' | 'column';
|
|
17
|
-
export interface IDashboardWidgetPropsBase {
|
|
18
|
-
index: number;
|
|
19
|
-
maxIndex: number;
|
|
20
|
-
widgetKey: TDashboardWidgetKey;
|
|
21
|
-
parentWidgetKey?: TDashboardWidgetKey;
|
|
22
|
-
isEditing: boolean;
|
|
23
|
-
highlight?: boolean;
|
|
24
|
-
testId?: string;
|
|
25
|
-
title?: string;
|
|
26
|
-
size?: TWidgetSize;
|
|
27
|
-
borderCssClasses?: string;
|
|
28
|
-
backgroundCssClasses?: string;
|
|
29
|
-
hideTitle?: boolean;
|
|
30
|
-
noShadow?: boolean;
|
|
31
|
-
noBorder?: boolean;
|
|
32
|
-
noPadding?: boolean;
|
|
33
|
-
direction?: TWidgetDirection;
|
|
34
|
-
}
|
|
35
|
-
/**
|
|
36
|
-
* 1. Define the Async Loader type
|
|
37
|
-
* Type for the function that performs the asynchronous dynamic import.
|
|
38
|
-
* It must return a promise that resolves to the module containing the widget component
|
|
39
|
-
* as its default export (or a named export if you change the loading strategy).
|
|
40
|
-
*
|
|
41
|
-
* TFrameworkComponent could be "React.ComponentType<any>"" or "VueComponent" etc
|
|
42
|
-
*/
|
|
43
|
-
export type TWidgetFactoryBase<TFrameworkComponent = any> = () => Promise<{
|
|
44
|
-
default: TFrameworkComponent;
|
|
45
|
-
}>;
|
|
46
|
-
/**
|
|
47
|
-
* 2. Define the flexible Catalog Entry
|
|
48
|
-
* Definition of a single widget or container in the catalog.
|
|
49
|
-
* It must have EITHER a direct 'component' reference OR a 'loader' function.
|
|
50
|
-
*
|
|
51
|
-
* TWidgetMetaInfo: see TWidgetMetaInfoBase
|
|
52
|
-
* TWidgetFactory: see TWidgetFactoryBase
|
|
53
|
-
* TComponent: i.e. React.ComponentType<any>
|
|
54
|
-
*/
|
|
55
|
-
/**
|
|
56
|
-
* 2. Define the flexible Catalog Entry
|
|
57
|
-
* Definition of a single widget or container in the catalog.
|
|
58
|
-
* It must have EITHER a direct 'component' reference OR a 'loader' function.
|
|
59
|
-
*
|
|
60
|
-
* TFrameworkElementType: see TWidgetMetaInfoBase
|
|
61
|
-
* TFrameworkComponentType: i.e. React.ComponentType<any> (see TWidgetFactoryBase)
|
|
62
|
-
*/
|
|
63
|
-
export interface IDynamicWidgetCatalogEntryBase<TFrameworkElementType = any, TFrameworkComponentType = any> {
|
|
64
|
-
key: TDashboardWidgetKey;
|
|
65
|
-
title: string;
|
|
66
|
-
isContainer?: boolean;
|
|
67
|
-
meta?: TWidgetMetaInfoBase<TFrameworkElementType>;
|
|
68
|
-
component?: TFrameworkComponentType;
|
|
69
|
-
loader?: TWidgetFactoryBase<TFrameworkComponentType>;
|
|
70
|
-
}
|
|
71
|
-
export type TDashboardWidgetCatalogBase<TFrameworkElementType = any, TFrameworkComponentType = any> = Map<TDashboardWidgetKey, IDynamicWidgetCatalogEntryBase<TFrameworkElementType, TFrameworkComponentType>>;
|
|
72
|
-
export type TGetDefaultWidgetMetaFromKeyOptions = {
|
|
73
|
-
title?: string;
|
|
74
|
-
description?: string;
|
|
75
|
-
};
|
|
76
|
-
export type TGetDefaultWidgetMetaFromKey = (widgetKey: TDashboardWidgetKey, options?: TGetDefaultWidgetMetaFromKeyOptions) => TWidgetMetaInfoBase<any>;
|
|
77
|
-
export type TManifestEntry = {
|
|
78
|
-
url: string;
|
|
79
|
-
meta: TWidgetMetaInfoBase;
|
|
80
|
-
};
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import type { TDashboardWidgetKey } from './core.base';
|
|
2
|
-
export interface IChildWidgetConfigEntry {
|
|
3
|
-
parentWidgetKey: TDashboardWidgetKey;
|
|
4
|
-
widgetKey: TDashboardWidgetKey;
|
|
5
|
-
}
|
|
6
|
-
export interface IDashboardSettingEntry {
|
|
7
|
-
key: string;
|
|
8
|
-
displayName: string;
|
|
9
|
-
description: string;
|
|
10
|
-
cssProperty: string;
|
|
11
|
-
step: number;
|
|
12
|
-
defaultUnit: string;
|
|
13
|
-
minValue: number;
|
|
14
|
-
defaultValue: string;
|
|
15
|
-
value: string;
|
|
16
|
-
}
|
|
17
|
-
export interface IDashboardConfig {
|
|
18
|
-
userID: number | string;
|
|
19
|
-
clientAppKey: string;
|
|
20
|
-
dashboardId: string;
|
|
21
|
-
dashboardName: string;
|
|
22
|
-
zoomScale: number;
|
|
23
|
-
responsiveGrid: boolean;
|
|
24
|
-
widgets: TDashboardWidgetKey[];
|
|
25
|
-
childWidgetsConfig: IChildWidgetConfigEntry[];
|
|
26
|
-
cssSettings: IDashboardSettingEntry[];
|
|
27
|
-
_version?: number;
|
|
28
|
-
_stateDescription?: string;
|
|
29
|
-
}
|
|
30
|
-
export type TUndoHistoryEntry = {
|
|
31
|
-
undoIndex: number;
|
|
32
|
-
config: IDashboardConfig;
|
|
33
|
-
};
|
|
34
|
-
export type TDashboardUndoStatus = {
|
|
35
|
-
isUndoDisabled: boolean;
|
|
36
|
-
isRedoDisabled: boolean;
|
|
37
|
-
_currentIndex?: number;
|
|
38
|
-
_historyLength?: number;
|
|
39
|
-
};
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import type { TDashboardWidgetKey, TWidgetMetaInfoBase, TDashboardWidgetCatalogBase, TGetDefaultWidgetMetaFromKey, TWidgetFactoryBase, IDynamicWidgetCatalogEntryBase } from './core.base';
|
|
2
|
-
import type { IDashboardConfig } from './core.interfaces';
|
|
3
|
-
export declare const blankDashboardConfig: IDashboardConfig;
|
|
4
|
-
export declare const DashboardMinZoomScale: 0.7;
|
|
5
|
-
export declare const DashboardMaxZoomScale: 1;
|
|
6
|
-
export declare const DashboardZoomStep: 0.05;
|
|
7
|
-
export declare const ensureZoomScaleIsWithinRange: (value: number) => number;
|
|
8
|
-
export declare const getNewZoomScaleWithinRange: (currentZoomScale: number, direction: -1 | 1) => number;
|
|
9
|
-
export declare const removeEmptyContainers: (dashboardConfig: IDashboardConfig) => IDashboardConfig;
|
|
10
|
-
/**
|
|
11
|
-
* @name ensureContainersSequence
|
|
12
|
-
* @description
|
|
13
|
-
* Ensures that the container widgets are numbered sequentially in the dashboardConfig, but the original order is preserved.
|
|
14
|
-
*/
|
|
15
|
-
export declare const ensureContainersSequence: (dashboardConfig: IDashboardConfig) => IDashboardConfig;
|
|
16
|
-
export declare const getDefaultWidgetMetaFromKey: TGetDefaultWidgetMetaFromKey;
|
|
17
|
-
/**
|
|
18
|
-
* @name getDefaultWidgetMetaFromMap
|
|
19
|
-
* @description Helper to get widget meta info from the catalog by key.
|
|
20
|
-
*/
|
|
21
|
-
export declare const getDefaultWidgetMetaFromMap: <TFrameworkElementType = any>(widgetKey: TDashboardWidgetKey, defaultWidgetMetaMap: Record<TDashboardWidgetKey, TWidgetMetaInfoBase<TFrameworkElementType>>, options?: {
|
|
22
|
-
title?: string;
|
|
23
|
-
description?: string;
|
|
24
|
-
}) => TWidgetMetaInfoBase<TFrameworkElementType>;
|
|
25
|
-
/**
|
|
26
|
-
* @name getWidgetMetaFromCatalog
|
|
27
|
-
* @description Helper to get widget meta info from the catalog by key.
|
|
28
|
-
*/
|
|
29
|
-
export declare const getWidgetMetaFromCatalog: <TFrameworkElementType = any, TFrameworkComponentType = any>(widgetKey: TDashboardWidgetKey, widgetsCatalog: TDashboardWidgetCatalogBase<TFrameworkElementType, TFrameworkComponentType>) => TWidgetMetaInfoBase<TFrameworkElementType>;
|
|
30
|
-
/**
|
|
31
|
-
* @name createStaticEntry
|
|
32
|
-
* Helper function to create static entries
|
|
33
|
-
* This helps keep the catalog registration clean
|
|
34
|
-
*/
|
|
35
|
-
export declare const createStaticEntry: <TFrameworkComponentType = any>(key: string, component: TFrameworkComponentType) => [string, IDynamicWidgetCatalogEntryBase];
|
|
36
|
-
/**
|
|
37
|
-
* @name createDynamicEntry
|
|
38
|
-
* Helper function to create dynamic entries
|
|
39
|
-
* This helps keep the catalog registration clean
|
|
40
|
-
*/
|
|
41
|
-
export declare const createDynamicEntry: (key: string, loader: TWidgetFactoryBase, meta: TWidgetMetaInfoBase) => [string, IDynamicWidgetCatalogEntryBase];
|
|
42
|
-
export declare const parseKeyAndTitleFromFilePath: (path: string) => {
|
|
43
|
-
key: TDashboardWidgetKey;
|
|
44
|
-
title: string;
|
|
45
|
-
folder: string;
|
|
46
|
-
} | null;
|
|
47
|
-
export declare const remoteWidgetDiscovery: (manifestUrl: string) => Promise<{
|
|
48
|
-
entries: [string, IDynamicWidgetCatalogEntryBase][];
|
|
49
|
-
message: string;
|
|
50
|
-
details: string;
|
|
51
|
-
}>;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { TDashboardWidgetCatalogBase } from './core.base';
|
|
2
|
-
import type { IDashboardConfig } from './core.interfaces';
|
|
3
|
-
export type TGetSavedDashboards = (userID: number | string, clientAppKey: string, widgetCatalog: TDashboardWidgetCatalogBase, defaultDashboardConfig: IDashboardConfig) => Promise<IDashboardConfig[]>;
|
|
4
|
-
export type TSaveDashboards = (userID: number | string, clientAppKey: string, dashboardConfigs: IDashboardConfig[], widgetCatalog: TDashboardWidgetCatalogBase) => Promise<boolean>;
|
|
5
|
-
export interface IDashboardStorageService {
|
|
6
|
-
getSavedDashboards: TGetSavedDashboards;
|
|
7
|
-
saveDashboards: TSaveDashboards;
|
|
8
|
-
}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import type { IDashboardConfig, TDashboardWidgetKey } from './interfaces';
|
|
2
|
-
type TAddWidgetResponse = {
|
|
3
|
-
success: boolean;
|
|
4
|
-
message?: string;
|
|
5
|
-
updatedDashboardConfig: IDashboardConfig;
|
|
6
|
-
allUpdatedDashboardConfigs: IDashboardConfig[];
|
|
7
|
-
};
|
|
8
|
-
type TRemoveWidgetResponse = TAddWidgetResponse;
|
|
9
|
-
type TDashboardSlice = {
|
|
10
|
-
isLoading: boolean;
|
|
11
|
-
isEditing: boolean;
|
|
12
|
-
allDashboardConfigs: IDashboardConfig[];
|
|
13
|
-
currentDashboardConfig: IDashboardConfig;
|
|
14
|
-
targetContainerKey?: TDashboardWidgetKey | undefined;
|
|
15
|
-
getNextContainerKey: (containerWidgetKey: TDashboardWidgetKey) => TDashboardWidgetKey;
|
|
16
|
-
setIsLoading: (value: boolean) => boolean;
|
|
17
|
-
setIsEditing: (value: boolean) => boolean;
|
|
18
|
-
setTargetContainerKey: (value: TDashboardWidgetKey | undefined) => TDashboardWidgetKey | undefined;
|
|
19
|
-
setAllDashboardConfigs: (value: IDashboardConfig[]) => IDashboardConfig[];
|
|
20
|
-
setCurrentDashboardConfig: (value: IDashboardConfig) => IDashboardConfig[];
|
|
21
|
-
addDashboardConfig: (value: IDashboardConfig) => IDashboardConfig[];
|
|
22
|
-
deleteDashboardConfigById: (value: string) => IDashboardConfig[];
|
|
23
|
-
selectDashboardById: (dashboardId: string) => IDashboardConfig | undefined;
|
|
24
|
-
addWidget: (params: {
|
|
25
|
-
widgetKey: TDashboardWidgetKey;
|
|
26
|
-
parentWidgetKey?: TDashboardWidgetKey;
|
|
27
|
-
noDuplicatedWidgets?: boolean;
|
|
28
|
-
}) => TAddWidgetResponse;
|
|
29
|
-
removeWidget: (widgetKey: TDashboardWidgetKey, parentWidgetKey?: TDashboardWidgetKey) => TRemoveWidgetResponse;
|
|
30
|
-
moveWidget: (direction: -1 | 1, widgetKey: TDashboardWidgetKey, parentWidgetKey?: TDashboardWidgetKey) => TRemoveWidgetResponse;
|
|
31
|
-
};
|
|
32
|
-
export declare const useDashboardStore: import("zustand").UseBoundStore<import("zustand").StoreApi<TDashboardSlice>>;
|
|
33
|
-
export {};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import type { IDashboardConfig, TUndoHistoryEntry, TDashboardUndoStatus } from './interfaces';
|
|
2
|
-
export declare const useDashboardUndoService: () => {
|
|
3
|
-
initializeHistoryForDashboard: (initialConfig: IDashboardConfig) => void;
|
|
4
|
-
resetAllHistory: () => void;
|
|
5
|
-
addUndoEntry: (newConfig: IDashboardConfig) => void;
|
|
6
|
-
removeUndoHistoryForDashboard: (dashboardId: string) => void;
|
|
7
|
-
undo: (currentDashboardId: string) => void;
|
|
8
|
-
redo: (currentDashboardId: string) => void;
|
|
9
|
-
getUndoStatus: (currentDashboardId: string) => TDashboardUndoStatus;
|
|
10
|
-
undoHistory: Record<string, TUndoHistoryEntry[]>;
|
|
11
|
-
historyIndex: Record<string, number>;
|
|
12
|
-
};
|
|
13
|
-
export type TDashboardUndoService = ReturnType<typeof useDashboardUndoService>;
|
package/dist/index.d.ts
DELETED
package/dist/react-dashboard.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
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: solid 1px lightgreen}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))}}
|