@mailstep/design-system 0.8.52 → 0.9.1

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>;

package/ui/Modules/Dashboard/stories/storybook.sample.js

@@ -0,0 +1,237 @@
+import { tableBigData, tableColumns } from "../components/Widgets/Table/storybook.sample.js";
+import { horizontalBarData } from "../components/Widgets/HorizontalBar/storybook.sample.js";
+import { jsx } from "react/jsx-runtime";
+import MoveSvg from "../assets/move.svg";
+const initialWidgets = [
+	{
+		id: "1",
+		code: "horizontalBar",
+		layout: {
+			i: "1",
+			x: 0,
+			y: 0,
+			h: 2,
+			w: 5
+		},
+		config: { source: "source0" }
+	},
+	{
+		id: "2",
+		code: "chart",
+		config: {},
+		layout: {
+			i: "2",
+			x: 5,
+			y: 0,
+			h: 4,
+			w: 7,
+			minH: 4,
+			minW: 6
+		}
+	},
+	{
+		id: "3",
+		code: "table",
+		config: { conditions: [
+			{
+				comparator: "<",
+				column: "views",
+				value: 50,
+				color: "#FDC9C9"
+			},
+			{
+				comparator: "=",
+				column: "views",
+				value: 7,
+				color: "#81efb8"
+			},
+			{
+				comparator: ">",
+				column: "views",
+				value: 100,
+				color: "#C9C9FD"
+			},
+			{
+				comparator: ">",
+				column: "revenue",
+				value: 400,
+				color: "#e8a738"
+			},
+			{
+				comparator: ">",
+				column: "sales",
+				value: 50,
+				color: "#60ceba"
+			},
+			{
+				comparator: "<",
+				column: "sales",
+				value: 40,
+				color: "#FDC9C9"
+			},
+			{
+				comparator: "=",
+				column: "category",
+				value: "Coffee",
+				color: "#eee"
+			}
+		] },
+		layout: {
+			i: "3",
+			x: 0,
+			y: 6,
+			h: 5,
+			w: 12
+		}
+	},
+	{
+		id: "4",
+		code: "number",
+		layout: {
+			i: "4",
+			x: 7,
+			y: 4,
+			h: 2,
+			w: 2
+		},
+		config: {
+			sourceLabel: "In progress",
+			unit: "ks"
+		}
+	},
+	{
+		id: "5",
+		code: "custom1",
+		layout: {
+			i: "5",
+			x: 5,
+			y: 4,
+			h: 2,
+			w: 2
+		},
+		config: {}
+	},
+	{
+		id: "6",
+		code: "bar-chart",
+		config: {},
+		layout: {
+			i: "6",
+			x: 0,
+			y: 10,
+			h: 4,
+			w: 7
+		}
+	}
+];
+const withDropdownConfig = (definition) => ({
+	...definition,
+	isWidgetConfigInDropdown: true
+});
+/**
+* You can define your own widget here
+*/
+const customWidgets = [{
+	name: "Project custom widget",
+	code: "custom1",
+	description: "This widget is for current project only and you will not find it in ohter dashboards.",
+	preview: "https://i.giphy.com/media/3o7TKOo9pQ3YUIjF2U/giphy.gif",
+	component: ({ innerRef }) => /* @__PURE__ */ jsx("div", {
+		ref: innerRef,
+		children: /* @__PURE__ */ jsx("img", {
+			src: "https://i.giphy.com/media/3o7TKOo9pQ3YUIjF2U/giphy.gif",
+			alt: "wow",
+			width: "100%"
+		})
+	}),
+	isStatic: true,
+	minWidth: 1,
+	maxWidth: 12,
+	minHeight: 1,
+	maxHeight: 12,
+	initWidth: 3,
+	initHeight: 3,
+	icon: /* @__PURE__ */ jsx("img", {
+		src: MoveSvg,
+		height: 14,
+		alt: "move-icon"
+	})
+}];
+/**
+* You can define data for pie chart here
+*/
+const dataForPieChart = {
+	source1: [
+		{
+			id: "Doručené ",
+			label: "Doručené",
+			value: 206
+		},
+		{
+			id: "Vracené",
+			label: "Vracené",
+			value: 377
+		},
+		{
+			id: "Rozbité",
+			label: "Rozbité",
+			value: 20
+		},
+		{
+			id: "Spálené",
+			label: "Spálené",
+			value: 100
+		}
+	],
+	source2: [
+		{
+			id: "Doručené",
+			label: "Doručené",
+			value: 6
+		},
+		{
+			id: "Vracené",
+			label: "Vracené",
+			value: 150
+		},
+		{
+			id: "Rozbité",
+			label: "Rozbité",
+			value: 20
+		},
+		{
+			id: "Spálené",
+			label: "Spálené",
+			value: 100
+		}
+	]
+};
+const pieChartTexts = {
+	title: "Earnings",
+	subtitle: "This Month",
+	description: "$4055.56",
+	text: "68.2% more earning than last month."
+};
+const barChartTexts = pieChartTexts;
+/**
+* You can define data for number box widget here
+*/
+const dataForNumberBox = {
+	source0: 95,
+	source1: 950,
+	source2: 45950,
+	source3: 879950
+};
+const onChange = (state) => console.log("Dashboard: onChange", state);
+const fetchDataForPieChart = (config) => new Promise((resolve) => {
+	setTimeout(() => resolve(config?.source ? dataForPieChart[config.source] : dataForPieChart.source1), 1500);
+});
+const fetchDataForNumberBox = (config) => new Promise((resolve) => {
+	setTimeout(() => resolve(config?.source ? dataForNumberBox[config.source] : dataForNumberBox.source1), 500);
+});
+const fetchDataForBarChart = fetchDataForPieChart;
+const fetchDataForTable = () => new Promise((resolve) => {
+	setTimeout(() => resolve(tableBigData), 500);
+});
+//#endregion
+export { barChartTexts, customWidgets, dataForNumberBox, dataForPieChart, fetchDataForBarChart, fetchDataForNumberBox, fetchDataForPieChart, fetchDataForTable, horizontalBarData, initialWidgets, onChange, pieChartTexts, tableColumns, withDropdownConfig };