@pega/sdk 0.0.3 → 0.0.4

package/templates/react-sdk-reference/.claude/prompts/generate-dse-components.md

@@ -9,6 +9,7 @@ Read the user's message carefully. Extract:
 Both **design system** and **output base path** are required. If either is missing or ambiguous, ask both unresolved items in one numbered list. Do not assume or default the output path — the client's folder structure may differ from the reference app.
 
 Example questions (ask only the ones that are actually missing):
+
 1. Which design system should I use? (e.g. Ant Design, Chakra UI, Carbon, Radix UI)
 2. Where should the DSE components be generated? (e.g. `src/components/designSystemExtension/`)
 
@@ -18,19 +19,19 @@ Once both are known, continue to Step 1.
 
 ### Full component list (default — 11 DSE components)
 
-| Component | Pattern | DS needed? |
-|---|---|---|
-| AlertBanner | B — Pure display | Yes |
-| Banner | B — Pure display | Yes |
-| CaseSummaryFields | A — PConnect display | Minimal |
-| DetailsFields | A — PConnect display | Minimal |
-| FieldGroup | C — Complex display | No |
-| FieldGroupList | C — Complex display | No |
-| FieldValueList | A — PConnect display | No (CSS only) |
-| Operator | B — Pure display | Yes |
-| Pulse | C — Complex display | No |
-| RichTextEditor | C — Complex display | No |
-| WssQuickCreate | B — Pure display | Yes |
+| Component         | Pattern              | DS needed?    |
+| ----------------- | -------------------- | ------------- |
+| AlertBanner       | B — Pure display     | Yes           |
+| Banner            | B — Pure display     | Yes           |
+| CaseSummaryFields | A — PConnect display | Minimal       |
+| DetailsFields     | A — PConnect display | Minimal       |
+| FieldGroup        | C — Complex display  | No            |
+| FieldGroupList    | C — Complex display  | No            |
+| FieldValueList    | A — PConnect display | No (CSS only) |
+| Operator          | B — Pure display     | Yes           |
+| Pulse             | C — Complex display  | No            |
+| RichTextEditor    | C — Complex display  | No            |
+| WssQuickCreate    | B — Pure display     | Yes           |
 
 ---
 
@@ -39,6 +40,7 @@ Once both are known, continue to Step 1.
 Read the full contents of `.claude/skills/design-system-extension.md`.
 
 This gives you:
+
 - All three implementation patterns (Pure display, Field value display, Complex display with PConnect)
 - The `// [DS RENDER]` placeholder approach for Pattern B components
 - The Design System Adaptation section — pattern categorisation, variant mapping table, DS discovery guidance
@@ -52,11 +54,13 @@ Keep this context active throughout the entire generation session. Do not re-rea
 ## Step 2 — Install and discover the design system (once)
 
 Execute **Step 3** from `.claude/prompts/add-component.md` exactly as written:
+
 - Check `package.json` for the DS package
 - Install if missing, including any peer dependencies
 - Report what was installed
 
 Then execute **Step 4** from `.claude/prompts/add-component.md` exactly as written:
+
 - Read the DS README from `node_modules`
 - Discover exported components from `dist/index.d.ts`
 - Focus on display primitives used by Pattern B components: Alert, Card, Avatar, Badge, Tag, Notification
@@ -73,7 +77,9 @@ Build a **DS display primitive reference map** from this discovery. Reuse it for
 For each component in the list, check whether `<outputPath>/<ComponentName>/<ComponentName>.tsx` already exists.
 
 If **any** exist, report them all at once and ask:
+
 > "The following N components already exist: [list]. How should I proceed?
+>
 > - **Overwrite all** — replace all existing implementations
 > - **Skip existing** — only generate components that don't exist yet
 > - **Cancel** — stop without generating anything"
@@ -87,7 +93,9 @@ Wait for the user's answer before proceeding. If none exist, continue immediatel
 For each component in the resolved list (in the order listed in Step 0):
 
 ### 4a — Read the component-specific skill file
+
 Execute **Step 2** from `.claude/prompts/add-component.md` for this component:
