@symply.io/basic-components 1.1.1 → 1.1.2-beta.2

package/DataTable/TableBody.d.ts

@@ -0,0 +1,3 @@
+import { TableBodyProps, KvProps } from "./types";
+declare function TBody<RowProps extends KvProps, ExtendedProps extends KvProps>(props: TableBodyProps<RowProps, ExtendedProps>): JSX.Element;
+export default TBody;

package/DataTable/TableBody.js

@@ -0,0 +1,21 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import TableRow from "@mui/material/TableRow";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableBodyRow from "./TableBodyRow";
+function TBody(props) {
+    var rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, _a = props.noDataText, noDataText = _a === void 0 ? "No Data!" : _a, onRowClick = props.onRowClick;
+    return (_jsx(TableBody, { children: rows.length > 0 ? (rows.map(function (row, index) { return (_jsx(TableBodyRow, { row: row, rows: rows, columns: columns, forFrozen: forFrozen, onRowClick: onRowClick }, "DataTable_".concat(index))); })) : (_jsx(TableRow, { children: _jsx(TableCell, __assign({ colSpan: columns.length, align: "center" }, { children: noDataText })) })) }));
+}
+export default TBody;

package/DataTable/TableBodyRow.d.ts

@@ -0,0 +1,3 @@
+import { TableBodyRowProps, KvProps } from "./types";
+declare function TableBodyRow<RowProps extends KvProps, ExtendedProps extends KvProps>(props: TableBodyRowProps<RowProps, ExtendedProps>): JSX.Element;
+export default TableBodyRow;

package/DataTable/TableBodyRow.js

@@ -0,0 +1,36 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement } from "react";
+import TableRow from "@mui/material/TableRow";
+import TableCell from "@mui/material/TableCell";
+import { alpha, useTheme } from "@mui/material/styles";
+function TableBodyRow(props) {
+    var row = props.row, rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, onRowClick = props.onRowClick;
+    var theme = useTheme();
+    return (_jsx(TableRow, __assign({ sx: {
+            "&:hover": {
+                cursor: !forFrozen && onRowClick ? "pointer" : "default",
+                backgroundColor: !forFrozen && onRowClick
+                    ? alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
+                    : "initial"
+            }
+        }, onClick: !forFrozen && onRowClick
+            ? function () {
+                onRowClick(row);
+            }
+            : undefined }, { children: columns.map(function (col) {
+            var accessor = col.accessor, Cell = col.Cell, width = col.width, _a = col.align, align = _a === void 0 ? "center" : _a;
+            return (_jsx(TableCell, __assign({ align: align, sx: { width: width } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));
+        }) })));
+}
+export default TableBodyRow;

package/DataTable/TableFooter.d.ts

@@ -0,0 +1,3 @@
+import { TableFooterProps, KvProps } from "./types";
+declare function TableFooter<RowProps extends KvProps, ExtendedProps extends KvProps>(props: TableFooterProps<RowProps, ExtendedProps>): JSX.Element;
+export default TableFooter;

package/DataTable/TableFooter.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement } from "react";
+import TableRow from "@mui/material/TableRow";
+import Footer from "@mui/material/TableFooter";
+import TableCell from "@mui/material/TableCell";
+function TableFooter(props) {
+    var footers = props.footers;
+    return (_jsx(Footer, { children: _jsx(TableRow, __assign({ sx: { backgroundColor: "#eaf0f6" } }, { children: footers.map(function (footer) {
+                var accessor = footer.accessor, Cell = footer.Cell, _a = footer.disablePadding, disablePadding = _a === void 0 ? false : _a, _b = footer.align, align = _b === void 0 ? "center" : _b, width = footer.width;
+                return (_jsx(TableCell, __assign({ align: align, padding: disablePadding ? "none" : "normal", sx: {
+                        width: width,
+                        whiteSpace: "nowrap",
+                        textOverflow: "ellipsis",
+                        overflow: "hidden",
+                        userSelect: "none"
+                    } }, { children: cloneElement(Cell) }), accessor));
+            }) })) }));
+}
+export default TableFooter;

package/DataTable/TableHeader.d.ts

@@ -0,0 +1,3 @@
+import { TableHeaderProps, KvProps } from "./types";
+declare function TableHeader<RowProps extends KvProps, ExtendedProps extends KvProps>(props: TableHeaderProps<RowProps, ExtendedProps>): JSX.Element;
+export default TableHeader;

package/DataTable/TableHeader.js

@@ -0,0 +1,33 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement } from "react";
+import TableRow from "@mui/material/TableRow";
+import TableHead from "@mui/material/TableHead";
+import TableCell from "@mui/material/TableCell";
+function TableHeader(props) {
+    var headers = props.headers;
+    return (_jsx(TableHead, { children: _jsx(TableRow, __assign({ sx: { backgroundColor: "#eaf0f6" } }, { children: headers.map(function (header) {
+                var accessor = header.accessor, Cell = header.Cell, _a = header.disablePadding, disablePadding = _a === void 0 ? false : _a, _b = header.align, align = _b === void 0 ? "center" : _b, width = header.width, title = header.title, _c = header.sortable, sortable = _c === void 0 ? false : _c, onSort = header.onSort;
+                return (_jsx(TableCell, __assign({ title: title, align: align, padding: disablePadding ? "none" : "normal", sx: {
+                        width: width,
+                        whiteSpace: "nowrap",
+                        textOverflow: "ellipsis",
+                        overflow: "hidden",
+                        userSelect: "none",
+                        cursor: sortable ? "pointer" : "default"
+                    }, onClick: function () {
+                        onSort({ accessor: accessor });
+                    } }, { children: cloneElement(Cell) }), accessor));
+            }) })) }));
+}
+export default TableHeader;

