@lugg/maps 0.2.0-alpha.0

package/src/MapView.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import LuggMapsGoogleMapViewNativeComponent, {
+  Commands as GoogleMapCommands,
+} from './fabric/LuggMapsGoogleMapViewNativeComponent';
+import LuggMapsAppleMapViewNativeComponent, {
+  Commands as AppleMapCommands,
+} from './fabric/LuggMapsAppleMapViewNativeComponent';
+import LuggMapsWrapperViewNativeComponent from './fabric/LuggMapsWrapperViewNativeComponent';
+import type {
+  MapViewProps,
+  MapViewRef,
+  MoveCameraOptions,
+  FitCoordinatesOptions,
+} from './MapView.types';
+import type { Coordinate } from './types';
+
+export class MapView
+  extends React.Component<MapViewProps>
+  implements MapViewRef
+{
+  static defaultProps: Partial<MapViewProps> = {
+    provider: Platform.OS === 'ios' ? 'apple' : 'google',
+    initialZoom: 10,
+    zoomEnabled: true,
+    scrollEnabled: true,
+    rotateEnabled: true,
+    pitchEnabled: true,
+  };
+
+  private nativeRef = React.createRef<any>();
+
+  private get nativeCommands() {
+    const provider = this.props.provider ?? MapView.defaultProps.provider;
+    const isApple = Platform.OS === 'ios' && provider === 'apple';
+    return isApple ? AppleMapCommands : GoogleMapCommands;
+  }
+
+  moveCamera(coordinate: Coordinate, options: MoveCameraOptions) {
+    const ref = this.nativeRef.current;
+    if (!ref) return;
+
+    const { zoom, duration = -1 } = options;
+    this.nativeCommands.moveCamera(
+      ref,
+      coordinate.latitude,
+      coordinate.longitude,
+      zoom,
+      duration
+    );
+  }
+
+  fitCoordinates(coordinates: Coordinate[], options?: FitCoordinatesOptions) {
+    const ref = this.nativeRef.current;
+    const first = coordinates[0];
+    if (!ref || !first) return;
+
+    const { padding = 0, duration = -1 } = options ?? {};
+
+    if (coordinates.length === 1) {
+      const zoom = this.props.initialZoom ?? 10;
+      this.moveCamera(first, { zoom, duration });
+      return;
+    }
+
+    this.nativeCommands.fitCoordinates(ref, coordinates, padding, duration);
+  }
+
+  render() {
+    const {
+      provider,
+      mapId,
+      initialCoordinate,
+      initialZoom,
+      zoomEnabled,
+      scrollEnabled,
+      rotateEnabled,
+      pitchEnabled,
+      padding,
+      onCameraMove,
+      onCameraIdle,
+      children,
+      ...rest
+    } = this.props;
+
+    const NativeMapView =
+      Platform.OS === 'ios' && provider === 'apple'
+        ? LuggMapsAppleMapViewNativeComponent
+        : LuggMapsGoogleMapViewNativeComponent;
+
+    return (
+      <NativeMapView
+        ref={this.nativeRef}
+        {...rest}
+        mapId={mapId}
+        initialCoordinate={initialCoordinate}
+        initialZoom={initialZoom}
+        zoomEnabled={zoomEnabled}
+        scrollEnabled={scrollEnabled}
+        rotateEnabled={rotateEnabled}
+        pitchEnabled={pitchEnabled}
+        padding={padding}
+        onCameraMove={onCameraMove}
+        onCameraIdle={onCameraIdle}
+      >
+        <LuggMapsWrapperViewNativeComponent style={StyleSheet.absoluteFill} />
+        {children}
+      </NativeMapView>
+    );
+  }
+}

package/src/MapView.types.ts

