@pega/sdk 0.0.2 → 0.0.4

package/templates/react-sdk-reference/.github/skills/template-skills/TwoColumn.md

@@ -16,20 +16,20 @@ Renders two child components side by side in a responsive grid. Column widths ar
 
 ## Pega Metadata
 
-| Variant | Registration Key |
-|---------|-----------------|
-| TwoColumn | `TwoColumn` |
-| TwoColumnPage | `TwoColumnPage` |
-| TwoColumnTab | `TwoColumnTab` |
+| Variant       | Registration Key |
+| ------------- | ---------------- |
+| TwoColumn     | `TwoColumn`      |
+| TwoColumnPage | `TwoColumnPage`  |
+| TwoColumnTab  | `TwoColumnTab`   |
 
 All three extend `PConnProps`. Children are received as React `children` (not via `getPConnect().getChildren()`).
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode[]` | Yes | Exactly 2 children (left column, right column) |
-| `templateCol` | `string` | No | Column width ratio string, e.g., `'1fr 1fr'`, `'2fr 1fr'`. Default `'1fr 1fr'` |
+| Prop          | Type          | Required | Description                                                                    |
+| ------------- | ------------- | -------- | ------------------------------------------------------------------------------ |
+| `children`    | `ReactNode[]` | Yes      | Exactly 2 children (left column, right column)                                 |
+| `templateCol` | `string`      | No       | Column width ratio string, e.g., `'1fr 1fr'`, `'2fr 1fr'`. Default `'1fr 1fr'` |
 
 ## Sub-Variants
 
@@ -66,35 +66,36 @@ Derived from `TwoColumn.tsx` and `TwoColumnTab.tsx` makeStyles:
 
 ### Column Style
 
-| Property | Value |
-|----------|-------|
-| Display | grid |
-| Gap | 1rem |
+| Property      | Value                                 |
+| ------------- | ------------------------------------- |
+| Display       | grid                                  |
+| Gap           | 1rem                                  |
 | Align content | baseline (children stack top-aligned) |
 
 ### Grid Spacing
 
-| Property | Value |
-|----------|-------|
+| Property          | Value                     |
+| ----------------- | ------------------------- |
 | Container spacing | 1 (≈ 8px between columns) |
 
 ### Responsive Behavior
 
-| Breakpoint | Column A | Column B |
-|-----------|----------|----------|
-| xs (mobile) | 12/12 (full width) | 12/12 (full width, stacks below) |
-| md+ (desktop) | `aSize`/12 | `bSize`/12 |
+| Breakpoint    | Column A           | Column B                         |
+| ------------- | ------------------ | -------------------------------- |
+| xs (mobile)   | 12/12 (full width) | 12/12 (full width, stacks below) |
+| md+ (desktop) | `aSize`/12         | `bSize`/12                       |
 
 **Column ratio examples:**
 
-| `templateCol` | Column A | Column B |
-|--------------|----------|----------|
-| `'1fr 1fr'` | 6/12 (50%) | 6/12 (50%) |
-| `'2fr 1fr'` | 8/12 (67%) | 4/12 (33%) |
-| `'1fr 2fr'` | 4/12 (33%) | 8/12 (67%) |
-| `'3fr 1fr'` | 9/12 (75%) | 3/12 (25%) |
+| `templateCol` | Column A   | Column B   |
+| ------------- | ---------- | ---------- |
+| `'1fr 1fr'`   | 6/12 (50%) | 6/12 (50%) |
+| `'2fr 1fr'`   | 8/12 (67%) | 4/12 (33%) |
+| `'1fr 2fr'`   | 4/12 (33%) | 8/12 (67%) |
+| `'3fr 1fr'`   | 9/12 (75%) | 3/12 (25%) |
 
 **CSS-only implementation notes:**
+
 - Column container: `display: grid; gap: 1rem; align-content: start`.
 - Outer grid: `display: grid; grid-template-columns: <aFraction>fr <bFraction>fr; gap: 8px`.
 - Mobile: `grid-template-columns: 1fr` (single column stack).
@@ -117,15 +118,16 @@ Derived from `TwoColumn.tsx` and `TwoColumnTab.tsx` makeStyles:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | CSS Grid with `grid-template-columns: <a>fr <b>fr; gap: 8px` |
-| MUI | `<Grid container spacing={1}><Grid size={{ xs: 12, md: N }}>` |
-| Ant Design | `<Row gutter={8}><Col xs={24} md={N * 2}>` (Ant uses 24-column grid) |
-| Chakra UI | `<SimpleGrid columns={{ base: 1, md: 2 }} spacing={2}>` |
-| Shadcn/ui | Tailwind `grid grid-cols-1 md:grid-cols-[<a>fr_<b>fr] gap-2` |
+| Design System      | Recommended Component                                                |
+| ------------------ | -------------------------------------------------------------------- |
+| Default (CSS only) | CSS Grid with `grid-template-columns: <a>fr <b>fr; gap: 8px`         |
+| MUI                | `<Grid container spacing={1}><Grid size={{ xs: 12, md: N }}>`        |
+| Ant Design         | `<Row gutter={8}><Col xs={24} md={N * 2}>` (Ant uses 24-column grid) |
+| Chakra UI          | `<SimpleGrid columns={{ base: 1, md: 2 }} spacing={2}>`              |
+| Shadcn/ui          | Tailwind `grid grid-cols-1 md:grid-cols-[<a>fr_<b>fr] gap-2`         |
 
 When implementing in a specific design system:
+
 - Parse `templateCol` using the same ratio algorithm (strip units, divide 12 by total)
 - Apply `align-content: baseline` so children within each column stack top-aligned
 - Collapse to single column on mobile breakpoint

package/templates/react-sdk-reference/.github/skills/template-skills/WideNarrow.md

@@ -19,11 +19,11 @@ Renders two children side by side with the left column wider than the right. Typ
 
 ## Pega Metadata
 
-| Variant | Registration Key |
-|---------|-----------------|
-| WideNarrow | `WideNarrow` |
-| WideNarrowPage | `WideNarrowPage` |
-| WideNarrowForm | `WideNarrowForm` |
+| Variant           | Registration Key    |
+| ----------------- | ------------------- |
+| WideNarrow        | `WideNarrow`        |
+| WideNarrowPage    | `WideNarrowPage`    |
+| WideNarrowForm    | `WideNarrowForm`    |
 | WideNarrowDetails | `WideNarrowDetails` |
 
 All extend `PConnProps`.
@@ -32,38 +32,38 @@ All extend `PConnProps`.
 
 ### WideNarrow
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode[]` | No | Two children — `[0]` → wide (left), `[1]` → narrow (right) |
-| `a` | `any` | No | Wide (left) column content |
-| `b` | `any` | No | Narrow (right) column content |
-| `title` | `string` | No | Optional title (not rendered) |
-| `cols` | `string` | No | Column template (not rendered) |
-| `icon` | `string` | No | Icon name (not rendered) |
+| Prop       | Type          | Required | Description                                                |
+| ---------- | ------------- | -------- | ---------------------------------------------------------- |
+| `children` | `ReactNode[]` | No       | Two children — `[0]` → wide (left), `[1]` → narrow (right) |
+| `a`        | `any`         | No       | Wide (left) column content                                 |
+| `b`        | `any`         | No       | Narrow (right) column content                              |
+| `title`    | `string`      | No       | Optional title (not rendered)                              |
+| `cols`     | `string`      | No       | Column template (not rendered)                             |
+| `icon`     | `string`      | No       | Icon name (not rendered)                                   |
 
 ### WideNarrowPage
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode[]` | Yes | Two children — `[0]` → wide slot, `[1]` → narrow slot |
-| `title` | `string` | Yes | Page title (passed to WideNarrow) |
-| `templateCol` | `string` | No | Column ratio (default `'1fr 1fr'`) |
-| `icon` | `string` | No | Icon name (strips `'pi pi-'` prefix) |
+| Prop          | Type          | Required | Description                                           |
+| ------------- | ------------- | -------- | ----------------------------------------------------- |
+| `children`    | `ReactNode[]` | Yes      | Two children — `[0]` → wide slot, `[1]` → narrow slot |
+| `title`       | `string`      | Yes      | Page title (passed to WideNarrow)                     |
+| `templateCol` | `string`      | No       | Column ratio (default `'1fr 1fr'`)                    |
+| `icon`        | `string`      | No       | Icon name (strips `'pi pi-'` prefix)                  |
 
 ### WideNarrowForm
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode[]` | Yes | Two children rendered in wide/narrow slots |
+| Prop       | Type          | Required | Description                                |
+| ---------- | ------------- | -------- | ------------------------------------------ |
+| `children` | `ReactNode[]` | Yes      | Two children rendered in wide/narrow slots |
 
 ### WideNarrowDetails
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `label` | `string` | No | Section label for FieldGroup |
-| `showLabel` | `boolean` | No | Whether to show the label. Default `true` |
-| `showHighlightedData` | `boolean` | No | Whether to render highlighted data fields. Default `false` |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop                  | Type       | Required | Description                                                |
+| --------------------- | ---------- | -------- | ---------------------------------------------------------- |
+| `label`               | `string`   | No       | Section label for FieldGroup                               |
+| `showLabel`           | `boolean`  | No       | Whether to show the label. Default `true`                  |
+| `showHighlightedData` | `boolean`  | No       | Whether to render highlighted data fields. Default `false` |
+| `getPConnect`         | `function` | Yes      | PConnect getter                                            |
 
 ## Behavioral Contract
 
