pixelize-design-library 1.1.33 → 1.1.35

package/dist/Pages/KaTableExample.js

@@ -87,7 +87,7 @@ var columns = [
         key: "column2",
         title: "Column 2",
         dataType: DataType.String,
-        width: 150,
+        width: 250,
         // visible: false,
     },
     {
@@ -95,12 +95,28 @@ var columns = [
         title: "Column 3",
         dataType: DataType.Number,
         width: 150,
+        filter: true,
+        menu: [
+            {
+                label: "Filter",
+                onClick: function () { return console.log("MENU Filter clicks"); },
+                submenu: [
+                    {
+                        label: "Filter by Date",
+                        onClick: function () { return console.log("SUBMENU Date clicks"); },
+                    },
+                    { label: "Filter by Name" },
+                    // { label: "Filter by Status", action: "Filter by Status" },
+                ],
+            },
+        ],
     },
     {
         key: "column4",
         title: "Column 4",
         dataType: DataType.Number,
         width: 150,
+        sortable: true,
     },
     {
         key: "column5",
@@ -119,6 +135,7 @@ var columns = [
         title: "Column 7",
         dataType: DataType.Number,
         width: 150,
+        sortable: true,
     },
     {
         key: "column8",
@@ -222,7 +239,7 @@ var KaTableExample = function () {
                 console.log("Row clicked", rowKeyValue);
             }, selected: selectedRows, onSelectionChange: function (selectedRows) {
                 handleCheckSelect(selectedRows);
-            }, columnVisibility: true, menuItems: menuItems, 
+            }, columnVisibility: true, 
             // onSortChange={handleSortChange}
             // onMenuItemClick={handleMenuItemClick}
             // format={kaTableFormat}

package/dist/Pages/katable.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const katable: () => React.JSX.Element;
+export default katable;

package/dist/Pages/katable.js

@@ -0,0 +1,194 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var KaTable_1 = __importDefault(require("../Components/KaTable/KaTable"));
+var KaTable_2 = require("../Components/KaTable/KaTable");
+var icons_1 = require("@chakra-ui/icons");
+var katable = function () {
+    var DataType = KaTable_2.TableEnums.DataType;
+    var dataArray = Array(50)
+        .fill(undefined)
+        .map(function (_, index) { return ({
+        column1: index % 2 === 0,
+        column2: "column:2 row:".concat(index + 1),
+        column3: index + 5,
+        column4: index + 10,
+        column5: index + 15,
+        column6: index + 20,
+        column7: index + 25,
+        column8: index + 30,
+        column9: index + 35,
+        column10: index + 40,
+        column11: index + 45,
+        column12: index + 50,
+        column13: index + 55,
+        column14: index + 60,
+        column15: new Date(2022, 11, index),
+        id: index + 1,
+    }); });
+    var columns = [
+        {
+            key: "column1",
+            title: "Column 1",
+            dataType: DataType.Boolean,
+            width: 150,
+            columnFreeze: true,
+            customHeader: false,
+        },
+        {
+            key: "column2",
+            title: "Column 2",
+            dataType: DataType.String,
+            width: 150,
+        },
+        {
+            key: "column3",
+            title: "Column 3",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column4",
+            title: "Column 4",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column5",
+            title: "Column 5",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column6",
+            title: "Column 6",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column7",
+            title: "Column 7",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column8",
+            title: "Column 8",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column9",
+            title: "Column 9",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column10",
+            title: "Column 10",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column11",
+            title: "Column 11",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column12",
+            title: "Column 12",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column13",
+            title: "Column 13",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column14",
+            title: "Column 14",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column15",
+            title: "Column 15",
+            dataType: DataType.Date,
+            width: 150,
+        },
+        {
+            key: "editColumn",
+            width: 80,
+            customHeader: false,
+        },
+    ];
+    var kaTableFormat = function (props) {
+        if (props.column.dataType === DataType.Date) {
+            return (props.value &&
+                props.value.toLocaleDateString("en", {
+                    month: "2-digit",
+                    day: "2-digit",
+                    year: "numeric",
+                }));
+        }
+    };
+    var EditButton = function (_a) {
+        var dispatch = _a.dispatch, rowKeyValue = _a.rowKeyValue;
+        return (react_1.default.createElement("div", { className: "edit-cell-button" },
+            react_1.default.createElement(icons_1.EditIcon, null),
+            react_1.default.createElement(icons_1.DeleteIcon, null)));
+    };
+    var handleSortChange = function (newSortState, columnName) {
+        console.log("Sort state for ".concat(columnName, " changed to:"), newSortState);
+    };
+    var handleMenuItemClick = function (action, columnName) {
+        console.log("Menu item clicked for ".concat(columnName, ":"), action);
+    };
+    var menuItems = [
+        { label: "Sort", action: "Sort" },
+        { label: "Hide column", action: "Hide column" },
+        {
+            label: "Filter",
+            submenu: [
+                { label: "Filter by Date", action: "Filter by Date" },
+                { label: "Filter by Name", action: "Filter by Name" },
+                { label: "Filter by Status", action: "Filter by Status" },
+            ],
+        },
+    ];
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(KaTable_1.default, { data: dataArray, columns: columns, checkSelect: true, onRowClick: function (rowKeyValue) {
+                console.log("Row clicked", rowKeyValue);
+            }, onSelectionChange: function (selectedRows) {
+                console.log("Selected rows:", selectedRows);
+            }, menuItems: menuItems, onSortChange: handleSortChange, onMenuItemClick: handleMenuItemClick, format: kaTableFormat, childComponents: {
+                cellText: {
+                    content: function (props) {
+                        if (props.column.key === "editColumn") {
+                            return react_1.default.createElement(EditButton, __assign({}, props));
+                        }
+                    },
+                },
+            }, loading: {
+                enabled: false,
+                text: "Loading data",
+            } })));
+};
+exports.default = katable;