+
 - Read `.claude/skills/design-system-extension-skills/<ComponentName>.md` fully
 - Identify the component's pattern (B / A / C) from the skill file
 - Pay attention to:
@@ -95,7 +103,9 @@ Execute **Step 2** from `.claude/prompts/add-component.md` for this component:
   - **Design System Mapping** table — the recommended DS primitive for Pattern B components
 
 ### 4b — Generate the component files
+
 Execute **Step 5** from `.claude/prompts/add-component.md` for this component:
+
 - Create `<outputPath>/<ComponentName>/` directory
 - Create `<ComponentName>.tsx` using:
   - **Pattern B** (Pure display — AlertBanner, Banner, Operator, WssQuickCreate): use DS alert/card/avatar primitive from Step 2 API map in the `// [DS RENDER]` section; apply variant mapping from the skill file
@@ -108,12 +118,15 @@ Execute **Step 5** from `.claude/prompts/add-component.md` for this component:
 - Create any CSS file required by the skill file
 
 ### 4c — Register the component
+
 Execute **Step 6** from `.claude/prompts/add-component.md` for this component:
+
 - Add the import to `src/components/component-map.ts` in the Design System Extension section
 - Add the entry to `getSampleComponentMap()` under the DSE comment
 - Do not reorder or restructure any existing entries
 
 ### 4d — Report progress
+
 After each component: "`<ComponentName>` ✓ — Pattern `<B/A/C>`<`, using <DS primitive>` if Pattern B>"
 
 ---
@@ -121,6 +134,7 @@ After each component: "`<ComponentName>` ✓ — Pattern `<B/A/C>`<`, using <DS
 ## Step 5 — Verify the build
 
 Execute **Step 7** from `.claude/prompts/add-component.md` exactly as written:
+
 - Run `npm run build`
 - Fix any TypeScript or build errors before reporting completion
 - Report a summary: list of all files created and all entries added to `component-map.ts`

package/templates/react-sdk-reference/.claude/prompts/generate-field-components.md

@@ -9,6 +9,7 @@ Read the user's message carefully. Extract:
 Both **design system** and **output base path** are required. If either is missing or ambiguous, ask both unresolved items in one numbered list. Do not assume or default the output path — the client's folder structure may differ from the reference app.
 
 Example questions (ask only the ones that are actually missing):
+
 1. Which design system should I use? (e.g. Ant Design, Chakra UI, Carbon, Radix UI)
 2. Where should the field components be generated? (e.g. `src/components/field/`)
 
@@ -18,35 +19,35 @@ Once both are known, continue to Step 1.
 
 ### Full component list (default)
 
-| Component | Pega Name |
-|---|---|
-| AutoComplete | AutoComplete |
-| CancelAlert | CancelAlert |
-| Checkbox | Checkbox |
-| Currency | Currency |
-| Date | Date |
-| DateTime | DateTime |
-| Decimal | Decimal |
-| Dropdown | Dropdown |
-| Email | Email |
-| Group | Group |
-| Integer | Integer |
-| Location | Location |
-| Multiselect | Multiselect |
+| Component       | Pega Name       |
+| --------------- | --------------- |
+| AutoComplete    | AutoComplete    |
+| CancelAlert     | CancelAlert     |
+| Checkbox        | Checkbox        |
+| Currency        | Currency        |
+| Date            | Date            |
+| DateTime        | DateTime        |
+| Decimal         | Decimal         |
+| Dropdown        | Dropdown        |
+| Email           | Email           |
+| Group           | Group           |
+| Integer         | Integer         |
+| Location        | Location        |
+| Multiselect     | Multiselect     |
 | ObjectReference | ObjectReference |
-| Percentage | Percentage |
-| Phone | Phone |
-| RadioButtons | RadioButtons |
-| RichText | RichText |
-| ScalarList | ScalarList |
-| SelectableCard | SelectableCard |
-| SemanticLink | SemanticLink |
-| TextArea | TextArea |
-| TextContent | TextContent |
-| TextInput | TextInput |
-| Time | Time |
-| URL | URL |
-| UserReference | UserReference |
+| Percentage      | Percentage      |
+| Phone           | Phone           |
+| RadioButtons    | RadioButtons    |
+| RichText        | RichText        |
+| ScalarList      | ScalarList      |
+| SelectableCard  | SelectableCard  |
+| SemanticLink    | SemanticLink    |
+| TextArea        | TextArea        |
+| TextContent     | TextContent     |
+| TextInput       | TextInput       |
+| Time            | Time            |
+| URL             | URL             |
+| UserReference   | UserReference   |
 
 ---
 
