@mailstep/design-system 0.8.51 → 0.9.0

package/ui/Modules/Dashboard/context/LangContext.js

@@ -0,0 +1,5 @@
+import React from "react";
+//#region packages/ui/Modules/Dashboard/context/LangContext.ts
+const LangContext = React.createContext("en");
+//#endregion
+export { LangContext as default };

package/ui/Modules/Dashboard/errors/ErrorMessage.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { JSX } from 'react';
+type Props = {
+    children: React.ReactNode;
+};
+declare const ErrorMessage: ({ children }: Props) => JSX.Element;
+export default ErrorMessage;

package/ui/Modules/Dashboard/errors/ErrorMessage.js

@@ -0,0 +1,12 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+//#region packages/ui/Modules/Dashboard/errors/ErrorMessage.tsx
+const ErrorContainer = styled.div`
+  color: red;
+  display: flex;
+  align-items: center;
+`;
+const ErrorMessage = ({ children }) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ErrorContainer, { children }) });
+//#endregion
+export { ErrorMessage as default };

package/ui/Modules/Dashboard/errors/WidgetError.d.ts

@@ -0,0 +1,5 @@
+export declare const WIDGET_ERROR_NAME = "WidgetError";
+declare class WidgetError extends Error {
+    constructor(message?: string);
+}
+export default WidgetError;

package/ui/Modules/Dashboard/errors/WidgetError.js

@@ -0,0 +1,10 @@
+//#region packages/ui/Modules/Dashboard/errors/WidgetError.ts
+const WIDGET_ERROR_NAME = "WidgetError";
+var WidgetError = class extends Error {
+	constructor(message = "Something went wrong with the Widget!") {
+		super(message);
+		this.name = WIDGET_ERROR_NAME;
+	}
+};
+//#endregion
+export { WIDGET_ERROR_NAME, WidgetError as default };

package/ui/Modules/Dashboard/hooks/usePrevious.d.ts

@@ -0,0 +1,5 @@
+/**
+ * https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+ */
+declare const usePrevious: <T extends unknown>(value: T) => T | undefined;
+export default usePrevious;

package/ui/Modules/Dashboard/hooks/usePrevious.js

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from "react";
+//#region packages/ui/Modules/Dashboard/hooks/usePrevious.ts
+/**
+* https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+*/
+const usePrevious = (value) => {
+	const ref = useRef(void 0);
+	useEffect(() => {
+		ref.current = value;
+	});
+	return ref.current;
+};
+//#endregion
+export { usePrevious as default };

package/ui/Modules/Dashboard/hooks/useRefWithCallback.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare const useRefWithCallback: () => [boolean, (node: HTMLDivElement) => void, RefObject<HTMLDivElement | null>];

package/ui/Modules/Dashboard/hooks/useRefWithCallback.js

@@ -0,0 +1,16 @@
+import { useCallback, useRef, useState } from "react";
+//#region packages/ui/Modules/Dashboard/hooks/useRefWithCallback.ts
+const useRefWithCallback = () => {
+	const ref = useRef(null);
+	const [toggle, setToggle] = useState(false);
+	return [
+		toggle,
+		useCallback((node) => {
+			ref.current = node;
+			setToggle((val) => !val);
+		}, []),
+		ref
+	];
+};
+//#endregion
+export { useRefWithCallback };

package/ui/Modules/Dashboard/hooks/useResize.d.ts

@@ -0,0 +1,6 @@
+type Size = {
+    width: number;
+    height: number;
+};
+export declare const useResize: (myRef?: React.MutableRefObject<any>) => Size;
+export {};

package/ui/Modules/Dashboard/hooks/useResize.js

@@ -0,0 +1,19 @@
+import { useCallback, useEffect, useState } from "react";
+//#region packages/ui/Modules/Dashboard/hooks/useResize.ts
+const useResize = (myRef) => {
+	const [width, setWidth] = useState(0);
+	const [height, setHeight] = useState(0);
+	const handleResize = useCallback(() => {
+		setWidth(myRef?.current.offsetWidth);
+		setHeight(myRef?.current.clientHeight);
+	}, [myRef]);
+	useEffect(() => {
+		myRef?.current && handleResize();
+	});
+	return {
+		width,
+		height
+	};
+};
+//#endregion
+export { useResize };

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

