@mailstep/design-system 0.8.52 → 0.9.0

package/ui/Modules/Dashboard/components/Layout/components/Item/ItemContainer.js

@@ -0,0 +1,64 @@
+import { actions } from "../../../../store/reducers/widgetListReducer.js";
+import { NoWidget } from "../../../Widgets/index.js";
+import WidgetErrorBoundary from "./WidgetErrorBoundary.js";
+import DashboardItem from "./Item.js";
+import { useCallback, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import throttle from "lodash/throttle";
+import { useDispatch } from "react-redux";
+//#region packages/ui/Modules/Dashboard/components/Layout/components/Item/ItemContainer.tsx
+const SET_CONFIG_DELAY = 200;
+const ItemContainer = ({ widgetItem, widgetDefinitions, toggleOpenedConfig, isConfigOpen, onSetHeight }) => {
+	const dispatch = useDispatch();
+	const [newConfig, setConfig] = useState(widgetItem.config);
+	const widget = widgetDefinitions.find((w) => w.code === widgetItem.code);
+	const toggleConfigOpen = useCallback(() => {
+		toggleOpenedConfig(widgetItem.id);
+	}, [toggleOpenedConfig, widgetItem.id]);
+	const handleSave = useCallback((config) => dispatch(actions.setWidgetsConfig(widgetItem.id, config)), [dispatch, widgetItem.id]);
+	const handleRemove = useCallback(() => dispatch(actions.removeWidget(widgetItem.id)), [widgetItem.id, dispatch]);
+	const setConfigThrottleted = useMemo(() => throttle(setConfig, SET_CONFIG_DELAY), [setConfig]);
+	const saveConfigThrottleted = useMemo(() => throttle(handleSave, SET_CONFIG_DELAY), [handleSave]);
+	const onSave = useCallback(() => {
+		if (widgetItem.config) toggleConfigOpen();
+		handleSave(newConfig);
+	}, [
+		handleSave,
+		toggleConfigOpen,
+		newConfig,
+		widgetItem.config
+	]);
+	const onCancel = useCallback(() => {
+		toggleConfigOpen();
+		setConfig(widgetItem.config);
+	}, [
+		widgetItem.config,
+		setConfig,
+		toggleConfigOpen
+	]);
+	const handeSaveConfigProps = useCallback((props) => {
+		saveConfigThrottleted({
+			...newConfig,
+			...props
+		});
+	}, [saveConfigThrottleted, newConfig]);
+	return /* @__PURE__ */ jsx(WidgetErrorBoundary, {
+		onRemove: handleRemove,
+		children: /* @__PURE__ */ jsx(DashboardItem, {
+			id: widgetItem.layout.i,
+			widget: widget || NoWidget,
+			config: widgetItem.config,
+			newConfig,
+			onRemove: handleRemove,
+			isConfigOpen,
+			toggleConfigOpen: !isConfigOpen ? toggleConfigOpen : onCancel,
+			onSetConfig: setConfigThrottleted,
+			onSaveConfigProps: handeSaveConfigProps,
+			onSave,
+			onCancel,
+			onSetHeight
+		})
+	});
+};
+//#endregion
+export { ItemContainer as default };

package/ui/Modules/Dashboard/components/Layout/components/Item/WidgetErrorBoundary.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+type WidgetErrorBoundaryProps = {
+    children: React.ReactNode;
+    onRemove: () => void;
+};
+type WidgetErrorBoundaryState = {
+    error: Error | null;
+};
+declare class WidgetErrorBoundary extends React.Component<WidgetErrorBoundaryProps, WidgetErrorBoundaryState> {
+    constructor(props: WidgetErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): WidgetErrorBoundaryState;
+    render(): React.ReactNode;
+}
+export default WidgetErrorBoundary;

package/ui/Modules/Dashboard/components/Layout/components/Item/WidgetErrorBoundary.js

@@ -0,0 +1,28 @@
+import styles_default from "../../../../styles.js";
+import Text from "../../../Text/Text.js";
+import ComponentContext from "../../../../context/ComponentContext.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Layout/components/Item/WidgetErrorBoundary.tsx
+var WidgetErrorBoundary = class extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = { error: null };
+	}
+	static getDerivedStateFromError(error) {
+		return { error };
+	}
+	render() {
+		if (this.state.error) return /* @__PURE__ */ jsxs(styles_default.WidgetError, { children: [
+			/* @__PURE__ */ jsx(styles_default.WidgetErrorTitle, { children: "ERROR: Something went wrong." }),
+			/* @__PURE__ */ jsx(styles_default.WidgetErrorMessage, { children: this.state.error?.message }),
+			/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ComponentContext.Consumer, { children: ({ Button }) => /* @__PURE__ */ jsx(Button, {
+				onClick: this.props.onRemove,
+				children: /* @__PURE__ */ jsx(Text, { code: "buttons.removeWidget" })
+			}) }) })
+		] });
+		return this.props.children;
+	}
+};
+//#endregion
+export { WidgetErrorBoundary as default };