@@ -55,6 +56,7 @@ Once both are known, continue to Step 1.
 Read the full contents of `.claude/skills/field-components.md`.
 
 This gives you:
+
 - The behavioral skeleton every field component must follow (state, effects, event handling, display modes)
 - The Design System Adaptation guide (prop mapping conventions, form layout wrappers)
 - The abstract template to use as a base for all components
@@ -66,11 +68,13 @@ Keep this context active throughout the entire generation session. Do not re-rea
 ## Step 2 — Install and discover the design system (once)
 
 Execute **Step 3** from `.claude/prompts/add-component.md` exactly as written:
+
 - Check `package.json` for the DS package
 - Install if missing, including any peer dependencies
 - Report what was installed
 
 Then execute **Step 4** from `.claude/prompts/add-component.md` exactly as written:
+
 - Read the DS README from `node_modules`
 - Discover all exported components from `dist/index.d.ts`
 - Read prop interfaces for the control types needed across the component list
@@ -85,7 +89,9 @@ Build a **DS API reference map** from this discovery. You will reuse it for ever
 For each component in the list, check whether `<outputPath>/<ComponentName>/<ComponentName>.tsx` already exists.
 
 If **any** exist, report them all at once and ask:
+
 > "The following N components already exist: [list]. How should I proceed?
+>
 > - **Overwrite all** — replace all existing implementations
 > - **Skip existing** — only generate components that don't exist yet
 > - **Cancel** — stop without generating anything"
@@ -99,7 +105,9 @@ Wait for the user's answer before proceeding. If none exist, continue immediatel
 For each component in the resolved list (in the order listed in Step 0):
 
 ### 4a — Read the component-specific skill file
+
 Execute **Step 2** from `.claude/prompts/add-component.md` for this component:
+
 - Read `.claude/skills/field-skills/<ComponentName>.md` fully
 - Pay attention to:
   - **Behavioral Contract** — state management, option loading, edge cases specific to this component
@@ -107,7 +115,9 @@ Execute **Step 2** from `.claude/prompts/add-component.md` for this component:
   - **UI control type** — use this to select the closest DS primitive if the chosen DS is not in the mapping table
 
 ### 4b — Generate the component files
+
 Execute **Step 5** from `.claude/prompts/add-component.md` for this component:
+
 - Create `<outputPath>/<ComponentName>/` directory
 - Create `<ComponentName>.tsx` using:
   - The abstract behavioral skeleton from `field-components.md` (read in Step 1)
