pixelize-design-library 2.3.1-beta.1 → 2.3.1-beta.2

package/dist/Components/Table/TableSettings/TableSettings.js

@@ -1,141 +0,0 @@
-"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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __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 = require("@chakra-ui/react");
-var react_2 = __importStar(require("react"));
-var framer_motion_1 = require("framer-motion");
-var ManageColumns_1 = __importDefault(require("./ManageColumns"));
-var Button_1 = __importDefault(require("../../Button/Button"));
-var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-var lucide_react_1 = require("lucide-react");
-var TableFilters_1 = __importDefault(require("./TableFilters"));
-var MotionModalContent = (0, framer_motion_1.motion)(react_1.ModalContent);
-var TableSettings = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-    var columns = _a.columns, onSave = _a.onSave, tableSettings = _a.tableSettings;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var childInputMethodsRef = (0, react_2.useRef)({});
-    var childFilterMethodsRef = (0, react_2.useRef)(null);
-    var _t = (0, react_2.useState)(false), settingsOpen = _t[0], setSettingsOpen = _t[1];
-    var _u = (0, react_2.useState)(0), selectedIndex = _u[0], setSelectedIndex = _u[1];
-    var _v = (0, react_2.useState)(columns), items = _v[0], setItems = _v[1];
-    var filters = (0, react_2.useMemo)(function () {
-        var _a;
-        return (_a = tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.filters) !== null && _a !== void 0 ? _a : [];
-    }, [tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.filters]);
-    var handleSave = (0, react_2.useCallback)(function () {
-        var _a, _b, _c, _d;
-        onSave(items);
-        (_a = tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.onFilterSelection) === null || _a === void 0 ? void 0 : _a.call(tableSettings, (_d = (_c = (_b = childFilterMethodsRef.current) === null || _b === void 0 ? void 0 : _b.getSelectedFilters) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : []);
-        setSettingsOpen(false);
-    }, [onSave, tableSettings, items]);
-    var handleOpen = (0, react_2.useCallback)(function () {
-        setItems(columns);
-        setSettingsOpen(true);
-    }, [columns]);
-    return (react_2.default.createElement(react_1.Box, null,
-        react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", _hover: { transform: "scale(1.1)" } },
-            react_2.default.createElement(lucide_react_1.Settings, { onClick: handleOpen, size: "1.25rem", color: (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500] })),
-        react_2.default.createElement(react_1.Modal, { isOpen: settingsOpen, onClose: function () { return setSettingsOpen(false); }, size: "md" },
-            react_2.default.createElement(react_1.ModalOverlay, null),
-            react_2.default.createElement(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "0", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: "620px", minH: "520px", bg: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50], overflow: "hidden" },
-                react_2.default.createElement(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.border) === null || _g === void 0 ? void 0 : _g[200], pb: 0, pt: 4, px: 4 },
-                    react_2.default.createElement(react_1.Text, { fontWeight: 600, fontSize: "md", mb: 3 }, "Table Settings"),
-                    react_2.default.createElement(react_1.Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled" },
-                        react_2.default.createElement(react_1.TabList, { gap: 0, borderBottom: "none" },
-                            filters && filters.length > 0 && (react_2.default.createElement(react_1.Tab, { fontSize: "13px", fontWeight: 500, px: 4, py: 2, borderBottom: "2px solid transparent", color: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.text) === null || _j === void 0 ? void 0 : _j[400], _selected: {
-                                    borderBottom: "2px solid ".concat(theme.colors.primary[600]),
-                                    color: theme.colors.primary[600],
-                                    fontWeight: 600,
-                                }, _hover: {
-                                    color: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.text) === null || _l === void 0 ? void 0 : _l[600],
-                                } }, "Filters")),
-                            react_2.default.createElement(react_1.Tab, { fontSize: "13px", fontWeight: 500, px: 4, py: 2, borderBottom: "2px solid transparent", color: (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.text) === null || _o === void 0 ? void 0 : _o[400], _selected: {
-                                    borderBottom: "2px solid ".concat(theme.colors.primary[600]),
-                                    color: theme.colors.primary[600],
-                                    fontWeight: 600,
-                                }, _hover: {
-                                    color: (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.text) === null || _q === void 0 ? void 0 : _q[600],
-                                } }, "Manage Columns")),
-                        react_2.default.createElement(react_1.ModalCloseButton, { top: 3, right: 3 }),
-                        react_2.default.createElement(react_1.ModalBody, { px: 4, py: 3, maxH: "420px", overflowY: "auto", sx: {
-                                "&::-webkit-scrollbar": { width: "3px", height: "3px" },
-                                "&::-webkit-scrollbar-track": {
-                                    background: theme.colors.gray[100],
-                                    borderRadius: "2px",
-                                },
-                                "&::-webkit-scrollbar-thumb": {
-                                    background: theme.colors.gray[400],
-                                    borderRadius: "2px",
-                                },
-                                "&::-webkit-scrollbar-thumb:hover": {
-                                    background: theme.colors.gray[500],
-                                },
-                                scrollbarWidth: "thin",
-                                scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
-                            } },
-                            react_2.default.createElement(react_1.TabPanels, null,
-                                filters.length > 0 && (react_2.default.createElement(react_1.TabPanel, { px: 0, py: 0 },
-                                    react_2.default.createElement(TableFilters_1.default, { filters: filters, childFilterMethodsRef: childFilterMethodsRef, filterSelected: tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.filterSelected }))),
-                                react_2.default.createElement(react_1.TabPanel, { px: 0, py: 0 },
-                                    react_2.default.createElement(react_1.Box, { sx: {
-                                            // Target ManageColumns list items for tighter spacing
-                                            "& [role='listitem'], & > div > div": {
-                                                py: "4px !important",
-                                                minHeight: "unset !important",
-                                            },
-                                            "& label": {
-                                                fontSize: "13px !important",
-                                            },
-                                            "& .chakra-checkbox": {
-                                                gap: "8px !important",
-                                            },
-                                            "& .chakra-checkbox__label": {
-                                                fontSize: "13px !important",
-                                            },
-                                            // Tighten drag handle rows if present
-                                            "& [draggable]": {
-                                                py: "5px !important",
-                                            },
-                                        } },
-                                        react_2.default.createElement(ManageColumns_1.default, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childInputMethodsRef }))))),
-                        react_2.default.createElement(react_1.ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.border) === null || _s === void 0 ? void 0 : _s[200], pt: 3, pb: 3, px: 4 },
-                            react_2.default.createElement(Button_1.default, { label: "Close", size: "sm", onClick: function () { return setSettingsOpen(false); }, variant: "outline", colorScheme: "red" }),
-                            react_2.default.createElement(Button_1.default, { label: "Save", size: "sm", onClick: handleSave }))))))));
-};
-exports.default = TableSettings;