package/ui/Modules/Dashboard/components/Layout/components/Item/index.d.ts

@@ -0,0 +1,2 @@
+import ItemContainer from './ItemContainer';
+export default ItemContainer;

package/ui/Modules/Dashboard/components/Layout/components/Item/index.js

@@ -0,0 +1,5 @@
+import ItemContainer from "./ItemContainer.js";
+//#region packages/ui/Modules/Dashboard/components/Layout/components/Item/index.tsx
+var Item_default = ItemContainer;
+//#endregion
+export { Item_default as default };

package/ui/Modules/Dashboard/components/Layout/components/ItemConfig/ItemConfig.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { JSX } from 'react';
+import { WidgetConfig, ConfigProps } from '../../../../types';
+interface ItemConfigProps {
+    config: WidgetConfig;
+    onRemove: () => void;
+    onSetConfig: (config: WidgetConfig) => void;
+    onSave: () => void;
+    onCancel: () => void;
+    component?: React.ComponentType<ConfigProps>;
+}
+declare const ItemConfig: ({ onCancel, config, onSetConfig, onSave, onRemove, component: ConfigComponent, }: ItemConfigProps) => JSX.Element;
+export default ItemConfig;

package/ui/Modules/Dashboard/components/Layout/components/ItemConfig/ItemConfig.js

@@ -0,0 +1,18 @@
+import ComponentContext from "../../../../context/ComponentContext.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Layout/components/ItemConfig/ItemConfig.tsx
+const DefaultConfig = () => null;
+const ItemConfig = ({ onCancel, config, onSetConfig, onSave, onRemove, component: ConfigComponent = DefaultConfig }) => {
+	const { ItemConfigControls } = React.useContext(ComponentContext);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ConfigComponent, {
+		onChange: onSetConfig,
+		config
+	}) }), /* @__PURE__ */ jsx(ItemConfigControls, {
+		onRemove,
+		onSave,
+		onCancel
+	})] });
+};
+//#endregion
+export { ItemConfig as default };

package/ui/Modules/Dashboard/components/Layout/components/ItemConfig/ItemConfigControls.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+interface ItemConfigProps {
+    onRemove: () => void;
+    onSave: () => void;
+    onCancel: () => void;
+}
+declare const ItemConfigControls: ({ onCancel, onSave, onRemove }: ItemConfigProps) => JSX.Element;
+export default ItemConfigControls;

package/ui/Modules/Dashboard/components/Layout/components/ItemConfig/ItemConfigControls.js

@@ -0,0 +1,31 @@
+import styles_default from "../../../../styles.js";
+import Text from "../../../Text/Text.js";
+import ComponentContext from "../../../../context/ComponentContext.js";
+import React from "react";
+import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Layout/components/ItemConfig/ItemConfigControls.tsx
+const ItemConfigControls = ({ onCancel, onSave, onRemove }) => {
+	const { Button } = React.useContext(ComponentContext);
+	return /* @__PURE__ */ jsxs(styles_default.WidgetConfigButtons, { children: [/* @__PURE__ */ jsx(Button, {
+		onClick: onRemove,
+		children: /* @__PURE__ */ jsx(Text, { code: "buttons.removeWidget" })
+	}), /* @__PURE__ */ jsxs(x.div, {
+		display: "flex",
+		gap: "8px",
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				onClick: onCancel,
+				appearance: "secondary",
+				children: /* @__PURE__ */ jsx(Text, { code: "buttons.cancel" })
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				onClick: onSave,
+				children: /* @__PURE__ */ jsx(Text, { code: "buttons.save" })
+			}),
+			" "
+		]
+	})] });
+};
+//#endregion
+export { ItemConfigControls as default };

package/ui/Modules/Dashboard/components/Layout/components/ItemConfig/index.d.ts

@@ -0,0 +1,2 @@
+import ItemConfig from './ItemConfig';
+export default ItemConfig;

package/ui/Modules/Dashboard/components/Layout/components/ItemConfig/index.js

