pixelize-design-library 1.1.67 → 1.1.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/dist/App.js +5 -5
  2. package/dist/Components/Apexcharts/ApexPieChart/ApexPieChartProps.d.ts +25 -1
  3. package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.stories.js +0 -1
  4. package/dist/Components/Common/FormLabel.js +0 -2
  5. package/dist/Components/Dropdown/DropDown.js +3 -3
  6. package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js +2 -2
  7. package/dist/Components/NavigationBar/NavigationBar.js +2 -2
  8. package/dist/Components/NoteTextArea/NoteTextArea.js +3 -3
  9. package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js +5 -6
  10. package/dist/Components/Search/Search.js +3 -4
  11. package/dist/Components/SideBar/SideBar.js +2 -2
  12. package/dist/Components/SideBar/SideBarProps.d.ts +1 -2
  13. package/dist/Components/SideBar/Sidebar.stories.js +0 -1
  14. package/dist/Components/Table/Components/Pagination.js +5 -5
  15. package/dist/Components/Table/Components/TableActions.js +5 -6
  16. package/dist/Components/Table/Components/TableBody.js +2 -2
  17. package/dist/Components/Table/Components/TableFilters.js +3 -3
  18. package/dist/Components/Table/Components/TableHeader.js +6 -8
  19. package/dist/Components/Table/TableSettings/ManageColumns.js +2 -2
  20. package/dist/Components/Table/TableSettings/TableSettings.js +2 -2
  21. package/dist/Components/Timeline/Timeline.js +5 -5
  22. package/dist/Components/Trail/EditableCell.js +2 -2
  23. package/dist/Pages/accordion.js +3 -3
  24. package/dist/Pages/button.js +3 -3
  25. package/dist/Pages/dropdown.js +6 -6
  26. package/dist/Pages/input.js +3 -3
  27. package/dist/Pages/selectSearch.js +3 -3
  28. package/dist/Theme/Default/fonts.d.ts +35 -0
  29. package/dist/Theme/Default/fonts.js +37 -0
  30. package/package.json +4 -5
  31. package/.github/workflows/build.yml +0 -31
  32. package/dist/Components/Table/Utils/functions.d.ts +0 -3
  33. package/dist/Components/Table/Utils/functions.js +0 -46
  34. package/dist/Pages/katable.d.ts +0 -3
  35. package/dist/Pages/katable.js +0 -194
  36. package/dist/Utils/common.d.ts +0 -7
  37. package/dist/Utils/common.js +0 -64
  38. package/webpack.config.js +0 -48
package/dist/App.js CHANGED
@@ -32,8 +32,8 @@ var Loading_1 = __importDefault(require("./Components/Loading/Loading"));
32
32
  var SideBar_1 = __importDefault(require("./Components/SideBar/SideBar"));
33
33
  var NavigationBar_1 = __importDefault(require("./Components/NavigationBar/NavigationBar"));
34
34
  var Breadcrumbs_1 = __importDefault(require("./Components/Breadcrumbs/Breadcrumbs"));
35
- var fi_1 = require("react-icons/fi");
36
35
  var Layout_1 = __importDefault(require("./Layout"));
36
+ var lucide_react_1 = require("lucide-react");
37
37
  function App() {
38
38
  function useWindowSize() {
39
39
  var _a = (0, react_1.useState)({
@@ -65,12 +65,12 @@ function App() {
65
65
  var menu = [
66
66
  {
67
67
  title: "Dashboard",
68
- icon: fi_1.FiHome,
68
+ icon: lucide_react_1.House,
69
69
  url: "dashboard",
70
70
  },
71
71
  {
72
72
  title: "Calendar",
73
- icon: fi_1.FiCalendar,
73
+ icon: lucide_react_1.Calendar,
74
74
  url: "description",
75
75
  },
76
76
  ];
@@ -92,9 +92,9 @@ function App() {
92
92
  react_1.default.createElement(react_2.Box, null,
93
93
  react_1.default.createElement(SideBar_1.default, { menus: menu, activeMenu: activeMenu, handleMenuClick: handleMenuClick, toggle: toggle, changeToggle: function () { return changeToggle(!toggle); }, logo: "https://play-lh.googleusercontent.com/Fro4e_osoDhhrjgiZ_Y2C5FNXBMWvrb4rGpmkM1PDAcUPXeiAlPCq7NeaT4Q6NRUxRqo", companyName: "PIXELIZE" })),
94
94
  react_1.default.createElement(react_2.Box, { flex: "1", maxWidth: width, overflow: "hidden" },
95
- react_1.default.createElement(NavigationBar_1.default, { userAvathar: "https://bit.ly/dan-abramo", userName: "PIXELIZE", navMenu: navmenus, handleNavOnClick: handleNavOnClick, handleLogout: handleLogout, logoutText: "Logout", key: "navbar", moreIcon: react_1.default.createElement(fi_1.FiCalendar, null) }),
95
+ react_1.default.createElement(NavigationBar_1.default, { userAvathar: "https://bit.ly/dan-abramo", userName: "PIXELIZE", navMenu: navmenus, handleNavOnClick: handleNavOnClick, handleLogout: handleLogout, logoutText: "Logout", key: "navbar", moreIcon: react_1.default.createElement(lucide_react_1.Calendar, null) }),
96
96
  react_1.default.createElement("br", null),
97
- react_1.default.createElement(Breadcrumbs_1.default, { separator: react_1.default.createElement(fi_1.FiChevronRight, { color: "gray.500" }), items: breadcrumbItems, handleClick: handleClick }),
97
+ react_1.default.createElement(Breadcrumbs_1.default, { separator: react_1.default.createElement(lucide_react_1.ChevronRight, { color: "gray.500" }), items: breadcrumbItems, handleClick: handleClick }),
98
98
  react_1.default.createElement(react_2.Box, { p: "50px", height: height - 160, overflowY: "scroll", width: width - 75 },
99
99
  react_1.default.createElement(Layout_1.default, null)))))));
100
100
  }
package/dist/Components/Apexcharts/ApexPieChart/ApexPieChartProps.d.ts CHANGED
@@ -2,7 +2,7 @@ export type ApexPieChartProps = {
2
2
  data: number[];
3
3
  labels: string[];
4
4
  title?: string;
5
- titlePosition?: 'left' | 'center' | 'right';
5
+ titlePosition?: "left" | "center" | "right";
6
6
  height?: number;
7
7
  width?: number;
8
8
  chartColor?: string[];
@@ -14,4 +14,28 @@ type StyleProps = {
14
14
  fontWeight?: string | number;
15
15
  color?: string;
16
16
  };
17
+ export interface ApexOptions {
18
+ annotations?: ApexAnnotations;
19
+ chart?: ApexChart;
20
+ colors?: any[];
21
+ dataLabels?: ApexDataLabels;
22
+ fill?: ApexFill;
23
+ forecastDataPoints?: ApexForecastDataPoints;
24
+ grid?: ApexGrid;
25
+ labels?: string[];
26
+ legend?: ApexLegend;
27
+ markers?: ApexMarkers;
28
+ noData?: ApexNoData;
29
+ plotOptions?: ApexPlotOptions;
30
+ responsive?: ApexResponsive[];
31
+ series?: ApexAxisChartSeries | ApexNonAxisChartSeries;
32
+ states?: ApexStates;
33
+ stroke?: ApexStroke;
34
+ subtitle?: ApexTitleSubtitle;
35
+ theme?: ApexTheme;
36
+ title?: ApexTitleSubtitle;
37
+ tooltip?: ApexTooltip;
38
+ xaxis?: ApexXAxis;
39
+ yaxis?: ApexYAxis | ApexYAxis[];
40
+ }
17
41
  export {};
package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.stories.js CHANGED
@@ -3,5 +3,4 @@
3
3
  // import { Meta, StoryFn } from '@storybook/react';
4
4
  // import ButtonGroupIcon from './ButtonGroupIcon'; // Adjust the import path and component type if needed
5
5
  // import {ButtonGroupIconProps} from './ButtonGoupIconProps';
6
- // import { FiHome } from 'react-icons/fi';
7
6
  Object.defineProperty(exports, "__esModule", { value: true });
package/dist/Components/Common/FormLabel.js CHANGED
@@ -7,8 +7,6 @@ exports.TextLabel = void 0;
7
7
  var react_1 = __importDefault(require("react"));
8
8
  var react_2 = require("@chakra-ui/react");
9
9
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
10
- // import ToolTip from "../ToolTip/ToolTip";
11
- // import { FaInfoCircle } from "react-icons/fa";
12
10
  var TextLabel = function (_a) {
13
11
  var label = _a.label, id = _a.id, isInformation = _a.isInformation, informationMessage = _a.informationMessage, _b = _a.isRequired, isRequired = _b === void 0 ? false : _b;
14
12
  var theme = (0, useCustomTheme_1.useCustomTheme)();
package/dist/Components/Dropdown/DropDown.js CHANGED
@@ -36,9 +36,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
36
36
  Object.defineProperty(exports, "__esModule", { value: true });
37
37
  var react_1 = __importStar(require("react"));
38
38
  var react_2 = require("@chakra-ui/react");
39
- var fi_1 = require("react-icons/fi");
40
39
  var framer_motion_1 = require("framer-motion");
41
40
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
41
+ var lucide_react_1 = require("lucide-react");
42
42
  var MotionBox = (0, framer_motion_1.motion)((0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(react_2.Box, __assign({ ref: ref }, props))); }));
43
43
  var Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
44
44
  var dropDownButtonStyle = _a.dropDownButtonStyle, ButtonText = _a.ButtonText, options = _a.options, handleOptionSelect = _a.handleOptionSelect, _b = _a.dropdownType, dropdownType = _b === void 0 ? "button" : _b, text = _a.text, DropdownIcon = _a.DropdownIcon, _c = _a.isVisibleIconShow, isVisibleIconShow = _c === void 0 ? true : _c, buttonProps = _a.buttonProps, headStyle = _a.headStyle, ListStyle = _a.ListStyle, ItemStyle = _a.ItemStyle, LabelStyle = _a.LabelStyle, ImageStyle = _a.ImageStyle, _d = _a.optionsSize, optionsSize = _d === void 0 ? "lg" : _d, _e = _a.divider, divider = _e === void 0 ? false : _e;
@@ -62,7 +62,7 @@ var Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
62
62
  };
