@octopus-community/react-native 1.0.0 → 1.0.3

package/lib/typescript/src/initialize.d.ts

@@ -1,4 +1,94 @@
 import type { UserProfileField } from './types/userProfileField';
+import type { ImageResolvedAssetSource } from 'react-native';
+import { type ParsedFontConfig } from './internals/fontParser';
+/**
+ * Color set for a specific appearance mode (light or dark).
+ */
+export interface OctopusColorSet {
+    /** Primary color set for branding (hex format: #FF6B35 or FF6B35) */
+    primary?: string;
+    /** Primary low contrast color (lighter variation of primary) (hex format: #FF6B35 or FF6B35) */
+    primaryLowContrast?: string;
+    /** High contrast variation of primary color (hex format: #FF6B35 or FF6B35) */
+    primaryHighContrast?: string;
+    /** Color for content displayed over the primary color (hex format: #FF6B35 or FF6B35) */
+    onPrimary?: string;
+}
+/**
+ * Font type options for unified cross-platform font configuration.
+ */
+export type OctopusFontType = 'serif' | 'monospace' | 'default';
+/**
+ * Font size configuration for different text types.
+ */
+export interface OctopusFontSize {
+    /** Font size in points (will be converted to platform-specific units) */
+    size?: number;
+}
+/**
+ * Font configuration for a specific text type.
+ */
+export interface OctopusTextStyle {
+    /** Font type: serif, monospace, or default (uses system default) */
+    fontType?: OctopusFontType;
+    /** Font size configuration */
+    fontSize?: OctopusFontSize;
+}
+/**
+ * Font configuration for customizing the Octopus UI typography.
+ */
+export interface OctopusFonts {
+    /**
+     * Unified font configuration for different text types.
+     */
+    textStyles?: {
+        /** Configuration for title1 text */
+        title1?: OctopusTextStyle;
+        /** Configuration for title2 text */
+        title2?: OctopusTextStyle;
+        /** Configuration for body1 text */
+        body1?: OctopusTextStyle;
+        /** Configuration for body2 text */
+        body2?: OctopusTextStyle;
+        /** Configuration for caption1 text */
+        caption1?: OctopusTextStyle;
+        /** Configuration for caption2 text */
+        caption2?: OctopusTextStyle;
+    };
+    /**
+     * Pre-processed font configuration for native platforms.
+     * This is automatically generated and should not be set manually.
+     */
+    parsedConfig?: ParsedFontConfig | null;
+}
+/**
+ * Theme configuration for customizing the Octopus UI appearance.
+ *
+ * Supports two approaches:
+ * 1. Single color set (backward compatible) - colors are applied to both light and dark modes
+ * 2. Dual mode colors - separate color sets for light and dark modes
+ */
+export interface OctopusTheme {
+    /**
+     * Color customization options.
+     *
+     * For backward compatibility, you can pass a single color set that will be used for both light and dark modes.
+     * For enhanced theming, you can pass separate color sets for light and dark modes.
+     */
+    colors?: OctopusColorSet | {
+        /** Colors for light mode */
+        light: OctopusColorSet;
+        /** Colors for dark mode */
+        dark: OctopusColorSet;
+    };
+    /** Font customization options */
+    fonts?: OctopusFonts;
+    /** Logo customization */
+    logo?: {
+        /** Local image resource - use Image.resolveAssetSource(require('./path/to/image.png')) */
+        image?: ImageResolvedAssetSource;
+    };
+}
 /**
  * Configuration params for initializing the Octopus SDK.
  */
@@ -19,6 +109,8 @@ export interface InitializeParams {
         /** Octopus-managed authentication mode */
         type: 'octopus';
     };
