@pega/sdk 0.0.1

package/templates/react-sdk-reference/.github/prompts/component-manifest.json

@@ -0,0 +1,111 @@
+{
+  "folderScopes": {
+    "field": "src/components/field",
+    "template": "src/components/template",
+    "widget": "src/components/widget",
+    "infra": "src/components/infra",
+    "designSystemExtension": "src/components/designSystemExtension"
+  },
+  "namedScopes": {
+    "workflow-form": {
+      "folders": ["field"],
+      "components": [
+        { "name": "Stages", "category": "infra", "path": "src/components/infra/Stages" }
+      ]
+    }
+  },
+  "components": {
+    "field": [
+      { "name": "AutoComplete",    "path": "src/components/field/AutoComplete" },
+      { "name": "CancelAlert",     "path": "src/components/field/CancelAlert" },
+      { "name": "Checkbox",        "path": "src/components/field/Checkbox" },
+      { "name": "Currency",        "path": "src/components/field/Currency" },
+      { "name": "Date",            "path": "src/components/field/Date" },
+      { "name": "DateTime",        "path": "src/components/field/DateTime" },
+      { "name": "Decimal",         "path": "src/components/field/Decimal" },
+      { "name": "Dropdown",        "path": "src/components/field/Dropdown" },
+      { "name": "Email",           "path": "src/components/field/Email" },
+      { "name": "Group",           "path": "src/components/field/Group" },
+      { "name": "Integer",         "path": "src/components/field/Integer" },
+      { "name": "Location",        "path": "src/components/field/Location" },
+      { "name": "Multiselect",     "path": "src/components/field/Multiselect" },
+      { "name": "ObjectReference", "path": "src/components/field/ObjectReference" },
+      { "name": "Percentage",      "path": "src/components/field/Percentage" },
+      { "name": "Phone",           "path": "src/components/field/Phone" },
+      { "name": "RadioButtons",    "path": "src/components/field/RadioButtons" },
+      { "name": "RichText",        "path": "src/components/field/RichText" },
+      { "name": "ScalarList",      "path": "src/components/field/ScalarList" },
+      { "name": "SelectableCard",  "path": "src/components/field/SelectableCard" },
+      { "name": "SemanticLink",    "path": "src/components/field/SemanticLink" },
+      { "name": "TextArea",        "path": "src/components/field/TextArea" },
+      { "name": "TextContent",     "path": "src/components/field/TextContent" },
+      { "name": "TextInput",       "path": "src/components/field/TextInput" },
+      { "name": "Time",            "path": "src/components/field/Time" },
+      { "name": "URL",             "path": "src/components/field/URL" },
+      { "name": "UserReference",   "path": "src/components/field/UserReference" }
+    ],
+    "template": [
+      { "name": "AdvancedSearch",         "path": "src/components/template/AdvancedSearch" },
+      { "name": "AppShell",               "path": "src/components/template/AppShell" },
+      { "name": "BannerPage",             "path": "src/components/template/BannerPage" },
+      { "name": "CaseSummary",            "path": "src/components/template/CaseSummary" },
+      { "name": "CaseView",               "path": "src/components/template/CaseView" },
+      { "name": "CaseViewActionsMenu",    "path": "src/components/template/CaseViewActionsMenu" },
+      { "name": "Confirmation",           "path": "src/components/template/Confirmation" },
+      { "name": "DataReference",          "path": "src/components/template/DataReference" },
+      { "name": "DefaultForm",            "path": "src/components/template/DefaultForm" },
+      { "name": "DefaultPage",            "path": "src/components/template/DefaultPage" },
+      { "name": "Details",                "path": "src/components/template/Details" },
+      { "name": "FieldGroupTemplate",     "path": "src/components/template/FieldGroupTemplate" },
+      { "name": "HierarchicalForm",       "path": "src/components/template/HierarchicalForm" },
+      { "name": "InlineDashboard",        "path": "src/components/template/InlineDashboard" },
+      { "name": "InlineDashboardPage",    "path": "src/components/template/InlineDashboardPage" },
+      { "name": "ListPage",               "path": "src/components/template/ListPage" },
+      { "name": "ListView",               "path": "src/components/template/ListView" },
+      { "name": "MultiReferenceReadOnly", "path": "src/components/template/MultiReferenceReadOnly" },
+      { "name": "NarrowWide",             "path": "src/components/template/NarrowWide" },
+      { "name": "ObjectPage",             "path": "src/components/template/ObjectPage" },
+      { "name": "OneColumn",              "path": "src/components/template/OneColumn" },
+      { "name": "PromotedFilters",        "path": "src/components/template/PromotedFilters" },
+      { "name": "SelfServiceCaseView",    "path": "src/components/template/SelfServiceCaseView" },
+      { "name": "SimpleTable",            "path": "src/components/template/SimpleTable" },
+      { "name": "SingleReferenceReadOnly","path": "src/components/template/SingleReferenceReadOnly" },
+      { "name": "SubTabs",                "path": "src/components/template/SubTabs" },
+      { "name": "TwoColumn",              "path": "src/components/template/TwoColumn" },
+      { "name": "WideNarrow",             "path": "src/components/template/WideNarrow" },
+      { "name": "WssNavBar",              "path": "src/components/template/WssNavBar" }
+    ],
+    "widget": [
+      { "name": "AppAnnouncement", "path": "src/components/widget/AppAnnouncement" },
+      { "name": "Attachment",      "path": "src/components/widget/Attachment" },
+      { "name": "CaseHistory",     "path": "src/components/widget/CaseHistory" },
+      { "name": "FileUtility",     "path": "src/components/widget/FileUtility" },
+      { "name": "Followers",       "path": "src/components/widget/Followers" },
+      { "name": "QuickCreate",     "path": "src/components/widget/QuickCreate" },
+      { "name": "SummaryItem",     "path": "src/components/widget/SummaryItem" },
+      { "name": "SummaryList",     "path": "src/components/widget/SummaryList" },
+      { "name": "ToDo",            "path": "src/components/widget/ToDo" }
+    ],
+    "infra": [
+      { "name": "ActionButtons",   "path": "src/components/infra/ActionButtons" },
+      { "name": "DashboardFilter", "path": "src/components/infra/DashboardFilter" },
+      { "name": "DeferLoad",       "path": "src/components/infra/DeferLoad" },
+      { "name": "NavBar",          "path": "src/components/infra/NavBar" },
+      { "name": "Stages",          "path": "src/components/infra/Stages" },
+      { "name": "VerticalTabs",    "path": "src/components/infra/VerticalTabs" }
+    ],
+    "designSystemExtension": [
+      { "name": "AlertBanner",       "path": "src/components/designSystemExtension/AlertBanner" },
+      { "name": "Banner",            "path": "src/components/designSystemExtension/Banner" },
+      { "name": "CaseSummaryFields", "path": "src/components/designSystemExtension/CaseSummaryFields" },
+      { "name": "DetailsFields",     "path": "src/components/designSystemExtension/DetailsFields" },
+      { "name": "FieldGroup",        "path": "src/components/designSystemExtension/FieldGroup" },
+      { "name": "FieldGroupList",    "path": "src/components/designSystemExtension/FieldGroupList" },
+      { "name": "FieldValueList",    "path": "src/components/designSystemExtension/FieldValueList" },
+      { "name": "Operator",          "path": "src/components/designSystemExtension/Operator" },
+      { "name": "Pulse",             "path": "src/components/designSystemExtension/Pulse" },
+      { "name": "RichTextEditor",    "path": "src/components/designSystemExtension/RichTextEditor" },
+      { "name": "WssQuickCreate",    "path": "src/components/designSystemExtension/WssQuickCreate" }
+    ]
+  }
+}