63
63
  }, [dropdownRef, onClose]);
64
64
  var dropDownToggleOption = function () {
65
- var ButtonToggle = (react_1.default.createElement(react_2.Button, __assign({ onClick: onToggle, style: __assign({ backgroundColor: theme.colors.primary[500] }, dropDownButtonStyle), rightIcon: isVisibleIconShow ? (react_1.default.createElement(react_2.Icon, { as: fi_1.FiChevronDown, transform: isOpen ? "rotate(180deg)" : "rotate(0deg)" })) : undefined }, buttonProps),
65
+ var ButtonToggle = (react_1.default.createElement(react_2.Button, __assign({ onClick: onToggle, style: __assign({ backgroundColor: theme.colors.primary[500] }, dropDownButtonStyle), rightIcon: isVisibleIconShow ? (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.ChevronDown, transform: isOpen ? "rotate(180deg)" : "rotate(0deg)" })) : undefined }, buttonProps),
66
66
  DropdownIcon,
67
67
  " \u00A0 ",
68
68
  ButtonText));
@@ -70,7 +70,7 @@ var Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
70
70
  DropdownIcon,
71
71
  " ",
72
72
  text,
73
- isVisibleIconShow && react_1.default.createElement(react_2.Icon, { as: fi_1.FiChevronDown })));
73
+ isVisibleIconShow && react_1.default.createElement(react_2.Icon, { as: lucide_react_1.ChevronDown })));
74
74
  return dropdownType === "button" ? ButtonToggle : TextToggle;
75
75
  };
76
76
  var DropdownContentRender = function () {
package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js CHANGED
@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  var react_1 = __importDefault(require("react"));
7
7
  var react_2 = require("@chakra-ui/react");
8
- var lu_1 = require("react-icons/lu");
9
8
  var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
9
+ var lucide_react_1 = require("lucide-react");
10
10
  function VerifyEmailOtp(_a) {
11
11
  var resendMail = _a.resendMail, onChange = _a.onChange, onComplete = _a.onComplete, _b = _a.placeholder, placeholder = _b === void 0 ? "" : _b, _c = _a.pins, pins = _c === void 0 ? 5 : _c, description = _a.description, title = _a.title, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isInvalid, isInvalid = _e === void 0 ? false : _e, styles = _a.styles;
12
12
  var theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -19,7 +19,7 @@ function VerifyEmailOtp(_a) {
19
19
  padding: "3%",
20
20
  } },
21
21
  react_1.default.createElement("div", { style: { padding: "3%" } },
22
- react_1.default.createElement(lu_1.LuMailCheck, { size: "100", color: theme.colors.primary[500] })),
22
+ react_1.default.createElement(lucide_react_1.MailCheck, { size: "100", color: theme.colors.primary[500] })),
23
23
  react_1.default.createElement("h1", { style: { fontSize: "2rem", fontWeight: "bold", marginBottom: "2%" } }, title),
24
24
  react_1.default.createElement("p", { style: { textAlign: "center", marginBottom: "2%" } },
25
25
  description,
package/dist/Components/NavigationBar/NavigationBar.js CHANGED
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  var react_1 = __importDefault(require("react"));
7
7
  var react_2 = require("@chakra-ui/react");
8
8
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
9
- var fi_1 = require("react-icons/fi");
9
+ var lucide_react_1 = require("lucide-react");
10
10
  function NavBar(_a) {
11
11
  var userAvathar = _a.userAvathar, userName = _a.userName, navMenu = _a.navMenu, moreIcon = _a.moreIcon, handleNavOnClick = _a.handleNavOnClick, handleLogout = _a.handleLogout, logoutText = _a.logoutText, navigationBarText = _a.navigationBarText;
12
12
  var theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -40,7 +40,7 @@ function NavBar(_a) {
40
40
  }, _hover: {
41
41
  backgroundColor: theme.colors.primary["50"],
42
42
  } },
43
- react_1.default.createElement(react_2.Box, null, react_1.default.createElement(fi_1.FiLogOut, null)),
43
+ react_1.default.createElement(react_2.Box, null, react_1.default.createElement(lucide_react_1.LogOut, { size: 16 })),
44
44
  react_1.default.createElement(react_2.Box, null, logoutText)))))))));
45
45
  }
46
46
  exports.default = NavBar;
package/dist/Components/NoteTextArea/NoteTextArea.js CHANGED
@@ -40,10 +40,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
40
40
  };
41
41
  Object.defineProperty(exports, "__esModule", { value: true });
42
42
  var react_1 = __importStar(require("react"));
43
- var fi_1 = require("react-icons/fi");
44
43
  var styled_1 = __importDefault(require("@emotion/styled"));
45
44
  var react_2 = require("@chakra-ui/react");
46
45
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
46
+ var lucide_react_1 = require("lucide-react");
47
47
  var Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: ", ";\n border-radius: 5px;\n box-shadow: ", ";\n"], ["\n border: ", ";\n border-radius: 5px;\n box-shadow: ", ";\n"])), function (_a) {
48
48
  var isActive = _a.isActive;
49
49
  return isActive ? "1px solid #3182ce" : "1px solid #c0c6cc";
@@ -92,7 +92,7 @@ var Button = styled_1.default.button(templateObject_8 || (templateObject_8 = __m
92
92
  });
