@pega/sdk 0.0.4 → 0.0.5

package/templates/react-sdk-reference/.claude/skills/template-skills/SubTabs.md

@@ -1,82 +0,0 @@
-# Skill: SubTabs
-
-Sub-tabs navigation template. Renders a tab container for case view sections using shared tab utilities with deferred content loading.
-
-> **Prerequisite skill:** [`template-components.md`](../template-components.md) — covers architecture, child rendering patterns, and registration conventions common to ALL template components.
-
----
-
-## Component Purpose
-
-Renders a horizontal tab bar for navigating between case view sections. Uses shared `tabUtils` for tab state management (visible tabs, transient tabs, tab click). Tab content is deferred — only the active tab loads content. No section heading.
-
-## Pega Metadata
-
-- **Registration key:** `SubTabs` (in `component-map.ts`)
-- **Category:** Navigation template
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop          | Type          | Required | Description                                         |
-| ------------- | ------------- | -------- | --------------------------------------------------- |
-| `children`    | `ReactNode[]` | Yes      | `children[0]` is the deferred-loaded tabs container |
-| `getPConnect` | `function`    | Yes      | PConnect getter                                     |
-
-## Behavioral Contract
-
-1. **Extract deferred tabs:** `deferLoadedTabs = Children.toArray(children)[0]`.
-2. **State:** `currentTabId` (string, default `'0'`), `tabItems` (array).
-3. **Compute visible tabs:** `getVisibleTabs(deferLoadedTabs, 'tabsSubs')` in `useEffect([deferLoadedTabs])` → `availableTabs`.
-4. **Transient tabs:** `useEffect([currentTabId])` → `setTabItems(getTransientTabs(availableTabs, currentTabId, tabItems))`.
-5. **Tab click:** `tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems)` from `tabUtils`.
-6. **Render:**
-   - `<TabContext value={currentTabId}>`
-   - `<Tabs onChange={handleTabClick} value={currentTabId}>` — one `<Tab>` per `tabItems`
-   - One `<TabPanel>` per `tabItems` with `tab.content || ''`
-7. No section heading (unlike `DetailsSubTabs`).
-
-> **Difference from `DetailsSubTabs`:** SubTabs has no `label`/`showLabel` props and no `<h3>` heading. Uses `'tabsSubs'` identifier for `getVisibleTabs` (vs `'detailsSubTabs'`).
-
-## Visual Specifications
-
-Identical to `DetailsSubTabs` except no heading above the tab bar.
-
-**CSS-only implementation notes:**
-
-- Tab bar: `display: flex; border-bottom: 2px solid var(--divider)`.
-- Each tab: `padding: 8px 16px; cursor: pointer; border-bottom: 2px solid transparent`.
-- Active tab: `border-bottom-color: var(--app-primary-color); font-weight: 600`.
-- Tab panel: `padding: 16px 0`.
-
-## Edge Cases & Special Logic
-
-See `DetailsSubTabs.md` for shared edge cases. Additional:
-
-- `tabUtils` identifier string `'tabsSubs'` must match exactly — it is used internally by `getVisibleTabs` for scoping.
-
-## Dependencies
-
-- `getTransientTabs`, `getVisibleTabs`, `tabClick` from `./tabUtils`
-- `TabContext`, `TabPanel` from `@mui/lab`
-- `Tab`, `Tabs` from `@mui/material`
-
-## Design System Mapping
-
-**UI control type:** Tab navigation container — no heading, deferred content loading.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                    |
-| ------------------ | -------------------------------------------------------- |
-| Default (CSS only) | Custom tab bar with CSS underline indicator              |
-| MUI                | `<TabContext>` + `<Tabs>` + `<TabPanel>` from `@mui/lab` |
-| Ant Design         | `<Tabs>` with `items` array                              |
-| Chakra UI          | `<Tabs>` + `<TabList>` + `<TabPanels>`                   |
-| Shadcn/ui          | `<Tabs>` + `<TabsList>` + `<TabsContent>`                |
-
-When implementing in a specific design system:
-
-- Use `getVisibleTabs(tabs, 'tabsSubs')` — the identifier string must be `'tabsSubs'`
-- No heading above the tab bar (unlike `DetailsSubTabs`)
-- Deferred loading: content populates lazily via `getTransientTabs`

