docs: enhance IterableEmbedded components with documentation

Author: lposen

src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx

@@ -18,6 +18,26 @@ import {
   IMAGE_WIDTH,
 } from './IterableEmbeddedBanner.styles';
 
+/**
+ *
+ * @param config - The config for the IterableEmbeddedBanner component.
+ * @param message - The message to render.
+ * @param onButtonClick - The function to call when a button is clicked.
+ * @param onMessageClick - The function to call when the message is clicked.
+ * @returns The IterableEmbeddedBanner component.
+ *
+ * @example
+ * ```tsx
+ * return (
+ *   <IterableEmbeddedBanner
+ *     config={config}
+ *     message={message}
+ *     onButtonClick={onButtonClick}
+ *     onMessageClick={onMessageClick}
+ *   />
+ * );
+ * ```
+ */
 export const IterableEmbeddedBanner = ({
   config,
   message,

src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.tsx

@@ -15,6 +15,26 @@ import { useEmbeddedView } from '../../hooks/useEmbeddedView';
 import type { IterableEmbeddedComponentProps } from '../../types/IterableEmbeddedComponentProps';
 import { IMAGE_HEIGHT, styles } from './IterableEmbeddedCard.styles';
 
+/**
+ *
+ * @param config - The config for the IterableEmbeddedCard component.
+ * @param message - The message to render.
+ * @param onButtonClick - The function to call when a button is clicked.
+ * @param onMessageClick - The function to call when the message is clicked.
+ * @returns The IterableEmbeddedCard component.
+ *
+ * @example
+ * ```tsx
+ * return (
+ *   <IterableEmbeddedCard
+ *     config={config}
+ *     message={message}
+ *     onButtonClick={onButtonClick}
+ *     onMessageClick={onMessageClick}
+ *   />
+ * );
+ * ```
+ */
 export const IterableEmbeddedCard = ({
   config,
   message,

src/embedded/components/IterableEmbeddedNotification/IterableEmbeddedNotification.tsx

@@ -12,6 +12,26 @@ import { useEmbeddedView } from '../../hooks/useEmbeddedView';
 import type { IterableEmbeddedComponentProps } from '../../types/IterableEmbeddedComponentProps';
 import { styles } from './IterableEmbeddedNotification.styles';
 
+/**
+ *
+ * @param config - The config for the IterableEmbeddedNotification component.
+ * @param message - The message to render.
+ * @param onButtonClick - The function to call when a button is clicked.
+ * @param onMessageClick - The function to call when the message is clicked.
+ * @returns The IterableEmbeddedNotification component.
+ *
+ * @example
+ * ```tsx
+ * return (
+ *   <IterableEmbeddedNotification
+ *     config={config}
+ *     message={message}
+ *     onButtonClick={onButtonClick}
+ *     onMessageClick={onMessageClick}
+ *   />
+ * );
+ * ```
+ */
 export const IterableEmbeddedNotification = ({
   config,
   message,

src/embedded/components/IterableEmbeddedView.tsx

@@ -9,7 +9,7 @@ import { IterableEmbeddedNotification } from './IterableEmbeddedNotification';
 /**
  * The props for the IterableEmbeddedView component.
  */
-interface IterableEmbeddedViewProps extends IterableEmbeddedComponentProps {
+export interface IterableEmbeddedViewProps extends IterableEmbeddedComponentProps {
   /** The type of view to render. */
   viewType: IterableEmbeddedViewType;
 }
@@ -20,10 +20,62 @@ interface IterableEmbeddedViewProps extends IterableEmbeddedComponentProps {
  * @param message - The message to render.
  * @param config - The config for the IterableEmbeddedView component, most likely used to style the view.
  * @param onButtonClick - The function to call when a button is clicked.
+ * @param onMessageClick - The function to call when the message is clicked.
  * @returns The IterableEmbeddedView component.
  *
  * This component is used to render pre-created, customizable message displays
  * included with Iterables RN SDK: cards, banners, and notifications.
+ *
+ * @example
+ * ```tsx
+ * // See `IterableEmbeddedViewType`` for available view types.
+ * const viewType = IterableEmbeddedViewType.Card;
+ *
+ * // The message object that will be rendered.
+ * // You can retrieve  messages by calling `Iterable.embeddedManager.getMessages(IDS)`
+ * const message = {
+ *   metadata: {
+ *     messageId: 'test-message-123',
+ *     campaignId: 123456,
+ *     placementId: 'test-placement',
+ *   },
+ *   elements: {
+ *     title: 'Test Title',
+ *     body: 'Test Body',
+ *     buttons: [
+ *       { id: 'button-1', label: 'Button 1', action: 'button-1-action' },
+ *       { id: 'button-2', label: 'Button 2', action: 'button-2-action' },
+ *     ],
+ *   },
+ * };
+ *
+ * // The config for the IterableEmbeddedView component, most likely used to style the view.
+ * // See `IterableEmbeddedViewConfig` for available config options.
+ * const config = { backgroundColor: '#FFFFFF', borderRadius: 8 };
+ *
+ * // A callback that will be called when a button is clicked.
+ * // General click handling is handled by the SDK; This is only for custom logic.
+ * const onButtonClick = () => {
+ *   console.log('Button clicked');
+ * };
+ *
+ * // A callback that will be called when the message is clicked.
+ * // This is not called when a button is clicked.
+ * // If a default action is set, this is what will be called.
+ * const onMessageClick = () => {
+ *   console.log('Message clicked');
+ * };
+ *
+ * return (
+ *   <IterableEmbeddedView
+ *     viewType={viewType}
+ *     message={message}
+ *     config={config}
+ *     onButtonClick={onButtonClick}
+ *     onMessageClick={onMessageClick}
+ *   />
+ * );
+ * ```
  */
 export const IterableEmbeddedView = ({
   viewType,

src/embedded/hooks/useEmbeddedView/getMedia.ts

@@ -10,10 +10,12 @@ import { IterableEmbeddedViewType } from '../../enums';
  * @returns The media to render.
  *
  * @example
+ * ```ts
  * const media = getMedia(IterableEmbeddedViewType.Notification, message);
  * console.log(media.url);
  * console.log(media.caption);
  * console.log(media.shouldShow ? 'true' : 'false');
+ * ```
  */
 export const getMedia = (
   /** The type of view to render. */

src/embedded/hooks/useEmbeddedView/getStyles.ts

@@ -37,6 +37,7 @@ const getDefaultStyle = <T>(
  * @returns The styles.
  *
  * @example
+ * ```ts
  * const styles = getStyles(IterableEmbeddedViewType.Notification, {
  *   backgroundColor: '#000000',
  *   borderColor: '#000000',
@@ -45,6 +46,7 @@ const getDefaultStyle = <T>(
  *   primaryBtnBackgroundColor: '#000000',
  *   primaryBtnTextColor: '#000000',
  * });
+ * ```
  */
 export const getStyles = (
   viewType: IterableEmbeddedViewType,

src/embedded/hooks/useEmbeddedView/useEmbeddedView.ts

@@ -16,6 +16,7 @@ const noop = () => {};
  * @returns The embedded view.
  *
  * @example
+ * ```tsx
  * const { handleButtonClick, handleMessageClick, media, parsedStyles } = useEmbeddedView(IterableEmbeddedViewType.Notification, {
  *   message,
  *   config,
@@ -30,6 +31,7 @@ const noop = () => {};
  *     <Text>{parsedStyles.backgroundColor}</Text>
  *   </View>
  * );
+ * ```
  */
 export const useEmbeddedView = (
   /** The type of view to render. */

src/index.tsx

@@ -42,6 +42,7 @@ export {
   type IterableEmbeddedMessageElementsButton,
   type IterableEmbeddedMessageElementsText,
   type IterableEmbeddedViewConfig,
+  type IterableEmbeddedViewProps,
 } from './embedded';
 export {
   IterableHtmlInAppContent,