@@ -98,13 +98,14 @@ Derived from `WideNarrow.css`:
 
 ### Container
 
-| CSS Class | Property | Value |
-|-----------|----------|-------|
-| `.psdk-wide-narrow-column` | Display | two-column row layout |
-| `.psdk-wide-column-column` | Width | ~67% (2 of 3 parts) — LEFT column |
-| `.psdk-narrow-column-column` | Width | ~33% (1 of 3 parts) — RIGHT column |
+| CSS Class                    | Property | Value                              |
+| ---------------------------- | -------- | ---------------------------------- |
+| `.psdk-wide-narrow-column`   | Display  | two-column row layout              |
+| `.psdk-wide-column-column`   | Width    | ~67% (2 of 3 parts) — LEFT column  |
+| `.psdk-narrow-column-column` | Width    | ~33% (1 of 3 parts) — RIGHT column |
 
 **CSS-only implementation notes:**
+
 - `.psdk-wide-narrow-column`: `display: grid; grid-template-columns: 2fr 1fr; gap: 1rem`.
 - Wide column (left): `2fr` — takes the first grid column.
 - Narrow column (right): `1fr` — takes the second grid column.
@@ -112,12 +113,12 @@ Derived from `WideNarrow.css`:
 
 ### Key Difference from NarrowWide
 
