pixelize-design-library 2.1.16 → 2.1.17

package/dist/Theme/themeProps.d.ts

@@ -0,0 +1,475 @@
+import "@chakra-ui/react";
+import { Theme as ChakraTheme } from "@chakra-ui/react";
+export type CustomThemeProps = {
+    colors: {
+        primary: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            opacity: {
+                4: string;
+                8: string;
+                16: string;
+                24: string;
+                32: string;
+                40: string;
+                48: string;
+            };
+        };
+        secondary: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            opacity: {
+                4: string;
+                8: string;
+                16: string;
+                24: string;
+                32: string;
+                40: string;
+                48: string;
+            };
+        };
+        tertiary: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            opacity: {
+                4: string;
+                8: string;
+                16: string;
+                24: string;
+                32: string;
+                40: string;
+                48: string;
+            };
+        };
+        transparent: string;
+        black: string;
+        white: string;
+        semantic: {
+            success: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            error: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            warning: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            info: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+        };
+        gray: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        red: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        orange: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        yellow: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        green: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        teal: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        blue: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        cyan: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        purple: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        pink: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        background: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        text: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        header: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        placeholder: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        boxShadow: {
+            primary: string;
+            error: string;
+            default: string;
+        };
+        sidebar: {
+            background: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+        };
+        boxborder: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        border: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        table: {
+            hover: {
+                50: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+        };
+        disabled: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        backgroundColor: {
+            main: string;
+            secondary: string;
+            quaternary: string;
+            tertiary: string;
+            light: string;
+            medium: string;
+            accent: string;
+            subtle: string;
+            muted: string;
+            neutral: string;
+        };
+    };
+    fonts: ChakraTheme["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;
+    };
+    lineHeights: {
+        normal: string;
+        none: number;
+        shorter: number;
+        short: number;
+        base: number;
+        tall: number;
+        taller: string;
+        [key: string]: string | number;
+    };
+    letterSpacings: {
+        tighter: string;
+        tight: string;
+        normal: string;
+        wide: string;
+        wider: string;
+        widest: string;
+    };
+    space: {
+        [key: string]: string;
+    };
+    sizes: {
+        [key: string]: string | any;
+    };
+    breakpoints: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+    };
+    shadows: {
+        xs: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        outline: string;
+        inner: string;
+        none: string;
+        darkLg: string;
+    };
+    radii: ChakraTheme["radii"] & {
+        none: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        full: string;
+    };
+    zIndices: ChakraTheme["zIndices"] & {
+        hide: number;
+        auto: string;
+        base: number;
+        docked: number;
+        dropdown: number;
+        sticky: number;
+        banner: number;
+        overlay: number;
+        modal: number;
+        popover: number;
+        skipLink: number;
+        toast: number;
+        tooltip: number;
+    };
+    config: {
+        cssVarPrefix: string;
+    };
+};

package/dist/Theme/themeProps.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@chakra-ui/react");

package/dist/Theme/useCustomTheme.d.ts

@@ -0,0 +1,2 @@
+import { CustomThemeProps } from "./themeProps";
+export declare const useCustomTheme: () => CustomThemeProps;

package/dist/Theme/useCustomTheme.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCustomTheme = void 0;
+var react_1 = require("@chakra-ui/react");
+var useCustomTheme = function () {
+    return (0, react_1.useTheme)();
+};
+exports.useCustomTheme = useCustomTheme;

package/dist/Utils/table.d.ts

@@ -0,0 +1,36 @@
+import { DataObject, TableHeaderProps } from "../Components/Table/TableProps";
+export declare function SortMultiColumnData(data: Record<string, string | number>[], sortConfig: {
+    column: string | number;
+    direction: string;
+}[]): Record<string, string | number>[];
+export declare const calculateLeftOffset: (columns: number[], index: number) => number;
+export declare const searchAndSortData: (data: DataObject[], searchValues: Record<string, string>) => DataObject[];
+export declare function debounce<T extends (...args: any[]) => void>(func: T, delay: number): (...args: Parameters<T>) => void;
+export declare function useDebounce<T extends (...args: any[]) => void>(callback: T, delay: number): (...args: Parameters<T>) => void;
+export declare const pageSizeCalculation: (records: number) => number[];
+type TableCellCalculationProps = {
+    isFrozen?: boolean;
+    columnWidths: number[];
+    headerIndex: number;
+    isCheckbox?: boolean;
+    header: TableHeaderProps;
+    row: DataObject;
+    freezedBgColor?: string;
+    index: number;
+};
+export declare const TableCellCalculation: ({ isFrozen, columnWidths, headerIndex, isCheckbox, header, row, freezedBgColor, index, }: TableCellCalculationProps) => {
+    leftOffset: number;
+    cellBgColor: any;
+    rowBgColor: any;
+    cellTextColor: any;
+    rowTextColor: any;
+};
+/**
+ * Filters array of objects by checking all property values against the search query.
+ *
+ * @param data - Array of objects
+ * @param query - Search string
+ * @returns Filtered data
+ */
+export declare function globalSearchFilter<T extends Record<string, any>>(data: T[], query: string): T[];
+export {};

package/dist/Utils/table.js