@@ -0,0 +1,7 @@
+import Dashboard from './components/Dashboard';
+import reducer from './store/reducers';
+export * from './types';
+export * from './components/Widgets';
+export * from './Hoc';
+export { reducer };
+export default Dashboard;

package/ui/Modules/Dashboard/index.js

@@ -0,0 +1,12 @@
+import { IconLabelCell_exports } from "./components/Widgets/Table/components/IconLabelCell.js";
+import { BarChart, ColorBox, HorizontalBar, NoWidget, NumberBox, PieChart, Table, TextBox } from "./components/Widgets/index.js";
+import Dashboard_default$1 from "./components/Dashboard/index.js";
+import dashboardReducer from "./store/reducers/index.js";
+import { withConfig } from "./Hoc/withConfig.js";
+import { withFetch } from "./Hoc/withFetch.js";
+import { withProps, withPropsWDefinition } from "./Hoc/withProps.js";
+import "./Hoc/index.js";
+//#region packages/ui/Modules/Dashboard/index.tsx
+var Dashboard_default = Dashboard_default$1;
+//#endregion
+export { BarChart, ColorBox, HorizontalBar, NoWidget, NumberBox, PieChart, Table, TextBox, IconLabelCell_exports as WidgetTableComponents, Dashboard_default as default, dashboardReducer as reducer, withConfig, withFetch, withProps, withPropsWDefinition };

package/ui/Modules/Dashboard/locale/cs.d.ts

@@ -0,0 +1,24 @@
+declare const _default: {
+    'buttons.addWidget': string;
+    'buttons.removeWidget': string;
+    'buttons.save': string;
+    'buttons.cancel': string;
+    'layout.nowidget': string;
+    'layout.nowidget.addWidget': string;
+    'picker.header': string;
+    'dashboard.title': string;
+    'widgets.selectAll': string;
+    'widgets.selectSource': string;
+    'widgets.selectUnit': string;
+    'widgets.source': string;
+    'widgets.none': string;
+    'widgets.noData': string;
+    'widgets.name': string;
+    'widgets.color': string;
+    'widgets.clear': string;
+    'widgets.conditions': string;
+    'widgets.allColumns': string;
+    'widgets.column': string;
+    'widgets.condition': string;
+};
+export default _default;

package/ui/Modules/Dashboard/locale/cs.js

@@ -0,0 +1,26 @@
+//#region packages/ui/Modules/Dashboard/locale/cs.ts
+var cs_default = {
+	"buttons.addWidget": "Přidat widget",
+	"buttons.removeWidget": "Odebrat",
+	"buttons.save": "Uložit",
+	"buttons.cancel": "Zrušit",
+	"layout.nowidget": "Váš dashboard je prázdný.",
+	"layout.nowidget.addWidget": "Přidat nový widget.",
+	"picker.header": "Přidat widget",
+	"dashboard.title": "Váš přehled",
+	"widgets.selectAll": "Vybrat vše",
+	"widgets.selectSource": "Vyberte zdroj",
+	"widgets.selectUnit": "Vyberte jednotku",
+	"widgets.source": "Zdroj",
+	"widgets.none": "Nevybráno",
+	"widgets.noData": "Žádná data k zobrazení",
+	"widgets.name": "Název",
+	"widgets.color": "Barva",
+	"widgets.clear": "Vyčistit",
+	"widgets.conditions": "Podmínky",
+	"widgets.allColumns": "Všechny sloupce",
+	"widgets.column": "Sloupec",
+	"widgets.condition": "Podmínka"
+};
+//#endregion
+export { cs_default as default };

package/ui/Modules/Dashboard/locale/en.d.ts

@@ -0,0 +1,24 @@
+declare const _default: {
+    'buttons.addWidget': string;
+    'buttons.removeWidget': string;
+    'buttons.save': string;
+    'buttons.cancel': string;
+    'layout.nowidget': string;
+    'layout.nowidget.addWidget': string;
+    'picker.header': string;
+    'dashboard.title': string;
+    'widgets.selectAll': string;
+    'widgets.selectSource': string;
+    'widgets.selectUnit': string;
+    'widgets.source': string;
+    'widgets.none': string;
+    'widgets.noData': string;
+    'widgets.name': string;
+    'widgets.color': string;
+    'widgets.clear': string;
+    'widgets.conditions': string;
+    'widgets.allColumns': string;
+    'widgets.column': string;
+    'widgets.condition': string;
+};
+export default _default;