93
93
  var CancelButton = styled_1.default.button(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n border: none;\n color: #5e5c5c;\n padding: 3px 15px;\n text-align: center;\n text-decoration: none;\n background: white;\n font-size: 1rem;\n margin-right: 5px;\n border-radius: 5px;\n"], ["\n border: none;\n color: #5e5c5c;\n padding: 3px 15px;\n text-align: center;\n text-decoration: none;\n background: white;\n font-size: 1rem;\n margin-right: 5px;\n border-radius: 5px;\n"])));
94
94
  var FileViewer = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 300px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 300px;\n"])));
95
- var FileEdit = (0, styled_1.default)(fi_1.FiX)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n cursor: pointer;\n color: #ff0000;\n"], ["\n cursor: pointer;\n color: #ff0000;\n"])));
95
+ var FileEdit = (0, styled_1.default)(lucide_react_1.X)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n cursor: pointer;\n color: #ff0000;\n"], ["\n cursor: pointer;\n color: #ff0000;\n"])));
96
96
  var ErrorText = styled_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n color: #ff0000;\n font-size: 0.8rem;\n margin-top: 8px;\n"], ["\n color: #ff0000;\n font-size: 0.8rem;\n margin-top: 8px;\n"])));
97
97
  var countWords = function (text) {
98
98
  return text.trim().split(/\s+/).length;
@@ -221,7 +221,7 @@ function NoteTextArea(_a) {
221
221
  react_1.default.createElement("div", { style: { padding: "12px 15px" } },
222
222
  react_1.default.createElement("div", { style: { display: "flex", alignItems: "center" } },
223
223
  react_1.default.createElement(FileUploadLabel, { htmlFor: "file-upload" },
224
- react_1.default.createElement(fi_1.FiPaperclip, null),
224
+ react_1.default.createElement(lucide_react_1.Paperclip, { size: 17 }),
225
225
  react_1.default.createElement("input", { id: "file-upload", type: "file", style: { display: "none" }, onChange: function (e) {
226
226
  var newFiles = Array.from(e.target.files || []);
227
227
  var validFiles = newFiles.filter(function (file) { return file.size <= maxFileSize; });
package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js CHANGED
@@ -36,8 +36,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
36
36
  Object.defineProperty(exports, "__esModule", { value: true });
37
37
  var react_1 = __importStar(require("react"));
38
38
  var react_2 = require("@chakra-ui/react");
39
- var fi_1 = require("react-icons/fi");
40
- var fa_1 = require("react-icons/fa");
39
+ var lucide_react_1 = require("lucide-react");
41
40
  function ProfilePhotoViewer(_a) {
42
41
  var photoUrl = _a.photoUrl, onPhotoChange = _a.onPhotoChange, _b = _a.imageWidth, imageWidth = _b === void 0 ? "100px" : _b, _c = _a.imageAlt, imageAlt = _c === void 0 ? "Profile Photo" : _c, _d = _a.imageObjectFit, imageObjectFit = _d === void 0 ? "cover" : _d, _e = _a.imageBorderRadius, imageBorderRadius = _e === void 0 ? "full" : _e, _f = _a.editIconSize, editIconSize = _f === void 0 ? "sm" : _f, _g = _a.editIconPositionRight, editIconPositionRight = _g === void 0 ? "0px" : _g, _h = _a.editIconPositionBottom, editIconPositionBottom = _h === void 0 ? "0px" : _h, _j = _a.isRound, isRound = _j === void 0 ? true : _j, boxStyle = _a.boxStyle, _k = _a.isEditable, isEditable = _k === void 0 ? false : _k, _l = _a.isView, isView = _l === void 0 ? false : _l, style = _a.style, handleIsView = _a.handleIsView, fallbackText = _a.fallbackText;
43
42
  var _m = (0, react_1.useState)(photoUrl), photo = _m[0], setPhoto = _m[1];
@@ -70,22 +69,22 @@ function ProfilePhotoViewer(_a) {
70
69
  },
71
70
  } },
72
71
  photo ? (isPdf ? (react_1.default.createElement(react_2.Box, { width: imageWidth, height: imageWidth, borderRadius: imageBorderRadius, bg: "gray.200", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" },
73
- react_1.default.createElement(fa_1.FaFilePdf, { size: "50%" }))) : (react_1.default.createElement(react_2.Image, { src: photo, alt: imageAlt, boxSize: imageWidth, objectFit: imageObjectFit, borderRadius: imageBorderRadius }))) : fallbackText ? (react_1.default.createElement(react_2.Box, { boxSize: imageWidth, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: imageBorderRadius, bg: "gray.200" },
72
+ react_1.default.createElement(lucide_react_1.FileText, { size: "50%" }))) : (react_1.default.createElement(react_2.Image, { src: photo, alt: imageAlt, boxSize: imageWidth, objectFit: imageObjectFit, borderRadius: imageBorderRadius }))) : fallbackText ? (react_1.default.createElement(react_2.Box, { boxSize: imageWidth, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: imageBorderRadius, bg: "gray.200" },
74
73
  react_1.default.createElement(react_2.Text, { fontSize: "2xl", fontWeight: "bold" }, fallbackText))) : (react_1.default.createElement(react_2.Box, { boxSize: imageWidth, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: imageBorderRadius, bg: "gray.200" },
75
- react_1.default.createElement(fi_1.FiUser, { size: "50%" }))),
74
+ react_1.default.createElement(lucide_react_1.User, { size: "50%" }))),
76
75
  (isEditable || isView) && (react_1.default.createElement(react_1.default.Fragment, null,
77
76
  react_1.default.createElement(react_2.Box, { className: "icon-button", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-25%, -25%)", sx: {
78
77
  opacity: 0,
79
78
  transition: "opacity 0.3s",
80
79
  } },
81
80
  isEditable && (react_1.default.createElement(react_2.Tooltip, { label: "Edit", "aria-label": "Edit" },
82
- react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(fa_1.FaEdit, null), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)", marginRight: "3px" }), _hover: {
81
+ react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)", marginRight: "3px" }), _hover: {
83
82
  transform: "scale(1.1)",
84
83
  color: "blue.500",
85
84
  boxShadow: "0 8px 16px rgba(0, 0, 0, 0.3)",
86
85
  } }))),
87
86
  isView && (react_1.default.createElement(react_2.Tooltip, { label: "View", "aria-label": "View" },
88
- react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(fa_1.FaEye, null), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)" }), _hover: {
87
+ react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)" }), _hover: {
89
88
  transform: "scale(1.1)",
90
89
  color: "blue.500",
91
90
  boxShadow: "0 8px 16px rgba(0, 0, 0, 0.3)",
package/dist/Components/Search/Search.js CHANGED
@@ -32,12 +32,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
32
32
  Object.defineProperty(exports, "__esModule", { value: true });
33
33
  var react_1 = __importStar(require("react"));
34
34
  var styled_1 = __importDefault(require("@emotion/styled"));
35
- var fa_1 = require("react-icons/fa");
36
- var io_1 = require("react-icons/io");
35
+ var lucide_react_1 = require("lucide-react");
37
36
  var Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n border-radius: 4px;\n padding: 0.5rem 0.7rem 0.5rem 0.7rem;\n width: 100%;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n border-radius: 20px;\n background: #fff;\n border: 1px solid #f1f1f1;\n"], ["\n display: flex;\n align-items: center;\n border-radius: 4px;\n padding: 0.5rem 0.7rem 0.5rem 0.7rem;\n width: 100%;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n border-radius: 20px;\n background: #fff;\n border: 1px solid #f1f1f1;\n"])));
38
37
  var Input = styled_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n flex: 1;\n border: none;\n outline: none;\n margin-left: 0.5rem;\n background: transparent;\n"], ["\n flex: 1;\n border: none;\n outline: none;\n margin-left: 0.5rem;\n background: transparent;\n"])));
39
- var SearchIcon = (0, styled_1.default)(fa_1.FaSearch)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: #888;\n"], ["\n color: #888;\n"])));
40
- var CloseIcon = (0, styled_1.default)(io_1.IoIosClose)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: #888;\n font-size: 1.5rem;\n"], ["\n color: #888;\n font-size: 1.5rem;\n"])));
38
+ var SearchIcon = (0, styled_1.default)(lucide_react_1.Search)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: #888;\n"], ["\n color: #888;\n"])));
39
+ var CloseIcon = (0, styled_1.default)(lucide_react_1.X)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: #888;\n font-size: 1.5rem;\n"], ["\n color: #888;\n font-size: 1.5rem;\n"])));
41
40
  var Shortcut = styled_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-left: auto;\n padding-left: 0.5rem;\n color: #888;\n font-size: 0.9rem;\n"], ["\n margin-left: auto;\n padding-left: 0.5rem;\n color: #888;\n font-size: 0.9rem;\n"])));
42
41
  function Search(_a) {
43
42
  var _b = _a.placeholder, placeholder = _b === void 0 ? "Search..." : _b, onSearch = _a.onSearch, onclose = _a.onclose, _c = _a.shortcut, shortcut = _c === void 0 ? "Ctrl+K" : _c, query = _a.query;
package/dist/Components/SideBar/SideBar.js CHANGED
@@ -25,9 +25,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
26
  var react_1 = __importStar(require("react"));
27
27
  var react_2 = require("@chakra-ui/react");
28
- var fi_1 = require("react-icons/fi");
29
28
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
30
29
  var Sidebar_1 = require("../../Constants/Sidebar");
30
+ var lucide_react_1 = require("lucide-react");
31
31
  function Sidebar(_a) {
32
32
  var _b, _c;
33
33
  var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName;
@@ -65,7 +65,7 @@ function Sidebar(_a) {
65
65
  react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", fontSize: 20, fontWeight: 800 }, companyName))) : (react_1.default.createElement(react_2.Box, { ml: "-8px", mt: 5, width: "100%", display: "flex", justifyContent: "center", alignItems: "center" },
66
66
  react_1.default.createElement(react_2.Text, { fontWeight: 800, fontSize: "1.3rem", textAlign: "center" }, toggle ? companyName[0] : companyName))),
67
67
  react_1.default.createElement(react_2.Flex, { transition: "all 0.5s", position: "absolute", left: toggle ? "55px" : "180px", top: "60px", background: theme.colors.primary[500], borderRadius: "23px" },
68
- react_1.default.createElement(react_2.IconButton, { background: "none", icon: toggle ? (react_1.default.createElement(fi_1.FiChevronRight, { color: (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.white })) : (react_1.default.createElement(fi_1.FiChevronLeft, { color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.white })), _hover: { background: "none" }, onClick: changeToggle, "aria-label": "Toggle Navigation" })),
68
+ react_1.default.createElement(react_2.IconButton, { background: "none", icon: toggle ? (react_1.default.createElement(lucide_react_1.ChevronRight, { color: (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.white })) : (react_1.default.createElement(lucide_react_1.ChevronLeft, { color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.white })), _hover: { background: "none" }, onClick: changeToggle, "aria-label": "Toggle Navigation" })),
69
69
  react_1.default.createElement(react_2.Flex, { mt: 50, flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss },
70
70
  react_1.default.createElement(RenderMenuItems, null)))));
71
71
  }