@@ -121,12 +131,15 @@ Execute **Step 5** from `.claude/prompts/add-component.md` for this component:
   ```
 
 ### 4c — Register the component
+
 Execute **Step 6** from `.claude/prompts/add-component.md` for this component:
+
 - Add the import to `src/components/component-map.ts` in the Fields section
 - Add the entry to `getSampleComponentMap()` under the fields comment
 - Do not reorder or restructure any existing entries
 
 ### 4d — Report progress
+
 After each component: "`<ComponentName>` ✓ — using `<DS component name>`"
 
 ---
@@ -134,6 +147,7 @@ After each component: "`<ComponentName>` ✓ — using `<DS component name>`"
 ## Step 5 — Verify the build
 
 Execute **Step 7** from `.claude/prompts/add-component.md` exactly as written:
+
 - Run `npm run build`
 - Fix any TypeScript or build errors before reporting completion
 - Report a summary: list of all files created and all entries added to `component-map.ts`

package/templates/react-sdk-reference/.claude/prompts/generate-template-components.md

@@ -9,6 +9,7 @@ Read the user's message carefully. Extract:
 Both **design system** and **output base path** are required. If either is missing or ambiguous, ask both unresolved items in one numbered list. Do not assume or default the output path — the client's folder structure may differ from the reference app.
 
 Example questions (ask only the ones that are actually missing):
+
 1. Which design system should I use? (e.g. Ant Design, Chakra UI, Carbon, Radix UI)
 2. Where should the template components be generated? (e.g. `src/components/template/`)
 
@@ -20,40 +21,40 @@ Once both are known, continue to Step 1.
 
 ### Full component list (default — 32 templates)
 
-| Component | Category |
-|---|---|
-| AdvancedSearch | Page |
-| AppShell | Page |
-| BannerPage | Page |
-| CaseSummary | Page |
-| CaseView | Page |
-| CaseViewActionsMenu | Widget |
-| Confirmation | Page |
-| DataReference | Form |
-| DefaultForm | Form |
-| DefaultPage | Page |
-| Details | Layout |
-| DetailsSubTabs | Layout |
-| DetailsThreeColumn | Layout |
-| DetailsTwoColumn | Layout |
-| DynamicTabs | Navigation |
-| FieldGroupTemplate | Form |
-| HierarchicalForm | Form |
-| InlineDashboard | Page |
-| InlineDashboardPage | Page |
-| ListPage | Page |
-| ListView | Page |
-| MultiReferenceReadOnly | Display |
-| NarrowWide | Layout |
-| OneColumn | Layout |
-| PromotedFilters | Widget |
-| SelfServiceCaseView | Page |
-| SimpleTable | Table |
-| SingleReferenceReadOnly | Display |
-| SubTabs | Navigation |
-| TwoColumn | Layout |
-| WideNarrow | Layout |
-| WssNavBar | Navigation |
+| Component               | Category   |
+| ----------------------- | ---------- |
+| AdvancedSearch          | Page       |
+| AppShell                | Page       |
+| BannerPage              | Page       |
+| CaseSummary             | Page       |
+| CaseView                | Page       |
+| CaseViewActionsMenu     | Widget     |
+| Confirmation            | Page       |
+| DataReference           | Form       |
+| DefaultForm             | Form       |
+| DefaultPage             | Page       |
+| Details                 | Layout     |
+| DetailsSubTabs          | Layout     |
+| DetailsThreeColumn      | Layout     |
+| DetailsTwoColumn        | Layout     |
+| DynamicTabs             | Navigation |
+| FieldGroupTemplate      | Form       |
+| HierarchicalForm        | Form       |
+| InlineDashboard         | Page       |
+| InlineDashboardPage     | Page       |
+| ListPage                | Page       |
+| ListView                | Page       |
+| MultiReferenceReadOnly  | Display    |
+| NarrowWide              | Layout     |
+| OneColumn               | Layout     |
+| PromotedFilters         | Widget     |
+| SelfServiceCaseView     | Page       |
+| SimpleTable             | Table      |
+| SingleReferenceReadOnly | Display    |
+| SubTabs                 | Navigation |
+| TwoColumn               | Layout     |
+| WideNarrow              | Layout     |
+| WssNavBar               | Navigation |
 
 ---
 
@@ -62,6 +63,7 @@ Once both are known, continue to Step 1.
 Read the full contents of `.claude/skills/template-components.md`.
 
 This gives you:
+
 - **Layout template pattern** — DS-agnostic grid skeleton with `// [DS GRID]` placeholder; `templateCol` parsing logic; responsive behavior rules
 - **Design System Adaptation section** — how to map the chosen DS's grid/flex primitive to the computed column ratios
 - **Form template pattern** — PConnect bridge via `createElement(createPConnectComponent(), ...)` and `connectToState`; no DS involved
@@ -75,11 +77,13 @@ Keep this context active throughout the entire generation session. Do not re-rea
 ## Step 2 — Install and discover the design system (once)
 
 Execute **Step 3** from `.claude/prompts/add-component.md` exactly as written:
+
 - Check `package.json` for the DS package
 - Install if missing, including any peer dependencies
 - Report what was installed
 
 Then execute **Step 4** from `.claude/prompts/add-component.md` exactly as written:
+
 - Read the DS README from `node_modules`
 - Discover exported layout components (Grid, Columns, Flex, SimpleGrid, etc.) from `dist/index.d.ts`
 - Read prop interfaces for the grid/layout components needed by layout templates
