@pega/sdk 0.0.4 → 0.0.5

package/templates/react-sdk-reference/{.github → .ai-common}/skills/widget-skills/FileUtility.md

@@ -23,19 +23,79 @@ The primary attachments management panel in the case utilities column. Shows up
 | `caseId`      | `string`   | No       | Optional case ID override. If absent, resolved from `pConn.getCaseInfo().getID()` |
 | `getPConnect` | `function` | Yes      | PConnect getter                                                                   |
 
+## Component Skeleton
+
+This is the largest widget (~500 lines). Key structural outline:
+
+```typescript
+import { useEffect, useState } from 'react';
+import { debounce } from '@mui/material';
+import download from 'downloadjs';
+import { Utils } from '../../../helpers/utils';
+import { validateMaxSize } from '../../../helpers/attachmentShared';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+import './FileUtility.css';
+
+export default function FileUtility(props: FileUtilityProps) {
+  const SummaryList = getComponentFromRegistry('SummaryList');
+  const ActionButtonsForFileUtil = getComponentFromRegistry('ActionButtonsForFileUtil');
+  const { getPConnect, caseId } = props;
+  const thePConn = getPConnect();
+  const caseID = caseId ?? thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, '');
+
+  // 1. State: list (top 3), fileData (add-file modal), linkData (add-link modal), link fields
+  const [list, setList] = useState({ data: [], count: 0 });
+  const [fileData, setFileData] = useState({ showfileModal: false, fileList: [], attachedFiles: [], ... });
+  const [linkData, setLinkData] = useState({ showLinkModal: false, linksList: [], attachedLinks: [], ... });
+  const [link, setLink] = useState({ title: '', url: '', disable: true });
+
+  // 2. getAttachments — fetches case attachments, builds SummaryItem-compatible objects
+  // 3. debouncedGetAttachments — debounce(getAttachments, 1000)
+  // 4. useEffect: subscribe to messaging service for ATTACHMENTS changes
+  // 5. downloadAttachedFile / deleteAttachedFile handlers
+  // 6. onAttachFiles — upload + linkAttachmentsToCase
+  // 7. onAttachLinks — linkAttachmentsToCase with URL category
+
+  // 8. Render: Card with header + SummaryList(top 3) + View All button
+  //    + Add File modal (input + SummaryList + ActionButtons)
+  //    + Add Link modal (title + url fields + ActionButtons)
+  //    + View All modal (full SummaryList)
+  return <Card>...</Card>;
+}
+```
+
+> **Key patterns:** Debounced refresh (1000ms) on messaging subscription, `linkAttachmentsToCase` after upload, `ActionButtonsForFileUtil` for modal button rows, `SummaryList` for item display.
+
 ## Behavioral Contract
 
 ### Attachment Fetch
 
 On mount and on attachment change events:
 
+```typescript
+const caseID = caseId ?? thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, '');
+// Do NOT use pConn.getCaseInfo().getID() — it may return the wrong format
+PCore.getAttachmentUtils().getCaseAttachments(caseID, context);
 ```
-PCore.getAttachmentUtils().getCaseAttachments(caseKey, context)
+
+Returns array of attachment/link objects. Store in `attachments` state. Guard: only fetch if `caseID` is non-empty.
+
+### Pub/Sub Subscription
+
+Subscribe to the case attachments event for auto-refresh:
+
+```typescript
+const eventName = (PCore.getEvents().getCaseEvent() as any).CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW;
+PCore.getPubSubUtils().subscribe(eventName, refresh, 'FileUtility');
+// Cleanup: PCore.getPubSubUtils().unsubscribe(eventName, 'FileUtility');
 ```
 
-Returns array of attachment/link objects. Store in `attachments` state.
+This ensures attachments refresh when CaseView publishes the update event.
 
-Debounced auto-refresh: on `CASE_ATTACHMENTS_UPDATED` pub-sub event, wait 1000ms (debounced) then re-fetch. This prevents rapid re-fetches when multiple files are uploaded simultaneously.
+### Menu Actions
+
+"Add files" and "Add links" should be in a **dropdown menu** (overflow/three-dot icon or text dropdown), NOT as plain buttons. The reference uses a `<Menu>` + `<MenuItem>` pattern.
 
 ### Main View — Top 3 Display
 
@@ -65,20 +125,27 @@ Pass to `<SummaryList arItems$={summaryItems} />`.
 
 ### File Upload
 
