@mailstep/design-system 0.8.51 → 0.9.0

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

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

@@ -0,0 +1,63 @@
+declare const _default: {
+    Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    Body: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    Header: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    PickerWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    Picker: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    PickerBody: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    PickerHeader: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    PickerItem: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    PickerClose: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    LayoutItem: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+        isConfigOpen: boolean;
+    }, never>;
+    LayoutItemAdd: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {}, never>;
+    Nowidget: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    WidgetConfigInDropdown: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    WidgetConfig: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+        isConfigOpen: boolean;
+        inDropdown: boolean;
+    }, never>;
+    WidgetVisibility: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+        isVisible: boolean;
+    }, never>;
+    WidgetConfigButtons: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    WidgetError: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    WidgetErrorMessage: import("styled-components").StyledComponent<"p", import("@xstyled/styled-components").Theme, {}, never>;
+    WidgetErrorTitle: import("styled-components").StyledComponent<"h2", import("@xstyled/styled-components").Theme, {}, never>;
+    LayoutError: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    LayoutErrorMessage: import("styled-components").StyledComponent<"p", import("@xstyled/styled-components").Theme, {}, never>;
+    LayoutErrorTitle: import("styled-components").StyledComponent<"h2", import("@xstyled/styled-components").Theme, {}, never>;
+    ItemWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    ItemMoveWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    ItemPanelButton: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    ItemBodyWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+        isConfigOpen: boolean;
+    }, never>;
+    ItemBody: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+        isConfigOpen: boolean;
+        inDropdown: boolean;
+        isFullHeight: boolean;
+    }, never>;
+    ItemName: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    ItemContent: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    ConfigRow: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+        isBlock?: boolean;
+    }, never>;
+    ConfigLabel: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    ConfigInput: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    Select: import("styled-components").StyledComponent<"select", import("@xstyled/styled-components").Theme, {
+        width?: string;
+        mr?: string;
+    }, never>;
+    CheckboxContent: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    CheckboxControls: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    Input: import("styled-components").StyledComponent<"input", import("@xstyled/styled-components").Theme, {
+        width?: string;
+    }, never>;
+    NoData: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    HideWidget: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+        isHidden: boolean;
+    }, never>;
+};
+export default _default;

package/ui/Modules/Dashboard/styles.js

