@de./sdk-rn 1.0.0

package/src/allend/MSI/Handles.ts

@@ -0,0 +1,387 @@
+import type {
+  Coordinates,
+  GPSLocation,
+  Entity,
+  MapOptions,
+  Caption,
+  Journey,
+  ActivePosition,
+  PickedLocation,
+  RouteOptions
+} from '../../types'
+
+import WIO from 'webview.io'
+import { EventEmitter } from 'events'
+import Controls from './Controls'
+import Stream from '../../utils/stream'
+
+export interface ControlEntity {
+  add: ( entity: Entity, callback?: () => void ) => void
+  remove: ( id: string, callback?: () => void ) => void
+  move: ( update: ActivePosition, callback?: () => void ) => void
+}
+export type LRSControlsListener = ( controls: ControlEntity ) => void
+export type LRSErrorListener = ( error?: Error | boolean ) => void
+
+export default class Handles extends EventEmitter {
+  private chn: WIO
+  private controls: Controls
+  private options: MapOptions
+
+  constructor( chn: WIO, controls: Controls, options: MapOptions ){
+    super()
+
+    this.chn = chn
+    this.options = options
+    this.controls = controls
+  }
+
+  /**
+   * Listen when user manually picked a location
+   * on the map.
+   * 
+   * @param fn - Event listener function
+   * @return - void
+   */
+  onPickLocation( fn: ( location: PickedLocation ) => void ){
+    this.chn.on('pick:location', fn )
+  }
+
+  /**
+   * Create new stream through which user's current location
+   * details will be pushed to the API level.
+   * 
+   * @param usertype - (Default: `client`) Type of user at the current location
+   * @return - Readable stream
+   */
+  myLocation( usertype?: 'client' | 'agent' ){
+    if( !this.chn ) return
+    this.chn?.emit('pin:current:location', usertype || 'client' )
+
+    const stream = new Stream()
+
+    this.chn
+    .on('current:location', ( location: GPSLocation  ) => stream.sync( location ) )
+    .on('live:location:start', ( location: GPSLocation  ) => stream.sync( location ) )
+    .on('live:location:update', ( location: GPSLocation  ) => stream.sync( location ) )
+    .on('live:location:end', ( location: GPSLocation  ) => stream.sync( location ) )
+    .on('current:location:error', ( message: string ) => stream.error( new Error( message ) ) )
+
+    // Listen to stream closed
+    stream
+    .onerror( error => console.error('[Stream Error] ', error ) )
+    .onclose( () => {
+      if( !this.chn ) return
+
+      this.chn
+      .off('current:location')
+      .off('current:location:live')
+      .off('current:location:error')
+    } )
+
+    return stream
+  }
+
+  /**
+   * Create new stream through which the current location details
+   * of user's peer (Eg. `agent`) will be pushed to the API level.
+   * 
+   * @param position - Peer's current GPS location
+   * @param caption - (Optional) Caption information of the peer
+   * @return - Readable stream
+   */
+  peerLocation( position: GPSLocation , caption?: Caption ){
+    if( !this.chn ) return
+    this.chn?.emit('pin:peer:location', { id: 'peer', position, caption } )
+    
+    const stream = new Stream
+    
+    // Listen to incoming new position data
+    stream
+    .on('data', ({ position, caption }: any ) => {
+      if( !position )
+        return stream.error( new Error('Invalid Data') )
+
+      this.chn?.emit('pin:peer:location', { id: 'peer', position, caption } )
+    })
+    .onerror( error => console.error('[Stream Error] ', error ) )
+    .onclose( () => this.chn?.emit('unpin:peer:location', 'peer') )
+
+    return stream
+  }
+
+  /**
+   * Open a live stream through which the current location details
+   * and profile information of all nearby entities around 
+   * this user (Eg. `bike`, `car`, ...) will be pushed to the 
+   * API level.
+   * 
+   * @param list - List of detected nearby entities around this user.
+   * @return - Live Readable Stream (LRS)
+   */
+  nearby( list: Entity[] ){
+    if( !this.chn ) return
+
+    const self = this
+    let _CLOSED = false
+    
+    this.chn?.emit('show:nearby', list )
+    
+    const
+    stream = new Stream,
+    controls: ControlEntity = {
+      /**
+       * Add new entity to the nearby list
+       * 
+       * @param entity - GPS location and profile of the entity
+       */
+      add( entity ): Promise<void> {
+        return new Promise( ( resolve, reject ) => {
+          if( _CLOSED ) return
+
+          // Maintain initial list of nearby: Prevent duplicated entity
+          for( let x = 0; x < list.length; x++ )
+            if( list[x].id === entity.id ){
+              list.splice( x, 1 )
+              self.chn?.emit('remove:nearby:entity', entity.id )
+              break
+            }
+          
+          // Track response timeout
+          let TIMEOUT: any
+          
+          // Add new entity
+          list.push( entity )
+          self.chn?.emit('add:nearby:entity', entity, () => {
+            clearTimeout( TIMEOUT )
+            resolve()
+
+            self.emit('nearby--stream', 'add', entity )
+          } )
+
+          setTimeout( () => reject('Add entity timeout'), 8000 )
+        })
+      },
+
+      /**
+       * Remove an entity (vehicle, premises) from the nearby list
+       * 
+       * @param id - ID of targeted entity
+       */
+      remove( id ): Promise<void> {
+        return new Promise( ( resolve, reject ) => {
+          if( _CLOSED ) return
+          
+          // Track response timeout
+          let TIMEOUT: any
+
+          list = list.filter( each => { return each.id !== id } )
+          self.chn?.emit('remove:nearby:entity', id, () => {
+            clearTimeout( TIMEOUT )
+            resolve()
+
+            self.emit('nearby--stream', 'remove', id )
+          } )
+
+          setTimeout( () => reject('Remove entity timeout'), 8000 )
+        } )
+      },
+      
+      /**
+       * Change mobile entities position on the map
+       * 
+       * @param location - New GPS location of the entity
+       */
+      move( location ): Promise<void> {
+        return new Promise( ( resolve, reject ) => {
+          if( _CLOSED ) return
+          
+          // Track response timeout
+          let TIMEOUT: any
+          
+          self.chn?.emit('move:nearby:entity', location, () => {
+            clearTimeout( TIMEOUT )
+            resolve()
+
+            self.emit('nearby--stream', 'move', location )
+          } )
+
+          setTimeout( () => reject('Remove entity timeout'), 8000 )
+        } )
+      }
+    }
+
+    const
+    /**
+     * 
+     */
+    live = ( fn: LRSControlsListener ) => {
+      fn( controls )
+      return stream
+    },
+    close = ( fn?: LRSErrorListener ) => {
+      if( _CLOSED ) return
+
+      this.chn?.emit('remove:nearby', ( error: string | boolean ) => {
+        if( typeof error == 'string' ) 
+          return typeof fn == 'function' && fn( new Error( error ) )
+
+        _CLOSED = true
+        stream.isActive() && stream.close()
+
+        typeof fn == 'function' && fn()
+      })
+    }
+    
+    this.on('nearby--stream', ( action, dataset ) => stream.sync({ action, dataset, list }) )
+    // Listen to stream closed
+    stream
+    .onerror( error => console.error('[Stream Error] ', error ) )
+    .onclose( ( fn?: () => void ) => {
+      this.off('nearby--stream', fn || (() => {}) )
+      close()
+    })
+    
+    return { live, pipe: stream.pipe, close }
+  }
+
+  /**
+   * Set service pickup point.
+   * 
+   * @param location - Location coordinates
+   * @param caption - (Optional) Caption information of the pickup point
+   */
+  async pickupPoint( location: Coordinates, caption?: Caption ): Promise<void> {
+    // Default pickup caption
+    const _caption: Caption = { 
+      label: 'Pickup point',
+      ...(caption || {})
+    }
+    
+    await this.controls?.setRouteOrigin('main', { coords: location, caption: _caption } )
+  }
+
+  /**
+   * Set service dropoff point.
+   * 
+   * @param location - Location coordinates
+   * @param caption - (Optional) Caption information of the pickup point
+   */
+  async dropoffPoint( location: Coordinates, caption?: Caption ): Promise<void> {
+    // Default destination caption
+    const _caption: Caption = {
+      label: 'Destination point',
+      ...(caption || {})
+    }
+    
+    await this.controls?.setRouteDestination('main', { coords: location, caption: _caption } )
+  }
+
+  /**
+   * Create new stream through which navigation details of
+   * this user's peer will be display on the user's map also
+   * pushed to the API level.
+   * 
+   * @return - Readable stream
+   */
+  peerDirection( options?: RouteOptions ){
+    if( !this.chn ) return
+    const stream = new Stream
+
+    stream
+    .on('data', ({ status, direction, position }: any ) => {
+      if( !direction || !position )
+        return stream.error( new Error('Invalid Data') )
+        
+      this.controls?.casting('peer-direction', direction, position, options )
+
+      switch( status ){
+        case 'STALE':
+        case 'STARTED':
+        case 'LONG_STOP':
+        case 'LOW_TRAFFIC':
+        case 'HIGH_TRAFFIC':
+        case 'MODERATE_TRAFFIC':
+        case 'SPEED_WARNING':
+        case 'NEARBY':
+        case 'ARRIVED': this.emit(`pe:${status.toLowerCase()}`); break
+        case 'UNAVAILABLE': {
+          this.emit(`pe:closed`)
+          stream.isActive() && stream.close()
+        } break
+      }
+    })
+    .onerror( error => console.error('[Stream Error] ', error ) )
+
+    return stream
+  }
+
+  /**
+   * Initiate user (Eg. agent) live navigation on the map 
+   * and create a new stream through which the navigation details 
+   * will be pushed to the API level.
+   * 
+   * @param journey - Route origin, waypoints, destination
+   * @return - Readable stream
+   */
+  navigation( journey: Journey ): Promise<Stream> {
+    return new Promise( ( resolve, reject ) => {
+      if( !this.chn ) return
+
+      const initialize = () => {
+        const stream = new Stream
+
+        // Sync with navigation route update
+        this.chn?.on('navigation:direction', ({ status, direction, position }) => {
+          stream.sync({ status, direction, position })
+
+          switch( status ){
+            case 'STALE':
+            case 'STARTED':
+            case 'LONG_STOP':
+            case 'LOW_TRAFFIC':
+            case 'HIGH_TRAFFIC':
+            case 'MODERATE_TRAFFIC':
+            case 'SPEED_WARNING':
+            case 'NEARBY':
+            case 'ARRIVED': this.emit(`pe:${status.toLowerCase()}`); break
+            case 'UNAVAILABLE': {
+              this.emit(`pe:closed`)
+              stream.isActive() && stream.close()
+            } break
+          }
+        })
+
+        stream
+        // Listen location/position update
+        .on('data', ({ position }: any ) => {
+          if( !position )
+            return stream.error( new Error('Invalid Data') )
+          
+          this.controls?.navigate( position )
+        })
+        .onerror( error => console.error('[Stream Error] ', error ) )
+        .onclose( () => {
+          this.chn?.off('navigation:direction')
+          this.controls?.unmountNavigation()
+        })
+
+        resolve( stream )
+      }
+      
+      // Set route
+      this.controls?.setRoute( journey )
+                    .then( async () => {
+                      // Initialize navigation point to current location
+                      const position = journey.origin || await this.controls?.getCurrentLocation()
+                      if( !position ) return reject('Unable to get current location')
+
+                      initialize()
+
+                      await this.controls?.mountNavigation( journey.routeId )
+                      await this.controls?.setInitialNavigationPosition( position as GPSLocation )
+                    } )
+                    .catch( reject )
+    } )
+  }
+}

