@mailstep/design-system 0.8.52 → 0.9.0

package/ui/Modules/Dashboard/components/Widgets/Table/storybook.sample.js

@@ -0,0 +1,211 @@
+import { IconLabelCell } from "./components/IconLabelCell.js";
+import "./index.js";
+import { withProps } from "../../../Hoc/withProps.js";
+//#region packages/ui/Modules/Dashboard/components/Widgets/Table/storybook.sample.ts
+const tableData = [
+	{
+		id: "1",
+		company: {
+			icon: "🎸",
+			label: "Dixons",
+			value: "Dixons",
+			text: "meguc@ruj.io"
+		},
+		category: {
+			icon: "📕",
+			label: "Technology",
+			value: "Technology"
+		},
+		views: {
+			label: "23.5k",
+			value: 23500,
+			text: "in 24 hours"
+		},
+		revenue: {
+			label: "$891.2",
+			value: 891.2
+		},
+		sales: {
+			icon: "📈",
+			label: "68%",
+			value: 68
+		}
+	},
+	{
+		id: "2",
+		company: {
+			icon: "🧯",
+			label: "Motels",
+			value: "Motels",
+			text: "vaxav@hodzi.co.uk"
+		},
+		category: {
+			icon: "📗",
+			label: "Technology",
+			value: "Technology"
+		},
+		views: {
+			label: "78k",
+			value: 78e3,
+			text: "in 2 days"
+		},
+		revenue: {
+			label: "$668.51",
+			value: 668.51
+		},
+		sales: {
+			icon: "📉",
+			label: "68%",
+			value: 68
+		}
+	},
+	{
+		id: "3",
+		company: {
+			icon: "🪆",
+			label: "Zipcar",
+			value: "Zipcar",
+			text: "davcilse@is.gov"
+		},
+		category: {
+			icon: "📘",
+			label: "Technology",
+			value: "Technology"
+		},
+		views: {
+			label: "162",
+			value: 162,
+			text: "in 5 days"
+		},
+		revenue: {
+			label: "$422.29",
+			value: 422.29
+		},
+		sales: {
+			icon: "📉",
+			label: "68%",
+			value: 68
+		}
+	},
+	{
+		id: "4",
+		company: {
+			icon: "🧸",
+			label: "Owning",
+			value: "Owning",
+			text: "us@cuhil.gov"
+		},
+		category: {
+			icon: "📕",
+			label: "Technology",
+			value: "Technology"
+		},
+		views: {
+			label: "214",
+			value: 214,
+			text: "in 24 hours"
+		},
+		revenue: {
+			label: "$291.01",
+			value: 291.01
+		},
+		sales: {
+			icon: "📉",
+			label: "68%",
+			value: 68
+		}
+	}
+];
+const tableBigData = Array.from({ length: 101 }, (i, k) => {
+	const company = [
+		"Google",
+		"Dixons",
+		"Motels",
+		"Owning",
+		"Zipcar"
+	][Math.round(Math.random() * 4)];
+	const category = [
+		"Tea",
+		"Coffee",
+		"Beer",
+		"Water",
+		"Milk"
+	][Math.round(Math.random() * 4)];
+	const views = Math.round(Math.random() * 240);
+	const revenue = Math.round(Math.random() * 540);
+	const sales = Math.round(Math.random() * 100);
+	return {
+		id: k,
+		readableId: { text: k },
+		company: {
+			icon: [
+				"🧸",
+				"🪆",
+				"🧯",
+				"🎸",
+				"📕"
+			][Math.round(Math.random() * 4)],
+			label: company,
+			value: company,
+			text: "us@cuhil.gov"
+		},
+		category: {
+			icon: [
+				"🧸",
+				"🪆",
+				"🧯",
+				"🎸",
+				"📕"
+			][Math.round(Math.random() * 4)],
+			label: category,
+			value: category
+		},
+		views: {
+			label: views,
+			value: views,
+			text: "in 24 hours"
+		},
+		revenue: {
+			label: `${revenue}`,
+			value: revenue
+		},
+		sales: {
+			icon: "📉",
+			label: `${sales}%`,
+			value: sales
+		}
+	};
+});
+const tableColumns = [
+	{
+		key: "readableId",
+		label: "id"
+	},
+	{
+		key: "company",
+		label: "COMPANY",
+		component: IconLabelCell
+	},
+	{
+		key: "category",
+		label: "CATEGORY",
+		component: IconLabelCell
+	},
+	{
+		key: "views",
+		label: "VIEWS",
+		component: IconLabelCell
+	},
+	{
+		key: "revenue",
+		label: "REVENUE",
+		component: IconLabelCell
+	},
+	{
+		key: "sales",
+		label: "SALES",
+		component: withProps({ iconRight: true })(IconLabelCell)
+	}
+];
+//#endregion
+export { tableBigData, tableColumns, tableData };

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

