@zekidev/ui 2.0.0 → 2.1.0

package/dist/leaflet-map-inner-SOHFKEYD.js

@@ -0,0 +1,171 @@
+"use client";
+
+// src/sections/map/leaflet-map-inner.tsx
+import "leaflet/dist/leaflet.css";
+import { useEffect, useRef, useState } from "react";
+import L from "leaflet";
+import { jsx, jsxs } from "react/jsx-runtime";
+var OSM_ATTR = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
+var CARTO_ATTR = `${OSM_ATTR} &copy; <a href="https://carto.com/attributions">CARTO</a>`;
+var ESRI_ATTR = "Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community";
+var TILES = {
+  // OpenStreetMap
+  standard: {
+    url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+    attribution: OSM_ATTR
+  },
+  // CartoDB Positron — clean, minimal, ideal for data overlays
+  light: {
+    url: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",
+    attribution: CARTO_ATTR
+  },
+  // CartoDB Dark Matter
+  dark: {
+    url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
+    attribution: CARTO_ATTR
+  },
+  // CartoDB Voyager — colorful, modern
+  voyager: {
+    url: "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png",
+    attribution: CARTO_ATTR
+  },
+  // OpenTopoMap — topographic with elevation contours
+  topo: {
+    url: "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png",
+    attribution: `${OSM_ATTR}, <a href="https://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a>`,
+    maxZoom: 17
+  },
+  // ESRI World Imagery — satellite/aerial photography
+  satellite: {
+    url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+    attribution: ESRI_ATTR,
+    maxZoom: 18
+  },
+  // ESRI World Street Map — detailed street basemap
+  streets: {
+    url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}",
+    attribution: ESRI_ATTR,
+    maxZoom: 18
+  }
+};
+var markerIcon = new L.Icon({
+  iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
+  iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
+  shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41]
+});
+async function geocodeAddress(address) {
+  try {
+    const res = await fetch(
+      `https://nominatim.openstreetmap.org/search?format=json&limit=1&q=${encodeURIComponent(address)}`,
+      { headers: { "Accept-Language": "en", "User-Agent": "LandingBuilder/1.0" } }
+    );
+    if (!res.ok) return null;
+    const data = await res.json();
+    if (!data.length) return null;
+    return [parseFloat(data[0].lat), parseFloat(data[0].lon)];
+  } catch {
+    return null;
+  }
+}
+async function geocodeAll(locations) {
+  const result = [];
+  for (const loc of locations) {
+    if (loc.lat != null && loc.lng != null) {
+      result.push({ ...loc, coords: [loc.lat, loc.lng] });
+      continue;
+    }
+    if (loc.address) {
+      const coords = await geocodeAddress(loc.address);
+      if (coords) result.push({ ...loc, coords });
+      await new Promise((r) => setTimeout(r, 1e3));
+    }
+  }
+  return result;
+}
+function buildPopup(loc) {
+  const parts = [];
+  parts.push(`<strong style="display:block;font-size:13px">${loc.name}</strong>`);
+  if (loc.address)
+    parts.push(`<span style="display:block;font-size:11px;color:#6b7280;margin-top:2px">${loc.address}</span>`);
+  if (loc.phone)
+    parts.push(`<span style="display:block;font-size:11px;margin-top:2px">${loc.phone}</span>`);
+  if (loc.hours)
+    parts.push(`<span style="display:block;font-size:11px;color:#6b7280;margin-top:2px">${loc.hours}</span>`);
+  if (loc.address)
+    parts.push(
+      `<a href="https://maps.google.com/?q=${encodeURIComponent(loc.address)}" target="_blank" rel="noopener noreferrer" style="display:block;font-size:11px;color:#2563eb;margin-top:4px">Ver en Google Maps \u2192</a>`
+    );
+  return parts.join("");
+}
+function LeafletMapInner({ locations, mapStyle = "standard", className }) {
+  const containerRef = useRef(null);
+  const mapRef = useRef(null);
+  const tileRef = useRef(null);
+  const [loading, setLoading] = useState(!!locations?.length);
+  useEffect(() => {
+    if (!containerRef.current || mapRef.current) return;
+    const tile = TILES[mapStyle] ?? TILES.standard;
+    const map = L.map(containerRef.current, { scrollWheelZoom: false });
+    const tileLayer = L.tileLayer(tile.url, { attribution: tile.attribution, maxZoom: tile.maxZoom ?? 19 }).addTo(map);
+    map.setView([20, 0], 2);
+    mapRef.current = map;
+    tileRef.current = tileLayer;
+    return () => {
+      map.remove();
+      mapRef.current = null;
+      tileRef.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    if (!mapRef.current) return;
+    const tile = TILES[mapStyle] ?? TILES.standard;
+    tileRef.current?.remove();
+    tileRef.current = L.tileLayer(tile.url, { attribution: tile.attribution, maxZoom: tile.maxZoom ?? 19 }).addTo(mapRef.current);
+  }, [mapStyle]);
+  useEffect(() => {
+    if (!locations?.length) {
+      setLoading(false);
+      return;
+    }
+    let cancelled = false;
+    setLoading(true);
+    geocodeAll(locations).then((geocoded) => {
+      if (cancelled || !mapRef.current) return;
+      mapRef.current.eachLayer((layer) => {
+        if (layer instanceof L.Marker) layer.remove();
+      });
+      geocoded.forEach((loc) => {
+        L.marker(loc.coords, { icon: markerIcon }).addTo(mapRef.current).bindPopup(buildPopup(loc));
+      });
+      if (geocoded.length === 1) {
+        mapRef.current.setView(geocoded[0].coords, 14);
+      } else if (geocoded.length > 1) {
+        mapRef.current.fitBounds(
+          geocoded.map((l) => l.coords),
+          { padding: [48, 48] }
+        );
+      }
+      setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [locations]);
+  return /* @__PURE__ */ jsxs("div", { className: `relative ${className ?? ""}`, children: [
+    loading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-[1000] flex items-center justify-center bg-muted/80 rounded-xl", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-muted-foreground text-sm", children: [
+      /* @__PURE__ */ jsxs("svg", { className: "animate-spin h-6 w-6", viewBox: "0 0 24 24", fill: "none", children: [
+        /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })
+      ] }),
+      "Geocoding addresses\u2026"
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { ref: containerRef, style: { height: "100%", width: "100%" } })
+  ] });
+}
+export {
+  LeafletMapInner
+};

package/package.json

@@ -1,26 +1,43 @@
 {
   "name": "@zekidev/ui",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "default": "./dist/index.js"
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
     },
     "./styles": "./src/styles/globals.css",
     "./tailwind-config": "./tailwind.config.ts"
   },
-  "main": "./dist/index.cjs",
-  "types": "./dist/index.d.ts",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
   "files": [
     "dist",
     "src/styles",
     "tailwind.config.ts"
   ],
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js",
+        "default": "./dist/index.js"
+      },
+      "./styles": "./src/styles/globals.css",
+      "./tailwind-config": "./tailwind.config.ts"
+    },
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts"
+  },
+  "scripts": {
+    "build": "tsup && tsc -p tsconfig.build.json",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src --ext ts,tsx"
   },
   "dependencies": {
     "@portabletext/react": "^3.0.0",
@@ -56,12 +73,5 @@
     "tailwindcss": "^3.4.0",
     "tsup": "^8.0.0",
     "typescript": "^5.4.0"
-  },
-  "scripts": {
-    "build": "tsup && tsc -p tsconfig.build.json",
-    "dev": "tsup --watch",
-    "type-check": "tsc --noEmit",
-    "lint": "eslint src --ext ts,tsx"
-  },
-  "module": "./dist/index.js"
-}
+  }
+}