pixelize-design-library 1.1.27 → 1.1.29

package/dist/Components/SelectSearch/SelectSearchProps.d.ts

@@ -21,7 +21,7 @@ export type SelectSearchProps = {
     rightIcon?: React.ReactNode;
     rightElementStyle?: {};
     isMultipleSelect?: boolean;
-    isRequired?: boolean;
+    isRequired?: boolean | undefined;
 };
 export type selectOptions = {
     id: string;

package/dist/Pages/KaTableExample.js

@@ -43,8 +43,7 @@ var KaTable_2 = require("../Components/KaTable/KaTable");
 var icons_1 = require("@chakra-ui/icons");
 var react_2 = require("@chakra-ui/react");
 var menuItems = [
-    { label: "Sort", action: "Sort" },
-    { label: "Hide column", action: "Hide column" },
+    { label: "Hide column", action: "hidecolumn" },
     {
         label: "Filter",
         submenu: [

package/dist/Pages/button.js

@@ -12,7 +12,7 @@ var ButtonPage = function () {
         react_1.default.createElement(ButtonGroupIcon_1.default, { buttonText: "hello", rightIcon: react_1.default.createElement(fi_1.FiHome, null), leftIcon: react_1.default.createElement(fi_1.FiHome, null), size: "md", variant: "solid", 
             // color="red"
             rightIconDropdown: true, dropdownOptions: [
-                { label: "123", id: "1" },
+                { label: "123", id: "1", image: react_1.default.createElement(fi_1.FiHome, { style: { marginRight: "20px" } }) },
                 { label: "456", id: "2" }
             ], onDropdownOptionClick: function (e, option) {
                 console.log(e, option);

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/selectSearch.js

@@ -32,7 +32,6 @@ var fi_1 = require("react-icons/fi");
 var SelectSearchs = function () {
     var _a = (0, react_1.useState)("Option 1"), selectSearchText = _a[0], setSelectSearchText = _a[1];
     var _b = (0, react_1.useState)(), selectedOption = _b[0], setSelectedOption = _b[1];
-    console.log("selectedOption", selectedOption);
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(SelectSearch_1.default, { options: [
                 { id: "1", label: "Option 1" },
@@ -49,6 +48,7 @@ var SelectSearchs = function () {
                 console.log("Selected option:", data);
             }, name: "hai", label: "SelectSearch", searchQuery: selectSearchText, rightIcon: react_1.default.createElement(fi_1.FiUser, { color: "gray.300" }), isMultipleSelect: true, onOptionMultiSelect: function (data) {
                 setSelectedOption(data);
+                console.log("Selected option:", data);
             } })));
 };
 exports.default = SelectSearchs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "1.1.27",
+  "version": "1.1.29",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",

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;