@pega/sdk 0.0.4 → 0.0.6

package/templates/react-sdk-reference/.ai-common/skills/widget-skills/ToDo.md

@@ -0,0 +1,261 @@
+# Skill: ToDo
+
+Assignment worklist widget. Displays the current user's pending assignments with expand/collapse, click-to-open, priority indicators, badge counts, responsive layout, and snackbar error notifications.
+
+> **Prerequisite skill:** [`widget-components.md`](../widget-components.md) — covers architecture, input contract, data-fetching patterns, and registration conventions common to ALL widget components.
+
+---
+
+## Component Purpose
+
+Renders a compact to-do / worklist panel showing the user's pending assignments. Shows the top 3 items by default with a "Show more" / "Show less" toggle. Supports two modes: `worklist` (personal workbasket) and `todo` (case-level assignments). Clicking an item opens the assignment. A badge in the card header shows the total count.
+
+## Pega Metadata
+
+- **Registration key:** `Todo` (note: lowercase `o` in the key)
+- **Category:** Widget — assignment / action
+- **Extends:** The project's base component interface
+
+## Inputs
+
+| Prop           | Type       | Required | Description                                                                                        |
+| -------------- | ---------- | -------- | -------------------------------------------------------------------------------------------------- |
+| `datasource`   | `any`      | No       | Array of assignments passed directly (used in `todo` type). If provided, skips the data page fetch |
+| `myWorkList`   | `any`      | No       | Work list config object `{ datapage: string, fields: [...] }` — for `worklist` type                |
+| `caseInfoID`   | `string`   | No       | Case ID to filter assignments (used in `todo` type)                                                |
+| `headerText`   | `string`   | No       | Widget title. Default: `"To do"`                                                                   |
+| `itemKey`      | `string`   | No       | Field key (reserved, currently unused)                                                             |
+| `showTodoList` | `boolean`  | No       | Whether to show the assignment list. Default `true`                                                |
+| `type`         | `string`   | No       | `'worklist'` (personal work) or `'todo'` (case-level). Default `'worklist'`                        |
+| `context`      | `string`   | No       | Context name for API calls. Falls back to `pConn.getContextName()`                                 |
+| `isConfirm`    | `boolean`  | No       | Confirmation mode — adjusts rendering for post-submit confirmation view                            |
+| `getPConnect`  | `function` | Yes      | PConnect getter                                                                                    |
+
+## Implementation Structure
+
+**Module Setup:** The component depends on cached callbacks, lifecycle effects, and local state management; the project's SDK utility helpers; and companion styles. Define the input contract as an extension of the project's base component interface with optional `datasource`, `myWorkList`, `caseInfoID`, `headerText`, `showTodoList`, `type`, `context`, and `isConfirm` fields.
+
+**Main Component Logic** — steps in order:
+
+1. Receive `getPConnect`, `context`, `datasource` (default `[]`), `headerText` (default `'To do'`), `showTodoList` (default `true`), `myWorkList` (default `{}`), `type` (default `'worklist'`), and `isConfirm` (default `false`) from inputs. Read `CONSTS = PCore.getConstants()`; call `getPConnect()` into `thePConn`; resolve `currentUser` via `PCore.getEnvironmentInfo().getOperatorName() ?? ''` and `currentUserInitials` via the SDK utility helper `getInitials(currentUser)`.
+2. **Derive assignments from inputs OR fetch:** compute `assignmentsSource` by checking, in order, whether `datasource` is itself an array, whether `datasource?.source` is an array, or whether `myWorkList?.source` is an array — using whichever matches first, or `null` if none do. Declare `fetchedAssignments` local state (default `[]`).
+3. **Only fetch for WORKLIST type** — TODO type gets its data from inputs directly. In a lifecycle effect keyed on `[type, myWorkList?.datapage, context]`: when `type === CONSTS.WORKLIST`, `myWorkList?.datapage` is set, and `assignmentsSource` has no length, call `PCore.getDataPageUtils().getDataAsync(myWorkList.datapage, context || pConn.getContextName(), ...)` and store the response's `data` (or `[]`) via `setFetchedAssignments`.
+4. Resolve the final `assignments` array: use `assignmentsSource` when it has entries, otherwise fall back to `fetchedAssignments`.
+5. **`clickGo` — open the assignment with container options.** The assignment ID field differs by type, so define `getAssignmentId(assignment)` to return `assignment.ID` (uppercase) when `type === CONSTS.TODO`, otherwise `assignment.id` (lowercase). Then define `clickGo(assignment)`: resolve `id` via `getAssignmentId`; resolve `classname` from `assignment.classname`, falling back to `thePConn.getCaseInfo().getClassName()` when empty; resolve `sTarget` from `thePConn.getContainerName() || ''`; build `options = { containerName: sTarget || CONSTS.APP.APP, channelName: '' }`; when `sTarget === 'workarea'`, additionally set `options.isActionFromToDoList = true`, `options.target = ''`, `options.context = null`, and `options.isChild = assignment.isChild`; otherwise set `options.isActionFromToDoList = false` and `options.target = sTarget`. Call `thePConn.getActionsApi().openAssignment(id, classname, options)`, and on failure, set a snackbar error message ("Submit failed!") and show the snackbar.
+6. **Show more/less toggle:** define `_showMore()` to clear the `bShowMore` flag (revealing the full list, either by fetching all or using the already-available full list), and `_showLess()` to set the `bShowMore` flag back to true and slice the visible assignments back down to the first 3.
+7. **Render:** WORKLIST and TODO have DIFFERENT render structures — the two render paths described below MUST be kept separate.
+
+> ⚠️ **CRITICAL — WORKLIST AND TODO RENDER DIFFERENTLY**
+>
+> The component MUST have **two separate render paths** based on `type`:
+>
+> **WORKLIST mode** (homepage — `type === CONSTS.WORKLIST`):
+>
+> - Header: avatar circle (initials) + title + count badge **immediately next to title** (no flex spacer)
+> - Show only first 3 items by default (`bShowMore ? assignments.slice(0, 3) : assignments`)
+> - Each row: name (bold) + subtitle "In {caseName} {caseId} • {status} • Urgency {priority}" + Chevron icon
+> - "Show more" fetches all from data page; "Show less" slices back to 3
+>
+> **TODO mode** (case view — `type === CONSTS.TODO`):
+>
+> - Header: title + count badge (NO avatar in header)
+> - Each row: avatar circle + name (bold) + "In {caseId} • Urgency {priority}" + Chevron icon
+> - `isConfirm` mode: render without card wrapper, hide chevron when `canPerform === false`
+>
+> ❌ **NEVER** use a single render path for both modes.
+> ❌ **NEVER** use `flex: 1` on the title — it pushes the badge to the far right.
+
+> ⚠️ **CRITICAL — USE THE PROJECT'S DESIGN SYSTEM**
+>
+> Check the project's installed design system and use its components for the card, badge/count indicator, chevron icon, and button elements. Do NOT use plain unstyled elements when a design system is available.
+>
+> ❌ **NEVER** use plain unstyled elements for assignment rows when a DS is available.
+> ❌ **NEVER** use text `›` when a DS chevron icon is available.
+
+### WORKLIST Render Path
+
+When `type === CONSTS.WORKLIST`, render a `Card` (class `psdk-todo`). When `showTodoList` is true, render a `psdk-todo-header` div containing an `Avatar` with `currentUserInitials`, an `h4` title (`psdk-todo-title`) showing `headerText`, and a `Badge` showing the total count — the badge must sit immediately next to the title. Below the header, render a `List` of the visible assignments (`bShowMore ? assignments.slice(0, 3) : assignments`), each as a `ListItem` keyed by `getAssignmentId(assignment)`, clickable via `clickGo(assignment)`, and disabled when `assignment.canPerform === false`; each item shows the assignment name in bold plus a subtitle line "In {assignment.name} {getDisplayId(assignment)} • {assignment.status} • Urgency {getPriority(assignment)}", followed by a `ChevronRightIcon`. Below the list, when the total count exceeds 3, render either a "Show more" button (when collapsed) or a "Show less" button (when expanded), wired to the corresponding toggle handlers.
+
+### TODO Render Path
+
+Build a `todoContent` fragment: when `showTodoList` is true, render a `psdk-todo-header` div containing only the `h4` title (`psdk-todo-title`) and a `Badge` showing `assignments.length` (no avatar in the header). Below the header, render a `List` of all `assignments`, each as a `ListItem` keyed by `getAssignmentId(assignment)`, clickable via `clickGo(assignment)`, and disabled when `assignment.canPerform === false`; each item shows an `Avatar` with `currentUserInitials`, the assignment name in bold plus a subtitle line "In {getDisplayId(assignment)} • Urgency {getPriority(assignment)}", and a `ChevronRightIcon` (hidden when `isConfirm` is true and `canPerform` is false). When there are zero assignments and `showTodoList` is true, show the text "You're all caught up!" instead. Finally: when `isConfirm` is true, render `todoContent` inside a plain `div` (no card wrapper); otherwise wrap it in a `Card`.
+
+### Required CSS (create `ToDo.css`)
+
+Define `.psdk-todo` with `1rem` padding. Define `.psdk-todo-header` as a flex row with `0.75rem` gap and `1rem` bottom margin. Define `.psdk-todo-title` with no margin, `1.125rem` font size, and medium (500) font weight — do NOT apply `flex: 1` to it, since the badge must sit immediately next to the text. Define `.psdk-todo-avatar` as a `36px` circle (`border-radius: 50%`) with a gray background (`#c6c6c6`), centered content, `0.8125rem` font size, semi-bold (600) weight, and `flex-shrink: 0`. Define `.psdk-todo-row` as a flex row with `0.75rem` gap, `0.75rem 0` padding, a `1px solid #e0e0e0` bottom border, and a pointer cursor; on hover, give it a light gray background (`#f4f4f4`). Define a `.psdk-todo-row--disabled` modifier with `0.5` opacity and a `not-allowed` cursor.
+
+## Behavioral Contract
+
+### Data Source Resolution
+
+**`type === 'todo'` (case-level):**
+
+- Use `datasource` prop directly (array of assignment objects).
+- `caseInfoID` is used to scope the assignments.
+
+**`type === 'worklist'` (personal work):**
+
+- Fetch from `myWorkList.datapage` (e.g., `D_WorkList`) by calling `PCore.getDataPageUtils().getDataAsync(myWorkList.datapage, context, {}, { pageNumber: 1, pageSize: 50 }, { select: myWorkList.fields }, { invalidateCache: true })`.
+- Map the response to assignment objects.
+
+### Top 3 + Show More
+
+- `showCount` state: default `3`.
+- Render only `assignments.slice(0, showCount)`.
+- If `assignments.length > 3`:
+  - Show a `"Show more"` button → sets `showCount = assignments.length`.
+  - When expanded: show `"Show less"` button → sets `showCount = 3`.
+
+### Badge Count
+
+- Render a `<Badge badgeContent={assignments.length}>` on the card header or alongside the title.
+- Badge shows the total count of assignments, not the currently-visible count.
+
+### Open Assignment
+
+On item click:
+
+> ⚠️ **CRITICAL — Assignment ID field differs by type:**
+>
+> - `type === CONSTS.TODO` → use `assignment.ID` (uppercase)
+> - `type === 'worklist'` → use `assignment.id` (lowercase)
+>
+> Using the wrong casing will pass `undefined` and produce "assignmentID is required parameter" error.
+
+Read `CONSTS = PCore.getConstants()` and define `getAssignmentId(assignment)` to return `assignment.ID` (uppercase) when `type === CONSTS.TODO`, otherwise `assignment.id` (lowercase). Then define `clickGo(assignment)`: resolve `id` via `getAssignmentId`; resolve `classname` from `assignment.classname`, falling back to `pConn.getCaseInfo().getClassName()` when empty; resolve `sTarget` from `pConn.getContainerName() || ''`; build `options = { containerName: sTarget || PCore.getConstants().APP.APP, channelName: '' }`; when `sTarget === 'workarea'`, additionally set `options.isActionFromToDoList = true`, `options.target = ''`, `options.context = null`, and `options.isChild = assignment.isChild`; otherwise set `options.isActionFromToDoList = false` and `options.target = sTarget`. Finally call `pConn.getActionsApi().openAssignment(id, classname, options)`.
+
+### Assignment Item Rendering
+
+> ⚠️ **Worklist vs TODO have DIFFERENT field names and display formats.**
+
+#### Helper functions (MUST include):
+
+Read `CONSTS = PCore.getConstants()`. Define `getAssignmentId(assignment)` to return `assignment.ID` (uppercase) when `type === CONSTS.TODO`, otherwise `assignment.id` (lowercase). Define `getDisplayId(assignment)`: resolve `refKey` from `assignment.value || assignment.ID || assignment.id || ''`; when `assignment.value` is present, return the substring of `refKey` after its last space; otherwise split `refKey` on `'!'` and take the first segment, split that on spaces into `parts`, and return `parts[2]` if present, else the last element of `parts`, else `refKey` itself. Define `getPriority(assignment)` to return `assignment.urgency` when `type === CONSTS.TODO`, otherwise `assignment.priority`.
+
+#### Data source:
+
+- **TODO type** (`type === CONSTS.TODO`): data from `datasource.source` prop (synchronous, do NOT fetch)
+- **WORKLIST type** (`type === CONSTS.WORKLIST`): data fetched from `myWorkList.datapage` via `getDataAsync`
+
+Use prop data directly when available (`assignmentsSource`), only fetch for WORKLIST when no prop data exists.
+
+#### Field names by type:
+
+| Field            | WORKLIST (`assignment.xxx`)            | TODO (`assignment.xxx`)                |
+| ---------------- | -------------------------------------- | -------------------------------------- |
+| Assignment ID    | `id` (lowercase)                       | `ID` (uppercase)                       |
+| Step/task name   | `stepName` or `name`                   | `name` or `stepName`                   |
+| Case type label  | `name`                                 | —                                      |
+| Case ID          | extract from `id` via `getDisplayId()` | extract from `ID` via `getDisplayId()` |
+| Status           | `status`                               | —                                      |
+| Priority/Urgency | `priority`                             | `urgency`                              |
+| Class name       | `classname`                            | `classname`                            |
+
+#### Display format per item:
+
+- **WORKLIST:** `"In {assignment.name} {getDisplayId(assignment)} • {assignment.status} • Urgency {getPriority(assignment)}"`
+- **TODO:** `"In {getDisplayId(assignment)} • Urgency {getPriority(assignment)}"`
+
+#### Each item renders:
+
+- **Avatar:** Circle with operator initials
+- **Name (bold):** `assignment.stepName || assignment.name` (the task/step name)
+- **Subtitle:** The format string above (WORKLIST or TODO format)
+- **Chevron:** Right-pointing arrow `›` indicating clickable
+
+#### `showTodoList` behavior:
+
+- Items should ALWAYS render when `assignments.length > 0` — do NOT gate by `showTodoList`
+- Only show "You're all caught up" empty state when `showTodoList === true && assignments.length === 0`
+
+### Responsive Layout
+
+Use the DS's responsive breakpoint utility or a CSS media query to detect mobile:
+
+- **Desktop:** Show avatar, name, status, priority, and arrow in a horizontal row.
+- **Mobile:** Stack or truncate elements for narrow display.
+
+### `canPerform` Permission Check
+
+If an assignment has `canPerform === false`, render it as non-clickable (greyed out, no onClick handler).
+
+### Snackbar Error
+
+- On `openAssignment` failure, catch the error and show a `<Snackbar>` with the error message.
+- Auto-hide after 3000ms.
+- `<IconButton>` (`<CloseIcon>`) to manually dismiss.
+
+### Operator Avatar Initials
+
+Extract initials from `PCore.getEnvironmentInfo().getOperatorName()`: split the operator name on spaces, take the first character of each word, join them together, take the first 2 characters, and uppercase the result.
+
+## Visual Specifications
+
+### Card Layout
+
+| Element               | Description                                         |
+| --------------------- | --------------------------------------------------- |
+| Card header           | `headerText` (default `"To do"`) + badge with count |
+| Assignment rows       | Up to `showCount` items                             |
+| Show more/less button | Below the last visible item                         |
+
+### Assignment Row
+
+| Element            | Desktop   | Mobile          |
+| ------------------ | --------- | --------------- |
+| Avatar circle      | Shown     | Shown           |
+| Task name          | Full text | Truncated       |
+| Status badge       | Shown     | Hidden or small |
+| Priority indicator | Shown     | Simplified      |
+| Arrow icon         | Shown     | Shown           |
+
+**CSS-only implementation notes:**
+
+- Card: standard card layout.
+- Assignment row: `display: flex; align-items: center; gap: 0.75rem; padding: 10px 0; cursor: pointer; border-bottom: 1px solid var(--divider-color)`.
+- Avatar: `width: 36px; height: 36px; border-radius: 50%; background: var(--avatar-bg); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 600`.
+- Status badge: `padding: 2px 6px; border-radius: 10px; font-size: 0.75rem; background: var(--status-bg-color)`.
+- Priority: `font-size: 0.75rem; color: var(--secondary-text-color)`.
+- Arrow: `margin-left: auto; color: var(--secondary-text-color)`.
+- Non-clickable (canPerform=false): `opacity: 0.5; cursor: not-allowed`.
+- Show more button: `width: 100%; text-align: center; padding: 8px; color: var(--app-primary-color)`.
+
+## Edge Cases & Special Logic
+
+- `type` defaults to `'worklist'` — handle the fallback gracefully if `type` is undefined.
+- `datasource` prop vs fetch: if `datasource` is provided (non-empty), skip the data page fetch entirely.
+- `myWorkList` may be undefined for `todo` type — do not attempt a fetch if it's missing.
+- `showTodoList === false` — render only the card header (with badge count) and hide the list body.
+- `isConfirm === true` — used in the Confirmation template context; may adjust layout to hide certain elements (e.g., hide status badge, show simpler view).
+- Empty assignments — show a `"No tasks"` or `"You're all caught up!"` empty state message.
+- `canPerform` check: if `false`, disable click and show cursor `not-allowed`. Do not open the assignment.
+- Container name fallback: `pConn.getContainerName() || PCore.getConstants().APP.APP` — always provide a container name to `openAssignment`.
+
+## Dependencies
+
+- `PCore.getDataPageUtils().getDataAsync()` — worklist data page fetch
+- `PCore.getEnvironmentInfo()` — operator name for avatar initials
+- `PCore.getConstants()` — CASE_INFO, WORK_BASKET, TODO, APP constants
+- `PCore.getLocaleUtils()` — assignment label localization
+- `pConn.getActionsApi().openAssignment()` — opens the selected assignment
+- The DS's card, avatar, badge, list, button, snackbar/toast, and icon components.
+- The DS's responsive breakpoint utility or CSS media queries for mobile detection.
+
+## Design System Mapping
+
+**UI control type:** Assignment worklist widget with expand/collapse, click-to-open, badge count, and error toast.
+
+When implementing in a specific design system, map the following:
+
+- **Card** → use the DS's card component for the widget container
+- **List** → use the DS's list or vertical stack component for assignment rows
+- **Badge** → use the DS's badge/count indicator component next to the title
+- **Snackbar/toast** → use the DS's notification/toast component for error messages
+- **Avatar** → use the DS's avatar component (or a styled circle with initials)
+- **Chevron icon** → use the DS's right-pointing arrow/chevron icon (not text `›`)
+- **WORKLIST and TODO MUST have separate render paths** — they have different header layouts and subtitle formats
+- **Badge/count MUST sit immediately next to the title** — do NOT use `flex: 1` on the title or push badge to far right
+- Show top 3 items by default — `bShowMore ? assignments.slice(0, 3) : assignments` controls the slice
+- `canPerform === false` must make the row non-clickable — check this before calling `openAssignment`
+- `type === 'worklist'` fetches from a data page; `type === 'todo'` uses the `datasource` prop — both paths must be implemented
+- Operator initials for the avatar must be derived from `PCore.getEnvironmentInfo().getOperatorName()`

