npm - @elliemae/pui-app-sdk - Versions diffs - 5.36.0 → 5.36.2 - Mend

@elliemae/pui-app-sdk 5.36.0 → 5.36.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (190) hide show

package/build/docs/api/variables/decorators/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
 <meta charset="UTF-8">
 <meta name="generator" content="Docusaurus v3.9.2">
 <title data-rh="true">decorators | App SDK</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pui.ice.com/app-sdk/api/variables/decorators"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="decorators | App SDK"><meta data-rh="true" name="description" content="Type Declaration"><meta data-rh="true" property="og:description" content="Type Declaration"><link data-rh="true" rel="icon" href="/app-sdk/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pui.ice.com/app-sdk/api/variables/decorators"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/decorators" hreflang="en"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/decorators" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"App SDK API","item":"https://pui.ice.com/app-sdk/api/"},{"@type":"ListItem","position":2,"name":"decorators","item":"https://pui.ice.com/app-sdk/api/variables/decorators"}]}</script><link rel="stylesheet" href="/app-sdk/assets/css/styles.48d5ef50.css">
-<script src="/app-sdk/assets/js/runtime~main.e3dd1cce.js" defer="defer"></script>
-<script src="/app-sdk/assets/js/main.50d99a6d.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/runtime~main.83819012.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/main.c610e1d3.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
 <svg style="display: none;"><defs>

package/build/docs/api/variables/endSession/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
 <meta charset="UTF-8">
 <meta name="generator" content="Docusaurus v3.9.2">
 <title data-rh="true">endSession | App SDK</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pui.ice.com/app-sdk/api/variables/endSession"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="endSession | App SDK"><meta data-rh="true" name="description" content="Ends the current user session and redirects to logout page."><meta data-rh="true" property="og:description" content="Ends the current user session and redirects to logout page."><link data-rh="true" rel="icon" href="/app-sdk/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pui.ice.com/app-sdk/api/variables/endSession"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/endSession" hreflang="en"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/endSession" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"App SDK API","item":"https://pui.ice.com/app-sdk/api/"},{"@type":"ListItem","position":2,"name":"endSession","item":"https://pui.ice.com/app-sdk/api/variables/endSession"}]}</script><link rel="stylesheet" href="/app-sdk/assets/css/styles.48d5ef50.css">
-<script src="/app-sdk/assets/js/runtime~main.e3dd1cce.js" defer="defer"></script>
-<script src="/app-sdk/assets/js/main.50d99a6d.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/runtime~main.83819012.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/main.c610e1d3.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
 <svg style="display: none;"><defs>

package/build/docs/api/variables/error/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
 <meta charset="UTF-8">
 <meta name="generator" content="Docusaurus v3.9.2">
 <title data-rh="true">error | App SDK</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pui.ice.com/app-sdk/api/variables/error"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="error | App SDK"><link data-rh="true" rel="icon" href="/app-sdk/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pui.ice.com/app-sdk/api/variables/error"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/error" hreflang="en"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/error" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"App SDK API","item":"https://pui.ice.com/app-sdk/api/"},{"@type":"ListItem","position":2,"name":"error","item":"https://pui.ice.com/app-sdk/api/variables/error"}]}</script><link rel="stylesheet" href="/app-sdk/assets/css/styles.48d5ef50.css">
-<script src="/app-sdk/assets/js/runtime~main.e3dd1cce.js" defer="defer"></script>
-<script src="/app-sdk/assets/js/main.50d99a6d.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/runtime~main.83819012.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/main.c610e1d3.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
 <svg style="display: none;"><defs>

package/build/docs/api/variables/errorMiddleware/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
 <meta charset="UTF-8">
 <meta name="generator" content="Docusaurus v3.9.2">
 <title data-rh="true">errorMiddleware | App SDK</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pui.ice.com/app-sdk/api/variables/errorMiddleware"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="errorMiddleware | App SDK"><link data-rh="true" rel="icon" href="/app-sdk/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pui.ice.com/app-sdk/api/variables/errorMiddleware"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/errorMiddleware" hreflang="en"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/errorMiddleware" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"App SDK API","item":"https://pui.ice.com/app-sdk/api/"},{"@type":"ListItem","position":2,"name":"errorMiddleware","item":"https://pui.ice.com/app-sdk/api/variables/errorMiddleware"}]}</script><link rel="stylesheet" href="/app-sdk/assets/css/styles.48d5ef50.css">
-<script src="/app-sdk/assets/js/runtime~main.e3dd1cce.js" defer="defer"></script>
-<script src="/app-sdk/assets/js/main.50d99a6d.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/runtime~main.83819012.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/main.c610e1d3.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
 <svg style="display: none;"><defs>

package/build/docs/api/variables/fireEvent/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
 <meta charset="UTF-8">
 <meta name="generator" content="Docusaurus v3.9.2">
 <title data-rh="true">fireEvent | App SDK</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pui.ice.com/app-sdk/api/variables/fireEvent"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="fireEvent | App SDK"><link data-rh="true" rel="icon" href="/app-sdk/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pui.ice.com/app-sdk/api/variables/fireEvent"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/fireEvent" hreflang="en"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/fireEvent" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"App SDK API","item":"https://pui.ice.com/app-sdk/api/"},{"@type":"ListItem","position":2,"name":"fireEvent","item":"https://pui.ice.com/app-sdk/api/variables/fireEvent"}]}</script><link rel="stylesheet" href="/app-sdk/assets/css/styles.48d5ef50.css">
-<script src="/app-sdk/assets/js/runtime~main.e3dd1cce.js" defer="defer"></script>
-<script src="/app-sdk/assets/js/main.50d99a6d.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/runtime~main.83819012.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/main.c610e1d3.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
 <svg style="display: none;"><defs>

package/build/docs/api/variables/globalConstants/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
 <meta charset="UTF-8">
 <meta name="generator" content="Docusaurus v3.9.2">
 <title data-rh="true">globalConstants | App SDK</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pui.ice.com/app-sdk/api/variables/globalConstants"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="globalConstants | App SDK"><meta data-rh="true" name="description" content="Type Declaration"><meta data-rh="true" property="og:description" content="Type Declaration"><link data-rh="true" rel="icon" href="/app-sdk/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pui.ice.com/app-sdk/api/variables/globalConstants"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/globalConstants" hreflang="en"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/globalConstants" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"App SDK API","item":"https://pui.ice.com/app-sdk/api/"},{"@type":"ListItem","position":2,"name":"globalConstants","item":"https://pui.ice.com/app-sdk/api/variables/globalConstants"}]}</script><link rel="stylesheet" href="/app-sdk/assets/css/styles.48d5ef50.css">
-<script src="/app-sdk/assets/js/runtime~main.e3dd1cce.js" defer="defer"></script>
-<script src="/app-sdk/assets/js/main.50d99a6d.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/runtime~main.83819012.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/main.c610e1d3.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
 <svg style="display: none;"><defs>

package/build/docs/api/variables/history/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
 <meta charset="UTF-8">
 <meta name="generator" content="Docusaurus v3.9.2">
 <title data-rh="true">history | App SDK</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pui.ice.com/app-sdk/api/variables/history"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="history | App SDK"><link data-rh="true" rel="icon" href="/app-sdk/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pui.ice.com/app-sdk/api/variables/history"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/history" hreflang="en"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/history" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"App SDK API","item":"https://pui.ice.com/app-sdk/api/"},{"@type":"ListItem","position":2,"name":"history","item":"https://pui.ice.com/app-sdk/api/variables/history"}]}</script><link rel="stylesheet" href="/app-sdk/assets/css/styles.48d5ef50.css">
-<script src="/app-sdk/assets/js/runtime~main.e3dd1cce.js" defer="defer"></script>
-<script src="/app-sdk/assets/js/main.50d99a6d.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/runtime~main.83819012.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/main.c610e1d3.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
 <svg style="display: none;"><defs>

package/build/docs/api/variables/httpClientProps/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
 <meta charset="UTF-8">
 <meta name="generator" content="Docusaurus v3.9.2">
 <title data-rh="true">httpClientProps | App SDK</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pui.ice.com/app-sdk/api/variables/httpClientProps"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="httpClientProps | App SDK"><link data-rh="true" rel="icon" href="/app-sdk/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pui.ice.com/app-sdk/api/variables/httpClientProps"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/httpClientProps" hreflang="en"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/httpClientProps" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"App SDK API","item":"https://pui.ice.com/app-sdk/api/"},{"@type":"ListItem","position":2,"name":"httpClientProps","item":"https://pui.ice.com/app-sdk/api/variables/httpClientProps"}]}</script><link rel="stylesheet" href="/app-sdk/assets/css/styles.48d5ef50.css">
-<script src="/app-sdk/assets/js/runtime~main.e3dd1cce.js" defer="defer"></script>
-<script src="/app-sdk/assets/js/main.50d99a6d.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/runtime~main.83819012.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/main.c610e1d3.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
 <svg style="display: none;"><defs>

package/build/docs/api/variables/logout/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
 <meta charset="UTF-8">
 <meta name="generator" content="Docusaurus v3.9.2">
 <title data-rh="true">logout | App SDK</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pui.ice.com/app-sdk/api/variables/logout"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="logout | App SDK"><meta data-rh="true" name="description" content="Type Declaration"><meta data-rh="true" property="og:description" content="Type Declaration"><link data-rh="true" rel="icon" href="/app-sdk/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pui.ice.com/app-sdk/api/variables/logout"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/logout" hreflang="en"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/logout" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"App SDK API","item":"https://pui.ice.com/app-sdk/api/"},{"@type":"ListItem","position":2,"name":"logout","item":"https://pui.ice.com/app-sdk/api/variables/logout"}]}</script><link rel="stylesheet" href="/app-sdk/assets/css/styles.48d5ef50.css">
-<script src="/app-sdk/assets/js/runtime~main.e3dd1cce.js" defer="defer"></script>
-<script src="/app-sdk/assets/js/main.50d99a6d.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/runtime~main.83819012.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/main.c610e1d3.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
 <svg style="display: none;"><defs>

package/build/docs/api/variables/memoryHistory/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
 <meta charset="UTF-8">
 <meta name="generator" content="Docusaurus v3.9.2">
 <title data-rh="true">memoryHistory | App SDK</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pui.ice.com/app-sdk/api/variables/memoryHistory"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="memoryHistory | App SDK"><link data-rh="true" rel="icon" href="/app-sdk/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pui.ice.com/app-sdk/api/variables/memoryHistory"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/memoryHistory" hreflang="en"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/memoryHistory" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"App SDK API","item":"https://pui.ice.com/app-sdk/api/"},{"@type":"ListItem","position":2,"name":"memoryHistory","item":"https://pui.ice.com/app-sdk/api/variables/memoryHistory"}]}</script><link rel="stylesheet" href="/app-sdk/assets/css/styles.48d5ef50.css">
-<script src="/app-sdk/assets/js/runtime~main.e3dd1cce.js" defer="defer"></script>
-<script src="/app-sdk/assets/js/main.50d99a6d.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/runtime~main.83819012.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/main.c610e1d3.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
 <svg style="display: none;"><defs>

