pixelize-design-library 2.1.22 → 2.1.24

package/dist/Components/Slider/Slider.js

@@ -22,6 +22,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+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 });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
@@ -47,8 +56,9 @@ var Slider = function (_a) {
         };
     }, [currentIndex, interval]);
     return (react_1.default.createElement(react_2.Box, { position: "relative", w: "100%", h: "30rem", overflow: "hidden" },
-        react_1.default.createElement(react_2.Flex, { w: "".concat(images.length * 100, "vw"), transform: "translateX(-".concat(currentIndex * 100, "vw)"), transition: "transform 0.5s ease" }, images.map(function (src, idx) { return (react_1.default.createElement(react_2.Box, { key: idx, w: "100vw", h: "30rem", flexShrink: 0, display: "flex", justifyContent: "center", alignItems: "center" },
-            react_1.default.createElement(react_2.Image, { src: src, alt: "Slide ".concat(idx + 1), objectFit: "cover", w: "100vw", h: "100%" }))); })),
+        react_1.default.createElement(react_2.Flex, { w: "".concat(images.length * 100, "vw"), transform: "translateX(-".concat(currentIndex * 100, "vw)"), transition: "transform 0.5s ease" }, __spreadArray([], images, true).sort(function (a, b) { return a.order - b.order; })
+            .map(function (image, idx) { return (react_1.default.createElement(react_2.Box, { key: image.id, w: "100vw", h: "30rem", flexShrink: 0, display: "flex", justifyContent: "center", alignItems: "center" },
+            react_1.default.createElement(react_2.Image, { src: image.previewUrl, alt: "Slide ".concat(idx + 1), objectFit: "cover", w: "100vw", h: "100%" }))); })),
         isArrow && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.ChevronLeft, { color: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[800] }), "aria-label": "Previous Slide", onClick: prevSlide, position: "absolute", top: "50%", left: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200] } }),
             react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.ChevronRight, { color: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[800] }), "aria-label": "Next Slide", onClick: nextSlide, position: "absolute", top: "50%", right: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[200] } }))),

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

@@ -195,11 +195,26 @@ var Layout = function () {
                 return react_2.default.createElement(fileUpload_1.FileUploader, null);
             case "/slider":
                 return (react_2.default.createElement(Slider_1.default, { images: [
-                        "https://picsum.photos/id/1011/600/400",
-                        "https://picsum.photos/id/1012/600/400",
-                        "https://picsum.photos/id/1013/600/400",
-                        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUgffoihYPEcEZH4D24OA-1Hnwz-SRN4DOmcABM6nro6l2D_yLYjNNFy_pOpOC9ABjXY2_",
-                        "https://beam-images.warnermediacdn.com/BEAM_LWM_DELIVERABLES/4f6b4985-2dc9-4ab6-ac79-d60f0860b0ac/87240dbd-5c19-11f0-b655-025327c09033?host=wbd-images.prod-vod.h264.io&partner=beamcom",
+                        {
+                            "id": 5,
+                            "previewUrl": "https://res.cloudinary.com/drmkh6z50/image/upload/v1753766262/main_service/1753766262240-leaf.jpg",
+                            "order": 1
+                        },
+                        {
+                            "id": 6,
+                            "previewUrl": "https://res.cloudinary.com/drmkh6z50/image/upload/v1753766262/main_service/1753766262240-wall1.jpg",
+                            "order": 2
+                        },
+                        {
+                            "id": 7,
+                            "previewUrl": "https://res.cloudinary.com/drmkh6z50/image/upload/v1753766262/main_service/1753766262241-wall2.jpg",
+                            "order": 3
+                        },
+                        {
+                            "id": 8,
+                            "previewUrl": "https://res.cloudinary.com/drmkh6z50/image/upload/v1753766262/main_service/1753766262241-wall3.jpg",
+                            "order": 4
+                        }
                     ] }));
             case "/productCard":
                 return react_2.default.createElement(productCaard_1.default, null);
@@ -211,9 +226,26 @@ var Layout = function () {
     };
     return (react_2.default.createElement("div", null,
         react_2.default.createElement(Slider_1.default, { images: [
-                "https://picsum.photos/id/1011/600/400",
-                "https://picsum.photos/id/1012/600/400",
-                "https://picsum.photos/id/1013/600/400",
+                {
+                    "id": 5,
+                    "previewUrl": "https://res.cloudinary.com/drmkh6z50/image/upload/v1753766262/main_service/1753766262240-leaf.jpg",
+                    "order": 1
+                },
+                {
+                    "id": 6,
+                    "previewUrl": "https://res.cloudinary.com/drmkh6z50/image/upload/v1753766262/main_service/1753766262240-wall1.jpg",
+                    "order": 2
+                },
+                {
+                    "id": 7,
+                    "previewUrl": "https://res.cloudinary.com/drmkh6z50/image/upload/v1753766262/main_service/1753766262241-wall2.jpg",
+                    "order": 3
+                },
+                {
+                    "id": 8,
+                    "previewUrl": "https://res.cloudinary.com/drmkh6z50/image/upload/v1753766262/main_service/1753766262241-wall3.jpg",
+                    "order": 4
+                }
             ] }),
         react_2.default.createElement("nav", null,
             react_2.default.createElement(react_1.HStack, { spacing: 1, flexWrap: "wrap", alignItems: "center" },

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/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": "2.1.22",
+  "version": "2.1.24",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",