@local-logic/maps 0.0.1

package/.env.example

@@ -0,0 +1,3 @@
+VITE_MAPTILER_KEY=
+VITE_MAPBOX_KEY=
+VITE_GOOGLE_KEY=

package/.storybook/defaults.ts

@@ -0,0 +1,40 @@
+export const mapDefaults = {
+  mapProvider: {
+    table: { disable: true },
+  },
+  center: {
+    table: { disable: true },
+  },
+  markers: {
+    table: { disable: true },
+  },
+  zoom: {
+    name: "Zoom",
+    control: {
+      type: "number",
+      min: 0,
+      max: 50,
+    },
+  },
+  zoomPosition: {
+    name: "Zoom position",
+    control: { type: "radio" },
+    options: ["top-left", "top-right", "bottom-left", "bottom-right"],
+  },
+  pitch: {
+    name: "Pitch",
+    control: {
+      type: "number",
+      min: 0,
+      max: 50,
+    },
+  },
+  bearing: {
+    name: "Bearing",
+    control: {
+      type: "number",
+      min: 0,
+      max: 50,
+    },
+  },
+};

package/.storybook/globals.css

@@ -0,0 +1,32 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+  height: 100%;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'Inter', sans-serif;
+}
+
+@layer utilities {
+  /* Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}

package/.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const storybookCfg: StorybookConfig = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  core: {
+    builder: "@storybook/builder-vite",
+  },
+  framework: "@storybook/react-vite",
+  typescript: {
+    reactDocgen: false,
+  },
+};
+
+export default storybookCfg;

package/.storybook/preview.tsx

@@ -0,0 +1,28 @@
+import "@local-logic/core/style.css";
+import "./globals.css";
+import { Preview } from '@storybook/react';
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
+
+const preview: Preview = {
+  decorators: [
+    withThemeByDataAttribute({
+      themes: {
+        light: 'day',
+        dark: 'night',
+      },
+      defaultTheme: 'light',
+      attributeName: "data-theme",
+    }),
+  ],
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  }
+};
+
+export default preview;

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @local-logic/maps
+
+## 0.0.1
+
+### Patch Changes
+
+- 1443f96: LL22-5129: Moved maps package into its own library

package/README.md

@@ -0,0 +1,3 @@
+# @local-logic/maps
+
+A maps library supporting Maplibre, Mapbox and Google Maps functionality.

package/eslint.config.mjs

@@ -0,0 +1,46 @@
+/* eslint-disable no-underscore-dangle */
+import { defineConfig, globalIgnores } from "eslint/config";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default defineConfig([
+  {
+    extends: compat.extends(
+      "@local-logic/eslint-config/react",
+      "plugin:storybook/recommended",
+    ),
+
+    settings: {
+      "import/resolver": {
+        typescript: {},
+        node: {
+          extensions: [".js", ".jsx", ".ts", ".tsx"],
+        },
+      },
+    },
+  },
+  {
+    files: ["**/*.tsx"],
+    rules: {
+      "react/prop-types": "off",
+      "node/file-extension-in-import": "off",
+    },
+  },
+  {
+    files: ["**/*.cjs"],
+    rules: {
+      "@typescript-eslint/no-require-imports": "off",
+    },
+  },
+  globalIgnores(["dist/"]),
+]);

package/lint-staged.config.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  "*.{js,ts}": ["eslint --fix", "prettier --write"],
+  "**/*.ts": () => "tsc -p tsconfig.json --noEmit",
+};

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@local-logic/maps",
+  "version": "0.0.1",
+  "description": "This is a maps implementation allowing for the display of Local Logic data on a map.",
+  "author": "Local Logic",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "packageManager": "yarn@4.5.1",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "test": "vitest run",
+    "stats": "STATS=1 vite build",
+    "size": "yarn run build && size-limit",
+    "lint": "TIMING=1 eslint --ext .js,.jsx,.ts,.tsx .",
+    "check-types": "tsc --project ./tsconfig.json --noEmit",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "storybook:run": "storybook dev -p 6006",
+    "storybook:build": "storybook build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.3.0",
+    "@eslint/js": "^9.22.0",
+    "@local-logic/eslint-config": "*",
+    "@storybook/addon-actions": "^8.6.7",
+    "@storybook/addon-essentials": "^8.6.7",
+    "@storybook/addon-interactions": "^8.6.7",
+    "@storybook/addon-links": "^8.6.7",
+    "@storybook/addon-themes": "^8.6.7",
+    "@storybook/blocks": "^8.6.7",
+    "@storybook/builder-vite": "^8.6.7",
+    "@storybook/react": "^8.6.7",
+    "@storybook/react-vite": "^8.6.7",
+    "@storybook/testing-library": "^0.2.2",
+    "@testing-library/react": "^16.2.0",
+    "@types/geojson": "^7946.0.16",
+    "@types/react": "^19.0.11",
+    "@types/react-dom": "^19.0.4",
+    "@types/supercluster": "^7.1.3",
+    "@typescript-eslint/eslint-plugin": "^8.27.0",
+    "@typescript-eslint/parser": "^8.27.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.22.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-storybook": "^0.11.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "storybook": "^8.6.7",
+    "tsconfig": "*",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.2",
+    "vite-plugin-dts": "^4.5.3",
+    "vite-plugin-svgr": "^4.3.0",
+    "vitest": "^3.0.9"
+  },
+  "dependencies": {
+    "@local-logic/core": "*",
+    "@local-logic/design-system": "*",
+    "@phosphor-icons/react": "^2.1.7",
+    "@turf/turf": "^7.2.0",
+    "@vis.gl/react-google-maps": "^1.5.2",
+    "mapbox-gl": "^3.10.0",
+    "maplibre-gl": "^5.2.0",
+    "react-map-gl": "^8.0.1",
+    "supercluster": "^8.0.1",
+    "use-supercluster": "^1.2.0"
+  }
+}