package/templates/react-sdk-reference/.claude/skills/widget-skills/FileUtility.md

@@ -1,206 +0,0 @@
-# Skill: FileUtility
-
-File and URL management utility widget. Displays case attachments and links, supports upload/download/delete, and provides modals for adding new files or URLs. Also covers `ActionButtonsForFileUtil` sub-component.
-
-> **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
-
-The primary attachments management panel in the case utilities column. Shows up to 3 attachments/links in the main view with a "View all" option that opens a modal with the full list. Users can upload files, attach URLs, download, and delete items. Attachment state is kept fresh via debounced pub-sub subscriptions.
-
-## Pega Metadata
-
-- **Registration key:** `FileUtility` (in `component-map.ts`)
-- **Category:** Widget — file management
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop          | Type       | Required | Description                                                                       |
-| ------------- | ---------- | -------- | --------------------------------------------------------------------------------- |
-| `caseId`      | `string`   | No       | Optional case ID override. If absent, resolved from `pConn.getCaseInfo().getID()` |
-| `getPConnect` | `function` | Yes      | PConnect getter                                                                   |
-
-## Behavioral Contract
-
-### Attachment Fetch
-
-On mount and on attachment change events:
-
-```
-PCore.getAttachmentUtils().getCaseAttachments(caseKey, context)
-```
-
-Returns array of attachment/link objects. Store in `attachments` state.
-
-Debounced auto-refresh: on `CASE_ATTACHMENTS_UPDATED` pub-sub event, wait 1000ms (debounced) then re-fetch. This prevents rapid re-fetches when multiple files are uploaded simultaneously.
-
-### Main View — Top 3 Display
-
-Show only the first 3 items from `attachments`. If `attachments.length > 3`, show a `"View all (N)"` button that opens the full-list modal.
-
-### SummaryList Integration
-
-Map each attachment/link to a `SummaryItem`-compatible object:
-
-```typescript
-{
-  id: attachment.ID,
-  visual: { icon: getFileIcon(attachment.mimeType) },
-  primary: {
-    type: attachment.category === 'FILE' ? 'FILE' : 'URL',
-    name: attachment.name,
-    click: () => handleDownloadOrOpen(attachment)
-  },
-  secondary: { text: attachment.createdBy + ' · ' + formatDate(attachment.createTime) }
-  actions: [
-    { id: 'delete', text: 'Delete', icon: 'trash', onClick: () => handleDelete(attachment.ID) }
-  ]
-}
-```
-
-Pass to `<SummaryList arItems$={summaryItems} />`.
-
-### File Upload
-
-1. User clicks "Add file" from the `<Menu>`.
-2. Opens an add-file modal (dialog).
-3. User selects a file via `<input type='file'>`.
-4. On confirm: call `PCore.getAttachmentUtils().uploadAttachment(file, onProgress, onError, context)`.
-5. On success: call `PCore.getAttachmentUtils().linkAttachmentsToCase(caseKey, [newAttachment], context)`.
-6. Refresh attachment list.
-
-### URL Attachment
-
-1. User clicks "Add link" from the `<Menu>`.
-2. Opens add-link modal with two fields: `Title` (required) and `URL` (required).
-3. The "Attach" button is enabled only when both `title` and `url` are non-empty.
-4. On confirm: call `PCore.getAttachmentUtils().linkAttachmentsToCase(caseKey, [{ name: title, url, category: 'URL' }], context)`.
-5. Refresh attachment list.
-
-### Download / Open
-
-- **FILE type:** Call `PCore.getAttachmentUtils().downloadAttachment(attachmentID, context)` then trigger browser download via `downloadjs`.
-- **URL type:** Open `attachment.url` in a new browser tab (`window.open(url, '_blank')`).
-
-### Delete
-
-Call `PCore.getAttachmentUtils().deleteAttachment(attachmentID, context)`. Refresh attachment list after success.
-
-### Actions Menu
-
-Render a `<MoreVertIcon>` `<IconButton>` that opens a `<Menu>` with:
-
-- `"Add file"` — opens add-file modal
-- `"Add link"` — opens add-link modal
-
-## Visual Specifications
-
-### Main Card
-
-| Element           | Description                                  |
-| ----------------- | -------------------------------------------- |
-| Card header       | `"Attachments"` (or localized) + count badge |
-| Actions icon      | `<MoreVertIcon>` button top-right            |
-| Attachment rows   | Up to 3 `SummaryItem` cards                  |
-| "View all" button | Text button, shown when > 3 attachments      |
-
-### "View all" Modal
-
-| Element         | Description                |
-| --------------- | -------------------------- |
-| Modal header    | `"All attachments (N)"`    |
-| Attachment rows | All items in `SummaryList` |
-| Close button    | `X` in modal header        |
-
-### Add File Modal
-
-| Element        | Description                                  |
-| -------------- | -------------------------------------------- |
-| File picker    | `<input type='file'>`                        |
-| Progress bar   | Per-file upload progress                     |
-| Action buttons | `ActionButtonsForFileUtil` (Cancel + Attach) |
-
-### Add Link Modal
-
-| Element        | Description                                  |
-| -------------- | -------------------------------------------- |
-| Title field    | `<TextField label='Title'>` — required       |
-| URL field      | `<TextField label='URL'>` — required         |
-| Attach button  | Enabled only when both fields are filled     |
-| Action buttons | `ActionButtonsForFileUtil` (Cancel + Attach) |
-
-**CSS-only implementation notes:**
-
-- Main card: standard card styles.
-- Modal: `position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,0.2); min-width: 480px; padding: 1.5rem`.
-- "View all" button: text style, `color: var(--app-primary-color); cursor: pointer`.
-- Progress bar: `height: 4px; background: var(--app-primary-color); transition: width 0.3s`.
-
-## Sub-Component: ActionButtonsForFileUtil
-
-**Registration key:** `ActionButtonsForFileUtil`
-
-A simple button row component used inside the FileUtility modals to render Cancel + primary action buttons.
-
-### Props
-
-| Prop                 | Type       | Required | Description                                                  |
-| -------------------- | ---------- | -------- | ------------------------------------------------------------ |
-| `arMainButtons`      | `any[]`    | Yes      | Primary button definitions `[{ actionID, name }]`            |
-| `arSecondaryButtons` | `any[]`    | Yes      | Secondary (cancel) button definitions `[{ actionID, name }]` |
-| `primaryAction`      | `function` | Yes      | Callback invoked when the primary button is clicked          |
-| `secondaryAction`    | `function` | Yes      | Callback invoked when the secondary/cancel button is clicked |
-| `getPConnect`        | `function` | Yes      | PConnect getter                                              |
-
-### Layout
-
-```
-[Secondary buttons (left)]   [Primary buttons (right)]
-      Cancel                        Attach
-```
-
-- Secondary buttons: outlined/text style.
-- Primary buttons: contained/filled style with theme primary color.
-- Render using `arSecondaryButtons.map(...)` and `arMainButtons.map(...)`.
-
-## Edge Cases & Special Logic
-
-- **Debounce (1000ms):** Prevents excessive re-fetches when multiple attachment events fire in quick succession.
-- **Add link "Attach" button disabled state:** Title and URL validation must happen on every keystroke — use controlled inputs with `!title || !url` to derive disabled state.
-- **`linkAttachmentsToCase`:** After upload, the file must be explicitly linked to the case. Uploading alone does not associate the file with the case.
-- **Pub-sub cleanup:** Unsubscribe from `CASE_ATTACHMENTS_UPDATED` on unmount to prevent stale callbacks.
-- **Error display:** Use `PCore.getMessageManager()` or inline error state in the modal — do not silently fail on upload/link errors.
-
-## Dependencies
-
-- `PCore.getAttachmentUtils()` — getCaseAttachments, uploadAttachment, downloadAttachment, deleteAttachment, linkAttachmentsToCase
-- `PCore.getMessagingServiceManager()` — subscribe to attachment change events
-- `PCore.getConstants()` — case info ID, summary refresh timing
-- `getComponentFromRegistry('SummaryList')` — renders the attachment item list
-- `getComponentFromRegistry('ActionButtonsForFileUtil')` — renders modal action buttons
-- `downloadjs` — browser file download trigger
-- MUI: `<Card>`, `<CardHeader>`, `<CardContent>`, `<IconButton>`, `<Menu>`, `<MenuItem>`, `<Button>`, `<TextField>`, `<Dialog>`, `<CircularProgress>`
-- MUI Icons: `<MoreVertIcon>`
-
-## Design System Mapping
-
-**UI control type:** File management widget — attachment list with upload/download/delete and add modals.
-
-Listed design systems are examples only.
-
-| Design System      | Card         | Action Menu                          | Modal      | Progress                                   |
-| ------------------ | ------------ | ------------------------------------ | ---------- | ------------------------------------------ |
-| Default (CSS only) | `<div>` card | `<button>` + custom dropdown         | `<dialog>` | CSS progress bar                           |
-| MUI                | `<Card>`     | `<IconButton>` + `<Menu>/<MenuItem>` | `<Dialog>` | `<CircularProgress>` or `<LinearProgress>` |
-| Ant Design         | `<Card>`     | `<Dropdown menu={{ items }}>`        | `<Modal>`  | `<Progress>`                               |
-| Chakra UI          | `<Card>`     | `<Menu>/<MenuButton>/<MenuList>`     | `<Modal>`  | `<Progress>`                               |
-| Shadcn/ui          | `<Card>`     | `<DropdownMenu>`                     | `<Dialog>` | Custom progress bar                        |
-
-When implementing in a specific design system:
-
-- Debounced refresh (1000ms) after pub-sub attachment events is required — prevents excessive API calls
-- `linkAttachmentsToCase` must be called after upload — uploading alone does not attach to the case
-- `ActionButtonsForFileUtil` receives button definition arrays — render them generically from `arMainButtons`/`arSecondaryButtons`