package/dist/Components/Table/TableToDo.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export declare const searchFeatures: (header: string) => React.JSX.Element;

package/dist/Components/Table/TableToDo.js

@@ -1,291 +0,0 @@
-"use strict";
-// const [isPopoverOpen, setPopoverOpen] = useState(false);
-// const [activeHeader, setActiveHeader] = useState<string | null>(null);
-// const [searchTerms, setSearchTerms] = useState<Record<string, string>>({});
-// const [searchOperation, setSearchOperation] = useState<
-//   Record<string, string>
-// >({});
-// const [betweenValues, setBetweenValues] = useState<
-//   Record<string, { min: string; max: string }>
-// >({});
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.searchFeatures = void 0;
-// const sortedData = [...data].sort((a, b) => {
-//   if (!sortField) return 0;
-//   if (a[sortField] < b[sortField]) return sortDirection === "asc" ? -1 : 1;
-//   if (a[sortField] > b[sortField]) return sortDirection === "asc" ? 1 : -1;
-//   return 0;
-// });
-// const getValue = (header: string) => {
-//   const value = data.reduce((acc: (string | number)[], item: DataObject) => {
-//     const itemValue = item[header];
-//     if (
-//       itemValue !== undefined &&
-//       itemValue !== null &&
-//       !acc.includes(itemValue)
-//     ) {
-//       acc.push(itemValue);
-//     }
-//     return acc;
-//   }, []);
-//   return value;
-// };
-// const handleSearchOperation = (header: string, operation: string) => {
-//   // setSearchOperation((prev) => ({ ...prev, [header]: operation }));
-//   // const list_ofdata = getValue(header);
-//   // if (operation === "between") {
-//   //   const smallestValue = String(Math.min(Number(...list_ofdata)));
-//   //   const highestValue = String(Math.max(Number(...list_ofdata)));
-//   //   setBetweenValues((prev) => ({
-//   //     ...prev,
-//   //     [header]: { min: smallestValue, max: highestValue },
-//   //   }));
-//   //   setSearchTerms((prev) => ({ ...prev, [header]: "between" }));
-//   // } else {
-//   //   if (operation === "blank" || operation === "notBlank") {
-//   //     setSearchTerms((prev) => ({ ...prev, [header]: "" }));
-//   //   } else {
-//   //     setSearchTerms((prev) => ({
-//   //       ...prev,
-//   //       [header]: list_ofdata[0].toString(),
-//   //     }));
-//   //   }
-//   // }
-// };
-// const handleSearch = (field: string, term: string) => {
-//   // if (searchOperation[field] === "between") {
-//   //   setBetweenValues((prev) => ({
-//   //     ...prev,
-//   //     [field]: { min: term.split("-")[0], max: term.split("-")[1] },
-//   //   }));
-//   // } else {
-//   //   setSearchTerms((prev) => ({ ...prev, [field]: term }));
-//   // }
-// };
-// const handleHeaderClick = (header: string, search: boolean) => {
-//   // if (!search) {
-//   //   return;
-//   // }
-//   // setActiveHeader(header);
-//   // setPopoverOpen(true);
-// };
-// const closePopover = () => {
-//   // setPopoverOpen(false);
-// };
-// const filteredData = sortedData.filter((item) => {
-//   return Object.keys(searchTerms).every((key) => {
-//     const term = String(searchTerms[key]).toLowerCase();
-//     const value = String(item[key]).toLowerCase();
-//     const operation = searchOperation[key] || "notBlank";
-//     switch (operation) {
-//       case "contains":
-//         return value.includes(term);
-//       case "notContains":
-//         return !value.includes(term);
-//       case "equals":
-//         return value === term;
-//       case "notEquals":
-//         return value !== term;
-//       case "beginsWith":
-//         return value.startsWith(term);
-//       case "endsWith":
-//         return value.endsWith(term);
-//       case "greaterThan":
-//         return Number(value) > Number(term);
-//       case "greaterThanOrEqual":
-//         return Number(value) >= Number(term);
-//       case "lessThan":
-//         return Number(value) < Number(term);
-//       case "lessThanOrEqual":
-//         return Number(value) <= Number(term);
-//       case "between": {
-//         const { min, max } = betweenValues[key] || {};
-//         return Number(value) >= Number(min) && Number(value) <= Number(max);
-//       }
-//       case "blank":
-//         return value === "";
-//       case "notBlank":
-//         return value !== "";
-//       default:
-//         return true;
-//     }
-//   });
-// });
-var react_1 = __importDefault(require("react"));
-var searchFeatures = function (header) {
-    return react_1.default.createElement(react_1.default.Fragment, null, "hi");
-    // const fieldType = getFieldType(header, data);
-    // return (
-    //   <>
-    //     <Select
-    //       value={searchOperation[header] || "notBlank"}
-    //       onChange={(e) => handleSearchOperation(header, e.target.value)}
-    //       style={{ background: "#3182ce", color: "white" }}
-    //     >
-    //       <option value="equals">Equals</option>
-    //       <option value="notEquals">Does not equal</option>
-    //       {fieldType === "number" ? (
-    //         <>
-    //           <option value="greaterThan">Greater than</option>
-    //           <option value="greaterThanOrEqual">
-    //             Greater than or equal to
-    //           </option>
-    //           <option value="lessThan">Less than</option>
-    //           <option value="lessThanOrEqual">Less than or equal to</option>
-    //           <option value="between">Between</option>
-    //         </>
-    //       ) : (
-    //         <>
-    //           <option value="contains">Contains</option>
-    //           <option value="notContains">Does not contain</option>
-    //           <option value="beginsWith">Begins with</option>
-    //           <option value="endsWith">Ends with</option>
-    //         </>
-    //       )}
-    //       <option value="blank">Blank</option>
-    //       <option value="notBlank">Not blank</option>
-    //     </Select>
-    //     {searchOperation[header] !== undefined &&
-    //       searchOperation[header] === "between" &&
-    //       fieldType === "number" && (
-    //         <>
-    //           <br />
-    //           <Input
-    //             value={betweenValues[header]?.min || ""}
-    //             onChange={(e) => {
-    //               setBetweenValues((prev) => ({
-    //                 ...prev,
-    //                 [header]: { ...prev[header], min: e.target.value },
-    //               }));
-    //               setSearchTerms((prev) => ({ ...prev, [header]: "between" }));
-    //             }}
-    //             placeholder="Min..."
-    //             background="white"
-    //             color="black"
-    //           />
-    //           <br />
-    //           <br />
-    //           <Input
-    //             value={betweenValues[header]?.max || ""}
-    //             onChange={(e) => {
-    //               setBetweenValues((prev) => ({
-    //                 ...prev,
-    //                 [header]: { ...prev[header], max: e.target.value },
-    //               }));
-    //               setSearchTerms((prev) => ({ ...prev, [header]: "between" }));
-    //             }}
-    //             placeholder="Max..."
-    //             background="white"
-    //             color="black"
-    //           />
-    //         </>
-    //       )}
-    //     {searchOperation[header] !== undefined &&
-    //       searchOperation[header] !== "between" &&
-    //       searchOperation[header] !== "blank" &&
-    //       searchOperation[header] !== "notBlank" && (
-    //         <>
-    //           <br />
-    //           <Input
-    //             value={searchTerms[header] || ""}
-    //             onChange={(e) => handleSearch(header, e.target.value)}
-    //             placeholder="Search..."
-    //             background="white"
-    //             color="black"
-    //           />
-    //           {/* <br />
-    //                         <select onChange={(e) => console.log("option 1")} style={{ width: "100%", borderRadius: "2px", height: "30px" }}>
-    //                             <option value="">Select an option</option>
-    //                             <option value="option1">Option 1</option>
-    //                             <option value="option2">Option 2</option>
-    //                             <option value="option3">Option 3</option>
-    //                         </select> */}
-    //         </>
-    //       )}
-    //   </>
-    // );
-};
-exports.searchFeatures = searchFeatures;
-// const hasSelection = selection.length > 0;
-// const indeterminate = hasSelection && selection.length < data.length;
-// const handleMouseEnter = (index: number) => setHoveredHeaderIndex(index);
-// const handleMouseLeave = () => {
-//   setHoveredHeaderIndex(null);
-//   closePopover();
-// };
-// const removeSearchOptionTerm = (key: any) => {
-//   const newSearchTerms = { ...searchTerms };
-//   const newSearchOperation = { ...searchOperation };
-//   const newBetweenValues = { ...betweenValues };
-//   delete newSearchTerms[key];
-//   delete newSearchOperation[key];
-//   delete newBetweenValues[key];
-//   setSearchTerms(newSearchTerms);
-//   setSearchOperation(newSearchOperation);
-//   setBetweenValues(newBetweenValues);
-// };
-// const SearchOptions = () => {
-//   return (
-//     <Wrap>
-//       {searchOperation &&
-//         Object.keys(searchOperation).map((key, index) => {
-//           return (
-//             <Tag
-//               size="sm"
-//               key={index}
-//               borderRadius="full"
-//               variant="solid"
-//               colorScheme="gray"
-//               m={1}
-//             >
-//               <Box display="flex" alignItems="center">
-//                 <TagLabel>{key}</TagLabel>
-//                 <TagLabel mx={2}>{searchOperation[key]}</TagLabel>
-//                 {searchOperation[key] === "between" ? (
-//                   <TagLabel>
-//                     {betweenValues[key]?.min} - {betweenValues[key]?.max}
-//                   </TagLabel>
-//                 ) : (
-//                   <TagLabel>{searchTerms[key]}</TagLabel>
-//                 )}
-//               </Box>
-//               <TagCloseButton onClick={() => removeSearchOptionTerm(key)} />
-//             </Tag>
-//           );
-//         })}
-//     </Wrap>
-//   );
-// };
-// const Export = ({
-//   exportOptions,
-// }: {
-//   exportOptions: TableProps["exportOptions"];
-// }) => {
-//   return (
-//     <Select
-//       placeholder="Exports"
-//       width={160}
-//       onChange={(e) => {
-//         handleExportChange && handleExportChange(e.target.value);
-//       }}
-//       value={exportLabel}
-//       key={exportLabel}
-//     >
-//       {exportOptions?.map((option) => (
-//         <option key={option.id} value={option.id}>
-//           {option.label}
-//         </option>
-//       ))}
-//     </Select>
-//   );
-// };
-/* <Box display="flex" justifyContent="flex-end">
-        <SearchOptions />
-        {exportOptions && exportOptions.length > 0 && (
-          <Export exportOptions={exportOptions} />
-        )}
-      </Box> */
-//   <br />

