pixelize-design-library 2.2.82 → 2.2.83

package/dist/Components/Header/Header.js

@@ -34,7 +34,7 @@ var desktopMenu_1 = __importDefault(require("./components/desktopMenu"));
 var mobileMenu_1 = __importDefault(require("./components/mobileMenu"));
 var Header = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    var logo = _a.logo, menuItems = _a.menuItems, rightSlot = _a.rightSlot, active = _a.active, colors = _a.colors, boxShadow = _a.boxShadow;
+    var logo = _a.logo, menuItems = _a.menuItems, rightSlot = _a.rightSlot, active = _a.active, colors = _a.colors, boxShadow = _a.boxShadow, onMobileMenuClose = _a.onMobileMenuClose;
     var _m = (0, react_1.useDisclosure)(), isOpen = _m.isOpen, onOpen = _m.onOpen, onClose = _m.onClose;
     var _o = (0, react_2.useState)(null), hoveredMenu = _o[0], setHoveredMenu = _o[1];
     var themeColor = (0, useCustomTheme_1.useCustomTheme)().colors;
@@ -44,12 +44,20 @@ var Header = function (_a) {
     var hoverBg = (_h = colors === null || colors === void 0 ? void 0 : colors.hover) !== null && _h !== void 0 ? _h : (_j = themeColor === null || themeColor === void 0 ? void 0 : themeColor.gray) === null || _j === void 0 ? void 0 : _j[500];
     var hoverText = (_k = colors === null || colors === void 0 ? void 0 : colors.hoverTextColor) !== null && _k !== void 0 ? _k : (_l = themeColor === null || themeColor === void 0 ? void 0 : themeColor.text) === null || _l === void 0 ? void 0 : _l[600];
     var isActive = function (href) { return href && active === href; };
+    var closeMobileMenu = function () {
+        onClose();
+        onMobileMenuClose === null || onMobileMenuClose === void 0 ? void 0 : onMobileMenuClose();
+    };
+    var rightSlotWithApi = react_2.default.isValidElement(rightSlot)
+        ? react_2.default.cloneElement(rightSlot, { closeMobileMenu: closeMobileMenu })
+        : rightSlot;
     return (react_2.default.createElement(react_1.Box, { bg: bg, color: color, px: 4, shadow: "md", boxShadow: boxShadow, zIndex: 1000, position: "sticky" },
         react_2.default.createElement(react_1.Flex, { minH: 16, align: "center", mx: "auto", justifyContent: "space-between" },
             react_2.default.createElement(react_1.Box, { cursor: "pointer" }, logo),
-            react_2.default.createElement(desktopMenu_1.default, { menuItems: menuItems, rightSlot: rightSlot, setHoveredMenu: setHoveredMenu, isActive: isActive, activeBg: activeBg, hoveredMenu: hoveredMenu, hoverBg: hoverBg, color: color, hoverTextColor: hoverText }),
-            react_2.default.createElement(react_1.HStack, { spacing: 4, display: { base: "none", md: "flex" } }, rightSlot),
-            react_2.default.createElement(react_1.IconButton, { variant: "unstyled", icon: react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "full", h: "full" }, isOpen ? react_2.default.createElement(lucide_react_1.X, { size: 20 }) : react_2.default.createElement(lucide_react_1.MenuIcon, { size: 20 })), "aria-label": "Toggle Menu", display: { md: "none" }, onClick: isOpen ? onClose : onOpen })),
-        react_2.default.createElement(mobileMenu_1.default, { menuItems: menuItems, isOpen: isOpen, isActive: isActive, hoverBg: hoverBg, activeBg: activeBg, color: color, rightSlot: rightSlot })));
+            react_2.default.createElement(desktopMenu_1.default, { menuItems: menuItems, rightSlot: rightSlotWithApi, setHoveredMenu: setHoveredMenu, isActive: isActive, activeBg: activeBg, hoveredMenu: hoveredMenu, hoverBg: hoverBg, color: color, hoverTextColor: hoverText }),
+            react_2.default.createElement(react_1.HStack, { spacing: 4, display: { base: "none", md: "flex" } }, rightSlotWithApi),
+            react_2.default.createElement(react_1.HStack, { spacing: 2, display: { base: "flex", md: "none" } }, rightSlotWithApi),
+            react_2.default.createElement(react_1.IconButton, { variant: "unstyled", icon: react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "full", h: "full" }, isOpen ? react_2.default.createElement(lucide_react_1.X, { size: 20 }) : react_2.default.createElement(lucide_react_1.MenuIcon, { size: 20 })), "aria-label": "Toggle Menu", display: { md: "none" }, onClick: isOpen ? closeMobileMenu : onOpen })),
+        react_2.default.createElement(mobileMenu_1.default, { menuItems: menuItems, isOpen: isOpen, isActive: isActive, hoverBg: hoverBg, activeBg: activeBg, color: color, rightSlot: rightSlotWithApi, onClose: closeMobileMenu })));
 };
 exports.default = Header;