package/templates/react-sdk-reference/.claude/skills/widget-skills/QuickCreate.md

@@ -1,118 +0,0 @@
-# Skill: QuickCreate
-
-Quick case creation widget. Renders a set of buttons — one per available case type — allowing users to create cases directly from the widget without navigating to a separate form.
-
-> **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
-
-Provides a shortcut panel for creating new cases. Case types are sourced from the Pega environment info (or a fallback portal config for Launchpad). The list can be filtered by class name. Each button triggers case creation via `pConn.getActionsApi().createWork()`. Rendering is delegated to the `WssQuickCreate` design system extension component.
-
-## Pega Metadata
-
-- **Registration key:** `QuickCreate` (in `component-map.ts`)
-- **Category:** Widget — action / case creation
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop            | Type       | Required | Description                                                                 |
-| --------------- | ---------- | -------- | --------------------------------------------------------------------------- |
-| `heading`       | `string`   | Yes      | Widget title (e.g., `"Create"`)                                             |
-| `showCaseIcons` | `boolean`  | No       | Whether to show case type icons alongside labels. Default `false`           |
-| `classFilter`   | `any[]`    | No       | Array of class names to filter available case types. Empty array = show all |
-| `getPConnect`   | `function` | Yes      | PConnect getter                                                             |
-
-## Behavioral Contract
-
-### Case Types Resolution
-
-1. Read `PCore.getEnvironmentInfo().environmentInfoObject.pyCaseTypeList` — the primary source.
-2. If the list is empty or unavailable (e.g., Launchpad mode), fall back to the app portal config:
-   ```
-   PCore.getConfig().getApplicationName()  // or portal config equivalent
-   ```
-3. Apply `classFilter`: if `classFilter` is non-empty, retain only case types whose class name is included in the array.
-
-### Case Type Object Mapping
-
-For each case type, build:
-
-```typescript
-{
-  classname: caseType.pyClassName,
-  label: caseType.pyLabel,
-  onClick: () => pConn.getActionsApi().createWork(caseType.pyClassName, {
-    openCaseViewAfterCreate: true,
-    containerName: PCore.getConstants().APP.APP
-  }),
-  icon: showCaseIcons ? getIconURL(caseType.pyClassName) : undefined
-}
-```
-
-### Rendering Delegation
-
-Pass the mapped case type array to `WssQuickCreate` (retrieved via `getComponentFromRegistry('WssQuickCreate')`):
-
-```tsx
-const WssQuickCreate = getComponentFromRegistry('WssQuickCreate');
-return <WssQuickCreate heading={heading} caseTypes={caseTypeObjects} />;
-```
-
-This component handles all button rendering — `QuickCreate` is purely a data-preparation orchestrator.
-
-## Visual Specifications
-
-Visual rendering is owned by `WssQuickCreate` (a design system extension component). Typical layout:
-
-| Element           | Description                                       |
-| ----------------- | ------------------------------------------------- |
-| Heading           | Widget title at the top                           |
-| Case type buttons | One button per case type; icon (optional) + label |
-
-**CSS-only implementation notes (if implementing without `WssQuickCreate`):**
-
-- Container: `display: flex; flex-direction: column; gap: 0.5rem`.
-- Heading: `font-weight: 600; margin-bottom: 0.5rem`.
-- Case type button: `display: flex; align-items: center; gap: 0.5rem; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 4px; cursor: pointer; background: white`.
-- Icon: `width: 20px; height: 20px; object-fit: contain`.
-
-## Edge Cases & Special Logic
-
-- `classFilter` is an empty array by default — empty array means **no filtering** (show all case types).
-- If `pyCaseTypeList` is empty and the fallback also produces no results, render the widget with a `"No case types available"` message or hide the widget.
-- `showCaseIcons` requires a valid icon URL — `getIconURL(classname)` returns `undefined` if no icon is configured; guard against rendering a broken `<img>`.
-- `createWork` opens the case creation form in the primary container. If the user already has an unsaved case open, behavior depends on container configuration (may replace or open in a new tab).
-
-## Dependencies
-
-- `getComponentFromRegistry('WssQuickCreate')` — design system extension for case type button rendering
-- `pConn.getActionsApi().createWork()` — triggers case creation
-- `PCore.getEnvironmentInfo()` — primary source for available case types
-- `PCore.getConstants().APP.APP` — app context constant
-
-## Design System Mapping
-
-**UI control type:** Quick-action panel with one button per available case type.
-
-Listed design systems are examples only.
-
-Rendering is delegated to `WssQuickCreate` — implement that DSE component for your design system. `QuickCreate` itself has no direct UI output beyond the delegation.
-
-If implementing without `WssQuickCreate`:
-
-| Design System      | Button List                                               |
-| ------------------ | --------------------------------------------------------- |
-| Default (CSS only) | `<button>` list with optional `<img>` icon                |
-| MUI                | `<List>` + `<ListItemButton>` or `<Button>` stack         |
-| Ant Design         | `<Space direction='vertical'>` + `<Button>` per case type |
-| Chakra UI          | `<VStack>` + `<Button>` per case type                     |
-| Shadcn/ui          | `<div>` stack + `<Button variant='outline'>`              |
-
-When implementing in a specific design system:
-
-- `classFilter` empty array = show ALL case types (not zero) — this is a common gotcha
-- `createWork` must be called with the correct `containerName` constant (`APP.APP`)
-- `showCaseIcons` is optional — only fetch/render icons when this prop is `true`

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