package/templates/react-sdk-reference/package.json

@@ -16,7 +16,7 @@
     "@mui/material": "^9.2.0",
     "@mui/styles": "^6.5.0",
     "@mui/x-date-pickers": "^9.9.0",
-    "@pega/auth": "file:pega-auth-0.2.42.tgz",
+    "@pega/auth": "file:pega-auth-0.2.44.tgz",
     "@pega/constellationjs": "file:pega-constellationjs-0.26.3-local.tgz",
     "@pega/sdk-react": "file:pega-sdk-react-0.1.0.tgz",
     "@pega/sdk-types": "file:pega-sdk-types-0.1.0.tgz",

package/templates/react-sdk-reference/package.minimal.json

@@ -0,0 +1,29 @@
+{
+  "name": "@pega/react-sdk-reference",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@pega/auth": "file:pega-auth-0.2.42.tgz",
+    "@pega/constellationjs": "file:pega-constellationjs-0.26.3-local.tgz",
+    "@pega/sdk-react": "file:pega-sdk-react-0.1.0.tgz",
+    "@pega/sdk-types": "file:pega-sdk-types-0.1.0.tgz",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-router-dom": "^7.18.1"
+  },
+  "devDependencies": {
+    "@pega/pcore-pconnect-typedefs": "^4.1.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.3",
+    "typescript": "~6.0.3",
+    "vite": "^8.1.4",
+    "vite-plugin-static-copy": "^4.1.1"
+  }
+}

