@pega/sdk 0.0.4 → 0.0.6

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

@@ -1,192 +0,0 @@
----
-agent: agent
-description: Add a new component type to the registry
----
-
-## Step 0 — Resolve missing information
-
-Read the user's message carefully. Extract:
-
-- **Component name** — the exact name (e.g. `AutoComplete`, `DatePicker`)
-- **Component type** — one of: `field` | `template` | `widget` | `designSystemExtension`
-- **Design system** — the UI library to use (e.g. `Ant Design`, `Chakra UI`, `Carbon`, `Radix UI`)
-- **Output path** — the exact or relative path where the component should be generated (e.g. `src/components/field/AutoComplete`)
-
-All four values above are required. If any are missing or ambiguous, you MUST stop and ask the user before proceeding. Do not infer any value from the project structure, `.instructions.md` files, existing folders, or any other source.
-
-⛔ **STOP** — If the user's message does not explicitly provide ALL of: component name, component type, design system, and output path — ask for the missing items now. Do not proceed to Step 1 until you have explicit answers from the user for all required inputs.
-
-Example questions to ask (only ask the ones that are actually missing):
-
-1. Which design system should I use? (e.g. Ant Design, Chakra UI, Carbon, Radix UI)
-2. What is the exact component name?
-3. What type of component is this? (field / template / widget / designSystemExtension)
-4. What is the exact or relative path where the component should be generated? (e.g. `src/components/field/AutoComplete`)
-
-### Case-insensitive component name matching
-
-The user may enter the component name in any casing (e.g. `autocomplete`, `Autocomplete`, `autoComplete`). It is your responsibility to match it to the correct canonical name by checking the skill files in `.github/skills/field-skills/`, `.github/skills/template-skills/`, `.github/skills/widget-skills/`, and `.github/skills/design-system-extension-skills/`. For example, if the user types `autocomplete`, match it to `AutoComplete`.
-
-Once all four are known, continue to Step 1.
-
----
-
-## Step 1 — Check for existing component (overwrite check)
-
-Before generating, check if a component already exists at the resolved output path:
-
-1. Check if `<outputPath>/<ComponentName>.tsx` (or the directory) already exists.
-2. If it **does exist**, ask the user: _"A component named `<ComponentName>` already exists at `<outputPath>`. Do you want to overwrite it with the new implementation?"_
-   - If the user says **yes**, proceed to overwrite.
-   - If the user says **no**, stop and skip generation.
-3. If it **does not exist**, continue to Step 2.
-
----
-
-## Step 2 — Check for skill files
-
-Always read the **general type skill** for the component type:
-
-| Component Type          | General Skill File                          |
-| ----------------------- | ------------------------------------------- |
-| `field`                 | `.github/skills/field-components.md`        |
-| `template`              | `.github/skills/template-components.md`     |
-| `widget`                | `.github/skills/widget-components.md`       |
-| `designSystemExtension` | `.github/skills/design-system-extension.md` |
-
-Then look for a **component-specific skill** based on the component type:
-
-| Component Type          | Specific Skill Location                                            |
-| ----------------------- | ------------------------------------------------------------------ |
-| `field`                 | `.github/skills/field-skills/<ComponentName>.md`                   |
-| `template`              | `.github/skills/template-skills/<ComponentName>.md`                |
-| `widget`                | `.github/skills/widget-skills/<ComponentName>.md`                  |
-| `designSystemExtension` | `.github/skills/design-system-extension-skills/<ComponentName>.md` |
-
-If the component-specific skill file exists, read it fully. Pay special attention to:
-
-- **Behavioral Contract** — state management, event handling, option loading, edge cases
-- **Design System Mapping** table — the recommended component for the chosen design system
-
-You must read **both** the general type skill and the component-specific skill (if it exists) before proceeding.
-
-Examples:
-
-- `AutoComplete` (field) → read `field-components.md` + `field-skills/AutoComplete.md`
-- `AdvancedSearch` (template) → read `template-components.md` + `template-skills/AdvancedSearch.md`
-- `AppAnnouncement` (widget) → read `widget-components.md` + `widget-skills/AppAnnouncement.md`
-- `AlertBanner` (designSystemExtension) → read `design-system-extension.md` + `design-system-extension-skills/AlertBanner.md`
-
-If no component-specific skill file exists, continue using the general pattern from the type skill.
-
----
-
-## Step 3 — Check and install dependencies
-
-Run:
-
-```
-cat package.json | grep "<design-system-package>"
-```
-
-If the design system package is **not** listed in `dependencies` or `devDependencies`, install it:
-
-```
-npm install <design-system-package>
-```
-
-Also install any peer dependencies documented in the package's README. Report what was installed.
-
----
-
-## Step 4 — Discover the design system's API
-
-Before writing any code, inspect 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`:
-   `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.
-
-Also check:
-
-- Whether the design system has a **form layout wrapper** (label + input + helper text) — use it instead of manual margins
-- Whether it has **size/density/variant conventions** — use built-in props rather than custom padding
-- Whether it has a **companion icons package** — read its exports before using any icon name; never guess icon names
-- Whether it has a **tokens or CSS directory** — use design system CSS custom properties for spacing; never hardcode `px` values
-
----
-
-## Step 5 — Generate the component
-
-Create the component directory at the resolved output path (from Step 0).
-
-Create `<ComponentName>.tsx` using the pattern for the component type:
-
-### field
-
-Use this structure from `field-components.md` (read in Step 2):
-
-1. Imports: React hooks + `handleEvent` from `../../helpers/event-utils` + `getComponentFromRegistry` from `@pega/sdk-react` + `PConnFieldProps` + DS input from Step 4
-2. Interface extending `PConnFieldProps` with any extra props from the component skill file
-3. Destructure: `getPConnect`, `label`, `required`, `disabled`, `value`, `validatemessage`, `status`, `readOnly`, `testId`, `helperText`, `displayMode`, `hideLabel`, `placeholder`
-4. Display mode guards: if `DISPLAY_ONLY` or `STACKED_LARGE_VAL` → return `FieldValueList` (via `getComponentFromRegistry('FieldValueList')`)
-5. Return → DS form input from Step 4, with `onBlur` calling `handleEvent(actions, 'changeNblur', propName, inputValue)`. Show `validatemessage` when `status === 'error'`. Pass `data-test-id={testId}` on the interactive element.
-
-### template
-
-Use this structure from `template-components.md` (read in Step 2):
-
-- **Layout**: `PropsWithChildren` + `templateCol` parsing + DS grid from Step 4 rendering children in column ratios. Mobile: stack to full width.
-- **Form**: `createElement(createPConnectComponent(), ...)` for each child from `getPConnect().getChildren()[0].getPConnect().getChildren()`. No DS primitives.
-- **Page**: `createElement(createPConnectComponent(), ...)` for each region from `getPConnect().getChildren()`. No DS primitives.
-
-### widget
-
-Use this structure from `widget-components.md` (read in Step 2):
-
-1. Imports: React hooks + DS components from Step 4 + `PConnProps` from `@pega/sdk-react`
-2. Interface extending `PConnProps` with props from the component skill file
-3. Component function: destructure `getPConnect`, call `getPConnect()` to get `pConn`
-4. `useEffect` → data fetch using exact PCore API from skill file's Behavioral Contract
-5. Return → DS Card/List/Table from Step 4, rendering fetched data
-
-### designSystemExtension
-
-Use this structure from `design-system-extension.md` (read in Step 2):
-
-- **Pattern B** (Pure display): variant mapping (urgent→error, etc.) + DS Alert/Card/Avatar from Step 4. No `getPConnect`.
-- **Pattern A** (PConnect display): CSS classes + optional DS typography. No DS primitives.
-- **Pattern C** (Complex display): `createElement(createPConnectComponent(), ...)` for PConnect children. No DS primitives.
-
----
-
-Create `index.tsx`:
-
-```typescript
-export { default } from './<ComponentName>';
-```
-
----
-
-## Step 6 — Register in component-map.ts
-
-Edit `src/components/component-map.ts`:
-
-1. Add the import at the top of the file, in the correct section (Fields / Templates / Widgets / Design System Extension)
-2. Add an entry in `getSampleComponentMap()` under the matching category comment
-
-Do not restructure or reorder any existing entries.
-
----
-
-## Step 7 — Verify the build
-
-Run:
-
-```
-npm run build
-```
-
-If build errors occur, fix them before reporting completion. Report what files were created and what was added to `component-map.ts`.

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

@@ -1,193 +0,0 @@
-{
-  "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"
-      }
-    ]
-  }
-}