package/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/prettier.config.cjs

@@ -0,0 +1 @@
+module.exports = require("@local-logic/eslint-config/prettier.config");

package/src/components/Map/Root/BaseMap/Empty/index.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export default function EmptyBaseMap() {
+  return (
+    <div>Invalid map provider</div>
+  )
+}

package/src/components/Map/Root/BaseMap/Google/index.tsx

@@ -0,0 +1,96 @@
+import React, { useState, useEffect } from "react";
+
+import {
+  APIProvider,
+  Map as GoogleMap,
+  ControlPosition,
+  useMap,
+} from "@vis.gl/react-google-maps";
+
+import { useRootElement } from "../../context";
+import { defaultMapValues } from "../../constants";
+
+import type { BaseMapProps } from "../types";
+
+const zoomPositionMap = {
+  "top-left": ControlPosition.LEFT_TOP,
+  "top-right": ControlPosition.RIGHT_TOP,
+  "bottom-left": ControlPosition.LEFT_BOTTOM,
+  "bottom-right": ControlPosition.RIGHT_BOTTOM,
+};
+const mapId = "a7ff20eb973126bb";
+
+const MapControl = ({ isMapLoaded }: { isMapLoaded: boolean }) => {
+  const map = useMap();
+
+  const { setBounds } = useRootElement();
+
+  useEffect(() => {
+    if (!isMapLoaded || !map) {
+      return;
+    }
+
+    const bounds = map.getBounds()?.toJSON();
+
+    if (bounds) {
+      setBounds([bounds.west, bounds.south, bounds.east, bounds.north]);
+    }
+  }, [isMapLoaded, map]);
+
+  return null;
+};
+
+/**
+ * Map IDS:
+ * https://console.cloud.google.com/google/maps-apis/studio/maps?project=engineering-internal-396021
+ *
+ * Map styles:
+ * https://console.cloud.google.com/google/maps-apis/studio/styles?project=engineering-internal-396021
+ */
+export default function GoogleBaseMap({ children }: BaseMapProps) {
+  const [isMapLoaded, setIsMapLoaded] = useState(false);
+  const {
+    mapProvider,
+    center,
+    zoom = defaultMapValues.zoom,
+    pitch = defaultMapValues.pitch,
+    bearing = defaultMapValues.bearing,
+    cooperativeGestures = defaultMapValues.cooperativeGestures,
+    zoomPosition,
+  } = useRootElement();
+
+  if (mapProvider.name !== "google") {
+    return null;
+  }
+
+  const handleMapLoaded = () => {
+    setIsMapLoaded(true);
+  };
+
+  return (
+    <APIProvider apiKey={mapProvider.apiKey}>
+      <MapControl isMapLoaded={isMapLoaded} />
+      <GoogleMap
+        mapId={mapId}
+        defaultCenter={{
+          lat: center.latitude,
+          lng: center.longitude,
+        }}
+        defaultZoom={zoom}
+        defaultTilt={pitch}
+        defaultHeading={bearing}
+        gestureHandling={!cooperativeGestures ? "greedy" : "cooperative"}
+        streetViewControl={false}
+        fullscreenControl={false}
+        clickableIcons={false}
+        mapTypeControl={false}
+        zoomControlOptions={{
+          position: zoomPosition && zoomPositionMap[zoomPosition],
+        }}
+        onTilesLoaded={handleMapLoaded}
+      >
+        {children}
+      </GoogleMap>
+    </APIProvider>
+  );
+}