+    /** Optional theme customization for the Octopus UI */
+    theme?: OctopusTheme;
 }
 /**
  * Initializes the Octopus SDK with the provided configuration.

package/lib/typescript/src/initialize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"initialize.d.ts","sourceRoot":"","sources":["../../../src/initialize.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAEjE;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,+DAA+D;IAC/D,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,cAAc,EACV;QACE,6BAA6B;QAC7B,IAAI,EAAE,KAAK,CAAC;QACZ,iEAAiE;QACjE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;KACtC,GACD;QACE,0CAA0C;QAC1C,IAAI,EAAE,SAAS,CAAC;KACjB,CAAC;CACP;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,CAElE"}
+{"version":3,"file":"initialize.d.ts","sourceRoot":"","sources":["../../../src/initialize.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAG7D,OAAO,EAAmB,KAAK,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAEhF;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gGAAgG;IAChG,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,+EAA+E;IAC/E,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,yFAAyF;IACzF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,WAAW,GAAG,SAAS,CAAC;AAEhE;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,oEAAoE;IACpE,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,eAAe,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE;QACX,oCAAoC;QACpC,MAAM,CAAC,EAAE,gBAAgB,CAAC;QAC1B,oCAAoC;QACpC,MAAM,CAAC,EAAE,gBAAgB,CAAC;QAC1B,mCAAmC;QACnC,KAAK,CAAC,EAAE,gBAAgB,CAAC;QACzB,mCAAmC;QACnC,KAAK,CAAC,EAAE,gBAAgB,CAAC;QACzB,sCAAsC;QACtC,QAAQ,CAAC,EAAE,gBAAgB,CAAC;QAC5B,sCAAsC;QACtC,QAAQ,CAAC,EAAE,gBAAgB,CAAC;KAC7B,CAAC;IACF;;;OAGG;IACH,YAAY,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;CACxC;AAED;;;;;;GAMG;AACH,MAAM,WAAW,YAAY;IAC3B;;;;;OAKG;IACH,MAAM,CAAC,EACH,eAAe,GACf;QACE,4BAA4B;QAC5B,KAAK,EAAE,eAAe,CAAC;QACvB,2BAA2B;QAC3B,IAAI,EAAE,eAAe,CAAC;KACvB,CAAC;IACN,iCAAiC;IACjC,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE;QACL,0FAA0F;QAC1F,KAAK,CAAC,EAAE,wBAAwB,CAAC;KAClC,CAAC;CACH;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,+DAA+D;IAC/D,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,cAAc,EACV;QACE,6BAA6B;QAC7B,IAAI,EAAE,KAAK,CAAC;QACZ,iEAAiE;QACjE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;KACtC,GACD;QACE,0CAA0C;QAC1C,IAAI,EAAE,SAAS,CAAC;KACjB,CAAC;IACN,sDAAsD;IACtD,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,CA8BlE"}

package/lib/typescript/src/internals/colorSchemeManager.d.ts

@@ -0,0 +1,39 @@
+import type { OctopusTheme } from '../initialize';
+/**
+ * Internal color scheme manager that automatically handles appearance changes
+ * and updates the native modules accordingly.
+ */
+export declare class ColorSchemeManager {
+    private static instance;
+    private appearanceSubscription;
+    private appStateSubscription;
+    private constructor();
+    static getInstance(): ColorSchemeManager;
+    /**
+     * Set the current theme for color scheme management
+     * Note: This is kept for API compatibility but theme updates are not used
+     * when the Octopus UI is open since the React Native app is backgrounded.
+     */
+    setTheme(_theme: OctopusTheme | null): void;
+    /**
+     * Start listening to appearance changes and automatically update native modules
+     */
+    startListening(): void;
+    /**
+     * Stop listening to appearance changes
+     */
+    stopListening(): void;
+    /**
+     * Get the current color scheme
+     */
+    getCurrentColorScheme(): string | null | undefined;
+    /**
+     * Update the native modules with the current color scheme
+     * Note: This is only called when the app becomes active (foreground).
+     * When the Octopus UI is open, the React Native app is backgrounded,
+     * so theme updates are not possible during UI display.
+     */
+    private updateNativeColorScheme;
+}
+export declare const colorSchemeManager: ColorSchemeManager;
+//# sourceMappingURL=colorSchemeManager.d.ts.map