@@ -0,0 +1,5 @@
+import ItemConfig from "./ItemConfig.js";
+//#region packages/ui/Modules/Dashboard/components/Layout/components/ItemConfig/index.ts
+var ItemConfig_default = ItemConfig;
+//#endregion
+export { ItemConfig_default as default };

package/ui/Modules/Dashboard/components/Layout/components/ItemHeader/ItemHeader.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+import type { JSX } from 'react';
+import { WidgetDefinition, WidgetConfig } from '../../../../types';
+type DashboardItemProps = {
+    widget: WidgetDefinition;
+    config: WidgetConfig;
+    toggleConfigOpen: () => void;
+    dragHandleClassName: string;
+    headerRef: RefObject<HTMLDivElement>;
+};
+declare const ItemHeader: ({ widget, config, toggleConfigOpen, dragHandleClassName, headerRef, }: DashboardItemProps) => JSX.Element;
+export default ItemHeader;

package/ui/Modules/Dashboard/components/Layout/components/ItemHeader/ItemHeader.js

@@ -0,0 +1,27 @@
+import styles_default from "../../../../styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import MoveSvg from "../../../../assets/move.svg";
+//#region packages/ui/Modules/Dashboard/components/Layout/components/ItemHeader/ItemHeader.tsx
+const ItemHeader = ({ widget, config, toggleConfigOpen, dragHandleClassName, headerRef }) => {
+	const name = config?.name || widget.name;
+	const widgetIcon = widget.icon || null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: headerRef,
+		children: [
+			/* @__PURE__ */ jsx(styles_default.ItemMoveWrapper, {
+				className: dragHandleClassName,
+				children: /* @__PURE__ */ jsx("img", {
+					src: MoveSvg,
+					alt: "move-icon"
+				})
+			}),
+			/* @__PURE__ */ jsx(styles_default.ItemPanelButton, {
+				onClick: toggleConfigOpen,
+				children: "⋯"
+			}),
+			name && /* @__PURE__ */ jsxs(styles_default.ItemName, { children: [widgetIcon, name] })
+		]
+	});
+};
+//#endregion
+export { ItemHeader as default };

package/ui/Modules/Dashboard/components/Layout/components/ItemHeader/index.d.ts

@@ -0,0 +1,2 @@
+import ItemHeader from './ItemHeader';
+export default ItemHeader;

package/ui/Modules/Dashboard/components/Layout/components/ItemHeader/index.js

@@ -0,0 +1,5 @@
+import ItemHeader from "./ItemHeader.js";
+//#region packages/ui/Modules/Dashboard/components/Layout/components/ItemHeader/index.tsx
+var ItemHeader_default = ItemHeader;
+//#endregion
+export { ItemHeader_default as default };

package/ui/Modules/Dashboard/components/Layout/index.d.ts

@@ -0,0 +1,2 @@
+import LayoutContainer from './LayoutContainer';
+export default LayoutContainer;

package/ui/Modules/Dashboard/components/Layout/index.js

@@ -0,0 +1,5 @@
+import LayoutContainer from "./LayoutContainer.js";
+//#region packages/ui/Modules/Dashboard/components/Layout/index.tsx
+var Layout_default = LayoutContainer;
+//#endregion
+export { Layout_default as default };

package/ui/Modules/Dashboard/components/NoData/NoData.d.ts

@@ -0,0 +1,2 @@
+declare const NoData: () => import("react/jsx-runtime").JSX.Element;
+export default NoData;

package/ui/Modules/Dashboard/components/NoData/NoData.js

@@ -0,0 +1,14 @@
+import Icon from "../../../../Elements/Icon/Icon.js";
+import styles_default from "../../styles.js";
+import Text from "../Text/Text.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/NoData/NoData.tsx
+const NoData = () => {
+	return /* @__PURE__ */ jsxs(styles_default.NoData, { children: [/* @__PURE__ */ jsx(Icon, {
+		icon: "search",
+		size: "64px"
+	}), /* @__PURE__ */ jsx(Text, { code: "widgets.noData" })] });
+};
+//#endregion
+export { NoData as default };

package/ui/Modules/Dashboard/components/NoData/index.d.ts

@@ -0,0 +1,2 @@
+import NoData from './NoData';
+export default NoData;

package/ui/Modules/Dashboard/components/NoData/index.js

@@ -0,0 +1,5 @@
+import NoData from "./NoData.js";
+//#region packages/ui/Modules/Dashboard/components/NoData/index.ts
+var NoData_default = NoData;
+//#endregion
+export { NoData_default as default };