package/ui/Modules/Dashboard/locale/en.js

@@ -0,0 +1,26 @@
+//#region packages/ui/Modules/Dashboard/locale/en.ts
+var en_default = {
+	"buttons.addWidget": "Add widget",
+	"buttons.removeWidget": "Remove",
+	"buttons.save": "Save",
+	"buttons.cancel": "Cancel",
+	"layout.nowidget": "Your list of widgets is empty.",
+	"layout.nowidget.addWidget": "Add a new widget.",
+	"picker.header": "Add a widget",
+	"dashboard.title": "Your dashboard",
+	"widgets.selectAll": "Select all",
+	"widgets.selectSource": "Select source",
+	"widgets.selectUnit": "Select unit",
+	"widgets.source": "Source",
+	"widgets.none": "Not selected",
+	"widgets.noData": "No data to view",
+	"widgets.name": "Name",
+	"widgets.color": "Color",
+	"widgets.clear": "Clear",
+	"widgets.conditions": "Conditions",
+	"widgets.allColumns": "All columns",
+	"widgets.column": "Column",
+	"widgets.condition": "Condition"
+};
+//#endregion
+export { en_default as default };

package/ui/Modules/Dashboard/locale/index.d.ts

@@ -0,0 +1,4 @@
+declare const translations: {
+    [key: string]: any;
+};
+export default translations;

package/ui/Modules/Dashboard/locale/index.js

@@ -0,0 +1,13 @@
+import en_default from "./en.js";
+import cs_default from "./cs.js";
+import uk_default from "./uk.js";
+import it_default from "./it.js";
+//#region packages/ui/Modules/Dashboard/locale/index.ts
+const translations = {
+	en: en_default,
+	cs: cs_default,
+	uk: uk_default,
+	it: it_default
+};
+//#endregion
+export { translations as default };

package/ui/Modules/Dashboard/locale/it.d.ts

@@ -0,0 +1,24 @@
+declare const _default: {
+    'buttons.addWidget': string;
+    'buttons.removeWidget': string;
+    'buttons.save': string;
+    'buttons.cancel': string;
+    'layout.nowidget': string;
+    'layout.nowidget.addWidget': string;
+    'picker.header': string;
+    'dashboard.title': string;
+    'widgets.selectAll': string;
+    'widgets.selectSource': string;
+    'widgets.selectUnit': string;
+    'widgets.source': string;
+    'widgets.none': string;
+    'widgets.noData': string;
+    'widgets.name': string;
+    'widgets.color': string;
+    'widgets.clear': string;
+    'widgets.conditions': string;
+    'widgets.allColumns': string;
+    'widgets.column': string;
+    'widgets.condition': string;
+};
+export default _default;

package/ui/Modules/Dashboard/locale/it.js

@@ -0,0 +1,26 @@
+//#region packages/ui/Modules/Dashboard/locale/it.ts
+var it_default = {
+	"buttons.addWidget": "Aggiungi widget",
+	"buttons.removeWidget": "Rimuovi",
+	"buttons.save": "Salva",
+	"buttons.cancel": "Annulla",
+	"layout.nowidget": "Il tuo elenco di widget è vuoto.",
+	"layout.nowidget.addWidget": "Aggiungi un nuovo widget.",
+	"picker.header": "Aggiungi un widget",
+	"dashboard.title": "La tua dashboard",
+	"widgets.selectAll": "Seleziona tutto",
+	"widgets.selectSource": "Seleziona sorgente",
+	"widgets.selectUnit": "Seleziona unità",
+	"widgets.source": "Sorgente",
+	"widgets.none": "Non selezionato",
+	"widgets.noData": "Nessun dato da visualizzare",
+	"widgets.name": "Nome",
+	"widgets.color": "Colore",
+	"widgets.clear": "Cancella",
+	"widgets.conditions": "Condizioni",
+	"widgets.allColumns": "Tutte le colonne",
+	"widgets.column": "Colonna",
+	"widgets.condition": "Condizione"
+};
+//#endregion
+export { it_default as default };

package/ui/Modules/Dashboard/locale/uk.d.ts