package/dist/Components/Header/HeaderProps.d.ts

@@ -31,6 +31,7 @@ export type HeaderProps = {
         hoverTextColor?: string;
     };
     boxShadow?: string;
+    onMobileMenuClose?: () => void;
 };
 export type DesktopMenuProps = Pick<HeaderProps, "menuItems" | "rightSlot"> & {
     setHoveredMenu: (menu: string | null) => void;
@@ -43,5 +44,6 @@ export type DesktopMenuProps = Pick<HeaderProps, "menuItems" | "rightSlot"> & {
 };
 export type MobileMenuProps = Pick<HeaderProps, 'menuItems' | 'rightSlot'> & Pick<DesktopMenuProps, 'isActive' | 'activeBg' | 'color' | 'hoverBg'> & {
     isOpen: boolean;
+    onClose?: () => void;
 };
 export {};

package/dist/Components/Header/components/mobileMenu.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { MobileMenuProps } from "../HeaderProps";
-declare const MobileMenu: ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rightSlot, }: MobileMenuProps) => React.JSX.Element;
+declare const MobileMenu: ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rightSlot, onClose, }: MobileMenuProps) => React.JSX.Element;
 export default MobileMenu;

package/dist/Components/Header/components/mobileMenu.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("@chakra-ui/react");
 var react_2 = __importDefault(require("react"));
 var MobileMenu = function (_a) {
-    var menuItems = _a.menuItems, isOpen = _a.isOpen, isActive = _a.isActive, hoverBg = _a.hoverBg, activeBg = _a.activeBg, color = _a.color, rightSlot = _a.rightSlot;
+    var menuItems = _a.menuItems, isOpen = _a.isOpen, isActive = _a.isActive, hoverBg = _a.hoverBg, activeBg = _a.activeBg, color = _a.color, rightSlot = _a.rightSlot, onClose = _a.onClose;
     return (react_2.default.createElement(react_1.Collapse, { in: isOpen, animateOpacity: true },
         react_2.default.createElement(react_1.Box, { pb: 4, display: { md: "none" } },
             react_2.default.createElement(react_1.Stack, { spacing: 4 },
@@ -18,11 +18,11 @@ var MobileMenu = function (_a) {
                             react_2.default.createElement(react_1.Text, { fontWeight: "medium" }, item.label)),
                         react_2.default.createElement(react_1.Stack, { pl: 4, mt: 1 }, item.children.map(function (subItem) {
                             var _a, _b, _c;
-                            return (react_2.default.createElement(react_1.Button, { key: subItem.label, onClick: subItem.onClick, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
+                            return (react_2.default.createElement(react_1.Button, { key: subItem.label, onClick: function () { var _a; (_a = subItem.onClick) === null || _a === void 0 ? void 0 : _a.call(subItem); onClose === null || onClose === void 0 ? void 0 : onClose(); }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
                                 react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
                                     subItem.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em" }, (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label)),
                                     react_2.default.createElement(react_1.Text, null, subItem.label))));
-                        })))) : (react_2.default.createElement(react_1.Button, { key: item.label, onClick: item.onClick, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
+                        })))) : (react_2.default.createElement(react_1.Button, { key: item.label, onClick: function () { var _a; (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); onClose === null || onClose === void 0 ? void 0 : onClose(); }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
                         react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
                             item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_d = (_c = item === null || item === void 0 ? void 0 : item.badge) === null || _c === void 0 ? void 0 : _c.colorScheme) !== null && _d !== void 0 ? _d : "blue", fontSize: "0.6em" }, (_e = item.badge) === null || _e === void 0 ? void 0 : _e.label)),
                             react_2.default.createElement(react_1.Text, null, item.label))));

package/dist/Components/Map/ShopMap.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import "leaflet/dist/leaflet.css";
+import "leaflet-routing-machine";
+import "leaflet-routing-machine/dist/leaflet-routing-machine.css";
+export type ShopLocation = {
+    id: string | number;
+    name: string;
+    lat: number;
+    lng: number;
+    address?: string;
+};
+export type ShopMapProps = {
+    shops: ShopLocation[];
+    selectedShopId?: string | number;
+    userLocation?: {
+        lat: number;
+        lng: number;
+    };
+    height?: string | number;
+    onSelectShop?: (shop: ShopLocation) => void;
+    navigateToShopId?: string | number;
+};
+declare const ShopMap: React.FC<ShopMapProps>;
+export default ShopMap;

package/dist/Components/Map/ShopMap.js

