@pega/sdk 0.0.4 → 0.0.5

package/templates/react-sdk-reference/.github/skills/field-skills/Location.md

@@ -1,145 +0,0 @@
-# Skill: Location
-
-Location input with Google Maps Places autocomplete, interactive map display, and optional geolocation (current location).
-
-> **Prerequisite skill:** [`field-components.md`](../field-components.md) — covers architecture, props interface, display modes, event handling, and registration patterns common to ALL field components.
-
----
-
-## Component Purpose
-
-Renders a text input that integrates with Google Maps Places API for address/location autocomplete. Optionally shows an interactive map with a marker. Supports an `onlyCoordinates` mode that stores `"lat, lng"` instead of address text. Includes a "get current location" button using the browser geolocation API.
-
-## Pega Metadata
-
-- **Pega Name:** `Location`
-- **Type / Subtype:** `Field` / `Text-Location`
-- **Registration key:** `Location` (in `component-map.ts`)
-
-## Props (component-specific)
-
-| Prop              | Type                 | Default | Description                                                              |
-| ----------------- | -------------------- | ------- | ------------------------------------------------------------------------ |
-| `coordinates`     | `string` (optional)  | `''`    | Comma-separated lat/lng string (e.g., `'18.5204, 73.8567'`)              |
-| `onlyCoordinates` | `boolean` (optional) | `false` | If `true`, store and display lat/lng coordinates instead of address text |
-| `showMap`         | `boolean` (optional) | —       | Show the interactive map in editable mode                                |
-| `showMapReadOnly` | `boolean` (optional) | —       | Show the map in read-only mode                                           |
-
-## Behavioral Contract
-
-1. **APIs required:**
-   - Google Maps JavaScript API with `places` and `geocoding` libraries
-   - API key obtained from `pConn.getGoogleMapsAPIKey?.() || ''`
-2. **Local state:**
-   - `inputValue` (string): shown in the text input
-   - `mapCenter` (`{lat, lng}`): default `{ lat: 18.5204, lng: 73.8567 }` (Pune, India)
-   - `markerPosition` (`{lat, lng} | null`)
-3. **Value sync:** `useEffect` watching `value`, `coordinates`, `onlyCoordinates`:
-   - If `onlyCoordinates && coordinates`: `setInputValue(coordinates)`
-   - Else: `setInputValue(value ?? '')`
-   - If `coordinates` exists: parse `lat, lng`, update `mapCenter` and `markerPosition`
-4. **Places Autocomplete (init):** `useEffect` watching `isLoaded` — once Maps API loads and `inputRef.current` is set, attach `new google.maps.places.Autocomplete(inputRef.current)` and add `place_changed` listener.
-5. **On place changed:**
-   - Get `place.geometry.location` → extract `lat`, `lng`
-   - If `onlyCoordinates`: `inputValue = "${lat}, ${lng}"`, commit this as the value AND update `coordinates` property
-   - Else: `inputValue = place.formatted_address`, commit address as value, update `coordinates` property separately: `actions.updateFieldValue(coordPropName, coordinateString)`
-   - Update `mapCenter` and `markerPosition`
-6. **On text change (manual):**
-   - Update `inputValue` and commit immediately via `handleEvent(actions, 'changeNblur', propName, newValue)`
-   - If input cleared and `coordPropName` exists: `actions.updateFieldValue(coordPropName, '')`; `setMarkerPosition(null)`
-7. **Get current location button:**
-   - Use `navigator.geolocation.getCurrentPosition()`
-   - If `onlyCoordinates`: store `"lat, lng"` as value and coordinates
-   - Else: reverse-geocode using `google.maps.Geocoder`, store address as value, `"lat, lng"` as coordinates
-8. **Coordinate property name:** `coordPropName = (pConn.getStateProps() as any).coordinates` — separate from the main `propName`
-9. **Error display:** If `status === 'error' && !!validatemessage && !disabled`, show an error alert ABOVE the input.
-10. **Read-only:** Delegate text to `TextInput`, optionally show map if `showMapReadOnly`.
-
-### Map configuration (disabled state)
-
-When `disabled`, map options disable all interactions:
-
-- `gestureHandling: 'none'`, `keyboardShortcuts: false`, `disableDefaultUI: true`, `clickableIcons: false`
-- Map opacity: `0.7` when disabled
-
-### CSS for Google Maps autocomplete dropdown z-index:
-
-```css
-/* Location.css */
-.pac-container {
-  z-index: 2147483647;
-}
-```
-
-## Display Mode Rendering
-
-- **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={value} />` — raw address/coordinates string.
-- **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />`.
-
-## Read-Only Rendering
-
-```
-<div>
-  <TextInput {...props} />
-  {isLoaded && showMapReadOnly && <GoogleMap ... />}
-</div>
-```
-
-## Visual Specifications
-
-| Property             | Value                                              |
-| -------------------- | -------------------------------------------------- |
-| Width                | 100%                                               |
-| Input variant        | Default (outlined, from `TextField`)               |
-| Trailing icon        | Location pin icon button (for current location)    |
-| Error alert          | Alert banner ABOVE the input field when `hasError` |
-| Map container        | `width: 100%`, `height: 300px`, `marginTop: 0px`   |
-| Map render           | Only shown when `isLoaded && (showMap              |     | showMapReadOnly)` |
-| Disabled map opacity | `0.7`                                              |
-
-**CSS companion file required:** `Location.css` with:
-
-```css
-.pac-container {
-  z-index: 2147483647;
-}
-```
-
-This ensures the Google Maps autocomplete dropdown appears above modal/dialog overlays.
-
-**CSS-only implementation notes:**
-
-- Location pin button: `<button>` with `position: absolute; right: 8px; top: 50%; transform: translateY(-50%);`
-
-## Edge Cases & Special Logic
-
-- **`isLoaded` guard:** Only render the `TextField` and map after Google Maps API is fully loaded.
-- **`onlyCoordinates` mode:** The stored `value` is `"lat, lng"` format; coordinates and address are the same.
-- **Dual property:** The component writes to TWO properties — `propName` (address or coordinates) and `coordPropName` (coordinates). `coordPropName` may be undefined if the Pega config doesn't include a coordinates property.
-- **Autocomplete ref lifecycle:** `autocompleteRef` is only initialized once (when `!autocompleteRef.current`). The `handlePlaceChanged` callback must be stable (`useCallback` with deps).
-- **Map default center:** Pune, India — `{ lat: 18.5204, lng: 73.8567 }`.
-- Google Maps Geocoder is only called in non-`onlyCoordinates` geolocation mode for reverse geocoding.
-
-## Dependencies
-
-- Google Maps JavaScript API (loaded dynamically via `@react-google-maps/api` or equivalent loader).
-- `@react-google-maps/api` — `GoogleMap`, `Marker`, `useLoadScript`.
-- `handleEvent` from `../../helpers/event-utils`.
-- `getComponentFromRegistry('TextInput')` for read-only.
-- `getComponentFromRegistry('FieldValueList')` for display modes.
-- A location pin icon.
-
-**CSS companion:** `Location.css` — must be imported to fix autocomplete z-index.
-
-## Design System Mapping
-
-**UI control type:** Text input with location autocomplete dropdown + optional map.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                                   |
-| ------------------ | ----------------------------------------------------------------------- |
-| Default (CSS only) | `<input type="text">` + Google Maps Autocomplete API + Google Map embed |
-| MUI                | `<TextField>` + `InputAdornment` for icon + `@react-google-maps/api`    |
-| Ant Design         | `<Input suffix={<LocationIcon />}>` + Google Maps                       |
-| Chakra UI          | `<InputGroup>` + `<InputRightElement>` + Google Maps                    |