package/src/components/Map/Root/BaseMap/Mapbox/index.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect } from "react";
+
+import Mapbox, { NavigationControl, useMap } from "react-map-gl/mapbox";
+import "mapbox-gl/dist/mapbox-gl.css";
+
+import type { BBox } from "geojson";
+
+import { useRootElement } from "../../context";
+import { defaultMapValues } from "../../constants";
+
+import type { BaseMapProps } from "../types";
+
+const MapControl = () => {
+  const { current: map } = useMap();
+  const { setBounds } = useRootElement();
+
+  useEffect(() => {
+    if (!map) {
+      return;
+    }
+
+    const bounds = map.getBounds();
+
+    if (!bounds) {
+      return;
+    }
+
+    setBounds(bounds.toArray().flat() as BBox);
+  }, [map]);
+
+  return null;
+};
+
+export default function MapboxBaseMap({ children }: BaseMapProps) {
+  const {
+    mapProvider,
+    center,
+    zoom = defaultMapValues.zoom,
+    pitch = defaultMapValues.pitch,
+    bearing = defaultMapValues.bearing,
+    cooperativeGestures = defaultMapValues.cooperativeGestures,
+    zoomPosition,
+  } = useRootElement();
+
+  if (mapProvider.name !== "mapbox") {
+    return null;
+  }
+
+  return (
+    <Mapbox
+      mapboxAccessToken={mapProvider.apiKey}
+      initialViewState={{
+        ...center,
+        zoom,
+        pitch,
+        bearing,
+      }}
+      cooperativeGestures={cooperativeGestures}
+      mapStyle={`mapbox://styles/mapbox/streets-v9`}
+    >
+      <MapControl />
+      {zoomPosition && <NavigationControl position={zoomPosition} />}
+      {children}
+    </Mapbox>
+  );
+}