-| | NarrowWide | WideNarrow |
-|---|---|---|
-| Left column | Narrow (~33%) | Wide (~67%) |
-| Right column | Wide (~67%) | Narrow (~33%) |
-| CSS container class | `.psdk-narrow-wide-column` | `.psdk-wide-narrow-column` |
-| `COLUMN_WIDTHS` (Details) | `[4, 8]` | `[8, 4]` |
+|                           | NarrowWide                 | WideNarrow                 |
+| ------------------------- | -------------------------- | -------------------------- |
+| Left column               | Narrow (~33%)              | Wide (~67%)                |
+| Right column              | Wide (~67%)                | Narrow (~33%)              |
+| CSS container class       | `.psdk-narrow-wide-column` | `.psdk-wide-narrow-column` |
+| `COLUMN_WIDTHS` (Details) | `[4, 8]`                   | `[8, 4]`                   |
 
 ## Edge Cases & Special Logic
 
@@ -136,15 +137,16 @@ Derived from `WideNarrow.css`:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
-| Default (CSS only) | CSS Grid `grid-template-columns: 2fr 1fr; gap: 1rem` |
-| MUI | `<Grid container><Grid size={{ xs: 12, md: 8 }}><Grid size={{ xs: 12, md: 4 }}>` |
-| Ant Design | `<Row gutter={16}><Col xs={24} md={16}><Col xs={24} md={8}>` |
-| Chakra UI | `<Grid templateColumns={{ base: '1fr', md: '2fr 1fr' }} gap={4}>` |
-| Shadcn/ui | Tailwind `grid grid-cols-1 md:grid-cols-[2fr_1fr] gap-4` |
+| Design System      | Recommended Component                                                            |
+| ------------------ | -------------------------------------------------------------------------------- |
+| Default (CSS only) | CSS Grid `grid-template-columns: 2fr 1fr; gap: 1rem`                             |
+| MUI                | `<Grid container><Grid size={{ xs: 12, md: 8 }}><Grid size={{ xs: 12, md: 4 }}>` |
+| Ant Design         | `<Row gutter={16}><Col xs={24} md={16}><Col xs={24} md={8}>`                     |
+| Chakra UI          | `<Grid templateColumns={{ base: '1fr', md: '2fr 1fr' }} gap={4}>`                |
+| Shadcn/ui          | Tailwind `grid grid-cols-1 md:grid-cols-[2fr_1fr] gap-4`                         |
 
 When implementing in a specific design system:
+
 - Wide column ≈ 67% width (left side)
 - Narrow column ≈ 33% width (right side)
 - `WideNarrowDetails` forces DISPLAY_ONLY + readOnly on all children

package/templates/react-sdk-reference/.github/skills/template-skills/WssNavBar.md

@@ -18,13 +18,13 @@ Provides the top navigation bar for WSS (Web Self-Service) portals. Responsive:
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `links` | `array` | Yes | Array of `{ label, url, id }` navigation link objects |
-| `navDisplayOptions` | `object` | No | `{ alignment: 'left'|'right'|'center', position: 'inline'|'below' }` |
-| `portalLogoUrl` | `string` | No | URL for the portal logo image |
-| `operatorInfo` | `object` | No | `{ displayName: string }` — for avatar initials |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop                | Type       | Required | Description                                           |
+| ------------------- | ---------- | -------- | ----------------------------------------------------- |
+| `links`             | `array`    | Yes      | Array of `{ label, url, id }` navigation link objects |
+| `navDisplayOptions` | `object`   | No       | `{ alignment: 'left'                                  | 'right' | 'center', position: 'inline' | 'below' }` |
+| `portalLogoUrl`     | `string`   | No       | URL for the portal logo image                         |
+| `operatorInfo`      | `object`   | No       | `{ displayName: string }` — for avatar initials       |
+| `getPConnect`       | `function` | Yes      | PConnect getter                                       |
 
 ## Behavioral Contract
 
@@ -38,12 +38,14 @@ Provides the top navigation bar for WSS (Web Self-Service) portals. Responsive:
 ### Navigation Position
 
 From `navDisplayOptions.position`:
+
 - `'inline'` — nav links appear in the same row as the logo.
 - `'below'` — nav links appear in a second row below the logo/title row.
 
 ### Navigation Alignment
 
 From `navDisplayOptions.alignment`:
+
 - `'left'` — links flush left.
 - `'right'` — links pushed to the right (flex with `ml: 'auto'`).
 - `'center'` — links centered.
@@ -87,14 +89,15 @@ From `navDisplayOptions.alignment`:
 
 ## Visual Specifications
 
-| Element | Mobile | Desktop |
-|---------|--------|---------|
-| Logo | Shown | Shown |
+| Element   | Mobile                  | Desktop               |
+| --------- | ----------------------- | --------------------- |
+| Logo      | Shown                   | Shown                 |
 | Nav links | Hidden (hamburger menu) | Shown inline or below |
-| Avatar | Shown | Shown |
-| Hamburger | Shown | Hidden |
+| Avatar    | Shown                   | Shown                 |
+| Hamburger | Shown                   | Hidden                |
 
 **CSS-only implementation notes:**
+
 - App bar: `background: var(--app-primary-color); color: white`.
 - Toolbar: `display: flex; align-items: center; gap: 1rem; padding: 0 1rem`.
 - Hamburger: `display: none`. At mobile breakpoint: `display: flex`.
@@ -121,15 +124,16 @@ From `navDisplayOptions.alignment`:
 
 Listed design systems are examples only.
 