@@ -0,0 +1,168 @@
+"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.globalSearchFilter = exports.TableCellCalculation = exports.pageSizeCalculation = exports.useDebounce = exports.debounce = exports.searchAndSortData = exports.calculateLeftOffset = exports.SortMultiColumnData = void 0;
+var react_1 = require("react");
+var useCustomTheme_1 = require("../Theme/useCustomTheme");
+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 calculateLeftOffset = function (columns, index) {
+    return columns.slice(0, index).reduce(function (sum, width) { return sum + width; }, 0);
+};
+exports.calculateLeftOffset = calculateLeftOffset;
+var searchAndSortData = function (data, searchValues) {
+    var filteredData = data.filter(function (item) {
+        return Object.keys(searchValues).every(function (key) {
+            var searchValue = searchValues[key].toLowerCase();
+            return item[key].toString().toLowerCase().includes(searchValue);
+        });
+    });
+    return filteredData.sort(function (a, b) {
+        var aMatchCount = 0;
+        var bMatchCount = 0;
+        Object.keys(searchValues).forEach(function (key) {
+            var searchValue = searchValues[key].toLowerCase();
+            if (a[key] && a[key].toString().toLowerCase() === searchValue) {
+                aMatchCount++;
+            }
+            if (b[key] && b[key].toString().toLowerCase() === searchValue) {
+                bMatchCount++;
+            }
+            if (a[key] && a[key].toString().toLowerCase().includes(searchValue)) {
+                aMatchCount += 0.5;
+            }
+            if (b[key] && b[key].toString().toLowerCase().includes(searchValue)) {
+                bMatchCount += 0.5;
+            }
+        });
+        return bMatchCount - aMatchCount;
+    });
+};
+exports.searchAndSortData = searchAndSortData;
+function debounce(func, delay) {
+    var timer;
+    return function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        clearTimeout(timer);
+        timer = setTimeout(function () {
+            func.apply(void 0, args);
+        }, delay);
+    };
+}
+exports.debounce = debounce;
+function useDebounce(callback, delay) {
+    var callbackRef = (0, react_1.useRef)(callback);
+    var timerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        callbackRef.current = callback;
+    }, [callback]);
+    var debouncedFn = (0, react_1.useCallback)(function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+        timerRef.current = setTimeout(function () {
+            callbackRef.current.apply(callbackRef, args);
+        }, delay);
+    }, [delay]);
+    return debouncedFn;
+}
+exports.useDebounce = useDebounce;
+var pageSizeCalculation = function (records) {
+    var pageSize = [5, 10];
+    if (records > 100) {
+        return [25, 50, 100];
+    }
+    else if (records > 50) {
+        return [5, 10, 20];
+    }
+    return pageSize;
+};
+exports.pageSizeCalculation = pageSizeCalculation;
+var TableCellCalculation = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var isFrozen = _a.isFrozen, columnWidths = _a.columnWidths, headerIndex = _a.headerIndex, isCheckbox = _a.isCheckbox, header = _a.header, row = _a.row, freezedBgColor = _a.freezedBgColor, index = _a.index;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var leftOffset = isFrozen
+        ? (0, exports.calculateLeftOffset)(columnWidths, headerIndex) + (isCheckbox ? 50 : 0)
+        : 0;
+    var cellBgColor = undefined;
+    var cellTextColor = undefined;
+    if ((_b = row.cellStyle) === null || _b === void 0 ? void 0 : _b[header.id]) {
+        cellBgColor =
+            (_e = (_d = (_c = row.cellStyle) === null || _c === void 0 ? void 0 : _c[header.id]) === null || _d === void 0 ? void 0 : _d.bg) !== null && _e !== void 0 ? _e : theme.colors.backgroundColor.light;
+        cellTextColor = (_h = (_g = (_f = row.cellStyle) === null || _f === void 0 ? void 0 : _f[header.id]) === null || _g === void 0 ? void 0 : _g.color) !== null && _h !== void 0 ? _h : undefined;
+    }
+    else if (isFrozen) {
+        cellBgColor = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : undefined;
+        cellTextColor = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : undefined;
+    }
+    else if (index % 2 === 1) {
+        cellBgColor = theme.colors.backgroundColor.light;
+    }
+    var rowBgColor = undefined;
+    var rowTextColor = undefined;
+    if (row.rowStyle) {
+        rowBgColor = (_j = row.rowStyle) === null || _j === void 0 ? void 0 : _j.bg;
+        rowTextColor = (_k = row.rowStyle) === null || _k === void 0 ? void 0 : _k.color;
+    }
+    return { leftOffset: leftOffset, cellBgColor: cellBgColor, rowBgColor: rowBgColor, cellTextColor: cellTextColor, rowTextColor: rowTextColor };
+};
+exports.TableCellCalculation = TableCellCalculation;
+/**
+ * Filters array of objects by checking all property values against the search query.
+ *
+ * @param data - Array of objects
+ * @param query - Search string
+ * @returns Filtered data
+ */
+function globalSearchFilter(data, query) {
+    if (!query.trim())
+        return data;
+    var lowerQuery = query.toLowerCase();
+    return data.filter(function (item) {
+        return Object.values(item).some(function (val) {
+            if (val === null ||
+                val === undefined ||
+                typeof val === "object" ||
+                typeof val === "function") {
+                return false;
+            }
+            return String(val).toLowerCase().includes(lowerQuery);
+        });
+    });
+}
+exports.globalSearchFilter = globalSearchFilter;

package/dist/bootstrap.d.ts

@@ -0,0 +1 @@
+import './index.css';

package/dist/bootstrap.js

@@ -0,0 +1,14 @@
+"use strict";
+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 client_1 = __importDefault(require("react-dom/client"));
+var App_1 = __importDefault(require("./App"));
+var withTheme_1 = __importDefault(require("./withTheme"));
+require("./index.css");
+var root = client_1.default.createRoot(document.getElementById("root"));
+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)));