@iternio/react-native-auto-play 0.0.1

package/src/utils/NitroAction.ts

@@ -0,0 +1,234 @@
+import { Platform } from 'react-native';
+import type { HeaderActionsAndroidMap, MapHeaderActions } from '../templates/MapTemplate';
+import type {
+  ActionButton,
+  HeaderActions,
+  HeaderActionsAndroid,
+  HeaderActionsIos,
+} from '../templates/Template';
+import type {
+  ActionButtonAndroid,
+  ActionButtonIos,
+  ButtonStyle,
+  ImageButton,
+  TextAndImageButton,
+  TextButton,
+} from '../types/Button';
+import type { AlertActionStyle } from './NitroAlert';
+import { type NitroImage, NitroImageUtil } from './NitroImage';
+
+type NitroActionType = 'appIcon' | 'back' | 'custom';
+type NitroAlignment = 'leading' | 'trailing';
+type NitroButtonStyle = ButtonStyle | AlertActionStyle;
+
+/**
+ * used to convert the very specific typescript typing in an easier to handle type for native code
+ */
+export type NitroAction = {
+  title?: string;
+  image?: NitroImage;
+  enabled?: boolean;
+  onPress: () => void;
+  type: NitroActionType;
+  alignment?: NitroAlignment;
+  flags?: number;
+  /**
+   * Only used for non header actions
+   * @namespace iOS
+   * @default default
+   */
+  // REVISIT: check if we can re-use the flags?
+  style?: NitroButtonStyle;
+};
+
+const getImage = <T>(
+  action: ActionButtonIos<T> | TextButton<T> | ImageButton<T> | TextAndImageButton<T>
+): NitroImage | undefined => {
+  if (action.type === 'text') {
+    return undefined;
+  }
+
+  if (action.image.type === 'glyph' && action.image.fontScale == null) {
+    action.image.fontScale = Platform.OS === 'android' ? 1.0 : 0.8;
+  }
+
+  return NitroImageUtil.convert(action.image);
+};
+
+const getTitle = <T>(
+  action: ActionButtonIos<T> | TextButton<T> | ImageButton<T> | TextAndImageButton<T>
+): string | undefined => {
+  if (action.type === 'image') {
+    return undefined;
+  }
+
+  return action.title;
+};
+
+// appIcon can not be pressed but we wanna have a non-optional onPress on native side
+const getAppIconAction = (alignment?: NitroAlignment): NitroAction => ({
+  type: 'appIcon',
+  onPress: () => null,
+  alignment,
+});
+
+const convertToNitro = <T>(
+  template: T,
+  action: ActionButtonAndroid<T>,
+  alignment?: NitroAlignment
+): NitroAction => {
+  const { type } = action;
+  if (type === 'appIcon') {
+    return getAppIconAction(alignment);
+  }
+
+  const { onPress } = action;
+
+  if (type === 'back') {
+    return { type, onPress: () => onPress(template), alignment };
+  }
+
+  const { enabled, flags, style } = action;
+
+  const title = getTitle(action);
+  const image = getImage(action);
+
+  return {
+    onPress: () => onPress(template),
+    type: 'custom' as const,
+    enabled,
+    flags,
+    image,
+    title,
+    alignment,
+    style,
+  };
+};
+
+const convertActionButtons = <T>(
+  template: T,
+  actions?: Array<ActionButton<T>>
+): Array<NitroAction> | undefined => {
+  return actions?.map<NitroAction>((action) => convertToNitro(template, action, undefined));
+};
+
+function convertIos<T>(template: T, actions: HeaderActionsIos<T>): Array<NitroAction>;
+function convertIos<T>(template: T, actions?: HeaderActionsIos<T>): Array<NitroAction> | undefined;
+function convertIos<T>(template: T, actions?: HeaderActionsIos<T>): Array<NitroAction> | undefined {
+  if (actions == null) {
+    return undefined;
+  }
+
+  const nitroActions: Array<NitroAction> = [];
+
+  if (actions.backButton != null) {
+    nitroActions.push({
+      type: 'back',
+      onPress: () => actions.backButton?.onPress(template),
+      alignment: undefined,
+    });
+  }
+
+  if (actions.leadingNavigationBarButtons != null) {
+    for (const button of actions.leadingNavigationBarButtons) {
+      const { onPress, enabled } = button;
+      const image = getImage(button);
+      const title = getTitle(button);
+
+      nitroActions.push({
+        type: 'custom',
+        enabled,
+        image,
+        onPress: () => onPress(template),
+        title,
+        alignment: 'leading',
+      });
+    }
+  }
+
+  if (actions.trailingNavigationBarButtons) {
+    for (const button of actions.trailingNavigationBarButtons) {
+      const { onPress, enabled } = button;
+      const image = getImage(button);
+      const title = getTitle(button);
+
+      nitroActions.push({
+        type: 'custom',
+        enabled,
+        image,
+        onPress: () => onPress(template),
+        title,
+        alignment: 'trailing',
+      });
+    }
+  }
+
+  return nitroActions;
+}
+
+function convertAndroid<T>(
+  template: T,
+  actions: HeaderActionsAndroid<T> | HeaderActionsAndroidMap<T>
+): Array<NitroAction>;
+function convertAndroid<T>(
+  template: T,
+  actions?: HeaderActionsAndroid<T> | HeaderActionsAndroidMap<T>
+): Array<NitroAction> | undefined;
+function convertAndroid<T>(
+  template: T,
+  actions?: HeaderActionsAndroid<T> | HeaderActionsAndroidMap<T>
+): Array<NitroAction> | undefined {
+  if (actions == null) {
+    return undefined;
+  }
+
+  if (Array.isArray(actions)) {
+    return convertActionButtons(template, actions);
+  }
+
+  const nitroActions: Array<NitroAction> = [];
+
+  const { startHeaderAction, endHeaderActions = [] } = actions;
+
+  if (startHeaderAction != null) {
+    const action: NitroAction =
+      startHeaderAction.type === 'appIcon'
+        ? getAppIconAction('leading')
+        : {
+            ...startHeaderAction,
+            alignment: 'leading',
+            onPress: () => startHeaderAction.onPress(template),
+          };
+
+    nitroActions.push(action);
+  }
+
+  for (const action of endHeaderActions) {
+    nitroActions.push(convertToNitro(template, action, 'trailing'));
+  }
+
+  return nitroActions;
+}
+
+function convert<T>(
+  template: T,
+  actions: HeaderActions<T> | Array<ActionButton<T>> | MapHeaderActions<T>
+): Array<NitroAction>;
+function convert<T>(
+  template: T,
+  actions?: HeaderActions<T> | Array<ActionButton<T>> | MapHeaderActions<T>
+): Array<NitroAction> | undefined;
+function convert<T>(
+  template: T,
+  actions?: HeaderActions<T> | Array<ActionButton<T>> | MapHeaderActions<T>
+): Array<NitroAction> | undefined {
+  if (Array.isArray(actions)) {
+    return convertActionButtons(template, actions);
+  }
+
+  return Platform.OS === 'android'
+    ? convertAndroid(template, actions?.android)
+    : convertIos(template, actions?.ios);
+}
+
+export const NitroActionUtil = { convert };