@@ -0,0 +1,23 @@
+declare const _default: {
+    Table: import("styled-components").StyledComponent<"table", import("@xstyled/styled-components").Theme, {}, never>;
+    Th: import("styled-components").StyledComponent<"th", import("@xstyled/styled-components").Theme, {
+        onClick?: any;
+        sort?: "asc" | "desc";
+    }, never>;
+    Td: import("styled-components").StyledComponent<"td", import("@xstyled/styled-components").Theme, {
+        onClick?: () => void;
+        color?: string;
+    }, never>;
+    Tr: import("styled-components").StyledComponent<"tr", import("@xstyled/styled-components").Theme, {}, never>;
+    IconLabelCell: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    CellIcon: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+        iconRight: boolean;
+    }, never>;
+    CellLabel: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    CellText: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    Paginator: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+    PaginatorItem: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {
+        selected?: boolean;
+    }, never>;
+};
+export default _default;

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

@@ -0,0 +1,69 @@
+import styled$1 from "@xstyled/styled-components";
+//#region packages/ui/Modules/Dashboard/components/Widgets/Table/styles.ts
+var styles_default = {
+	Table: styled$1.table`
+    border: 1px solid;
+    border-color: bgLightGray2;
+    width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  `,
+	Th: styled$1.th`
+    padding: 10px;
+    background-color: lightGray6;
+    text-align: left;
+    &:hover {
+      background-color: ${({ onClick }) => onClick ? "#e1e1e3" : "auto"};
+      cursor: ${({ onClick }) => onClick ? "pointer" : "auto"};
+    }
+    &:after {
+      content: ' ${({ sort }) => sort === "asc" ? "⇣" : sort === "desc" && "⇡" || ""}';
+    }
+  `,
+	Td: styled$1.td`
+    padding: 10px;
+    border-bottom: 1px solid #f3f2f7;
+    background-color: ${({ color }) => color || "auto"};
+    &:hover {
+      background-color: ${({ onClick }) => onClick ? "#f3f2f7" : "auto"};
+      cursor: ${({ onClick }) => onClick ? "pointer" : "auto"};
+    }
+  `,
+	Tr: styled$1.tr``,
+	IconLabelCell: styled$1.div`
+    display: flex;
+    align-items: center;
+  `,
+	CellIcon: styled$1.div`
+    font-size: 18px;
+    margin-right: ${({ iconRight }) => iconRight ? "0" : "20px"};
+    margin-left: ${({ iconRight }) => iconRight ? "20px" : "0"};
+  `,
+	CellLabel: styled$1.div`
+    color: #666;
+    font-size: 16px;
+  `,
+	CellText: styled$1.div`
+    color: #999;
+    font-size: 15px;
+  `,
+	Paginator: styled$1.div`
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 10px 0;
+    color: gray5;
+    height: 27px;
+  `,
+	PaginatorItem: styled$1.span`
+    cursor: pointer;
+    font-weight: ${({ selected }) => selected ? "700" : "400"};
+    color: gray5;
+    display: inline-block;
+    padding: 0 5px;
+    &::selection {
+      background-color: white;
+    }
+  `
+};
+//#endregion
+export { styles_default as default };

package/ui/Modules/Dashboard/components/Widgets/Table/types.d.ts

@@ -0,0 +1,52 @@
+import React, { RefObject } from 'react';
+import { WidgetComponentProps, TableClickCallback } from '../../../types';
+export type TableColumn = {
+    key: string;
+    label: string;
+    component?: React.ComponentType<any>;
+};
+export type TableRowData = string | number | {
+    label: string;
+    value: string;
+} | {
+    [key: string]: string | number;
+};
+export type TableRow = {
+    id: string;
+    [key: string]: TableRowData;
+};
+export interface TableProps extends WidgetComponentProps<TableRow[], TableClickCallback> {
+    columns?: TableColumn[];
+    hasPages?: boolean;
+    hasSorting?: boolean;
+    hasServerSorting?: boolean;
+    minRows?: number;
+    returnWidgetWithPaginationHeight?: (height: number) => void;
+    onChange?: OnChangeCallback;
+    onSaveConfigProps?: (props: Record<string, any>) => void;
+    serverTotal?: number;
+    innerRef?: RefObject<HTMLDivElement> | ((node: HTMLDivElement) => void);
+    components?: {
+        pagination?: React.ElementType;
+    };
+}
+export interface TableCellProps {
+    component?: React.ComponentType<any>;
+    data: Record<string, any>;
+}
+export type TableCondition = {
+    column: string;
+    comparator: '>' | '<' | '=';
+    color: string;
+    value: string;
+};
+export type WidgetSort = Record<string, 'asc' | 'desc'>;
+export type WidgetPagination = {
+    page: number;
+    from: number;
+    to: number;
+    perPage: number;
+};
+export interface OnChangeCallback {
+    (sort: WidgetSort | null, pagination: WidgetPagination | null): void | Promise<void>;
+}