@@ -0,0 +1,110 @@
+import type { ReactNode } from 'react';
+import type { NativeSyntheticEvent, ViewProps } from 'react-native';
+import type { MapProvider, Coordinate, EdgeInsets } from './types';
+
+/**
+ * Options for moving the camera
+ * @default duration -1
+ */
+export interface MoveCameraOptions {
+  zoom: number;
+  duration?: number;
+}
+
+/**
+ * Options for fitting coordinates in view
+ * @default padding 0
+ * @default duration -1
+ */
+export interface FitCoordinatesOptions {
+  padding?: number;
+  duration?: number;
+}
+
+/**
+ * MapView ref methods
+ */
+export interface MapViewRef {
+  moveCamera(coordinate: Coordinate, options: MoveCameraOptions): void;
+  fitCoordinates(
+    coordinates: Coordinate[],
+    options?: FitCoordinatesOptions
+  ): void;
+}
+
+/**
+ * Camera move event data
+ */
+export interface CameraMoveEvent {
+  coordinate: Coordinate;
+  zoom: number;
+  dragging: boolean;
+}
+
+/**
+ * Camera idle event data
+ */
+export interface CameraIdleEvent {
+  coordinate: Coordinate;
+  zoom: number;
+}
+
+/**
+ * MapView component props
+ */
+export interface MapViewProps extends ViewProps {
+  /**
+   * Map provider to use
+   * @default 'apple' on iOS, 'google' on Android
+   */
+  provider?: MapProvider;
+  /**
+   * Map style ID (Google Maps) or configuration name (Apple Maps)
+   */
+  mapId?: string;
+  /**
+   * Initial camera coordinate
+   */
+  initialCoordinate?: Coordinate;
+  /**
+   * Initial zoom level
+   * @default 10
+   */
+  initialZoom?: number;
+  /**
+   * Enable zoom gestures
+   * @default true
+   */
+  zoomEnabled?: boolean;
+  /**
+   * Enable scroll/pan gestures
+   * @default true
+   */
+  scrollEnabled?: boolean;
+  /**
+   * Enable rotation gestures
+   * @default true
+   */
+  rotateEnabled?: boolean;
+  /**
+   * Enable pitch/tilt gestures
+   * @default true
+   */
+  pitchEnabled?: boolean;
+  /**
+   * Map content padding
+   */
+  padding?: EdgeInsets;
+  /**
+   * Called when camera moves
+   */
+  onCameraMove?: (event: NativeSyntheticEvent<CameraMoveEvent>) => void;
+  /**
+   * Called when camera stops moving
+   */
+  onCameraIdle?: (event: NativeSyntheticEvent<CameraIdleEvent>) => void;
+  /**
+   * Map children (markers, polylines, etc.)
+   */
+  children?: ReactNode;
+}