package/templates/react-sdk-reference/src/AppProviders.tsx

@@ -0,0 +1,17 @@
+import type { PropsWithChildren } from 'react';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { ThemeProvider as LegacyThemeProvider } from '@mui/styles';
+
+const muiTheme = createTheme();
+
+export function AppProviders({ children }: PropsWithChildren) {
+  return (
+    <ThemeProvider theme={muiTheme}>
+      <LegacyThemeProvider theme={muiTheme}>
+        <LocalizationProvider dateAdapter={AdapterDayjs}>{children}</LocalizationProvider>
+      </LegacyThemeProvider>
+    </ThemeProvider>
+  );
+}

package/templates/react-sdk-reference/src/MashupApp.tsx

@@ -15,13 +15,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 // ── React adapter (includes sdk-core re-exports)  ───────────────────────────────────────
 import { PConnectComponent, PegaStoreContext, registerComponentCreator } from '@pega/sdk-react';
 
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import { ThemeProvider as LegacyThemeProvider } from '@mui/styles';
-
 // ── Sample components (local to this app) ───────────────────────────────────────────────────────
 import { registerSampleComponents } from './components/component-map';
+import { AppProviders } from './AppProviders';
 
 // ── @pega/auth for SDK config access ────────────────────────────────────────
 import { getSdkConfig } from '@pega/auth/lib/sdk-auth-manager';
