feat: add typedoc validation and refactor component to include PropsWithChildren

Author: lposen

lefthook.yml

@@ -3,15 +3,17 @@ pre-commit:
   commands:
     lint:
       glob: "*.{js,ts,jsx,tsx}"
-      run: npx eslint {staged_files}
+      run: yarn eslint {staged_files}
     types:
       glob: "*.{js,ts,jsx,tsx}"
-      run: npx tsc
+      run: yarn typecheck
+    typedoc-validation:
+      run: yarn docs --validation
     # version-check:
     #   glob: "package.json"
     #   run: node scripts/checkVersionAndUpdateBuildInfo.js
 commit-msg:
   parallel: true
   commands:
     commitlint:
-      run: npx commitlint --edit
+      run: yarn commitlint --edit

package.json

@@ -40,6 +40,8 @@
     "test:coverage": "jest --coverage",
     "typecheck": "tsc",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "eslint": "eslint",
+    "commitlint": "commitlint",
     "docs": "typedoc",
     "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
     "prebuild": "yarn add_build_info",

src/inbox/components/HeaderBackButton.tsx

@@ -1,3 +1,4 @@
+import type { PropsWithChildren, ReactElement } from 'react';
 import {
   Image,
   PixelRatio,
@@ -73,7 +74,7 @@ export const HeaderBackButton = ({
     height: PixelRatio.getPixelSizeForLayoutSize(ICON_SIZE),
   },
   ...props
-}: HeaderBackButtonProps) => {
+}: PropsWithChildren<HeaderBackButtonProps>): ReactElement => {
   return (
     <TouchableWithoutFeedback {...props}>
       <View style={styles.returnButton}>

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,
@@ -32,7 +37,6 @@ import {
   type IterableInboxMessageListProps,
 } from './IterableInboxMessageList';
 
-
 const RNEventEmitter = new NativeEventEmitter(RNIterableAPI);
 
 const DEFAULT_HEADLINE_HEIGHT = 60;
@@ -186,7 +190,9 @@ export interface IterableInboxProps
  * )
  * ```
  */
-export const IterableInbox = (params: IterableInboxProps) => {
+export const IterableInbox = (
+  params: PropsWithChildren<IterableInboxProps>
+): ReactElement => {
   const {
     returnToInboxTrigger = true,
     messageListItemLayout = () => null,

src/inbox/components/IterableInboxEmptyState.tsx

@@ -1,4 +1,5 @@
 import { StyleSheet, Text, View } from 'react-native';
+import type { PropsWithChildren, ReactElement } from 'react';
 
 import { type IterableInboxCustomizations } from '../types';
 import { ITERABLE_INBOX_COLORS } from '../constants';
@@ -26,7 +27,9 @@ export interface IterableInboxEmptyStateProps {
 /**
  * A functional component that renders an empty state for the inbox when there are no messages.
  */
-export const IterableInboxEmptyState = (params: IterableInboxEmptyStateProps) => {
+export const IterableInboxEmptyState = (
+  params: PropsWithChildren<IterableInboxEmptyStateProps>
+): ReactElement => {
   const {
     customizations,
     tabBarHeight,

src/inbox/components/IterableInboxMessageCell.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useRef, type PropsWithChildren, type ReactElement } from 'react';
 import {
   Animated,
   Image,
@@ -280,7 +280,9 @@ export interface IterableInboxMessageCellProps {
 /**
  * Component which renders a single message cell in the Iterable inbox.
  */
-export const IterableInboxMessageCell = (params: IterableInboxMessageCellProps) => {
+export const IterableInboxMessageCell = (
+  params: PropsWithChildren<IterableInboxMessageCellProps>
+): ReactElement => {
   const {
     index,
     last,

src/inbox/components/IterableInboxMessageDisplay.tsx

@@ -1,4 +1,9 @@
-import { useEffect, useState } from 'react';
+import {
+  useEffect,
+  useState,
+  type PropsWithChildren,
+  type ReactElement,
+} from 'react';
 import {
   Linking,
   Platform,
@@ -73,7 +78,7 @@ export const IterableInboxMessageDisplay = ({
   deleteRow,
   contentWidth,
   isPortrait,
-}: IterableInboxMessageDisplayProps) => {
+}: PropsWithChildren<IterableInboxMessageDisplayProps>): ReactElement => {
   const messageTitle = rowViewModel.inAppMessage.inboxMetadata?.title;
   const [inAppContent, setInAppContent] =
     useState<IterableHtmlInAppContent | null>(null);
@@ -85,7 +90,7 @@ export const IterableInboxMessageDisplay = ({
 
     header: {
       flexDirection: 'row',
-      height:  Platform.OS === 'ios' ? 44 : 56,
+      height: Platform.OS === 'ios' ? 44 : 56,
       justifyContent: 'center',
       width: '100%',
     },

src/inbox/components/IterableInboxMessageList.tsx

@@ -1,4 +1,10 @@
-import { useCallback, useRef, useState } from 'react';
+import {
+  useCallback,
+  useRef,
+  useState,
+  type PropsWithChildren,
+  type ReactElement,
+} from 'react';
 import { type ViewabilityConfig, type ViewToken, FlatList } from 'react-native';
 
 import { IterableInAppMessage } from '../../inApp';
@@ -65,7 +71,7 @@ export const IterableInboxMessageList = ({
   updateVisibleMessageImpressions,
   contentWidth,
   isPortrait,
-}: IterableInboxMessageListProps) => {
+}: PropsWithChildren<IterableInboxMessageListProps>): ReactElement => {
   const [swiping, setSwiping] = useState<boolean>(false);
   const flatListRef = useRef<FlatList>(null);
 

src/index.tsx

@@ -61,8 +61,6 @@ export {
 export {
   IterableInbox,
   IterableInboxDataModel,
-  IterableInboxEmptyState,
-  IterableInboxMessageCell,
   type IterableInboxCustomizations,
   type IterableInboxEmptyStateProps,
   type IterableInboxImpressionRowInfo,

tsdoc.json

@@ -1,28 +1,6 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/tsdoc/v0/tsdoc.schema.json",
   "tagDefinitions": [
-    {
-      "tagName": "@param",
-      "syntaxKind": "block",
-      "allowMultiple": true
-    },
-    {
-      "tagName": "@returns",
-      "syntaxKind": "block"
-    },
-    {
-      "tagName": "@remarks",
-      "syntaxKind": "block"
-    },
-    {
-      "tagName": "@example",
-      "syntaxKind": "block",
-      "allowMultiple": true
-    },
-    {
-      "tagName": "@link",
-      "syntaxKind": "inline"
-    },
     {
       "tagName": "@os",
       "syntaxKind": "block"
@@ -35,15 +13,5 @@
       "tagName": "@mermaid",
       "syntaxKind": "block"
     }
-  ],
-  "supportForTags": {
-    "@remarks": true,
-    "@returns": true,
-    "@example": true,
-    "@link": true,
-    "@param": true,
-    "@includeCode": true,
-    "@mermaid": true,
-    "@os": true
-  }
+  ]
 }