package/src/components/Map/Root/BaseMap/Maptiler/index.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect } from "react";
+
+import Maplibre, { NavigationControl, useMap } from "react-map-gl/maplibre";
+import "maplibre-gl/dist/maplibre-gl.css";
+
+import type { BBox } from "geojson";
+
+import { useRootElement } from "../../context";
+import { defaultMapValues } from "../../constants";
+
+import type { BaseMapProps } from "../types";
+
+const MapControl = () => {
+  const { current: map } = useMap();
+  const { setBounds } = useRootElement();
+
+  useEffect(() => {
+    if (!map) {
+      return;
+    }
+
+    setBounds(map.getBounds().toArray().flat() as BBox);
+  }, [map]);
+
+  return null;
+};
+
+export default function MaptilerBaseMap({ children }: BaseMapProps) {
+  const {
+    mapProvider,
+    center,
+    zoom = defaultMapValues.zoom,
+    pitch = defaultMapValues.pitch,
+    bearing = defaultMapValues.bearing,
+    cooperativeGestures = defaultMapValues.cooperativeGestures,
+    zoomPosition,
+  } = useRootElement();
+
+  if (mapProvider.name !== "maptiler") {
+    return null;
+  }
+
+  return (
+    <Maplibre
+      initialViewState={{
+        ...center,
+        zoom,
+        pitch,
+        bearing,
+      }}
+      cooperativeGestures={cooperativeGestures}
+      mapStyle={`https://api.maptiler.com/maps/${mapProvider.maptilerTheme}/style.json?key=${mapProvider.apiKey}`}
+    >
+      <MapControl />
+      {zoomPosition && <NavigationControl position={zoomPosition} />}
+      {children}
+    </Maplibre>
+  );
+}

package/src/components/Map/Root/BaseMap/index.tsx

@@ -0,0 +1,36 @@
+import React, { lazy, useMemo } from "react";
+
+import { useRootElement } from "../context";
+
+import type { BaseMapProps } from "./types";
+import * as styles from "./styles";
+
+const MaptilerBaseMap = lazy(() => import("./Maptiler"));
+const GoogleBaseMap = lazy(() => import("./Google"));
+const MapboxBaseMap = lazy(() => import("./Mapbox"));
+const EmptyBaseMap = lazy(() => import("./Empty"));
+
+export const BaseMap = ({ children }: BaseMapProps) => {
+  const { mapProvider } = useRootElement();
+
+  const BaseMapProvider = useMemo(() => {
+    switch (mapProvider?.name) {
+      case "maptiler":
+        return MaptilerBaseMap;
+      case "google":
+        return GoogleBaseMap;
+      case "mapbox":
+        return MapboxBaseMap;
+      default:
+        return EmptyBaseMap;
+    }
+  }, [mapProvider]);
+
+  return (
+    <div className={styles.wrapper}>
+      <BaseMapProvider>
+        {children}
+      </BaseMapProvider>
+    </div>
+  );
+};

package/src/components/Map/Root/BaseMap/styles.ts

@@ -0,0 +1,2 @@
+export const wrapper = `relative w-full h-full`;
+export const map = `absolute w-full h-full`;

package/src/components/Map/Root/BaseMap/types.ts

@@ -0,0 +1,3 @@
+import type { RootProps } from "../types";
+
+export type BaseMapProps = Pick<RootProps, "children">;

package/src/components/Map/Root/Markers/Cluster/index.tsx

@@ -0,0 +1,26 @@
+import React, { useMemo } from "react";
+
+import type { ClusterPoint } from "../types";
+
+import * as styles from "./styles";
+
+export function Cluster({ cluster }: { cluster: ClusterPoint }) {
+  // Taking a somewhat similar calculation to what LocalLogic SDK used to
+  // do for cluster diameter (bigger depending on count)
+  const diameter = useMemo(() => (
+    20 + cluster.properties.point_count * 4
+  ), [cluster.properties.point_count]);
+
+  return (
+    <div
+      className={styles.container}
+      style={{
+        width: `${diameter}px`,
+        height: `${diameter}px`,
+        fontSize: `${diameter / 2.5}px`
+      }}
+    >
+      {cluster.properties.point_count}
+    </div>
+  )
+}

package/src/components/Map/Root/Markers/Cluster/styles.ts

@@ -0,0 +1,14 @@
+export const container = `
+  rounded-full
+  bg-primary-100
+  text-base-white
+  flex
+  justify-center
+  items-center
+  leading-none
+  font-sans
+  border-2
+  border-solid
+  border-base-white
+  shadow-sm
+`;