@@ -96,7 +100,9 @@ Build a **DS layout API reference** from this discovery. Reuse it for every layo
 For each component in the list, check whether `<outputPath>/<ComponentName>/<ComponentName>.tsx` already exists.
 
 If **any** exist, report them all at once and ask:
+
 > "The following N components already exist: [list]. How should I proceed?
+>
 > - **Overwrite all** — replace all existing implementations
 > - **Skip existing** — only generate components that don't exist yet
 > - **Cancel** — stop without generating anything"
@@ -110,7 +116,9 @@ Wait for the user's answer before proceeding. If none exist, continue immediatel
 For each component in the resolved list (in the order listed in Step 0):
 
 ### 4a — Read the component-specific skill file
+
 Execute **Step 2** from `.claude/prompts/add-component.md` for this component:
+
 - Read `.claude/skills/template-skills/<ComponentName>.md` fully
 - Identify the template category from the skill file:
   - **Layout** — uses DS grid primitives from Step 2's API reference
@@ -119,7 +127,9 @@ Execute **Step 2** from `.claude/prompts/add-component.md` for this component:
 - Pay attention to Behavioral Contract, sub-variants, and any Design System Mapping table
 
 ### 4b — Generate the component files
+
 Execute **Step 5** from `.claude/prompts/add-component.md` for this component:
+
 - Create `<outputPath>/<ComponentName>/` directory
 - Create `<ComponentName>.tsx` using:
   - **Layout templates**: DS-agnostic skeleton from `template-components.md` with the `// [DS GRID]` section filled in using DS layout API confirmed in Step 2
@@ -132,13 +142,16 @@ Execute **Step 5** from `.claude/prompts/add-component.md` for this component:
 - Create any CSS file required by the skill file (e.g., `DefaultForm.css` with grid classes)
 
 ### 4c — Register the component
+
 Execute **Step 6** from `.claude/prompts/add-component.md` for this component:
+
 - Add the import to `src/components/component-map.ts` in the Templates section
 - Add the entry to `getSampleComponentMap()` under the templates comment
 - For sub-variants (e.g., TwoColumnPage, TwoColumnTab), register each key separately pointing to its own file or a shared implementation as specified in the skill file
 - Do not reorder or restructure any existing entries
 
 ### 4d — Report progress
+
 After each component: "`<ComponentName>` ✓ — `<Layout | Form | Page>` template`<, using <DS component name> for grid>` if layout"
 
 ---
@@ -146,6 +159,7 @@ After each component: "`<ComponentName>` ✓ — `<Layout | Form | Page>` templa
 ## Step 5 — Verify the build
 
 Execute **Step 7** from `.claude/prompts/add-component.md` exactly as written:
+
 - Run `npm run build`
 - Fix any TypeScript or build errors before reporting completion
 - Report a summary: list of all files created and all entries added to `component-map.ts`

package/templates/react-sdk-reference/.claude/prompts/generate-widget-components.md

@@ -9,6 +9,7 @@ Read the user's message carefully. Extract:
 Both **design system** and **output base path** are required. If either is missing or ambiguous, ask both unresolved items in one numbered list. Do not assume or default the output path — the client's folder structure may differ from the reference app.
 
 Example questions (ask only the ones that are actually missing):
+
 1. Which design system should I use? (e.g. Ant Design, Chakra UI, Carbon, Radix UI)
 2. Where should the widget components be generated? (e.g. `src/components/widget/`)
 
@@ -18,17 +19,17 @@ Once both are known, continue to Step 1.
 
 ### Full component list (default — 9 widgets)
 
-| Component | Description |
-|---|---|
-| AppAnnouncement | System-wide announcements |
-| Attachment | File upload/download |
-| CaseHistory | Case audit trail |
-| FileUtility | File management utility |
-| Followers | Case followers list |
-| QuickCreate | Quick case creation buttons |
-| SummaryItem | Single summary card |
-| SummaryList | List of summary cards |
-| ToDo | Assignment worklist |
+| Component       | Description                 |
+| --------------- | --------------------------- |
+| AppAnnouncement | System-wide announcements   |
+| Attachment      | File upload/download        |
+| CaseHistory     | Case audit trail            |
+| FileUtility     | File management utility     |
+| Followers       | Case followers list         |
+| QuickCreate     | Quick case creation buttons |
+| SummaryItem     | Single summary card         |
+| SummaryList     | List of summary cards       |
+| ToDo            | Assignment worklist         |
 
 ---
 
