@mailstep/design-system 0.8.52 → 0.9.1

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

@@ -0,0 +1,93 @@
+import styles_default from "../../../styles.js";
+import LoadingBoundary from "../../../Hoc/LoadingBoundary.js";
+import NoData_default from "../../NoData/index.js";
+import PaginatorLocation from "./components/PaginatorLocation.js";
+import styles_default$1 from "./styles.js";
+import PaginatorList from "./components/PaginatorList.js";
+import TableCell, { getColor } from "./components/TableCell.js";
+import { usePages } from "./hooks/usePages.js";
+import { useSort } from "./hooks/useSort.js";
+import React, { useCallback, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/Table/Table.tsx
+const Table = ({ data = [], columns = [], isLoading, error, onValueClick, onChange, onSaveConfigProps, config = {}, hasPages = true, hasServerPages = false, hasSorting = true, hasServerSorting = false, innerRef, returnWidgetWithPaginationHeight, minRows, serverTotal, components }) => {
+	const onClick = useCallback((row, columnName) => () => onValueClick?.(row, columnName, config), [onValueClick, config]);
+	const { toggleSort, sort, sortedData } = useSort(data, !hasServerSorting, config?.sort);
+	const [tableRowRef, tHeadRef, paginatorRef] = [
+		useRef(null),
+		useRef(null),
+		useRef(null)
+	];
+	const { slicedData, page, from, to, perPage, setPage, pages, totalHeight } = usePages(sortedData, hasPages, innerRef, tHeadRef, paginatorRef, tableRowRef, minRows, hasServerPages, serverTotal);
+	const CustomPagination = components?.pagination;
+	React.useEffect(() => {
+		onChange?.(sort, {
+			page,
+			from,
+			to,
+			perPage
+		});
+	}, [
+		sort,
+		pages,
+		page,
+		from,
+		to,
+		perPage
+	]);
+	React.useEffect(() => {
+		returnWidgetWithPaginationHeight?.(totalHeight);
+	}, [totalHeight]);
+	React.useEffect(() => {
+		if (perPage > 0) onSaveConfigProps?.({
+			perPage,
+			...Object.keys(sort || {}).length > 0 ? { sort } : {}
+		});
+	}, [perPage, sort]);
+	return /* @__PURE__ */ jsx(LoadingBoundary, {
+		isLoading,
+		error,
+		children: /* @__PURE__ */ jsxs(styles_default.ItemContent, {
+			ref: innerRef,
+			children: [
+				(!data || data.length === 0) && /* @__PURE__ */ jsx(NoData_default, {}),
+				/* @__PURE__ */ jsxs(styles_default$1.Table, {
+					cellSpacing: "0",
+					cellPadding: "0",
+					children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", {
+						ref: tHeadRef,
+						children: columns?.map?.((column, i) => /* @__PURE__ */ jsx(styles_default$1.Th, {
+							onClick: hasSorting ? toggleSort(column.key) : void 0,
+							sort: sort?.[column.key],
+							children: column.label
+						}, `column-${column.key}-${i}`))
+					}) }), /* @__PURE__ */ jsx("tbody", { children: slicedData.map((row) => /* @__PURE__ */ jsx(styles_default$1.Tr, {
+						ref: tableRowRef,
+						children: columns?.map?.((column) => /* @__PURE__ */ jsx(styles_default$1.Td, {
+							onClick: onValueClick && onClick(row, column.key),
+							color: getColor(config, column.key, row[column.key]),
+							children: /* @__PURE__ */ jsx(TableCell, {
+								data: row[column.key],
+								component: column.component
+							})
+						}, `row-${row.id}-column-${column.label}`))
+					}, `row-${row.id}`)) })]
+				}),
+				/* @__PURE__ */ jsxs(styles_default$1.Paginator, {
+					ref: paginatorRef,
+					children: [hasPages && perPage > 0 && !components?.pagination && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PaginatorLocation, {
+						from,
+						to,
+						total: serverTotal || data.length
+					}), /* @__PURE__ */ jsx(PaginatorList, {
+						total: pages,
+						page,
+						onChange: setPage
+					})] }), hasPages && perPage > 0 && components?.pagination && /* @__PURE__ */ jsx(CustomPagination, { perPage })]
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { Table as default };

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

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+export interface IconLabelCellProps {
+    icon?: string;
+    label?: string;
+    text?: string;
+    iconRight?: boolean;
+}
+export declare const IconLabelCell: ({ icon, label, text, iconRight }: IconLabelCellProps) => JSX.Element;

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

