pixelize-design-library 2.1.38 → 2.1.40

package/dist/Components/KanbanBoard/AccountRow.js

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var functions_1 = require("../../Utils/functions");
 var AccountRow = function (_a) {
     var _b, _c;
     var label = _a.label, value = _a.value;
     var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
     return (react_1.default.createElement(react_2.Flex, { w: "full" },
         react_1.default.createElement(react_2.Tooltip, { label: label, isDisabled: label.length <= 15, hasArrow: true },
-            react_1.default.createElement(react_2.Text, { color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[700], w: "45%", noOfLines: 1 }, label)),
+            react_1.default.createElement(react_2.Text, { color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[700], w: "45%", noOfLines: 1 }, (0, functions_1.toWords)(label))),
         react_1.default.createElement(react_2.Text, { w: "0.625rem", textAlign: "center" }, ":"),
         react_1.default.createElement(react_2.Tooltip, { label: value, isDisabled: value.length <= 17, hasArrow: true },
             react_1.default.createElement(react_2.Text, { fontWeight: 600, color: (_c = colors === null || colors === void 0 ? void 0 : colors.text) === null || _c === void 0 ? void 0 : _c[800], w: "calc(55% - 0.625rem)", noOfLines: 1 }, value))));

package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts

@@ -1,11 +1,6 @@
 export type Account = {
     id: string;
-    rating: string;
-    name: string;
-    owner: string;
-    site: string;
-    details?: string;
-    [key: string]: string | undefined;
+    [key: string]: string | number | null | undefined;
 };
 export type ColumnType = {
     id: string;

package/dist/Components/Table/Table.css

@@ -0,0 +1,16 @@
+.table_wrapper {
+  width: 100%;
+  border-collapse: collapse;
+  /* table-layout: fixed; */
+}
+
+.table_wrapper th .resize-handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 8px;
+  height: 100%;
+  cursor: col-resize;
+  background-color: transparent;
+  z-index: 999;
+}

package/dist/Pages/KaTableExample.d.ts

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

package/dist/Pages/KaTableExample.js

@@ -0,0 +1,259 @@
+"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 __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 = __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: "Hide column", action: "hidecolumn" },
+    {
+        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" },
+        ],
+    },
+];
+var DataType = KaTable_2.TableEnums.DataType;
+var dataArray = Array(5)
+    .fill(undefined)
+    .map(function (_, index) { return ({
+    column1: index % 2 === 0,
+    column2: "column:2 row:".concat(index + 1),
+    column3: "column:3 row:".concat(index + 1),
+    column4: "column:4 row:".concat(index + 1),
+    column5: "column:5 row:".concat(index + 1),
+    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: 100,
+        columnFreeze: true,
+        customHeader: false,
+    },
+    {
+        key: "column2",
+        title: "Column 2",
+        dataType: DataType.String,
+        width: 250,
+        // visible: false,
+    },
+    {
+        key: "column3",
+        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",
+        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,
+        sortable: true,
+    },
+    {
+        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 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];
+    // 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)));
+    };
+    // 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) {
+            setActionButtons(true);
+        }
+        else {
+            setActionButtons(false);
+        }
+        setSelectedRows(selectedRows);
+    }, []);
+    // 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);
+            }, columnVisibility: true, 
+            // 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 = KaTableExample;

package/dist/Pages/productCaard.js

@@ -21,35 +21,136 @@ var productCaard = function () {
             offer: 50,
         }
     ];