@@ -37,6 +38,7 @@ Once both are known, continue to Step 1.
 Read the full contents of `.claude/skills/widget-components.md`.
 
 This gives you:
+
 - The DS-agnostic data-fetching skeleton with `// [DS RENDER]` placeholder
 - The Design System Adaptation guide (primitive mapping table, icon discovery rules)
 - All common Pega APIs used in widgets: `PCore.getDataPageUtils()`, `PCore.getMashupApi()`, `PCore.getAttachmentUtils()`, `pConn.getCaseInfo()`, etc.
@@ -51,11 +53,13 @@ Keep this context active throughout the entire generation session. Do not re-rea
 ## Step 2 — Install and discover the design system (once)
 
 Execute **Step 3** from `.claude/prompts/add-component.md` exactly as written:
+
 - Check `package.json` for the DS package
 - Install if missing, including any peer dependencies
 - Report what was installed
 
 Then execute **Step 4** from `.claude/prompts/add-component.md` exactly as written:
+
 - Read the DS README from `node_modules`
 - Discover exported components from `dist/index.d.ts`
 - Focus on presentation primitives used in widgets: Card, List, Table, Button, Badge, Spinner, Skeleton, Empty state
@@ -71,7 +75,9 @@ Build a **DS UI primitive reference map** from this discovery. Reuse it for ever
 For each component in the list, check whether `<outputPath>/<ComponentName>/<ComponentName>.tsx` already exists.
 
 If **any** exist, report them all at once and ask:
+
 > "The following N components already exist: [list]. How should I proceed?
+>
 > - **Overwrite all** — replace all existing implementations
 > - **Skip existing** — only generate components that don't exist yet
 > - **Cancel** — stop without generating anything"
@@ -85,7 +91,9 @@ Wait for the user's answer before proceeding. If none exist, continue immediatel
 For each component in the resolved list (in the order listed in Step 0):
 
 ### 4a — Read the component-specific skill file
+
 Execute **Step 2** from `.claude/prompts/add-component.md` for this component:
+
 - Read `.claude/skills/widget-skills/<ComponentName>.md` fully if it exists
 - Pay attention to:
   - **Behavioral Contract** — data fetching logic, PCore API calls, state management, action handlers
@@ -93,7 +101,9 @@ Execute **Step 2** from `.claude/prompts/add-component.md` for this component:
 - If no skill file exists (e.g., `SummaryList`), use the general data-fetching pattern from `widget-components.md`
 
 ### 4b — Generate the component files
+
 Execute **Step 5** from `.claude/prompts/add-component.md` for this component:
+
 - Create `<outputPath>/<ComponentName>/` directory
 - Create `<ComponentName>.tsx` using:
   - The DS-agnostic data-fetching skeleton from `widget-components.md` (read in Step 1)
@@ -106,12 +116,15 @@ Execute **Step 5** from `.claude/prompts/add-component.md` for this component:
 - Create any CSS or utility files required by the skill file
 
 ### 4c — Register the component
+
 Execute **Step 6** from `.claude/prompts/add-component.md` for this component:
+
 - Add the import to `src/components/component-map.ts` in the Widgets section
 - Add the entry to `getSampleComponentMap()` under the widgets comment
 - Do not reorder or restructure any existing entries
 
 ### 4d — Report progress
+
 After each component: "`<ComponentName>` ✓ — using `<DS card/list primitive>`"
 
 ---
@@ -119,6 +132,7 @@ After each component: "`<ComponentName>` ✓ — using `<DS card/list primitive>
 ## Step 5 — Verify the build
 
 Execute **Step 7** from `.claude/prompts/add-component.md` exactly as written:
+
 - Run `npm run build`
 - Fix any TypeScript or build errors before reporting completion
 - Report a summary: list of all files created and all entries added to `component-map.ts`