@@ -0,0 +1,19 @@
+import { __exportAll } from "../../../../../../_virtual/_rolldown/runtime.js";
+import styles_default from "../styles.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/Table/components/IconLabelCell.tsx
+var IconLabelCell_exports = /* @__PURE__ */ __exportAll({ IconLabelCell: () => IconLabelCell });
+const IconLabelCell = ({ icon, label, text, iconRight = false }) => /* @__PURE__ */ jsxs(styles_default.IconLabelCell, { children: [
+	icon && !iconRight && /* @__PURE__ */ jsx(styles_default.CellIcon, {
+		iconRight,
+		children: icon
+	}),
+	/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(styles_default.CellLabel, { children: label }), /* @__PURE__ */ jsx(styles_default.CellText, { children: text })] }),
+	icon && iconRight && /* @__PURE__ */ jsx(styles_default.CellIcon, {
+		iconRight,
+		children: icon
+	})
+] });
+//#endregion
+export { IconLabelCell, IconLabelCell_exports };

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

@@ -0,0 +1,9 @@
+import type { JSX } from 'react';
+interface PaginatorListProps {
+    total: number;
+    page: number;
+    pagins?: number;
+    onChange: (page: number) => void;
+}
+declare const PaginatorList: ({ total, pagins, onChange, page }: PaginatorListProps) => JSX.Element | null;
+export default PaginatorList;

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