package/src/components/Map/Root/Markers/Google/index.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+import { MapPin } from "@phosphor-icons/react";
+import { AdvancedMarker as GoogleMarker } from "@vis.gl/react-google-maps";
+
+import type { MapMarkerProps } from "../types";
+
+import { Cluster } from "../Cluster";
+
+import * as globalStyles from "../styles";
+import * as styles from "./styles";
+
+export default function GoogleMarkers({ clusters, children }: MapMarkerProps) {
+  return clusters.map((cluster, index) => {
+    const longitude = cluster.geometry.coordinates[0];
+    const latitude = cluster.geometry.coordinates[1];
+
+    const handleOnClick = () => {
+      // TODO Without the on click the hover doesn't work
+    };
+
+    return (
+      <GoogleMarker
+        key={`map-marker-${longitude}-${latitude}-${index}`}
+        position={{
+          lat: latitude,
+          lng: longitude,
+        }}
+        onClick={handleOnClick}
+        className={styles.marker}
+      >
+        <div className={globalStyles.container}>
+          {cluster.properties.cluster ? (
+            <Cluster cluster={cluster} />
+          ) : (
+            <>
+              {cluster.properties.icon ? (
+                <cluster.properties.icon className={globalStyles.icon} />
+              ) : (
+                <MapPin className={globalStyles.icon} />
+              )}
+              {children}
+            </>
+          )}
+        </div>
+      </GoogleMarker>
+    );
+  });
+}

package/src/components/Map/Root/Markers/Google/styles.ts

@@ -0,0 +1 @@
+export const marker = `-translate-y-1/2`;

package/src/components/Map/Root/Markers/Mapbox/index.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+import { MapPin } from "@phosphor-icons/react";
+import { Marker as MapboxMarker } from "react-map-gl/mapbox";
+
+import type { MapMarkerProps } from "../types";
+
+import { Cluster } from "../Cluster";
+
+import * as styles from "../styles";
+
+export default function MapboxMarkers({ clusters, children }: MapMarkerProps) {
+  return clusters.map((cluster, index) => {
+    const longitude = cluster.geometry.coordinates[0];
+    const latitude = cluster.geometry.coordinates[1];
+
+    return (
+      <MapboxMarker
+        key={`map-marker-${longitude}-${latitude}-${index}`}
+        anchor="bottom"
+        longitude={longitude}
+        latitude={latitude}
+      >
+        <div className={styles.container}>
+          {cluster.properties.cluster ? (
+            <Cluster cluster={cluster} />
+          ) : (
+            <>
+              {cluster.properties.icon ? (
+                <cluster.properties.icon className={styles.icon} />
+              ) : (
+                <MapPin className={styles.icon} />
+              )}
+              {children}
+            </>
+          )}
+        </div>
+      </MapboxMarker>
+    );
+  });
+}

package/src/components/Map/Root/Markers/Maptiler/index.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+import { MapPin } from "@phosphor-icons/react";
+import { Marker as MaplibreMarker } from "react-map-gl/maplibre";
+
+import type { MapMarkerProps } from "../types";
+
+import { Cluster } from "../Cluster";
+
+import * as styles from "../styles";
+
+export default function MaptilerMarkers({
+  clusters,
+  children,
+}: MapMarkerProps) {
+  return clusters?.map((cluster, index) => {
+    const longitude = cluster.geometry.coordinates[0];
+    const latitude = cluster.geometry.coordinates[1];
+
+    return (
+      <MaplibreMarker
+        key={`map-marker-${longitude}-${latitude}-${index}`}
+        anchor="bottom"
+        longitude={longitude}
+        latitude={latitude}
+      >
+        <div className={styles.container}>
+          {cluster.properties.cluster ? (
+            <Cluster cluster={cluster} />
+          ) : (
+            <>
+              {cluster.properties.icon ? (
+                <cluster.properties.icon className={styles.icon} />
+              ) : (
+                <MapPin className={styles.icon} />
+              )}
+              {children}
+            </>
+          )}
+        </div>
+      </MaplibreMarker>
+    );
+  });
+}