package/lib/typescript/src/internals/colorSchemeManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorSchemeManager.d.ts","sourceRoot":"","sources":["../../../../src/internals/colorSchemeManager.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAKlD;;;GAGG;AACH,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAqB;IAC5C,OAAO,CAAC,sBAAsB,CAAa;IAC3C,OAAO,CAAC,oBAAoB,CAAa;IAEzC,OAAO;IAEP,MAAM,CAAC,WAAW,IAAI,kBAAkB;IAOxC;;;;OAIG;IACH,QAAQ,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,GAAG,IAAI;IAK3C;;OAEG;IACH,cAAc,IAAI,IAAI;IAgCtB;;OAEG;IACH,aAAa,IAAI,IAAI;IAcrB;;OAEG;IACH,qBAAqB,IAAI,MAAM,GAAG,IAAI,GAAG,SAAS;IAIlD;;;;;OAKG;IACH,OAAO,CAAC,uBAAuB;CAShC;AAGD,eAAO,MAAM,kBAAkB,oBAAmC,CAAC"}

package/lib/typescript/src/internals/fontParser.d.ts

@@ -0,0 +1,18 @@
+import type { OctopusFonts } from '../initialize';
+/**
+ * Parsed font configuration for native platforms
+ */
+export interface ParsedFontConfig {
+    textStyles: Record<string, {
+        fontType?: string;
+        fontSize?: number;
+    }>;
+}
+/**
+ * Parse font configuration from the theme and return a simplified structure
+ * that can be easily consumed by native platforms.
+ *
+ * This centralizes the font parsing logic to avoid duplication across platforms.
+ */
+export declare function parseFontConfig(fonts?: OctopusFonts): ParsedFontConfig | null;
+//# sourceMappingURL=fontParser.d.ts.map

package/lib/typescript/src/internals/fontParser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fontParser.d.ts","sourceRoot":"","sources":["../../../../src/internals/fontParser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,MAAM,CAChB,MAAM,EACN;QACE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CACF,CAAC;CACH;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,CAAC,EAAE,YAAY,GAAG,gBAAgB,GAAG,IAAI,CA0C7E"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octopus-community/react-native",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "React Native module for the Octopus Community SDK",
   "source": "./src/index.ts",
   "main": "./lib/module/index.js",

package/src/initialize.ts

@@ -1,5 +1,105 @@
 import { OctopusReactNativeSdk } from './internals/nativeModule';
 import type { UserProfileField } from './types/userProfileField';
+import type { ImageResolvedAssetSource } from 'react-native';
+import { Appearance } from 'react-native';
+import { colorSchemeManager } from './internals/colorSchemeManager';
+import { parseFontConfig, type ParsedFontConfig } from './internals/fontParser';
+
+/**
+ * Color set for a specific appearance mode (light or dark).
+ */
+export interface OctopusColorSet {
+  /** Primary color set for branding (hex format: #FF6B35 or FF6B35) */
+  primary?: string;
+  /** Primary low contrast color (lighter variation of primary) (hex format: #FF6B35 or FF6B35) */
+  primaryLowContrast?: string;
+  /** High contrast variation of primary color (hex format: #FF6B35 or FF6B35) */
+  primaryHighContrast?: string;
+  /** Color for content displayed over the primary color (hex format: #FF6B35 or FF6B35) */
+  onPrimary?: string;
+}
+
+/**
+ * Font type options for unified cross-platform font configuration.
+ */
+export type OctopusFontType = 'serif' | 'monospace' | 'default';
+
+/**
+ * Font size configuration for different text types.
+ */
+export interface OctopusFontSize {
+  /** Font size in points (will be converted to platform-specific units) */
+  size?: number;
+}
+
+/**
+ * Font configuration for a specific text type.
+ */
+export interface OctopusTextStyle {
+  /** Font type: serif, monospace, or default (uses system default) */
+  fontType?: OctopusFontType;
+  /** Font size configuration */
+  fontSize?: OctopusFontSize;
+}
+
+/**
+ * Font configuration for customizing the Octopus UI typography.
+ */
+export interface OctopusFonts {
+  /**
+   * Unified font configuration for different text types.
+   */
+  textStyles?: {
+    /** Configuration for title1 text */
+    title1?: OctopusTextStyle;
+    /** Configuration for title2 text */
+    title2?: OctopusTextStyle;
+    /** Configuration for body1 text */
+    body1?: OctopusTextStyle;
+    /** Configuration for body2 text */
+    body2?: OctopusTextStyle;
+    /** Configuration for caption1 text */
+    caption1?: OctopusTextStyle;
+    /** Configuration for caption2 text */
+    caption2?: OctopusTextStyle;
+  };
+  /**
+   * Pre-processed font configuration for native platforms.
+   * This is automatically generated and should not be set manually.
+   */
+  parsedConfig?: ParsedFontConfig | null;
+}
+
+/**
+ * Theme configuration for customizing the Octopus UI appearance.
+ *
+ * Supports two approaches:
+ * 1. Single color set (backward compatible) - colors are applied to both light and dark modes
+ * 2. Dual mode colors - separate color sets for light and dark modes
+ */
+export interface OctopusTheme {
+  /**
+   * Color customization options.
+   *
+   * For backward compatibility, you can pass a single color set that will be used for both light and dark modes.
+   * For enhanced theming, you can pass separate color sets for light and dark modes.
+   */
+  colors?:
+    | OctopusColorSet
+    | {
+        /** Colors for light mode */
+        light: OctopusColorSet;
+        /** Colors for dark mode */
+        dark: OctopusColorSet;
+      };
+  /** Font customization options */
+  fonts?: OctopusFonts;
+  /** Logo customization */
+  logo?: {
+    /** Local image resource - use Image.resolveAssetSource(require('./path/to/image.png')) */
+    image?: ImageResolvedAssetSource;
+  };
+}
 
 /**
  * Configuration params for initializing the Octopus SDK.
@@ -23,6 +123,8 @@ export interface InitializeParams {
         /** Octopus-managed authentication mode */
         type: 'octopus';
       };
