[SDK-143] improve-docs

.github/workflows/validate-docs.yml

@@ -0,0 +1,31 @@
+name: Validate Documentation
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+  merge_group:
+    types:
+      - checks_requested
+
+jobs:
+  validate-docs:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Fetch full history for proper git info
+
+      - name: Setup
+        uses: ./.github/actions/setup
+
+      - name: Validate documentation
+        run: yarn docs --validation --treatWarningsAsErrors --json /dev/null

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## 2.0.4
 
-## Updates
+### Updates
 - Added API documentation via Netlify([1087275](https://github.com/Iterable/react-native-sdk/commit/1087275))
 - Removed dependency on `react-native-vector-icons`, per issues
   [#513](https://github.com/Iterable/react-native-sdk/issues/513),

docs-static/expand-nav.js

@@ -0,0 +1,91 @@
+// Expand all navigation folders on page load
+(function () {
+  'use strict';
+
+  function expandAllNavigation() {
+    // Find all details elements in various navigation contexts
+    const selectors = [
+      '.tsd-navigation details',
+      '#tsd-nav-container details',
+      '.site-menu details',
+      '.tsd-accordion',
+      'nav details',
+    ];
+
+    let foundAny = false;
+    selectors.forEach((selector) => {
+      const elements = document.querySelectorAll(selector);
+      if (elements.length > 0) {
+        foundAny = true;
+        elements.forEach((el) => {
+          if (el.tagName === 'DETAILS') {
+            el.open = true;
+          }
+        });
+      }
+    });
+
+    return foundAny;
+  }
+
+  // Strategy 1: Try immediately
+  expandAllNavigation();
+
+  // Strategy 2: Hook into TypeDoc's app if available
+  let checkCount = 0;
+  const maxChecks = 50; // Check for up to 5 seconds
+
+  function checkAndExpand() {
+    checkCount++;
+
+    if (expandAllNavigation()) {
+      // Keep expanding even if found, in case more navigation loads
+      if (checkCount < maxChecks) {
+        setTimeout(checkAndExpand, 100);
+      }
+    } else if (checkCount < maxChecks) {
+      setTimeout(checkAndExpand, 100);
+    }
+  }
+
+  // Strategy 3: MutationObserver for dynamic content
+  // eslint-disable-next-line no-undef
+  const observer = new MutationObserver(() => {
+    expandAllNavigation();
+  });
+
+  // Strategy 4: Multiple event listeners
+  window.addEventListener('load', () => {
+    expandAllNavigation();
+    checkAndExpand();
+
+    // Start observing after page load
+    const navContainer = document.querySelector(
+      '#tsd-nav-container, .site-menu'
+    );
+    if (navContainer) {
+      observer.observe(navContainer, {
+        childList: true,
+        subtree: true,
+      });
+    }
+  });
+
+  // Strategy 5: Check for TypeDoc's app initialization
+  if (window.app) {
+    expandAllNavigation();
+  } else {
+    Object.defineProperty(window, 'app', {
+      configurable: true,
+      set: function (value) {
+        delete window.app;
+        window.app = value;
+        setTimeout(expandAllNavigation, 100);
+        setTimeout(expandAllNavigation, 500);
+      },
+      get: function () {
+        return window._app;
+      },
+    });
+  }
+})();

package.json

@@ -99,8 +99,9 @@
     "react-test-renderer": "19.0.0",
     "release-it": "^17.10.0",
     "turbo": "^1.10.7",
-    "typedoc": "^0.28.13",
-    "typedoc-plugin-coverage": "^3.3.0",
+    "typedoc": "latest",
+    "typedoc-github-theme": "^0.3.1",
+    "typedoc-plugin-coverage": "^4.0.2",
     "typedoc-plugin-mermaid": "^1.12.0",
     "typescript": "^5.2.2"
   },

src/core/classes/Iterable.ts

@@ -57,8 +57,10 @@ export class Iterable {
 
   /**
    * Current configuration of the Iterable SDK
+   *
+   * @readonly
    */
-  static savedConfig: IterableConfig = new IterableConfig();
+  static savedConfig: Readonly<IterableConfig> = new IterableConfig();
 
   /**
    * In-app message manager for the current user.
@@ -488,7 +490,7 @@ export class Iterable {
   /**
    * Launch the application from the background in Android devices.
    *
-   * Android only.
+   * @group Android only.
    *
    * @example
    * ```typescript

src/core/classes/IterableConfig.ts

@@ -291,6 +291,8 @@ export class IterableConfig {
   /**
    * Android only feature: This controls whether the SDK should enforce encryption for all PII stored on disk.
    * By default, the SDK will not enforce encryption and may fallback to unencrypted storage in case the encryption fails.
+   *
+   * @group Android only.
    */
   encryptionEnforced = false;
 
@@ -301,8 +303,11 @@ export class IterableConfig {
    */
   toDict() {
     return {
+      /** The name of the Iterable push integration. */
       pushIntegrationName: this.pushIntegrationName,
+      /** Whether automatic push registration is enabled. */
       autoPushRegistration: this.autoPushRegistration,
+      /** The display interval between in-app messages (in seconds). */
       inAppDisplayInterval: this.inAppDisplayInterval,
       /**
        * A boolean indicating if a URL handler is present.
@@ -334,13 +339,22 @@ export class IterableConfig {
       authHandlerPresent: this.authHandler != undefined,
       /** The log level for the SDK. */
       logLevel: this.logLevel,
+      /** The number of seconds before JWT expiration to refresh the token. */
       expiringAuthTokenRefreshPeriod: this.expiringAuthTokenRefreshPeriod,
+      /** The array of allowed URL protocols that the SDK can handle. */
       allowedProtocols: this.allowedProtocols,
+      /**
+       * @deprecated Whether to use in-memory storage for in-app messages on Android.
+       */
       androidSdkUseInMemoryStorageForInApps:
         this.androidSdkUseInMemoryStorageForInApps,
+      /** Whether to use in-memory storage for in-app messages. */
       useInMemoryStorageForInApps: this.useInMemoryStorageForInApps,
+      /** The data region determining the data center and endpoints. */
       dataRegion: this.dataRegion,
+      /** The push platform to use for push notifications. */
       pushPlatform: this.pushPlatform,
+      /** Whether encryption is enforced for PII stored on disk (Android only). */
       encryptionEnforced: this.encryptionEnforced,
     };
   }

src/core/hooks/useAppStateListener.ts

@@ -7,6 +7,9 @@ import { AppState } from 'react-native';
  *
  * @returns The current app state.
  *
+ * @category Hooks
+ * @group Hooks
+ *
  * @example
  * ```typescript
  * const appState = useAppStateListener();

src/core/hooks/useDeviceOrientation.tsx

@@ -22,6 +22,9 @@ export interface IterableDeviceOrientation {
  *
  * @returns {IterableDeviceOrientation} An object containing the height, width, and a boolean `isPortrait` indicating if the device is in portrait mode.
  *
+ * @category Hooks
+ * @group Hooks
+ *
  * @example
  * const { height, width, isPortrait } = useDeviceOrientation();
  *

src/inbox/components/IterableInbox.tsx

@@ -1,5 +1,10 @@
 import { useIsFocused } from '@react-navigation/native';
-import { useEffect, useState } from 'react';
+import {
+  useEffect,
+  useState,
+  type PropsWithChildren,
+  type ReactElement,
+} from 'react';
 import {
   Animated,
   NativeEventEmitter,
@@ -161,6 +166,9 @@ export interface IterableInboxProps
  * It handles fetching messages, displaying them in a list, and showing individual message details.
  * It also manages the state of the inbox, including loading state, selected message, and visible message impressions.
  *
+ * @category React Components
+ * @group React Components
+ *
  * @example
  * ```tsx
  * const [visible, setVisible] = useState<boolean>(false);
@@ -186,15 +194,18 @@ export interface IterableInboxProps
  * )
  * ```
  */
-export const IterableInbox = ({
-  returnToInboxTrigger = true,
-  messageListItemLayout = () => null,
-  customizations = {} as IterableInboxCustomizations,
-  tabBarHeight = 80,
-  tabBarPadding = 20,
-  safeAreaMode = true,
-  showNavTitle = true,
-}: IterableInboxProps) => {
+export const IterableInbox = (
+  params: PropsWithChildren<IterableInboxProps>
+): ReactElement => {
+  const {
+    returnToInboxTrigger = true,
+    messageListItemLayout = () => null,
+    customizations = {} as IterableInboxCustomizations,
+    tabBarHeight = 80,
+    tabBarPadding = 20,
+    safeAreaMode = true,
+    showNavTitle = true,
+  } = params;
   const defaultInboxTitle = 'Inbox';
   const inboxDataModel = new IterableInboxDataModel();
 

src/inbox/types/IterableInboxCustomizations.ts

@@ -24,7 +24,7 @@ export interface IterableInboxCustomizations {
   noMessagesBody?: string;
 
   /**
-   * CThe container that holds the unread indicator.
+   * The container that holds the unread indicator.
    */
   unreadIndicatorContainer?: {
     /** The flex direction of the container.  */

src/index.tsx

@@ -39,12 +39,11 @@ export {
   IterableInboxMetadata,
   type IterableHtmlInAppContentRaw,
   type IterableInAppContent,
+  type IterableInAppMessageRaw,
 } from './inApp';
 export {
   IterableInbox,
   IterableInboxDataModel,
-  IterableInboxEmptyState,
-  IterableInboxMessageCell,
   type IterableInboxCustomizations,
   type IterableInboxEmptyStateProps,
   type IterableInboxImpressionRowInfo,

tsdoc.json

@@ -1,3 +1,5 @@
 {
-  "$schema": "https://developer.microsoft.com/json-schemas/tsdoc/v0/tsdoc.schema.json"
+  "$schema": "https://developer.microsoft.com/json-schemas/tsdoc/v0/tsdoc.schema.json",
+  "extends": ["typedoc/tsdoc.json", "typedoc-plugin-mermaid/tsdoc.json"],
+  "noStandardTags": false
 }