package/src/components/Map/Root/Markers/index.tsx

@@ -0,0 +1,61 @@
+import React, { lazy, useMemo, useEffect } from "react";
+
+import type { PointFeature, AnyProps } from "supercluster";
+import { point } from "@turf/turf";
+
+import useSupercluser from "use-supercluster";
+
+import { useRootElement } from "../context";
+
+import type { MarkerProps, ClusterPoint } from "./types";
+
+import * as styles from "./styles";
+
+const MaptilerMarkers = lazy(() => import("./Maptiler"));
+const GoogleMarkers = lazy(() => import("./Google"));
+const MapboxMarkers = lazy(() => import("./Mapbox"));
+
+export const Markers = ({ markers, ...rest }: MarkerProps) => {
+  const { mapProvider, bounds, setBounds } = useRootElement();
+  const { clusters, supercluster } = useSupercluser({
+    points: markers.map(marker => (point([marker.longitude, marker.latitude], {
+      icon: marker.icon,
+    }))),
+    bounds,
+    zoom: 16,
+    options: { radius: 50, maxZoom: 30 },
+  });
+
+  const BaseMarkers = useMemo(() => {
+    switch (mapProvider?.name) {
+      case "maptiler":
+        return MaptilerMarkers;
+      case "google":
+        return GoogleMarkers;
+      case "mapbox":
+        return MapboxMarkers;
+      default:
+        return null;
+    }
+  }, [mapProvider]);
+
+  if (!BaseMarkers) {
+    return null;
+  }
+
+  return (
+    <BaseMarkers clusters={clusters as ClusterPoint[]} {...rest}>
+      {/* POI Pin Background */}
+      <svg
+        viewBox="0 0 20 28"
+        fill="none"
+        className={styles.background}
+      >
+        <path
+          d="M20 10C20 15.5228 12 27.5 10 27.5C8 27.5 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10Z"
+          fill="inherit"
+        />
+      </svg>
+    </BaseMarkers>
+  )
+};

package/src/components/Map/Root/Markers/styles.ts

@@ -0,0 +1,29 @@
+export const container = `
+  cursor-pointer
+  relative
+  h-8
+  w-6
+  text-base-white
+  group
+  transition-transform
+  hover:scale-125
+`;
+
+export const background = `
+  cursor-pointer
+  fill-primary-100
+  stroke-1
+  box-border
+  transition-colors
+  transition-transform
+  group-hover:stroke-base-white
+  group-focus:stroke-base-white
+`;
+
+export const icon = `
+  absolute
+  top-0 left-0 right-0 bottom-1
+  transition-transform
+  m-auto
+  h-4 w-4
+`;

package/src/components/Map/Root/Markers/types.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import type { PointFeature, ClusterProperties } from "supercluster";
+import type { Marker } from "../types";
+
+export type ClusterPoint = PointFeature<ClusterProperties & Marker>;
+
+export type MarkerProps = {
+  markers: Marker[];
+  onClick?: (marker: Marker) => void;
+  children?: ReactNode;
+};
+
+export type MapMarkerProps = Omit<MarkerProps, "markers"> & {
+  clusters: ClusterPoint[];
+};

package/src/components/Map/Root/constants.ts

@@ -0,0 +1,6 @@
+export const defaultMapValues = {
+  zoom: 16,
+  pitch: 0,
+  bearing: 0,
+  cooperativeGestures: false,
+};

package/src/components/Map/Root/context.tsx

@@ -0,0 +1,15 @@
+import React, { useContext } from "react";
+import type { BBox } from "geojson";
+import type { RootProps } from "./types";
+
+export type DefaultContext = RootProps & {
+  bounds?: BBox;
+  setBounds: (bounds: BBox) => void;
+};
+
+const RootElementContext = React.createContext<DefaultContext>(
+  {} as DefaultContext,
+);
+const useRootElement = () => useContext(RootElementContext);
+
+export { useRootElement, RootElementContext };