-1. User clicks "Add file" from the `<Menu>`.
-2. Opens an add-file modal (dialog).
-3. User selects a file via `<input type='file'>`.
-4. On confirm: call `PCore.getAttachmentUtils().uploadAttachment(file, onProgress, onError, context)`.
-5. On success: call `PCore.getAttachmentUtils().linkAttachmentsToCase(caseKey, [newAttachment], context)`.
-6. Refresh attachment list.
+1. User clicks "Add files" from the overflow menu (three-dot icon).
+2. Opens an add-file modal (DS Modal/Dialog component with `primaryButtonText="Attach"` and `secondaryButtonText="Cancel"`).
+3. User selects a file via the DS file uploader button — do NOT use a plain `<input type='file'>`. Use the DS's styled file upload component (e.g., Carbon `FileUploaderButton`, Ant Design `Upload`, Chakra `Input type="file"` with custom styling). Show the selected file name below the button.
+4. "Attach" button is disabled until a file is selected.
+5. On confirm: call `PCore.getAttachmentUtils().uploadAttachment(file, onProgress, onError, context)`.
+6. On success: call `PCore.getAttachmentUtils().linkAttachmentsToCase(caseKey, [newAttachment], 'FILE', context)`.
+7. Close modal, clear file state, refresh attachment list.
+
+> ⚠️ Do NOT use a bare `<input type="file">` — it renders as an unstyled browser-native button. Always use the design system's file uploader component for visual consistency.
 
 ### URL Attachment
 
-1. User clicks "Add link" from the `<Menu>`.
-2. Opens add-link modal with two fields: `Title` (required) and `URL` (required).
-3. The "Attach" button is enabled only when both `title` and `url` are non-empty.
-4. On confirm: call `PCore.getAttachmentUtils().linkAttachmentsToCase(caseKey, [{ name: title, url, category: 'URL' }], context)`.
-5. Refresh attachment list.
+1. User clicks "Add links" from the overflow menu.
+2. Opens add-link modal with two DS text input fields: `Title` (required) and `URL` (required).
+3. "Attach" button is disabled until both `title` and `url` are non-empty.
+4. On confirm: call `PCore.getAttachmentUtils().linkAttachmentsToCase(caseKey, [{ name: title, url, category: 'URL' }], 'URL', context)`.
+5. Close modal, clear fields, refresh attachment list.
+
+### Menu Actions
+
+"Add files" and "Add links" MUST be in a **dropdown/overflow menu** (three-dot icon), NOT as plain text buttons. Use the DS's overflow menu or dropdown component.
 
 ### Download / Open
 

package/templates/react-sdk-reference/{.claude → .ai-common}/skills/widget-skills/Followers.md

@@ -22,6 +22,26 @@ Intended to display the list of operators following a case, allowing users to fo
 | ------------- | ---------- | -------- | --------------- |
 | `getPConnect` | `function` | Yes      | PConnect getter |
 
+## Component Skeleton
+
+Stub implementation:
+
+```typescript
+import type { PropsWithChildren } from 'react';
+import type { PConnProps } from '@pega/sdk-react';
+
+export default function Followers(props: PropsWithChildren<PConnProps>) {
+  return (
+    <Card>
+      <CardHeader><h6>Followers - <em>unsupported</em></h6></CardHeader>
+      <CardContent>Followers content</CardContent>
+    </Card>
+  );
+}
+```
+
+> A production implementation would fetch from `D_pyCaseFollowers` and provide follow/unfollow actions.
+
 No additional custom props in the current stub implementation. A full implementation would likely include:
 
 - `datasource` — data page name for follower list

package/templates/react-sdk-reference/{.github → .ai-common}/skills/widget-skills/QuickCreate.md

@@ -25,6 +25,54 @@ Provides a shortcut panel for creating new cases. Case types are sourced from th
 | `classFilter`   | `any[]`    | No       | Array of class names to filter available case types. Empty array = show all |
 | `getPConnect`   | `function` | Yes      | PConnect getter                                                             |
 