package/src/utils/NitroAlert.ts

@@ -0,0 +1,62 @@
+import type { AutoImage } from '../types/Image';
+import type { AutoText } from '../types/Text';
+import { type NitroImage, NitroImageUtil } from './NitroImage';
+
+export type AlertActionStyle = 'default' | 'destructive' | 'cancel';
+type AlertDismissalReason = 'timeout' | 'user' | 'system';
+
+export type NavigationAlertAction = {
+  title: string;
+  style?: AlertActionStyle;
+  onPress: () => void;
+};
+
+enum AlertPriorityEnum {
+  low = 0,
+  medium = 1,
+  high = 2,
+}
+
+export type AlertPriority = 'low' | 'medium' | 'high';
+
+export type NavigationAlert = {
+  id: number;
+  title: AutoText;
+  subtitle?: AutoText;
+  image?: AutoImage;
+  primaryAction: NavigationAlertAction;
+  secondaryAction?: NavigationAlertAction;
+  durationMs: number;
+  onWillShow?: () => void;
+  onDidDismiss?: (reason: AlertDismissalReason) => void;
+  /**
+   * The priority of the alert. When an alert with a higher priority is visible, and a lower priority alert is sent, the lower priority alert will not be shown.
+   * However if a higher priority alert is sent and a lower priority alert is visible, the lower priority alert will be replaced by the higher priority alert.
+   */
+  priority: AlertPriority;
+};
+
+export type NitroNavigationAlert = {
+  id: number;
+  title: AutoText;
+  subtitle?: AutoText;
+  image?: NitroImage;
+  primaryAction: NavigationAlertAction;
+  secondaryAction?: NavigationAlertAction;
+  durationMs: number;
+  onWillShow?: () => void;
+  onDidDismiss?: (reason: AlertDismissalReason) => void;
+  priority: number;
+};
+
+const convert = (alert: NavigationAlert): NitroNavigationAlert => {
+  const { image, priority, ...rest } = alert;
+
+  return {
+    ...rest,
+    image: NitroImageUtil.convert(image),
+    priority: AlertPriorityEnum[priority],
+  };
+};
+
+export const NitroAlertUtil = { convert };