package/templates/react-sdk-reference/.github/skills/field-skills/TextArea.md

@@ -1,98 +0,0 @@
-# Skill: TextArea
-
-Multi-line text input field that binds to a Pega case property.
-
-> **Prerequisite skill:** [`field-components.md`](../field-components.md) — covers architecture, props interface, display modes, event handling, and registration patterns common to ALL field components.
-
----
-
-## Component Purpose
-
-Renders an editable multi-line text area. Used for long-form text input such as descriptions, notes, or comments. Similar to `TextInput` but allows multiple lines with configurable min/max rows.
-
-## Pega Metadata
-
-- **Pega Name:** `TextArea`
-- **Type / Subtype:** `Field` / `Text` (multi-line)
-- **Registration key:** `TextArea` (in `component-map.ts`)
-
-## Props (component-specific)
-
-| Prop            | Type             | Description                                                |
-| --------------- | ---------------- | ---------------------------------------------------------- |
-| `fieldMetadata` | `any` (optional) | Metadata object; used to read `maxLength` for the textarea |
-
-All other props come from `PConnFieldProps`. Import type as:
-
-```typescript
-import type { PConnFieldProps } from '@pega/sdk-react';
-```
-
-## Behavioral Contract
-
-1. **Local state:** Maintain `inputValue` in local state (string). Initialize to `''`.
-2. **Sync from store:** `useEffect` watching `value` prop — call `setInputValue(value)` whenever `value` changes.
-3. **On change:** Update local `inputValue` state only (do NOT commit to store on every keystroke).
-4. **On blur:** Commit to store by calling `handleEvent(actions, 'changeNblur', propName, inputValue)`.
-5. **Read-only:** Set `readOnly` attribute on the textarea; use visually borderless ("standard") variant. Omit `onBlur` handler: `onBlur={!readOnly ? handleBlur : undefined}`.
-6. **maxLength:** Read from `fieldMetadata?.maxLength`; pass to the textarea's `maxLength` attribute.
-7. **Row sizing:** Fixed at `minRows={5}` and `maxRows={5}` — the textarea does not auto-expand; it shows a scrollbar if content exceeds 5 rows.
-
-## Display Mode Rendering
-
-- **`DISPLAY_ONLY`:** Render `<FieldValueList name={hideLabel ? '' : label} value={value} />`.
-- **`STACKED_LARGE_VAL`:** Render `<FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />`.
-- Both modes short-circuit before interactive rendering.
-
-## Read-Only Rendering
-
-Set `readOnly` on the textarea element (NOT a read-only version via `TextInput` — preserves the multiline appearance). Switch to a flat/borderless visual style. The `minRows`/`maxRows` constraint is still applied in read-only.
-
-## Visual Specifications
-
-Derived from the reference component's MUI props:
-
-| Property      | Standard (editable)                      | Read-only            |
-| ------------- | ---------------------------------------- | -------------------- |
-| Width         | 100%                                     | 100%                 |
-| Min rows      | 5                                        | 5                    |
-| Max rows      | 5 (scrollable beyond)                    | 5                    |
-| Border        | 1px solid (outlined)                     | None (standard/flat) |
-| Border radius | 4px                                      | —                    |
-| Label         | Floating label                           | Floating label       |
-| Helper text   | Below textarea                           | Below textarea       |
-| Error state   | Red border + red helper text             | —                    |
-| Resize        | Vertical resize handle (browser default) | Same                 |
-| Font size     | 0.875rem                                 | 0.875rem             |
-| Padding       | 8px 14px                                 | —                    |
-
-**CSS-only implementation notes:**
-
-- `textarea { min-height: calc(5 * 1.4375em + 16px); max-height: calc(5 * 1.4375em + 16px); overflow-y: auto; resize: vertical; }`
-- Error: `border-color: #d32f2f`
-- Read-only: `border: none; background: transparent;`
-
-## Edge Cases & Special Logic
-
-- Unlike `TextInput`, do NOT delegate to `TextInput` in read-only mode — render the textarea directly with `readOnly` set, so the multi-line appearance is preserved.
-- `maxLength` is optional; only apply the attribute if `fieldMetadata?.maxLength` is defined.
-
-## Dependencies
-
-- `handleEvent` from `../../helpers/event-utils`
-- `getComponentFromRegistry('FieldValueList')` for display modes
-- No third-party UI libraries required
-
-## Design System Mapping
-
-**UI control type:** Multi-line text input (`<textarea>`).
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                             |
-| ------------------ | ------------------------------------------------- |
-| Default (CSS only) | `<textarea rows="5">` with floating label         |
-| MUI                | `<TextField multiline minRows={5} maxRows={5} />` |
-| Ant Design         | `<Input.TextArea rows={5} />`                     |
-| Chakra UI          | `<Textarea />`                                    |
-| Shadcn/ui          | `<Textarea />`                                    |