package/templates/react-sdk-reference/.github/prompts/identify-components.prompt.md

@@ -0,0 +1,110 @@
+---
+agent: agent
+description: Analyze an attached screenshot and identify which SDK components are visible — outputs a components list ready to pass to replace-design-system
+---
+
+# identify-components
+
+Analyze the attached screenshot and identify which SDK components from this application are visible in the image.
+
+**Output only a single line** in this exact format — nothing else:
+
+```
+components="ComponentA,ComponentB,ComponentC"
+```
+
+This output can be pasted directly into a `/replace-design-system` invocation.
+
+---
+
+## Visual Recognition Guide
+
+Use the table below to map what you see in the image to SDK component names.
+
+### Structural / layout components
+
+| What you see | SDK component name | Category |
+|---|---|---|
+| Chevron/arrow step bar at the top of a form (e.g. "Step 1 → Step 2 → Step 3") | `Stages` | infra |
+| Full case shell: step bar + case title + **action menu (⋮ or kebab)** + tabbed content area | `CaseView` | template |
+| Row of action buttons at the bottom (Cancel / Save / Submit) | `ActionButtons` | infra |
+| White/card area wrapping form fields | `DefaultForm` | template |
+| Full-page layout with header + sidebar + content area | `AppShell` | template |
+| Left-side vertical tab navigation | `VerticalTabs` | infra |
+| Top navigation bar with logo + user menu | `NavBar` | infra |
+| Top navigation bar (WSS / self-service variant) | `WssNavBar` | template |
+| Two-column layout (equal or narrow/wide split) | `TwoColumn` / `NarrowWide` / `WideNarrow` | template |
+| Single-column stacked layout | `OneColumn` | template |
+| Tabbed panel inside a form or page | `SubTabs` / `Details` | template |
+
+### Field components
+
+| What you see | SDK component name | Category |
+|---|---|---|
+| Single-line text input box | `TextInput` | field |
+| Multi-line text input / textarea | `TextArea` | field |
+| Dropdown / select menu (chevron on right) | `Dropdown` | field |
+| Phone input with country code prefix (e.g. "+1 ▼") | `Phone` | field |
+| Date picker input (calendar icon) | `Date` | field |
+| Date + time picker input | `DateTime` | field |
+| Time-only picker | `Time` | field |
+| Currency input ($ prefix or formatted number) | `Currency` | field |
+| Percentage input (% suffix) | `Percentage` | field |
+| Decimal / float number input | `Decimal` | field |
+| Integer-only number input | `Integer` | field |
+| Email input (envelope icon or @-hint) | `Email` | field |
+| URL input (link icon or http-hint) | `URL` | field |
+| Checkbox with label | `Checkbox` | field |
+| Radio button group | `RadioButtons` | field |
+| Multi-select / tag-style select with chips | `Multiselect` | field |
+| Type-ahead / autocomplete input with suggestions | `AutoComplete` | field |
+| Rich text editor (toolbar with Bold/Italic/etc.) | `RichText` | field |
+| Read-only comma-separated list of values | `ScalarList` | field |
+| Selectable card / tile (click to select, like a plan card) | `SelectableCard` | field |
+| Map / location picker with pin icon | `Location` | field |
+| Link to another object/record | `ObjectReference` | field |
+| Hyperlink displayed inline | `SemanticLink` | field |
+| User avatar + name displayed inline | `UserReference` | field |
+| Inline alert / warning inside a form | `CancelAlert` | field |
+| Static text block / paragraph inside a form | `TextContent` | field |
+| Grouping box around related fields | `Group` | field |
+
+### Widget components
+
+| What you see | SDK component name | Category |
+|---|---|---|
+| To-do / task list card with assignments | `ToDo` | widget |
+| File attachment area with upload button | `Attachment` | widget |
+| Case history / audit trail table | `CaseHistory` | widget |
+| File list with download actions | `FileUtility` | widget |
+| List of follower avatars + "Follow" button | `Followers` | widget |
+| "+" quick-create button with dropdown menu | `QuickCreate` | widget |
+| Summary card for a single record with action menu | `SummaryItem` | widget |
+| List of SummaryItem cards | `SummaryList` | widget |
+| Announcement / news card | `AppAnnouncement` | widget |
+
+### DSE / design system extension components
+
+| What you see | SDK component name | Category |
+|---|---|---|
+| Coloured banner alert bar (info / warning / error / success) | `AlertBanner` | designSystemExtension |
+| Hero-style banner with title + CTA button | `Banner` | designSystemExtension |
+| Read-only field+value pairs in a case summary | `CaseSummaryFields` | designSystemExtension |
+| Read-only label+value pairs in a details view | `DetailsFields` | designSystemExtension |
+| Collapsible section with header (accordion-style) | `FieldGroup` | designSystemExtension |
+| List of field groups with "Add" link | `FieldGroupList` | designSystemExtension |
+| User operator info popover (name + contact) | `Operator` | designSystemExtension |
+| Comment/pulse card with avatar + timestamp | `Pulse` | designSystemExtension |
+| Rich text editor with theme-aware toolbar | `RichTextEditor` | designSystemExtension |
+| Quick-create shortcut links list (WSS sidebar) | `WssQuickCreate` | designSystemExtension |
+
+---
+
+## Rules
+
+1. **Only list components you can actually see rendered in the image.** Do not include components that might be present but are not visible (e.g. a NavBar not shown in the screenshot).
+2. **Do not include `FieldValueList`** — it is an internal rendering helper, not a visible component.
+3. **Structural components that frame a form always count** — if you see a step bar, include `Stages`; if you see action buttons, include `ActionButtons`.
+4. **An avatar + form title alone is NOT `CaseView`** — `CaseView` requires a full case shell with an action/kebab menu and tabbed content. A simple avatar + heading above a form is just part of `DefaultForm`.
+5. **When in doubt between two similar components** (e.g. `NarrowWide` vs `WideNarrow`), pick the one whose column ratio best matches the image proportions, or include both separated by a comma.
+6. **Output only the single `components="..."` line.** No explanation, no list, no markdown — just that line.