+  /** Optional theme customization for the Octopus UI */
+  theme?: OctopusTheme;
 }
 
 /**
@@ -52,5 +154,33 @@ export interface InitializeParams {
  * ```
  */
 export function initialize(params: InitializeParams): Promise<void> {
-  return OctopusReactNativeSdk.initialize(params);
+  // Automatically detect the current color scheme and add it to the params
+  const colorScheme = Appearance.getColorScheme();
+
+  // Pre-process font configuration to avoid duplication in native layers
+  const processedTheme = params.theme
+    ? {
+        ...params.theme,
+        fonts: params.theme.fonts
+          ? {
+              ...params.theme.fonts,
+              parsedConfig: parseFontConfig(params.theme.fonts),
+            }
+          : undefined,
+      }
+    : undefined;
+
+  const paramsWithColorScheme = {
+    ...params,
+    theme: processedTheme,
+    colorScheme: colorScheme || undefined,
+  };
+
+  // Set the theme in the color scheme manager for dual-mode support
+  colorSchemeManager.setTheme(processedTheme || null);
+
+  // Start listening to color scheme changes for automatic updates
+  colorSchemeManager.startListening();
+
+  return OctopusReactNativeSdk.initialize(paramsWithColorScheme);
 }

package/src/internals/colorSchemeManager.ts