package/DataTable/index.d.ts

@@ -0,0 +1,4 @@
+import { DataTableProps, KvProps } from "./types";
+declare function DataTable<RowProps extends KvProps, ExtendedProps extends KvProps>(props: DataTableProps<RowProps, ExtendedProps>): JSX.Element;
+export default DataTable;
+export { default as useDataTable } from "./useTable";

package/DataTable/index.js

@@ -0,0 +1,28 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Table from "@mui/material/Table";
+import TableContainer from "@mui/material/TableContainer";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
+import TableBody from "./TableBody";
+import TableHeader from "./TableHeader";
+import TableFooter from "./TableFooter";
+function DataTable(props) {
+    var _a = props.columns, columns = _a === void 0 ? [] : _a, _b = props.rows, rows = _b === void 0 ? [] : _b, _c = props.headers, headers = _c === void 0 ? [] : _c, _d = props.footers, footers = _d === void 0 ? [] : _d, _e = props.noDataText, noDataText = _e === void 0 ? "No Data!" : _e, dense = props.dense, stickyHeader = props.stickyHeader, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onRowClick = props.onRowClick;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(TableContainer, { children: [_jsxs(Table, __assign({ sx: { minWidth: 600 }, stickyHeader: stickyHeader, size: dense ? "small" : "medium" }, { children: [_jsx(TableHeader, { headers: headers }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick })] })), footers.length > 0 ? _jsx(TableFooter, { footers: footers }) : _jsx(_Fragment, {})] }) })));
+}
+export default DataTable;
+export { default as useDataTable } from "./useTable";

package/DataTable/types.d.ts