-| Design System | App Bar | Avatar | Mobile Menu |
-|---|---|---|---|
-| Default (CSS only) | `<header>` + CSS | `<div class='avatar'>` | CSS hamburger + dropdown |
-| MUI | `<AppBar>` + `<Toolbar>` | `<Avatar>` | `<Drawer>` or `<Menu>` |
-| Ant Design | `<Layout.Header>` | `<Avatar>` | `<Drawer>` |
-| Chakra UI | `<Box as='header'>` | `<Avatar>` | `<Drawer>` |
-| Shadcn/ui | Custom `<header>` | Custom initials avatar | `<Sheet>` (drawer) |
+| Design System      | App Bar                  | Avatar                 | Mobile Menu              |
+| ------------------ | ------------------------ | ---------------------- | ------------------------ |
+| Default (CSS only) | `<header>` + CSS         | `<div class='avatar'>` | CSS hamburger + dropdown |
+| MUI                | `<AppBar>` + `<Toolbar>` | `<Avatar>`             | `<Drawer>` or `<Menu>`   |
+| Ant Design         | `<Layout.Header>`        | `<Avatar>`             | `<Drawer>`               |
+| Chakra UI          | `<Box as='header'>`      | `<Avatar>`             | `<Drawer>`               |
+| Shadcn/ui          | Custom `<header>`        | Custom initials avatar | `<Sheet>` (drawer)       |
 
 When implementing in a specific design system:
+
 - `logout` from `@pega/auth/lib/sdk-auth-manager` is mandatory — always call the SDK logout, not a custom one
 - Responsive breakpoints for hamburger/nav visibility must be implemented
 - `navDisplayOptions.alignment` and `.position` must be respected

package/templates/react-sdk-reference/.github/skills/widget-components.md