package/build/docs/api/variables/removeSideEffect/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
 <meta charset="UTF-8">
 <meta name="generator" content="Docusaurus v3.9.2">
 <title data-rh="true">removeSideEffect | App SDK</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pui.ice.com/app-sdk/api/variables/removeSideEffect"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="removeSideEffect | App SDK"><meta data-rh="true" name="description" content="Removes a side effect listener."><meta data-rh="true" property="og:description" content="Removes a side effect listener."><link data-rh="true" rel="icon" href="/app-sdk/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pui.ice.com/app-sdk/api/variables/removeSideEffect"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/removeSideEffect" hreflang="en"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/removeSideEffect" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"App SDK API","item":"https://pui.ice.com/app-sdk/api/"},{"@type":"ListItem","position":2,"name":"removeSideEffect","item":"https://pui.ice.com/app-sdk/api/variables/removeSideEffect"}]}</script><link rel="stylesheet" href="/app-sdk/assets/css/styles.48d5ef50.css">
-<script src="/app-sdk/assets/js/runtime~main.e3dd1cce.js" defer="defer"></script>
-<script src="/app-sdk/assets/js/main.50d99a6d.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/runtime~main.83819012.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/main.c610e1d3.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
 <svg style="display: none;"><defs>

package/build/docs/api/variables/resetUserIdleTime/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
 <meta charset="UTF-8">
 <meta name="generator" content="Docusaurus v3.9.2">
 <title data-rh="true">resetUserIdleTime | App SDK</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pui.ice.com/app-sdk/api/variables/resetUserIdleTime"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="resetUserIdleTime | App SDK"><meta data-rh="true" name="description" content="Resets the user idle time counter."><meta data-rh="true" property="og:description" content="Resets the user idle time counter."><link data-rh="true" rel="icon" href="/app-sdk/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pui.ice.com/app-sdk/api/variables/resetUserIdleTime"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/resetUserIdleTime" hreflang="en"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/resetUserIdleTime" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"App SDK API","item":"https://pui.ice.com/app-sdk/api/"},{"@type":"ListItem","position":2,"name":"resetUserIdleTime","item":"https://pui.ice.com/app-sdk/api/variables/resetUserIdleTime"}]}</script><link rel="stylesheet" href="/app-sdk/assets/css/styles.48d5ef50.css">
-<script src="/app-sdk/assets/js/runtime~main.e3dd1cce.js" defer="defer"></script>
-<script src="/app-sdk/assets/js/main.50d99a6d.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/runtime~main.83819012.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/main.c610e1d3.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
 <svg style="display: none;"><defs>

package/build/docs/api/variables/screen/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
 <meta charset="UTF-8">
 <meta name="generator" content="Docusaurus v3.9.2">
 <title data-rh="true">screen | App SDK</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pui.ice.com/app-sdk/api/variables/screen"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="screen | App SDK"><link data-rh="true" rel="icon" href="/app-sdk/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pui.ice.com/app-sdk/api/variables/screen"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/screen" hreflang="en"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/screen" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"App SDK API","item":"https://pui.ice.com/app-sdk/api/"},{"@type":"ListItem","position":2,"name":"screen","item":"https://pui.ice.com/app-sdk/api/variables/screen"}]}</script><link rel="stylesheet" href="/app-sdk/assets/css/styles.48d5ef50.css">
-<script src="/app-sdk/assets/js/runtime~main.e3dd1cce.js" defer="defer"></script>
-<script src="/app-sdk/assets/js/main.50d99a6d.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/runtime~main.83819012.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/main.c610e1d3.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
 <svg style="display: none;"><defs>

package/build/docs/api/variables/startSideEffect/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
 <meta charset="UTF-8">
 <meta name="generator" content="Docusaurus v3.9.2">
 <title data-rh="true">startSideEffect | App SDK</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pui.ice.com/app-sdk/api/variables/startSideEffect"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="startSideEffect | App SDK"><meta data-rh="true" name="description" content="Starts a side effect listener."><meta data-rh="true" property="og:description" content="Starts a side effect listener."><link data-rh="true" rel="icon" href="/app-sdk/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pui.ice.com/app-sdk/api/variables/startSideEffect"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/startSideEffect" hreflang="en"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/startSideEffect" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"App SDK API","item":"https://pui.ice.com/app-sdk/api/"},{"@type":"ListItem","position":2,"name":"startSideEffect","item":"https://pui.ice.com/app-sdk/api/variables/startSideEffect"}]}</script><link rel="stylesheet" href="/app-sdk/assets/css/styles.48d5ef50.css">
-<script src="/app-sdk/assets/js/runtime~main.e3dd1cce.js" defer="defer"></script>
-<script src="/app-sdk/assets/js/main.50d99a6d.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/runtime~main.83819012.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/main.c610e1d3.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
 <svg style="display: none;"><defs>

package/build/docs/api/variables/updateBAEventParameters/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
 <meta charset="UTF-8">
 <meta name="generator" content="Docusaurus v3.9.2">
 <title data-rh="true">updateBAEventParameters() | App SDK</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pui.ice.com/app-sdk/api/variables/updateBAEventParameters"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="updateBAEventParameters() | App SDK"><meta data-rh="true" name="description" content="Updates the business analytics event parameters with new values"><meta data-rh="true" property="og:description" content="Updates the business analytics event parameters with new values"><link data-rh="true" rel="icon" href="/app-sdk/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pui.ice.com/app-sdk/api/variables/updateBAEventParameters"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/updateBAEventParameters" hreflang="en"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/updateBAEventParameters" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"App SDK API","item":"https://pui.ice.com/app-sdk/api/"},{"@type":"ListItem","position":2,"name":"updateBAEventParameters()","item":"https://pui.ice.com/app-sdk/api/variables/updateBAEventParameters"}]}</script><link rel="stylesheet" href="/app-sdk/assets/css/styles.48d5ef50.css">
-<script src="/app-sdk/assets/js/runtime~main.e3dd1cce.js" defer="defer"></script>
-<script src="/app-sdk/assets/js/main.50d99a6d.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/runtime~main.83819012.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/main.c610e1d3.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
 <svg style="display: none;"><defs>

package/build/docs/api/variables/useAppSelector/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
 <meta charset="UTF-8">
 <meta name="generator" content="Docusaurus v3.9.2">
 <title data-rh="true">useAppSelector | App SDK</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pui.ice.com/app-sdk/api/variables/useAppSelector"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="useAppSelector | App SDK"><meta data-rh="true" name="description" content="React hook to select data from Redux store with type safety."><meta data-rh="true" property="og:description" content="React hook to select data from Redux store with type safety."><link data-rh="true" rel="icon" href="/app-sdk/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pui.ice.com/app-sdk/api/variables/useAppSelector"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/useAppSelector" hreflang="en"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/useAppSelector" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"App SDK API","item":"https://pui.ice.com/app-sdk/api/"},{"@type":"ListItem","position":2,"name":"useAppSelector","item":"https://pui.ice.com/app-sdk/api/variables/useAppSelector"}]}</script><link rel="stylesheet" href="/app-sdk/assets/css/styles.48d5ef50.css">
-<script src="/app-sdk/assets/js/runtime~main.e3dd1cce.js" defer="defer"></script>
-<script src="/app-sdk/assets/js/main.50d99a6d.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/runtime~main.83819012.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/main.c610e1d3.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
 <svg style="display: none;"><defs>

package/build/docs/api/variables/waitMessageAction/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
 <meta charset="UTF-8">
 <meta name="generator" content="Docusaurus v3.9.2">
 <title data-rh="true">waitMessageAction | App SDK</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pui.ice.com/app-sdk/api/variables/waitMessageAction"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="waitMessageAction | App SDK"><meta data-rh="true" name="description" content="Type Declaration"><meta data-rh="true" property="og:description" content="Type Declaration"><link data-rh="true" rel="icon" href="/app-sdk/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pui.ice.com/app-sdk/api/variables/waitMessageAction"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/waitMessageAction" hreflang="en"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/waitMessageAction" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"App SDK API","item":"https://pui.ice.com/app-sdk/api/"},{"@type":"ListItem","position":2,"name":"waitMessageAction","item":"https://pui.ice.com/app-sdk/api/variables/waitMessageAction"}]}</script><link rel="stylesheet" href="/app-sdk/assets/css/styles.48d5ef50.css">
-<script src="/app-sdk/assets/js/runtime~main.e3dd1cce.js" defer="defer"></script>
-<script src="/app-sdk/assets/js/main.50d99a6d.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/runtime~main.83819012.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/main.c610e1d3.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
 <svg style="display: none;"><defs>

package/build/docs/api/variables/within/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
 <meta charset="UTF-8">
 <meta name="generator" content="Docusaurus v3.9.2">
 <title data-rh="true">within | App SDK</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pui.ice.com/app-sdk/api/variables/within"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="within | App SDK"><link data-rh="true" rel="icon" href="/app-sdk/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pui.ice.com/app-sdk/api/variables/within"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/within" hreflang="en"><link data-rh="true" rel="alternate" href="https://pui.ice.com/app-sdk/api/variables/within" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"App SDK API","item":"https://pui.ice.com/app-sdk/api/"},{"@type":"ListItem","position":2,"name":"within","item":"https://pui.ice.com/app-sdk/api/variables/within"}]}</script><link rel="stylesheet" href="/app-sdk/assets/css/styles.48d5ef50.css">
-<script src="/app-sdk/assets/js/runtime~main.e3dd1cce.js" defer="defer"></script>
-<script src="/app-sdk/assets/js/main.50d99a6d.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/runtime~main.83819012.js" defer="defer"></script>
+<script src="/app-sdk/assets/js/main.c610e1d3.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
 <svg style="display: none;"><defs>