package/src/allend/MSI/Plugins.ts

@@ -0,0 +1,52 @@
+import type { MapOptions } from '../../types'
+
+import WIO from 'webview.io'
+import Handles from './Handles'
+import Controls from './Controls'
+import Utils from '../../utils'
+
+export type PluginHook = {
+  handles: Handles,
+  controls: Controls,
+  map: MapOptions,
+  utils: typeof Utils
+}
+export type Plugin<PluginAPI, PluginOptions = {}> = ( hooks: PluginHook, options?: PluginOptions ) => PluginAPI
+
+export default class Plugins {
+  private chn: WIO
+  private handles: Handles
+  private controls: Controls
+  private options: MapOptions
+  private ACTIVE_PLUGINS: Record<string, Plugin<any>>  = {}
+
+  constructor( chn: WIO, handles: Handles, controls: Controls, options: MapOptions ){
+    this.chn = chn
+    this.options = options
+    this.handles = handles
+    this.controls = controls
+  }
+
+  mount( list: Record<string, Plugin<any>> ){
+    Object.entries( list ).forEach( ([name, plugin]) => {
+      // TODO: Allow api level permission settings
+
+      // TODO: Put validation checks in place
+
+      this.ACTIVE_PLUGINS[ name ] = plugin
+    } )
+  }
+
+  use<API, Options>( name: string, options?: Record<string, Options> ){
+    if( !(name in this.ACTIVE_PLUGINS) )
+      throw new Error(`Undefined <${name}> plugin`)
+
+    const plugin: Plugin<API> = this.ACTIVE_PLUGINS[ name ]
+    return plugin({
+      handles: this.handles,
+      controls: this.controls,
+      map: this.options,
+      utils: Utils
+    }, options )
+  }
+}