package/src/utils/NitroAttributedString.ts

@@ -0,0 +1,29 @@
+import type { AutoImage } from '../types/Image';
+import { type NitroImage, NitroImageUtil } from './NitroImage';
+
+type NitroAttributedStringImage = {
+  image: NitroImage;
+  position: number;
+};
+
+export type NitroAttributedString = {
+  text: string;
+  images?: Array<NitroAttributedStringImage>;
+};
+
+export type AutoAttributedString = {
+  text: string;
+  images?: Array<{ image: AutoImage; position: number }>;
+};
+
+function convert(attributedStrings: Array<AutoAttributedString>): Array<NitroAttributedString> {
+  return attributedStrings.map((attributedString) => ({
+    ...attributedString,
+    images: attributedString.images?.map((image) => ({
+      ...image,
+      image: NitroImageUtil.convert(image.image),
+    })),
+  }));
+}
+
+export const NitroAttributedStringUtil = { convert };

package/src/utils/NitroColor.ts

@@ -0,0 +1,34 @@
+import { processColor } from 'react-native';
+
+export type NitroColor = { lightColor: number; darkColor: number };
+export type ThemedColor = { lightColor: string; darkColor: string };
+
+function convertColor(color: string): number;
+function convertColor(color?: string): number | undefined;
+function convertColor(color?: string): number | undefined {
+  // since we accept only string it can return a number only
+  return processColor(color) as number | undefined;
+}
+
+function convert(color: ThemedColor | string): NitroColor;
+function convert(color?: ThemedColor | string): NitroColor | undefined;
+function convert(color?: ThemedColor | string): NitroColor | undefined {
+  if (color == null) {
+    return undefined;
+  }
+
+  if (typeof color === 'string') {
+    const convertedColor = convertColor(color);
+    return { darkColor: convertedColor, lightColor: convertedColor };
+  }
+
+  const darkColor = convertColor(color.darkColor);
+  const lightColor = convertColor(color.lightColor);
+
+  return {
+    darkColor,
+    lightColor,
+  };
+}
+
+export const NitroColorUtil = { convert };

package/src/utils/NitroGrid.ts

@@ -0,0 +1,25 @@
+import type { AutoImage } from '../types/Image';
+import type { AutoText } from '../types/Text';
+import { type NitroImage, NitroImageUtil } from './NitroImage';
+
+export type GridButton<T> = {
+  title: AutoText;
+  image: AutoImage;
+  onPress: (template: T) => void;
+};
+
+export type NitroGridButton = {
+  title: AutoText;
+  image: NitroImage;
+  onPress: () => void;
+};
+
+const convert = <T>(template: T, buttons: Array<GridButton<T>>) => {
+  return buttons.map<NitroGridButton>((button) => ({
+    title: button.title,
+    image: NitroImageUtil.convert(button.image),
+    onPress: () => button.onPress(template),
+  }));
+};
+
+export const NitroGridUtil = { convert };

package/src/utils/NitroImage.ts

