@pega/sdk 0.0.4 → 0.0.5

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

@@ -0,0 +1,492 @@
+# 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, props interface, 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; file is `ToDo.tsx`)
+- **Category:** Widget — assignment / action
+- **Extends:** `PConnProps`
+
+## Props
+
+| 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                                                                                    |
+
+## Component Skeleton
+
+```typescript
+import { useCallback, useEffect, useState } from 'react';
+import { Utils } from '../../helpers/utils';
+import type { PConnProps } from '@pega/sdk-react';
+import './ToDo.css';
+
+interface ToDoProps extends PConnProps {
+  datasource?: any; myWorkList?: any; caseInfoID?: string;
+  headerText?: string; showTodoList?: boolean; type?: string;
+  context?: string; isConfirm?: boolean;
+}
+
+export default function ToDo(props: ToDoProps) {
+  const {
+    getPConnect, context, datasource = [], headerText = 'To do',
+    showTodoList = true, myWorkList = {}, type = 'worklist', isConfirm = false,
+  } = props;
+  const CONSTS = PCore.getConstants();
+  const thePConn = getPConnect();
+  const currentUser = PCore.getEnvironmentInfo().getOperatorName() ?? '';
+  const currentUserInitials = Utils.getInitials(currentUser);
+
+  // 1. Data: derive assignments from props OR fetch
+  const assignmentsSource = Array.isArray(datasource) ? datasource : Array.isArray(datasource?.source) ? datasource.source : Array.isArray(myWorkList?.source) ? myWorkList.source : null;
+  const [fetchedAssignments, setFetchedAssignments] = useState([]);
+
+  // 2. Only fetch for WORKLIST type — TODO type gets data from props directly
+  useEffect(() => {
+    if (type === CONSTS.WORKLIST && myWorkList?.datapage && !assignmentsSource?.length) {
+      PCore.getDataPageUtils().getDataAsync(myWorkList.datapage, context || pConn.getContextName(), ...)
+        .then(response => setFetchedAssignments(response?.data || []));
+    }
+  }, [type, myWorkList?.datapage, context]);
+
+  // Use prop data if available, otherwise use fetched data
+  const assignments = assignmentsSource?.length ? assignmentsSource : fetchedAssignments;
+
+  // 3. clickGo — openAssignment with container options
+  //    IMPORTANT: assignment ID field differs by type!
+  const CONSTS = PCore.getConstants();
+  const getAssignmentId = (assignment) => type === CONSTS.TODO ? assignment.ID : assignment.id;
+
+  function clickGo(assignment) {
+    const id = getAssignmentId(assignment);
+    let classname = assignment.classname || '';
+    if (!classname) classname = thePConn.getCaseInfo().getClassName();
+    const sTarget = thePConn.getContainerName() || '';
+    const options: any = { containerName: sTarget || CONSTS.APP.APP, channelName: '' };
+    if (sTarget === 'workarea') { options.isActionFromToDoList = true; options.target = ''; options.context = null; options.isChild = assignment.isChild; }
+    else { options.isActionFromToDoList = false; options.target = sTarget; }
+    thePConn.getActionsApi().openAssignment(id, classname, options)
+      .catch(() => { setSnackbarMessage('Submit failed!'); setShowSnackbar(true); });
+  }
+
+  // 4. Show more/less toggle
+  function _showMore() { setBShowMore(false); /* fetch all or setAssignments(full list) */ }
+  function _showLess() { setBShowMore(true); setAssignments(a => a.slice(0, 3)); }
+
+  // 5. Render: WORKLIST and TODO have DIFFERENT render structures
+  //    See the two render paths below — they MUST be 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 `package.json` for the installed design system and use its components:
+>
+> | If installed DS is... | Card/Tile                | Badge/Count                 | Chevron Icon                              | Button                   |
+> | --------------------- | ------------------------ | --------------------------- | ----------------------------------------- | ------------------------ |
+> | `@carbon/react`       | `Tile`                   | `Tag type='blue' size='sm'` | `ChevronRight` from `@carbon/react/icons` | `Button kind='ghost'`    |
+> | `@mui/material`       | `Card` + `CardHeader`    | `Badge`                     | `ArrowForwardIosOutlinedIcon`             | `Button`                 |
+> | `antd`                | `Card`                   | `Badge count={N}`           | `RightOutlined`                           | `Button type='link'`     |
+> | `@chakra-ui/react`    | `Card`                   | `Badge`                     | `ChevronRightIcon`                        | `Button variant='ghost'` |
+> | None / CSS-only       | `<div>` with card styles | `<span>` with badge CSS     | `›` character                             | `<button>`               |
+>
+> ❌ **NEVER** use plain `<button>` with inline styles for assignment rows.
+> ❌ **NEVER** use text `›` when a DS chevron icon is available.
+
+### WORKLIST Render Path (complete JSX)
+
+```tsx
+// ─── WORKLIST MODE (homepage) ───
+if (type === CONSTS.WORKLIST) {
+  return (
+    <Card className="psdk-todo">
+      {showTodoList && (
+        <div className="psdk-todo-header">
+          <Avatar>{currentUserInitials}</Avatar>
+          <h4 className="psdk-todo-title">{headerText}</h4>
+          <Badge>{getCount()}</Badge> {/* Badge IMMEDIATELY next to title */}
+        </div>
+      )}
+      <List>
+        {(bShowMore ? assignments.slice(0, 3) : assignments).map((assignment) => (
+          <ListItem
+            key={getAssignmentId(assignment)}
+            onClick={() => clickGo(assignment)}
+            disabled={assignment.canPerform === false}
+          >
+            <div>
+              <strong>{getAssignmentName(assignment)}</strong>
+              <span>
+                In {assignment.name} {getDisplayId(assignment)} • {assignment.status} • Urgency{' '}
+                {getPriority(assignment)}
+              </span>
+            </div>
+            <ChevronRightIcon />
+          </ListItem>
+        ))}
+      </List>
+      {getCount() > 3 &&
+        (bShowMore ? (
+          <Button onClick={handleShowMore}>Show more</Button>
+        ) : (
+          <Button onClick={handleShowLess}>Show less</Button>
+        ))}
+    </Card>
+  );
+}
+```
+
+### TODO Render Path (complete JSX)
+
+```tsx
+// ─── TODO MODE (case view) ───
+const todoContent = (
+  <>
+    {showTodoList && (
+      <div className="psdk-todo-header">
+        <h4 className="psdk-todo-title">{headerText}</h4>
+        <Badge>{assignments.length}</Badge>
+      </div>
+    )}
+    <List>
+      {assignments.map((assignment) => (
+        <ListItem
+          key={getAssignmentId(assignment)}
+          onClick={() => clickGo(assignment)}
+          disabled={assignment.canPerform === false}
+        >
+          <Avatar>{currentUserInitials}</Avatar>
+          <div>
+            <strong>{getAssignmentName(assignment)}</strong>
+            <span>
+              In {getDisplayId(assignment)} • Urgency {getPriority(assignment)}
+            </span>
+          </div>
+          {(!isConfirm || canPerform) && <ChevronRightIcon />}
+        </ListItem>
+      ))}
+      {assignments.length === 0 && showTodoList && <p>You're all caught up!</p>}
+    </List>
+  </>
+);
+if (isConfirm) return <div>{todoContent}</div>;
+return <Card>{todoContent}</Card>;
+```
+
+### Required CSS (create `ToDo.css`)
+
+```css
+.psdk-todo {
+  padding: 1rem;
+}
+.psdk-todo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+.psdk-todo-title {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 500;
+}
+/* Do NOT use flex: 1 on title — badge must sit immediately next to text */
+.psdk-todo-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: #c6c6c6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+.psdk-todo-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid #e0e0e0;
+  cursor: pointer;
+}
+.psdk-todo-row:hover {
+  background: #f4f4f4;
+}
+.psdk-todo-row--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+```
+
+## 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`) via:
+  ```
+  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.
+
+```typescript
+const CONSTS = PCore.getConstants();
+const getAssignmentId = (assignment) => (type === CONSTS.TODO ? assignment.ID : assignment.id);
+
+function clickGo(assignment) {
+  const id = getAssignmentId(assignment);
+  let classname = assignment.classname || '';
+  if (!classname) classname = pConn.getCaseInfo().getClassName(); // fallback
+  const sTarget = pConn.getContainerName() || '';
+  const options: any = { containerName: sTarget || PCore.getConstants().APP.APP, channelName: '' };
+  if (sTarget === 'workarea') {
+    options.isActionFromToDoList = true;
+    options.target = '';
+    options.context = null;
+    options.isChild = assignment.isChild;
+  } else {
+    options.isActionFromToDoList = false;
+    options.target = sTarget;
+  }
+  pConn.getActionsApi().openAssignment(id, classname, options);
+}
+```
+
+### Assignment Item Rendering
+
+> ⚠️ **Worklist vs TODO have DIFFERENT field names and display formats.**
+
+#### Helper functions (MUST include):
+
+```typescript
+const CONSTS = PCore.getConstants();
+const getAssignmentId = (assignment) => (type === CONSTS.TODO ? assignment.ID : assignment.id);
+const getDisplayId = (assignment) => {
+  const refKey = assignment.value || assignment.ID || assignment.id || '';
+  if (assignment.value) return refKey.substring(refKey.lastIndexOf(' ') + 1);
+  const parts = refKey.split('!')[0]?.split(' ');
+  return parts?.[2] || parts?.[parts.length - 1] || refKey;
+};
+const getPriority = (assignment) => (type === CONSTS.TODO ? assignment.urgency : 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 `useMediaQuery(theme.breakpoints.down('sm'))` (MUI) 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()`:
+
+```typescript
+const initials = operatorName
+  .split(' ')
+  .map((w) => w[0])
+  .join('')
+  .substring(0, 2)
+  .toUpperCase();
+```
+
+## 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
+- MUI: `<Card>`, `<CardContent>`, `<CardHeader>`, `<Avatar>`, `<Typography>`, `<Badge>`, `<List>`, `<ListItem>`, `<ListItemText>`, `<Button>`, `<Snackbar>`, `<IconButton>`, `useMediaQuery`, `useTheme`
+- MUI Icons: `<CloseIcon>`, `<ArrowForwardIosOutlinedIcon>`
+
+## Design System Mapping
+
+**UI control type:** Assignment worklist widget with expand/collapse, click-to-open, badge count, and error toast.
+
+Listed design systems are examples only.
+
+| Design System      | Card                      | List                | Badge               | Snackbar                      |
+| ------------------ | ------------------------- | ------------------- | ------------------- | ----------------------------- |
+| Default (CSS only) | `<div>` card              | `<ul>/<li>`         | CSS counter badge   | Custom toast overlay          |
+| MUI                | `<Card>` + `<CardHeader>` | `<List>/<ListItem>` | `<Badge>`           | `<Snackbar>/<Alert>`          |
+| Ant Design         | `<Card>`                  | `<List>`            | `<Badge count={N}>` | `message.error()`             |
+| Chakra UI          | `<Card>`                  | `<VStack>`          | `<Badge>`           | `useToast()`                  |
+| Shadcn/ui          | `<Card>`                  | `<ul>/<li>`         | Custom badge        | `<Toaster>` + `toast.error()` |
+
+When implementing in a specific design system:
+
+- **ALWAYS check `package.json`** to identify the installed design system BEFORE writing render code
+- Import and use the DS's card/badge/icon/button components — do NOT fall back to plain HTML
+- **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
+- Use the DS's chevron/arrow icon (not text `›`) for the row action indicator
+- `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.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/.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.