@@ -1,198 +0,0 @@
-# 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                                                                                    |
-
-## 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:
-
-```typescript
-pConn.getActionsApi().openAssignment(
-  assignment.pxRefObjectKey, // case key
-  assignment.pxRefObjectClass, // class name
-  {
-    containerName: pConn.getContainerName() || PCore.getConstants().APP.APP,
-    channelName: '',
-  },
-);
-```
-
-### Assignment Item Rendering
-
-For each assignment, show:
-
-- **Avatar:** Circle with user initials (derived from `pConn.getContextObject?.().pyLabel` or operator name).
-- **Name/title:** `assignment.pyLabel` — the assignment task name.
-- **Status badge (worklist only):** `assignment.pyStatusWork` — colored status pill.
-- **Priority/urgency:** `assignment.pyUrgencyWork` — urgency level indicator.
-- **Child case indicator:** If `assignment.isChild === true`, show an indent or nested indicator.
-- **Arrow icon:** Right-pointing arrow (`<ArrowForwardIosOutlinedIcon>`) indicating clickable.
-
-### 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:
-
-- Show top 3 items by default — `showCount` state controls slice; "Show more/less" toggles between 3 and full length
-- `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/.cursor/rules/component-map.mdrules

@@ -1,41 +0,0 @@
----
-globs: ["**/component-map.ts"]
-alwaysApply: false
----
-
-# 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.