@@ -0,0 +1,358 @@
+import styled$1 from "@xstyled/styled-components";
+//#region packages/ui/Modules/Dashboard/styles.ts
+const ItemMoveWrapper = styled$1.div`
+  position: absolute;
+  top: 5px;
+  right: 35px;
+  padding: 10px 15px;
+  z-index: 2;
+  display: none;
+
+  :hover {
+    cursor: move;
+    opacity: 1;
+  }
+
+  img {
+    height: 15px;
+    width: 15px;
+  }
+`;
+var styles_default = {
+	Wrapper: styled$1.div`
+    background-color: transparent;
+    padding: 0 5px;
+    color: typoPrimary;
+
+    * {
+      box-sizing: border-box;
+    }
+
+    @media (min-width: 576px) {
+      & > div {
+        padding: 0 20px 20px;
+      }
+    }
+  `,
+	Body: styled$1.div`
+    min-height: 200px;
+    position: relative;
+  `,
+	Header: styled$1.div`
+    height: 70px;
+    justify-content: space-between;
+    display: flex;
+    align-items: center;
+
+    & > h1 {
+      margin: 0;
+    }
+  `,
+	PickerWrapper: styled$1.div`
+    position: fixed;
+    z-index: 9999;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: #172b4d73;
+  `,
+	Picker: styled$1.div`
+    background-color: white;
+    width: 750px;
+    height: calc(100vh - 314px);
+    overflow: hidden;
+    position: fixed;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    margin: auto;
+    border-radius: 3px;
+    box-shadow: 0 8px 16px -4px #091e4240, 0 0 1px #fff;
+  `,
+	PickerBody: styled$1.div`
+    overflow-y: auto;
+    height: calc(100% - 65px);
+    color: #333;
+  `,
+	PickerHeader: styled$1.div`
+    height: 65px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 24px;
+    padding: 20px;
+    border-bottom: 2px solid #ebecf0;
+  `,
+	PickerItem: styled$1.div`
+    min-height: 50px;
+    padding: 20px 0;
+    margin: 0 20px;
+    border-bottom: 1px solid #ccc;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    & > img {
+      margin-right: 30px;
+    }
+
+    & > div {
+      width: 70%;
+      padding-right: 20px;
+    }
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    & > span {
+      font-weight: bold;
+      font-size: 14px;
+      color: textPrimary;
+    }
+
+    & p {
+      font-size: 12px;
+      line-height: 20px;
+      color: textPrimary;
+      margin: 4px 0;
+    }
+  `,
+	PickerClose: styled$1.div`
+    cursor: pointer;
+    font-size: 16px;
+    color: #333;
+  `,
+	LayoutItem: styled$1.div`
+    z-index: ${({ isConfigOpen, theme }) => isConfigOpen ? theme.zIndex || 10 : 0};
+    position: relative;
+    border-radius: 5px;
+    background-color: dashboardBackground;
+    box-shadow: cornerDialogShadow;
+    animation: fadeIn 1s;
+    @keyframes fadeIn {
+      0% {
+        opacity: 0;
+      }
+      10% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  `,
+	LayoutItemAdd: styled$1.span`
+    color: blue;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  `,
+	Nowidget: styled$1.div`
+    border: 3px dotted #ccc;
+    padding: 20px;
+    width: 100%;
+    height: 150px;
+    font-size: 20px;
+    color: #999;
+
+    & > span {
+      color: black;
+    }
+  `,
+	WidgetConfigInDropdown: styled$1.div`
+    position: absolute;
+    overflow: visible;
+    top: 0;
+    width: 100%;
+    min-width: 300px;
+    background-color: white;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    border: 1px solid #ccc;
+    z-index: 10;
+  `,
+	WidgetConfig: styled$1.div`
+    position: absolute;
+    top: 0;
+    left: 100%;
+    width: 100%;
+    background-color: white;
+    padding: 0 20px 20px;
+    display: ${({ isConfigOpen, inDropdown }) => isConfigOpen && !inDropdown ? "flex" : "none !important"};
+    flex-direction: column;
+    justify-content: space-between;
+  `,
+	WidgetVisibility: styled$1.div`
+    display: ${({ isVisible }) => isVisible ? "initial" : "none"};
+  `,
+	WidgetConfigButtons: styled$1.div`
+    border-top: 1px solid #ccc;
+    margin: 20px 0 0;
+    padding-top: 20px;
+    display: flex;
+    justify-content: space-between;
+  `,
+	WidgetError: styled$1.div`
+    display: flex;
+    flex-direction: column;
+  `,
+	WidgetErrorMessage: styled$1.p``,
+	WidgetErrorTitle: styled$1.h2`
+    margin: 0;
+    font-size: 18px;
+    color: #dd2b0e;
+  `,
+	LayoutError: styled$1.div`
+    display: flex;
+    flex-direction: column;
+  `,
+	LayoutErrorMessage: styled$1.p``,
+	LayoutErrorTitle: styled$1.h2`
+    margin: 0;
+    font-size: 24px;
+    color: #dd2b0e;
+  `,
+	ItemWrapper: styled$1.div`
+    padding: 20px 20px;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    &:hover ${ItemMoveWrapper} {
+      display: block;
+    }
+  `,
+	ItemMoveWrapper,
+	ItemPanelButton: styled$1.div`
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 20px;
+    z-index: 2;
+    user-select: none;
+
+    :hover {
+      cursor: pointer;
+      opacity: 1;
+    }
+  `,
+	ItemBodyWrapper: styled$1.div`
+    overflow: hidden;
+    flex-grow: 1;
+    overflow-y: ${({ isConfigOpen }) => isConfigOpen ? "auto" : "hidden"};
+    // do not add paddings/margins
+  `,
+	ItemBody: styled$1.div`
+    position: relative;
+    height: ${({ isFullHeight }) => isFullHeight ? "100%" : "fit-content"};
+    transition: all 0.4s;
+    left: ${({ isConfigOpen, inDropdown }) => isConfigOpen && !inDropdown ? "-100%" : "0"};
+  `,
+	ItemName: styled$1.div`
+    font-size: 18px;
+    color: gray5;
+    margin-bottom: 20px;
+
+    & > * {
+      margin-right: 5px;
+    }
+  `,
+	ItemContent: styled$1.div`
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    animation: fadeIn 1s;
+    @keyframes fadeIn {
+      0% {
+        opacity: 0;
+      }
+      10% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  `,
+	ConfigRow: styled$1.div`
+    display: flex;
+    margin-bottom: 10px;
+    font-size: 15px;
+    align-items: ${({ isBlock }) => isBlock ? "flex-start" : "center"};
+    justify-content: space-between;
+  `,
+	ConfigLabel: styled$1.div`
+    width: 40%;
+    color: textPrimary;
+  `,
+	ConfigInput: styled$1.div`
+    width: 80%;
+  `,
+	Select: styled$1.select`
+    padding: 5px;
+    border: 1px solid;
+    border-color: black;
+    border-radius: 3px;
+    width: ${(props) => props.width || "100%"};
+    margin-right: ${(props) => props.mr || "0"};
+  `,
+	CheckboxContent: styled$1.div`
+    padding: 5px;
+    border: 1px solid;
+    border-color: black;
+    border-radius: 3px;
+    max-height: 200px;
+    overflow-y: auto;
+    width: 100%;
+  `,
+	CheckboxControls: styled$1.div`
+    margin: 3px 0;
+    margin-left: 4px;
+    display: flex;
+    justify-content: space-between;
+  `,
+	Input: styled$1.input`
+    padding: 5px;
+    border: 1px solid;
+    border-color: black;
+    border-radius: 3px;
+    width: ${(props) => props.width || "100%"};
+
+    &[type='color'] {
+      padding: 0;
+      width: 40px;
+    }
+  `,
+	NoData: styled$1.div`
+    width: 100%;
+    height: 100%;
+    max-height: 200px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    color: gray5;
+    gap: 16px;
+    padding-top: 20px;
+
+    & > svg {
+      max-width: 30%;
+      max-height: 50%;
+      margin-bottom: 10px;
+    }
+  `,
+	HideWidget: styled$1.div`
+    display: ${({ isHidden }) => isHidden ? "none" : "initial"};
+  `
+};
+//#endregion
+export { styles_default as default };