@pega/sdk 0.0.2 → 0.0.4

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

@@ -1,81 +0,0 @@
----
-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

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

@@ -1,41 +0,0 @@
----
-agent: agent
-description: Replace a single field component with your design system equivalent
----
-
-Replace the `{{fieldName}}` field component (located in `src/components/field/{{fieldName}}/`) with an equivalent implementation using **{{designSystem}}**.
-
-**Before writing anything:** read ALL files in the component directory, including any `.css` file. For every CSS class, note its visual intent — spacing, sizing, colors, borders, layout. The replacement must produce the same visual appearance as the original.
-
-**Styling priority — apply in this order, stop at the first that works:**
-1. **{{designSystem}} component props/variants** — always prefer built-in props (`size`, `kind`, `hideLabel`, `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
-
-**Before choosing {{designSystem}} components, read the installed package:**
-1. `cat node_modules/{{designSystem}}/README.md` — note the correct import path and usage patterns for the installed version.
-2. `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"` — lists every component actually exported by the installed version.
-3. **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.
-4. Only use component names and prop names confirmed in those files. Do not rely on training knowledge of the API.
-
-**Before writing, discover the design system's own conventions — do not assume:**
-- 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 conventions** — use whatever compact-form prop is documented rather than adding manual padding
-- 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`
-- For **layout primitives**, check the exports list first — prefer design system stack/grid components over raw `<div style={{ display: 'flex' }}>`
-
-Requirements:
-
-1. Keep the same default export function name
-2. Import and use `PConnFieldProps` from `@pega/sdk-react`
-3. Keep the `handleEvent(actions, 'changeNblur', propName, value)` call on blur
-4. Handle `displayMode === 'DISPLAY_ONLY'` and `'STACKED_LARGE_VAL'` using `getComponentFromRegistry('FieldValueList')`
-5. Show `validatemessage` when `status === 'error'`
-6. Pass `data-test-id={testId}` to the interactive element
-7. Support `readOnly`, `disabled`, `required`, `placeholder`, `hideLabel`
-8. Use local state for the input value, sync from `value` prop via `useEffect`
-
-Do NOT modify `component-map.ts` unless the file path changes.

package/templates/react-sdk-reference/.github/prompts/swap-design-system.prompt.md

@@ -1,49 +0,0 @@
----
-agent: agent
-description: Remove MUI and replace all components with a new design system
----
-
-Replace the entire UI layer of this application from MUI (@mui/material) to **{{designSystem}}**.
-
-## Steps:
-
-### 1. Install the new design system
-
-Install {{designSystem}} and remove @mui/material, @mui/icons-material, @mui/styles, @mui/x-date-pickers (keep @mui/x-date-pickers if {{designSystem}} doesn't have a date picker).
-
-### 2. Replace field components (`src/components/field/`)
-
-Replace all MUI TextField, Select, Checkbox, Radio, etc. with {{designSystem}} equivalents. Keep the PConnect wiring (handleEvent, displayMode, validation).
-
-### 3. Replace template components (`src/components/template/`)
-
-Replace MUI Grid, Box, Tabs, Paper with {{designSystem}} layout primitives. Keep children rendering logic.
-
-### 4. Replace widget components (`src/components/widget/`)
-
-Replace MUI Card, List, Table, Button with {{designSystem}} equivalents. Keep data fetching and PCore API calls.
-
-### 5. Replace DSE components (`src/components/designSystemExtension/`)
-
-Replace MUI Alert, Typography, Chip with {{designSystem}} equivalents. FieldValueList is critical — every field uses it.
-
-### 6. Update MashupApp.tsx
-
-Replace MUI's ThemeProvider with {{designSystem}}'s provider (if any). Remove @mui/styles LegacyThemeProvider.
-
-### 7. Update infra components (`src/components/infra/`)
-
-Replace MUI usage in ActionButtons, NavBar, Stages, DeferLoad, DashboardFilter, VerticalTabs.
-
-### 8. Clean up
-
-- Remove all @mui/\* imports
-- Run `npm run build` to verify
-- Fix any TypeScript errors
-
-## Critical Rules
-
-- NEVER modify `@pega/sdk-react` imports or the component registry structure
-- NEVER remove `handleEvent` calls or `getPConnect` wiring
-- ALWAYS handle `displayMode` in field components
-- ALWAYS preserve `data-test-id` attributes

package/templates/react-sdk-reference/.github/skills/swap-design-system.md

@@ -1,105 +0,0 @@
-# Skill: Swap Design System
-
-Replace the entire MUI design system in this application with a customer-specified design system. This is a large-scale refactor that touches all component categories.
-
----
-
-## Prerequisites
-
-- Customer has chosen a target design system (e.g., Chakra UI, Radix/Shadcn, Ant Design, Mantine, etc.)
-- The target package is available on npm
-
----
-
-## Procedure
-
-### Phase 1: Setup
-
-1. Install the target design system package(s)
-2. Install any required peer dependencies (e.g., emotion for Chakra, tailwind for Shadcn)
-3. Set up the design system's provider/theme in `src/MashupApp.tsx` (replace MUI's ThemeProvider)
-
-### Phase 2: Replace FieldValueList First
-
-`src/components/designSystemExtension/FieldValueList/` is used by EVERY field component for display modes. Replace this first so field replacements work immediately.
-
-Required props interface:
-
-```typescript
-interface FieldValueListProps {
-  name?: string;
-  value?: string;
-  variant?: 'stacked' | 'inline';
-}
-```
-
-### Phase 3: Replace Field Components
-
-For each field in `src/components/field/`:
-
-1. Replace MUI input with target design system equivalent
-2. Keep: `getPConnect()`, `handleEvent(actions, 'changeNblur', propName, value)` on blur
-3. Keep: `displayMode` handling (returns FieldValueList)
-4. Keep: validation display (`validatemessage` when `status === 'error'`)
-5. Keep: `data-test-id={testId}`
-
-### Phase 4: Replace Template Components
-
-For each template in `src/components/template/`:
-
-1. Replace MUI Grid/Box/Tabs with target layout primitives
-2. Keep: children rendering logic (either React children or PConnect children)
-3. Keep: `templateCol` parsing for column ratios
-
-### Phase 5: Replace Widget Components
-
-For each widget in `src/components/widget/`:
-
-1. Replace MUI Card/List/Table/Button with target equivalents
-2. Keep: ALL `PCore.*` API calls (data fetching, attachments, pub/sub)
-3. Keep: Loading and error state handling
-
-### Phase 6: Replace DSE Components
-
-For each DSE in `src/components/designSystemExtension/`:
-
-1. Replace MUI Alert/Typography/Chip with target equivalents
-2. Keep: Same prop interfaces (other components depend on these)
-
-### Phase 7: Replace Infra Components
-
-For each infra component in `src/components/infra/`:
-
-1. Replace MUI AppBar/Stepper/Tabs with target equivalents
-2. Keep: SDK integration logic
-
-### Phase 8: Clean Up
-
-1. Remove all `@mui/*` packages from `package.json`
-2. Remove MUI-specific theme configuration
-3. Run `npm run build` — fix any TypeScript errors
-4. Run `npm run dev` — verify components render
-
----
-
-## Critical Invariants (NEVER change these)
-
-- `src/components/helpers/event-utils.ts` — event handler utility
-- `src/components/component-map.ts` structure (only change imports)
-- `...sdkComponents` spread in the component map
-- `@pega/sdk-react` imports
-- `getPConnect()` prop extraction pattern
-- `handleEvent(actions, 'changeNblur', propName, value)` calls
-- `PCore.*` API calls in widgets
-
----
-
-## Verification
-
-After completing all phases:
-
-1. `npm run build` — must pass with zero errors
-2. `npm run dev` — app should load, create case, render form
-3. Field inputs should accept values and persist on blur
-4. Read-only views should show FieldValueList
-5. Validation messages should appear on error