package/dist/Pages/table.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const TableExample: () => React.JSX.Element;

package/dist/Pages/table.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableExample = void 0;
+var react_1 = __importDefault(require("react"));
+var Table_1 = __importDefault(require("../Components/Table/Table"));
+var tableData = [
+    {
+        id: 1,
+        name: "John Doe",
+        age: 30,
+        gender: "Male",
+    },
+    {
+        id: 2,
+        name: "Jane Doe",
+        age: 25,
+        gender: "Female",
+    },
+    {
+        id: 3,
+        name: "Bob Smith",
+        age: 40,
+        gender: "Male",
+    },
+];
+var column = [
+    {
+        label: "Name",
+        id: "name",
+        isFreeze: true,
+        isSort: true,
+    },
+    {
+        label: "Age",
+        id: "age",
+        isFreeze: false,
+        isSort: true,
+    },
+    {
+        label: "Gender",
+        id: "gender",
+    },
+    {
+        label: "Action",
+        id: "action",
+        isVisiblity: true,
+        node: function (props) {
+            return props.name;
+        },
+    },
+];
+var TableExample = function () {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(Table_1.default, { columns: column, data: tableData, isCheckbox: true, isVisiblity: false, isLoading: false, noBorders: false, onSelection: function (dd) { return console.log(dd); } })));
+};
+exports.TableExample = TableExample;

package/dist/Theme/fonts.d.ts

@@ -1,4 +1,5 @@
 import "@fontsource/ubuntu-sans";