package/src/components/Map/Root/index.tsx

@@ -0,0 +1,17 @@
+import React, { useState } from "react";
+import type { RootProps } from "./types";
+import { RootElementContext, type DefaultContext } from "./context";
+
+export function Root(props: RootProps) {
+  const [bounds, setBounds] = useState<DefaultContext["bounds"]>();
+
+  return (
+    <RootElementContext.Provider value={{ ...props, bounds, setBounds }}>
+      {props.children}
+    </RootElementContext.Provider>
+  );
+}
+
+export { BaseMap } from "./BaseMap";
+export { Markers } from "./Markers";
+export type { MarkerProps } from "./Markers/types";

package/src/components/Map/Root/types.ts

@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+import { Icon } from "@phosphor-icons/react";
+
+/**
+ * We should try to keep the types "agnostic" but if we have to pick a side,
+ * we should side with the maptiler namings.
+ */
+
+export type MapProvider = {
+  apiKey: string;
+  name: "maptiler" | "google" | "mapbox";
+  maptilerTheme?: string;
+};
+
+export type Coordinates = {
+  latitude: number;
+  longitude: number;
+};
+
+export type Marker = {
+  latitude: Coordinates["latitude"];
+  longitude: Coordinates["longitude"];
+  icon?: Icon;
+};
+
+export type ZoomPosition =
+  | "top-left"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-right";
+
+export type RootProps = {
+  mapProvider: MapProvider;
+  center: Coordinates;
+  zoom?: number;
+  zoomPosition?: ZoomPosition;
+  pitch?: number;
+  bearing?: number;
+  cooperativeGestures?: boolean;
+  markers?: Marker[];
+  children?: ReactNode;
+};

package/src/components/Map/index.stories.tsx

@@ -0,0 +1,117 @@
+import React from "react";
+import { StoryFn, Meta } from "@storybook/react";
+import { mapDefaults as storybookMapDefaults } from "~/../.storybook/defaults";
+import type { RootProps, Marker } from "./Root/types";
+import { defaultMapValues } from "./Root/constants";
+import * as Map from "./Root";
+
+export default {
+  title: "Map",
+  component: Map.Root,
+  argTypes: storybookMapDefaults,
+} as Meta<RootProps>;
+
+const defaultValues = {
+  ...defaultMapValues,
+  center: {
+    latitude: 45.5282164,
+    longitude: -73.5978527,
+  },
+  zoomPosition: "bottom-right" as RootProps["zoomPosition"],
+};
+
+const markers = [
+  {
+    latitude: 45.527399,
+    longitude: -73.598126,
+    // icon: "Storefront",
+  },
+  {
+    latitude: 45.527302,
+    longitude: -73.597405,
+    // icon: "CartPlusInside",
+  },
+  {
+    latitude: 45.527302,
+    longitude: -73.597405,
+    // icon: "Brandy",
+  },
+  {
+    latitude: 45.527302,
+    longitude: -73.597405,
+    // icon: "SpoonAndFork",
+  },
+  {
+    latitude: 45.527302,
+    longitude: -73.597405,
+    // icon: "Coffee",
+  },
+  {
+    latitude: 45.527302,
+    longitude: -73.597405,
+    // icon: "Baby",
+  },
+  {
+    latitude: 45.527256,
+    longitude: -73.600229,
+    // icon: "Train",
+  },
+  {
+    latitude: 45.527256,
+    longitude: -73.600229,
+    // icon: "Barbell",
+  },
+  {
+    latitude: 45.526643,
+    longitude: -73.600293,
+    // icon: "GasPump",
+  },
+  {
+    latitude: 45.527025,
+    longitude: -73.600897,
+    // icon: "Heartbeat",
+  },
+] as Marker[];
+
+const maptilerThemes = {
+  day: "600d69cb-288d-445e-9839-3dfe4d76b31a",
+  night: "dd191599-2a92-49fc-9a33-e12391753ad5",
+};
+
+const Template: StoryFn<RootProps> = (args) => (
+  <div className="w-full h-[calc(100vh-30px)]">
+    <Map.Root {...args}>
+      <Map.BaseMap>
+        <Map.Markers markers={markers} />
+      </Map.BaseMap>
+    </Map.Root>
+  </div>
+);
+
+export const Maptiler = Template.bind({});
+Maptiler.args = {
+  mapProvider: {
+    name: "maptiler",
+    apiKey: import.meta.env.VITE_MAPTILER_KEY,
+    maptilerTheme: maptilerThemes.day,
+  },
+  ...defaultValues,
+};
+
+export const Mapbox = Template.bind({});
+Mapbox.args = {
+  mapProvider: {
+    name: "mapbox",
+    apiKey: import.meta.env.VITE_MAPBOX_KEY,
+  },
+  ...defaultValues,
+};
+
+export const Google = Template.bind({});
+Google.args = {
+  mapProvider: {
+    name: "google",
+    apiKey: import.meta.env.VITE_GOOGLE_KEY,
+  },
+  ...defaultValues,
+};