@@ -0,0 +1,70 @@
+import { ReactElement, CSSProperties } from "react";
+export declare type OrderType = "ASC" | "DESC" | "NONE";
+export declare type KvProps = Record<string, unknown>;
+export declare type SortingProps = {
+    accessor: string;
+    order: OrderType;
+};
+declare type InitialStateProps = {
+    sortBy?: SortingProps;
+};
+export declare type ColumnProps = {
+    headerTip?: string;
+    disablePadding?: boolean;
+    Header: ReactElement;
+    Body: ReactElement;
+    Footer?: ReactElement;
+    align?: "left" | "center" | "right";
+    accessor: string;
+    sortable?: boolean;
+    fixable?: "left" | "right";
+    width?: number;
+};
+export declare type UseTableBaseProps<RowProps extends KvProps> = {
+    data: Array<RowProps>;
+    columns: Array<ColumnProps>;
+    initialState?: InitialStateProps;
+    disableSortBy?: boolean;
+    onSort?: (props: SortingProps) => unknown;
+};
+export declare type UseTableProps<RowProps extends KvProps, ExtendedProps extends KvProps> = UseTableBaseProps<RowProps> & ExtendedProps;
+export declare type TableHeaderCellProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Pick<ColumnProps, "align" | "accessor" | "fixable" | "width" | "disablePadding"> & Omit<UseTableProps<RowProps, ExtendedProps>, keyof UseTableBaseProps<RowProps>> & {
+    Cell: ReactElement;
+    title: string;
+    onSort: ({ accessor }: Pick<SortingProps, "accessor">) => unknown;
+};
+export declare type TableBodyCellProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Pick<ColumnProps, "align" | "accessor" | "fixable" | "width" | "disablePadding"> & Omit<UseTableProps<RowProps, ExtendedProps>, keyof UseTableBaseProps<RowProps>> & {
+    Cell: ReactElement;
+};
+export declare type TableFooterCellProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Pick<ColumnProps, "align" | "accessor" | "fixable" | "width" | "disablePadding"> & Omit<UseTableProps<RowProps, ExtendedProps>, keyof UseTableBaseProps<RowProps>> & {
+    Cell: ReactElement;
+};
+export declare type UserTableReturns<RowProps extends KvProps, ExtendedProps extends KvProps> = {
+    headers: Array<TableHeaderCellProps<RowProps, ExtendedProps>>;
+    footers: Array<TableFooterCellProps<RowProps, ExtendedProps>>;
+    columns: Array<TableBodyCellProps<RowProps, ExtendedProps>>;
+    rows: Array<RowProps>;
+};
+export declare type TableHeaderProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
+    headers: Array<TableHeaderCellProps<RowProps, ExtendedProps>>;
+};
+export declare type TableBodyProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
+    columns: Array<TableBodyCellProps<RowProps, ExtendedProps>>;
+    rows: Array<RowProps>;
+    noDataText?: string;
+    forFrozen?: boolean;
+    onRowClick?: (row: RowProps) => unknown;
+};
+export declare type TableBodyRowProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableBodyProps<RowProps, ExtendedProps>, "noDataText"> & {
+    row: RowProps;
+};
+export declare type TableFooterProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
+    footers: Array<TableFooterCellProps<RowProps, ExtendedProps>>;
+};
+export declare type DataTableProps<RowProps extends KvProps, ExtendedProps extends KvProps> = TableHeaderProps<RowProps, ExtendedProps> & Omit<TableBodyProps<RowProps, ExtendedProps>, "forFrozen"> & TableFooterProps<RowProps, ExtendedProps> & {
+    dense?: boolean;
+    stickyHeader?: boolean;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+};
+export {};

package/DataTable/types.js

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

package/DataTable/useTable.d.ts

@@ -0,0 +1,3 @@
+import { UseTableProps, KvProps, UserTableReturns } from "./types";
+declare function useTable<T extends KvProps, F extends KvProps>(props: UseTableProps<T, F>): UserTableReturns<T, F>;
+export default useTable;

package/DataTable/useTable.js

@@ -0,0 +1,94 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, useState, useMemo, useCallback } from "react";
+function useTable(props) {
+    var data = props.data, columns = props.columns, initialState = props.initialState, disableSortBy = props.disableSortBy, onSort = props.onSort, rest = __rest(props, ["data", "columns", "initialState", "disableSortBy", "onSort"]);
+    if (!data) {
+        throw new Error('"data" is required but got null or undefined');
+    }
+    if (!columns) {
+        throw new Error('"columns" is required but got null or undefined');
+    }
+    var sortBy = (initialState || {}).sortBy;
+    var _a = sortBy || {}, accessor = _a.accessor, order = _a.order;
+    var _b = useState({
+        accessor: accessor || "",
+        order: !!accessor ? order || "NONE" : "NONE"
+    }), sortingProps = _b[0], setSortingProps = _b[1];
+    var handleSort = useCallback(function (_a) {
+        var accessor = _a.accessor;
+        if (!disableSortBy) {
+            var newSortingProps = __assign({}, sortingProps);
+            if (accessor !== sortingProps.accessor ||
+                sortingProps.order === "NONE") {
+                newSortingProps = { accessor: accessor, order: "ASC" };
+            }
+            else if (sortingProps.order === "ASC") {
+                newSortingProps = __assign(__assign({}, sortingProps), { order: "DESC" });
+            }
+            else {
+                newSortingProps = __assign(__assign({}, sortingProps), { order: "NONE" });
+            }
+            if (onSort) {
+                onSort(__assign({}, newSortingProps));
+            }
+            setSortingProps(__assign({}, newSortingProps));
+        }
+    }, [disableSortBy, onSort, sortingProps]);
+    var renderSortingSymbol = useCallback(function (accessor) {
+        var field = sortingProps.accessor, order = sortingProps.order;
+        if (accessor !== field || order === "NONE") {
+            return "";
+        }
+        if (order === "ASC") {
+            return "↑";
+        }
+        return "↓";
+    }, [sortingProps]);
+    var rows = useMemo(function () { return data.map(function (d) { return (__assign({}, d)); }); }, [data]);
+    var cols = useMemo(function () {
+        return columns.map(function (col) {
+            var Body = col.Body;
+            return __assign(__assign({ Cell: cloneElement(Body || _jsx(_Fragment, {}), { column: col }) }, col), rest);
+        });
+    }, [columns, rest]);
+    var headers = useMemo(function () {
+        return columns.map(function (col) {
+            var Header = col.Header, accessor = col.accessor, sortable = col.sortable, headerTip = col.headerTip;
+            var canSortBy = sortable && !disableSortBy;
+            return __assign(__assign({ Cell: (_jsxs(_Fragment, { children: [cloneElement(Header || _jsx(_Fragment, {}), { column: col }), canSortBy && renderSortingSymbol(accessor)] })), title: "".concat(headerTip || "").concat(canSortBy ? " (Click to sort)" : ""), sortable: canSortBy, onSort: canSortBy ? handleSort : function () { } }, col), rest);
+        });
+    }, [columns, disableSortBy, handleSort, renderSortingSymbol, rest]);
+    var footers = useMemo(function () {
+        return columns.map(function (col) {
+            var Footer = col.Footer;
+            return __assign(__assign({ Cell: cloneElement(Footer || _jsx(_Fragment, {}), {
+                    column: col,
+                    rows: rows
+                }) }, col), rest);
+        });
+    }, [columns, rest, rows]);
+    return { headers: headers, footers: footers, columns: cols, rows: rows };
+}
+export default useTable;