+import "@fontsource-variable/inter";
 declare const fonts: {
     fonts: {
         body: string;

package/dist/Theme/fonts.js

@@ -1,11 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 require("@fontsource/ubuntu-sans");
+// Supports weights 100-900
+require("@fontsource-variable/inter");
 var fonts = {
     fonts: {
-        body: "Ubuntu Sans, serif",
-        heading: "Ubuntu Sans, serif",
-        mono: "Ubuntu Sans, monospace",
+        body: "Inter Variable, sans-serif",
+        heading: "Inter Variable, sans-serif",
+        mono: "Inter Variable, sans-serif",
+        // body: "Ubuntu Sans, serif",
+        // heading: "Ubuntu Sans, serif",
+        // mono: "Ubuntu Sans, monospace",
     },
     fontSizes: {
         xs: "0.75rem",

package/dist/Utils/common.d.ts

@@ -0,0 +1,7 @@
+export declare function SortMultiColumnData(data: Record<string, any>[], sortConfig: {
+    column: string;
+    direction: string;
+}[]): Record<string, any>[];
+export declare const getPreviousColumnWidth: (columns: any, key: any) => any;
+export declare const getFieldType: (header: string, data: any) => "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
+export declare const calculateLeftOffset: (columns: number[], index: number) => number;

package/dist/Utils/common.js

@@ -0,0 +1,64 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateLeftOffset = exports.getFieldType = exports.getPreviousColumnWidth = exports.SortMultiColumnData = void 0;
+function SortMultiColumnData(data, sortConfig) {
+    if (!sortConfig.length)
+        return data;
+    return __spreadArray([], data, true).sort(function (a, b) {
+        for (var _i = 0, sortConfig_1 = sortConfig; _i < sortConfig_1.length; _i++) {
+            var _a = sortConfig_1[_i], column = _a.column, direction = _a.direction;
+            if (direction === "none") {
+                continue;
+            }
+            var dirMultiplier = direction === "asc" ? 1 : -1;
+            // Compare values for the current column
+            if (a[column] < b[column])
+                return -1 * dirMultiplier;
+            if (a[column] > b[column])
+                return 1 * dirMultiplier;
+            // If values are equal, continue to the next sorting rule
+        }
+        return 0; // Return 0 if all sort conditions are equal
+    });
+}
+exports.SortMultiColumnData = SortMultiColumnData;
+var getPreviousColumnWidth = function (columns, key) {
+    var index = columns === null || columns === void 0 ? void 0 : columns.findIndex(function (column) { return column.key === key; });
+    if (index > 0) {
+        return columns[index - 1].width;
+    }
+    return 0;
+};
+exports.getPreviousColumnWidth = getPreviousColumnWidth;
+// export function calculateLeftOffset(columns: any, currentIndex: number) {
+//   let offset = 0;
+//   for (let i = 0; i < currentIndex; i++) {
+//     if (columns[i].isFreeze) {
+//       offset += columns[i].width || 100;
+//     }
+//   }
+//   return offset;
+// }
+var getFieldType = function (header, data) {
+    for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
+        var row = data_1[_i];
+        if (row[header] !== null) {
+            return typeof row[header];
+        }
+    }
+    return "string";
+};
+exports.getFieldType = getFieldType;
+var calculateLeftOffset = function (columns, index) {
+    return columns.slice(0, index).reduce(function (sum, width) { return sum + width; }, 0);
+};
+exports.calculateLeftOffset = calculateLeftOffset;

package/dist/Utils/table.d.ts

@@ -0,0 +1,9 @@
+import { KaTableProps } from "../Components/KaTable/KaTableProps";
+import { DataObject } from "../Components/Table/TableProps";
+export declare function SortMultiColumnData(data: Record<string, string | number>[], sortConfig: {
+    column: string;
+    direction: string;
+}[]): Record<string, string | number>[];
+export declare const getPreviousColumnWidth: (columns: KaTableProps["columns"], key: string) => any;
+export declare const getFieldType: (header: string, data: DataObject[]) => "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
+export declare const calculateLeftOffset: (columns: number[], index: number) => number;

package/dist/Utils/table.js

@@ -0,0 +1,64 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateLeftOffset = exports.getFieldType = exports.getPreviousColumnWidth = exports.SortMultiColumnData = void 0;
+function SortMultiColumnData(data, sortConfig) {
+    if (!sortConfig.length)
+        return data;
+    return __spreadArray([], data, true).sort(function (a, b) {
+        for (var _i = 0, sortConfig_1 = sortConfig; _i < sortConfig_1.length; _i++) {
+            var _a = sortConfig_1[_i], column = _a.column, direction = _a.direction;
+            if (direction === "none") {
+                continue;
+            }
+            var dirMultiplier = direction === "asc" ? 1 : -1;
+            // Compare values for the current column
+            if (a[column] < b[column])
+                return -1 * dirMultiplier;
+            if (a[column] > b[column])
+                return 1 * dirMultiplier;
+            // If values are equal, continue to the next sorting rule
+        }
+        return 0; // Return 0 if all sort conditions are equal
+    });
+}
+exports.SortMultiColumnData = SortMultiColumnData;
+var getPreviousColumnWidth = function (columns, key) {
+    var index = columns === null || columns === void 0 ? void 0 : columns.findIndex(function (column) { return column.key === key; });
+    if (index > 0) {
+        return columns[index - 1].width;
+    }
+    return 0;
+};
+exports.getPreviousColumnWidth = getPreviousColumnWidth;
+// export function calculateLeftOffset(columns: any, currentIndex: number) {
+//   let offset = 0;
+//   for (let i = 0; i < currentIndex; i++) {
+//     if (columns[i].isFreeze) {
+//       offset += columns[i].width || 100;
+//     }
+//   }
+//   return offset;
+// }
+var getFieldType = function (header, data) {
+    for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
+        var row = data_1[_i];
+        if (row[header] !== null) {
+            return typeof row[header];
+        }
+    }
+    return "string";
+};
+exports.getFieldType = getFieldType;
+var calculateLeftOffset = function (columns, index) {
+    return columns.slice(0, index).reduce(function (sum, width) { return sum + width; }, 0);
+};
+exports.calculateLeftOffset = calculateLeftOffset;

package/dist/bootstrap.js

@@ -7,8 +7,7 @@ var react_1 = __importDefault(require("react"));
 var client_1 = __importDefault(require("react-dom/client"));
 var App_1 = __importDefault(require("./App"));
 var withTheme_1 = __importDefault(require("./withTheme"));
-var Theme_1 = require("./Theme");
 var root = client_1.default.createRoot(document.getElementById("root"));
-var ThemeApp = (0, withTheme_1.default)(App_1.default, Theme_1.meadow);
+var ThemeApp = (0, withTheme_1.default)(App_1.default);
 root.render(react_1.default.createElement(react_1.default.StrictMode, null,
     react_1.default.createElement(ThemeApp, null)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "1.1.33",
+  "version": "1.1.35",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -11,6 +11,7 @@
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@fontsource-variable/inter": "^5.1.0",
     "@fontsource/ubuntu-sans": "^5.1.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",

package/dist/Theme/Default/fonts.d.ts

@@ -1,35 +0,0 @@
-import "@fontsource/ubuntu-sans";
-declare const fontOptions: {
-    fonts: {
-        body: string;
-        heading: string;
-        mono: string;
-    };
-    fontSizes: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
-        "3xl": string;
-        "4xl": string;
-        "5xl": string;
-        "6xl": string;
-        "7xl": string;
-        "8xl": string;
-        "9xl": string;
-    };
-    fontWeights: {
-        hairline: number;
-        thin: number;
-        light: number;
-        normal: number;
-        medium: number;
-        semibold: number;
-        bold: number;
-        extrabold: number;
-        black: number;
-    };
-};
-export default fontOptions;

package/dist/Theme/Default/fonts.js

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("@fontsource/ubuntu-sans");
-var fontOptions = {
-    fonts: {
-        body: "Ubuntu Sans, serif",
-        heading: "Ubuntu Sans, serif",
-        mono: "Ubuntu Sans, monospace",
-    },
-    fontSizes: {
-        xs: "0.75rem",
-        sm: "0.875rem",
-        md: "1rem",
-        lg: "1.125rem",
-        xl: "1.25rem",
-        "2xl": "1.5rem",
-        "3xl": "1.875rem",
-        "4xl": "2.25rem",
-        "5xl": "3rem",
-        "6xl": "3.75rem",
-        "7xl": "4.5rem",
-        "8xl": "6rem",
-        "9xl": "8rem",
-    },
-    fontWeights: {
-        hairline: 100,
-        thin: 200,
-        light: 300,
-        normal: 400,
-        medium: 500,
-        semibold: 600,
-        bold: 700,
-        extrabold: 800,
-        black: 900,
-    },
-};
-exports.default = fontOptions;