package/src/Marker.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import LuggMapsMarkerViewNativeComponent from './fabric/LuggMapsMarkerViewNativeComponent';
+import type { MarkerProps } from './Marker.types';
+import { StyleSheet } from 'react-native';
+
+export class Marker extends React.Component<MarkerProps> {
+  render() {
+    const { name, coordinate, title, description, anchor, children } =
+      this.props;
+
+    return (
+      <LuggMapsMarkerViewNativeComponent
+        style={styles.marker}
+        name={name}
+        coordinate={coordinate}
+        title={title}
+        description={description}
+        anchor={anchor}
+      >
+        {children}
+      </LuggMapsMarkerViewNativeComponent>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  marker: {
+    position: 'absolute',
+    pointerEvents: 'box-none',
+  },
+});

package/src/Marker.types.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import type { Coordinate, Point } from './types';
+
+/**
+ * Marker component props
+ */
+export interface MarkerProps {
+  /**
+   * Name used for debugging purposes
+   */
+  name?: string;
+  /**
+   * Marker position
+   */
+  coordinate: Coordinate;
+  /**
+   * Callout title
+   */
+  title?: string;
+  /**
+   * Callout description
+   */
+  description?: string;
+  /**
+   * Anchor point for custom marker views
+   */
+  anchor?: Point;
+  /**
+   * Custom marker view
+   */
+  children?: ReactNode;
+}

package/src/Polyline.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import LuggMapsPolylineViewNativeComponent from './fabric/LuggMapsPolylineViewNativeComponent';
+import type { PolylineProps } from './Polyline.types';
+import { StyleSheet } from 'react-native';
+
+export class Polyline extends React.Component<PolylineProps> {
+  render() {
+    const {
+      coordinates,
+      strokeColors,
+      strokeWidth,
+      animated = false,
+    } = this.props;
+
+    return (
+      <LuggMapsPolylineViewNativeComponent
+        style={styles.polyline}
+        coordinates={coordinates}
+        strokeColors={strokeColors}
+        strokeWidth={strokeWidth}
+        animated={animated}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  polyline: {
+    position: 'absolute',
+    pointerEvents: 'none',
+  },
+});

package/src/Polyline.types.ts

@@ -0,0 +1,24 @@
+import type { ColorValue } from 'react-native';
+import type { Coordinate } from './types';
+
+/**
+ * Polyline component props
+ */
+export interface PolylineProps {
+  /**
+   * Array of coordinates forming the polyline
+   */
+  coordinates: Coordinate[];
+  /**
+   * Gradient colors along the polyline
+   */
+  strokeColors?: ColorValue[];
+  /**
+   * Line width in points
+   */
+  strokeWidth?: number;
+  /**
+   * Animate the polyline with a snake effect
+   */
+  animated?: boolean;
+}

package/src/fabric/LuggMapsAppleMapViewNativeComponent.ts

@@ -0,0 +1,73 @@
+import { codegenNativeComponent, codegenNativeCommands } from 'react-native';
+import type { ViewProps, HostComponent } from 'react-native';
+import type {
+  Double,
+  DirectEventHandler,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface Coordinate {
+  latitude: Double;
+  longitude: Double;
+}
+
+export interface EdgeInsets {
+  top: Double;
+  left: Double;
+  bottom: Double;
+  right: Double;
+}
+
+export interface CameraMoveEvent {
+  coordinate: {
+    latitude: Double;
+    longitude: Double;
+  };
+  zoom: Double;
+  dragging: boolean;
+}
+
+export interface CameraIdleEvent {
+  coordinate: {
+    latitude: Double;
+    longitude: Double;
+  };
+  zoom: Double;
+}
+
+export interface NativeProps extends ViewProps {
+  initialCoordinate?: Coordinate;
+  initialZoom?: Double;
+  zoomEnabled?: boolean;
+  scrollEnabled?: boolean;
+  rotateEnabled?: boolean;
+  pitchEnabled?: boolean;
+  padding?: EdgeInsets;
+  onCameraMove?: DirectEventHandler<CameraMoveEvent>;
+  onCameraIdle?: DirectEventHandler<CameraIdleEvent>;
+}
+
+type ComponentType = HostComponent<NativeProps>;
+
+interface NativeCommands {
+  moveCamera: (
+    viewRef: React.ElementRef<ComponentType>,
+    latitude: Double,
+    longitude: Double,
+    zoom: Double,
+    duration: Double
+  ) => void;
+  fitCoordinates: (
+    viewRef: React.ElementRef<ComponentType>,
+    coordinates: Coordinate[],
+    padding: Double,
+    duration: Double
+  ) => void;
+}
+
+export const Commands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['moveCamera', 'fitCoordinates'],
+});
+
+export default codegenNativeComponent<NativeProps>(
+  'LuggMapsAppleMapView'
+) as ComponentType;

package/src/fabric/LuggMapsGoogleMapViewNativeComponent.ts

@@ -0,0 +1,74 @@
+import { codegenNativeComponent, codegenNativeCommands } from 'react-native';
+import type { ViewProps, HostComponent } from 'react-native';
+import type {
+  Double,
+  DirectEventHandler,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface Coordinate {
+  latitude: Double;
+  longitude: Double;
+}
+
+export interface EdgeInsets {
+  top: Double;
+  left: Double;
+  bottom: Double;
+  right: Double;
+}
+
+export interface CameraMoveEvent {
+  coordinate: {
+    latitude: Double;
+    longitude: Double;
+  };
+  zoom: Double;
+  dragging: boolean;
+}
+
+export interface CameraIdleEvent {
+  coordinate: {
+    latitude: Double;
+    longitude: Double;
+  };
+  zoom: Double;
+}
+
+export interface NativeProps extends ViewProps {
+  mapId?: string;
+  initialCoordinate?: Coordinate;
+  initialZoom?: Double;
+  zoomEnabled?: boolean;
+  scrollEnabled?: boolean;
+  rotateEnabled?: boolean;
+  pitchEnabled?: boolean;
+  padding?: EdgeInsets;
+  onCameraMove?: DirectEventHandler<CameraMoveEvent>;
+  onCameraIdle?: DirectEventHandler<CameraIdleEvent>;
+}
+
+type ComponentType = HostComponent<NativeProps>;
+
+interface NativeCommands {
+  moveCamera: (
+    viewRef: React.ElementRef<ComponentType>,
+    latitude: Double,
+    longitude: Double,
+    zoom: Double,
+    duration: Double
+  ) => void;
+  fitCoordinates: (
+    viewRef: React.ElementRef<ComponentType>,
+    coordinates: Coordinate[],
+    padding: Double,
+    duration: Double
+  ) => void;
+}
+
+export const Commands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['moveCamera', 'fitCoordinates'],
+});
+
+export default codegenNativeComponent<NativeProps>(
+  'LuggMapsGoogleMapView'
+) as ComponentType;