@@ -0,0 +1,207 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var leaflet_1 = __importDefault(require("leaflet"));
+require("leaflet/dist/leaflet.css");
+require("leaflet-routing-machine");
+require("leaflet-routing-machine/dist/leaflet-routing-machine.css");
+var tileUrl = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
+function directionsUrl(dest, origin) {
+    var base = "https://www.google.com/maps/dir/?api=1";
+    var destination = "destination=".concat(dest.lat, ",").concat(dest.lng);
+    var o = origin ? "&origin=".concat(origin.lat, ",").concat(origin.lng) : "";
+    return "".concat(base, "&").concat(destination).concat(o);
+}
+var ShopMap = function (_a) {
+    var shops = _a.shops, selectedShopId = _a.selectedShopId, userLocation = _a.userLocation, _b = _a.height, height = _b === void 0 ? 360 : _b, onSelectShop = _a.onSelectShop, navigateToShopId = _a.navigateToShopId;
+    var mapElRef = (0, react_1.useRef)(null);
+    var mapRef = (0, react_1.useRef)(null);
+    var markersRef = (0, react_1.useRef)(new Map());
+    var routeLayerRef = (0, react_1.useRef)(null);
+    var routingControlRef = (0, react_1.useRef)(null);
+    var internalOriginRef = (0, react_1.useRef)(null);
+    var bounds = (0, react_1.useMemo)(function () {
+        var b = leaflet_1.default.latLngBounds([]);
+        shops.forEach(function (s) { return b.extend([s.lat, s.lng]); });
+        return b;
+    }, [shops]);
+    (0, react_1.useEffect)(function () {
+        if (!mapElRef.current)
+            return;
+        if (!mapRef.current) {
+            mapRef.current = leaflet_1.default.map(mapElRef.current);
+            leaflet_1.default.tileLayer(tileUrl, {
+                attribution: "© OpenStreetMap contributors",
+            }).addTo(mapRef.current);
+        }
+        markersRef.current.forEach(function (layer) {
+            if (mapRef.current && mapRef.current.hasLayer(layer))
+                mapRef.current.removeLayer(layer);
+        });
+        markersRef.current.clear();
+        shops.forEach(function (shop) {
+            var marker = leaflet_1.default.circleMarker([shop.lat, shop.lng], {
+                radius: 7,
+                color: "#2563eb",
+                weight: 2,
+                fillColor: "#60a5fa",
+                fillOpacity: 0.8,
+            });
+            var html = "<div style=\"min-width:220px;line-height:1.4\">".concat(shop.name).concat(shop.address ? "<br/><small>".concat(shop.address, "</small>") : "", "<br/><div style=\"display:flex;gap:8px;margin-top:6px\"><button data-id=\"").concat(shop.id, "\" data-action=\"navigate\" style=\"padding:6px 10px;border-radius:6px;background:#7c3aed;color:#fff;border:none;cursor:pointer\">Navigate</button><button data-id=\"").concat(shop.id, "\" data-action=\"gmaps\" style=\"padding:6px 10px;border-radius:6px;background:#9333ea;color:#fff;border:none;cursor:pointer\">Google Maps</button></div></div>");
+            marker.bindPopup(html, { autoPan: false });
+            marker.on("click", function () { return onSelectShop && onSelectShop(shop); });
+            marker.on("popupopen", function () {
+                var _a;
+                var el = (_a = marker.getPopup()) === null || _a === void 0 ? void 0 : _a.getElement();
+                if (!el)
+                    return;
+                var navBtn = el.querySelector("button[data-id='".concat(shop.id, "'][data-action='navigate']"));
+                var gmapsBtn = el.querySelector("button[data-id='".concat(shop.id, "'][data-action='gmaps']"));
+                if (navBtn) {
+                    navBtn.addEventListener("click", function () {
+                        if (!mapRef.current)
+                            return;
+                        var proceed = function (origin) {
+                            if (routingControlRef.current) {
+                                mapRef.current.removeControl(routingControlRef.current);
+                                routingControlRef.current = null;
+                            }
+                            var dest = leaflet_1.default.latLng(shop.lat, shop.lng);
+                            var plan = leaflet_1.default.Routing.plan([origin, dest], {
+                                draggableWaypoints: false,
+                                addWaypoints: false,
+                                createMarker: function (_i, wp) { return leaflet_1.default.marker(wp.latLng, { opacity: 0, interactive: false }); },
+                            });
+                            routingControlRef.current = leaflet_1.default.Routing.control({
+                                plan: plan,
+                                router: leaflet_1.default.Routing.osrmv1({ serviceUrl: "https://router.project-osrm.org/route/v1" }),
+                                fitSelectedRoutes: true,
+                                routeWhileDragging: false,
+                                showAlternatives: false,
+                            });
+                            routingControlRef.current.addTo(mapRef.current);
+                        };
+                        var originSource = userLocation || internalOriginRef.current;
+                        if (originSource) {
+                            proceed(leaflet_1.default.latLng(originSource.lat, originSource.lng));
+                        }
+                        else if (navigator.geolocation) {
+                            navigator.geolocation.getCurrentPosition(function (pos) {
+                                internalOriginRef.current = { lat: pos.coords.latitude, lng: pos.coords.longitude };
+                                proceed(leaflet_1.default.latLng(pos.coords.latitude, pos.coords.longitude));
+                            });
+                        }
+                    });
+                }
+                if (gmapsBtn) {
+                    gmapsBtn.addEventListener("click", function () {
+                        var originSource = userLocation || internalOriginRef.current || undefined;
+                        var link = directionsUrl({ lat: shop.lat, lng: shop.lng }, originSource ? { lat: originSource.lat, lng: originSource.lng } : undefined);
+                        window.open(link, "_blank", "noopener");
+                    });
+                }
+            });
+            marker.addTo(mapRef.current);
+            markersRef.current.set(shop.id, marker);
+        });
+        if (shops.length) {
+            mapRef.current.fitBounds(bounds.pad(0.2));
+        }
+        return function () {
+            if (routingControlRef.current && mapRef.current) {
+                mapRef.current.removeControl(routingControlRef.current);
+            }
+            routingControlRef.current = null;
+            if (routeLayerRef.current && mapRef.current && mapRef.current.hasLayer(routeLayerRef.current)) {
+                mapRef.current.removeLayer(routeLayerRef.current);
+            }
+            routeLayerRef.current = null;
+            markersRef.current.clear();
+            if (mapRef.current) {
+                mapRef.current.off();
+                mapRef.current.remove();
+                mapRef.current = null;
+            }
+        };
+    }, [shops, bounds, userLocation]);
+    (0, react_1.useEffect)(function () {
+        var _a, _b;
+        if (!selectedShopId || !mapRef.current)
+            return;
+        var layer = markersRef.current.get(selectedShopId);
+        if (!layer)
+            return;
+        (_b = (_a = layer).openPopup) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }, [selectedShopId]);
+    (0, react_1.useEffect)(function () {
+        var _a, _b, _c, _d;
+        if (!navigateToShopId || !mapRef.current)
+            return;
+        var layer = markersRef.current.get(navigateToShopId);
+        if (!layer)
+            return;
+        var center = (_b = (_a = layer).getLatLng) === null || _b === void 0 ? void 0 : _b.call(_a);
+        if (!center)
+            return;
+        var build = function (origin) {
+            if (routingControlRef.current) {
+                mapRef.current.removeControl(routingControlRef.current);
+                routingControlRef.current = null;
+            }
+            var plan = leaflet_1.default.Routing.plan([origin, center], {
+                draggableWaypoints: false,
+                addWaypoints: false,
+                createMarker: function (_i, wp) { return leaflet_1.default.marker(wp.latLng, { opacity: 0, interactive: false }); },
+            });
+            routingControlRef.current = leaflet_1.default.Routing.control({
+                plan: plan,
+                router: leaflet_1.default.Routing.osrmv1({ serviceUrl: "https://router.project-osrm.org/route/v1" }),
+                fitSelectedRoutes: true,
+                routeWhileDragging: false,
+                showAlternatives: false,
+            });
+            routingControlRef.current.addTo(mapRef.current);
+        };
+        var originSrc = userLocation || internalOriginRef.current;
+        if (originSrc) {
+            build(leaflet_1.default.latLng(originSrc.lat, originSrc.lng));
+        }
+        else if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(function (pos) {
+                internalOriginRef.current = { lat: pos.coords.latitude, lng: pos.coords.longitude };
+                build(leaflet_1.default.latLng(pos.coords.latitude, pos.coords.longitude));
+            });
+        }
+        (_d = (_c = layer).openPopup) === null || _d === void 0 ? void 0 : _d.call(_c);
+    }, [navigateToShopId, userLocation]);
+    return react_1.default.createElement(react_2.Box, { w: "100%", h: height },
+        react_1.default.createElement("div", { ref: mapElRef, style: { width: "100%", height: "100%" } }));
+};
+exports.default = ShopMap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.82",
+  "version": "2.2.83",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -10,6 +10,8 @@
     "@hello-pangea/dnd": "^18.0.1",
     "framer-motion": "^11.2.2",
     "jodit-react": "^5.2.38",
+    "leaflet": "^1.9.4",
+    "leaflet-routing-machine": "^3.2.12",
     "lucide-react": "^0.487.0",
     "react": "^18.3.1",
     "react-apexcharts": "^1.4.1",
@@ -54,6 +56,8 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
+    "@types/leaflet": "^1.9.21",
+    "@types/leaflet-routing-machine": "^3.2.9",
     "@types/node": "^16.18.97",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",