package/templates/react-sdk-reference/.github/prompts/replace-all-fields.prompt.md

@@ -0,0 +1,48 @@
+---
+agent: agent
+description: Replace ALL field components with a new design system
+---
+
+Replace ALL field components in `src/components/field/` with equivalents from **{{designSystem}}**.
+
+## Step 1: Replace all field components using subagents
+
+For each of the following field components, run a subagent using the `replace-field` prompt with `fieldName` set to the component directory name and `designSystem` set to **{{designSystem}}**:
+
+- TextInput
+- TextArea
+- Dropdown
+- Checkbox
+- RadioButtons
+- Date
+- DateTime
+- Time
+- Currency
+- Decimal
+- Integer
+- Percentage
+- Email
+- Phone
+- URL
+- AutoComplete
+- Multiselect
+- RichText
+- ScalarList
+- SelectableCard
+- Group
+- Location
+- ObjectReference
+- SemanticLink
+- UserReference
+- CancelAlert
+- TextContent
+
+Run subagents in parallel batches of 5 to maximize throughput.
+
+## Step 2: Replace FieldValueList
+
+Run a subagent to replace `FieldValueList` in `src/components/designSystemExtension/FieldValueList/` with a {{designSystem}} equivalent. Every field component depends on it for display modes.
+
+## Step 3: Verify
+
+After all subagents complete, run `npm run build` to verify everything compiles correctly.

