fix: size & color marker props

Author: graffkevin

src/components/Markers/Markers.tsx

@@ -1,4 +1,4 @@
-import { Box, useTheme } from "@tracktor/design-system";
+import { Box, Theme, useTheme } from "@tracktor/design-system";
 import { isString } from "@tracktor/react-utils";
 
 const BLACK = "#000000";
@@ -14,32 +14,58 @@ export const variantMarkerColor = {
 
 export type VariantMarker = keyof typeof variantMarkerColor;
 
+type ThemeColorPath = `${keyof Theme["palette"]}.${string}`;
+type ThemeColor = string | ((theme: Theme) => string) | ThemeColorPath;
+
 interface MarkerProps {
   variant?: string | keyof typeof variantMarkerColor;
-  color?: string;
+  color?: ThemeColor;
+  size?: number;
 }
 
 const isPredefinedVariant = (v: string): v is VariantMarker => v in variantMarkerColor;
 
-const Markers = ({ color, variant }: MarkerProps) => {
-  const { palette } = useTheme();
-  const centerColor = palette.mode === "dark" ? BLACK : WHITE;
+const Markers = ({ color, variant, size = 28 }: MarkerProps) => {
+  const theme = useTheme();
+  const centerColor = theme.palette.mode === "dark" ? BLACK : WHITE;
+
+  const borderSize = Math.max(3, Math.round(size * 0.25));
+
+  const resolvedColor = (() => {
+    if (variant && isPredefinedVariant(variant)) {
+      return variantMarkerColor[variant];
+    }
+
+    if (!color) {
+      return variantMarkerColor.default;
+    }
+
+    if (typeof color === "function") {
+      return color(theme);
+    }
+
+    if (isString(color) && color.includes(".")) {
+      const [paletteKey, shade] = color.split(".") as [keyof Theme["palette"], string];
+      const paletteSection = theme.palette[paletteKey];
+
+      if (paletteSection && typeof paletteSection === "object" && shade in paletteSection) {
+        return (paletteSection as Record<string, string>)[shade];
+      }
+    }
 
-  const markerColor =
-    (variant && isPredefinedVariant(variant) && variantMarkerColor[variant]) ||
-    color ||
-    (isString(variant) ? variant : variantMarkerColor.default);
+    return color;
+  })();
 
   return (
     <Box
       component="div"
       style={{
         backgroundColor: centerColor,
-        border: `7px solid ${markerColor}`,
+        border: `${borderSize}px solid ${resolvedColor}`,
         borderRadius: "50%",
         boxShadow: "0 0 4px rgba(0,0,0,0.3)",
-        height: 28,
-        width: 28,
+        height: size,
+        width: size,
       }}
     />
   );

src/features/MapView/MapView.tsx

@@ -1,5 +1,5 @@
 import { Box, GlobalStyles, Skeleton, useTheme } from "@tracktor/design-system";
-import { memo, ReactElement, useEffect, useMemo, useRef, useState } from "react";
+import { CSSProperties, memo, ReactElement, useEffect, useMemo, useRef, useState } from "react";
 import MapboxMap, { MapRef, Marker, Popup } from "react-map-gl";
 import "mapbox-gl/dist/mapbox-gl.css";
 import { isArray, isNumber } from "@tracktor/react-utils";
@@ -185,28 +185,57 @@ const MapView = ({
         >
           {/* Markers - only rendered after map fully initialized */}
           {mapLoaded &&
-            markers.filter(isValidMarker).map((m) => (
-              <Marker
-                key={m.id}
-                longitude={m.lng}
-                latitude={m.lat}
-                anchor="bottom"
-                onClick={(e) => {
-                  e.originalEvent.stopPropagation();
-                  m.id && handleMarkerClick(m.id, Boolean(m.Tooltip));
-                  onMapClick?.(m.lng, m.lat, m);
-                }}
-              >
-                <Box
-                  component="div"
-                  onMouseEnter={() => m.id && handleMarkerHover(m.id, Boolean(m.Tooltip))}
-                  onMouseLeave={() => handleMarkerHover(null)}
-                  style={{ cursor: m.Tooltip ? "pointer" : "default" }}
+            markers.filter(isValidMarker).map((m) => {
+              const size = typeof m.size === "number" ? m.size : undefined;
+
+              const iconComponent = (() => {
+                if (!m.IconComponent) {
+                  return null;
+                }
+
+                const iconProps = { ...m.iconProps };
+
+                if (size) {
+                  iconProps.width = size;
+                  iconProps.height = size;
+                }
+
+                return <m.IconComponent {...iconProps} />;
+              })();
+
+              const defaultMarker = m.IconComponent ? null : <Markers color={m.color} variant={m.variant} size={size} />;
+
+              const wrapperStyle: CSSProperties = {
+                alignItems: "center",
+                cursor: m.Tooltip ? "pointer" : "default",
+                display: "inline-flex",
+                justifyContent: "center",
+                ...(m.IconComponent && !size ? {} : size ? { height: size, width: size } : {}),
+              };
+
+              return (
+                <Marker
+                  key={m.id}
+                  longitude={m.lng}
+                  latitude={m.lat}
+                  anchor="bottom"
+                  onClick={(e) => {
+                    e.originalEvent.stopPropagation();
+                    m.id && handleMarkerClick(m.id, Boolean(m.Tooltip));
+                    onMapClick?.(m.lng, m.lat, m);
+                  }}
                 >
-                  {m.IconComponent ? <m.IconComponent {...m.iconProps} /> : <Markers color={m.color} variant={m.variant} />}
-                </Box>
-              </Marker>
-            ))}
+                  <Box
+                    component="div"
+                    onMouseEnter={() => m.id && handleMarkerHover(m.id, Boolean(m.Tooltip))}
+                    onMouseLeave={() => handleMarkerHover(null)}
+                    style={wrapperStyle}
+                  >
+                    {iconComponent || defaultMarker}
+                  </Box>
+                </Marker>
+              );
+            })}
 
           {/* Popup */}
           {mapLoaded && selectedMarker?.Tooltip && (

src/types/MarkerProps.ts

@@ -1,6 +1,9 @@
+import { Theme } from "@tracktor/design-system";
 import { ComponentType, ReactNode } from "react";
 import { VariantMarker } from "@/components/Markers/Markers.tsx";
 
+export type ThemeColor = string | ((theme: Theme) => string) | `${keyof Theme["palette"]}.${string}`;
+
 interface CustomMarkerMapProps {
   geometry: {
     coordinates: number[];
@@ -92,6 +95,13 @@ export interface MarkerProps<T = Record<string, unknown>> {
   // biome-ignore lint/suspicious/noExplicitAny: <Icons can receive any props depending on context>
   IconComponent?: ComponentType<any>;
 
-  color?: string;
+  /**
+   * Color theme for the marker.
+   */
+  color?: ThemeColor;
+
+  /**
+   * Predefined variant for the marker styling.
+   */
   variant?: string | VariantMarker;
 }