package/ui/Modules/Dashboard/components/Widgets/Table/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,10 @@
+import type { JSX } from 'react';
+import { WidgetComponentProps } from '../../../types';
+export type Props = WidgetComponentProps & {
+    text?: string;
+};
+/**
+ * This is only example of widget
+ */
+declare const TextBox: ({ text, innerRef }: Props) => JSX.Element;
+export default TextBox;

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

@@ -0,0 +1,12 @@
+import "react";
+import { jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/TextBox/TextBox.tsx
+/**
+* This is only example of widget
+*/
+const TextBox = ({ text, innerRef }) => /* @__PURE__ */ jsxs("div", {
+	ref: innerRef,
+	children: ["BTC: 17% ↑ ", text]
+});
+//#endregion
+export { TextBox as default };

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

@@ -0,0 +1,3 @@
+import TextBox from './TextBox';
+export * from './TextBox';
+export default TextBox;

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

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

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

@@ -0,0 +1,11 @@
+import type { WidgetDefinition } from '../../types';
+import { components as WidgetTableComponents } from './Table';
+export declare const ColorBox: WidgetDefinition;
+export declare const TextBox: WidgetDefinition;
+export declare const PieChart: WidgetDefinition;
+export declare const BarChart: WidgetDefinition;
+export declare const Table: WidgetDefinition;
+export { WidgetTableComponents };
+export declare const NumberBox: WidgetDefinition;
+export declare const HorizontalBar: WidgetDefinition;
+export declare const NoWidget: WidgetDefinition;

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

@@ -0,0 +1,108 @@
+import { Config } from "./ColorBox/Config.js";
+import ColorBox_default from "./ColorBox/index.js";
+import { Config as Config$1 } from "./NumberBox/Config.js";
+import NumberBox_default from "./NumberBox/index.js";
+import TextBox_default from "./TextBox/index.js";
+import { Config as Config$2 } from "./PieChart/Config.js";
+import PieChart_default from "./PieChart/index.js";
+import { Config as Config$3 } from "./BarChart/Config.js";
+import BarChart_default from "./BarChart/index.js";
+import { IconLabelCell_exports } from "./Table/components/IconLabelCell.js";
+import { Config as Config$4 } from "./Table/Config.js";
+import Table_default from "./Table/index.js";
+import { Config as Config$5 } from "./HorizontalBar/Config.js";
+import HorizontalBar_default from "./HorizontalBar/index.js";
+import EmptyWidget_default from "./EmptyWidget/index.js";
+import ColorPreview from "../../assets/ColorBoxPreview.png";
+import TextPreview from "../../assets/TextBoxPreview.png";
+import ChartPreview from "../../assets/PieChartPreview.png";
+import BarPreview from "../../assets/BarChartPreview.png";
+import TablePreview from "../../assets/TablePreview.png";
+import NumberBoxPreview from "../../assets/NumberBoxPreview.png";
+import HorizontalBarPreview from "../../assets/HorizontalBarPreview.png";
+//#region packages/ui/Modules/Dashboard/components/Widgets/index.ts
+const dimensions = (minWidth, minHeight, maxWidth, maxHeight, initWidth, initHeight) => ({
+	minWidth,
+	minHeight,
+	maxWidth,
+	maxHeight,
+	initWidth,
+	initHeight
+});
+const ColorBox = {
+	name: "Color Box Widget",
+	code: "ColorBox",
+	description: "Lorem ipsum dolor sit amet, consectetur adipiscing lorem.",
+	preview: ColorPreview,
+	component: ColorBox_default,
+	configComponent: Config,
+	...dimensions(3, 3, 12, 12, 3, 3)
+};
+const TextBox = {
+	name: "Text box Widget",
+	code: "text",
+	description: "Lorem ipsum dolor sit amet, consectetur adipiscing lorem.",
+	preview: TextPreview,
+	component: TextBox_default,
+	...dimensions(2, 2, 12, 12, 3, 3)
+};
+const PieChart = {
+	name: "Pie Chart",
+	code: "chart",
+	description: "A pie chart in which you can compare multiple values retrieved from different sources. The source can be selected in the widget configuration.",
+	preview: ChartPreview,
+	component: PieChart_default,
+	configComponent: Config$2,
+	...dimensions(6, 3, 12, 12, 6, 3)
+};
+const BarChart = {
+	name: "Bar Chart",
+	code: "bar-chart",
+	description: "A bar chart in which you can compare multiple values retrieved from different sources. The source can be selected in the widget configuration.",
+	preview: BarPreview,
+	component: BarChart_default,
+	configComponent: Config$3,
+	...dimensions(3, 1, 12, 12, 4, 2)
+};
+const Table = {
+	name: "Spreadsheet",
+	code: "table",
+	description: "Use this widget to view data sources in a spreadsheet. In the widget settings, you can select which source you want to view.",
+	preview: TablePreview,
+	component: Table_default,
+	configComponent: Config$4,
+	...dimensions(2, 2, 12, 12, 5, 2)
+};
+const NumberBox = {
+	name: "Big Number",
+	code: "number",
+	description: "Allows you to display a number representing the sum or status of a resource. The source can be selected in the widget configuration.",
+	preview: NumberBoxPreview,
+	component: NumberBox_default,
+	configComponent: Config$1,
+	...dimensions(1, 1, 12, 12, 3, 2)
+};
+const HorizontalBar = {
+	name: "Horizontal bar",
+	code: "horizontalBar",
+	description: "Displays lines representing percentage based progress.",
+	preview: HorizontalBarPreview,
+	component: HorizontalBar_default,
+	configComponent: Config$5,
+	...dimensions(1, 1, 12, 12, 3, 2)
+};
+const NoWidget = {
+	name: "error",
+	code: "",
+	description: "",
+	preview: "",
+	minWidth: 0,
+	maxWidth: 2,
+	minHeight: 0,
+	maxHeight: 2,
+	initWidth: 2,
+	initHeight: 2,
+	component: EmptyWidget_default
+};
+//#endregion
+export { BarChart, ColorBox, HorizontalBar, NoWidget, NumberBox, PieChart, Table, TextBox, IconLabelCell_exports as WidgetTableComponents };

package/ui/Modules/Dashboard/components/Widgets/utils/generic.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns an array of theme colors based on range:
+ * [ pieChartColor1, pieChartColor2, ... pieChartColor5]
+ */
+export declare const createWidgetColors: (colorBaseName: string, rangeOfColors: number) => string[];

package/ui/Modules/Dashboard/components/Widgets/utils/generic.js

@@ -0,0 +1,20 @@
+//#region packages/ui/Modules/Dashboard/components/Widgets/utils/generic.ts
+const colors = {
+	pieChartColor1: "#60ceba",
+	pieChartColor2: "#e7c19e",
+	pieChartColor3: "#f47561",
+	pieChartColor4: "#f0e15b",
+	pieChartColor5: "#e8a738",
+	barChartColor1: "#60ceba",
+	barChartColor2: "#e7c19e",
+	barChartColor3: "#f47561",
+	barChartColor4: "#f0e15b",
+	barChartColor5: "#e8a738"
+};
+/**
+* Returns an array of theme colors based on range:
+* [ pieChartColor1, pieChartColor2, ... pieChartColor5]
+*/
+const createWidgetColors = (colorBaseName, rangeOfColors) => new Array(rangeOfColors).fill(colorBaseName).map((colorBaseName, index) => colors[`${colorBaseName}${index + 1}`]);
+//#endregion
+export { createWidgetColors };

package/ui/Modules/Dashboard/components/Widgets/utils/helpers.d.ts

@@ -0,0 +1,3 @@
+import { OrdinalColorScaleConfigScheme } from '@nivo/colors';
+export type Colors = OrdinalColorScaleConfigScheme | string[];
+export declare function getColorStringArray(colors: Colors): string[];

package/ui/Modules/Dashboard/components/Widgets/utils/helpers.js

@@ -0,0 +1,25 @@
+import { colorSchemes } from "@nivo/colors";
+//#region packages/ui/Modules/Dashboard/components/Widgets/utils/helpers.ts
+function isOrdinalColorScaleConfigScheme(value) {
+	return "scheme" in value;
+}
+function is1DStringArray(value) {
+	if (Array.isArray(value)) {
+		let somethingIsNotString = false;
+		value.forEach(function(item) {
+			if (typeof item !== "string") somethingIsNotString = true;
+		});
+		return !somethingIsNotString;
+	}
+	return false;
+}
+function getColorStringArray(colors) {
+	if (isOrdinalColorScaleConfigScheme(colors)) {
+		const colorScheme = colorSchemes[colors.scheme];
+		if (is1DStringArray(colorScheme)) return [...colorScheme];
+		return Array.from(colorScheme[colorScheme.length - 1]);
+	}
+	return colors;
+}
+//#endregion
+export { getColorStringArray };

package/ui/Modules/Dashboard/components/Widgets/utils/legends.d.ts

@@ -0,0 +1,20 @@
+import { LegendProps } from '@nivo/legends';
+interface NivoWidgetDataEntity {
+    id: string | number;
+    value: number;
+    label?: string;
+}
+interface CreateLegendOptions {
+    translateX?: number;
+    translateY?: number;
+}
+/**
+ * Helper to create multi-row legend for nivo widgets
+ * @param data widget data
+ * @param colors widget colors
+ * @param maxRowLength maximum length (of entities) which a single row can have
+ * @param options legend specific options
+ * @returns compatible legends prop which can be passed into nivo components
+ */
+export declare const createLegendData: (data: NivoWidgetDataEntity[], colors: string[], maxRowLength: number, options?: CreateLegendOptions) => LegendProps[];
+export {};

package/ui/Modules/Dashboard/components/Widgets/utils/legends.js

@@ -0,0 +1,57 @@
+//#region packages/ui/Modules/Dashboard/components/Widgets/utils/legends.ts
+const getLongestProperty = (obj) => {
+	const lengths = Object.values(obj).map((e) => String(e)?.length || 0);
+	return Math.max(...lengths);
+};
+const calculateItemWidth = (data) => {
+	const lengths = data.map(getLongestProperty);
+	const maxCharLength = Math.max(...lengths);
+	if (maxCharLength < 5) return 50;
+	if (maxCharLength < 10) return 100;
+	if (maxCharLength < 15) return 150;
+	return 200;
+};
+const getBaseLegendProps = (itemWidth, translateX) => ({
+	anchor: "bottom",
+	direction: "row",
+	translateX,
+	itemWidth,
+	itemHeight: 26,
+	itemsSpacing: 25,
+	itemTextColor: "#999",
+	symbolSize: 10,
+	symbolShape: "circle"
+});
+const createColorRange = (baseColors, requiredLength) => new Array(requiredLength).fill("").map((_, index) => baseColors[index % baseColors.length]);
+/**
+* Helper to create multi-row legend for nivo widgets
+* @param data widget data
+* @param colors widget colors
+* @param maxRowLength maximum length (of entities) which a single row can have
+* @param options legend specific options
+* @returns compatible legends prop which can be passed into nivo components
+*/
+const createLegendData = (data, colors, maxRowLength, options = {}) => {
+	const { translateX = 0, translateY = 50 } = options;
+	const legendProps = getBaseLegendProps(calculateItemWidth(data), translateX);
+	const colorRange = createColorRange(colors, data.length);
+	const numberOfRows = Math.ceil(data.length / maxRowLength);
+	const splitData = [];
+	for (let row = 0; row < numberOfRows; row++) {
+		const rowData = data.slice(row * maxRowLength, (row + 1) * maxRowLength);
+		const rowColors = colorRange.slice(row * maxRowLength, (row + 1) * maxRowLength);
+		const newRow = {
+			...legendProps,
+			translateY: translateY + row * legendProps.itemHeight,
+			data: rowData.map((curr, index) => ({
+				id: curr.id,
+				label: curr.id,
+				color: rowColors[index]
+			}))
+		};
+		splitData.push(newRow);
+	}
+	return splitData;
+};
+//#endregion
+export { createLegendData };

package/ui/Modules/Dashboard/context/ComponentContext.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { CustomComponents } from '../types';
+export declare const defaultComponents: Required<CustomComponents>;
+declare const ComponentContext: React.Context<Required<CustomComponents>>;
+export default ComponentContext;

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

@@ -0,0 +1,15 @@
+import Button_default from "../../../Elements/Button/index.js";
+import DashboardPicker from "../components/Picker/Picker.js";
+import ItemConfigControls from "../components/Layout/components/ItemConfig/ItemConfigControls.js";
+import ItemHeader from "../components/Layout/components/ItemHeader/ItemHeader.js";
+import React from "react";
+//#region packages/ui/Modules/Dashboard/context/ComponentContext.ts
+const defaultComponents = {
+	Button: Button_default,
+	Picker: DashboardPicker,
+	ItemConfigControls,
+	ItemHeader
+};
+const ComponentContext = React.createContext(defaultComponents);
+//#endregion
+export { ComponentContext as default, defaultComponents };

package/ui/Modules/Dashboard/context/LangContext.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const LangContext: React.Context<string>;
+export default LangContext;