@pega/sdk 0.0.2 → 0.0.3

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