package/dist/Components/Table/TextOperationControls.d.ts

@@ -1,12 +0,0 @@
-import React from "react";
-export declare const TEXT_OPERATORS: string[];
-export declare const requiresValue: (op: string) => boolean;
-export declare function TextOperationControls({ operator, value, onOperatorChange, onValueChange, size, ml, mt, }: {
-    operator: string;
-    value: string;
-    onOperatorChange: (op: string) => void;
-    onValueChange: (val: string) => void;
-    size?: "xs" | "sm";
-    ml?: string | number;
-    mt?: string | number;
-}): React.JSX.Element;

package/dist/Components/Table/TextOperationControls.js

@@ -1,29 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.requiresValue = exports.TEXT_OPERATORS = void 0;
-exports.TextOperationControls = TextOperationControls;
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-exports.TEXT_OPERATORS = [
-    "is",
-    "is not",
-    "contains",
-    "does not contain",
-    "starts with",
-    "ends with",
-    "is empty",
-    "is not empty",
-];
-var requiresValue = function (op) {
-    return !(op === "is empty" || op === "is not empty");
-};
-exports.requiresValue = requiresValue;
-function TextOperationControls(_a) {
-    var operator = _a.operator, value = _a.value, onOperatorChange = _a.onOperatorChange, onValueChange = _a.onValueChange, _b = _a.size, size = _b === void 0 ? "xs" : _b, _c = _a.ml, ml = _c === void 0 ? "1.25rem" : _c, _d = _a.mt, mt = _d === void 0 ? 2 : _d;
-    return (react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml },
-        react_1.default.createElement(react_2.Select, { size: size, value: operator, onChange: function (e) { return onOperatorChange(e.target.value); }, sx: { fontSize: "0.75rem", height: "24px" }, width: "110px" }, exports.TEXT_OPERATORS.map(function (op) { return (react_1.default.createElement("option", { key: op, value: op }, op)); })),
-        (0, exports.requiresValue)(operator) && (react_1.default.createElement(react_2.Input, { size: size, placeholder: "Type here", value: value, onChange: function (e) { return onValueChange(e.target.value); }, sx: { fontSize: "0.75rem", height: "24px" }, width: "100%" }))));
-}

package/dist/Layout.d.ts

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