@@ -0,0 +1,24 @@
+declare const _default: {
+    'buttons.addWidget': string;
+    'buttons.removeWidget': string;
+    'buttons.save': string;
+    'buttons.cancel': string;
+    'layout.nowidget': string;
+    'layout.nowidget.addWidget': string;
+    'picker.header': string;
+    'dashboard.title': string;
+    'widgets.selectAll': string;
+    'widgets.selectSource': string;
+    'widgets.selectUnit': string;
+    'widgets.source': string;
+    'widgets.none': string;
+    'widgets.noData': string;
+    'widgets.name': string;
+    'widgets.color': string;
+    'widgets.clear': string;
+    'widgets.conditions': string;
+    'widgets.allColumns': string;
+    'widgets.column': string;
+    'widgets.condition': string;
+};
+export default _default;

package/ui/Modules/Dashboard/locale/uk.js

@@ -0,0 +1,26 @@
+//#region packages/ui/Modules/Dashboard/locale/uk.ts
+var uk_default = {
+	"buttons.addWidget": "Додати віджет",
+	"buttons.removeWidget": "видалити",
+	"buttons.save": "зберегти",
+	"buttons.cancel": "Скасувати",
+	"layout.nowidget": "Ваш список віджетів порожній.",
+	"layout.nowidget.addWidget": "Додайте новий віджет.",
+	"picker.header": "Додайте віджет",
+	"dashboard.title": "Ваша інформаційна панель",
+	"widgets.selectAll": "Вибрати все",
+	"widgets.selectSource": "Виберіть джерело",
+	"widgets.selectUnit": "Виберіть одиницю",
+	"widgets.source": "Джерело",
+	"widgets.none": "Не вибрано",
+	"widgets.noData": "Немає даних для перегляду",
+	"widgets.name": "Імя",
+	"widgets.color": "колір",
+	"widgets.clear": "ясно",
+	"widgets.conditions": "Умови",
+	"widgets.allColumns": "Всі колонки",
+	"widgets.column": "Колонка",
+	"widgets.condition": "Хвороба"
+};
+//#endregion
+export { uk_default as default };

package/ui/Modules/Dashboard/store/reducers/index.d.ts

@@ -0,0 +1,9 @@
+declare const dashboardReducer: import("redux").Reducer<{
+    widgets: import("./widgetListReducer").LayoutWidgetsState;
+}, {
+    [key: string]: any;
+    type: string;
+}, Partial<{
+    widgets: import("./widgetListReducer").LayoutWidgetsState | undefined;
+}>>;
+export default dashboardReducer;

package/ui/Modules/Dashboard/store/reducers/index.js

@@ -0,0 +1,6 @@
+import widgetListReducer from "./widgetListReducer.js";
+import { combineReducers } from "redux";
+//#region packages/ui/Modules/Dashboard/store/reducers/index.ts
+const dashboardReducer = combineReducers({ widgets: widgetListReducer });
+//#endregion
+export { dashboardReducer as default };

package/ui/Modules/Dashboard/store/reducers/widgetListReducer.d.ts

@@ -0,0 +1,41 @@
+import { Layout } from 'react-grid-layout';
+import { WidgetConfig, LayoutWidgetItem } from '../../types';
+export type LayoutWidgetsState = LayoutWidgetItem[] | null;
+type Action = {
+    type: string;
+    [key: string]: any;
+};
+export declare const actionTypes: {
+    initWidgets: string;
+    addWidget: string;
+    removeWidget: string;
+    setWidgetsLayout: string;
+    setWidgetsConfig: string;
+};
+declare const widgetListReducer: (state: LayoutWidgetsState | undefined, action: Action) => LayoutWidgetsState;
+export declare const actions: {
+    /**
+     * set all widgets in batch (from server etc)
+     */
+    initWidgets: (widgets: LayoutWidgetsState) => Action;
+    /**
+     * add widget to list
+     */
+    addWidget: (code: string, id: string, layout: Partial<Layout>, config: WidgetConfig | null) => Action;
+    /**
+     * remove selected widget from list
+     */
+    removeWidget: (id: string) => Action;
+    /**
+     * set matrix of selected widget
+     */
+    setWidgetsLayout: (layouts: Layout[]) => Action;
+    /**
+     * set config of selected widget
+     */
+    setWidgetsConfig: (id: string, config: WidgetConfig) => Action;
+};
+export declare const selectors: {
+    getWidgets: (state: any) => LayoutWidgetsState;
+};
+export default widgetListReducer;

package/ui/Modules/Dashboard/store/reducers/widgetListReducer.js