package/ui/Modules/Dashboard/components/Picker/Picker.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+import type { WidgetDefinition } from '../../types';
+export interface PickerProps {
+    onAdd: (code: string) => void;
+    widgetDefinitions: WidgetDefinition[];
+}
+declare const DashboardPicker: ({ onAdd, widgetDefinitions }: PickerProps) => JSX.Element;
+export default DashboardPicker;

package/ui/Modules/Dashboard/components/Picker/Picker.js

@@ -0,0 +1,38 @@
+import Icon from "../../../../Elements/Icon/Icon.js";
+import styles_default from "../../styles.js";
+import Text from "../Text/Text.js";
+import DashboardPickerItem from "./components/PickerItem.js";
+import ComponentContext from "../../context/ComponentContext.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Picker/Picker.tsx
+const DashboardPicker = ({ onAdd, widgetDefinitions }) => {
+	const { Button } = React.useContext(ComponentContext);
+	const [isPickerOpen, setIsPickerOpen] = React.useState(false);
+	const onPickerOpen = React.useCallback(() => {
+		setIsPickerOpen(true);
+	}, []);
+	const onClose = React.useCallback(() => {
+		setIsPickerOpen(false);
+	}, []);
+	const handleOnAdd = React.useCallback((code) => {
+		onAdd(code);
+		onClose();
+	}, []);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+		onClick: onPickerOpen,
+		children: /* @__PURE__ */ jsx(Text, { code: "buttons.addWidget" })
+	}), isPickerOpen && /* @__PURE__ */ jsx(styles_default.PickerWrapper, { children: /* @__PURE__ */ jsxs(styles_default.Picker, { children: [/* @__PURE__ */ jsxs(styles_default.PickerHeader, { children: [/* @__PURE__ */ jsx(Text, { code: "picker.header" }), /* @__PURE__ */ jsx(styles_default.PickerClose, {
+		onClick: onClose,
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: "close",
+			size: "16px",
+			fill: "gray5"
+		})
+	})] }), /* @__PURE__ */ jsx(styles_default.PickerBody, { children: (widgetDefinitions || []).map((widget) => /* @__PURE__ */ jsx(DashboardPickerItem, {
+		widget,
+		onAdd: handleOnAdd
+	}, widget.code)) })] }) })] });
+};
+//#endregion
+export { DashboardPicker as default };

package/ui/Modules/Dashboard/components/Picker/PickerContainer.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+import type { WidgetDefinition } from '../../types';
+type PickerPropsContainer = {
+    widgetDefinitions: WidgetDefinition[];
+};
+declare const PickerContainer: ({ widgetDefinitions }: PickerPropsContainer) => JSX.Element | null;
+export default PickerContainer;

package/ui/Modules/Dashboard/components/Picker/PickerContainer.js

@@ -0,0 +1,38 @@
+import { actions } from "../../store/reducers/widgetListReducer.js";
+import ComponentContext from "../../context/ComponentContext.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { nanoid } from "nanoid";
+import { useDispatch } from "react-redux";
+//#region packages/ui/Modules/Dashboard/components/Picker/PickerContainer.tsx
+const PickerContainer = ({ widgetDefinitions }) => {
+	const { Picker } = React.useContext(ComponentContext);
+	const dispatch = useDispatch();
+	return /* @__PURE__ */ jsx(Picker, {
+		onAdd: React.useCallback((code) => {
+			const widget = widgetDefinitions.find((widget) => widget.code === code);
+			const id = nanoid();
+			const layout = {
+				w: widget?.initWidth,
+				h: widget?.initHeight,
+				x: 0,
+				y: 0,
+				i: id,
+				minW: widget?.minWidth,
+				maxW: widget?.maxWidth,
+				minH: widget?.minHeight,
+				maxH: widget?.maxHeight,
+				moved: false,
+				resizeHandles: void 0,
+				static: false,
+				isDraggable: true,
+				isResizable: true,
+				isBounded: false
+			};
+			dispatch(actions.addWidget(code, id, layout, null));
+		}, [dispatch, widgetDefinitions]),
+		widgetDefinitions
+	});
+};
+//#endregion
+export { PickerContainer as default };

package/ui/Modules/Dashboard/components/Picker/components/PickerItem.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+import type { WidgetDefinition } from '../../../types';
+interface DashboardPickerItemProps {
+    widget: WidgetDefinition;
+    onAdd: (code: string) => void;
+}
+declare const DashboardPickerItem: ({ widget, onAdd }: DashboardPickerItemProps) => JSX.Element;
+export default DashboardPickerItem;

