pixelize-design-library 2.1.45 → 2.1.46

package/dist/App.js

@@ -92,18 +92,19 @@ function App() {
     //     />
     //   </Box>
     // );
+    var _d = (0, react_1.useState)(true), hideSidebar = _d[0], setHideSidebar = _d[1];
     return (react_1.default.createElement("div", { className: "App" },
         react_1.default.createElement(react_2.Box, { minH: "100vh", bg: "gray.100", overflow: "hidden" },
             react_1.default.createElement(Loading_1.default, { text: "PIXELIZE CRM", isLoading: false, onlytext: true }),
             react_1.default.createElement(react_2.Flex, null,
-                react_1.default.createElement(react_2.Box, null,
+                react_1.default.createElement(react_2.Box, { display: hideSidebar ? "block" : "none" },
                     react_1.default.createElement(SideBar_1.default, { menus: menu, activeMenu: activeMenu, handleMenuClick: handleMenuClick, toggle: toggle, changeToggle: function () { return changeToggle(!toggle); }, isLoading: false, 
                         // logo={
                         //   "https://play-lh.googleusercontent.com/Fro4e_osoDhhrjgiZ_Y2C5FNXBMWvrb4rGpmkM1PDAcUPXeiAlPCq7NeaT4Q6NRUxRqo"
                         // }
                         companyName: "PIXELIZE" })),
                 react_1.default.createElement(react_2.Box, { flex: "1", maxWidth: width, overflow: "hidden" },
-                    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", navigationBarText: {
+                    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", sideBarToggole: hideSidebar, onSideBarToggole: function () { return setHideSidebar(function (prev) { return !prev; }); }, navigationBarText: {
                             text: "Dashboard",
                             onIconClick: function () {
                                 console.log("Back icon clicked");

package/dist/Components/NavigationBar/NavigationBar.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { NavbarProps } from "./NavigationBarProps";
-export default function NavBar({ userAvathar, userName, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, }: NavbarProps): React.JSX.Element;
+export default function NavBar({ userAvathar, userName, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole }: NavbarProps): React.JSX.Element;

package/dist/Components/NavigationBar/NavigationBar.js

@@ -9,11 +9,14 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var lucide_react_1 = require("lucide-react");
 function NavBar(_a) {
     var _b, _c, _d, _e;
-    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;
+    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, sideBarToggole = _a.sideBarToggole, onSideBarToggole = _a.onSideBarToggole;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     return (react_1.default.createElement(react_2.Box, { bg: theme.colors.backgroundColor.light, px: 4, boxShadow: theme.shadows.sm },
         react_1.default.createElement(react_2.Flex, { h: 16, alignItems: "center", justifyContent: "space-between" },
             react_1.default.createElement(react_2.Box, { display: "flex", gap: 1.5, alignItems: "center" },
+                react_1.default.createElement(react_2.Box, { onClick: function () { return onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(); }, display: { base: "block", lg: "none", xl: "none", md: "none" } }, sideBarToggole ?
+                    react_1.default.createElement(lucide_react_1.PanelLeftClose, { size: "1.25rem" }) :
+                    react_1.default.createElement(lucide_react_1.PanelRightClose, { size: "1.25rem" })),
                 (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (react_1.default.createElement(react_2.Box, { width: "1.5rem", height: "1.5rem", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", onClick: function () { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); } },
                     react_1.default.createElement(lucide_react_1.CircleArrowLeft, { 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] }))),
                 (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && (react_1.default.createElement(react_2.Text, { color: (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.secondary) === null || _e === void 0 ? void 0 : _e[500], fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem" }, navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text))),

package/dist/Components/NavigationBar/NavigationBarProps.d.ts

@@ -11,6 +11,8 @@ export type NavbarProps = {
         text: string;
         onIconClick?: () => void;
     };
+    sideBarToggole?: boolean;
+    onSideBarToggole?: () => void;
 };
 export type MenuProps = {
     title: string;

package/dist/Components/Timeline/Timeline.js

@@ -1,100 +1,36 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
 var react_2 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");
-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"])));
-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"])));
-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) {
-    var isLeft = _a.isLeft;
-    return (isLeft ? "flex-end" : "flex-start");
-}, function (_a) {
-    var isLeft = _a.isLeft;
-    return (isLeft ? "left" : "right");
-});
-var Event = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  // background: white;\n  // padding: 16px;\n  // border: 1px solid #007bff;\n  // border-radius: 8px;\n  // width: 40%;\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer; /* Indicates that the event is clickable */\n"], ["\n  // background: white;\n  // padding: 16px;\n  // border: 1px solid #007bff;\n  // border-radius: 8px;\n  // width: 40%;\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer; /* Indicates that the event is clickable */\n"])));
-var Dot = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  left: 50%;\n  width: 30px;\n  height: 30px;\n  background-color: #f4f7ff;\n  border-radius: 50%;\n  transform: translateX(-50%);\n  padding: 6px;\n  border: 1px solid #d2d9e0;\n   @media (max-width: 768px) {\n    left: 20px; /* Move dot closer to the left */\n    transform: translateX(0); /* Remove horizontal centering */\n  }\n"], ["\n  position: absolute;\n  left: 50%;\n  width: 30px;\n  height: 30px;\n  background-color: #f4f7ff;\n  border-radius: 50%;\n  transform: translateX(-50%);\n  padding: 6px;\n  border: 1px solid #d2d9e0;\n   @media (max-width: 768px) {\n    left: 20px; /* Move dot closer to the left */\n    transform: translateX(0); /* Remove horizontal centering */\n  }\n"])));
-// const Arrow = styled.div<{ isLeft: boolean }>`
-//   position: absolute;
-//   left: ${({ isLeft }) => (isLeft ? "-10px " : "100%")};
-//   width: 0;
-//   height: 0;
-//   border-style: solid;
-//   border-width: ${({ isLeft }) =>
-//     isLeft ? "10px 10px 10px 0" : "10px 10px 10px 10px"};
-//   border-color: transparent #007bff transparent transparent;
-//   transform: translateX(-50%);
-//   top: 50%;
-//   transform: translateY(-50%);
-//   transform: ${({ isLeft }) =>
-//     isLeft ? "translateY(-50%) " : "translateY(-50%) rotate(180deg)"};
-// `;
-var EventContent = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  // margin-left: 24px;\n"], ["\n  // margin-left: 24px;\n"])));
-var EventTitle = styled_1.default.h3(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
-// const EventDescription = styled.p`
-//   margin: 0;
-// `;
-var EventDate = styled_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: block;\n  margin-top: 8px;\n  color: #6c757d;\n"], ["\n  display: block;\n  margin-top: 8px;\n  color: #6c757d;\n"])));
-var EventTime = styled_1.default.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  left: ", ";\n  position: absolute;\n  color: #6c757d;\n  @media (max-width: 768px) {\n    position: relative;\n    left: auto;\n    margin-left: 40px;\n  }\n"], ["\n  left: ", ";\n  position: absolute;\n  color: #6c757d;\n  @media (max-width: 768px) {\n    position: relative;\n    left: auto;\n    margin-left: 40px;\n  }\n"])), function (_a) {
-    var isLeft = _a.isLeft;
-    return (isLeft ? "38% " : "53%");
-});
-var EventGroupDate = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  font-size: 1rem;\n  font-weight: 400;\n  color: #464f62;\n  box-sizing: border-box;\n  width: 180px;\n  padding: 5px 25px;\n  text-align: center;\n  background-color: #f4f7ff;\n  border: 1px solid #d2d9e0;\n  border-radius: 5px;\n  margin: 0 auto; /* Center horizontally */\n  display: flex;\n  align-items: center; /* Center vertically */\n  justify-content: center; /* Center horizontally */\n  @media (max-width: 768px) {\n    width: auto;\n    padding: 5px 10px;\n  }\n"], ["\n  font-size: 1rem;\n  font-weight: 400;\n  color: #464f62;\n  box-sizing: border-box;\n  width: 180px;\n  padding: 5px 25px;\n  text-align: center;\n  background-color: #f4f7ff;\n  border: 1px solid #d2d9e0;\n  border-radius: 5px;\n  margin: 0 auto; /* Center horizontally */\n  display: flex;\n  align-items: center; /* Center vertically */\n  justify-content: center; /* Center horizontally */\n  @media (max-width: 768px) {\n    width: auto;\n    padding: 5px 10px;\n  }\n"])));
-var EventGroupSeparator = styled_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
-var EventGroupHeader = styled_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  position: relative;\n  margin-bottom: 24px;\n"], ["\n  position: relative;\n  margin-bottom: 24px;\n"])));
-// const FlexContainer = styled.div`
-//   display: flex;
-//   align-items: center;
-// `;
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var functions_1 = require("../../Utils/functions");
 var Timeline = function (_a) {
     var timelineEvents = _a.timelineEvents;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
     var formatTimestamp = function (timestamp, type) {
         var parsedTimestamp = parseInt(timestamp, 10);
         var date = new Date(parsedTimestamp);
-        if (isNaN(date.getTime())) {
+        if (isNaN(date.getTime()))
             return "Invalid Date";
-        }
         if (type === "date") {
-            var monthNames = [
-                "January",
-                "February",
-                "March",
-                "April",
-                "May",
-                "June",
-                "July",
-                "August",
-                "September",
-                "October",
-                "November",
-                "December",
-            ];
-            var month = monthNames[date.getMonth()];
-            var day = date.getDate();
-            var year = date.getFullYear();
-            return "".concat(month, " ").concat(day, ", ").concat(year);
+            return date.toLocaleDateString("en-US", {
+                month: "long",
+                day: "numeric",
+                year: "numeric",
+            });
         }
         else if (type === "time") {
-            // Convert to IST (UTC+5:30)
-            var istOffset = 5.5 * 60 * 60 * 1000; // 5 hours 30 minutes in milliseconds
+            var istOffset = 5.5 * 60 * 60 * 1000;
             var istDate = new Date(date.getTime() + istOffset);
-            var hours = istDate.getUTCHours();
-            var minutes = istDate.getUTCMinutes();
-            var ampm = hours >= 12 ? "PM" : "AM";
-            // Convert hours to 12-hour format
-            hours = hours % 12;
-            hours = hours ? hours : 12; // the hour '0' should be '12'
-            // Pad minutes with leading zero if needed
-            var minutesStr = minutes < 10 ? "0" + minutes : minutes;
-            return "".concat(hours, ":").concat(minutesStr, " ").concat(ampm);
+            return istDate.toLocaleTimeString("en-US", {
+                hour: "numeric",
+                minute: "2-digit",
+                hour12: true,
+            });
         }
         return date.toLocaleString();
     };
@@ -111,24 +47,21 @@ var Timeline = function (_a) {
     var groupEventsByDate = function (events) {
         return events.reduce(function (groups, event) {
             var date = formatTimestamp(event.created_at, "date");
-            if (!groups[date]) {
+            if (!groups[date])
                 groups[date] = [];
-            }
             groups[date].push(event);
             return groups;
         }, {});
     };
     var groupedEvents = groupEventsByDate(timelineEvents);
     var formatChanges = function (changes) {
-        if (changes === null) {
+        if (changes === null)
             return "No Changes";
-        }
-        var result = Object.entries(JSON.parse(changes))
+        return Object.entries(JSON.parse(changes))
             .map(function (_a) {
             var key = _a[0], value = _a[1];
             var changeRecord = value;
-            if (changeRecord.original === null ||
-                changeRecord.original === undefined) {
+            if (changeRecord.original === null || changeRecord.original === undefined) {
                 return "".concat(key, " changed from null to ").concat(changeRecord.updated);
             }
             else {
@@ -136,31 +69,44 @@ var Timeline = function (_a) {
             }
         })
             .join("\n");
-        return result;
     };
-    // console.log("groupedEvents", groupedEvents);
-    return (react_1.default.createElement(TimelineContainer, null,
-        react_1.default.createElement(Line, null),
-        Object.keys(groupedEvents).map(function (date) { return (react_1.default.createElement(EventGroupSeparator, { key: date },
-            react_1.default.createElement(EventGroupHeader, null,
-                react_1.default.createElement(EventGroupDate, null, date)),
-            groupedEvents[date].map(function (event, index) { return (react_1.default.createElement(EventContainer, { key: index, isLeft: index % 2 === 0 },
-                react_1.default.createElement(Dot, null, getIcon(event)),
-                react_1.default.createElement(EventTime, { isLeft: index % 2 === 0 }, formatTimestamp(event.created_at, "time")),
-                react_1.default.createElement(Event, null,
-                    react_1.default.createElement(EventContent, null,
-                        react_1.default.createElement("div", { style: {
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: index % 2 === 0 ? "flex-start" : "flex-end",
-                            } },
-                            react_1.default.createElement(EventTitle, null, event.action_from + " " + event.title),
-                            react_1.default.createElement(react_2.Tooltip, { label: formatChanges(event.changes), shouldWrapChildren: true, placement: "top", hasArrow: true },
-                                react_1.default.createElement(lucide_react_1.Info, { style: { marginLeft: "5px" }, size: 17 }))),
-                        react_1.default.createElement(EventDate, null, " by " +
-                            event.action_by +
-                            " " +
-                            formatTimestamp(event.created_at, "date")))))); }))); })));
+    var isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
+    var getEventBgColor = function (title) {
+        switch (title.toLowerCase()) {
+            case "created":
+                return theme.colors.green[50];
+            case "updated":
+                return theme.colors.yellow[50];
+            case "delete":
+                return theme.colors.red[50];
+            default:
+                return theme.colors.white;
+        }
+    };
+    return (react_1.default.createElement(react_2.Box, { position: "relative", px: { base: 4, md: 6 }, maxW: { base: "100%", md: "50rem" }, mx: "auto" },
+        react_1.default.createElement(react_2.Box, { position: "absolute", left: { base: "2.188rem", md: "50%" }, top: 0, bottom: 0, w: "0.125rem", bg: theme.colors.gray[300], transform: { md: "translateX(-50%)" } }),
+        Object.keys(groupedEvents).map(function (date) { return (react_1.default.createElement(react_2.Box, { key: date, mb: 6 },
+            react_1.default.createElement(react_2.Flex, { justify: "center", mb: 6 },
+                react_1.default.createElement(react_2.Box, { fontSize: "1rem", fontWeight: "400", color: theme.colors.black, bg: theme.colors.gray[50], border: "0.063rem solid ".concat(theme.colors.gray[300]), borderRadius: "0.313rem", px: { base: 3, md: 6 }, py: 1, textAlign: "center", zIndex: 1 }, date)),
+            groupedEvents[date].map(function (event, index) {
+                var isLeft = index % 2 === 0 && !isMobile;
+                var title = event.title; /* "Updated" | "Created" | Delete*/
+                console.log(event, "event");
+                return (react_1.default.createElement(react_2.Flex, { key: index, justify: isLeft ? "flex-end" : "flex-start", flexDir: { base: "column", md: "row" }, align: "center", mb: 6, position: "relative", textAlign: { base: "left", md: isLeft ? "left" : "right" } },
+                    react_1.default.createElement(react_2.Box, { position: "absolute", left: { base: "1.25rem", md: "50%" }, transform: { base: "none", md: "translateX(-50%)" }, w: "1.875rem", h: "1.875rem", bg: theme.colors.gray[50], borderRadius: "full", border: "0.063rem solid ".concat(theme.colors.gray[300]), display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1 }, getIcon(event)),
+                    react_1.default.createElement(react_2.Text, { position: { base: "relative", md: "absolute" }, left: { md: isLeft ? "38%" : "53%" }, ml: { base: "3.125rem", md: 0 }, color: theme.colors.gray[500] }, formatTimestamp(event.created_at, "time")),
+                    react_1.default.createElement(react_2.Flex, { align: "center", mt: { base: 2, md: 0 }, position: "relative" },
+                        !isMobile && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "50%", left: isLeft ? "-4rem" : "auto", right: isLeft ? "auto" : "-4rem", transform: "translateY(-50%)", height: "0.125rem", width: "4rem", bg: theme.colors.gray[300], zIndex: 0 })),
+                        react_1.default.createElement(react_2.Box, { bg: getEventBgColor(event.title), border: "0.063rem solid ".concat(theme.colors.gray[300]), borderRadius: "0.5rem", px: 4, py: 2, maxW: "19.625rem", boxShadow: "sm", zIndex: 1, ml: { base: "3.125rem", md: 0 } },
+                            react_1.default.createElement(react_2.Flex, { align: "center", justify: isLeft ? "flex-start" : "flex-end" },
+                                react_1.default.createElement(react_2.Text, { as: "h3", m: 0 }, event.action_from + " " + event.title),
+                                react_1.default.createElement(react_2.Tooltip, { label: formatChanges(event.changes), placement: "top", hasArrow: true },
+                                    react_1.default.createElement(react_2.Box, { ml: 1 },
+                                        react_1.default.createElement(lucide_react_1.Info, { size: 17 })))),
+                            react_1.default.createElement(react_2.Text, { mt: 1, color: theme.colors.gray[500] }, " by " +
+                                (0, functions_1.toWords)(event.action_by) +
+                                " " +
+                                formatTimestamp(event.created_at, "date"))))));
+            }))); })));
 };
 exports.default = Timeline;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;

package/dist/Pages/timeline.js

@@ -59,7 +59,7 @@ var TimelinePage = function () {
         },
         {
             logs_id: 8,
-            title: "Created",
+            title: "Delete",
             primary_id: 66,
             is_from: "Accounts",
             action_from: "Notes",

package/package.json

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