package/templates/react-sdk-reference/.github/skills/field-skills/TextContent.md

@@ -1,117 +0,0 @@
-# Skill: TextContent
-
-Static text display component that renders formatted text content (paragraph or heading). Non-interactive — no form binding.
-
-> **Prerequisite skill:** [`field-components.md`](../field-components.md) — covers architecture, props interface, display modes, event handling, and registration patterns common to ALL field components.
-
----
-
-## Component Purpose
-
-Displays static, read-only text content. Used to embed headings or descriptive paragraph text within forms or views. Not an input field — does NOT bind to a case property value and does NOT use `PConnFieldProps`. It renders purely based on static configuration props.
-
-## Pega Metadata
-
-- **Pega Name:** `TextContent`
-- **Type / Subtype:** `Field` / `Text`
-- **Registration key:** `TextContent` (in `component-map.ts`)
-
-## Props (component-specific)
-
-Extends `PConnProps` (NOT `PConnFieldProps` — there is no form value binding):
-
-```typescript
-import type { PConnProps } from '@pega/sdk-react';
-
-interface TextContentProps extends PConnProps {
-  content: string;
-  displayAs: 'Paragraph' | 'Heading 1' | 'Heading 2' | 'Heading 3' | 'Heading 4';
-}
-```
-
-| Prop        | Type                                                                      | Description                                       |
-| ----------- | ------------------------------------------------------------------------- | ------------------------------------------------- |
-| `content`   | `string`                                                                  | The text string to render                         |
-| `displayAs` | `'Paragraph' \| 'Heading 1' \| 'Heading 2' \| 'Heading 3' \| 'Heading 4'` | How to render the text — maps to typography level |
-
-## Behavioral Contract
-
-1. **No state, no effects** — purely presentational. Render `content` using the appropriate typography element for `displayAs`.
-2. **Mapping:**
-   - `'Paragraph'` → `<p>` / body text
-   - `'Heading 1'` → `<h1>`
-   - `'Heading 2'` → `<h2>`
-   - `'Heading 3'` → `<h3>`
-   - `'Heading 4'` → `<h4>`
-3. **Fallthrough:** Log an error for unrecognized `displayAs` values and render nothing (or a default fallback).
-
-## Display Mode Rendering
-
-Not applicable — this component is display-only by nature. It does not accept a `displayMode` prop.
-
-## Read-Only Rendering
-
-Always read-only — there is no editable state.
-
-## Visual Specifications
-
-Derived from standard HTML typography:
-
-| `displayAs` | Element         | Font size   | Font weight |
-| ----------- | --------------- | ----------- | ----------- |
-| `Paragraph` | `<p>` / `body1` | 1rem (16px) | 400         |
-| `Heading 1` | `<h1>`          | 2.5rem      | 300         |
-| `Heading 2` | `<h2>`          | 2rem        | 300         |
-| `Heading 3` | `<h3>`          | 1.75rem     | 400         |
-| `Heading 4` | `<h4>`          | 1.5rem      | 400         |
-
-Color inherits from the surrounding text color. No padding, margin, border, or background beyond what the browser/design-system applies to the heading element.
-
-**CSS-only implementation notes:**
-
-```css
-.text-content-h1 {
-  font-size: 2.5rem;
-  font-weight: 300;
-}
-.text-content-h2 {
-  font-size: 2rem;
-  font-weight: 300;
-}
-.text-content-h3 {
-  font-size: 1.75rem;
-  font-weight: 400;
-}
-.text-content-h4 {
-  font-size: 1.5rem;
-  font-weight: 400;
-}
-.text-content-body {
-  font-size: 1rem;
-  font-weight: 400;
-}
-```
-
-## Edge Cases & Special Logic
-
-- Unrecognized `displayAs` values should trigger a `console.error` and fall back to body text.
-- No `handleEvent`, no store interaction, no `useEffect`.
-
-## Dependencies
-
-- No event utilities needed
-- No `FieldValueList` needed
-- Only a typography rendering element
-
-## Design System Mapping
-
-**UI control type:** Static typography / text block.
-
-Listed design systems are examples only.
-
-| Design System      | Recommended Component                                          |
-| ------------------ | -------------------------------------------------------------- |
-| Default (CSS only) | Native `<h1>`–`<h4>` or `<p>`                                  |
-| MUI                | `<Typography variant='h1' \| 'h2' \| 'h3' \| 'h4' \| 'body1'>` |
-| Ant Design         | `<Typography.Title level={1-4}>` or `<Typography.Text>`        |
-| Chakra UI          | `<Heading as='h1'-'h4'>` or `<Text>`                           |

