pixelize-design-library 1.1.20 → 1.1.21

package/dist/Pages/KaTableExample.js

@@ -41,6 +41,7 @@ var react_1 = __importStar(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 react_2 = require("@chakra-ui/react");
 var menuItems = [
     { label: "Sort", action: "Sort" },
     { label: "Hide column", action: "Hide column" },
@@ -88,6 +89,7 @@ var columns = [
         title: "Column 2",
         dataType: DataType.String,
         width: 150,
+        // visible: false,
     },
     {
         key: "column3",
@@ -176,28 +178,30 @@ var columns = [
 var KaTableExample = function () {
     var _a = (0, react_1.useState)(false), actionButtons = _a[0], setActionButtons = _a[1];
     var _b = (0, react_1.useState)([]), selectedRows = _b[0], setSelectedRows = _b[1];
-    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",
-                }));
-        }
-    };
+    // const kaTableFormat = (props: any) => {
+    //   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);
-    };
+    // const handleSortChange = (newSortState: any, columnName: any) => {
+    //   console.log(`Sort state for ${columnName} changed to:`, newSortState);
+    // };
+    // const handleMenuItemClick = (action: any, columnName: any) => {
+    //   console.log(`Menu item clicked for ${columnName}:`, action);
+    // };
     var handleCheckSelect = (0, react_1.useCallback)(function (selectedRows) {
         console.log("CB", selectedRows);
         if (selectedRows.length !== 0) {
@@ -208,13 +212,18 @@ var KaTableExample = function () {
         }
         setSelectedRows(selectedRows);
     }, []);
-    console.log(actionButtons, "actionButtons");
+    // console.log(actionButtons, "actionButtons");
+    var handleExample = function () {
+        setSelectedRows([]);
+    };
+    // console.log(selectedRows, "selectedRows");
     return (react_1.default.createElement("div", null,
+        react_1.default.createElement(react_2.Button, { onClick: handleExample }, "click here"),
         react_1.default.createElement(KaTable_1.default, { data: dataArray, columns: columns, checkSelect: true, onRowClick: function (rowKeyValue) {
                 console.log("Row clicked", rowKeyValue);
             }, selected: selectedRows, onSelectionChange: function (selectedRows) {
                 handleCheckSelect(selectedRows);
-            }, menuItems: menuItems, 
+            }, columnVisibility: true, menuItems: menuItems, 
             // onSortChange={handleSortChange}
             // onMenuItemClick={handleMenuItemClick}
             // format={kaTableFormat}

package/dist/Pages/selectSearch.d.ts

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

package/dist/Pages/selectSearch.js

@@ -1,12 +1,38 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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 react_1 = __importStar(require("react"));
 var SelectSearch_1 = __importDefault(require("../Components/SelectSearch/SelectSearch"));
 var fi_1 = require("react-icons/fi");
-var selectSearchs = function () {
+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" },
@@ -16,12 +42,13 @@ var selectSearchs = function () {
                     label: "clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3",
                 },
             ], inputOnchange: function (value) {
+                setSelectSearchText(value.toString());
                 console.log(value);
-                // setSelectSearchText(value);
-            }, initialSelectedOption: { id: "1", label: "Option 1" }, onOptionSelect: function () {
-                console.log();
-            }, name: "hai", 
-            // isOptionLoading={true}
-            label: "SelectSearch", searchQuery: "", rightIcon: react_1.default.createElement(fi_1.FiUser, { color: "gray.300" }) })));
+            }, initialSelectedOption: { id: "1", label: "Option 1" }, onOptionSelect: function (data) {
+                // setSelectSearchText(label);
+                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);
+            } })));
 };
-exports.default = selectSearchs;
+exports.default = SelectSearchs;

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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,37 @@
+"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;

package/package.json

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

package/dist/Pages/katable.d.ts

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

package/dist/Pages/katable.js

@@ -1,194 +0,0 @@
-"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;