package/build/docs/assets/js/04ee7372.d0e9ea9d.js ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[5908],{116(e,n,t){t.d(n,{R:()=>a,x:()=>o});var i=t(758);const s={},r=i.createContext(s);function a(e){const n=i.useContext(r);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),i.createElement(r.Provider,{value:n},e.children)}},578(e,n,t){t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>o,default:()=>p,frontMatter:()=>a,metadata:()=>i,toc:()=>l});const i=JSON.parse('{"id":"usage-guide","title":"Usage Guide","description":"This guide provides detailed examples and patterns for using the PUI App SDK in your applications. For initial setup, see the Getting Started Guide.","source":"@site/docs/usage-guide.md","sourceDirName":".","slug":"/usage-guide","permalink":"/app-sdk/usage-guide","draft":false,"unlisted":false,"editUrl":"https://git.elliemae.io/platform-ui/pui-app-sdk.git/docs/usage-guide.md","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Getting Started","permalink":"/app-sdk/"}}');var s=t(6070),r=t(116);const a={},o="Usage Guide",c={},l=[{value:"Table of Contents",id:"table-of-contents",level:2},{value:"Routing",id:"routing",level:2},{value:"Lazy Loading Components",id:"lazy-loading-components",level:3},{value:"Authentication",id:"authentication",level:2},{value:"API Integration with RTK Query",id:"api-integration-with-rtk-query",level:2},{value:"Setting Up RTK Query API",id:"setting-up-rtk-query-api",level:3},{value:"Injecting RTK Query API",id:"injecting-rtk-query-api",level:3},{value:"Using RTK Query in Components",id:"using-rtk-query-in-components",level:3},{value:"Advanced RTK Query Features",id:"advanced-rtk-query-features",level:3},{value:"Conditional Fetching",id:"conditional-fetching",level:4},{value:"Polling",id:"polling",level:4},{value:"Optimistic Updates",id:"optimistic-updates",level:4},{value:"Why RTK Query?",id:"why-rtk-query",level:3},{value:"HTTP Client (Legacy)",id:"http-client-legacy",level:2},{value:"State Management",id:"state-management",level:2},{value:"Creating Actions and Reducers (Legacy Pattern)",id:"creating-actions-and-reducers-legacy-pattern",level:3},{value:"Typed Selectors",id:"typed-selectors",level:3},{value:"Using State in Components",id:"using-state-in-components",level:3},{value:"Layout Component with Dynamic Injection",id:"layout-component-with-dynamic-injection",level:3},{value:"Redux Saga Side Effects (Legacy Pattern)",id:"redux-saga-side-effects-legacy-pattern",level:3},{value:"Form Management",id:"form-management",level:2},{value:"Analytics",id:"analytics",level:2},{value:"Timing Events",id:"timing-events",level:3},{value:"Business Analytics Events",id:"business-analytics-events",level:3},{value:"Micro-Frontends",id:"micro-frontends",level:2},{value:"Hosting Micro-Frontends",id:"hosting-micro-frontends",level:3},{value:"Micro-Frontend Configuration",id:"micro-frontend-configuration",level:3},{value:"Navigation & History Modes",id:"navigation--history-modes",level:3},{value:"<code>useParentHistory: true</code> (default) \u2014 Shared History",id:"useparenthistory-true-default--shared-history",level:4},{value:"<code>useParentHistory: false</code> \u2014 Independent History",id:"useparenthistory-false--independent-history",level:4},{value:"Setting an Initial Route from the Host",id:"setting-an-initial-route-from-the-host",level:4},{value:"Quick Reference",id:"quick-reference",level:4},{value:"Guest App <code>app.config.json</code> Example",id:"guest-app-appconfigjson-example",level:4},{value:"Scripting Objects",id:"scripting-objects",level:2},{value:"Adding Scripting Objects",id:"adding-scripting-objects",level:3},{value:"Using Scripting Objects in Components",id:"using-scripting-objects-in-components",level:3},{value:"Wait Messages",id:"wait-messages",level:2},{value:"Using WaitMessage Component",id:"using-waitmessage-component",level:3},{value:"Wait Message Props",id:"wait-message-props",level:3},{value:"Navigation Prompts",id:"navigation-prompts",level:2},{value:"Dispatch Navigation Prompt Actions",id:"dispatch-navigation-prompt-actions",level:3},{value:"Error Handling",id:"error-handling",level:2},{value:"Global Error Toast",id:"global-error-toast",level:3},{value:"Clear Errors",id:"clear-errors",level:3},{value:"ARIA Live Messages",id:"aria-live-messages",level:2},{value:"Decorators",id:"decorators",level:2},{value:"Function Decorators",id:"function-decorators",level:3},{value:"Class Decorators",id:"class-decorators",level:3},{value:"Advanced State Selectors",id:"advanced-state-selectors",level:2},{value:"Using useStateSelector",id:"using-usestateselector",level:3},{value:"Responsive Design",id:"responsive-design",level:2},{value:"Media Query Hook",id:"media-query-hook",level:3},{value:"Security Utilities",id:"security-utilities",level:2},{value:"PII Redaction",id:"pii-redaction",level:3},{value:"Listener Middleware",id:"listener-middleware",level:2},{value:"Session Management",id:"session-management",level:2},{value:"Session Timeout Handling",id:"session-timeout-handling",level:3},{value:"Session Renewal",id:"session-renewal",level:3},{value:"Initialize Session Management",id:"initialize-session-management",level:3},{value:"LogRocket Integration",id:"logrocket-integration",level:3},{value:"Service Worker",id:"service-worker",level:3},{value:"App Configuration",id:"app-configuration",level:2},{value:"Loading Configuration",id:"loading-configuration",level:3},{value:"Update Configuration Values",id:"update-configuration-values",level:3},{value:"Web Storage Events",id:"web-storage-events",level:2},{value:"Micro-Frontend Communication",id:"micro-frontend-communication",level:2},{value:"Host App Data Exchange",id:"host-app-data-exchange",level:3},{value:"Guest Unload Handlers",id:"guest-unload-handlers",level:3},{value:"Render with Host Data",id:"render-with-host-data",level:3},{value:"Authentication Utilities",id:"authentication-utilities",level:2},{value:"Auth Helper Functions",id:"auth-helper-functions",level:3},{value:"Require Auth Component",id:"require-auth-component",level:3},{value:"Utility Hooks",id:"utility-hooks",level:2},{value:"useInjectQuery",id:"useinjectquery",level:3},{value:"useInjectSideEffect",id:"useinjectsideeffect",level:3},{value:"useAppMiddleware",id:"useappmiddleware",level:3},{value:"Form Components",id:"form-components",level:2},{value:"Available Form Components",id:"available-form-components",level:3},{value:"TextBox",id:"textbox",level:3},{value:"InputMask",id:"inputmask",level:3},{value:"ComboBox",id:"combobox",level:3},{value:"DatePicker",id:"datepicker",level:3},{value:"DateRangePicker",id:"daterangepicker",level:3},{value:"CheckBox",id:"checkbox",level:3},{value:"RadioGroup",id:"radiogroup",level:3},{value:"Toggle",id:"toggle",level:3},{value:"Autocomplete",id:"autocomplete",level:3},{value:"Form Layout",id:"form-layout",level:3},{value:"Storybook Integration",id:"storybook-integration",level:2},{value:"Utility Components",id:"utility-components",level:2},{value:"VisuallyHidden",id:"visuallyhidden",level:3},{value:"Page Component",id:"page-component",level:3},{value:"Testing",id:"testing",level:2},{value:"Testing with Redux",id:"testing-with-redux",level:3},{value:"Common Patterns",id:"common-patterns",level:2},{value:"Error Boundaries",id:"error-boundaries",level:3},{value:"API Error Handling with RTK Query",id:"api-error-handling-with-rtk-query",level:3},{value:"API Error Handling (Legacy Pattern)",id:"api-error-handling-legacy-pattern",level:3},{value:"Troubleshooting",id:"troubleshooting",level:2},{value:"Store Not Initialized",id:"store-not-initialized",level:3},{value:"Saga Not Running",id:"saga-not-running",level:3},{value:"Scripting Objects Not Available",id:"scripting-objects-not-available",level:3},{value:"Form Validation Issues",id:"form-validation-issues",level:3},{value:"Host-Guest Communication",id:"host-guest-communication",level:3}];function d(e){const n={a:"a",blockquote:"blockquote",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"usage-guide",children:"Usage Guide"})}),"\n",(0,s.jsxs)(n.p,{children:["This guide provides detailed examples and patterns for using the PUI App SDK in your applications. For initial setup, see the ",(0,s.jsx)(n.a,{href:"/app-sdk/",children:"Getting Started Guide"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"table-of-contents",children:"Table of Contents"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#routing",children:"Routing"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#authentication",children:"Authentication"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#api-integration-with-rtk-query",children:"API Integration with RTK Query"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#http-client-legacy",children:"HTTP Client"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#state-management",children:"State Management"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#form-management",children:"Form Management"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#analytics",children:"Analytics"})}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.a,{href:"#micro-frontends",children:"Micro-Frontends"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#navigation--history-modes",children:"Navigation & History Modes"})}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#scripting-objects",children:"Scripting Objects"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#wait-messages",children:"Wait Messages"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#navigation-prompts",children:"Navigation Prompts"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#error-handling",children:"Error Handling"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#aria-live-messages",children:"ARIA Live Messages"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#decorators",children:"Decorators"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#advanced-state-selectors",children:"Advanced State Selectors"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#responsive-design",children:"Responsive Design"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#security-utilities",children:"Security Utilities"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#listener-middleware",children:"Listener Middleware"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#session-management",children:"Session Management"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#app-configuration",children:"App Configuration"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#web-storage-events",children:"Web Storage Events"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#micro-frontend-communication",children:"Micro-Frontend Communication"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#authentication-utilities",children:"Authentication Utilities"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#utility-hooks",children:"Utility Hooks"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#form-components",children:"Form Components"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#storybook-integration",children:"Storybook Integration"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#utility-components",children:"Utility Components"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#testing",children:"Testing"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#common-patterns",children:"Common Patterns"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"#troubleshooting",children:"Troubleshooting"})}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"routing",children:"Routing"}),"\n",(0,s.jsx)(n.p,{children:"Set up routing with React Router and SDK components:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { Routes, Route } from 'react-router-dom';\nimport { RequireAuth, useInjectSaga, Page } from '@elliemae/pui-app-sdk';\nimport { Layout } from './view/layout';\nimport { onSessionEvent } from './sideeffect/session';\n\nconst key = 'session';\n\nexport const AppRoutes = () => {\n // Inject session management saga\n useInjectSaga({ key, saga: onSessionEvent });\n\n return (\n <Routes>\n <Route path=\"/\" element={<Layout />}>\n <Route\n index\n element={\n <Page pageTitle=\"Dashboard\">\n <Dashboard />\n </Page>\n }\n />\n <Route\n path=\"details/:id\"\n element={\n <Page pageTitle=\"Details\">\n <DetailsView />\n </Page>\n }\n />\n </Route>\n </Routes>\n );\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"lazy-loading-components",children:"Lazy Loading Components"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { loadable } from '@elliemae/pui-app-sdk';\n\n// Create loadable component\nexport const LoanView = loadable(() => import('./index'), {\n fallback: <div>Loading...</div>,\n});\n\n// Use in routes\nimport { LoanView } from './view/loan-view/loadable';\n\nconst AppRoutes = () => (\n <Routes>\n <Route path=\"/loans\" element={<LoanView />} />\n </Routes>\n);\n"})}),"\n",(0,s.jsx)(n.h2,{id:"authentication",children:"Authentication"}),"\n",(0,s.jsx)(n.p,{children:"Handle authentication and logout with Redux Saga:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import {\n auth,\n globalConstants,\n getRedirectUrl,\n logout,\n error,\n} from '@elliemae/pui-app-sdk';\nimport { call, put, takeLatest } from 'redux-saga/effects';\n\nfunction* endSessionHandler() {\n try {\n const cred = sessionStorage.getItem('Authorization') || '';\n yield call(endSession, { token: cred });\n\n // Trigger logout\n yield put(\n auth.logout({\n clientId: globalConstants.CLIENT_ID,\n redirectUri: getRedirectUrl(),\n responseType: 'code',\n scope: 'loc',\n code: '1004',\n }),\n );\n } catch (err) {\n yield put(error.set({ messageText: (err as Error)?.message }));\n }\n}\n\nexport function* onSessionEvent() {\n yield takeLatest(logout.CONFIRM, endSessionHandler);\n}\n"})}),"\n",(0,s.jsx)(n.h2,{id:"api-integration-with-rtk-query",children:"API Integration with RTK Query"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"Recommended Approach"}),": RTK Query is the preferred method for API integration, providing automatic caching, request deduplication, and simplified data fetching."]}),"\n",(0,s.jsx)(n.h3,{id:"setting-up-rtk-query-api",children:"Setting Up RTK Query API"}),"\n",(0,s.jsxs)(n.p,{children:["Create an API slice using RTK Query with the SDK's ",(0,s.jsx)(n.code,{children:"sdkBaseQuery"}),":"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { createApi } from '@reduxjs/toolkit/query/react';\nimport { sdkBaseQuery } from '@elliemae/pui-app-sdk';\n\n// Define API slice\nexport const resourcesApi = createApi({\n reducerPath: 'resourcesApi',\n baseQuery: sdkBaseQuery({ baseUrl: '/v1' }),\n tagTypes: ['Resources'],\n endpoints: (builder) => ({\n getResources: builder.query<ResourceRecord[], void>({\n query: () => ({\n url: '/resources',\n method: 'GET',\n }),\n providesTags: ['Resources'],\n }),\n getResourceById: builder.query<ResourceRecord, string>({\n query: (id) => ({\n url: `/resources/${id}`,\n method: 'GET',\n }),\n providesTags: (result, error, id) => [{ type: 'Resources', id }],\n }),\n createResource: builder.mutation<ResourceRecord, CreateResourceRequest>({\n query: (payload) => ({\n url: '/resources',\n method: 'POST',\n data: payload,\n }),\n invalidatesTags: ['Resources'],\n }),\n updateResource: builder.mutation<\n ResourceRecord,\n { id: string; data: UpdateResourceRequest }\n >({\n query: ({ id, data }) => ({\n url: `/resources/${id}`,\n method: 'PUT',\n data,\n }),\n invalidatesTags: (result, error, { id }) => [{ type: 'Resources', id }],\n }),\n deleteResource: builder.mutation<void, string>({\n query: (id) => ({\n url: `/resources/${id}`,\n method: 'DELETE',\n }),\n invalidatesTags: ['Resources'],\n }),\n }),\n});\n\nexport const {\n useGetResourcesQuery,\n useGetResourceByIdQuery,\n useCreateResourceMutation,\n useUpdateResourceMutation,\n useDeleteResourceMutation,\n} = resourcesApi;\n"})}),"\n",(0,s.jsx)(n.h3,{id:"injecting-rtk-query-api",children:"Injecting RTK Query API"}),"\n",(0,s.jsxs)(n.p,{children:["Use the SDK's ",(0,s.jsx)(n.code,{children:"useInjectQuery"})," hook to dynamically inject the API:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { useInjectQuery } from '@elliemae/pui-app-sdk';\nimport { resourcesApi } from './api/resources';\n\nexport const Layout = () => {\n // Inject RTK Query API\n useInjectQuery({ api: resourcesApi });\n\n return (\n <div>\n <Header />\n <Outlet />\n </div>\n );\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"using-rtk-query-in-components",children:"Using RTK Query in Components"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import {\n useGetResourcesQuery,\n useCreateResourceMutation,\n useUpdateResourceMutation,\n} from './api/resources';\nimport { waitMessage } from '@elliemae/pui-app-sdk';\nimport { useAppDispatch } from '@elliemae/pui-app-sdk';\n\nfunction ResourceList() {\n const dispatch = useAppDispatch();\n\n // Fetch resources with automatic caching and refetching\n const { data: resources, isLoading, error, refetch } = useGetResourcesQuery();\n\n // Mutations\n const [createResource, { isLoading: isCreating }] =\n useCreateResourceMutation();\n const [updateResource, { isLoading: isUpdating }] =\n useUpdateResourceMutation();\n\n // Show wait message while loading\n useEffect(() => {\n if (isLoading || isCreating || isUpdating) {\n dispatch(waitMessage.open({ message: 'Loading...' }));\n } else {\n dispatch(waitMessage.close());\n }\n }, [isLoading, isCreating, isUpdating, dispatch]);\n\n const handleCreate = async () => {\n try {\n await createResource({\n name: 'New Resource',\n description: 'Description',\n }).unwrap();\n // Success - data automatically refetched due to cache invalidation\n } catch (err) {\n console.error('Failed to create resource:', err);\n }\n };\n\n const handleUpdate = async (id: string) => {\n try {\n await updateResource({\n id,\n data: { name: 'Updated Name' },\n }).unwrap();\n } catch (err) {\n console.error('Failed to update resource:', err);\n }\n };\n\n if (error) return <div>Error loading resources</div>;\n if (isLoading) return <div>Loading...</div>;\n\n return (\n <div>\n <button onClick={handleCreate}>Create Resource</button>\n {resources?.map((resource) => (\n <div key={resource.id}>\n <h3>{resource.name}</h3>\n <button onClick={() => handleUpdate(resource.id)}>Update</button>\n </div>\n ))}\n </div>\n );\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"advanced-rtk-query-features",children:"Advanced RTK Query Features"}),"\n",(0,s.jsx)(n.h4,{id:"conditional-fetching",children:"Conditional Fetching"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"function ResourceDetails({ resourceId }: { resourceId?: string }) {\n // Skip query if no resourceId\n const { data, isLoading } = useGetResourceByIdQuery(resourceId!, {\n skip: !resourceId,\n });\n\n return <div>{data?.name}</div>;\n}\n"})}),"\n",(0,s.jsx)(n.h4,{id:"polling",children:"Polling"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"function ResourceList() {\n // Poll every 30 seconds\n const { data } = useGetResourcesQuery(undefined, {\n pollingInterval: 30000,\n });\n\n return <div>{/* render resources */}</div>;\n}\n"})}),"\n",(0,s.jsx)(n.h4,{id:"optimistic-updates",children:"Optimistic Updates"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"const [updateResource] = useUpdateResourceMutation();\n\nconst handleUpdate = async (id: string, newName: string) => {\n try {\n await updateResource({\n id,\n data: { name: newName },\n }).unwrap();\n } catch (err) {\n // Update failed, cache automatically reverted\n }\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"why-rtk-query",children:"Why RTK Query?"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Automatic Caching"}),": Reduces unnecessary network requests"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Request Deduplication"}),": Multiple components can use the same query without duplicate requests"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Automatic Refetching"}),": Data stays fresh with polling, refetch on focus, etc."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Optimistic Updates"}),": Update UI before server response"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Error Handling"}),": Built-in error states"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Loading States"}),": Automatic loading indicators"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"TypeScript Support"}),": Full type safety"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Less Boilerplate"}),": No need for actions, reducers, or sagas for API calls"]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"http-client-legacy",children:"HTTP Client (Legacy)"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"Note"}),": For new projects, prefer ",(0,s.jsx)(n.a,{href:"#api-integration-with-rtk-query",children:"RTK Query"})," for API integration. Use the HTTP client directly only when you need fine-grained control or are working with existing code."]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Make authenticated API calls with automatic token management:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { getAuthHTTPClient } from '@elliemae/pui-app-sdk';\nimport { logger } from './utils/logger';\n\nconst basePath = '/v1/resources';\n\nexport interface GetResourcesResponse {\n id: string;\n name: string;\n // ... other fields\n}\n\nexport const getResources = async () => {\n try {\n const { data }: { data: Array<GetResourcesResponse> } =\n await getAuthHTTPClient().get(basePath);\n return data;\n } catch (err) {\n logger.error({\n message: 'Failed to get resources',\n exception: err as Error,\n });\n throw new Error(\n `Unable to get resources. Please try again later. Details: ${\n (err as Error)?.message\n }`,\n );\n }\n};\n\nexport const createResource = async (payload: CreateResourceRequest) => {\n try {\n const { data }: { data: CreateResourceResponse } =\n await getAuthHTTPClient().post(`${basePath}`, payload);\n return data;\n } catch (err) {\n logger.error({\n message: 'Failed to create resource',\n exception: err as Error,\n });\n throw new Error(\n `Unable to create resource. Please try again later. Details: ${\n (err as Error)?.message\n }`,\n );\n }\n};\n"})}),"\n",(0,s.jsx)(n.h2,{id:"state-management",children:"State Management"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"Recommended"}),": For API-related state management, use ",(0,s.jsx)(n.a,{href:"#api-integration-with-rtk-query",children:"RTK Query"})," instead of manually creating actions, reducers, and sagas."]}),"\n"]}),"\n",(0,s.jsx)(n.h3,{id:"creating-actions-and-reducers-legacy-pattern",children:"Creating Actions and Reducers (Legacy Pattern)"}),"\n",(0,s.jsx)(n.p,{children:"For non-API state or when working with existing code, use Redux Toolkit with the SDK's API action creator:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { createSlice, PayloadActionCreator } from '@reduxjs/toolkit';\nimport { getApiActionCreator } from '@elliemae/pui-app-sdk';\n\nconst resourcesActionCreator = getApiActionCreator('resources');\n\ntype GetResourceActions = {\n get: PayloadActionCreator<void, string>;\n getSuccess: PayloadActionCreator<Array<ResourceRecord>, string>;\n getError: PayloadActionCreator<void, string>;\n};\n\ntype CreateResourceActions = {\n create: PayloadActionCreator<void, string>;\n createSuccess: PayloadActionCreator<CreateResourceResponse, string>;\n createError: PayloadActionCreator<void, string>;\n};\n\nexport const resources = {\n ...(resourcesActionCreator('create') as unknown as CreateResourceActions),\n ...(resourcesActionCreator('get') as unknown as GetResourceActions),\n};\n\nconst resourcesSlice = createSlice({\n name: 'resources',\n initialState: [] as Array<ResourceRecord>,\n reducers: {\n getSuccess: (state, { payload }: { payload: Array<ResourceRecord> }) => {\n state.push(...payload);\n },\n },\n});\n\nexport const { reducer } = resourcesSlice;\n"})}),"\n",(0,s.jsx)(n.h3,{id:"typed-selectors",children:"Typed Selectors"}),"\n",(0,s.jsx)(n.p,{children:"Create typed selectors for better type safety:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { TypedUseSelectorHook, useSelector } from 'react-redux';\nimport { RootState } from '@elliemae/pui-app-sdk';\nimport { reducer } from './data/resources';\n\n// Create typed selector\ntype AppState = RootState & { resources: ReturnType<typeof reducer> };\nexport const useAppSelector: TypedUseSelectorHook<AppState> = useSelector;\n"})}),"\n",(0,s.jsx)(n.h3,{id:"using-state-in-components",children:"Using State in Components"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { useAppDispatch, useAppSelector } from '@elliemae/pui-app-sdk';\n\nfunction ResourceList() {\n const resourcesData = useAppSelector((state) => state.resources);\n const dispatch = useAppDispatch();\n\n useEffect(() => {\n if (!resourcesData.length) {\n dispatch(resources.get());\n }\n }, [dispatch, resourcesData.length]);\n\n return <div>{/* render resources */}</div>;\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"layout-component-with-dynamic-injection",children:"Layout Component with Dynamic Injection"}),"\n",(0,s.jsx)(n.p,{children:"Inject reducers and sagas at the layout level:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { Outlet } from 'react-router-dom';\nimport { useInjectReducer, useInjectSaga } from '@elliemae/pui-app-sdk';\nimport { reducer } from './data/resources';\nimport { resourceSagas } from './sideeffect/resources';\n\nexport const Layout = () => {\n // Inject reducer and saga at layout level\n useInjectReducer({ key: 'resources', reducer });\n useInjectSaga({ key: 'resources', saga: resourceSagas });\n\n return (\n <div>\n <Header />\n <Outlet />\n </div>\n );\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"redux-saga-side-effects-legacy-pattern",children:"Redux Saga Side Effects (Legacy Pattern)"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"Note"}),": RTK Query eliminates the need for sagas in most API use cases. Use sagas for complex async workflows, WebSocket connections, or custom side effects not related to API calls."]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Handle async operations with Redux Saga:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { all, fork } from 'redux-saga/effects';\nimport { logger } from './utils/logger';\nimport { onGetAllResources } from './get';\nimport { onCreateResource } from './create';\n\nexport function* resourceSagas() {\n try {\n yield all([fork(onCreateResource), fork(onGetAllResources)]);\n } catch (err) {\n logger.error({\n message: 'Saga initialization error',\n exception: err as Error,\n });\n }\n}\n"})}),"\n",(0,s.jsx)(n.h2,{id:"form-management",children:"Form Management"}),"\n",(0,s.jsx)(n.p,{children:"Build forms with validation using React Hook Form integration:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { Form as SDKForm, useAppDispatch } from '@elliemae/pui-app-sdk';\nimport { useParams } from 'react-router-dom';\nimport { SubmitHandler } from 'react-hook-form';\nimport { resources } from './data/resources';\n\ninterface FormData {\n firstName: string;\n lastName: string;\n email: string;\n country?: { value: string; label: string };\n}\n\nexport const MyForm = () => {\n const dispatch = useAppDispatch();\n const { id } = useParams<{ id: string }>();\n\n const onSubmit: SubmitHandler<FormData> = (formData) => {\n const { country, ...rest } = formData;\n\n dispatch(\n resources.save({\n id,\n ...rest,\n country: country?.value || country,\n }),\n );\n };\n\n return (\n <SDKForm<FormData> onSubmit={onSubmit}>\n <FormFields />\n <SubmitButton />\n </SDKForm>\n );\n};\n"})}),"\n",(0,s.jsx)(n.h2,{id:"analytics",children:"Analytics"}),"\n",(0,s.jsx)(n.p,{children:"Track user events and page views using scripting objects:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { CMicroApp } from '@elliemae/pui-app-sdk';\nimport { IAnalytics } from '@elliemae/pui-scripting-object';\nimport { logger } from './utils/logger';\n\nlet analyticsObj: IAnalytics | null = null;\n\nexport const getAnalytics = async () => {\n if (!analyticsObj) {\n try {\n const app = CMicroApp.getInstance();\n analyticsObj = (await app.getObject('analytics')) ?? null;\n } catch (error) {\n logger.error({\n message: 'Error fetching analytics object',\n exception: error as Error,\n });\n }\n }\n return analyticsObj;\n};\n\nexport const getAppDetails = () => ({\n appId: window.emui?.appId || '',\n appUrl: window.location.href,\n});\n"})}),"\n",(0,s.jsx)(n.h3,{id:"timing-events",children:"Timing Events"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"// Use in component\nuseEffect(() => {\n (async () => {\n const analytics = await getAnalytics();\n if (analytics) {\n await analytics.startTiming('PageLoad', getAppDetails());\n // ... perform operation\n await analytics.endTiming('PageLoad', getAppDetails());\n }\n })();\n}, []);\n"})}),"\n",(0,s.jsx)(n.h3,{id:"business-analytics-events",children:"Business Analytics Events"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"useEffect(() => {\n if (recordId) {\n (async () => {\n const analytics = await getAnalytics();\n if (analytics) {\n await analytics.sendBAEvent({\n event: 'RecordViewed',\n recordId,\n });\n }\n })();\n }\n}, [recordId]);\n"})}),"\n",(0,s.jsx)(n.h2,{id:"micro-frontends",children:"Micro-Frontends"}),"\n",(0,s.jsx)(n.h3,{id:"hosting-micro-frontends",children:"Hosting Micro-Frontends"}),"\n",(0,s.jsxs)(n.p,{children:["Use ",(0,s.jsx)(n.code,{children:"GuestMicroApp"})," to embed child applications:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { GuestMicroApp, history } from '@elliemae/pui-app-sdk';\n\n// Simple guest micro-app component\nconst PricingMicroApp = () => <GuestMicroApp id=\"pricing\" history={history} />;\n\nexport default PricingMicroApp;\n"})}),"\n",(0,s.jsx)(n.h3,{id:"micro-frontend-configuration",children:"Micro-Frontend Configuration"}),"\n",(0,s.jsxs)(n.p,{children:["Define micro-apps in your ",(0,s.jsx)(n.code,{children:"app.config.json"}),":"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-json",children:'{\n "microFrontendApps": {\n "pricing": {\n "name": "Pricing",\n "hostUrl": "./pricing",\n "development": {\n "files": ["index.js"]\n },\n "production": {\n "files": ["index.js"]\n }\n },\n "services": {\n "name": "Services",\n "hostUrl": "./services",\n "mode": "development",\n "development": {\n "files": ["index.dev.js", "index.css"]\n },\n "production": {\n "files": ["index.js", "index.css"]\n }\n }\n }\n}\n'})}),"\n",(0,s.jsx)(n.h3,{id:"navigation--history-modes",children:"Navigation & History Modes"}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"GuestMicroApp"})," component supports two history modes that control how the guest app's URL is managed. The mode is determined by the ",(0,s.jsx)(n.code,{children:"useParentHistory"})," flag in the guest app's ",(0,s.jsx)(n.code,{children:"app.config.json"}),"."]}),"\n",(0,s.jsxs)(n.h4,{id:"useparenthistory-true-default--shared-history",children:[(0,s.jsx)(n.code,{children:"useParentHistory: true"})," (default) \u2014 Shared History"]}),"\n",(0,s.jsx)(n.p,{children:"The guest app shares the host's browser history. Route changes in the guest are reflected in the host's URL bar and vice versa."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{children:"Host URL bar: https://host.example.com/auth-setup/loan/123\n \u2514\u2500 basename \u2500\u2518\u2514 guest route \u2518\n"})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Host app (parent):"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { GuestMicroApp, history } from '@elliemae/pui-app-sdk';\n\nconst LoanApp = () => <GuestMicroApp id=\"loanapp\" history={history} />;\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"Guest app config"})," (",(0,s.jsx)(n.code,{children:"app.config.json"}),"):"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-json",children:'{\n "useParentHistory": true\n}\n'})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"When to use:"})," The guest app is the primary content area and its routes should be bookmarkable / shareable via the host's URL."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsxs)(n.h4,{id:"useparenthistory-false--independent-history",children:[(0,s.jsx)(n.code,{children:"useParentHistory: false"})," \u2014 Independent History"]}),"\n",(0,s.jsx)(n.p,{children:"The guest app runs inside an iframe with its own browser history, independent of the host's URL. The host's URL bar does not change when the guest navigates internally."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{children:"Host URL bar: https://host.example.com/auth-setup (stays fixed)\nIframe URL: https://guest.example.com/dashboard (managed independently)\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"Guest app config"})," (",(0,s.jsx)(n.code,{children:"app.config.json"}),"):"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-json",children:'{\n "useParentHistory": false\n}\n'})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"When to use:"})," The guest app should manage its own navigation without affecting the host's URL \u2014 e.g., an embedded tool, modal-like workflow, or self-contained feature."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h4,{id:"setting-an-initial-route-from-the-host",children:"Setting an Initial Route from the Host"}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"initialRoute"})," prop lets the host app control which route the guest app lands on. This works with both history modes."]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Scenario 1: Shared history with initial route"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:'// Host navigates guest to /auth-setup/loan/123 on load\nconst LoanApp = () => (\n <GuestMicroApp\n id="loanapp"\n history={history}\n initialRoute="/auth-setup/loan/123"\n />\n);\n'})}),"\n",(0,s.jsx)(n.p,{children:"The guest app receives the parent's history, and the host's URL is set to the initial route."}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Scenario 2: Independent history with initial route"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:'// Host tells the guest to start at /app/dashboard\nconst MyApp = () => (\n <GuestMicroApp id="myapp" history={history} initialRoute="/app/dashboard" />\n);\n'})}),"\n",(0,s.jsxs)(n.p,{children:["The SDK defers the route push to the ",(0,s.jsx)(n.code,{children:"mount()"})," phase (after the iframe is stable but before React renders), so the guest's React Router sees the correct URL on its first render \u2014 no flash of the default landing page."]}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"Note:"})," The ",(0,s.jsx)(n.code,{children:"initialRoute"})," value should be the full path including the guest app's basename (e.g., ",(0,s.jsx)(n.code,{children:"/app/dashboard"}),", not just ",(0,s.jsx)(n.code,{children:"/dashboard"}),"). The SDK pushes this path to the browser history directly, and React Router matches it against its configured ",(0,s.jsx)(n.code,{children:"basename"}),"."]}),"\n"]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h4,{id:"quick-reference",children:"Quick Reference"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Scenario"}),(0,s.jsx)(n.th,{children:(0,s.jsx)(n.code,{children:"useParentHistory"})}),(0,s.jsx)(n.th,{children:(0,s.jsx)(n.code,{children:"initialRoute"})}),(0,s.jsx)(n.th,{children:"Behavior"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"Guest shares host URL"}),(0,s.jsxs)(n.td,{children:[(0,s.jsx)(n.code,{children:"true"})," (default)"]}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.em,{children:"omitted"})}),(0,s.jsx)(n.td,{children:"Guest routes reflected in host URL bar"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"Guest shares host URL, starts at specific page"}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"true"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:'"/app/details/42"'})}),(0,s.jsx)(n.td,{children:"Host URL set to initial route on load"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"Guest has own URL space"}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.em,{children:"omitted"})}),(0,s.jsx)(n.td,{children:"Guest loads at its default route, host URL unchanged"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:"Guest has own URL space, starts at specific page"}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"false"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:'"/app/dashboard"'})}),(0,s.jsxs)(n.td,{children:["Guest starts at ",(0,s.jsx)(n.code,{children:"/dashboard"}),", host URL unchanged"]})]})]})]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsxs)(n.h4,{id:"guest-app-appconfigjson-example",children:["Guest App ",(0,s.jsx)(n.code,{children:"app.config.json"})," Example"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-json",children:'{\n "appId": "myapp",\n "useParentHistory": false,\n "activeEnv": "dev",\n "microFrontendApps": {}\n}\n'})}),"\n",(0,s.jsx)(n.h2,{id:"scripting-objects",children:"Scripting Objects"}),"\n",(0,s.jsx)(n.h3,{id:"adding-scripting-objects",children:"Adding Scripting Objects"}),"\n",(0,s.jsx)(n.p,{children:"Access and share scripting objects between parent and child micro-apps:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { CMicroApp } from '@elliemae/pui-app-sdk';\nimport { ScriptingObjectTypes } from '@elliemae/pui-scripting-object';\n\nconst addObject = async (\n app: CMicroApp,\n objectName: keyof ScriptingObjectTypes,\n) => {\n try {\n const so = await app.getObject(objectName);\n if (so) {\n app.addScriptingObject(so);\n }\n } catch (error) {\n // Handle error\n }\n};\n\n// Get scripting objects from parent and expose to child\nexport const addScriptingObjects = async () => {\n const app = CMicroApp.getInstance();\n await Promise.all([\n addObject(app, 'analytics'),\n addObject(app, 'application'),\n addObject(app, 'auth'),\n addObject(app, 'http'),\n addObject(app, 'loan'),\n ]);\n};\n\n// Call during app initialization\nexport const onInit: OnInitCallback = ({ history, homeRoute }) => {\n // ... other initialization\n addScriptingObjects().catch(() => {\n // Handle error\n });\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"using-scripting-objects-in-components",children:"Using Scripting Objects in Components"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { CMicroApp } from '@elliemae/pui-app-sdk';\nimport { useFormContext } from 'react-hook-form';\n\nconst listenToLoanSyncEvent = async (setValue) => {\n const app = CMicroApp.getInstance();\n const loan = await app.getObject('loan');\n\n if (loan) {\n const subscriptionId = app.subscribe({\n eventId: 'loan.sync',\n callback: ({ eventParams }) => {\n const { firstname, lastname } = eventParams;\n setValue('firstname', firstname);\n setValue('lastname', lastname);\n\n // Unsubscribe after handling\n app.unsubscribe({\n eventId: 'loan.sync',\n token: subscriptionId,\n });\n },\n });\n }\n};\n\nexport const FormComponent = () => {\n const { setValue } = useFormContext();\n\n useEffect(() => {\n listenToLoanSyncEvent(setValue).catch(() => {\n // Handle error\n });\n }, [setValue]);\n\n return <div>{/* form fields */}</div>;\n};\n"})}),"\n",(0,s.jsx)(n.h2,{id:"wait-messages",children:"Wait Messages"}),"\n",(0,s.jsx)(n.p,{children:"Display loading indicators with customizable wait messages:"}),"\n",(0,s.jsx)(n.h3,{id:"using-waitmessage-component",children:"Using WaitMessage Component"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { waitMessageAction, useAppDispatch } from '@elliemae/pui-app-sdk';\n\n// Show/hide wait message from anywhere in your app\nfunction MyComponent() {\n const dispatch = useAppDispatch();\n\n const handleLoadData = async () => {\n // Show wait message\n dispatch(waitMessageAction.open('Loading data...', true));\n\n try {\n await fetchData();\n } finally {\n // Hide wait message\n dispatch(waitMessageAction.close());\n }\n };\n\n return <button onClick={handleLoadData}>Load Data</button>;\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"wait-message-props",children:"Wait Message Props"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"size"}),": ",(0,s.jsx)(n.code,{children:"'xs' | 'sm' | 'md' | 'lg' | 'xl'"})," - Size of the spinner"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"color"}),": ",(0,s.jsx)(n.code,{children:"'light' | 'dark'"})," - Color theme"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"showText"}),": ",(0,s.jsx)(n.code,{children:"boolean"})," - Show loading text"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"withTooltip"}),": ",(0,s.jsx)(n.code,{children:"boolean"})," - Show as tooltip"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"tooltipStartPlacementPreference"}),": Tooltip placement"]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"navigation-prompts",children:"Navigation Prompts"}),"\n",(0,s.jsx)(n.p,{children:"Prompt users before navigating away from unsaved changes:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import {\n NavigationPrompt,\n NavigationPromptActions,\n useAppDispatch,\n} from '@elliemae/pui-app-sdk';\n\nfunction FormPage() {\n const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);\n const [showPrompt, setShowPrompt] = useState(false);\n const dispatch = useAppDispatch();\n\n // Listen for navigation prompt actions\n useEffect(() => {\n const handleConfirm = () => {\n // Save data and proceed\n saveData();\n setShowPrompt(false);\n };\n\n const handleCancel = () => {\n // Proceed without saving\n setShowPrompt(false);\n };\n\n // Subscribe to actions\n return () => {\n // Cleanup\n };\n }, []);\n\n // Show prompt when navigating with unsaved changes\n const handleNavigation = () => {\n if (hasUnsavedChanges) {\n setShowPrompt(true);\n }\n };\n\n return (\n <>\n <NavigationPrompt open={showPrompt} />\n {/* Your form */}\n </>\n );\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"dispatch-navigation-prompt-actions",children:"Dispatch Navigation Prompt Actions"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { navigationPrompt } from '@elliemae/pui-app-sdk';\n\n// User confirms to save and continue\ndispatch(navigationPrompt.confirm());\n\n// User cancels or continues without saving\ndispatch(navigationPrompt.cancel());\n"})}),"\n",(0,s.jsx)(n.h2,{id:"error-handling",children:"Error Handling"}),"\n",(0,s.jsx)(n.h3,{id:"global-error-toast",children:"Global Error Toast"}),"\n",(0,s.jsx)(n.p,{children:"Display error messages using the global error toast:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { error, useAppDispatch } from '@elliemae/pui-app-sdk';\n\n// Dispatch errors from anywhere in your app\nfunction MyComponent() {\n const dispatch = useAppDispatch();\n\n const handleError = async () => {\n try {\n await riskyOperation();\n } catch (err) {\n dispatch(\n error.set({\n messageText: 'Operation failed',\n description: (err as Error).message,\n }),\n );\n }\n };\n\n return <button onClick={handleError}>Execute</button>;\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"clear-errors",children:"Clear Errors"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { error } from '@elliemae/pui-app-sdk';\n\n// Clear error state\ndispatch(error.clear());\n"})}),"\n",(0,s.jsx)(n.h2,{id:"aria-live-messages",children:"ARIA Live Messages"}),"\n",(0,s.jsx)(n.p,{children:"Announce messages to screen readers for accessibility:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { ariaLive, useAppDispatch } from '@elliemae/pui-app-sdk';\n\nfunction MyComponent() {\n const dispatch = useAppDispatch();\n\n const announceSuccess = () => {\n dispatch(\n ariaLive.announce({\n message: 'Data saved successfully',\n ariaLive: 'polite', // or 'assertive' for urgent messages\n id: 'save-success',\n }),\n );\n };\n\n return <button onClick={announceSuccess}>Save</button>;\n}\n"})}),"\n",(0,s.jsx)(n.h2,{id:"decorators",children:"Decorators"}),"\n",(0,s.jsx)(n.p,{children:"The SDK provides TypeScript decorators for common patterns:"}),"\n",(0,s.jsx)(n.h3,{id:"function-decorators",children:"Function Decorators"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { decorators } from '@elliemae/pui-app-sdk';\n\nconst {\n CacheUntilResolved,\n Debounce,\n Throttle,\n Memoize,\n MemoizeAsync,\n RetryAsync,\n AsyncSingleExecution,\n QueueTask,\n} = decorators.function;\n\nclass DataService {\n // Cache async results until promise resolves\n @CacheUntilResolved\n async fetchData() {\n return await api.getData();\n }\n\n // Debounce method calls\n @Debounce(500)\n onSearchInput(query: string) {\n this.performSearch(query);\n }\n\n // Throttle method calls\n @Throttle(1000)\n onScroll() {\n this.loadMoreData();\n }\n\n // Memoize synchronous results\n @Memoize\n calculateTotal(items: Item[]) {\n return items.reduce((sum, item) => sum + item.price, 0);\n }\n\n // Memoize async results\n @MemoizeAsync\n async fetchUserData(userId: string) {\n return await api.getUser(userId);\n }\n\n // Retry failed async operations\n @RetryAsync(3, 1000) // 3 retries, 1000ms delay\n async unreliableOperation() {\n return await api.flakeyEndpoint();\n }\n\n // Ensure only one execution at a time\n @AsyncSingleExecution\n async saveData() {\n return await api.save();\n }\n\n // Queue tasks for sequential execution\n @QueueTask\n async processItem(item: Item) {\n return await api.process(item);\n }\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"class-decorators",children:"Class Decorators"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { decorators } from '@elliemae/pui-app-sdk';\n\nconst { Singleton, Mixins } = decorators.class;\n\n// Ensure only one instance exists\n@Singleton\nclass ConfigService {\n private config: Config;\n\n constructor() {\n this.config = loadConfig();\n }\n}\n\n// Mix multiple classes\n@Mixins(LoggingMixin, CachingMixin)\nclass DataManager {\n // Inherits methods from both mixins\n}\n"})}),"\n",(0,s.jsx)(n.h2,{id:"advanced-state-selectors",children:"Advanced State Selectors"}),"\n",(0,s.jsx)(n.h3,{id:"using-usestateselector",children:"Using useStateSelector"}),"\n",(0,s.jsx)(n.p,{children:"Select specific fields from state with better performance:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import {\n useStateSelector,\n useStateSelectorShallow,\n getSelectField,\n} from '@elliemae/pui-app-sdk';\n\n// In your slice file\nexport const selectUserState = getSelectField('user');\n\n// In your component\nfunction UserProfile() {\n // Select single field\n const userName = useStateSelector(selectUserState, 'profile.name', {\n defaultValue: 'Guest',\n });\n\n // Select multiple fields\n const [email, phone, address] = useStateSelector(\n selectUserState,\n ['profile.email', 'profile.phone', 'profile.address'],\n { defaultValue: ['', '', ''] },\n );\n\n // Select nested objects\n const settings = useStateSelector(selectUserState, 'preferences.settings', {\n defaultValue: {},\n });\n\n return <div>{userName}</div>;\n}\n\n// Use shallow equality for better performance\nfunction UserSettings() {\n const settings = useStateSelectorShallow(selectUserState, 'preferences', {\n defaultValue: {},\n });\n\n return <div>{/* render settings */}</div>;\n}\n"})}),"\n",(0,s.jsx)(n.h2,{id:"responsive-design",children:"Responsive Design"}),"\n",(0,s.jsx)(n.h3,{id:"media-query-hook",children:"Media Query Hook"}),"\n",(0,s.jsx)(n.p,{children:"Respond to media query changes:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { useMediaQueryList } from '@elliemae/pui-app-sdk';\n\nfunction ResponsiveComponent() {\n const deviceType = useMediaQueryList(\n [\n '(max-width: 767px)',\n '(min-width: 768px) and (max-width: 1023px)',\n '(min-width: 1024px)',\n ],\n ['mobile', 'tablet', 'desktop'],\n 'desktop', // default value\n );\n\n return (\n <div>\n {deviceType === 'mobile' && <MobileLayout />}\n {deviceType === 'tablet' && <TabletLayout />}\n {deviceType === 'desktop' && <DesktopLayout />}\n </div>\n );\n}\n"})}),"\n",(0,s.jsx)(n.h2,{id:"security-utilities",children:"Security Utilities"}),"\n",(0,s.jsx)(n.h3,{id:"pii-redaction",children:"PII Redaction"}),"\n",(0,s.jsx)(n.p,{children:"Automatically redact personally identifiable information from logs:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { redactPii } from '@elliemae/pui-app-sdk';\n\nconst sensitiveData = {\n name: 'John Doe',\n email: 'john@example.com',\n phone: '555-123-4567',\n ssn: '123-45-6789',\n creditCard: '4532-1234-5678-9010',\n address: '123 Main St, Apt 4B',\n zipcode: '12345-6789',\n};\n\nconst redacted = redactPii(sensitiveData);\nconsole.log(redacted);\n// {\n// name: 'John Doe',\n// email: '****',\n// phone: '****',\n// ssn: '****',\n// creditCard: '****',\n// address: '****',\n// zipcode: '****',\n// }\n\n// Use when logging errors or data\nlogger.error(redactPii({ message: 'Error', data: sensitiveData }));\n"})}),"\n",(0,s.jsx)(n.h2,{id:"listener-middleware",children:"Listener Middleware"}),"\n",(0,s.jsx)(n.p,{children:"Use Redux Toolkit listener middleware for side effects:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import {\n startSideEffect,\n createSideEffect,\n removeSideEffect,\n clearSideEffects,\n} from '@elliemae/pui-app-sdk';\nimport { resources } from './data/resources';\n\n// Start listening for actions\nstartSideEffect({\n actionCreator: resources.get,\n effect: async (action, listenerApi) => {\n // Access state\n const state = listenerApi.getState();\n\n // Call API\n const data = await fetchResources();\n\n // Dispatch success action\n listenerApi.dispatch(resources.getSuccess(data));\n },\n});\n\n// Create a reusable listener\nconst listener = createSideEffect({\n actionCreator: resources.create,\n effect: async (action, listenerApi) => {\n await createResource(action.payload);\n listenerApi.dispatch(resources.get());\n },\n});\n\n// Remove a listener\nremoveSideEffect(listener);\n\n// Clear all listeners\nclearSideEffects();\n"})}),"\n",(0,s.jsx)(n.h2,{id:"session-management",children:"Session Management"}),"\n",(0,s.jsx)(n.h3,{id:"session-timeout-handling",children:"Session Timeout Handling"}),"\n",(0,s.jsx)(n.p,{children:"The SDK provides comprehensive session timeout management with warning and expiry callbacks:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import {\n subscribeToSessionExpiryWarning,\n subscribeToSessionExpiry,\n subscribeToResetSession,\n resetUserIdleTime,\n trackActivity,\n} from '@elliemae/pui-app-sdk';\n\n// Subscribe to session expiry warning (shown before session expires)\nsubscribeToSessionExpiryWarning((warningNotifiedAt) => {\n console.log('Session will expire soon!', warningNotifiedAt);\n // Show warning modal to user\n});\n\n// Subscribe to session expiry event\nsubscribeToSessionExpiry(() => {\n console.log('Session has expired');\n // Redirect to login or handle session expiry\n});\n\n// Subscribe to session reset events\nsubscribeToResetSession((resetWarningModal) => {\n if (resetWarningModal) {\n // Close warning modal if it's open\n }\n});\n\n// Manually reset user idle time (e.g., on user activity)\nresetUserIdleTime(true); // Pass true to reset warning modal\n\n// Track user activity (automatically resets idle timer)\ntrackActivity();\n"})}),"\n",(0,s.jsx)(n.h3,{id:"session-renewal",children:"Session Renewal"}),"\n",(0,s.jsx)(n.p,{children:"Automatically renew sessions with token introspection:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { renewSession } from '@elliemae/pui-app-sdk';\n\n// Manually renew session\nawait renewSession();\n"})}),"\n",(0,s.jsx)(n.h3,{id:"initialize-session-management",children:"Initialize Session Management"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { listenStorageEvents, getAppConfigValue } from '@elliemae/pui-app-sdk';\nimport {\n Environment,\n Logger,\n RuntimeLoggerOptions,\n} from '@elliemae/pui-diagnostics';\n\n// Initialize session management\nlistenStorageEvents();\n\n// Configure logger with session data\nexport const onInit: OnInitCallback = ({ history, homeRoute }) => {\n const sessionData = {\n environment: getAppConfigValue<Environment>('activeEnv'),\n appVersion: window.emui.version,\n instanceId: sessionStorage.getItem('instanceId') || '',\n userId: sessionStorage.getItem('userId') || '',\n };\n\n (logger as Logger).setOptions?.(sessionData as RuntimeLoggerOptions);\n logger.info('Application initialized');\n\n // ... rest of initialization\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"logrocket-integration",children:"LogRocket Integration"}),"\n",(0,s.jsx)(n.p,{children:"Initialize LogRocket for session recording:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { initLogRocket } from '@elliemae/pui-logrocket';\n\n// Initialize LogRocket if configured\nif (window.emui?.logRocketConfig?.appId) {\n initLogRocket();\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"service-worker",children:"Service Worker"}),"\n",(0,s.jsx)(n.p,{children:"Initialize service worker for your app:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { initServiceWorker } from '@elliemae/pui-app-sdk';\nimport { getBasePath } from './utils/paths';\n\n// Initialize after creating CMicroApp instance\napp = CMicroApp.getInstance({\n logger,\n onInit,\n onMount,\n onUnmount,\n});\n\n// Initialize service worker\ninitServiceWorker(getBasePath());\n"})}),"\n",(0,s.jsx)(n.h2,{id:"app-configuration",children:"App Configuration"}),"\n",(0,s.jsx)(n.h3,{id:"loading-configuration",children:"Loading Configuration"}),"\n",(0,s.jsx)(n.p,{children:"Load configuration from a JSON file:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import {\n loadAppConfig,\n setAppConfig,\n getAppConfigValue,\n} from '@elliemae/pui-app-sdk';\n\n// Load from JSON file\nawait loadAppConfig('/path/to/app.config.json');\n\n// Set configuration programmatically\nsetAppConfig({\n appId: 'my-app',\n activeEnv: 'production',\n serviceEndpoints: {\n api: 'https://api.example.com',\n },\n});\n\n// Get specific config value\nconst apiEndpoint = getAppConfigValue('serviceEndpoints.api');\nconst appId = getAppConfigValue('appId');\n"})}),"\n",(0,s.jsx)(n.h3,{id:"update-configuration-values",children:"Update Configuration Values"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { setAppConfigValue } from '@elliemae/pui-app-sdk';\n\n// Update individual config value\nsetAppConfigValue('activeEnv', 'staging');\nsetAppConfigValue('serviceEndpoints.api', 'https://staging-api.example.com');\n"})}),"\n",(0,s.jsx)(n.h2,{id:"web-storage-events",children:"Web Storage Events"}),"\n",(0,s.jsx)(n.p,{children:"Listen to storage events across tabs/windows:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import {\n listenStorageEvents,\n removeStorageEvents,\n} from '@elliemae/pui-app-sdk';\n\n// Start listening to storage events\nlistenStorageEvents();\n\n// Stop listening\nremoveStorageEvents();\n"})}),"\n",(0,s.jsx)(n.h2,{id:"micro-frontend-communication",children:"Micro-Frontend Communication"}),"\n",(0,s.jsx)(n.h3,{id:"host-app-data-exchange",children:"Host App Data Exchange"}),"\n",(0,s.jsx)(n.p,{children:"Exchange data between host and guest apps:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import {\n setHostAppData,\n getHostAppDataByKey,\n fetchHostAppData,\n sendMessageToHost,\n} from '@elliemae/pui-app-sdk';\n\n// In host app: Set data for guest apps\nsetHostAppData({ userId: '123', theme: 'dark' });\n\n// In guest app: Get host data by key\nconst userId = getHostAppDataByKey('userId');\n\n// Fetch all host data\nconst hostData = await fetchHostAppData();\n\n// Send message to host app\nsendMessageToHost({ type: 'UPDATE_THEME', payload: 'light' });\n"})}),"\n",(0,s.jsx)(n.h3,{id:"guest-unload-handlers",children:"Guest Unload Handlers"}),"\n",(0,s.jsx)(n.p,{children:"Handle guest app unload events:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import {\n onGuestUnloadStart,\n notifyGuestUnloadComplete,\n} from '@elliemae/pui-app-sdk';\n\n// Register unload start handler\nonGuestUnloadStart(() => {\n console.log('Guest app is unloading');\n // Cleanup resources\n});\n\n// Notify when unload is complete\nnotifyGuestUnloadComplete();\n"})}),"\n",(0,s.jsx)(n.h3,{id:"render-with-host-data",children:"Render with Host Data"}),"\n",(0,s.jsx)(n.p,{children:"Render component with host app data:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { renderWithHostData } from '@elliemae/pui-app-sdk';\n\nrenderWithHostData(<App />, {\n hostData: { userId: '123' },\n containerId: 'root',\n});\n"})}),"\n",(0,s.jsx)(n.h2,{id:"authentication-utilities",children:"Authentication Utilities"}),"\n",(0,s.jsx)(n.h3,{id:"auth-helper-functions",children:"Auth Helper Functions"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import {\n isUserAuthorized,\n login,\n authorize,\n endSession,\n getAuthorizationHeader,\n setLoginParams,\n} from '@elliemae/pui-app-sdk';\n\n// Check if user is authorized\nif (isUserAuthorized()) {\n // User is logged in\n}\n\n// Get authorization header for API calls\nconst authHeader = getAuthorizationHeader();\n// Returns: 'Bearer <token>'\n\n// Set login parameters\nsetLoginParams({\n clientId: 'your-client-id',\n redirectUri: 'https://your-app.com/callback',\n scope: 'openid profile',\n});\n\n// Trigger login\nawait login();\n\n// Trigger authorization\nawait authorize();\n\n// End session (logout)\nawait endSession({\n clientId: 'your-client-id',\n redirectUri: 'https://your-app.com',\n});\n"})}),"\n",(0,s.jsx)(n.h3,{id:"require-auth-component",children:"Require Auth Component"}),"\n",(0,s.jsx)(n.p,{children:"Protect routes requiring authentication:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { RequireAuth } from '@elliemae/pui-app-sdk';\n\nfunction App() {\n return (\n <RequireAuth>\n <ProtectedContent />\n </RequireAuth>\n );\n}\n"})}),"\n",(0,s.jsx)(n.h2,{id:"utility-hooks",children:"Utility Hooks"}),"\n",(0,s.jsx)(n.h3,{id:"useinjectquery",children:"useInjectQuery"}),"\n",(0,s.jsx)(n.p,{children:"Inject RTK Query endpoints dynamically:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { useInjectQuery } from '@elliemae/pui-app-sdk';\nimport { api } from './api';\n\nfunction MyComponent() {\n useInjectQuery({ key: 'users', endpoint: api.endpoints.getUsers });\n\n // Use the endpoint\n const { data } = api.endpoints.getUsers.useQuery();\n\n return <div>{/* render data */}</div>;\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"useinjectsideeffect",children:"useInjectSideEffect"}),"\n",(0,s.jsx)(n.p,{children:"Inject side effects dynamically:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { useInjectSideEffect } from '@elliemae/pui-app-sdk';\n\nfunction MyComponent() {\n useInjectSideEffect({\n key: 'analytics',\n effect: (action, listenerApi) => {\n // Track analytics\n },\n });\n\n return <div>{/* component */}</div>;\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"useappmiddleware",children:"useAppMiddleware"}),"\n",(0,s.jsx)(n.p,{children:"Access Redux middleware dynamically:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { useAppMiddleware } from '@elliemae/pui-app-sdk';\n\nfunction MyComponent() {\n const middleware = useAppMiddleware();\n\n // Use middleware\n\n return <div>{/* component */}</div>;\n}\n"})}),"\n",(0,s.jsx)(n.h2,{id:"form-components",children:"Form Components"}),"\n",(0,s.jsx)(n.p,{children:"The SDK provides form field components with React Hook Form integration:"}),"\n",(0,s.jsx)(n.h3,{id:"available-form-components",children:"Available Form Components"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import {\n Form,\n TextBox,\n InputText,\n LargeTextBox,\n InputMask,\n MaskedInputText,\n ComboBox,\n ComboBoxV3,\n CheckBox,\n Radio,\n RadioGroup,\n DateInput,\n DatePicker,\n DateTimePicker,\n DateRangePicker,\n Autocomplete,\n Toggle,\n FormSubmitButton,\n FormItemLayout,\n FormLayoutBlockItem,\n ConnectForm,\n} from '@elliemae/pui-app-sdk';\n"})}),"\n",(0,s.jsx)(n.h3,{id:"textbox",children:"TextBox"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:'<TextBox\n name="firstName"\n label="First Name"\n placeholder="Enter first name"\n rules={{ required: \'First name is required\' }}\n/>\n'})}),"\n",(0,s.jsx)(n.h3,{id:"inputmask",children:"InputMask"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:'import { InputMask, MASK_TYPES, MASK_PIPES } from \'@elliemae/pui-app-sdk\';\n\n<InputMask\n name="phone"\n label="Phone Number"\n mask={MASK_TYPES.PHONE}\n pipe={MASK_PIPES.PHONE}\n/>;\n'})}),"\n",(0,s.jsx)(n.h3,{id:"combobox",children:"ComboBox"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"<ComboBox\n name=\"country\"\n label=\"Country\"\n options={[\n { value: 'us', label: 'United States' },\n { value: 'ca', label: 'Canada' },\n ]}\n rules={{ required: 'Please select a country' }}\n/>\n"})}),"\n",(0,s.jsx)(n.h3,{id:"datepicker",children:"DatePicker"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:'<DatePicker\n name="birthDate"\n label="Date of Birth"\n rules={{ required: \'Date of birth is required\' }}\n/>\n'})}),"\n",(0,s.jsx)(n.h3,{id:"daterangepicker",children:"DateRangePicker"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:'<DateRangePicker\n name="dateRange"\n label="Select Date Range"\n startLabel="Start Date"\n endLabel="End Date"\n/>\n'})}),"\n",(0,s.jsx)(n.h3,{id:"checkbox",children:"CheckBox"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:'<CheckBox\n name="agreeToTerms"\n label="I agree to the terms and conditions"\n rules={{ required: \'You must agree to continue\' }}\n/>\n'})}),"\n",(0,s.jsx)(n.h3,{id:"radiogroup",children:"RadioGroup"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:'<RadioGroup name="paymentMethod" label="Payment Method">\n <Radio value="credit" label="Credit Card" />\n <Radio value="debit" label="Debit Card" />\n <Radio value="paypal" label="PayPal" />\n</RadioGroup>\n'})}),"\n",(0,s.jsx)(n.h3,{id:"toggle",children:"Toggle"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:'<Toggle name="notifications" label="Enable Notifications" />\n'})}),"\n",(0,s.jsx)(n.h3,{id:"autocomplete",children:"Autocomplete"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:'<Autocomplete\n name="city"\n label="City"\n options={cities}\n onInputChange={(value) => fetchCities(value)}\n/>\n'})}),"\n",(0,s.jsx)(n.h3,{id:"form-layout",children:"Form Layout"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:'<Form onSubmit={handleSubmit}>\n <FormItemLayout>\n <TextBox name="firstName" label="First Name" />\n <TextBox name="lastName" label="Last Name" />\n </FormItemLayout>\n\n <FormLayoutBlockItem>\n <LargeTextBox name="comments" label="Comments" rows={4} />\n </FormLayoutBlockItem>\n\n <FormSubmitButton>Submit</FormSubmitButton>\n</Form>\n'})}),"\n",(0,s.jsx)(n.h2,{id:"storybook-integration",children:"Storybook Integration"}),"\n",(0,s.jsx)(n.p,{children:"Decorate Storybook stories with app context:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { withAppDecorator } from '@elliemae/pui-app-sdk';\n\nexport default {\n title: 'Components/MyComponent',\n component: MyComponent,\n decorators: [withAppDecorator],\n};\n"})}),"\n",(0,s.jsx)(n.h2,{id:"utility-components",children:"Utility Components"}),"\n",(0,s.jsx)(n.h3,{id:"visuallyhidden",children:"VisuallyHidden"}),"\n",(0,s.jsx)(n.p,{children:"Hide content visually but keep it accessible to screen readers:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { VisuallyHidden } from '@elliemae/pui-app-sdk';\n\n<VisuallyHidden>\n <label htmlFor=\"search\">Search</label>\n</VisuallyHidden>;\n"})}),"\n",(0,s.jsx)(n.h3,{id:"page-component",children:"Page Component"}),"\n",(0,s.jsx)(n.p,{children:"Set page title and metadata:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { Page } from '@elliemae/pui-app-sdk';\n\n<Page pageTitle=\"Dashboard\">\n <DashboardContent />\n</Page>;\n"})}),"\n",(0,s.jsx)(n.h2,{id:"testing",children:"Testing"}),"\n",(0,s.jsx)(n.h3,{id:"testing-with-redux",children:"Testing with Redux"}),"\n",(0,s.jsx)(n.p,{children:"The SDK provides testing helpers for components with Redux:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import {\n renderWithRouterRedux,\n renderWithRedux,\n renderWithRouter,\n} from '@elliemae/pui-app-sdk';\nimport { screen } from '@testing-library/react';\n\ndescribe('MyComponent', () => {\n it('renders with Redux state', () => {\n renderWithRedux(<MyComponent />, {\n initialState: { user: { name: 'John' } },\n });\n\n expect(screen.getByText('John')).toBeInTheDocument();\n });\n\n it('renders with Router and Redux', () => {\n renderWithRouterRedux(<MyComponent />, {\n initialState: { resources: [] },\n route: '/resources',\n });\n\n expect(screen.getByTestId('resource-list')).toBeInTheDocument();\n });\n});\n"})}),"\n",(0,s.jsx)(n.h2,{id:"common-patterns",children:"Common Patterns"}),"\n",(0,s.jsx)(n.h3,{id:"error-boundaries",children:"Error Boundaries"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { ErrorBoundary, ErrorToast } from '@elliemae/pui-app-sdk';\n\nfunction App() {\n return (\n <ErrorBoundary>\n <ErrorToast />\n <YourApp />\n </ErrorBoundary>\n );\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"api-error-handling-with-rtk-query",children:"API Error Handling with RTK Query"}),"\n",(0,s.jsx)(n.p,{children:"RTK Query provides automatic error handling with built-in error states:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { useGetResourceQuery } from './api/resources';\nimport { error } from '@elliemae/pui-app-sdk';\nimport { useAppDispatch } from '@elliemae/pui-app-sdk';\n\nfunction ResourceDetails({ id }: { id: string }) {\n const dispatch = useAppDispatch();\n const { data, error: queryError, isError } = useGetResourceQuery(id);\n\n useEffect(() => {\n if (isError && queryError) {\n dispatch(\n error.set({\n messageText: 'Failed to load resource. Please try again.',\n }),\n );\n }\n }, [isError, queryError, dispatch]);\n\n if (isError) return <div>Error loading resource</div>;\n\n return <div>{data?.name}</div>;\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"api-error-handling-legacy-pattern",children:"API Error Handling (Legacy Pattern)"}),"\n",(0,s.jsx)(n.p,{children:"For direct HTTP client usage, always wrap API calls with proper error handling:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"export const getResource = async (id: string) => {\n try {\n const { data } = await getAuthHTTPClient().get(`/api/resource/${id}`);\n return data;\n } catch (err) {\n logger.error({\n message: 'Failed to get resource',\n exception: err as Error,\n });\n throw new Error(\n `Unable to get resource. Please try again later. Details: ${\n (err as Error)?.message\n }`,\n );\n }\n};\n"})}),"\n",(0,s.jsx)(n.h2,{id:"troubleshooting",children:"Troubleshooting"}),"\n",(0,s.jsx)(n.h3,{id:"store-not-initialized",children:"Store Not Initialized"}),"\n",(0,s.jsxs)(n.p,{children:["Ensure your store is initialized in the ",(0,s.jsx)(n.code,{children:"onInit"})," callback:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"export const onInit: OnInitCallback = ({ history, homeRoute }) => {\n store = configureStore({} as RootState, history);\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"saga-not-running",children:"Saga Not Running"}),"\n",(0,s.jsx)(n.p,{children:"Make sure to inject sagas in your layout or root component:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { useInjectSaga } from '@elliemae/pui-app-sdk';\n\nexport const Layout = () => {\n useInjectSaga({ key: 'resources', saga: resourceSagas });\n // ...\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"scripting-objects-not-available",children:"Scripting Objects Not Available"}),"\n",(0,s.jsx)(n.p,{children:"Ensure scripting objects are added during initialization:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"export const onInit: OnInitCallback = ({ history, homeRoute }) => {\n // ... store initialization\n addScriptingObjects().catch(() => {\n logger.error('Failed to add scripting objects');\n });\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"form-validation-issues",children:"Form Validation Issues"}),"\n",(0,s.jsx)(n.p,{children:"For field-level validation, ensure you're passing correct rules:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"<TextBox\n name=\"email\"\n rules={{\n required: 'Email is required',\n pattern: {\n value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}$/i,\n message: 'Invalid email address',\n },\n }}\n/>\n"})}),"\n",(0,s.jsx)(n.h3,{id:"host-guest-communication",children:"Host-Guest Communication"}),"\n",(0,s.jsx)(n.p,{children:"For communication between host and guest apps:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"// In guest app\nimport { sendMessageToHost } from '@elliemae/pui-app-sdk';\n\nsendMessageToHost({ type: 'UPDATE', payload: data });\n\n// In host app\nimport { fetchHostAppData } from '@elliemae/pui-app-sdk';\n\nconst hostData = await fetchHostAppData();\n"})})]})}function p(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}}}]);