package/templates/react-sdk-reference/.github/skills/field-skills/UserReference.md

@@ -1,203 +0,0 @@
-# Skill: UserReference
-
-User picker field that renders as either a search box (AutoComplete) or a dropdown, populated from the Pega operators data page.
-
-> **Prerequisite skill:** [`field-components.md`](../field-components.md) — covers architecture, props interface, display modes, event handling, and registration patterns common to ALL field components.
-
----
-
-## Component Purpose
-
-Renders a user selection field. Can display as a typeahead search box or a dropdown list of Pega users. Resolves user IDs to display names for read-only and display modes. Optimized with shallow comparison to avoid unnecessary re-renders.
-
-## Pega Metadata
-
-- **Pega Name:** `UserReference`
-- **Type / Subtype:** `Field` / `Text-UserReference`
-- **Registration key:** `UserReference` (in `component-map.ts`)
-
-## Props (component-specific)
-
-> Extends `PConnProps` (NOT `PConnFieldProps` — field-specific props are defined manually):
-
-```typescript
-import type { PConnProps } from '@pega/sdk-react';
-```
-
-| Prop                  | Type                 | Default    | Description                                                      |
-| --------------------- | -------------------- | ---------- | ---------------------------------------------------------------- |
-| `displayAs`           | `string` (optional)  | `''`       | `'Drop-down list'` or `'Search box'` — determines the input type |
-| `displayMode`         | `string` (optional)  | `''`       | `'DISPLAY_ONLY'` or `'STACKED_LARGE_VAL'`                        |
-| `label`               | `string` (optional)  | `''`       | Field label                                                      |
-| `value`               | `any` (optional)     | `''`       | Raw value from Pega store (may be a user object or string ID)    |
-| `testId`              | `string` (optional)  | `''`       | Test identifier                                                  |
-| `placeholder`         | `string` (optional)  | `''`       | Placeholder text                                                 |
-| `helperText`          | `string` (optional)  | `''`       | Helper text                                                      |
-| `disabled`            | `boolean` (optional) | `false`    |                                                                  |
-| `readOnly`            | `boolean` (optional) | `false`    |                                                                  |
-| `required`            | `boolean` (optional) | `false`    |                                                                  |
-| `validatemessage`     | `string` (optional)  | `''`       | Validation error message                                         |
-| `showAsFormattedText` | `boolean` (optional) | `false`    | When `true` in read-only mode, show formatted user name text     |
-| `additionalProps`     | `object` (optional)  | `{}`       | Extra props forwarded to the child component                     |
-| `hideLabel`           | `boolean` (optional) | `false`    |                                                                  |
-| `variant`             | `string` (optional)  | `'inline'` | Layout variant                                                   |
-| `onChange`            | `any` (optional)     | —          | Change handler (passed through to child)                         |
-
-## Behavioral Contract
-
-### User ID extraction
-
-`getUserId(value)` — utility that extracts the user identifier from the value (which may be a plain string or a user object with an ID property).
-
-### State
-
-- `dropDownDataSource` (array): populated when `displayAs === 'Drop-down list'`
-- `userName` (string): resolved display name for formatted text mode
-
-### Mount effect: `useEffect([displayAs, readOnly, showAsFormattedText, value])`
-
-**Case 1: `userId && readOnly && showAsFormattedText`**
-
-- If `isUserNameAvailable(value)`: `setUserName(value.userName)` — username already in value object
-- Else: call `PCore.getUserApi().getOperatorDetails(userId)` and extract `pyUserName` from response
-
-**Case 2: `displayAs === 'Drop-down list'`**
-
-- Call `PCore.getRestClient().invokeRestApi('getListData', { queryPayload: { dataViewName: OPERATORS_DP } })`
-- Map results to `{key: pyUserIdentifier, value: pyUserName}` array
-- `setDropDownDataSource(mapped)`
-
-`OPERATORS_DP = PCore.getEnvironmentInfo().getDefaultOperatorDP()` — the default operators data page name.
-
-### Rendering decision tree
-
-```
-if displayMode === 'DISPLAY_ONLY' → FieldValueList(userName || '')
-if displayMode === 'STACKED_LARGE_VAL' → FieldValueList(userName || '', variant='stacked')
-if readOnly && showAsFormattedText && userId → formatted text label+body
-else if displayAs === 'Search box' → AutoComplete component
-else if displayAs === 'Drop-down list' → Dropdown component
-```
-
-### Subsection: Search box mode (`displayAs === 'Search box'`)
-
-Render `AutoComplete` with hardcoded columns for operator search:
-
-```typescript
-columns = [
-  { value: 'pyUserName', display: 'true', useForSearch: true, primary: 'true' },
-  {
-    value: 'pyUserIdentifier',
-    setProperty: 'Associated property',
-    key: 'true',
-    display: 'true',
-    secondary: 'true',
-    useForSearch: 'true',
-  },
-];
-```
-
-Props: `datasource={OPERATORS_DP}`, `listType='datapage'`, `value={userId}`, plus label/placeholder/readOnly/disabled/required/helperText/validatemessage/hideLabel/onChange/additionalProps/testId.
-
-### Subsection: Dropdown mode (`displayAs === 'Drop-down list'`)
-
-Render `Dropdown` with:
-
-- `datasource={dropDownDataSource}` (fetched user list)
-- `listType='associated'`
-- `value={userId}`
-- Plus same field props as above
-
-### Subsection: Formatted text read-only (`readOnly && showAsFormattedText && userId`)
-
-Render a label + name display:
-
-```html
-<div>
-  <caption-text>{label}</caption-text>
-  <body-text>{userName}</body-text>
-</div>
-```
-
-### Re-render optimization
-
-Export with `memo` using custom comparison `comparisonFn`:
-
-```typescript
-const comparisonFn = (prevProps, nextProps) =>
-  getUserId(prevProps.value) === getUserId(nextProps.value) &&
-  prevProps.validatemessage === nextProps.validatemessage &&
-  prevProps.required === nextProps.required &&
-  prevProps.disabled === nextProps.disabled &&
-  prevProps.readOnly === nextProps.readOnly;
-```
-
-`export default memo(UserReference, comparisonFn)`
-
-## Display Mode Rendering
-
-Uses resolved `userName` (not raw `value`):
-
-- **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={userName || ''} />`
-- **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={userName || ''} variant='stacked' />`
-
-`userName` may still be empty string while the async `getOperatorDetails` call resolves — this is expected.
-
-## Visual Specifications
-
-The visual appearance is determined by the child component rendered:
-
-- **Search box**: Same as `AutoComplete` — combobox input with outlined border, floating label
-- **Dropdown**: Same as `Dropdown` — select field with outlined border, floating label
-- **Formatted text read-only**:
-
-| Property | Value                                                     |
-| -------- | --------------------------------------------------------- |
-| Label    | Caption-size text (small, secondary color) above the name |
-| Name     | Body text (normal size)                                   |
-| Spacing  | Standard form field spacing                               |
-
-**CSS-only for formatted text:**
-
-```css
-.user-reference-label {
-  font-size: 0.75rem;
-  color: rgba(0, 0, 0, 0.6);
-  margin-bottom: 4px;
-}
-.user-reference-name {
-  font-size: 1rem;
-}
-```
-
-## Edge Cases & Special Logic
-
-- **`getUserId`**: handles both plain string values and object values with an ID property.
-- **`isUserNameAvailable`**: checks whether the value object already contains a `userName` property (avoiding unnecessary API call).
-- **Async name resolution**: when `userName` is not available in the value object, a REST call is made. The component renders empty initially and updates when the call completes.
-- **Drop-down source**: Users are fetched via REST API (`getListData`), not via a data page config — this is different from `AutoComplete`/`Dropdown` field patterns.
-- **`onChange` prop** is passed through to the child component unchanged — it's the platform-wired handler.
-
-## Dependencies
-
-- `memo` from React.
-- `getUserId`, `isUserNameAvailable` from `./UserReferenceUtils` (local utility).
-- `getComponentFromRegistry('AutoComplete')` — for search box mode.
-- `getComponentFromRegistry('Dropdown')` — for dropdown mode.
-- `getComponentFromRegistry('FieldValueList')` — for display modes.
-- `PCore.getUserApi().getOperatorDetails()` — for async user name resolution.
-- `PCore.getRestClient().invokeRestApi('getListData', ...)` — for dropdown data source.
-- `PCore.getEnvironmentInfo().getDefaultOperatorDP()` — for operators data page name.
-
-## Design System Mapping
-
-**UI control type:** User picker — delegates to AutoComplete or Dropdown for the actual input.
-
-Listed design systems are examples only.
-
-| Mode                     | Underlying control                |
-| ------------------------ | --------------------------------- |
-| Search box               | AutoComplete (combobox/typeahead) |
-| Drop-down list           | Dropdown (select)                 |
-| Formatted text read-only | Label + text display              |
-| Display mode             | FieldValueList                    |