package/ui/Modules/Dashboard/components/Picker/components/PickerItem.js

@@ -0,0 +1,25 @@
+import styles_default from "../../../styles.js";
+import Text from "../../Text/Text.js";
+import ComponentContext from "../../../context/ComponentContext.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Picker/components/PickerItem.tsx
+const DashboardPickerItem = ({ widget, onAdd }) => {
+	const { Button } = React.useContext(ComponentContext);
+	const onAddWidget = React.useCallback(() => onAdd(widget.code), [onAdd, widget.code]);
+	return /* @__PURE__ */ jsxs(styles_default.PickerItem, { children: [
+		/* @__PURE__ */ jsx("img", {
+			src: widget.preview,
+			width: "50",
+			height: "50",
+			alt: widget.name
+		}),
+		/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: widget.name }), /* @__PURE__ */ jsx("p", { children: widget.description })] }),
+		/* @__PURE__ */ jsx(Button, {
+			onClick: onAddWidget,
+			children: /* @__PURE__ */ jsx(Text, { code: "buttons.addWidget" })
+		})
+	] });
+};
+//#endregion
+export { DashboardPickerItem as default };

package/ui/Modules/Dashboard/components/Picker/index.d.ts

@@ -0,0 +1,2 @@
+import PickerContainer from './PickerContainer';
+export default PickerContainer;

package/ui/Modules/Dashboard/components/Picker/index.js

@@ -0,0 +1,5 @@
+import PickerContainer from "./PickerContainer.js";
+//#region packages/ui/Modules/Dashboard/components/Picker/index.ts
+var Picker_default = PickerContainer;
+//#endregion
+export { Picker_default as default };

package/ui/Modules/Dashboard/components/Text/Text.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+interface TextProps {
+    code: string;
+}
+declare const Text: ({ code }: TextProps) => JSX.Element;
+export declare const useText: (code: string) => string;
+export default Text;

package/ui/Modules/Dashboard/components/Text/Text.js

@@ -0,0 +1,14 @@
+import LangContext from "../../context/LangContext.js";
+import translations from "../../locale/index.js";
+import React from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Text/Text.tsx
+const Text = ({ code }) => {
+	const text = translations[React.useContext(LangContext)]?.[code];
+	return /* @__PURE__ */ jsx(Fragment, { children: text || code });
+};
+const useText = (code) => {
+	return translations[React.useContext(LangContext)]?.[code] || code;
+};
+//#endregion
+export { Text as default, useText };

package/ui/Modules/Dashboard/components/Text/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Text';

package/ui/Modules/Dashboard/components/Text/index.js

@@ -0,0 +1,2 @@
+import Text from "./Text.js";
+export { Text as default };

package/ui/Modules/Dashboard/components/Widgets/BarChart/BarChart.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { JSX } from 'react';
+import { BarDatum } from '@nivo/bar';
+import { WidgetComponentProps } from '../../../types';
+interface BarDataRow extends BarDatum {
+    id: string | number;
+    value: number;
+    label: string;
+}
+export type Props = WidgetComponentProps<BarDataRow[]> & {
+    title?: string;
+    subtitle?: string;
+    description?: string;
+    text?: string;
+    hasLegend?: boolean;
+    legendRowMaxLength?: number;
+};
+declare const _default: React.MemoExoticComponent<({ data, isLoading, error, title, subtitle, description, text, hasLegend, legendRowMaxLength, innerRef, ...barProps }: Props) => JSX.Element>;
+export default _default;

package/ui/Modules/Dashboard/components/Widgets/BarChart/BarChart.js