package/src/components/Map/index.test.tsx

@@ -0,0 +1,16 @@
+import { describe, it, expect, vi } from "vitest";
+
+// filepath: /Users/corado/dev/client-packages/packages/maps/src/components/Map/index.test.tsx
+
+// Mock the "./Root" module
+vi.mock("./Root", () => ({
+  __esModule: true,
+  default: "MockedRoot",
+}));
+
+describe("Map Component Exports", () => {
+  it("should export Root from './Root'", async () => {
+    const { Root } = await import("./index");
+    expect(Root).toBeDefined();
+  });
+});

package/src/components/Map/index.tsx

@@ -0,0 +1 @@
+export * as Root from "./Root";

package/src/index.ts

@@ -0,0 +1 @@
+export * as Map from "~/components/Map";

package/tailwind.config.cjs

@@ -0,0 +1 @@
+module.exports = require("@local-logic/design-system/tailwind.config.cjs");

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "tsconfig/react-library.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": true,
+    "experimentalDecorators": true,
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  },
+  "include": ["./src/**/*", "./vite-env.d.ts"],
+  "exclude": ["dist", "build", "node_modules"]
+}

package/tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}

package/vite-env.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="vite-plugin-svgr/client" />
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_MAPTILER_KEY: string;
+  readonly VITE_MAPBOX_KEY: string;
+  readonly VITE_GOOGLE_KEY: string;
+  // more env variables...
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/vite.config.ts

@@ -0,0 +1,46 @@
+import react from "@vitejs/plugin-react";
+import { resolve } from "path";
+import { visualizer } from "rollup-plugin-visualizer";
+import { defineConfig, PluginOption } from "vite";
+import svgr from "vite-plugin-svgr";
+import dts from "vite-plugin-dts";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve(__dirname, "src/index.ts"),
+      fileName: (format) => `index.${format}.js`,
+      name: "LocalLogicMaps",
+    },
+    /**
+     * This option will only minify the UMD output. Package users can still see
+     * the unminified "index.es.js" output.
+     */
+    minify: true,
+  },
+  resolve: {
+    alias: {
+      "~": resolve(__dirname, "./src"),
+    },
+  },
+  plugins: [
+    svgr({
+      include: "**/*.svg",
+    }),
+    /**
+     * Generate typings
+     */
+    dts({
+      insertTypesEntry: true,
+    }),
+
+    // Has to be after generating the types
+    react(),
+
+    // This option MUST come last. Note that build size WILL NOT represent build
+    // size in client app because it is not minified (client app should handle
+    // minification).
+    visualizer({ brotliSize: true, open: !!process.env.STATS }) as PluginOption,
+  ],
+});