@@ -76,25 +72,18 @@ const QUICK_LINKS = [
   },
 ];
 
-// ─── Root Component ─────────────────────────────────────────────────────────
-const muiTheme = createTheme();
-
 function RootComponent({ renderProps, registry }: { renderProps: Record<string, unknown>; registry: any }) {
   const contextValue = useMemo(() => ({ store: PCore.getStore() }), []);
   const getPConnect = renderProps.getPConnect as () => any;
 
   return (
-    <ThemeProvider theme={muiTheme}>
-      <LegacyThemeProvider theme={muiTheme}>
-        <LocalizationProvider dateAdapter={AdapterDayjs}>
-          <PegaStoreContext.Provider value={contextValue}>
-            <div style={styles.root}>
-              <PConnectComponent getPConnect={getPConnect} componentRegistry={registry} fallback={FallbackComponent} />
-            </div>
-          </PegaStoreContext.Provider>
-        </LocalizationProvider>
-      </LegacyThemeProvider>
-    </ThemeProvider>
+    <AppProviders>
+      <PegaStoreContext.Provider value={contextValue}>
+        <div style={styles.root}>
+          <PConnectComponent getPConnect={getPConnect} componentRegistry={registry} fallback={FallbackComponent} />
+        </div>
+      </PegaStoreContext.Provider>
+    </AppProviders>
   );
 }
 