package/templates/react-sdk-reference/.github/skills/run-and-verify.md

@@ -1,70 +0,0 @@
-# Skill: Run and Verify
-
-Build the application, run the dev server, and verify changes work correctly.
-
----
-
-## Build Verification
-
-### If inside the pega-sdk monorepo:
-
-```bash
-# Full build (all packages + samples)
-cd /path/to/pega-sdk
-npm run build
-
-# Force rebuild sdk-react (if you modified it)
-npx nx run sdk-react:build --skip-nx-cache
-```
-
-### If standalone repo:
-
-```bash
-npm run build
-```
-
-### What to check:
-
-- Zero TypeScript errors
-- Zero build warnings related to missing imports
-- Output bundle is generated
-
----
-
-## Dev Server
-
-```bash
-npm run dev
-# Opens on http://localhost:3500
-```
-
-### What to verify:
-
-1. App loads without console errors
-2. "Create Case" button appears after auth
-3. Clicking "Create Case" renders the form
-4. Field inputs accept keyboard input
-5. Tabbing between fields triggers blur (values persist)
-6. Validation errors appear when required fields are empty
-7. Form submission works (assignment completes)
-
----
-
-## Common Issues
-
-| Symptom                                      | Cause                                     | Fix                                                                                 |
-| -------------------------------------------- | ----------------------------------------- | ----------------------------------------------------------------------------------- |
-| "X is not registered" console error          | Component missing from `component-map.ts` | Add the import + map entry                                                          |
-| Field value doesn't persist after blur       | `handleEvent` not called on blur          | Add `onBlur` handler calling `handleEvent(actions, 'changeNblur', propName, value)` |
-| Read-only view shows nothing                 | Missing `displayMode` handling            | Add the `DISPLAY_ONLY` / `STACKED_LARGE_VAL` checks                                 |
-| TypeScript error on `getPConnect`            | Wrong props interface                     | Extend `PConnFieldProps` or `PConnProps` from `@pega/sdk-react`                     |
-| Build fails on CSS import                    | Missing CSS loader config                 | Ensure Vite config handles `.css` imports                                           |
-| "Cannot read property of undefined" on theme | Design system provider missing            | Wrap app in the design system's ThemeProvider/Provider                              |
-
----
-
-## Quick Lint Check
-
-```bash
-npx tsc --noEmit   # TypeScript only, no output
-```