@rematter/pylon-react-native 0.1.4

package/src/PylonChatWidget.ios.tsx

@@ -0,0 +1,79 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} from "react";
+import { StyleSheet } from "react-native";
+import type {
+  PylonChatViewInternalRef,
+  PylonChatViewRef,
+} from "./PylonChatView";
+import { PylonChatView } from "./PylonChatView";
+import type { PylonChatWidgetProps } from "./PylonChatWidget";
+
+/**
+ * iOS implementation - simple passthrough.
+ *
+ * iOS uses native hitTest for touch pass-through, so no proxy logic needed.
+ *
+ * State Management:
+ * - State lives entirely in native layer (no React state needed for iOS)
+ * - Imperative methods call native, which handles everything
+ * - Events are simply forwarded to user's listener
+ */
+export const PylonChatWidget = forwardRef<
+  PylonChatViewRef,
+  PylonChatWidgetProps
+>(({ config, user, listener, style, topInset }, ref) => {
+  // Internal ref - typed as any since iOS doesn't need clickElementAtSelector.
+  const chatRef = useRef<PylonChatViewInternalRef>(null);
+
+  // Forward ref methods - all state managed in native layer
+  useImperativeHandle(ref, () => ({
+    openChat: () => chatRef.current?.openChat(),
+    closeChat: () => chatRef.current?.closeChat(),
+    showChatBubble: () => chatRef.current?.showChatBubble(),
+    hideChatBubble: () => chatRef.current?.hideChatBubble(),
+    showNewMessage: (message: string, isHtml?: boolean) =>
+      chatRef.current?.showNewMessage(message, isHtml),
+    setNewIssueCustomFields: (fields: Record<string, any>) =>
+      chatRef.current?.setNewIssueCustomFields(fields),
+    setTicketFormFields: (fields: Record<string, any>) =>
+      chatRef.current?.setTicketFormFields(fields),
+    updateEmailHash: (emailHash: string | null) =>
+      chatRef.current?.updateEmailHash(emailHash),
+    showTicketForm: (slug: string) => chatRef.current?.showTicketForm(slug),
+    showKnowledgeBaseArticle: (articleId: string) =>
+      chatRef.current?.showKnowledgeBaseArticle(articleId),
+  }));
+
+  // Event handlers - forward to user's listener
+  const handleChatOpened = useCallback(() => {
+    listener?.onChatOpened?.();
+  }, [listener]);
+
+  const handleChatClosed = useCallback(
+    (wasOpen: boolean) => {
+      listener?.onChatClosed?.(wasOpen);
+    },
+    [listener]
+  );
+
+  return (
+    <PylonChatView
+      ref={chatRef}
+      style={style || StyleSheet.absoluteFillObject}
+      config={config}
+      user={user}
+      topInset={topInset}
+      listener={{
+        ...listener,
+        onChatOpened: handleChatOpened,
+        onChatClosed: handleChatClosed,
+      }}
+    />
+  );
+});
+
+PylonChatWidget.displayName = "PylonChatWidget";

package/src/PylonModule.ts

@@ -0,0 +1,52 @@
+import type { PylonConfig, PylonUser } from "./types";
+
+/**
+ * Pylon SDK - Singleton for managing global configuration.
+ *
+ * Note: This is optional - you can also pass config directly to PylonChatView.
+ * This singleton is useful if you want to initialize once and reuse across multiple views.
+ */
+export class Pylon {
+  private static instance: Pylon;
+  private _config?: PylonConfig;
+  private _user?: PylonUser;
+
+  private constructor() {}
+
+  static get shared(): Pylon {
+    if (!Pylon.instance) {
+      Pylon.instance = new Pylon();
+    }
+    return Pylon.instance;
+  }
+
+  /**
+   * Initialize the Pylon SDK with configuration.
+   */
+  initialize(config: PylonConfig): void {
+    this._config = config;
+  }
+
+  /**
+   * Set the current user for the chat.
+   */
+  setUser(user: PylonUser): void {
+    this._user = user;
+  }
+
+  /**
+   * Get the current configuration.
+   */
+  get config(): PylonConfig | undefined {
+    return this._config;
+  }
+
+  /**
+   * Get the current user.
+   */
+  get user(): PylonUser | undefined {
+    return this._user;
+  }
+}
+
+export default Pylon.shared;

package/src/index.ts

@@ -0,0 +1,15 @@
+export { PylonChatView } from "./PylonChatView";
+export type {
+  PylonChatViewRef,
+  PylonChatViewInternalRef,
+} from "./PylonChatView";
+// React Native will automatically resolve to .ios.tsx or .android.tsx at runtime
+// TypeScript just needs to find the types from one of them
+export { PylonChatWidget } from "./PylonChatWidget";
+export { Pylon, default as PylonSDK } from "./PylonModule";
+export type {
+  InteractiveBound,
+  PylonChatListener,
+  PylonConfig,
+  PylonUser,
+} from "./types";

package/src/types.ts

@@ -0,0 +1,37 @@
+export interface PylonConfig {
+  appId: string;
+  enableLogging?: boolean;
+  primaryColor?: string;
+  debugMode?: boolean;
+  widgetBaseUrl?: string;
+  widgetScriptUrl?: string;
+}
+
+export interface PylonUser {
+  email: string;
+  name: string;
+  avatarUrl?: string;
+  emailHash?: string;
+  accountId?: string;
+  accountExternalId?: string;
+}
+
+export interface InteractiveBound {
+  selector: string;
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+}
+
+export interface PylonChatListener {
+  onPylonLoaded?: () => void;
+  onPylonInitialized?: () => void;
+  onPylonReady?: () => void;
+  onMessageReceived?: (message: string) => void;
+  onChatOpened?: () => void;
+  onChatClosed?: (wasOpen: boolean) => void;
+  onPylonError?: (error: string) => void;
+  onUnreadCountChanged?: (count: number) => void;
+  onInteractiveBoundsChanged?: (bounds: InteractiveBound) => void;
+}