package/dist/Components/SideBar/SideBarProps.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import { IconType } from "react-icons";
2
1
  export type SidebarProps = {
3
2
  menus: Menu[];
4
3
  activeMenu: string;
@@ -10,7 +9,7 @@ export type SidebarProps = {
10
9
  };
11
10
  type Menu = {
12
11
  title: string;
13
- icon: IconType;
12
+ icon: any;
14
13
  url: string;
15
14
  subMenu?: {
16
15
  title: string;
package/dist/Components/SideBar/Sidebar.stories.js CHANGED
@@ -3,6 +3,5 @@
3
3
  // import { StoryFn, Meta } from '@storybook/react/types-6-0';
4
4
  // import Sidebar from './SideBar';
5
5
  // import { SidebarProps } from './SideBarProps';
6
- // import { FiBriefcase, FiCalendar, FiDollarSign, FiHome, FiSettings, FiUser } from 'react-icons/fi';
7
6
  // import { fn } from '@storybook/test';
8
7
  Object.defineProperty(exports, "__esModule", { value: true });
package/dist/Components/Table/Components/Pagination.js CHANGED
@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  var react_1 = __importDefault(require("react"));
7
7
  var react_2 = require("@chakra-ui/react");
8
- var fa_1 = require("react-icons/fa");
9
8
  var table_1 = require("../../../Utils/table");
9
+ var lucide_react_1 = require("lucide-react");
10
10
  var Pagination = function (_a) {
11
11
  var paginationText = _a.paginationText, handlePageSizeChange = _a.handlePageSizeChange, rowsPerPage = _a.rowsPerPage, currentPage = _a.currentPage, pages = _a.pages, setCurrentPage = _a.setCurrentPage, dataLength = _a.dataLength, isServerPagination = _a.isServerPagination;
12
12
  var pageSizeOptions = (0, table_1.pageSizeCalculation)(dataLength);
@@ -19,9 +19,9 @@ var Pagination = function (_a) {
19
19
  pageSizeOptions.map(function (size, index) { return (react_1.default.createElement("option", { key: index, value: size }, size)); }))),
20
20
  react_1.default.createElement(react_2.Flex, null,
21
21
  react_1.default.createElement(react_2.IconButton, { mx: 1, "aria-label": "left-icon", color: isLeftDisabled ? "gray" : "black", rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(0); } },
22
- react_1.default.createElement(fa_1.FaAngleDoubleLeft, null)),
22
+ react_1.default.createElement(lucide_react_1.ChevronsLeft, null)),
23
23
  react_1.default.createElement(react_2.IconButton, { mx: 1, "aria-label": "left-icon", color: isLeftDisabled ? "gray" : "black", rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return currentPage > 0 && setCurrentPage(currentPage - 1); } },
24
- react_1.default.createElement(fa_1.FaAngleLeft, null)),
24
+ react_1.default.createElement(lucide_react_1.ChevronLeft, null)),
25
25
  react_1.default.createElement(react_2.Text, { mx: 1, mt: 3, fontSize: 12 },
26
26
  "Page ",
27
27
  currentPage + 1,
@@ -30,8 +30,8 @@ var Pagination = function (_a) {
30
30
  react_1.default.createElement(react_2.IconButton, { mx: 1, "aria-label": "left-icon", color: isRightDisabled ? "gray" : "black", rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () {
31
31
  return currentPage < pages - 1 && setCurrentPage(currentPage + 1);
32
32
  } },
33
- react_1.default.createElement(fa_1.FaAngleRight, null)),
33
+ react_1.default.createElement(lucide_react_1.ChevronRight, null)),
34
34
  react_1.default.createElement(react_2.IconButton, { mx: 1, "aria-label": "left-icon", color: isRightDisabled ? "gray" : "black", rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(pages - 1); } },
35
- react_1.default.createElement(fa_1.FaAngleDoubleRight, null)))));
35
+ react_1.default.createElement(lucide_react_1.ChevronsRight, null)))));
36
36
  };
37
37
  exports.default = Pagination;
package/dist/Components/Table/Components/TableActions.js CHANGED
@@ -5,25 +5,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  var react_1 = __importDefault(require("react"));
7
7
  var react_2 = require("@chakra-ui/react");
8
- var fa_1 = require("react-icons/fa");
9
- var md_1 = require("react-icons/md");
8
+ var lucide_react_1 = require("lucide-react");
10
9
  var TableActions = function (_a) {
11
10
  var row = _a.row;
12
11
  return (react_1.default.createElement(react_2.Popover, { placement: "bottom-start", closeOnBlur: true },
13
12
  react_1.default.createElement(react_2.PopoverTrigger, null,
14
- react_1.default.createElement(react_2.IconButton, { "aria-label": "Link", color: "black", icon: react_1.default.createElement(fa_1.FaEllipsisV, { fontSize: 12 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" } })),
13
+ react_1.default.createElement(react_2.IconButton, { "aria-label": "Link", color: "black", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" } })),
15
14
  react_1.default.createElement(react_2.Portal, null,
16
15
  react_1.default.createElement(react_2.PopoverContent, { w: "auto", minW: "150px", boxShadow: "lg", p: 0, zIndex: 999 },
17
16
  react_1.default.createElement(react_2.PopoverBody, null,
18
17
  react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1 },
19
18
  row.onLink && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () { return row === null || row === void 0 ? void 0 : row.onLink(row); } },
20
- react_1.default.createElement(fa_1.FaExternalLinkAlt, null),
19
+ react_1.default.createElement(lucide_react_1.ExternalLink, { size: 17 }),
21
20
  " View")),
22
21
  row.onEdit && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () { var _a; return (_a = row === null || row === void 0 ? void 0 : row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row); } },
23
- react_1.default.createElement(fa_1.FaEdit, null),
22
+ react_1.default.createElement(lucide_react_1.Pencil, { size: 17 }),
24
23
  " Edit")),
25
24
  row.onDelete && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, onClick: function () { var _a; return (_a = row === null || row === void 0 ? void 0 : row.onDelete) === null || _a === void 0 ? void 0 : _a.call(row, row); } },
26
- react_1.default.createElement(md_1.MdDelete, null),
25
+ react_1.default.createElement(lucide_react_1.Trash2, { size: 17 }),
27
26
  "Delete"))))))));
28
27
  };
29
28
  exports.default = TableActions;
package/dist/Components/Table/Components/TableBody.js CHANGED
@@ -31,8 +31,8 @@ var react_2 = __importStar(require("react"));
31
31
  var table_1 = require("../../../Utils/table");
32
32
  var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
33
33
  var TableLoading_1 = require("./TableLoading");
34
- var fa_1 = require("react-icons/fa");
35
34
  var TableActions_1 = __importDefault(require("./TableActions"));
35
+ var lucide_react_1 = require("lucide-react");
36
36
  var TableBody = function (_a) {
37
37
  var _b;
38
38
  var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, startRow = _a.startRow, endRow = _a.endRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections, isLoading = _a.isLoading, onRowClick = _a.onRowClick, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze;
@@ -68,7 +68,7 @@ var TableBody = function (_a) {
68
68
  var RenderContent = (0, react_2.useCallback)(function (_a) {
69
69
  var _b, _c;
70
70
  var isExpanded = _a.isExpanded, rowIndex = _a.rowIndex, isContent = _a.isContent;
71
- return (react_2.default.createElement(react_1.Td, { w: "6", p: 0, fontSize: 14, backgroundColor: freezedBgColor, color: freezedTextColor, position: "sticky", border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" }, isContent && (react_2.default.createElement(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], icon: isExpanded ? (react_2.default.createElement(fa_1.FaAngleDown, { fontSize: 16 })) : (react_2.default.createElement(fa_1.FaAngleRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: function () { return toggleRowExpansion(rowIndex); }, variant: "ghost" }))));
71
+ return (react_2.default.createElement(react_1.Td, { w: "6", p: 0, fontSize: 14, backgroundColor: freezedBgColor, color: freezedTextColor, position: "sticky", border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" }, isContent && (react_2.default.createElement(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], icon: isExpanded ? (react_2.default.createElement(lucide_react_1.ChevronDown, { fontSize: 16 })) : (react_2.default.createElement(lucide_react_1.ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: function () { return toggleRowExpansion(rowIndex); }, variant: "ghost" }))));
72
72
  }, [freezedBgColor, freezedTextColor, noBorders, theme.colors.gray]);
73
73
  var RenderView = (0, react_2.useCallback)(function (_a) {
74
74
  var _b;
package/dist/Components/Table/Components/TableFilters.js CHANGED
@@ -25,8 +25,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
26
  var react_1 = __importStar(require("react"));
27
27
  var react_2 = require("@chakra-ui/react");
28
- var fa_1 = require("react-icons/fa");
29
28
  var table_1 = require("../../../Utils/table");
29
+ var lucide_react_1 = require("lucide-react");
30
30
  var TableFilters = (0, react_1.memo)(function (_a) {
31
31
  var header = _a.header, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, onClose = _a.onClose;
32
32
  var searchRef = (0, react_1.useRef)(null);
@@ -43,13 +43,13 @@ var TableFilters = (0, react_1.memo)(function (_a) {
43
43
  setRefreshDataOnOpen(function (prev) { return !prev; });
44
44
  } },
45
45
  react_1.default.createElement(react_2.PopoverTrigger, null,
46
- react_1.default.createElement(react_2.IconButton, { "aria-label": "Search", icon: react_1.default.createElement(fa_1.FaEllipsisV, null), size: "xs", variant: "ghost", _hover: { bg: "none" } })),
46
+ react_1.default.createElement(react_2.IconButton, { "aria-label": "Search", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 17 }), size: "xs", variant: "ghost", _hover: { bg: "none" } })),
47
47
  react_1.default.createElement(react_2.Portal, null,
48
48
  react_1.default.createElement(react_2.PopoverContent, { width: "200px" },
49
49
  react_1.default.createElement(react_2.PopoverBody, { p: 2 },
50
50
  react_1.default.createElement(react_2.InputGroup, { flex: "1", size: "xs" },
51
51
  react_1.default.createElement(react_2.InputLeftElement, { pointerEvents: "none" },
52
- react_1.default.createElement(fa_1.FaSearch, { color: "gray.300" })),
52
+ react_1.default.createElement(lucide_react_1.Search, { color: "gray.300" })),
53
53
  react_1.default.createElement(react_2.Input, { autoFocus: true, placeholder: "Search ".concat(header.label, "..."), size: "xs", ref: searchRef, onChange: function (e) {
54
54
  e.stopPropagation();
55
55
  debounceRef(e.target.value);
package/dist/Components/Table/Components/TableHeader.js CHANGED
@@ -41,10 +41,8 @@ var react_1 = require("@chakra-ui/react");
41
41
  var react_2 = __importStar(require("react"));
42
42
  var table_1 = require("../../../Utils/table");
43
43
  var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
44
- var fa_1 = require("react-icons/fa");
45
- var pi_1 = require("react-icons/pi");
46
- var lu_1 = require("react-icons/lu");
47
44
  var TableFilters_1 = __importDefault(require("./TableFilters"));
45
+ var lucide_react_1 = require("lucide-react");
48
46
  var TableHeader = function (_a) {
49
47
  var _b;
50
48
  var columns = _a.columns, isCheckbox = _a.isCheckbox, handleSort = _a.handleSort, headerRefs = _a.headerRefs, columnWidths = _a.columnWidths, columnsSort = _a.columnsSort, headerBgColor = _a.headerBgColor, headerTextColor = _a.headerTextColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, checked = _a.checked, isLoading = _a.isLoading, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch;
@@ -66,14 +64,14 @@ var TableHeader = function (_a) {
66
64
  var _a;
67
65
  return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: freezedBgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
68
66
  react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "center" },
69
- react_2.default.createElement(pi_1.PiTreeViewFill, { fontSize: 18 }))));
67
+ react_2.default.createElement(lucide_react_1.FolderGit2, { size: 17 }))));
70
68
  }, [freezedBgColor, noBorders, theme.colors.gray]);
71
69
  var RenderView = (0, react_2.useCallback)(function () {
72
70
  var _a;
73
71
  var BgColor = isActionFreeze ? freezedBgColor : headerBgColor;
74
72
  return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: BgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
75
73
  react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "center" },
76
- react_2.default.createElement(lu_1.LuFileSymlink, { fontSize: 16 }))));
74
+ react_2.default.createElement(lucide_react_1.FileSymlink, { size: 17 }))));
77
75
  }, [
78
76
  freezedBgColor,
79
77
  noBorders,
@@ -96,9 +94,9 @@ var SortingIcon = (0, react_2.memo)(function (_a) {
96
94
  var sortState = _a.sortState, handleSortClick = _a.handleSortClick;
97
95
  var theme = (0, useCustomTheme_1.useCustomTheme)();
98
96
  return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", bg: theme.colors.white, borderRadius: "full", cursor: "pointer", w: "24px", h: "24px", ml: 2, onClick: handleSortClick, transition: "transform 0.2s ease-in-out", _hover: { transform: "scale(1.1)" } },
99
- sortState === "none" && react_2.default.createElement(fa_1.FaSort, { color: "black", size: 14 }),
100
- sortState === "asc" && react_2.default.createElement(fa_1.FaCaretUp, { color: "black", size: 14 }),
101
- sortState === "desc" && react_2.default.createElement(fa_1.FaCaretDown, { color: "black", size: 14 })));
97
+ sortState === "none" && react_2.default.createElement(lucide_react_1.ChevronsUpDown, { color: "black", size: 14 }),
98
+ sortState === "asc" && react_2.default.createElement(lucide_react_1.ChevronUp, { color: "black", size: 14 }),
99
+ sortState === "desc" && react_2.default.createElement(lucide_react_1.ChevronDown, { color: "black", size: 14 })));
102
100
  });