package/templates/react-sdk-reference/src/PortalApp.tsx

@@ -13,34 +13,23 @@ import { useLocation } from 'react-router-dom';
 
 import { PConnectComponent, PegaStoreContext, registerComponentCreator } from '@pega/sdk-react';
 
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import { ThemeProvider as LegacyThemeProvider } from '@mui/styles';
-
 import { registerSampleComponents } from './components/component-map';
+import { AppProviders } from './AppProviders';
 import { getSdkConfig } from '@pega/auth/lib/sdk-auth-manager';
 import { AuthClient } from '@pega/auth';
 
 import { FallbackComponent } from './FallbackComponent';
 
-// ─── Root Component ─────────────────────────────────────────────────────────
-const muiTheme = createTheme();
-
 function RootComponent({ renderProps, registry }: { renderProps: Record<string, unknown>; registry: any }) {
   const contextValue = useMemo(() => ({ store: PCore.getStore() }), []);
   const getPConnect = renderProps.getPConnect as () => any;
 
   return (
-    <ThemeProvider theme={muiTheme}>
-      <LegacyThemeProvider theme={muiTheme}>
-        <LocalizationProvider dateAdapter={AdapterDayjs}>
-          <PegaStoreContext.Provider value={contextValue}>
-            <PConnectComponent getPConnect={getPConnect} componentRegistry={registry} fallback={FallbackComponent} />
-          </PegaStoreContext.Provider>
-        </LocalizationProvider>
-      </LegacyThemeProvider>
-    </ThemeProvider>
+    <AppProviders>
+      <PegaStoreContext.Provider value={contextValue}>
+        <PConnectComponent getPConnect={getPConnect} componentRegistry={registry} fallback={FallbackComponent} />
+      </PegaStoreContext.Provider>
+    </AppProviders>
   );
 }
 

