@pega/sdk 0.0.4 → 0.0.5

package/templates/react-sdk-reference/.cursor/rules/prompts/generate-widget-components.mdrules

@@ -1,129 +0,0 @@
----
-description: generate-widget-components.prompt
-alwaysApply: false
----
-
-## Step 0 — Resolve inputs
-
-Read the user's message carefully. Extract:
-
-- **Design system** — the UI library to use (e.g. `Ant Design`, `Chakra UI`, `Carbon`, `Radix UI`)
-- **Output base path** — the folder where widget components should be generated (e.g. `src/components/widget/`)
-- **Component list** — which widgets to generate (default: all 9 listed below)
-
-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/`)
-
-If the user specified a subset (e.g., "just ToDo and Attachment"), restrict the list accordingly.
-
-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 |
-
----
-
-## Step 1 — Read `widget-components.md` (once, for the entire session)
-
-Read the full contents of `.cursor/rules/skills/widget-components.mdrules`.
-
-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.
-- Registration conventions
-
-> The PCore data-fetching logic is always identical regardless of design system. Only the `// [DS RENDER]` section changes per DS.
-
-Keep this context active throughout the entire generation session. Do not re-read it per component.
-
----
-
-## Step 2 — Install and discover the design system (once)
-
-Execute **Step 3** from `.cursor/rules/prompts/add-component.mdrules` 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 `.cursor/rules/prompts/add-component.mdrules` 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
-- Read prop interfaces for these components from `.d.ts` files
-- If the DS has a companion icon package, discover its exports
-
-Build a **DS UI primitive reference map** from this discovery. Reuse it for every widget — do not repeat these commands per component.
-
----
-
-## Step 3 — Overwrite check (all at once)
-
-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"
-
-Wait for the user's answer before proceeding. If none exist, continue immediately.
-
----
-
-## Step 4 — Generate each component (loop)
-
-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 `.cursor/rules/prompts/add-component.mdrules` for this component:
-- Read `.cursor/rules/skills/widget-skills/<ComponentName>.mdrules` fully if it exists
-- Pay attention to:
-  - **Behavioral Contract** — data fetching logic, PCore API calls, state management, action handlers
-  - **Design System Mapping** table — the recommended DS component for presentation
-- 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 `.cursor/rules/prompts/add-component.mdrules` 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)
-  - The Behavioral Contract from the component skill file (PCore API calls, state, actions)
-  - The DS UI primitives confirmed in Step 2 (from the DS primitive reference map — no new terminal commands needed) filling in the `// [DS RENDER]` section
-- Create `index.tsx` if required by the skill file:
-  ```typescript
-  export { default } from './<ComponentName>';
-  ```
-- Create any CSS or utility files required by the skill file
-
-### 4c — Register the component
-Execute **Step 6** from `.cursor/rules/prompts/add-component.mdrules` 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>`"
-
----
-
-## Step 5 — Verify the build
-
-Execute **Step 7** from `.cursor/rules/prompts/add-component.mdrules` 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/.cursor/rules/prompts/identify-components.mdrules

@@ -1,110 +0,0 @@
----
-description: identify-components.prompt
-alwaysApply: false
----
-
-# 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/.cursor/rules/skills/component-contracts.mdrules

@@ -1,145 +0,0 @@
----
-description: component-contracts
-alwaysApply: false
----
-
-# Skill: Component Contracts Reference
-
-Quick-reference lookup of all registered component names and their prop contracts. Use this when you need to know what props a specific component receives from the Pega platform.
-
----
-
-## Field Components
-
-All extend `PConnFieldProps` from `@pega/sdk-react`.
-
-| Registry Name | File | Additional Props |
-|---------------|------|-----------------|
-| `TextInput` | `field/TextInput/TextInput.tsx` | `fieldMetadata?: any` |
-| `TextArea` | `field/TextArea/` | `fieldMetadata?: any` |
-| `Dropdown` | `field/Dropdown/` | `datasource?, listType?` |
-| `Checkbox` | `field/Checkbox/` | `value: boolean` (not string) |
-| `RadioButtons` | `field/RadioButtons/` | `datasource?, listType?` |
-| `Date` | `field/Date/` | — |
-| `DateTime` | `field/DateTime/` | — |
-| `Time` | `field/Time/` | — |
-| `Currency` | `field/Currency/` | `currencyISOCode?, formatterType?` |
-| `Decimal` | `field/Decimal/` | `decimalPrecision?` |
-| `Integer` | `field/Integer/` | — |
-| `Percentage` | `field/Percentage/` | — |
-| `Email` | `field/Email/Email.tsx` | — |
-| `Phone` | `field/Phone/Phone.tsx` | `datasource?` (country codes) |
-| `URL` | `field/URL/` | — |
-| `AutoComplete` | `field/AutoComplete/` | `datasource?, listType?, columns?` |
-| `Multiselect` | `field/Multiselect/Multiselect.tsx` | `datasource?, listType?` |
-| `RichText` | `field/RichText/` | — |
-| `ScalarList` | `field/ScalarList/` | `datasource?` |
-| `SelectableCard` | `field/SelectableCard/` | `datasource?` |
-| `Group` | `field/Group/` | — |
-| `Location` | `field/Location/` | — |
-| `ObjectReference` | `field/ObjectReference/` | `value: object` |
-| `SemanticLink` | `field/SemanticLink/` | `text?, displayAs?` |
-| `UserReference` | `field/UserReference/` | `showAsFormattedText?` |
-| `CancelAlert` | `field/CancelAlert/` | — |
-| `TextContent` | `field/TextContent/` | `content?` |
-
----
-
-## Template Components
-
-All extend `PConnProps`. Most receive React `children` or use `getPConnect().getChildren()`.
-
-| Registry Name | File | Key Props |
-|---------------|------|-----------|
-| `OneColumn` | `template/OneColumn/OneColumn.tsx` | `children` |
-| `OneColumnPage` | `template/OneColumn/OneColumnPage.tsx` | `children` |
-| `OneColumnTab` | `template/OneColumn/OneColumnTab.tsx` | `children` |
-| `TwoColumn` | `template/TwoColumn/TwoColumn.tsx` | `children, templateCol?` |
-| `TwoColumnPage` | `template/TwoColumn/TwoColumnPage.tsx` | `children` |
-| `TwoColumnTab` | `template/TwoColumn/TwoColumnTab.tsx` | `children` |
-| `NarrowWide` | `template/NarrowWide/NarrowWide.tsx` | `children, templateCol?` |
-| `WideNarrow` | `template/WideNarrow/WideNarrow.tsx` | `children, templateCol?` |
-| `Details` | `template/Details/Details.tsx` | `children` |
-| `DefaultForm` | `template/DefaultForm/` | PConnect children |
-| `DefaultPage` | `template/DefaultPage/` | PConnect children |
-| `CaseView` | `template/CaseView/` | PConnect children, `header?, subheader?` |
-| `CaseSummary` | `template/CaseSummary/` | PConnect children |
-| `Confirmation` | `template/Confirmation/` | `label?` |
-| `SimpleTable` | `template/SimpleTable/SimpleTable.tsx` | `datasource?, fields?, label?` |
-| `ListView` | `template/ListView/` | `datasource?, fields?` |
-| `SubTabs` | `template/SubTabs/` | PConnect children |
-| `AppShell` | `template/AppShell/AppShell.tsx` | PConnect children |
-| `DataReference` | `template/DataReference/` | PConnect children |
-| `ListPage` | `template/ListPage/ListPage.tsx` | PConnect children |
-| `InlineDashboard` | `template/InlineDashboard/` | PConnect children |
-| `FieldGroupTemplate` | `template/FieldGroupTemplate/` | PConnect children |
-
----
-
-## Widget Components
-
-All extend `PConnProps`. Fetch their own data.
-
-| Registry Name | File | Key Props |
-|---------------|------|-----------|
-| `Todo` | `widget/ToDo/` | `datasource?, headerText?, context?` |
-| `Attachment` | `widget/Attachment/` | `value, allowMultiple?, extensions?` |
-| `CaseHistory` | `widget/CaseHistory/` | `datasource?` |
-| `FileUtility` | `widget/FileUtility/FileUtility.tsx` | `datasource?` |
-| `Followers` | `widget/Followers/` | — |
-| `AppAnnouncement` | `widget/AppAnnouncement/` | `datasource?, headerText?` |
-| `QuickCreate` | `widget/QuickCreate/` | — |
-| `SummaryItem` | `widget/SummaryItem/` | `label?, value?, actions?` |
-| `SummaryList` | `widget/SummaryList/` | `datasource?` |
-
----
-
-## Design System Extension Components
-
-| Registry Name | File | Key Props |
-|---------------|------|-----------|
-| `FieldValueList` | `designSystemExtension/FieldValueList/` | `name?, value?, variant?` |
-| `AlertBanner` | `designSystemExtension/AlertBanner/` | `variant, heading?, messages, onClose?` |
-| `Banner` | `designSystemExtension/Banner/` | `variant?, text?` |
-| `CaseSummaryFields` | `designSystemExtension/CaseSummaryFields/` | PConnect-based |
-| `DetailsFields` | `designSystemExtension/DetailsFields/` | PConnect-based |
-| `FieldGroup` | `designSystemExtension/FieldGroup/` | PConnect-based |
-| `FieldGroupList` | `designSystemExtension/FieldGroupList/` | PConnect-based |
-| `Operator` | `designSystemExtension/Operator/` | `label?, name?, id?` |
-| `Pulse` | `designSystemExtension/Pulse/` | PConnect-based |
-| `RichTextEditor` | `designSystemExtension/RichTextEditor/` | extends `PConnFieldProps` |
-| `WssQuickCreate` | `designSystemExtension/WssQuickCreate/` | — |
-
----
-
-## Infrastructure (from `sdkComponents` — do NOT replace)
-
-| Registry Name | Source |
-|---------------|--------|
-| `RootContainer` | `@pega/sdk-react` |
-| `ViewContainer` | `@pega/sdk-react` |
-| `FlowContainer` | `@pega/sdk-react` |
-| `Reference` | `@pega/sdk-react` |
-| `View` | `@pega/sdk-react` |
-| `Region` | `@pega/sdk-react` |
-| `CaseView` (infra) | `@pega/sdk-react` |
-| `Assignment` | `@pega/sdk-react` |
-| `AssignmentCard` | `@pega/sdk-react` |
-| `ActionButtons` | `@pega/sdk-react` |
-| `CaseSummary` (infra) | `@pega/sdk-react` |
-| `ErrorBoundary` | `@pega/sdk-react` |
-| `MultiStep` | `@pega/sdk-react` |
-
----
-
-## Infra (sample-local, replaceable but exercise caution)
-
-| Registry Name | File |
-|---------------|------|
-| `ActionButtons` | `infra/ActionButtons/` |
-| `DeferLoad` | `infra/DeferLoad/` |
-| `NavBar` | `infra/NavBar/` |
-| `Stages` | `infra/Stages/` |
-| `DashboardFilter` | `infra/DashboardFilter/` |
-| `VerticalTabs` | `infra/VerticalTabs/VerticalTabs.tsx` |
-| `LeftAlignVerticalTabs` | `infra/VerticalTabs/LeftAlignVerticalTabs.tsx` |

package/templates/react-sdk-reference/.cursor/rules/skills/design-system-extension-skills/AlertBanner.mdrules

@@ -1,140 +0,0 @@
----
-description: DSE component skill: AlertBanner
-alwaysApply: false
----
-
-# Skill: AlertBanner
-
-Alert/notification banner that displays one or more messages with a severity variant and an optional dismiss button.
-
-> **Prerequisite skill:** [`design-system-extension.md`](../design-system-extension.md) — covers architecture, props interface, styling patterns, and registration patterns common to ALL DSE components.
-
----
-
-## Component Purpose
-
-Renders a visually-styled alert box tied to a Pega `variant` value (urgent, warning, success, info). When multiple messages are present, it shows a count badge in the title and lists items in a `<ul>`. A single message is rendered inline. The component optionally shows a close/dismiss button.
-
-## Pega Metadata
-
-- **Pega Name:** `AlertBanner`
-- **Registration key:** `AlertBanner` (in `component-map.ts`)
-- **Does NOT use `getPConnect`** — receives all data as direct props
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `id` | `string` | Yes | DOM id for the root wrapper element |
-| `variant` | `string` | Yes | Alert variant: `'urgent'`, `'warning'`, `'success'`, `'info'` |
-| `messages` | `Array<string \| { label?: string; description?: string }>` | Yes | One or more messages (string or structured object) |
-| `onDismiss` | `function` (optional) | No | Dismiss/close handler; if provided, show a close button |
-
-## Behavioral Contract
-
-1. **Variant mapping:** Map the Pega `variant` string to a UI severity level and display label:
-   - `'urgent'` → severity `error`, label `'Error'`
-   - `'warning'` → severity `warning`, label `'Warning'`
-   - `'success'` → severity `success`, label `'Success'`
-   - `'info'` → severity `info`, label `'Info'`
-   - Unknown/missing variant → fall back to `info`
-2. **Single message:** Render `renderMessage(messages[0])` inline (no title, no list).
-3. **Multiple messages (`messages.length > 1`):**
-   - Render a title containing the display label (e.g., "Error") plus a circular count badge showing `messages.length`.
-   - Render messages as a `<ul>` with one `<li>` per message.
-4. **`renderMessage(message)` logic:**
-   - If `message` is an object with a truthy `label`, render `<strong>{label}</strong> {description}`.
-   - If `message` is an object without a label, render `description` only.
-   - If `message` is a string with no colon (`:`), render it as plain text.
-   - If `message` is a string containing a colon, bold everything up to and including the colon, then render the rest as plain text.
-5. **Dismiss button:** Only render the close button if `onDismiss` is provided.
-6. **Root wrapper:** Wrap the alert in a `<div id={id}>`.
-
-## Visual Specifications
-
-Derived from `AlertBanner.css` and MUI Alert usage:
-
-### Alert Container
-
-| Property | Value |
-|----------|-------|
-| Variant | Outlined (border visible) |
-| Border color | Driven by severity (error → red, warning → orange, success → green, info → blue) |
-
-### Title Row (multiple messages only)
-
-| Property | Value |
-|----------|-------|
-| Font weight | 700 |
-| Font size | 1rem |
-| Layout | `display: flex; align-items: center; gap: 0.25rem` |
-
-### Count Badge
-
-| Property | Value |
-|----------|-------|
-| Layout | `display: inline-flex; align-items: center; justify-content: center` |
-| Min width | 1rem |
-| Height | 1rem |
-| Padding | `0 0.2rem` |
-| Border radius | 999px (fully rounded / pill) |
-| Font size | 0.6rem |
-| Font weight | 700 |
-| `urgent` background | `var(--app-error-dark-color)` |
-| `warning` background | `var(--app-warning-color-dark)` |
-| `success` background | `var(--stepper-completed-bg-color)` |
-| `info` background | `var(--link-button-color)` |
-| Badge text color | `#fff` (all variants) |
-
-### Message List
-
-| Property | Value |
-|----------|-------|
-| Margin | 0 |
-| Padding left | 1.25rem |
-
-**CSS-only implementation notes:**
-- Wrap the entire component in a container `<div>` with `role="alert"`.
-- Use CSS custom properties (`--app-error-dark-color`, etc.) for badge colors.
-- For the outlined alert box: `border: 1px solid currentColor; border-radius: 4px; padding: 0.75rem 1rem`.
-- Severity colors (for border and icon): error `#d32f2f`, warning `#ed6c02`, success `#2e7d32`, info `#0288d1`.
-- Badge: `display: inline-flex; align-items: center; justify-content: center; min-width: 1rem; height: 1rem; padding: 0 0.2rem; border-radius: 999px; font-size: 0.6rem; font-weight: 700; color: #fff`.
-- Left accent icon: use an SVG or Unicode symbol matching the severity (⚠, ✓, ℹ, ✕).
-- Close button (if `onDismiss`): absolutely positioned top-right, `background: none; border: none; cursor: pointer; font-size: 1.25rem`.
-- Message list: `margin: 0; padding-left: 1.25rem; list-style: disc`.
-
-## Edge Cases & Special Logic
-
-- If `variant` is not one of the four known values, default to `info` severity.
-- If `messages` is an empty array, render nothing (or render the alert shell with no content).
-- If `message.label` is falsy but `message.description` is set, render description without `<strong>`.
-- If a string message has no colon, render it entirely as plain text (no bold).
-- The colon-split only applies to the **first** colon in the string.
-
-## Dependencies
-
-- No Pega SDK imports required (no `getPConnect`)
-- No helper utilities required
-
-## Design System Mapping
-
-**UI control type:** Alert / Notification banner with severity levels.
-
-Listed design systems are examples only.
-
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | `<div role="alert">` with severity border + inline close button |
-| MUI | `<Alert variant='outlined' severity={severity} onClose={onDismiss}><AlertTitle>` |
-| Ant Design | `<Alert type={type} message={title} description={…} closable banner />` |
-| Chakra UI | `<Alert status={status}><AlertIcon /><AlertTitle /><AlertDescription /><CloseButton />` |
-| Shadcn/ui | Custom `<Alert>` with `variant` prop |
-
-When implementing in a specific design system, map the following:
-- `variant='urgent'` → `severity/type/status='error'` or `'danger'`
-- `variant='warning'` → `severity/type/status='warning'`
-- `variant='success'` → `severity/type/status='success'`
-- `variant='info'` → `severity/type/status='info'`
-- `onDismiss` → `onClose` / `closable` / close button prop
-- Multiple messages → render as a list inside the alert description area
-- Badge count → render as a tag/badge chip next to the title