-    return (react_1.default.createElement("div", { style: { display: "flex", justifyContent: "space-between" } },
+    return (
+    // <div style={{ display: "flex", justifyContent: "space-between" }}>
+    //   <ProductCard
+    //     label="Ghee Mysorepaku (Soft)"
+    //     description="Special Ghee mysorepaku"
+    //     productImage={{
+    //       visibile: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754538444/main_service/1754538444014-GM-Back%20%284%29.png",
+    //       hover: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754573075/main_service/1754573075361-istockphoto-1054228718-612x612.jpg",
+    //     }}
+    //     tags={['Melt in Mouth', 'Authentic Taste', 'No Preservatives']}
+    //     rating={4.76}
+    //     reviews={596}
+    //     options={option}
+    //     size="xs"
+    //     onAddToCart={() => { }}
+    //     onClick={() => { }}
+    //     batch={{
+    //       label: "Special",
+    //       color: "red",
+    //     }}
+    //   />
+    //   <br />
+    //   <ProductCard
+    //     label="Ghee Mysorepaku (Soft)"
+    //     description="Special Ghee mysorepaku"
+    //     productImage={{
+    //       visibile: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754538444/main_service/1754538444014-GM-Back%20%284%29.png",
+    //       hover: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754573075/main_service/1754573075361-istockphoto-1054228718-612x612.jpg",
+    //     }}
+    //     tags={['Melt in Mouth', 'Authentic Taste', 'No Preservatives']}
+    //     rating={4.76}
+    //     reviews={596}
+    //     options={option}
+    //     size="sm"
+    //     onAddToCart={() => { }}
+    //     onClick={() => { }}
+    //     batch={{
+    //       label: "Special",
+    //       color: "red",
+    //     }}
+    //   />
+    //   <br />
+    //   <ProductCard
+    //     label="Ghee Mysorepaku (Soft)"
+    //     description="Special Ghee mysorepaku"
+    //     productImage={{
+    //       visibile: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754538444/main_service/1754538444014-GM-Back%20%284%29.png",
+    //       hover: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754573075/main_service/1754573075361-istockphoto-1054228718-612x612.jpg",
+    //     }}
+    //     tags={['Melt in Mouth', 'Authentic Taste', 'No Preservatives']}
+    //     rating={4.76}
+    //     reviews={596}
+    //     options={option}
+    //     size="md"
+    //     onAddToCart={() => { }}
+    //     onClick={() => { }}
+    //     batch={{
+    //       label: "Special",
+    //       color: "red",
+    //     }}
+    //   />
+    //   <br />
+    //   <ProductCard
+    //     label="Ghee Mysorepaku (Soft)"
+    //     description="Special Ghee mysorepaku"
+    //     productImage={{
+    //       visibile: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754538444/main_service/1754538444014-GM-Back%20%284%29.png",
+    //       hover: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754573075/main_service/1754573075361-istockphoto-1054228718-612x612.jpg",
+    //     }}
+    //     tags={['Melt in Mouth', 'Authentic Taste', 'No Preservatives']}
+    //     rating={4.76}
+    //     reviews={596}
+    //     options={option}
+    //     size="lg"
+    //     onAddToCart={() => { }}
+    //     onClick={() => { }}
+    //     batch={{
+    //       label: "Special",
+    //       color: "red",
+    //     }}
+    //   />
+    // </div>
+    react_1.default.createElement("div", { style: { display: "flex", justifyContent: "space-between" } },
         react_1.default.createElement(ProductCard_1.default, { label: "Ghee Mysorepaku (Soft)", description: "Special Ghee mysorepaku", productImage: {
                 visibile: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754538444/main_service/1754538444014-GM-Back%20%284%29.png",
                 hover: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754573075/main_service/1754573075361-istockphoto-1054228718-612x612.jpg",
-            }, tags: ['Melt in Mouth', 'Authentic Taste', 'No Preservatives'], rating: 4.76, reviews: 596, options: option, size: "xs", onAddToCart: function () { }, onClick: function () { }, batch: {
+            }, 
+            // tags={['Melt in Mouth', 'Authentic Taste', 'No Preservatives']}
+            rating: 4.76, reviews: 596, options: option, size: "xs", onAddToCart: function () { }, onClick: function () { }, batch: {
+                label: "Special",
+                color: "red",
+            } }),
+        react_1.default.createElement(ProductCard_1.default, { label: "Ghee Mysorepaku (Soft)", description: "Special Ghee mysorepaku", productImage: {
+                visibile: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754538444/main_service/1754538444014-GM-Back%20%284%29.png",
+                hover: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754573075/main_service/1754573075361-istockphoto-1054228718-612x612.jpg",
+            }, 
+            // tags={['Melt in Mouth', 'Authentic Taste', 'No Preservatives']}
+            rating: 4.76, reviews: 596, options: option, size: "xs", onAddToCart: function () { }, onClick: function () { }, batch: {
                 label: "Special",
                 color: "red",
             } }),
-        react_1.default.createElement("br", null),
         react_1.default.createElement(ProductCard_1.default, { label: "Ghee Mysorepaku (Soft)", description: "Special Ghee mysorepaku", productImage: {
                 visibile: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754538444/main_service/1754538444014-GM-Back%20%284%29.png",
                 hover: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754573075/main_service/1754573075361-istockphoto-1054228718-612x612.jpg",
-            }, tags: ['Melt in Mouth', 'Authentic Taste', 'No Preservatives'], rating: 4.76, reviews: 596, options: option, size: "sm", onAddToCart: function () { }, onClick: function () { }, batch: {
+            }, 
+            // tags={['Melt in Mouth', 'Authentic Taste', 'No Preservatives']}
+            rating: 4.76, reviews: 596, options: option, size: "xs", onAddToCart: function () { }, onClick: function () { }, batch: {
+                label: "Special",
+                color: "red",
+            } }),
+        react_1.default.createElement(ProductCard_1.default, { label: "Ghee Mysorepaku (Soft)", description: "Special Ghee mysorepaku", productImage: {
+                visibile: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754538444/main_service/1754538444014-GM-Back%20%284%29.png",
+                hover: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754573075/main_service/1754573075361-istockphoto-1054228718-612x612.jpg",
+            }, tags: ['Melt in Mouth', 'Authentic Taste', 'No Preservatives'], rating: 4.76, reviews: 596, options: option, size: "xs", onAddToCart: function () { }, onClick: function () { }, batch: {
                 label: "Special",
                 color: "red",
             } }),
-        react_1.default.createElement("br", null),
         react_1.default.createElement(ProductCard_1.default, { label: "Ghee Mysorepaku (Soft)", description: "Special Ghee mysorepaku", productImage: {
                 visibile: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754538444/main_service/1754538444014-GM-Back%20%284%29.png",
                 hover: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754573075/main_service/1754573075361-istockphoto-1054228718-612x612.jpg",
-            }, tags: ['Melt in Mouth', 'Authentic Taste', 'No Preservatives'], rating: 4.76, reviews: 596, options: option, size: "md", onAddToCart: function () { }, onClick: function () { }, batch: {
+            }, tags: ['Melt in Mouth'], rating: 4.76, reviews: 596, options: option, size: "xs", onAddToCart: function () { }, onClick: function () { }, batch: {
                 label: "Special",
                 color: "red",
             } }),
-        react_1.default.createElement("br", null),
         react_1.default.createElement(ProductCard_1.default, { label: "Ghee Mysorepaku (Soft)", description: "Special Ghee mysorepaku", productImage: {
                 visibile: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754538444/main_service/1754538444014-GM-Back%20%284%29.png",
                 hover: "https://res.cloudinary.com/drmkh6z50/image/upload/v1754573075/main_service/1754573075361-istockphoto-1054228718-612x612.jpg",
-            }, tags: ['Melt in Mouth', 'Authentic Taste', 'No Preservatives'], rating: 4.76, reviews: 596, options: option, size: "lg", onAddToCart: function () { }, onClick: function () { }, batch: {
+            }, 
+            // tags={['Melt in Mouth', 'Authentic Taste', 'No Preservatives']}
+            rating: 4.76, reviews: 596, options: option, size: "xs", onAddToCart: function () { }, onClick: function () { }, batch: {
                 label: "Special",
                 color: "red",
             } })));

package/dist/Pages/searchSelect.js

@@ -73,6 +73,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var SearchSelect_1 = __importDefault(require("../Components/SearchSelect/SearchSelect"));
+// import { Plus } from "lucide-react";
 var react_2 = require("@chakra-ui/react");
 var max = 149;
 var rrr = function (start, limit) {
@@ -89,7 +90,7 @@ var SearchSelect = function () {
     var _b = (0, react_1.useState)(rrr(1, 50)), soptions = _b[0], setSoptions = _b[1]; // initial 50
     var _c = (0, react_1.useState)(""), search = _c[0], setSearch = _c[1];
     var _d = (0, react_1.useState)(false), paginationLoading = _d[0], setpaginationLoading = _d[1];
-    var _e = (0, react_1.useState)({}), customSelectValue = _e[0], setCustomSelectValue = _e[1];
+    // const [customSelectValue, setCustomSelectValue] = useState<any>({});
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(SearchSelect_1.default
         // width={"250px"}

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/dist/Utils/functions.d.ts

@@ -0,0 +1 @@
+export declare function toWords(str: string): string;

package/dist/Utils/functions.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toWords = void 0;
+function toWords(str) {
+    return str
+        .toLowerCase()
+        .split('_')
+        .map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1); })
+        .join(' ');
+}
+exports.toWords = toWords;

package/package.json

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