103
101
  var ColumnHeader = (0, react_2.memo)(function (_a) {
104
102
  var _b;
package/dist/Components/Table/TableSettings/ManageColumns.js CHANGED
@@ -48,9 +48,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
48
48
  Object.defineProperty(exports, "__esModule", { value: true });
49
49
  var react_1 = __importStar(require("react"));
50
50
  var react_2 = require("@chakra-ui/react");
51
- var rx_1 = require("react-icons/rx");
52
51
  var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
53
52
  var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
53
+ var lucide_react_1 = require("lucide-react");
54
54
  var ManageColumns = function (_a) {
55
55
  var columns = _a.columns, childInputMethodsRef = _a.childInputMethodsRef;
56
56
  var theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -98,7 +98,7 @@ var ManageColumns = function (_a) {
98
98
  } }),
99
99
  react_1.default.createElement(react_2.Text, { ml: "2", fontSize: 14 }, "Select all"))),
100
100
  react_1.default.createElement(react_2.List, { spacing: "2" }, filteredItems.length > 0 ? (filteredItems.map(function (item, index) { return (react_1.default.createElement(react_2.ListItem, { key: item.id, draggable: true, onDragStart: function () { return handleDragStart(index); }, onDragOver: function (e) { return handleDragOver(e, index); }, onDragEnd: handleDragEnd, bg: theme.colors.gray[50], display: "flex", alignItems: "center", justifyContent: "space-between", borderRadius: "md", border: "1px solid", borderColor: "gray.200", cursor: "grab", position: "relative", fontSize: 14 },
101
- react_1.default.createElement(react_2.IconButton, { "aria-label": "Drag", icon: react_1.default.createElement(rx_1.RxDragHandleDots2, null), variant: "ghost", cursor: "grab", mr: "8" }),
101
+ react_1.default.createElement(react_2.IconButton, { "aria-label": "Drag", icon: react_1.default.createElement(lucide_react_1.GripVertical, null), variant: "ghost", cursor: "grab", mr: "8" }),
102
102
  react_1.default.createElement(Checkbox_1.default, { isChecked: item.isHidden, onChange: function () { return toggleCheckbox(index); }, sx: {
103
103
  position: "absolute",
104
104
  left: 50,
package/dist/Components/Table/TableSettings/TableSettings.js CHANGED
@@ -29,9 +29,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = require("@chakra-ui/react");
30
30
  var react_2 = __importStar(require("react"));
31
31
  var ManageColumns_1 = __importDefault(require("./ManageColumns"));
32
- var io5_1 = require("react-icons/io5");
33
32
  var Button_1 = __importDefault(require("../../Button/Button"));
34
33
  var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
34
+ var lucide_react_1 = require("lucide-react");
35
35
  var TableSettings = function (_a) {
36
36
  var columns = _a.columns, onSave = _a.onSave;
37
37
  var theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -41,7 +41,7 @@ var TableSettings = function (_a) {
41
41
  return (react_2.default.createElement(react_1.Box, null,
42
42
  react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "flex-end", mb: 1 },
43
43
  react_2.default.createElement(react_1.IconButton, { onClick: function () { return setSettingsOpen(true); }, "aria-label": "Table Settings", border: "1px solid ".concat(theme.colors.gray[300]) },
44
- react_2.default.createElement(io5_1.IoSettingsOutline, { fontSize: 18 }))),
44
+ react_2.default.createElement(lucide_react_1.Settings, { fontSize: 18 }))),
45
45
  react_2.default.createElement(react_1.Modal, { isOpen: settingsOpen, onClose: function () { return setSettingsOpen(false); }, size: "md" },
46
46
  react_2.default.createElement(react_1.ModalOverlay, null),
47
47
  react_2.default.createElement(react_1.ModalContent, { minW: "700px", minH: "600px" },
package/dist/Components/Timeline/Timeline.js CHANGED
@@ -9,8 +9,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
10
  var react_1 = __importDefault(require("react"));
11
11
  var styled_1 = __importDefault(require("@emotion/styled"));
12
- var fa_1 = require("react-icons/fa");
13
12
  var react_2 = require("@chakra-ui/react");
13
+ var lucide_react_1 = require("lucide-react");
14
14
  var TimelineContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n padding: 0px 24px;\n margin: 0 auto;\n width: 100%;\n max-width: 800px;\n @media (max-width: 768px) {\n padding: 0px 16px;\n max-width: 100%;\n }\n"], ["\n position: relative;\n padding: 0px 24px;\n margin: 0 auto;\n width: 100%;\n max-width: 800px;\n @media (max-width: 768px) {\n padding: 0px 16px;\n max-width: 100%;\n }\n"])));
15
15
  var Line = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 2px;\n background-color: #d2d9e0;\n transform: translateX(-50%);\n @media (max-width: 768px) {\n left: 25px; /* Move the line towards the left */\n }\n"], ["\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 2px;\n background-color: #d2d9e0;\n transform: translateX(-50%);\n @media (max-width: 768px) {\n left: 25px; /* Move the line towards the left */\n }\n"])));
16
16
  var EventContainer = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: ", ";\n width: 100%;\n // padding: 1rem 0 1rem 0;\n box-sizing: border-box;\n position: relative;\n margin-bottom: 24px;\n align-items: center; /* Center alignment for dot and event content */\n text-align: ", ";\n @media (max-width: 768px) {\n flex-direction: column;\n text-align: left;\n align-items: flex-start;\n }\n"], ["\n display: flex;\n justify-content: ", ";\n width: 100%;\n // padding: 1rem 0 1rem 0;\n box-sizing: border-box;\n position: relative;\n margin-bottom: 24px;\n align-items: center; /* Center alignment for dot and event content */\n text-align: ", ";\n @media (max-width: 768px) {\n flex-direction: column;\n text-align: left;\n align-items: flex-start;\n }\n"])), function (_a) {
@@ -101,11 +101,11 @@ var Timeline = function (_a) {
101
101
  var getIcon = function (event) {
102
102
  switch (event.action_from) {
103
103
  case "Accounts":
104
- return react_1.default.createElement(fa_1.FaRupeeSign, null);
104
+ return react_1.default.createElement(lucide_react_1.IndianRupee, { size: 17 });
105
105
  case "Notes":
106
- return react_1.default.createElement(fa_1.FaFileAlt, null);
106
+ return react_1.default.createElement(lucide_react_1.FileText, { size: 17 });
107
107
  default:
108
- return react_1.default.createElement(fa_1.FaCircle, null);
108
+ return react_1.default.createElement(lucide_react_1.Volleyball, { size: 17 });
109
109
  }
110
110
  };
111
111
  var groupEventsByDate = function (events) {
@@ -156,7 +156,7 @@ var Timeline = function (_a) {
156
156
  } },
157
157
  react_1.default.createElement(EventTitle, null, event.action_from + " " + event.title),
158
158
  react_1.default.createElement(react_2.Tooltip, { label: formatChanges(event.changes), shouldWrapChildren: true, placement: "top", hasArrow: true },
159
- react_1.default.createElement(fa_1.FaInfoCircle, { style: { marginLeft: "5px" } }))),
159
+ react_1.default.createElement(lucide_react_1.Info, { style: { marginLeft: "5px" }, size: 17 }))),
160
160
  react_1.default.createElement(EventDate, null, " by " +
161
161
  event.action_by +
162
162
  " " +
package/dist/Components/Trail/EditableCell.js CHANGED
@@ -26,7 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
26
26
  exports.EditableCell = void 0;
27
27
  var react_1 = __importStar(require("react"));
28
28
  var react_2 = require("@chakra-ui/react");
29
- var fa_1 = require("react-icons/fa");
29
+ var lucide_react_1 = require("lucide-react");
30
30
  var EditableCell = function (_a) {
31
31
  var row = _a.row, column = _a.column, isEditable = _a.isEditable, handleCellClick = _a.handleCellClick, handleCellChange = _a.handleCellChange;
32
32
  var cellRef = (0, react_1.useRef)(null);
@@ -47,7 +47,7 @@ var EditableCell = function (_a) {
47
47
  else if (column.label === "priority") {
48
48
  return (react_1.default.createElement(react_2.Box, { width: "100%", ref: cellRef },
49
49
  react_1.default.createElement(react_2.Menu, { isOpen: true },
50
- react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rightIcon: react_1.default.createElement(fa_1.FaChevronDown, null), bg: "teal.500", color: "white", _hover: { bg: "teal.600" }, _active: { bg: "teal.700" } }, value),
50
+ react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rightIcon: react_1.default.createElement(lucide_react_1.ChevronDown, null), bg: "teal.500", color: "white", _hover: { bg: "teal.600" }, _active: { bg: "teal.700" } }, value),
51
51
  react_1.default.createElement(react_2.MenuList, null,
52
52
  react_1.default.createElement(react_2.MenuItem, { onClick: function () {
53
53
  return handleCellChange(row.id, column.label, "Low");
package/dist/Pages/accordion.js CHANGED
@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  var react_1 = __importDefault(require("react"));
7
7
  var Accordion_1 = __importDefault(require("../Components/Accordion/Accordion"));
8
8
  var react_2 = require("@chakra-ui/react");
9
- var fa_1 = require("react-icons/fa");
9
+ var lucide_react_1 = require("lucide-react");
10
10
  var Accordions = function () {
11
11
  return (react_1.default.createElement("div", null,
12
12
  react_1.default.createElement(Accordion_1.default, { allowToggle: true, items: [
13
13
  {
14
14
  header: (react_1.default.createElement(react_1.default.Fragment, null,
15
15
  react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left" }, "Section 1 title"),
16
- react_1.default.createElement(fa_1.FaChevronDown, { style: { marginRight: "8px" } }))),
16
+ react_1.default.createElement(lucide_react_1.ChevronDown, { style: { marginRight: "8px" } }))),
17
17
  content: (react_1.default.createElement("div", null,
18
18
  react_1.default.createElement(react_2.Text, null, "This is text inside Section 1."),
19
19
  react_1.default.createElement(react_2.Box, { bg: "gray.200", p: 4, mt: 2 }, "This is a box with more content inside Section 1."),
@@ -29,7 +29,7 @@ var Accordions = function () {
29
29
  {
30
30
  header: (react_1.default.createElement(react_1.default.Fragment, null,
31
31
  react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left" }, "Section 1 title"),
32
- react_1.default.createElement(fa_1.FaChevronDown, { style: { marginRight: "8px" } }))),
32
+ react_1.default.createElement(lucide_react_1.ChevronDown, { style: { marginRight: "8px" } }))),
33
33
  content: (react_1.default.createElement("div", null,
34
34
  react_1.default.createElement(react_2.Text, null, "This is text inside Section 1."),
35
35
  react_1.default.createElement(react_2.Box, { bg: "gray.200", p: 4, mt: 2 }, "This is a box with more content inside Section 1."),
package/dist/Pages/button.js CHANGED
@@ -5,14 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  var react_1 = __importDefault(require("react"));
7
7
  var ButtonGroupIcon_1 = __importDefault(require("../Components/ButtonGroupIcon/ButtonGroupIcon"));
8
- var fi_1 = require("react-icons/fi");
9
8
  var Button_1 = __importDefault(require("../Components/Button/Button"));
9
+ var lucide_react_1 = require("lucide-react");
10
10
  var ButtonPage = function () {
11
11
  return (react_1.default.createElement("div", null,
12
- react_1.default.createElement(ButtonGroupIcon_1.default, { buttonText: "hello", rightIcon: react_1.default.createElement(fi_1.FiHome, null), leftIcon: react_1.default.createElement(fi_1.FiHome, null), size: "md", variant: "solid",
12
+ react_1.default.createElement(ButtonGroupIcon_1.default, { buttonText: "hello", rightIcon: react_1.default.createElement(lucide_react_1.House, null), leftIcon: react_1.default.createElement(lucide_react_1.House, null), size: "md", variant: "solid",
13
13
  // color="red"
14
14
  rightIconDropdown: true, dropdownOptions: [
15
- { label: "123", id: "1", image: react_1.default.createElement(fi_1.FiHome, { style: { marginRight: "20px" } }) },
15
+ { label: "123", id: "1", image: react_1.default.createElement(lucide_react_1.House, { style: { marginRight: "20px" } }) },
16
16
  { label: "456", id: "2" }
17
17
  ], onDropdownOptionClick: function (e, option) {
18
18
  console.log(e, option);
package/dist/Pages/dropdown.js CHANGED
@@ -5,19 +5,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  var react_1 = __importDefault(require("react"));
7
7
  var DropDown_1 = __importDefault(require("../Components/Dropdown/DropDown"));
8
- var fi_1 = require("react-icons/fi");
8
+ var lucide_react_1 = require("lucide-react");
9
9
  var DropdownPage = function () {
10
10
  var exportOptionss = [
11
11
  { id: 1, label: "Upload file" },
12
- { id: 2, label: "Documents", image: fi_1.FiChevronUp },
13
- { id: 3, label: "CRM workDrive", image: fi_1.FiChevronUp },
14
- { id: 4, label: "Other Cloud Drives", image: fi_1.FiChevronUp },
15
- { id: 5, label: "Link(URL)", image: fi_1.FiChevronUp },
12
+ { id: 2, label: "Documents", image: lucide_react_1.ChevronUp },
13
+ { id: 3, label: "CRM workDrive", image: lucide_react_1.ChevronUp },
14
+ { id: 4, label: "Other Cloud Drives", image: lucide_react_1.ChevronUp },
15
+ { id: 5, label: "Link(URL)", image: lucide_react_1.ChevronUp },
16
16
  ];
17
17
  return (react_1.default.createElement("div", null,
18
18
  react_1.default.createElement(DropDown_1.default, { ButtonText: "hello", optionsSize: "sm", options: exportOptionss,
19
19
  // dropDownButtonStyle={{ color: "red" }}
20
- DropdownIcon: react_1.default.createElement(fi_1.FiMoreHorizontal, { color: "gray.500" }), dropdownType: "button", handleOptionSelect: function (id, label) {
20
+ DropdownIcon: react_1.default.createElement(lucide_react_1.Ellipsis, { color: "gray.500" }), dropdownType: "button", handleOptionSelect: function (id, label) {
21
21
  console.log("optionid", id, label);
22
22
  }, buttonProps: { variant: "solid", colorScheme: "red" }, isVisibleIconShow: true, divider: true })));
23
23
  };
package/dist/Pages/input.js CHANGED
@@ -5,16 +5,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  var react_1 = __importDefault(require("react"));
7
7
  var TextInput_1 = __importDefault(require("../Components/Input/TextInput"));
8
- var fi_1 = require("react-icons/fi");
8
+ var lucide_react_1 = require("lucide-react");
9
9
  var InputPage = function () {
10
10
  return (react_1.default.createElement("div", null,
11
11
  react_1.default.createElement(TextInput_1.default, { label: "My Label", id: "hello", name: "hello",
12
12
  //helperText="Hello"
13
13
  //errorMessage="Required"
14
14
  //error={true}
15
- type: "text", inputRightIcon: react_1.default.createElement(fi_1.FiUser, { color: "gray.300" }), onRightIconclick: function () {
15
+ type: "text", inputRightIcon: react_1.default.createElement(lucide_react_1.User, { color: "gray.300" }), onRightIconclick: function () {
16
16
  console.log("icon click");
17
- }, inputLeftIcon: react_1.default.createElement(fi_1.FiUser, { color: "gray.300" }), onLeftIconClick: function () {
17
+ }, inputLeftIcon: react_1.default.createElement(lucide_react_1.User, { color: "gray.300" }), onLeftIconClick: function () {
18
18
  console.log("icon click");
19
19
  }, key: "input",
20
20
  // border={"0px solid"}
package/dist/Pages/selectSearch.js CHANGED
@@ -28,7 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importStar(require("react"));
30
30
  var SelectSearch_1 = __importDefault(require("../Components/SelectSearch/SelectSearch"));
31
- var fi_1 = require("react-icons/fi");
31
+ var lucide_react_1 = require("lucide-react");
32
32
  var SelectSearchs = function () {
33
33
  var _a = (0, react_1.useState)("Option 1"), selectSearchText = _a[0], setSelectSearchText = _a[1];
34
34
  var _b = (0, react_1.useState)({ id: "1", label: "Option 1" }), selectedOption = _b[0], setSelectedOption = _b[1];
@@ -45,7 +45,7 @@ var SelectSearchs = function () {
45
45
  console.log(value);
46
46
  }, initialSelectedOption: selectedOption, onOptionSelect: function (data) {
47
47
  setSelectSearchText(data.label);
48
- }, name: "hai", label: "SelectSearch", searchQuery: selectSearchText, rightIcon: react_1.default.createElement(fi_1.FiUser, { color: "gray.300" }), isMultipleSelect: false, onOptionMultiSelect: function (data) {
48
+ }, name: "hai", label: "SelectSearch", searchQuery: selectSearchText, rightIcon: react_1.default.createElement(lucide_react_1.User, { color: "gray.300" }), isMultipleSelect: false, onOptionMultiSelect: function (data) {
49
49
  setSelectedOption(data);
50
50
  } })),
51
51
  react_1.default.createElement("br", null),
@@ -65,7 +65,7 @@ var SelectSearchs = function () {
65
65
  // onOptionSelect={(data) => {
66
66
  // setMultiSelectSearchText(data.label);
67
67
  // }}
68
- name: "hai", label: "MultiSelectSearch", searchQuery: multiSelectSearchText, rightIcon: react_1.default.createElement(fi_1.FiUser, { color: "gray.300" }), isMultipleSelect: true, onOptionMultiSelect: function (data) {
68
+ name: "hai", label: "MultiSelectSearch", searchQuery: multiSelectSearchText, rightIcon: react_1.default.createElement(lucide_react_1.User, { color: "gray.300" }), isMultipleSelect: true, onOptionMultiSelect: function (data) {
69
69
  setMultiSelectedOption(data);
70
70
  } }))));
71
71
  };
package/dist/Theme/Default/fonts.d.ts ADDED
@@ -0,0 +1,35 @@
1
+ import "@fontsource/ubuntu-sans";
2
+ declare const fontOptions: {
3
+ fonts: {
4
+ body: string;
5
+ heading: string;
6
+ mono: string;
7
+ };
8
+ fontSizes: {
9
+ xs: string;
10
+ sm: string;
11
+ md: string;
12
+ lg: string;
13
+ xl: string;
14
+ "2xl": string;
15
+ "3xl": string;
16
+ "4xl": string;
17
+ "5xl": string;
18
+ "6xl": string;
19
+ "7xl": string;
20
+ "8xl": string;
21
+ "9xl": string;
22
+ };
23
+ fontWeights: {
24
+ hairline: number;
25
+ thin: number;
26
+ light: number;
27
+ normal: number;
28
+ medium: number;
29
+ semibold: number;
30
+ bold: number;
31
+ extrabold: number;
32
+ black: number;
33
+ };
34
+ };
35
+ export default fontOptions;
package/dist/Theme/Default/fonts.js ADDED
@@ -0,0 +1,37 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ require("@fontsource/ubuntu-sans");
4
+ var fontOptions = {
5
+ fonts: {
6
+ body: "Ubuntu Sans, serif",
7
+ heading: "Ubuntu Sans, serif",
8
+ mono: "Ubuntu Sans, monospace",
9
+ },
10
+ fontSizes: {
11
+ xs: "0.75rem",
12
+ sm: "0.875rem",
13
+ md: "1rem",
14
+ lg: "1.125rem",
15
+ xl: "1.25rem",
16
+ "2xl": "1.5rem",
17
+ "3xl": "1.875rem",
18
+ "4xl": "2.25rem",
19
+ "5xl": "3rem",
20
+ "6xl": "3.75rem",
21
+ "7xl": "4.5rem",
22
+ "8xl": "6rem",
23
+ "9xl": "8rem",
24
+ },
25
+ fontWeights: {
26
+ hairline: 100,
27
+ thin: 200,
28
+ light: 300,
29
+ normal: 400,
30
+ medium: 500,
31
+ semibold: 600,
32
+ bold: 700,
33
+ extrabold: 800,
34
+ black: 900,
35
+ },
36
+ };
37
+ exports.default = fontOptions;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "1.1.67",
3
+ "version": "1.1.71",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",
@@ -8,14 +8,13 @@
8
8
  "dependencies": {
9
9
  "@chakra-ui/react": "^2.8.2",
10
10
  "@fontsource-variable/inter": "^5.1.0",
11
- "apexcharts": "^3.49.1",
12
11
  "framer-motion": "^11.2.2",
13
12
  "jodit-react": "^4.1.2",
13
+ "lucide-react": "^0.487.0",
14
14
  "react": "^18.3.1",
15
15
  "react-apexcharts": "^1.4.1",
16
16
  "react-datepicker": "^7.3.0",
17
17
  "react-dom": "^18.3.1",
18
- "react-icons": "^5.2.1",
19
18
  "react-scripts": "^5.0.1"
20
19
  },
21
20
  "scripts": {
@@ -62,8 +61,8 @@
62
61
  "path": "^0.12.7",
63
62
  "prettier": "^3.3.2",
64
63
  "prop-types": "^15.8.1",
65
- "webpack": "^5.91.0",
66
- "typescript": "^4.9.5"
64
+ "typescript": "^4.9.5",
65
+ "webpack": "^5.91.0"
67
66
  },
68
67
  "husky": {
69
68
  "hooks": {
package/.github/workflows/build.yml DELETED
@@ -1,31 +0,0 @@
1
- name: Check Build on PR
2
-
3
- # Trigger the workflow when a pull request is raised against the develop branch
4
- on:
5
- pull_request:
6
- branches:
7
- - develop
8
-
9
- # Define the job to run the build
10
- jobs:
11
- check-build:
12
- runs-on: ubuntu-latest
13
-
14
- steps:
15
- # Check out the code from the repository
16
- - name: Checkout code
17
- uses: actions/checkout@v3
18
-
19
- # Set up Node.js environment
20
- - name: Set up Node.js
21
- uses: actions/setup-node@v3
22
- with:
23
- node-version: '18' # Specify your required Node.js version
24
-
25
- # Install npm dependencies
26
- - name: Install dependencies
27
- run: npm install
28
-
29
- # Run the build script
30
- - name: Run build
31
- run: npm run build
package/dist/Components/Table/Utils/functions.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { DataObject } from "../TableProps";
2
- export declare const searchAndSortData: (data: DataObject[], searchValues: Record<string, string>) => DataObject[];
3
- export declare function debounce<T extends (...args: any[]) => void>(func: T, delay: number): (...args: Parameters<T>) => void;
package/dist/Components/Table/Utils/functions.js DELETED
@@ -1,46 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.debounce = exports.searchAndSortData = void 0;
4
- var searchAndSortData = function (data, searchValues) {
5
- var filteredData = data.filter(function (item) {
6
- return Object.keys(searchValues).every(function (key) {
7
- var searchValue = searchValues[key].toLowerCase();
8
- return item[key].toString().toLowerCase().includes(searchValue);
9
- });
10
- });
11
- return filteredData.sort(function (a, b) {
12
- var aMatchCount = 0;
13
- var bMatchCount = 0;
14
- Object.keys(searchValues).forEach(function (key) {
15
- var searchValue = searchValues[key].toLowerCase();
16
- if (a[key] && a[key].toString().toLowerCase() === searchValue) {
17
- aMatchCount++;
18
- }
19
- if (b[key] && b[key].toString().toLowerCase() === searchValue) {
20
- bMatchCount++;
21
- }
22
- if (a[key] && a[key].toString().toLowerCase().includes(searchValue)) {
23
- aMatchCount += 0.5;
24
- }
25
- if (b[key] && b[key].toString().toLowerCase().includes(searchValue)) {
26
- bMatchCount += 0.5;
27
- }
28
- });
29
- return bMatchCount - aMatchCount;
30
- });
31
- };
32
- exports.searchAndSortData = searchAndSortData;
33
- function debounce(func, delay) {
34
- var timer;
35
- return function () {
36
- var args = [];
37
- for (var _i = 0; _i < arguments.length; _i++) {
38
- args[_i] = arguments[_i];
39
- }
40
- clearTimeout(timer);
41
- timer = setTimeout(function () {
42
- func.apply(void 0, args);
43
- }, delay);
44
- };
45
- }
46
- exports.debounce = debounce;
package/dist/Pages/katable.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import React from "react";
2
- declare const katable: () => React.JSX.Element;
3
- export default katable;
package/dist/Pages/katable.js DELETED
@@ -1,194 +0,0 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __importDefault = (this && this.__importDefault) || function (mod) {
14
- return (mod && mod.__esModule) ? mod : { "default": mod };
15
- };
16
- Object.defineProperty(exports, "__esModule", { value: true });
17
- var react_1 = __importDefault(require("react"));
18
- var KaTable_1 = __importDefault(require("../Components/KaTable/KaTable"));
19
- var KaTable_2 = require("../Components/KaTable/KaTable");
20
- var icons_1 = require("@chakra-ui/icons");
21
- var katable = function () {
22
- var DataType = KaTable_2.TableEnums.DataType;
23
- var dataArray = Array(50)
24
- .fill(undefined)
25
- .map(function (_, index) { return ({
26
- column1: index % 2 === 0,
27
- column2: "column:2 row:".concat(index + 1),
28
- column3: index + 5,
29
- column4: index + 10,
30
- column5: index + 15,
31
- column6: index + 20,
32
- column7: index + 25,
33
- column8: index + 30,
34
- column9: index + 35,
35
- column10: index + 40,
36
- column11: index + 45,
37
- column12: index + 50,
38
- column13: index + 55,
39
- column14: index + 60,
40
- column15: new Date(2022, 11, index),
41
- id: index + 1,
42
- }); });
43
- var columns = [
44
- {
45
- key: "column1",
46
- title: "Column 1",
47
- dataType: DataType.Boolean,
48
- width: 150,
49
- columnFreeze: true,
50
- customHeader: false,
51
- },
52
- {
53
- key: "column2",
54
- title: "Column 2",
55
- dataType: DataType.String,
56
- width: 150,
57
- },
58
- {
59
- key: "column3",
60
- title: "Column 3",
61
- dataType: DataType.Number,
62
- width: 150,
63
- },
64
- {
65
- key: "column4",
66
- title: "Column 4",
67
- dataType: DataType.Number,
68
- width: 150,
69
- },
70
- {
71
- key: "column5",
72
- title: "Column 5",
73
- dataType: DataType.Number,
74
- width: 150,
75
- },
76
- {
77
- key: "column6",
78
- title: "Column 6",
79
- dataType: DataType.Number,
80
- width: 150,
81
- },
82
- {
83
- key: "column7",
84
- title: "Column 7",
85
- dataType: DataType.Number,
86
- width: 150,
87
- },
88
- {
89
- key: "column8",
90
- title: "Column 8",
91
- dataType: DataType.Number,
92
- width: 150,
93
- },
94
- {
95
- key: "column9",
96
- title: "Column 9",
97
- dataType: DataType.Number,
98
- width: 150,
99
- },
100
- {
101
- key: "column10",
102
- title: "Column 10",
103
- dataType: DataType.Number,
104
- width: 150,
105
- },
106
- {
107
- key: "column11",
108
- title: "Column 11",
109
- dataType: DataType.Number,
110
- width: 150,
111
- },
112
- {
113
- key: "column12",
114
- title: "Column 12",
115
- dataType: DataType.Number,
116
- width: 150,
117
- },
118
- {
119
- key: "column13",
120
- title: "Column 13",
121
- dataType: DataType.Number,
122
- width: 150,
123
- },
124
- {
125
- key: "column14",
126
- title: "Column 14",
127
- dataType: DataType.Number,
128
- width: 150,
129
- },
130
- {
131
- key: "column15",
132
- title: "Column 15",
133
- dataType: DataType.Date,
134
- width: 150,
135
- },
136
- {
137
- key: "editColumn",
138
- width: 80,
139
- customHeader: false,
140
- },
141
- ];
142
- var kaTableFormat = function (props) {
143
- if (props.column.dataType === DataType.Date) {
144
- return (props.value &&
145
- props.value.toLocaleDateString("en", {
146
- month: "2-digit",
147
- day: "2-digit",
148
- year: "numeric",
149
- }));
150
- }
151
- };
152
- var EditButton = function (_a) {
153
- var dispatch = _a.dispatch, rowKeyValue = _a.rowKeyValue;
154
- return (react_1.default.createElement("div", { className: "edit-cell-button" },
155
- react_1.default.createElement(icons_1.EditIcon, null),
156
- react_1.default.createElement(icons_1.DeleteIcon, null)));
157
- };
158
- var handleSortChange = function (newSortState, columnName) {
159
- console.log("Sort state for ".concat(columnName, " changed to:"), newSortState);
160
- };
161
- var handleMenuItemClick = function (action, columnName) {
162
- console.log("Menu item clicked for ".concat(columnName, ":"), action);
163
- };
164
- var menuItems = [
165
- { label: "Sort", action: "Sort" },
166
- { label: "Hide column", action: "Hide column" },
167
- {
168
- label: "Filter",
169
- submenu: [
170
- { label: "Filter by Date", action: "Filter by Date" },
171
- { label: "Filter by Name", action: "Filter by Name" },
172
- { label: "Filter by Status", action: "Filter by Status" },
173
- ],
174
- },
175
- ];
176
- return (react_1.default.createElement("div", null,
177
- react_1.default.createElement(KaTable_1.default, { data: dataArray, columns: columns, checkSelect: true, onRowClick: function (rowKeyValue) {
178
- console.log("Row clicked", rowKeyValue);
179
- }, onSelectionChange: function (selectedRows) {
180
- console.log("Selected rows:", selectedRows);
181
- }, menuItems: menuItems, onSortChange: handleSortChange, onMenuItemClick: handleMenuItemClick, format: kaTableFormat, childComponents: {
182
- cellText: {
183
- content: function (props) {
184
- if (props.column.key === "editColumn") {
185
- return react_1.default.createElement(EditButton, __assign({}, props));
186
- }
187
- },
188
- },
189
- }, loading: {
190
- enabled: false,
191
- text: "Loading data",
192
- } })));
193
- };
194
- exports.default = katable;
package/dist/Utils/common.d.ts DELETED
@@ -1,7 +0,0 @@
1
- export declare function SortMultiColumnData(data: Record<string, any>[], sortConfig: {
2
- column: string;
3
- direction: string;
4
- }[]): Record<string, any>[];
5
- export declare const getPreviousColumnWidth: (columns: any, key: any) => any;
6
- export declare const getFieldType: (header: string, data: any) => "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
7
- export declare const calculateLeftOffset: (columns: number[], index: number) => number;
package/dist/Utils/common.js DELETED
@@ -1,64 +0,0 @@
1
- "use strict";
2
- var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
3
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
4
- if (ar || !(i in from)) {
5
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
6
- ar[i] = from[i];
7
- }
8
- }
9
- return to.concat(ar || Array.prototype.slice.call(from));
10
- };
11
- Object.defineProperty(exports, "__esModule", { value: true });
12
- exports.calculateLeftOffset = exports.getFieldType = exports.getPreviousColumnWidth = exports.SortMultiColumnData = void 0;
13
- function SortMultiColumnData(data, sortConfig) {
14
- if (!sortConfig.length)
15
- return data;
16
- return __spreadArray([], data, true).sort(function (a, b) {
17
- for (var _i = 0, sortConfig_1 = sortConfig; _i < sortConfig_1.length; _i++) {
18
- var _a = sortConfig_1[_i], column = _a.column, direction = _a.direction;
19
- if (direction === "none") {
20
- continue;
21
- }
22
- var dirMultiplier = direction === "asc" ? 1 : -1;
23
- // Compare values for the current column
24
- if (a[column] < b[column])
25
- return -1 * dirMultiplier;
26
- if (a[column] > b[column])
27
- return 1 * dirMultiplier;
28
- // If values are equal, continue to the next sorting rule
29
- }
30
- return 0; // Return 0 if all sort conditions are equal
31
- });
32
- }
33
- exports.SortMultiColumnData = SortMultiColumnData;
34
- var getPreviousColumnWidth = function (columns, key) {
35
- var index = columns === null || columns === void 0 ? void 0 : columns.findIndex(function (column) { return column.key === key; });
36
- if (index > 0) {
37
- return columns[index - 1].width;
38
- }
39
- return 0;
40
- };
41
- exports.getPreviousColumnWidth = getPreviousColumnWidth;
42
- // export function calculateLeftOffset(columns: any, currentIndex: number) {
43
- // let offset = 0;
44
- // for (let i = 0; i < currentIndex; i++) {
45
- // if (columns[i].isFreeze) {
46
- // offset += columns[i].width || 100;
47
- // }
48
- // }
49
- // return offset;
50
- // }
51
- var getFieldType = function (header, data) {
52
- for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
53
- var row = data_1[_i];
54
- if (row[header] !== null) {
55
- return typeof row[header];
56
- }
57
- }
58
- return "string";
59
- };
60
- exports.getFieldType = getFieldType;
61
- var calculateLeftOffset = function (columns, index) {
62
- return columns.slice(0, index).reduce(function (sum, width) { return sum + width; }, 0);
63
- };
64
- exports.calculateLeftOffset = calculateLeftOffset;
package/webpack.config.js DELETED
@@ -1,48 +0,0 @@
1
- /* eslint-disable */
2
- const path = require("path");
3
- module.exports = {
4
- // Entry point of your application
5
- entry: "./src/index.ts",
6
- // Development mode for better debugging
7
- mode: "development",
8
- module: {
9
- rules: [
10
- // TypeScript loader
11
- {
12
- test: /\.tsx?$/,
13
- use: "ts-loader",
14
- exclude: /node_modules/,
15
- },
16
- // CSS loader
17
- {
18
- test: /\.css$/,
19
- use: ["style-loader", "css-loader"],
20
- },
21
- // File loader for image assets
22
- {
23
- test: /\.(png|svg|jpg|jpeg|gif)$/i,
24
- type: "asset/resource",
25
- },
26
- ],
27
- },
28
- resolve: {
29
- // Add `.ts` and `.tsx` as resolvable extensions.
30
- extensions: [".tsx", ".ts", ".js"],
31
- },
32
- output: {
33
- // Output directory
34
- path: path.resolve(__dirname, "dist"),
35
- // Output file name
36
- filename: "bundle.js",
37
- },
38
- // Source maps for debugging
39
- devtool: "inline-source-map",
40
- // Dev server configuration
41
- devServer: {
42
- static: {
43
- directory: path.join(__dirname, "public"),
44
- },
45
- compress: true,
46
- port: 9000,
47
- },
48
- };