@@ -0,0 +1,31 @@
+import styles_default from "../styles.js";
+import { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/Table/components/PaginatorList.tsx
+const PaginatorList = ({ total, pagins = 7, onChange, page }) => {
+	const max = Math.min(page + pagins + 1, total);
+	const min = Math.round(Math.max(page - pagins / 2, 0));
+	const pages = Math.min(max - min, pagins);
+	const items = new Array(pages).fill(1).map((_, i) => i + min);
+	const onClick = useCallback((index) => () => onChange(index), [onChange]);
+	const onPreviousClick = useCallback(() => onChange(items[0] - 1), [items, onChange]);
+	const onNextClick = useCallback(() => onChange(page + 1), [page, onChange]);
+	if (total <= 1) return null;
+	return /* @__PURE__ */ jsxs("div", { children: [
+		items[0] > 0 && /* @__PURE__ */ jsx(styles_default.PaginatorItem, {
+			onClick: onPreviousClick,
+			children: "❮ "
+		}),
+		items.map((value) => /* @__PURE__ */ jsxs(styles_default.PaginatorItem, {
+			onClick: onClick(value),
+			selected: value === page,
+			children: [value + 1, " "]
+		}, value)),
+		page + 1 < total && /* @__PURE__ */ jsx(styles_default.PaginatorItem, {
+			onClick: onNextClick,
+			children: "❯"
+		})
+	] });
+};
+//#endregion
+export { PaginatorList as default };

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

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+interface PaginatorLocationProps {
+    from: number;
+    to: number;
+    total: number;
+}
+declare const PaginatorLocation: ({ from, to, total }: PaginatorLocationProps) => JSX.Element;
+export default PaginatorLocation;

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

@@ -0,0 +1,15 @@
+import "react";
+import { jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/Table/components/PaginatorLocation.tsx
+const PaginatorLocation = ({ from, to, total }) => /* @__PURE__ */ jsxs("span", { children: [
+	/* @__PURE__ */ jsxs("b", { children: [
+		from + 1,
+		"–",
+		to
+	] }),
+	" ",
+	"of ",
+	total
+] });
+//#endregion
+export { PaginatorLocation as default };

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

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+import { WidgetConfig } from '../../../../types';
+import { TableCellProps } from '../types';
+declare const TableCell: ({ component: Cell, data }: TableCellProps) => JSX.Element;
+export declare const getColor: (config: WidgetConfig, columnKey: string, columnValue: any) => string;
+export default TableCell;

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

@@ -0,0 +1,33 @@
+import { IconLabelCell } from "./IconLabelCell.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/Table/components/TableCell.tsx
+const TableCell = ({ component: Cell = IconLabelCell, data }) => /* @__PURE__ */ jsx(Cell, { ...data });
+const getColor = (config, columnKey, columnValue) => {
+	const isAllColumns = config?.conditions?.[0]?.column === "all";
+	const conditions = config?.conditions?.filter((c) => c.column === columnKey);
+	const value = columnValue !== void 0 && "value" in columnValue ? columnValue.value : columnValue;
+	let color = "";
+	const setColor = (condition) => {
+		const isNumberComparison = !Number.isNaN(Number(value)) && !Number.isNaN(Number(condition.value));
+		switch (condition.comparator) {
+			case ">":
+				if (isNumberComparison && value > condition.value) color = condition.color;
+				break;
+			case "<":
+				if (isNumberComparison && value < condition.value) color = condition.color;
+				break;
+			case "=":
+				if (String(value) === String(condition.value)) color = condition.color;
+				break;
+			default: break;
+		}
+	};
+	conditions?.forEach((condition) => {
+		setColor(condition);
+	});
+	if (isAllColumns) setColor(config.conditions[0]);
+	return color;
+};
+//#endregion
+export { TableCell as default, getColor };

package/ui/Modules/Dashboard/components/Widgets/Table/hooks/useCondition.d.ts

@@ -0,0 +1,10 @@
+import { ConfigProps } from '../../../../types';
+interface UseCondition {
+    (onChange: ConfigProps['onChange'], config: ConfigProps['config']): [
+        (e: React.MouseEvent<HTMLElement>) => void,
+        (index: number) => (e: React.MouseEvent<HTMLElement>) => void,
+        (index: number, name: string) => (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => void
+    ];
+}
+declare const useCondition: UseCondition;
+export default useCondition;

package/ui/Modules/Dashboard/components/Widgets/Table/hooks/useCondition.js

@@ -0,0 +1,27 @@
+import { useCallback } from "react";
+//#region packages/ui/Modules/Dashboard/components/Widgets/Table/hooks/useCondition.ts
+const useCondition = (onChange, config) => {
+	return [
+		useCallback(() => onChange({
+			...config,
+			conditions: [...config?.conditions || [], {}]
+		}), [onChange, config]),
+		useCallback((index) => () => onChange({
+			...config,
+			conditions: config.conditions.filter((_, i) => i !== index)
+		}), [onChange, config]),
+		useCallback((index, name) => (e) => {
+			const newConditions = [...config.conditions];
+			newConditions[index] = {
+				...newConditions[index],
+				[name]: e.target.value
+			};
+			onChange({
+				...config,
+				conditions: newConditions
+			});
+		}, [config])
+	];
+};
+//#endregion
+export { useCondition as default };

package/ui/Modules/Dashboard/components/Widgets/Table/hooks/usePages.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+import { TableRow } from '../types';
+interface UsePagesProps {
+    (data: TableRow[], enabled: boolean, wrapperRef: RefObject<HTMLDivElement> | ((node: HTMLDivElement) => void) | undefined, tHeadRef: RefObject<HTMLTableRowElement | null>, paginatorRef: RefObject<HTMLDivElement | null>, tableRowRef: RefObject<HTMLTableRowElement | null>, minRows?: number, useServer?: boolean, serverTotal?: number): Paginator;
+}
+type Paginator = {
+    slicedData: TableRow[];
+    pages: number;
+    page: number;
+    from: number;
+    to: number;
+    perPage: number;
+    setPage: (page: number) => void;
+    totalHeight: number;
+};
+export declare const usePages: UsePagesProps;
+export {};

package/ui/Modules/Dashboard/components/Widgets/Table/hooks/usePages.js

@@ -0,0 +1,27 @@
+import { useResize } from "../../../../hooks/useResize.js";
+import { useState } from "react";
+//#region packages/ui/Modules/Dashboard/components/Widgets/Table/hooks/usePages.ts
+const usePages = (data, enabled, wrapperRef, tHeadRef, paginatorRef, tableRowRef, minRows = 1, useServer, serverTotal) => {
+	const { height: wrapperHeight } = useResize(wrapperRef);
+	const { height: tableHeadHeight } = useResize(tHeadRef);
+	const { height: paginatorHeight } = useResize(paginatorRef);
+	const { height: rowHeight } = useResize(tableRowRef);
+	const [page, setPage] = useState(0);
+	const total = useServer ? serverTotal || 0 : data.length;
+	const space = Math.max(wrapperHeight - tableHeadHeight - paginatorHeight - 8, 0);
+	const perPage = rowHeight ? Math.floor(space / (rowHeight || 1)) || minRows : 0;
+	const from = page * perPage;
+	const to = Math.min(from + perPage, total);
+	return {
+		slicedData: enabled && perPage > 0 && !useServer ? data.slice(from, to) : data,
+		pages: Math.ceil(total / perPage),
+		page,
+		from,
+		to,
+		perPage,
+		setPage,
+		totalHeight: tableHeadHeight + paginatorHeight + (to - from) * rowHeight
+	};
+};
+//#endregion
+export { usePages };

package/ui/Modules/Dashboard/components/Widgets/Table/hooks/useSort.d.ts

@@ -0,0 +1,10 @@
+import { TableRow, WidgetSort } from '../types';
+interface UseSort {
+    (data: TableRow[], enabled: boolean, initialSort: WidgetSort | undefined): {
+        toggleSort: (column: string) => () => void;
+        sort: WidgetSort | null;
+        sortedData: TableRow[];
+    };
+}
+export declare const useSort: UseSort;
+export {};

package/ui/Modules/Dashboard/components/Widgets/Table/hooks/useSort.js

@@ -0,0 +1,31 @@
+import React, { useEffect } from "react";
+import omit from "lodash/omit";
+import orderBy from "lodash/orderBy";
+//#region packages/ui/Modules/Dashboard/components/Widgets/Table/hooks/useSort.ts
+const initialSortValue = {};
+const useSort = (data, enabled, initialSort = initialSortValue) => {
+	const [sort, setSort] = React.useState(initialSort);
+	const toggleSort = React.useCallback((column) => () => {
+		if (sort[column] === "desc") setSort(omit(sort, [column]));
+		else if (sort[column] === "asc") setSort({
+			...sort,
+			[column]: "desc"
+		});
+		else setSort({ [column]: "asc" });
+	}, [sort]);
+	useEffect(() => {
+		setSort(initialSort);
+	}, [initialSort]);
+	if (enabled) return {
+		toggleSort,
+		sort,
+		sortedData: orderBy(data, Object.keys(sort).map((column) => `${column}.value`), Object.values(sort))
+	};
+	return {
+		toggleSort,
+		sort,
+		sortedData: data
+	};
+};
+//#endregion
+export { useSort };

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

@@ -0,0 +1,5 @@
+import Table from './Table';
+export * from './Table';
+export * as components from './components/IconLabelCell';
+export * from './Config';
+export default Table;

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

@@ -0,0 +1,7 @@
+import { IconLabelCell_exports } from "./components/IconLabelCell.js";
+import Table from "./Table.js";
+import { Config } from "./Config.js";
+//#region packages/ui/Modules/Dashboard/components/Widgets/Table/index.tsx
+var Table_default = Table;
+//#endregion
+export { Config, IconLabelCell_exports as components, Table_default as default };

package/ui/Modules/Dashboard/components/Widgets/Table/storybook.sample.d.ts

@@ -0,0 +1,73 @@
+import { components } from '.';
+export declare const tableData: {
+    id: string;
+    company: {
+        icon: string;
+        label: string;
+        value: string;
+        text: string;
+    };
+    category: {
+        icon: string;
+        label: string;
+        value: string;
+    };
+    views: {
+        label: string;
+        value: number;
+        text: string;
+    };
+    revenue: {
+        label: string;
+        value: number;
+    };
+    sales: {
+        icon: string;
+        label: string;
+        value: number;
+    };
+}[];
+export declare const tableBigData: {
+    id: number;
+    readableId: {
+        text: number;
+    };
+    company: {
+        icon: string;
+        label: string;
+        value: string;
+        text: string;
+    };
+    category: {
+        icon: string;
+        label: string;
+        value: string;
+    };
+    views: {
+        label: number;
+        value: number;
+        text: string;
+    };
+    revenue: {
+        label: string;
+        value: number;
+    };
+    sales: {
+        icon: string;
+        label: string;
+        value: number;
+    };
+}[];
+export declare const tableColumns: ({
+    key: string;
+    label: string;
+    component?: undefined;
+} | {
+    key: string;
+    label: string;
+    component: ({ icon, label, text, iconRight }: components.IconLabelCellProps) => import("react").JSX.Element;
+} | {
+    key: string;
+    label: string;
+    component: import("react").ComponentType<components.IconLabelCellProps>;
+})[];

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