@@ -0,0 +1,65 @@
+import { Image, type ImageResolvedAssetSource } from 'react-native';
+import { glyphMap } from '../types/Glyphmap';
+import type { AutoImage } from '../types/Image';
+import { type NitroColor, NitroColorUtil } from './NitroColor';
+
+interface AssetImage extends ImageResolvedAssetSource {
+  color?: NitroColor;
+  packager_asset: boolean;
+}
+
+interface GlyphImage {
+  glyph: number;
+  color: NitroColor;
+  backgroundColor: NitroColor;
+  fontScale?: number;
+}
+
+/**
+ * we need to map the ButtonImage.name from GlyphName to
+ * the actual numeric value so we need a nitro specific type
+ */
+export type NitroImage = GlyphImage | AssetImage;
+
+function convert(image: AutoImage): NitroImage;
+function convert(image?: AutoImage): NitroImage | undefined;
+function convert(image?: AutoImage): NitroImage | undefined {
+  if (image == null) {
+    return undefined;
+  }
+
+  if (image.type === 'glyph') {
+    const {
+      color = { darkColor: 'white', lightColor: 'black' },
+      fontScale,
+      name,
+      backgroundColor = 'transparent',
+    } = image;
+
+    return {
+      glyph: glyphMap[name],
+      color: NitroColorUtil.convert(color),
+      backgroundColor: NitroColorUtil.convert(backgroundColor),
+      fontScale,
+    };
+  }
+
+  // Image.resolveAssetSource is pretty terrible, it will simply return whatever object you pass it is not a number [require(...)]
+  // so the input allows all optional parameters which are returned as is even though
+  // the return type claims to not have any optional parameters...
+  // we specify some default values to not crash because of proper typing required by nitro-modules
+  const { height = 0, scale = 0, uri, width = 0, ...rest } = Image.resolveAssetSource(image.image);
+
+  const assetImage: AssetImage = {
+    height,
+    scale,
+    uri,
+    width,
+    packager_asset: '__packager_asset' in rest ? Boolean(rest.__packager_asset) : false,
+    color: NitroColorUtil.convert(image.color),
+  };
+
+  return assetImage;
+}
+
+export const NitroImageUtil = { convert };

package/src/utils/NitroManeuver.ts

@@ -0,0 +1,159 @@
+import {
+  type BaseManeuver,
+  type ForkType,
+  type KeepType,
+  type Lane,
+  type ManeuverImage,
+  ManeuverType,
+  type MessageManeuver,
+  type OffRampType,
+  type OnRampType,
+  type PreferredLane,
+  type RoutingManeuver,
+  type TurnType,
+} from '../types/Maneuver';
+import type { NitroAttributedString } from './NitroAttributedString';
+import { type NitroColor, NitroColorUtil } from './NitroColor';
+import { type NitroImage, NitroImageUtil } from './NitroImage';
+
+interface PreferredImageLane extends PreferredLane {
+  image: NitroImage;
+}
+
+interface ImageLane extends Lane {
+  image: NitroImage;
+}
+
+export interface LaneGuidance {
+  instructionVariants: Array<string>;
+  lanes: Array<PreferredImageLane | ImageLane>;
+}
+
+export interface NitroRoutingManeuver extends BaseManeuver {
+  attributedInstructionVariants: Array<NitroAttributedString>;
+  symbolImage: NitroImage;
+  junctionImage?: NitroImage;
+  turnType?: TurnType;
+  angle?: number;
+  elementAngles?: Array<number>;
+  exitNumber?: number;
+  offRampType?: OffRampType;
+  onRampType?: OnRampType;
+  forkType?: ForkType;
+  keepType?: KeepType;
+  linkedLaneGuidance?: LaneGuidance;
+  cardBackgroundColor: NitroColor;
+}
+
+export interface NitroMessageManeuver {
+  title: string;
+  text?: string;
+  image?: NitroImage;
+  cardBackgroundColor: NitroColor;
+}
+
+export type NitroManeuver = Array<NitroRoutingManeuver> | NitroMessageManeuver;
+
+function convertManeuverImage(image: ManeuverImage): NitroImage;
+function convertManeuverImage(image: ManeuverImage | undefined): NitroImage | undefined;
+function convertManeuverImage(image?: ManeuverImage): NitroImage | undefined {
+  if (image == null) {
+    return undefined;
+  }
+
+  if (image.type === 'glyph') {
+    const color =
+      typeof image.color === 'string'
+        ? image.color
+        : (image.color ?? { darkColor: 'white', lightColor: 'black' });
+    return NitroImageUtil.convert({
+      ...image,
+      color: color,
+    });
+  }
+
+  return NitroImageUtil.convert(image);
+}
+
+function convert(autoManeuver: MessageManeuver): NitroMessageManeuver;
+function convert(autoManeuver: RoutingManeuver): NitroRoutingManeuver;
+function convert(
+  autoManeuver: RoutingManeuver | MessageManeuver
+): NitroRoutingManeuver | NitroMessageManeuver {
+  if (autoManeuver.type === 'message') {
+    const { title, image, text } = autoManeuver;
+    return {
+      title,
+      text,
+      image: convertManeuverImage(image),
+      cardBackgroundColor: NitroColorUtil.convert(autoManeuver.cardBackgroundColor),
+    };
+  }
+
+  const {
+    symbolImage,
+    junctionImage,
+    attributedInstructionVariants,
+    id,
+    maneuverType,
+    trafficSide,
+    travelEstimates,
+    highwayExitLabel,
+    linkedLaneGuidance,
+    roadName,
+    cardBackgroundColor,
+  } = autoManeuver;
+
+  const elementAngles =
+    maneuverType === ManeuverType.Turn || maneuverType === ManeuverType.Roundabout
+      ? autoManeuver.elementAngles
+      : undefined;
+  const angle =
+    maneuverType === ManeuverType.Turn || maneuverType === ManeuverType.Roundabout
+      ? autoManeuver.angle
+      : undefined;
+  const turnType = maneuverType === ManeuverType.Turn ? autoManeuver.turnType : undefined;
+  const exitNumber = maneuverType === ManeuverType.Roundabout ? autoManeuver.exitNumber : undefined;
+  const offRampType = maneuverType === ManeuverType.OffRamp ? autoManeuver.offRampType : undefined;
+  const onRampType = maneuverType === ManeuverType.OnRamp ? autoManeuver.onRampType : undefined;
+  const forkType = maneuverType === ManeuverType.Fork ? autoManeuver.forkType : undefined;
+  const keepType = maneuverType === ManeuverType.Keep ? autoManeuver.keepType : undefined;
+
+  return {
+    id,
+    maneuverType,
+    trafficSide,
+    travelEstimates,
+    linkedLaneGuidance: linkedLaneGuidance
+      ? {
+          ...linkedLaneGuidance,
+          lanes: linkedLaneGuidance.lanes.map((lane) => ({
+            ...lane,
+            image: convertManeuverImage(lane.image),
+          })),
+        }
+      : undefined,
+    highwayExitLabel,
+    roadName,
+    attributedInstructionVariants: attributedInstructionVariants.map((variant) => ({
+      text: variant.text,
+      images: variant.images?.map(({ image, position }) => ({
+        image: convertManeuverImage(image),
+        position,
+      })),
+    })),
+    junctionImage: convertManeuverImage(junctionImage),
+    symbolImage: convertManeuverImage(symbolImage),
+    elementAngles,
+    angle,
+    turnType,
+    exitNumber,
+    offRampType,
+    onRampType,
+    forkType,
+    keepType,
+    cardBackgroundColor: NitroColorUtil.convert(cardBackgroundColor),
+  };
+}
+
+export const NitroManeuverUtil = { convert };