package/src/allend/MSI/index.tsx

@@ -0,0 +1,254 @@
+/**
+ * de.sdk-rn
+ * React Native SDK for MSI (Map Service Interface)
+ */
+
+import React, { useRef, useEffect, useState, forwardRef, useImperativeHandle } from 'react'
+import { View, StyleSheet, AppState, AppStateStatus } from 'react-native'
+import { WebView } from 'react-native-webview'
+import WIO from 'webview.io'
+import Controls from './Controls'
+import Handles from './Handles'
+import Plugins, { type Plugin } from './Plugins'
+import type { MapOptions } from '../../types'
+
+export interface MSIInterface {
+  controls: Controls
+  handles: Handles
+  plugins: Plugins
+}
+
+const REQUIRED_FEATURES = ['geolocation']
+const REGISTERED_PLUGINS: Record<string, Plugin<any>> = {}
+
+export interface MSIProps extends MapOptions {
+  onReady?: () => void
+  onError?: (error: Error) => void
+  onLoaded?: (msi: MSIInterface) => void
+}
+
+export interface MSIRef extends MSIInterface {
+  isReady: () => boolean
+}
+
+// MSI Component
+export default forwardRef<MSIRef, MSIProps>(( props, ref ) => {
+  const webViewRef = useRef<WebView>(null)
+  const wioRef = useRef<WIO | null>(null)
+  const controlsRef = useRef<Controls | null>(null)
+  const handlesRef = useRef<Handles | null>(null)
+  const pluginsRef = useRef<Plugins | null>(null)
+  const [isConnected, setIsConnected] = useState(false)
+  const [hasError, setHasError] = useState(false)
+
+  // Expose API via ref
+  useImperativeHandle( ref, () => ({
+    controls: controlsRef.current!,
+    handles: handlesRef.current!,
+    plugins: pluginsRef.current!,
+    isReady: () => isConnected
+  }))
+
+  useEffect(() => {
+    // Initialize WIO bridge
+    wioRef.current = new WIO({ 
+      type: 'WEBVIEW',
+      debug: props.env === 'dev'
+    })
+
+    const baseURL = props.env === 'dev' 
+      ? 'http://localhost:4800' 
+      : 'https://msi.dedot.io'
+
+    wioRef.current.initiate( webViewRef, baseURL )
+
+    // Setup event listeners
+    wioRef.current
+    .once('connect', () => {
+      const wio = wioRef.current!
+
+      // Bind with access token and origin
+      wio.emit('bind', { 
+        ...props, 
+        origin: 'react-native' 
+      }, ( error: string | boolean ) => {
+        if( error ){
+          const errorObj = new Error( typeof error === 'string' ? error : 'Connection failed' )
+          setHasError( true )
+          props.onError?.( errorObj )
+          return
+        }
+
+        setIsConnected( true )
+      })
+    })
+    .on('error', ( error: Error | string ) => {
+      const errorObj = typeof error === 'object' ? error : new Error( error )
+      setHasError( true )
+      props.onError?.( errorObj )
+    })
+    .on('ready', () => {
+      console.log('MSI ready')
+      props.onReady?.()
+
+      // Initialize API
+      if( wioRef.current && isConnected && !controlsRef.current ){
+        const
+        controls = new Controls( wioRef.current, props ),
+        handles = new Handles( wioRef.current, controls, props ),
+        plugins = new Plugins( wioRef.current, handles, controls, props )
+        
+        plugins.mount( REGISTERED_PLUGINS )
+
+        controlsRef.current = controls
+        handlesRef.current = handles
+        pluginsRef.current = plugins
+
+        props.onLoaded?.({
+          controls,
+          handles,
+          plugins
+        })
+      }
+    })
+
+    // Handle app state changes
+    const subscription = AppState.addEventListener('change', ( nextAppState: AppStateStatus ) => {
+      if( nextAppState === 'background' ){
+        // Pause updates when app goes to background
+        console.log('App backgrounded - pausing map updates')
+      }
+      else if( nextAppState === 'active' ){
+        // Resume when app comes to foreground
+        console.log('App active - resuming map updates')
+      }
+    })
+
+    return () => {
+      subscription.remove()
+      wioRef.current?.disconnect()
+    }
+  }, [])
+
+  const handleMessage = ( event: any ) => {
+    wioRef.current?.handleMessage( event )
+  }
+
+  const
+  baseURL = props.env === 'dev' 
+    ? 'http://localhost:4800' 
+    : 'https://msi.dedot.io',
+  mapUrl = `${baseURL}?token=${props.accessToken}&v=${props.version || 1}`
+
+  return (
+    <View style={styles.container}>
+      <WebView
+        ref={webViewRef}
+        source={{ uri: mapUrl }}
+        style={styles.webview}
+        onMessage={handleMessage}
+        injectedJavaScript={wioRef.current?.getInjectedJavaScript()}
+        javaScriptEnabled={true}
+        domStorageEnabled={true}
+        geolocationEnabled={true}
+        allowsInlineMediaPlayback={true}
+        cacheEnabled={true}
+        androidLayerType="hardware"
+        allowsBackForwardNavigationGestures={false}
+        bounces={false}
+        scrollEnabled={false}
+        mixedContentMode="always"
+        originWhitelist={['*']}
+        onLoadStart={() => console.log('WebView loading...')}
+        onLoadEnd={() => {
+          console.log('WebView loaded')
+          setTimeout(() => wioRef.current?.emit('ping'), 300 )
+        }}
+        onError={( syntheticEvent ) => {
+          const { nativeEvent } = syntheticEvent
+          console.error('WebView error:', nativeEvent )
+          setHasError( true )
+          props.onError?.( new Error( nativeEvent.description || 'WebView error' ) )
+        }}
+      />
+      
+      {hasError && (
+        <View style={styles.errorOverlay}>
+          <View style={styles.errorCard}>
+            {/* Error UI can be added here */}
+          </View>
+        </View>
+      )}
+    </View>
+  )
+})
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f0f0f0'
+  },
+  webview: {
+    flex: 1,
+    backgroundColor: 'transparent'
+  },
+  errorOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  errorCard: {
+    backgroundColor: 'white',
+    padding: 20,
+    borderRadius: 12,
+    margin: 20
+  }
+})
+
+// =====================================================
+// MSI CLASS
+// =====================================================
+
+export class MSIClass {
+  private options: MapOptions
+  public onReady?: () => void
+  public onError?: (error: Error) => void
+  public onLoaded?: (msi: MSIInterface) => void
+
+  constructor( options: MapOptions ){
+    this.options = options
+
+    if( !this.options.accessToken )
+      throw new Error('Invalid Access Token')
+  }
+
+  plugin<T>( name: string, fn: Plugin<T> ){
+    REGISTERED_PLUGINS[name] = fn
+  }
+
+  once( event: string, handler: Function ){
+    if( event === 'ready' ) this.onReady = handler as any
+    else if( event === 'error' ) this.onError = handler as any
+    return this
+  }
+
+  on( event: string, handler: Function ){
+    return this.once( event, handler )
+  }
+
+  getOptions(): MapOptions {
+    return this.options
+  }
+
+  load(): Promise<MSIInterface> {
+    return new Promise(( resolve, reject ) => {
+      this.onLoaded = resolve
+      this.onError = reject
+    })
+  }
+
+  isReady(): boolean {
+    return false
+  }
+}

package/src/allend/index.ts

@@ -0,0 +1,14 @@
+import MSI from './MSI'
+import Utils from '../utils'
+
+import Order from './DClient/Order'
+import Event from './DClient/Event'
+import Client from './DClient/Client'
+
+const DClient = { Client, Order, Event }
+
+export default {
+  MSI,
+  Utils,
+  DClient
+}