package/src/fabric/LuggMapsMarkerViewNativeComponent.ts

@@ -0,0 +1,25 @@
+import { codegenNativeComponent } from 'react-native';
+import type { ViewProps, HostComponent } from 'react-native';
+import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface Coordinate {
+  latitude: Double;
+  longitude: Double;
+}
+
+export interface Point {
+  x: Double;
+  y: Double;
+}
+
+export interface NativeProps extends ViewProps {
+  name?: string;
+  coordinate: Coordinate;
+  title?: string;
+  description?: string;
+  anchor?: Point;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'LuggMapsMarkerView'
+) as HostComponent<NativeProps>;

package/src/fabric/LuggMapsPolylineViewNativeComponent.ts

@@ -0,0 +1,19 @@
+import { codegenNativeComponent } from 'react-native';
+import type { ViewProps, HostComponent, ColorValue } from 'react-native';
+import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface Coordinate {
+  latitude: Double;
+  longitude: Double;
+}
+
+export interface NativeProps extends ViewProps {
+  coordinates: ReadonlyArray<Coordinate>;
+  strokeColors?: ReadonlyArray<ColorValue>;
+  strokeWidth?: Double;
+  animated?: boolean;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'LuggMapsPolylineView'
+) as HostComponent<NativeProps>;

package/src/fabric/LuggMapsWrapperViewNativeComponent.ts

@@ -0,0 +1,8 @@
+import { codegenNativeComponent } from 'react-native';
+import type { ViewProps, HostComponent } from 'react-native';
+
+export interface NativeProps extends ViewProps {}
+
+export default codegenNativeComponent<NativeProps>(
+  'LuggMapsWrapperView'
+) as HostComponent<NativeProps>;

package/src/index.ts

@@ -0,0 +1,13 @@
+export { MapView } from './MapView';
+export { Marker } from './Marker';
+export { Polyline } from './Polyline';
+export type {
+  MapViewProps,
+  MapViewRef,
+  MoveCameraOptions,
+  CameraMoveEvent,
+  CameraIdleEvent,
+} from './MapView.types';
+export type { MarkerProps } from './Marker.types';
+export type { PolylineProps } from './Polyline.types';
+export type { MapProvider, Coordinate, Point, EdgeInsets } from './types';

package/src/types.ts

@@ -0,0 +1,30 @@
+/**
+ * Map provider type
+ */
+export type MapProvider = 'google' | 'apple';
+
+/**
+ * Geographic coordinate with latitude and longitude
+ */
+export interface Coordinate {
+  latitude: number;
+  longitude: number;
+}
+
+/**
+ * 2D point representing x and y positions
+ */
+export interface Point {
+  x: number;
+  y: number;
+}
+
+/**
+ * Edge insets for padding
+ */
+export interface EdgeInsets {
+  top: number;
+  left: number;
+  bottom: number;
+  right: number;
+}