@@ -0,0 +1,113 @@
+import { Appearance, AppState } from 'react-native';
+import { OctopusReactNativeSdk } from './nativeModule';
+import type { OctopusTheme } from '../initialize';
+
+let isListening = false;
+let currentColorScheme: string | null | undefined = null;
+
+/**
+ * Internal color scheme manager that automatically handles appearance changes
+ * and updates the native modules accordingly.
+ */
+export class ColorSchemeManager {
+  private static instance: ColorSchemeManager;
+  private appearanceSubscription: any = null;
+  private appStateSubscription: any = null;
+
+  private constructor() {}
+
+  static getInstance(): ColorSchemeManager {
+    if (!ColorSchemeManager.instance) {
+      ColorSchemeManager.instance = new ColorSchemeManager();
+    }
+    return ColorSchemeManager.instance;
+  }
+
+  /**
+   * Set the current theme for color scheme management
+   * Note: This is kept for API compatibility but theme updates are not used
+   * when the Octopus UI is open since the React Native app is backgrounded.
+   */
+  setTheme(_theme: OctopusTheme | null): void {
+    // Theme is set during initialization and applied when UI opens
+    // No need to store it here since updates can't happen while UI is open
+  }
+
+  /**
+   * Start listening to appearance changes and automatically update native modules
+   */
+  startListening(): void {
+    if (isListening) {
+      return;
+    }
+
+    isListening = true;
+    currentColorScheme = Appearance.getColorScheme();
+
+    // Listen to appearance changes
+    this.appearanceSubscription = Appearance.addChangeListener(
+      ({ colorScheme }) => {
+        currentColorScheme = colorScheme;
+        this.updateNativeColorScheme();
+      }
+    );
+
+    // Listen to app state changes to ensure we have the latest color scheme
+    this.appStateSubscription = AppState.addEventListener(
+      'change',
+      (nextAppState) => {
+        // Only check color scheme when app becomes active (foreground)
+        if (nextAppState === 'active') {
+          const newColorScheme = Appearance.getColorScheme();
+          if (newColorScheme !== currentColorScheme) {
+            currentColorScheme = newColorScheme;
+            this.updateNativeColorScheme();
+          }
+        }
+      }
+    );
+  }
+
+  /**
+   * Stop listening to appearance changes
+   */
+  stopListening(): void {
+    if (this.appearanceSubscription) {
+      this.appearanceSubscription.remove();
+      this.appearanceSubscription = null;
+    }
+
+    if (this.appStateSubscription) {
+      this.appStateSubscription.remove();
+      this.appStateSubscription = null;
+    }
+
+    isListening = false;
+  }
+
+  /**
+   * Get the current color scheme
+   */
+  getCurrentColorScheme(): string | null | undefined {
+    return currentColorScheme;
+  }
+
+  /**
+   * Update the native modules with the current color scheme
+   * Note: This is only called when the app becomes active (foreground).
+   * When the Octopus UI is open, the React Native app is backgrounded,
+   * so theme updates are not possible during UI display.
+   */
+  private updateNativeColorScheme(): void {
+    // Both platforms handle theme updates when the app becomes active
+    // iOS uses adaptive colors, Android applies the theme when UI reopens
+    try {
+      OctopusReactNativeSdk.updateColorScheme(currentColorScheme || undefined);
+    } catch (error) {
+      this.stopListening();
+    }
+  }
+}
+
+// Export singleton instance
+export const colorSchemeManager = ColorSchemeManager.getInstance();

package/src/internals/fontParser.ts

@@ -0,0 +1,64 @@
+import type { OctopusFonts } from '../initialize';
+
+/**
+ * Parsed font configuration for native platforms
+ */
+export interface ParsedFontConfig {
+  textStyles: Record<
+    string,
+    {
+      fontType?: string;
+      fontSize?: number;
+    }
+  >;
+}
+
+/**
+ * Parse font configuration from the theme and return a simplified structure
+ * that can be easily consumed by native platforms.
+ *
+ * This centralizes the font parsing logic to avoid duplication across platforms.
+ */
+export function parseFontConfig(fonts?: OctopusFonts): ParsedFontConfig | null {
+  if (!fonts?.textStyles) {
+    return null;
+  }
+
+  const textStyles: Record<string, { fontType?: string; fontSize?: number }> =
+    {};
+
+  // Define the text style keys that are supported
+  const supportedTextStyles = [
+    'title1',
+    'title2',
+    'body1',
+    'body2',
+    'caption1',
+    'caption2',
+  ];
+
+  for (const key of supportedTextStyles) {
+    const textStyle = fonts.textStyles[key as keyof typeof fonts.textStyles];
+    if (textStyle) {
+      const parsedStyle: { fontType?: string; fontSize?: number } = {};
+
+      // Parse font type
+      if (textStyle.fontType) {
+        parsedStyle.fontType = textStyle.fontType;
+      }
+
+      // Parse font size
+      if (textStyle.fontSize?.size) {
+        parsedStyle.fontSize = textStyle.fontSize.size;
+      }
+
+      // Only include the style if it has at least one property
+      if (parsedStyle.fontType || parsedStyle.fontSize) {
+        textStyles[key] = parsedStyle;
+      }
+    }
+  }
+
+  // Return null if no text styles were parsed
+  return Object.keys(textStyles).length > 0 ? { textStyles } : null;
+}