+## Component Skeleton
+
+```typescript
+import { useEffect, useState } from 'react';
+import { Utils } from '../../helpers/utils';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface QuickCreateProps extends PConnProps {
+  heading: string;
+  showCaseIcons: boolean;
+  classFilter: any[];
+}
+
+export default function QuickCreate(props: QuickCreateProps) {
+  const WssQuickCreate = getComponentFromRegistry('WssQuickCreate');
+  const { getPConnect, heading, showCaseIcons, classFilter } = props;
+  const pConn = getPConnect();
+  const [quickCreateCases, setCases] = useState([]);
+
+  useEffect(() => {
+    // 1. Read case types from envInfo or fallback to portal config
+    const envInfo = PCore.getEnvironmentInfo();
+    let defaultCases = [];
+    if (envInfo?.environmentInfoObject?.pyCaseTypeList) {
+      defaultCases = envInfo.environmentInfoObject.pyCaseTypeList.map(ct => ({
+        classname: ct.pyWorkTypeImplementationClassName,
+        label: ct.pyWorkTypeName,
+        onClick: () => pConn.getActionsApi().createWork(ct.pyWorkTypeImplementationClassName, {}),
+        ...(showCaseIcons && { icon: Utils.getImageSrc(ct.pxIcon, Utils.getSDKStaticConentUrl()) }),
+      }));
+    } else {
+      // Launchpad fallback: read from store/portal config
+    }
+
+    // 2. Apply classFilter (empty = show all)
+    if (classFilter?.length > 0) {
+      setCases(defaultCases.filter(c => classFilter.includes(c.classname)));
+    } else {
+      setCases(defaultCases);
+    }
+  }, []);
+
+  // 3. Delegate rendering to WssQuickCreate DSE
+  return <WssQuickCreate heading={heading} actions={quickCreateCases} />;
+}
+```
+
 ## Behavioral Contract
 
 ### Case Types Resolution

package/templates/react-sdk-reference/{.claude → .ai-common}/skills/widget-skills/SummaryItem.md

@@ -22,6 +22,72 @@ Individual item card for displaying an attachment, file, or link with an icon, n
 
 ---
 
+## Component Skeletons
+
+### SummaryItem
+
+```typescript
+import { useState } from 'react';
+import { Utils } from '../../helpers/utils';
+import type { PConnProps } from '@pega/sdk-react';
+import './SummaryItem.css';
+
+interface SummaryItemProps extends PConnProps {
+  menuIconOverride$: string;
+  menuIconOverrideAction$: any;
+  arItems$: any;
+}
+
+export default function SummaryItem(props: SummaryItemProps) {
+  let { menuIconOverride$ } = props;
+  const item = props.arItems$;
+  const imagePath = Utils.getIconPath(Utils.getSDKStaticConentUrl());
+  const srcImg = `${imagePath}${item.visual.icon}.svg`;
+  const [anchorEl, setAnchorEl] = useState(null);
+  if (menuIconOverride$) menuIconOverride$ = Utils.getImageSrc(menuIconOverride$, Utils.getSDKStaticConentUrl());
+
+  return (
+    <div className="psdk-utility-card">
+      <div className="psdk-utility-card-icon"><img src={srcImg} /></div>
+      <div className="psdk-utility-card-main">
+        {item.primary.type !== 'URL'
+          ? <div className="primary-label">{item.primary.name}</div>
+          : <button className="link-button">{item.primary.name}</button>}
+        {item.secondary.text && <div style={{ color: item.secondary.error ? 'red' : undefined }}>{item.secondary.text}</div>}
+      </div>
+      <div className="psdk-utility-action">
+        {menuIconOverride$
+          ? <button onClick={() => props.menuIconOverrideAction$(item)}><img src={menuIconOverride$} /></button>
+          : <IconButton onClick={e => setAnchorEl(e.currentTarget)}><MoreVertIcon /></IconButton>}
+        {!menuIconOverride$ && <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={() => setAnchorEl(null)}>
+          {item.actions?.map(opt => <MenuItem key={opt.id} onClick={opt.onClick}>{opt.text}</MenuItem>)}
+        </Menu>}
+      </div>
+    </div>
+  );
+}
+```
+
+### SummaryList
+
+```typescript
+import { getComponentFromRegistry } from '@pega/sdk-react';
+
+export default function SummaryList(props) {
+  const SummaryItem = getComponentFromRegistry('SummaryItem');
+  const { arItems$, menuIconOverride$ = '', menuIconOverrideAction$ } = props;
+  return (
+    <div>
+      {arItems$.map(file => (
+        <SummaryItem key={file.id} arItems$={file}
+          menuIconOverride$={menuIconOverride$}
+          menuIconOverrideAction$={menuIconOverrideAction$} />
+      ))}
+    </div>
+  );
+}
+```
+
 ## SummaryItem
 
 ### Props