package/src/utils/NitroMapButton.ts

@@ -0,0 +1,55 @@
+import { Platform } from 'react-native';
+import type { MapButtons } from '../templates/MapTemplate';
+import { type NitroImage, NitroImageUtil } from './NitroImage';
+
+type NitroMapButtonType = 'pan' | 'custom';
+
+export type NitroMapButton = {
+  type: NitroMapButtonType;
+  image?: NitroImage;
+  onPress: () => void;
+};
+
+const convert = <T>(template: T, mapButtons?: MapButtons<T>): Array<NitroMapButton> | undefined => {
+  if (mapButtons == null) {
+    return undefined;
+  }
+
+  return mapButtons?.map<NitroMapButton>((button) => {
+    const { onPress, type } = button;
+
+    if (button.type === 'pan') {
+      if (Platform.OS === 'android') {
+        return { type: 'pan', onPress: () => onPress(template) };
+      }
+      throw new Error(
+        'unsupported platform, pan button can be used on Android only! Use a custom button instead.'
+      );
+    }
+
+    if (button.image.type === 'glyph') {
+      const backgroundColor =
+        Platform.OS === 'android'
+          ? 'transparent'
+          : 'backgroundColor' in button.image
+            ? button.image.backgroundColor
+            : 'transparent';
+
+      const fontScale = (button.image.fontScale ?? Platform.OS === 'android') ? 1.0 : 0.65;
+
+      return {
+        type,
+        onPress: () => onPress(template),
+        image: NitroImageUtil.convert({ ...button.image, backgroundColor, fontScale }),
+      };
+    }
+
+    return {
+      type,
+      onPress: () => onPress(template),
+      image: NitroImageUtil.convert(button.image),
+    };
+  });
+};
+
+export const NitroMapButton = { convert };