package/templates/react-sdk-reference/.cursor/rules/skills/design-system-extension-skills/Banner.mdrules

@@ -1,154 +0,0 @@
----
-description: DSE component skill: Banner
-alwaysApply: false
----
-
-# Skill: Banner
-
-Promotional/informational banner with a full-width background image hero section and a two-column content layout below it.
-
-> **Prerequisite skill:** [`design-system-extension.md`](../design-system-extension.md) — covers architecture, props interface, styling patterns, and registration patterns common to ALL DSE components.
-
----
-
-## Component Purpose
-
-Renders a visually rich banner composed of two parts:
-1. **Hero section:** Full-width area with a background image, centered title and message text overlaid.
-2. **Content columns:** Two adjustable-width columns below the hero, rendered from the `a` and `b` slot props. Column widths are controlled by the `variant` prop.
-
-## Pega Metadata
-
-- **Pega Name:** `Banner`
-- **Registration key:** `Banner` (in `component-map.ts`)
-- **Does NOT use `getPConnect`** — receives all data as direct props
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `a` | `ReactNode` | Yes | Content for the first (left/narrower) column |
-| `b` | `ReactNode` | Yes | Content for the second (right/wider) column |
-| `banner` | `object` | Yes | Banner metadata (see sub-props below) |
-| `banner.title` | `string` | Yes | Title text displayed in the hero section |
-| `banner.message` | `string` | Yes | Descriptive message text in the hero section |
-| `banner.backgroundImage` | `string` | Yes | URL of the background image for the hero section |
-| `banner.variant` | `any` | No | Unused internally (layout variant comes from top-level `variant`) |
-| `banner.backgroundColor` | `any` | No | Unused internally |
-| `banner.tintImage` | `any` | No | Unused internally |
-| `variant` | `string` | Yes | Column layout: `'two-column'`, `'narrow-wide'`, or `'wide-narrow'` |
-
-## Behavioral Contract
-
-1. **Hero section:** Render a `<div>` with class `background-image-style` and the inline style `backgroundImage: url(${backgroundImage})`.
-2. Inside the hero, render an overlay `<div>` with classes `background-style content`.
-3. Inside the overlay, render `<h1 className='title'>{title}</h1>` and `<p className='message'>{message}</p>`.
-4. **Column layout:** Below the hero, render a 12-column grid container with two columns:
-   - Column `a`: sized according to the variant (left/first column).
-   - Column `b`: sized according to the variant (right/second column).
-5. **Variant column widths:**
-   - `'two-column'`: column A = 6/12, column B = 6/12 (equal split).
-   - `'narrow-wide'`: column A = 4/12, column B = 8/12.
-   - `'wide-narrow'`: column A = 8/12, column B = 4/12.
-6. **Column A styles:** `padding: 1rem; background-color: var(--app-form-bg-color); border-radius: 16px; height: fit-content`.
-7. **Column B styles:** `padding: 0rem 1rem` (no background).
-8. **Outer wrapper:** `<div style={{ marginBottom: '2rem' }}>`.
-
-## Layout Variants
-
-```
-two-column:   [A 50%]  [B 50%]
-narrow-wide:  [A 33%]  [B 67%]
-wide-narrow:  [A 67%]  [B 33%]
-```
-
-## Visual Specifications
-
-Derived from `Banner.css`:
-
-### Hero Section
-
-| Property | Value |
-|----------|-------|
-| Margin left | -16px (bleeds to container edge) |
-| Margin right | -16px |
-| Height | `calc(19rem)` |
-| Background size | cover |
-| Background position | center center |
-
-### Hero Overlay
-
-| Property | Value |
-|----------|-------|
-| Background color | transparent |
-| Color | `var(--banner-text-color)` |
-| Width | 100% |
-| Height | 100% |
-| Text align | center |
-| Display | flex |
-| Flex direction | column |
-| Justify content | center |
-| Align items | center |
-| Gap | `calc(0.5rem)` |
-
-### Hero Title
-
-| Property | Value |
-|----------|-------|
-| Margin | 0 |
-| Font size | 1.728rem |
-| Font weight | 600 |
-
-### Hero Message
-
-| Property | Value |
-|----------|-------|
-| Margin | 0 |
-| Font size | 1rem |
-| Font weight | 400 |
-
-### Content Grid
-
-| Property | Value |
-|----------|-------|
-| Padding | 1rem |
-| Column spacing | 1 spacing unit (≈ 8px) |
-
-**CSS-only implementation notes:**
-- Hero: `margin: 0 -16px; height: 19rem; background-size: cover; background-position: center; position: relative`.
-- Overlay: `position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.5rem; color: var(--banner-text-color); text-align: center`.
-- Content grid below hero: `display: grid; grid-template-columns: <a-cols>fr <b-cols>fr; gap: 8px; padding: 1rem`.
-- Column A: `padding: 1rem; background-color: var(--app-form-bg-color); border-radius: 16px; height: fit-content`.
-- Column B: `padding: 0 1rem`.
-- For responsive behavior, collapse to single column on small viewports.
-
-## Edge Cases & Special Logic
-
-- If `backgroundImage` is an empty string or undefined, the hero section renders without a background image (transparent/color background).
-- If `variant` is not one of the three known values, implement a safe default (e.g., `'two-column'`).
-- The `banner.backgroundColor`, `banner.variant`, and `banner.tintImage` props are received but not rendered in the reference implementation.
-
-## Dependencies
-
-- No Pega SDK imports required (no `getPConnect`)
-- No helper utilities required
-
-## Design System Mapping
-
-**UI control type:** Full-width banner hero with responsive two-column content area.
-
-Listed design systems are examples only.
-
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | CSS Grid for columns, CSS background for hero |
-| MUI | `<Grid container size={12}>` with `<Grid size={{ xs: ... }}>` for columns |
-| Ant Design | `<Row gutter={8}>` with `<Col span={...}>` for columns |
-| Chakra UI | `<SimpleGrid columns={2}>` or `<Grid templateColumns='...'>` |
-| Shadcn/ui | CSS Grid with Tailwind column utilities |
-
-When implementing in a specific design system, map the following:
-- `variant` column widths → grid column span values
-- Background image hero → `backgroundImage` inline style with `background-size: cover`
-- Column A (card-like) → design system's Card or `bg` prop with border-radius
-- Column B (plain) → plain container with horizontal padding only