@@ -0,0 +1,52 @@
+import styles_default from "../../../styles.js";
+import LoadingBoundary from "../../../Hoc/LoadingBoundary.js";
+import NoData_default from "../../NoData/index.js";
+import { createLegendData } from "../utils/legends.js";
+import { createWidgetColors } from "../utils/generic.js";
+import { Description, OtherText, Subtitle, Title, Wrapper, WrapperText, margin } from "./styles.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ResponsiveBar } from "@nivo/bar";
+//#region packages/ui/Modules/Dashboard/components/Widgets/BarChart/BarChart.tsx
+const defaultLegendRowMaxLength = 4;
+const Bar = ({ data = [], isLoading, error, title, subtitle, description, text, hasLegend = true, legendRowMaxLength = defaultLegendRowMaxLength, innerRef, ...barProps }) => {
+	const colors = createWidgetColors("barChartColor", 5);
+	const hasText = title || subtitle || description || text;
+	const legends = React.useMemo(() => {
+		if (!hasLegend) return void 0;
+		return createLegendData(data, colors, legendRowMaxLength, { translateY: 70 });
+	}, [
+		hasLegend,
+		data,
+		colors
+	]);
+	return /* @__PURE__ */ jsx(LoadingBoundary, {
+		isLoading,
+		error,
+		children: /* @__PURE__ */ jsx(styles_default.ItemContent, {
+			ref: innerRef,
+			children: /* @__PURE__ */ jsxs(Wrapper, { children: [
+				hasText && /* @__PURE__ */ jsxs(WrapperText, { children: [
+					/* @__PURE__ */ jsx(Title, { children: title }),
+					/* @__PURE__ */ jsx(Subtitle, { children: subtitle }),
+					/* @__PURE__ */ jsx(Description, { children: description }),
+					/* @__PURE__ */ jsx(OtherText, { children: text })
+				] }),
+				(!data || data.length === 0) && /* @__PURE__ */ jsx(NoData_default, {}),
+				data && data.length > 0 && /* @__PURE__ */ jsx(ResponsiveBar, {
+					data,
+					isInteractive: true,
+					animate: true,
+					margin,
+					colors,
+					colorBy: "indexValue",
+					legends,
+					...barProps
+				})
+			] })
+		})
+	});
+};
+var BarChart_default = React.memo(Bar);
+//#endregion
+export { BarChart_default as default };

package/ui/Modules/Dashboard/components/Widgets/BarChart/Config.d.ts

@@ -0,0 +1 @@
+export declare const Config: ({ onChange, config, sources }: import("../../..").MultiConfigProps) => import("react").JSX.Element;

package/ui/Modules/Dashboard/components/Widgets/BarChart/Config.js

@@ -0,0 +1,5 @@
+import { MultiConfig } from "../../Config/MultiConfig.js";
+//#region packages/ui/Modules/Dashboard/components/Widgets/BarChart/Config.tsx
+const Config = MultiConfig;
+//#endregion
+export { Config };

package/ui/Modules/Dashboard/components/Widgets/BarChart/index.d.ts

@@ -0,0 +1,4 @@
+import BarChart from './BarChart';
+export * from './BarChart';
+export * from './Config';
+export default BarChart;

package/ui/Modules/Dashboard/components/Widgets/BarChart/index.js

@@ -0,0 +1,6 @@
+import BarChart_default$1 from "./BarChart.js";
+import { Config } from "./Config.js";
+//#region packages/ui/Modules/Dashboard/components/Widgets/BarChart/index.tsx
+var BarChart_default = BarChart_default$1;
+//#endregion
+export { Config, BarChart_default as default };

package/ui/Modules/Dashboard/components/Widgets/BarChart/styles.d.ts

@@ -0,0 +1,12 @@
+export declare const margin: {
+    top: number;
+    bottom: number;
+    right: number;
+    left: number;
+};
+export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Subtitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Description: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const OtherText: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperText: import("styled-components").StyledComponent<"div", any, {}, never>;

package/ui/Modules/Dashboard/components/Widgets/BarChart/styles.js

@@ -0,0 +1,39 @@
+import styled from "styled-components";
+//#region packages/ui/Modules/Dashboard/components/Widgets/BarChart/styles.ts
+const margin = {
+	top: 20,
+	bottom: 120,
+	right: 20,
+	left: 100
+};
+const Title = styled.div`
+  font-size: 30px;
+  color: #333;
+  margin-bottom: 35px;
+`;
+const Subtitle = styled.div`
+  font-size: 20px;
+  color: #999;
+  margin-bottom: 5px;
+`;
+const Description = styled.div`
+  font-size: 22px;
+  color: #333;
+  margin-bottom: 15px;
+`;
+const OtherText = styled.div`
+  font-size: 15px;
+  color: #aaa;
+`;
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+`;
+const WrapperText = styled.div`
+  margin-right: 20px;
+  padding-left: 30px;
+  padding-top: 30px;
+`;
+//#endregion
+export { Description, OtherText, Subtitle, Title, Wrapper, WrapperText, margin };

package/ui/Modules/Dashboard/components/Widgets/ColorBox/ColorBox.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { WidgetComponentProps } from '../../../types';
+/**
+ * This is only example of widget
+ */
+declare const ColorBox: ({ config, innerRef }: WidgetComponentProps) => React.ReactElement;
+export default ColorBox;