package/templates/react-sdk-reference/src/components/helpers/formatters/index.ts

@@ -42,18 +42,28 @@ function isIsoDate(str) {
 }
 
 function parseDateInISO(value) {
+  if (!value) return value;
+
   const isMilliSeconds = /^[0-9]+$/.exec(value);
   if (isMilliSeconds) {
     const date = new Date(parseInt(value, 10));
-    return date.toISOString();
+    if (!Number.isNaN(date.getTime())) return date.toISOString();
+    return value;
   }
 
   if (isIsoDate(value)) {
     const date = new Date(value);
-    return date.toISOString();
+    if (!Number.isNaN(date.getTime())) return date.toISOString();
+    return value;
   }
 
-  return value ? getDateObject(value).toISOString() : value;
+  try {
+    const date = getDateObject(value);
+    if (!Number.isNaN(date.getTime())) return date.toISOString();
+  } catch {
+    // value is not a parseable date
+  }
+  return value;
 }
 
 export function format(value, type, options = {}): string {

package/templates/react-native-sdk-reference/.github/AGENTS.md

@@ -1,23 +0,0 @@
-# Agents
-
-## SDK Component Developer
-
-This agent specializes in creating and modifying Pega SDK components.
-
-### Capabilities
-
-- Creating new field, template, and widget components
-- Registering components in the component map
-- Debugging PConnect prop issues
-- Handling form validation and state management
-
-### Skills
-
-- [pega-sdk-component](.github/skills/pega-sdk-component.md)
-
-### Instructions
-
-- Always follow the PConnect pattern for data binding
-- Use MUI components for UI primitives
-- Handle loading states and error states gracefully
-- Ensure components are registered in the component map after creation

package/templates/react-native-sdk-reference/.github/copilot-instructions.md

@@ -1,40 +0,0 @@
-# Pega SDK Project
-
-## Coding Guidelines
-
-- Use TypeScript strict mode
-- Follow the component patterns established in the `src/components/` directory
-- Each component should handle its own PConnect props via `getPConnect()`
-- Use MUI (Material UI) for UI primitives
-- Register all components in `src/components/component-map.ts`
-
-## Pega SDK Architecture
-
-- **PConnect**: The bridge between Pega's DX engine and your UI components
-- **ComponentRegistry**: Maps Pega component type names to your React/Angular/WC implementations
-- **BootstrapClient**: Handles auth + loading the Pega runtime
-- **PCore**: Global Pega runtime API (available after bootstrap)
-
-## Key Patterns
-
-### Creating a new field component
-
-1. Create a file in `src/components/field/MyField/index.ts`
-2. Accept `getPConnect` prop, extract `actionsApi` and `stateProps`
-3. Call `actions.updateFieldValue()` on change and `actions.triggerFieldChange()` on blur
-4. Register in `component-map.ts`
-
-### Creating a new template component
-
-1. Create in `src/components/template/MyTemplate/index.ts`
-2. Use `pConn.getChildren()` to get child PConnect nodes
-3. Render children via `<PConnectComponent getPConnect={() => child.getPConnect()} />`
-
-## SDK Config
-
-The `sdk-config.json` file configures:
-
-- `serverConfig.infinityRestServerUrl` — Pega server endpoint
-- `serverConfig.appAlias` — Application alias
-- `authConfig.mashupClientId` — OAuth client ID for embedded mode
-- `authConfig.portalClientId` — OAuth client ID for portal mode

package/templates/react-native-sdk-reference/.github/skills/pega-sdk-component.md

@@ -1,48 +0,0 @@
----
-name: pega-sdk-component
-description: Create a new Pega SDK component (field, template, or widget)
----
-
-# Pega SDK Component Skill
-
-You are an expert at building Pega SDK components. When asked to create a component:
-
-## For Field Components
-
-Create a React component that:
-
-1. Accepts `getPConnect` as a prop
-2. Extracts the PConnect instance: `const pConn = getPConnect()`
-3. Gets the actions API: `const actions = pConn.getActionsApi()`
-4. Gets the property name: `const propName = pConn.getStateProps().value`
-5. Handles value changes with `actions.updateFieldValue(propName, value)`
-6. Triggers validation on blur with `actions.triggerFieldChange(propName, value)`
-7. Displays validation errors from `validatemessage` prop
-
-## For Template Components
-
-Create a React component that:
-
-1. Accepts `getPConnect` as a prop
-2. Gets children: `const children = pConn.getChildren()`
-3. Renders each child using `<PConnectComponent getPConnect={() => child.getPConnect()} />`
-4. Applies layout (grid, flex, etc.) around the children
-
-## For Widget Components
-
-Create a React component that:
-
-1. Accepts `getPConnect` as a prop
-2. Reads data from PConnect: `pConn.getValue('.propertyPath')`
-3. May call PCore APIs for data fetching
-4. Renders the widget UI
-
-## Registration
-
-After creating the component, add it to `src/components/component-map.ts`:
-
-```typescript
-import MyComponent from './field/MyComponent';
-// In getSampleComponentMap():
-MyComponent,
-```

package/templates/react-native-sdk-reference/App.tsx

@@ -1,49 +0,0 @@
-import { View, Text, StyleSheet, Button } from 'react-native';
-
-/**
- * Pega SDK React Native Reference App (Experimental)
- *
- * This is a starter template for using @pega/sdk-react with React Native.
- * Note: React Native support is experimental. The SDK bridge components
- * may need adaptation for native rendering.
- */
-export default function App() {
-  const handleCreateCase = () => {
-    // TODO: Initialize Pega auth + bootstrap, then create a case
-    console.log('Create case — implement with Pega SDK');
-  };
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Pega SDK — React Native</Text>
-      <Text style={styles.subtitle}>Configure sdk-config.json and implement your Pega integration.</Text>
-      <View style={styles.buttonContainer}>
-        <Button title="Create Case" onPress={handleCreateCase} />
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 24,
-    backgroundColor: '#fff',
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-    marginBottom: 12,
-  },
-  subtitle: {
-    fontSize: 14,
-    color: '#64748b',
-    textAlign: 'center',
-    marginBottom: 24,
-  },
-  buttonContainer: {
-    marginTop: 16,
-  },
-});