@@ -0,0 +1,76 @@
+//#region packages/ui/Modules/Dashboard/store/reducers/widgetListReducer.ts
+const initialState = null;
+const actionTypes = {
+	initWidgets: "@Dashboard/WIDGETS_INIT",
+	addWidget: "@Dashboard/WIDGETS_ADD",
+	removeWidget: "@Dashboard/WIDGETS_REMOVE",
+	setWidgetsLayout: "@Dashboard/WIDGETS_SET_LAYOUT",
+	setWidgetsConfig: "@Dashboard/WIDGETS_SET_CONFIG"
+};
+const widgetListReducer = (state = initialState, action) => {
+	switch (action.type) {
+		/**
+		* set full state of widget
+		*/
+		case actionTypes.initWidgets: return action.payload;
+		/**
+		* add widget to list
+		*/
+		case actionTypes.addWidget: return [...state || [], { ...action.payload }];
+		/**
+		* remove widget by ID from list
+		*/
+		case actionTypes.removeWidget: return (state || []).filter((widget) => widget.id !== action.payload);
+		/**
+		* set matrix by ID for one specified widget
+		*/
+		case actionTypes.setWidgetsLayout: return (state || []).map((widget) => {
+			const layout = action.payload.find((changedLayout) => changedLayout.i === widget.id);
+			return {
+				...widget,
+				layout
+			};
+		});
+		/**
+		* set matrix by ID for one specified widget
+		*/
+		case actionTypes.setWidgetsConfig: return (state || []).map((widget) => widget.id === action.payload.id ? {
+			...widget,
+			config: action.payload.config
+		} : widget);
+		default: return state;
+	}
+};
+const actions = {
+	initWidgets: (widgets) => ({
+		type: actionTypes.initWidgets,
+		payload: widgets
+	}),
+	addWidget: (code, id, layout, config) => ({
+		type: actionTypes.addWidget,
+		payload: {
+			code,
+			id,
+			layout,
+			config
+		}
+	}),
+	removeWidget: (id) => ({
+		type: actionTypes.removeWidget,
+		payload: id
+	}),
+	setWidgetsLayout: (layouts) => ({
+		type: actionTypes.setWidgetsLayout,
+		payload: layouts
+	}),
+	setWidgetsConfig: (id, config) => ({
+		type: actionTypes.setWidgetsConfig,
+		payload: {
+			id,
+			config
+		}
+	})
+};
+const selectors = { getWidgets: (state) => state?.dashboard?.widgets };
+//#endregion
+export { actionTypes, actions, widgetListReducer as default, selectors };

package/ui/Modules/Dashboard/stories/storybook.sample.d.ts

@@ -0,0 +1,50 @@
+import { LayoutWidgetItem, WidgetConfig, WidgetDefinition } from '..';
+export { tableColumns } from '../components/Widgets/Table/storybook.sample';
+export { horizontalBarData } from '../components/Widgets/HorizontalBar/storybook.sample';
+export declare const initialWidgets: LayoutWidgetItem[];
+export declare const withDropdownConfig: (definition: WidgetDefinition) => WidgetDefinition;
+/**
+ * You can define your own widget here
+ */
+export declare const customWidgets: WidgetDefinition[];
+/**
+ * You can define data for pie chart here
+ */
+export declare const dataForPieChart: {
+    source1: {
+        id: string;
+        label: string;
+        value: number;
+    }[];
+    source2: {
+        id: string;
+        label: string;
+        value: number;
+    }[];
+};
+export declare const pieChartTexts: {
+    title: string;
+    subtitle: string;
+    description: string;
+    text: string;
+};
+export declare const barChartTexts: {
+    title: string;
+    subtitle: string;
+    description: string;
+    text: string;
+};
+/**
+ * You can define data for number box widget here
+ */
+export declare const dataForNumberBox: {
+    source0: number;
+    source1: number;
+    source2: number;
+    source3: number;
+};
+export declare const onChange: (state: LayoutWidgetItem[]) => void;
+export declare const fetchDataForPieChart: (config?: WidgetConfig) => Promise<unknown>;
+export declare const fetchDataForNumberBox: (config?: WidgetConfig) => Promise<unknown>;
+export declare const fetchDataForBarChart: (config?: WidgetConfig) => Promise<unknown>;
+export declare const fetchDataForTable: () => Promise<unknown>;