package/Sidebar/SidebarItem.js

@@ -10,13 +10,12 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import colorAlpha from "color-alpha";
 import Chip from "@mui/material/Chip";
 import ListItem from "@mui/material/ListItem";
 import ListItemText from "@mui/material/ListItemText";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import LockIcon from "@mui/icons-material/LockRounded";
-import useTheme from "@mui/material/styles/useTheme";
+import { useTheme, alpha } from "@mui/material/styles";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 function SidebarItem(props) {
@@ -27,10 +26,10 @@ function SidebarItem(props) {
             display: "flex",
             width: "100%",
             "&:hover": {
-                backgroundColor: colorAlpha(theme.palette.primary.main, 0.3)
+                backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
             },
             backgroundColor: active
-                ? colorAlpha(theme.palette.primary.main, 0.2)
+                ? alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity)
                 : undefined
         } }, { children: [_jsx(ListItemIcon, __assign({ sx: {
                     color: active ? theme.palette.primary.main : undefined,

package/index.d.ts

@@ -6,6 +6,7 @@ export * from "./BasicTable";
 export * from "./BreadCrumbs";
 export * from "./CheckBox";
 export * from "./Copyright";
+export * from "./DataTable";
 export * from "./DateInput";
 export * from "./DigitInput";
 export * from "./DynamicHeaderBar";
@@ -33,6 +34,7 @@ export { default as BasicModal } from "./BasicModal";
 export { default as BasicTable } from "./BasicTable";
 export { default as BreadCrumbs } from "./BreadCrumbs";
 export { default as Copyright } from "./Copyright";
+export { default as DataTable } from "./DataTable";
 export { default as DigitInput } from "./DigitInput";
 export { default as DynamicHeaderBar } from "./DynamicHeaderBar";
 export { default as FeinInput } from "./FeinInput";

package/index.js

@@ -6,6 +6,7 @@ export * from "./BasicTable";
 export * from "./BreadCrumbs";
 export * from "./CheckBox";
 export * from "./Copyright";
+export * from "./DataTable";
 export * from "./DateInput";
 export * from "./DigitInput";
 export * from "./DynamicHeaderBar";
@@ -33,6 +34,7 @@ export { default as BasicModal } from "./BasicModal";
 export { default as BasicTable } from "./BasicTable";
 export { default as BreadCrumbs } from "./BreadCrumbs";
 export { default as Copyright } from "./Copyright";
+export { default as DataTable } from "./DataTable";
 export { default as DigitInput } from "./DigitInput";
 export { default as DynamicHeaderBar } from "./DynamicHeaderBar";
 export { default as FeinInput } from "./FeinInput";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.1.1",
+  "version": "1.1.2-beta.2",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",