package/templates/react-sdk-reference/.claude/instructions/component-map.md

@@ -1,38 +0,0 @@
-<!-- Applies to: **/component-map.ts -->
-
-# Component Map Rules
-
-The component map (`src/components/component-map.ts`) is the registry that maps Pega component names to React implementations.
-
-## Structure
-
-```typescript
-import { sdkComponents } from '@pega/sdk-react';
-
-function getSampleComponentMap() {
-  return {
-    ...sdkComponents, // NEVER remove this — provides infrastructure
-    // Your components below:
-    TextInput,
-    Dropdown,
-    // ...
-  };
-}
-```
-
-## Rules
-
-1. **NEVER remove `...sdkComponents`** — it provides View, Region, Reference, RootContainer, FlowContainer, ViewContainer, Assignment, AssignmentCard, ErrorBoundary, MultiStep, CaseSummary, and their aliases.
-
-2. **Map keys must match Pega component names exactly** — these are resolved at runtime by the platform. The key is what Pega sends; the value is your React component.
-
-3. **To replace a component**: change its import path to your new implementation. Do NOT rename the key.
-
-4. **To add a new component**: add the import + add a new key-value entry.
-
-5. **Key naming exceptions** (where key differs from variable name):
-   - `Date: DateField` (Date is reserved in JS)
-   - `URL: URLComponent` (URL is a global)
-   - `Todo: ToDo` (casing difference)
-
-6. **Keep the `registerSampleComponents` function** — it registers all entries into the `ComponentRegistry` instance used by the PConnect bridge.