package/templates/react-sdk-reference/.github/prompts/replace-component.prompt.md

@@ -0,0 +1,81 @@
+---
+agent: agent
+description: Replace a single non-field component with your design system equivalent
+---
+
+Replace the **{{componentName}}** component (located in `src/components/{{componentPath}}`) with an equivalent implementation using **{{designSystem}}**.
+
+Category: **{{componentCategory}}**
+
+---
+
+## Instructions
+
+1. Read ALL files in `src/components/{{componentPath}}` to understand the current implementation
+2. **If a `.css` file exists in the directory, read it before writing anything.** For every CSS class, note its visual intent — spacing, sizing, colors, borders, layout, visibility tricks. The replacement must replicate the same visual appearance as the original.
+3. **Read the installed package before choosing components:**
+   - `cat node_modules/{{designSystem}}/README.md` — correct import paths and usage patterns for the installed version
+   - `grep "^export" node_modules/{{designSystem}}/dist/index.d.ts 2>/dev/null || grep -rl "^export" node_modules/{{designSystem}} --include="index.d.ts" | head -3 | xargs grep "^export"` — every component actually exported by the installed version
+   - **For every component you plan to use, read its TypeScript prop interface** from the installed `.d.ts` to discover all available styling props (e.g. `size`, `kind`, `hideLabel`, `helperText`, `orientation`). Find the file with: `find node_modules/{{designSystem}} -name "ComponentName.d.ts" | head -3`, then `grep -A 40 "interface.*Props"` on the result.
+   - Only use component names and prop names confirmed in those files. Do not rely on training knowledge of the API.
+4. Identify every `@mui/material`, `@mui/icons-material`, `@mui/styles`, and `@mui/x-date-pickers` import
+5. Replace each MUI component/utility with the {{designSystem}} equivalent, preserving the original visual output. **Styling priority — apply in this order, stop at the first that works:**
+   1. **{{designSystem}} component props/variants** — always prefer built-in props (`size`, `kind`, `orientation`, etc.) over any custom styling
+   2. **Retaining the existing `.css` file** and its class names where they don't conflict with {{designSystem}}
+   3. **{{designSystem}} design tokens via CSS custom properties** in `style` props — use design system token variables; never hardcode hex colors or pixel values
+   4. **Inline `style` props with raw values** — only as a last resort when no prop or token covers the need
+5. Convert any `makeStyles` usage to the approach above — map each class to an equivalent style, do NOT silently drop styles
+6. Replace MUI icons with {{designSystem}}'s icon system (or inline SVG if unavailable)
+7. **Before writing, discover the design system's own conventions — do not assume:**
+   - Check the README or exports for **layout primitive components** (grid, stack, flex wrappers) — prefer them over raw `<div style={{ display: 'flex' }}>` or `<div style={{ display: 'grid' }}>`
+   - Check the README or exports for a **form layout wrapper component** (one that groups label + input + helper text) — if one exists, use it instead of manual margins
+   - Check the README or `.d.ts` props for **size/density/variant and button kind/intent conventions** — use documented props rather than adding manual padding or color overrides
+   - For **built-in slots** (helper text, validation messages, label visibility): check the component's `.d.ts` — if a prop handles it natively, use that prop instead of rendering separate elements
+   - Check whether the design system has a **companion icons package** — read its exports/index before importing any icon name; do not guess icon names
+   - For **spacing in `style` props**, check `node_modules/{{designSystem}}` for a `tokens` or `css` directory — use design system CSS custom properties if available; otherwise use relative units (`rem`/`em`), never raw `px`
+
+---
+
+## Category-specific rules
+
+### If `{{componentCategory}}` is `template`:
+
+- Replace MUI `Grid`/`Box`/`Stack` with {{designSystem}} layout primitives
+- Replace MUI `Tabs`/`Tab` with {{designSystem}} tab components
+- Replace MUI `Table`/`TableRow`/`TableCell` with {{designSystem}} table components
+- KEEP: children rendering logic (React children or PConnect child iteration)
+- KEEP: `templateCol` parsing for column width ratios
+- If the directory contains multiple variants (e.g., OneColumn, OneColumnPage, OneColumnTab), replace ALL of them
+
+### If `{{componentCategory}}` is `widget`:
+
+- Replace MUI visual components (Card, List, Button, Dialog, etc.) with {{designSystem}} equivalents
+- NEVER modify `PCore.*` API calls (getDataPageUtils, getMashupApi, getPubSubUtils, etc.)
+- KEEP: all data fetching logic, pub/sub subscriptions, platform interactions
+- KEEP: loading states and error handling
+
+### If `{{componentCategory}}` is `designSystemExtension`:
+
+- KEEP: same exported prop interfaces (other components depend on them)
+- If the component wraps a third-party editor (e.g., draft-js, Quill), replace only MUI wrappers — keep the editor
+- KEEP: same behavior and prop contract
+
+### If `{{componentCategory}}` is `infra`:
+
+- KEEP: `onButtonPress` callback pattern in ActionButtons
+- KEEP: `PCore.getLocaleUtils().getLocaleValue` calls for i18n
+- KEEP: all platform interaction logic
+- If the directory contains multiple variants (e.g., VerticalTabs, LeftAlignVerticalTabs), replace ALL of them
+
+---
+
+## Universal rules (all categories)
+
+1. KEEP the same default export function name
+2. KEEP `data-test-id` attributes on interactive elements
+3. KEEP all `PCore.*` API calls unchanged
+4. KEEP `getPConnect()` prop extraction if present
+5. Do NOT modify `src/components/component-map.ts`
+6. Do NOT change the file path — only change file content
+7. Do NOT add new dependencies beyond {{designSystem}} and its documented peer deps
+8. Do NOT remove any TypeScript interfaces/types — update them if needed for new props