@@ -51,12 +51,14 @@ interface AttachmentProps extends Omit<PConnFieldProps, 'value'> {
 
 ### Data-Fetching Widget
 
-Widgets typically fetch data from Pega data pages on mount:
+Widgets typically fetch data from Pega data pages on mount. This pattern is design-system agnostic. The `// [DS RENDER]` section must be replaced with your design system's presentation primitives (card, list, table, etc.) — see "Design System Adaptation" below.
 
 ```typescript
 import { useState, useEffect } from 'react';
-import { Card, CardHeader, CardContent, List, ListItem } from '@mui/material';
-import type { PConnProps } from '../../../types/PConnProps';
+// Import your design system components here:
+// e.g. import { Card, List } from 'antd';
+// e.g. import { Card, UnorderedList } from '@chakra-ui/react';
+import type { PConnProps } from '@pega/sdk-react';
 
 interface MyWidgetProps extends PConnProps {
   datasource?: any;
@@ -70,8 +72,9 @@ export default function MyWidget(props: MyWidgetProps) {
   const [data, setData] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
 
+  // 1. Fetch data from a Pega data page on mount
+  // This block is always the same regardless of design system
   useEffect(() => {
-    // Fetch data from a Pega data page
     const context = pConn.getContextName();
     PCore.getDataPageUtils()
       .getDataAsync(
@@ -89,23 +92,58 @@ export default function MyWidget(props: MyWidgetProps) {
       .catch(() => setLoading(false));
   }, []);
 
+  // 2. Loading state — replace with your DS loading indicator if available
   if (loading) return <div>Loading...</div>;
 
+  // 3. [DS RENDER] — replace with your design system's card/list/table primitives
+  // See "Design System Adaptation" section below for guidance
   return (
-    <Card>
-      <CardHeader title={headerText} />
-      <CardContent>
-        <List>
+    <YourDesignSystemCard>
+      <YourDesignSystemCardHeader title={headerText} />
+      <YourDesignSystemCardContent>
+        <YourDesignSystemList>
           {data.map((item, i) => (
-            <ListItem key={i}>{item.pyLabel}</ListItem>
+            <YourDesignSystemListItem key={i}>{item.pyLabel}</YourDesignSystemListItem>
           ))}
-        </List>
-      </CardContent>
-    </Card>
+        </YourDesignSystemList>
+      </YourDesignSystemCardContent>
+    </YourDesignSystemCard>
   );
 }
 ```
 
+---
+
+## Design System Adaptation
+
+The PCore data-fetching logic (all `PCore.*` calls) is always identical regardless of design system. Only the `// [DS RENDER]` section changes.
+
+**1. Check the component-specific skill file** — `.github/skills/widget-skills/<ComponentName>.md` contains a **Design System Mapping** table where available. Use it as a starting point.
+
+**2. If the chosen design system is not listed** — use the component purpose description to identify the appropriate DS primitives (card, list, table, button, badge, etc.).
+
+**3. Discover the API from installed packages** — confirm component names and props from `.d.ts` before writing JSX:
+
+```bash
+find node_modules/<ds-package> -name "*.d.ts" | xargs grep -l "Card\|List\|Table" | head -5
+grep -A 30 "interface.*Props" <path-to-file>
+```
+
+**4. Common widget UI primitive mapping:**
+
+| Widget pattern       | Typical DS equivalent                           |
+| -------------------- | ----------------------------------------------- |
+| Container with title | `Card` + header/title prop, or `Panel`, `Box`   |
+| Item list            | `List`, `UnorderedList`, or `Table` rows        |
+| Loading indicator    | `Spinner`, `Skeleton`, `Loading`                |
+| Action button        | `Button` with `onClick`                         |
+| Status badge         | `Badge`, `Tag`, `Chip`                          |
+| Empty state          | DS empty/placeholder component or plain `<div>` |
+
+**5. Icons** — if the DS has a companion icon package, read its exports before using any icon name. Never guess icon names.
+
+---
+
 ### Action Widget (opens assignments/cases)
 
 ```typescript
@@ -130,14 +168,7 @@ function createCase(caseType) {
 
 ```typescript
 // Fetch list data
-PCore.getDataPageUtils().getDataAsync(
-  dataPageName,
-  context,
-  params,
-  paging,
-  query,
-  options,
-);
+PCore.getDataPageUtils().getDataAsync(dataPageName, context, params, paging, query, options);
 
 // Get page data (single record)
 PCore.getDataPageUtils().getPageDataAsync(dataPageName, context, params);
@@ -156,12 +187,7 @@ const caseName = pConn.getCaseInfo().getName();
 
 ```typescript
 PCore.getAttachmentUtils().prepareAttachmentData(value);
-PCore.getAttachmentUtils().uploadAttachment(
-  file,
-  onProgress,
-  errorHandler,
-  context,
-);
+PCore.getAttachmentUtils().uploadAttachment(file, onProgress, errorHandler, context);
 PCore.getAttachmentUtils().downloadAttachment(attachmentID, context);
 ```
 

package/templates/react-sdk-reference/.github/skills/widget-skills/AppAnnouncement.md

@@ -18,13 +18,13 @@ Renders an announcement card with a heading, description text, optional bullet l
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `header` | `string` | No | Announcement card title |
-| `description` | `string` | No | Announcement body text |
-| `datasource` | `object` | No | Data source object — `datasource.source` is an array of item objects |
-| `whatsnewlink` | `string` | No | URL for the "See what's new" button; if absent, button is not rendered |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop           | Type       | Required | Description                                                            |
+| -------------- | ---------- | -------- | ---------------------------------------------------------------------- |
+| `header`       | `string`   | No       | Announcement card title                                                |
+| `description`  | `string`   | No       | Announcement body text                                                 |
+| `datasource`   | `object`   | No       | Data source object — `datasource.source` is an array of item objects   |
+| `whatsnewlink` | `string`   | No       | URL for the "See what's new" button; if absent, button is not rendered |
+| `getPConnect`  | `function` | Yes      | PConnect getter                                                        |
 
 ## Behavioral Contract
 
@@ -37,14 +37,15 @@ Renders an announcement card with a heading, description text, optional bullet l
 
 ### Card Layout
 
-| Element | Position |
-|---------|----------|
-| Left accent border | 6px solid, primary light color |
-| Card header | `header` prop as title |
-| Card content | Description text + optional bullet list |
-| "See what's new" button | Below description / bullet list |
+| Element                 | Position                                |
+| ----------------------- | --------------------------------------- |
+| Left accent border      | 6px solid, primary light color          |
+| Card header             | `header` prop as title                  |
+| Card content            | Description text + optional bullet list |
+| "See what's new" button | Below description / bullet list         |
 
 **CSS-only implementation notes:**
+
 - Card: `border-left: 6px solid var(--app-primary-light-color); border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.12)`.
 - Card header: `padding: 12px 16px; font-weight: 600`.
 - Card content: `padding: 0 16px 16px`.
@@ -68,15 +69,16 @@ Renders an announcement card with a heading, description text, optional bullet l
 
 Listed design systems are examples only.
 
-| Design System | Card | Bullet List | Button |
-|---|---|---|---|
-| Default (CSS only) | `<div>` with left border + box-shadow | `<ul>/<li>` | `<button>` opening new tab |
-| MUI | `<Card>` + `<CardHeader>` + `<CardContent>` | `<List>/<ListItem>` or `<ul>` | `<Button>` |
-| Ant Design | `<Card>` with `title` prop | `<ul>/<li>` | `<Button>` |
-| Chakra UI | `<Card>` + `<CardHeader>` + `<CardBody>` | `<UnorderedList>/<ListItem>` | `<Button>` |
-| Shadcn/ui | `<Card>` + `<CardHeader>` + `<CardContent>` | `<ul>/<li>` | `<Button>` |
+| Design System      | Card                                        | Bullet List                   | Button                     |
+| ------------------ | ------------------------------------------- | ----------------------------- | -------------------------- |
+| Default (CSS only) | `<div>` with left border + box-shadow       | `<ul>/<li>`                   | `<button>` opening new tab |
+| MUI                | `<Card>` + `<CardHeader>` + `<CardContent>` | `<List>/<ListItem>` or `<ul>` | `<Button>`                 |
+| Ant Design         | `<Card>` with `title` prop                  | `<ul>/<li>`                   | `<Button>`                 |
+| Chakra UI          | `<Card>` + `<CardHeader>` + `<CardBody>`    | `<UnorderedList>/<ListItem>`  | `<Button>`                 |
+| Shadcn/ui          | `<Card>` + `<CardHeader>` + `<CardContent>` | `<ul>/<li>`                   | `<Button>`                 |
 
 When implementing in a specific design system:
+
 - Left accent border is a key visual identifier — implement it via CSS or the design system's border utilities
 - "See what's new" must open in a new tab (`target='_blank'` + `rel='noopener noreferrer'`)
 - The widget is entirely prop-driven — no data fetching needed

package/templates/react-sdk-reference/.github/skills/widget-skills/Attachment.md

@@ -18,20 +18,20 @@ Renders a file attachment control within a Pega form. Users can upload one or mu
 
 ## Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `value` | `any` | Yes | Attachment list or single attachment object (from Pega property) |
-| `allowMultiple` | `boolean \| string` | No | Whether multiple files can be attached. Default `false` |
-| `extensions` | `string` | No | Comma-separated list of allowed file extensions (e.g., `".pdf,.doc,.jpg"`) |
-| `editMode` | `string` | No | `"tableRows"` for inline table edit mode (special multi-attachment handling) |
-| `isTableFormatter` | `boolean` | No | Whether this widget is used inside a table formatter |
-| `label` | `string` | Yes (from PConnFieldProps) | Field label |
-| `required` | `boolean` | No | Whether a file is required |
-| `disabled` | `boolean` | No | Whether the control is disabled |
-| `displayMode` | `string` | No | `"DISPLAY_ONLY"` for read-only rendering |
-| `validatemessage` | `string` | No | Validation error message to display |
-| `helperText` | `string` | No | Helper text shown below the control |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop               | Type                | Required                   | Description                                                                  |
+| ------------------ | ------------------- | -------------------------- | ---------------------------------------------------------------------------- |
+| `value`            | `any`               | Yes                        | Attachment list or single attachment object (from Pega property)             |
+| `allowMultiple`    | `boolean \| string` | No                         | Whether multiple files can be attached. Default `false`                      |
+| `extensions`       | `string`            | No                         | Comma-separated list of allowed file extensions (e.g., `".pdf,.doc,.jpg"`)   |
+| `editMode`         | `string`            | No                         | `"tableRows"` for inline table edit mode (special multi-attachment handling) |
+| `isTableFormatter` | `boolean`           | No                         | Whether this widget is used inside a table formatter                         |
+| `label`            | `string`            | Yes (from PConnFieldProps) | Field label                                                                  |
+| `required`         | `boolean`           | No                         | Whether a file is required                                                   |
+| `disabled`         | `boolean`           | No                         | Whether the control is disabled                                              |
+| `displayMode`      | `string`            | No                         | `"DISPLAY_ONLY"` for read-only rendering                                     |
+| `validatemessage`  | `string`            | No                         | Validation error message to display                                          |
+| `helperText`       | `string`            | No                         | Helper text shown below the control                                          |
+| `getPConnect`      | `function`          | Yes                        | PConnect getter                                                              |
 
 ## Behavioral Contract
 
@@ -40,11 +40,13 @@ Renders a file attachment control within a Pega form. Users can upload one or mu
 Pega has two attachment data formats — detect which one is in use:
 
 **Old format (annotation-based):**
+
 ```typescript
 value = { pxResults: [...], pyAttachCount: N }
 ```
 
 **New standard format:**
+
 ```typescript
 value = [{ ID, name, mimeType, category, ... }]  // array
 ```
@@ -54,6 +56,7 @@ Call `PCore.getAttachmentUtils().prepareAttachmentData(value)` to normalize both
 ### File Validation
 
 On file selection (via `<input type='file'>`):
+
 1. **Extension check:** Compare selected file's extension against `extensions` prop (split by comma). If not allowed, add an error to the file and do not upload.
 2. **Size check:** Compare file size against `PCore.getEnvironmentInfo().getMaxAttachmentSize()` (in bytes). If too large, add a size error.
 3. Valid files proceed to upload.
@@ -89,15 +92,16 @@ Compressed display for use inside a table cell. Show attachment count and a smal
 
 ## Visual Specifications
 
-| Element | Description |
-|---------|-------------|
-| Label | Standard field label above the control |
-| Drop zone / Upload button | Clickable area to select files; optionally supports drag-and-drop |
-| File list | Each uploaded file: icon + name + size + progress bar (during upload) + delete button |
-| Error state | Red error text below the control for invalid files or upload failures |
-| Helper text | Secondary text below the control |
+| Element                   | Description                                                                           |
+| ------------------------- | ------------------------------------------------------------------------------------- |
+| Label                     | Standard field label above the control                                                |
+| Drop zone / Upload button | Clickable area to select files; optionally supports drag-and-drop                     |
+| File list                 | Each uploaded file: icon + name + size + progress bar (during upload) + delete button |
+| Error state               | Red error text below the control for invalid files or upload failures                 |
+| Helper text               | Secondary text below the control                                                      |
 
 **CSS-only implementation notes:**
+
 - Drop zone: `border: 2px dashed var(--border-color); border-radius: 4px; padding: 1rem; text-align: center; cursor: pointer`.
 - Drop zone hover: `border-color: var(--app-primary-color); background: var(--hover-bg)`.
 - File row: `display: flex; align-items: center; gap: 0.5rem; padding: 4px 0`.
@@ -131,15 +135,16 @@ Compressed display for use inside a table cell. Show attachment count and a smal
 
 Listed design systems are examples only.
 
-| Design System | File Input | Progress | File List |
-|---|---|---|---|
-| Default (CSS only) | `<input type='file'>` + custom styled drop zone | `<progress>` element or CSS bar | `<ul>/<li>` rows |
-| MUI | Custom styled `<Box>` drop zone + hidden `<input>` | `<LinearProgress>` | `<List>/<ListItem>` |
-| Ant Design | `<Upload dragger>` | `<Progress>` | Built-in upload file list |
-| Chakra UI | Custom `<Box>` with `useDropzone` | `<Progress>` | `<VStack>` rows |
-| Shadcn/ui | Custom drop zone | Custom CSS progress bar | `<ul>/<li>` rows |
+| Design System      | File Input                                         | Progress                        | File List                 |
+| ------------------ | -------------------------------------------------- | ------------------------------- | ------------------------- |
+| Default (CSS only) | `<input type='file'>` + custom styled drop zone    | `<progress>` element or CSS bar | `<ul>/<li>` rows          |
+| MUI                | Custom styled `<Box>` drop zone + hidden `<input>` | `<LinearProgress>`              | `<List>/<ListItem>`       |
+| Ant Design         | `<Upload dragger>`                                 | `<Progress>`                    | Built-in upload file list |
+| Chakra UI          | Custom `<Box>` with `useDropzone`                  | `<Progress>`                    | `<VStack>` rows           |
+| Shadcn/ui          | Custom drop zone                                   | Custom CSS progress bar         | `<ul>/<li>` rows          |
 
 When implementing in a specific design system:
+
 - Action sequencer blocking (`addAction`/`removeAction`) is mandatory — do not skip it; form submission must be blocked during uploads
 - Detect and normalize both old and new attachment formats via `prepareAttachmentData`
 - `allowMultiple` coercion (string vs boolean) is required