@pega/sdk 0.0.2 → 0.0.4

package/templates/react-sdk-reference/src/components/widget/SummaryItem/SummaryItem.tsx

@@ -30,7 +30,7 @@ export default function SummaryItem(props: SummaryItemProps) {
     props.menuIconOverrideAction$(item);
   }
 
-  const handleClick = event => {
+  const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
   };
 
@@ -39,43 +39,50 @@ export default function SummaryItem(props: SummaryItemProps) {
   };
 
   return (
-    <div className='psdk-utility-card'>
-      <div className='psdk-utility-card-icon'>
-        <img className='psdk-utility-card-svg-icon' src={srcImg} />
+    <div className="psdk-utility-card">
+      <div className="psdk-utility-card-icon">
+        <img className="psdk-utility-card-svg-icon" src={srcImg} />
       </div>
-      <div className='psdk-utility-card-main'>
-        {item.primary.type !== 'URL' && <div className='psdk-utility-card-main-primary-label'>{item.primary.name}</div>}
+      <div className="psdk-utility-card-main">
+        {item.primary.type !== 'URL' && <div className="psdk-utility-card-main-primary-label">{item.primary.name}</div>}
         {item.primary.type === 'URL' && (
-          <div className='psdk-utility-card-main-primary-url'>
-            <button type='button' className='psdk-utility-link-button'>
+          <div className="psdk-utility-card-main-primary-url">
+            <button type="button" className="psdk-utility-link-button">
               {item.primary.name}&nbsp;
-              <img className='psdk-utility-card-actions-svg-icon' src={`${imagePath$}${item.primary.icon}.svg`} />
+              <img className="psdk-utility-card-actions-svg-icon" src={`${imagePath$}${item.primary.icon}.svg`} />
             </button>
           </div>
         )}
-        {item.secondary.text && <div style={{ color: item.secondary.error ? 'red' : undefined }}>{item.secondary.text}</div>}
+        {item.secondary.text && (
+          <div style={{ color: item.secondary.error ? 'red' : undefined }}>{item.secondary.text}</div>
+        )}
       </div>
-      <div className='psdk-utility-action'>
+      <div className="psdk-utility-action">
         {menuIconOverride$ && (
-          <button type='button' className='psdk-utility-button' aria-label='Delete Attachment' onClick={removeAttachment}>
-            <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$} />
+          <button
+            type="button"
+            className="psdk-utility-button"
+            aria-label="Delete Attachment"
+            onClick={removeAttachment}
+          >
+            <img className="psdk-utility-card-action-svg-icon" src={menuIconOverride$} />
           </button>
         )}
         {!menuIconOverride$ && (
           <div>
             <IconButton
-              id='setting-button'
+              id="setting-button"
               aria-controls={open ? 'file-menu' : undefined}
               aria-expanded={open ? 'true' : undefined}
-              aria-haspopup='true'
+              aria-haspopup="true"
               onClick={handleClick}
-              size='large'
+              size="large"
             >
               <MoreVertIcon />
             </IconButton>
-            <Menu id='file-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+            <Menu id="file-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
               {item.actions &&
-                item.actions.map(option => (
+                item.actions.map((option) => (
                   <MenuItem style={{ fontSize: '14px' }} key={option.id || option.text} onClick={option.onClick}>
                     {option.text}
                   </MenuItem>

package/templates/react-sdk-reference/src/components/widget/SummaryList/SummaryList.tsx

@@ -15,8 +15,13 @@ export default function SummaryList(props: SummaryListProps) {
   const { menuIconOverride$: menuOverride = '' } = props;
   return (
     <div>
-      {props.arItems$.map(file => (
-        <SummaryItem key={file.id} menuIconOverride$={menuOverride} arItems$={file} menuIconOverrideAction$={props.menuIconOverrideAction$} />
+      {props.arItems$.map((file) => (
+        <SummaryItem
+          key={file.id}
+          menuIconOverride$={menuOverride}
+          arItems$={file}
+          menuIconOverrideAction$={props.menuIconOverrideAction$}
+        />
       ))}
     </div>
   );

package/templates/react-sdk-reference/src/components/widget/ToDo/ToDo.tsx

@@ -25,13 +25,7 @@ import type { PConnProps } from '@pega/sdk-react';
 
 import './ToDo.css';
 
-const fetchMyWorkList = (
-  datapage,
-  fields,
-  numberOfRecords,
-  includeTotalCount,
-  context,
-) => {
+const fetchMyWorkList = (datapage, fields, numberOfRecords, includeTotalCount, context) => {
   return PCore.getDataPageUtils()
     .getDataAsync(
       datapage,
@@ -58,8 +52,7 @@ const fetchMyWorkList = (
         ...response,
         data: (Array.isArray(response?.data) ? response.data : []).map((row) =>
           Object.keys(fields).reduce((obj, key) => {
-            obj[key] =
-              row[PCore.getAnnotationUtils().getPropertyName(fields[key])];
+            obj[key] = row[PCore.getAnnotationUtils().getPropertyName(fields[key])];
             return obj;
           }, {}),
         ),
@@ -161,9 +154,7 @@ export default function ToDo(props: ToDoProps) {
   const localeCategory = 'Todo';
   const showlessLocalizedValue = localizedVal('show_less', 'CosmosFields');
   const showMoreLocalizedValue = localizedVal('show_more', 'CosmosFields');
-  const canPerform =
-    assignments?.[0]?.canPerform === 'true' ||
-    assignments?.[0]?.canPerform === true;
+  const canPerform = assignments?.[0]?.canPerform === 'true' || assignments?.[0]?.canPerform === true;
   const [count, setCount] = useState(0);
 
   const {
@@ -210,16 +201,8 @@ export default function ToDo(props: ToDoProps) {
 
   const getAssignmentName = (assignment) => {
     return type === CONSTS.TODO
-      ? localizedVal(
-          assignment.name,
-          '',
-          PCore.getLocaleUtils().getCaseLocaleReference(assignment.classname),
-        )
-      : localizedVal(
-          assignment.stepName,
-          '',
-          PCore.getLocaleUtils().getCaseLocaleReference(assignment.classname),
-        );
+      ? localizedVal(assignment.name, '', PCore.getLocaleUtils().getCaseLocaleReference(assignment.classname))
+      : localizedVal(assignment.stepName, '', PCore.getLocaleUtils().getCaseLocaleReference(assignment.classname));
   };
 
   function showToast(message: string) {
@@ -230,10 +213,7 @@ export default function ToDo(props: ToDoProps) {
     setShowSnackbar(true);
   }
 
-  function handleSnackbarClose(
-    event: React.SyntheticEvent<any> | Event,
-    reason?: string,
-  ) {
+  function handleSnackbarClose(event: React.SyntheticEvent<any> | Event, reason?: string) {
     if (reason === 'clickaway') {
       return;
     }
@@ -242,12 +222,7 @@ export default function ToDo(props: ToDoProps) {
 
   function _showMore() {
     setBShowMore(false);
-    if (
-      type === CONSTS.WORKLIST &&
-      count &&
-      count > assignments.length &&
-      !assignmentsSource
-    ) {
+    if (type === CONSTS.WORKLIST && count && count > assignments.length && !assignmentsSource) {
       fetchMyWorkList(
         myWorkList.datapage,
         getPConnect().getComponentConfig()?.myWorkList.fields,
@@ -310,32 +285,21 @@ export default function ToDo(props: ToDoProps) {
 
     if ((showTodoList && type !== CONSTS.TODO) || assignment.isChild === true) {
       /* Supress link for todo inside flow step */
-      return (
-        <Button
-          size='small'
-          color='primary'
-        >{`${assignment.name} ${getID(assignment)}`}</Button>
-      );
+      return <Button size="small" color="primary">{`${assignment.name} ${getID(assignment)}`}</Button>;
     }
     return displayID;
   };
 
   const getListItemComponent = (assignment) => {
-    const caseLocaleRef = PCore.getLocaleUtils().getCaseLocaleReference(
-      assignment.classname,
-    );
+    const caseLocaleRef = PCore.getLocaleUtils().getCaseLocaleReference(assignment.classname);
     if (isDesktop) {
       return (
         <>
           {localizedVal('In', localeCategory)}
           {renderTaskId(type, getPConnect, showTodoList, assignment)}
-          {type === CONSTS.WORKLIST && assignment.status
-            ? `\u2022 `
-            : undefined}
+          {type === CONSTS.WORKLIST && assignment.status ? `\u2022 ` : undefined}
           {type === CONSTS.WORKLIST && assignment.status ? (
-            <span className='psdk-todo-assignment-status'>
-              {localizedVal(assignment.status, '', caseLocaleRef)}
-            </span>
+            <span className="psdk-todo-assignment-status">{localizedVal(assignment.status, '', caseLocaleRef)}</span>
           ) : undefined}
           {` \u2022  ${localizedVal('Urgency', localeCategory)}  ${getPriority(assignment)}`}
         </>
@@ -343,52 +307,33 @@ export default function ToDo(props: ToDoProps) {
     }
     return (
       <>
-        <Button
-          size='small'
-          color='primary'
-        >{`${assignment.name} ${getID(assignment)}`}</Button>
+        <Button size="small" color="primary">{`${assignment.name} ${getID(assignment)}`}</Button>
         {` \u2022 ${localizedVal('Urgency', localeCategory)}  ${getPriority(assignment)}`}
       </>
     );
   };
 
-  const getCount = () =>
-    assignmentsSource
-      ? assignmentsSource.length
-      : type === CONSTS.WORKLIST
-        ? count
-        : 0;
+  const getCount = () => (assignmentsSource ? assignmentsSource.length : type === CONSTS.WORKLIST ? count : 0);
 
   const toDoContent = (
     <>
       {showTodoList && (
         <CardHeader
           title={
-            <Badge
-              badgeContent={getCount()}
-              overlap='rectangular'
-              color='primary'
-            >
-              <Typography variant='h6'>
-                {headerText}&nbsp;&nbsp;&nbsp;
-              </Typography>
+            <Badge badgeContent={getCount()} overlap="rectangular" color="primary">
+              <Typography variant="h6">{headerText}&nbsp;&nbsp;&nbsp;</Typography>
             </Badge>
           }
         />
       )}
       <List>
         {assignments.map((assignment) => (
-          <div
-            className='psdk-todo-avatar-header'
-            key={getAssignmentId(assignment)}
-          >
+          <div className="psdk-todo-avatar-header" key={getAssignmentId(assignment)}>
             <Avatar className={classes.avatar} style={{ marginRight: '16px' }}>
               {currentUserInitials}
             </Avatar>
             <div style={{ display: 'block' }}>
-              <Typography variant='h6'>
-                {localizedVal(assignment?.name, localeCategory)}
-              </Typography>
+              <Typography variant="h6">{localizedVal(assignment?.name, localeCategory)}</Typography>
               {`${localizedVal('In', localeCategory)} ${getID(assignment)} \u2022  ${localizedVal(
                 'Urgency',
                 localeCategory,
@@ -396,11 +341,7 @@ export default function ToDo(props: ToDoProps) {
             </div>
             {(!isConfirm || canPerform) && (
               <div style={{ marginLeft: 'auto' }}>
-                <IconButton
-                  id='go-btn'
-                  onClick={() => clickGo(assignment)}
-                  size='large'
-                >
+                <IconButton id="go-btn" onClick={() => clickGo(assignment)} size="large">
                   <ArrowForwardIosOutlinedIcon />
                 </IconButton>
               </div>
@@ -418,21 +359,11 @@ export default function ToDo(props: ToDoProps) {
           {showTodoList && (
             <CardHeader
               title={
-                <Badge
-                  badgeContent={getCount()}
-                  overlap='rectangular'
-                  color='primary'
-                >
-                  <Typography variant='h6'>
-                    {headerText}&nbsp;&nbsp;&nbsp;
-                  </Typography>
+                <Badge badgeContent={getCount()} overlap="rectangular" color="primary">
+                  <Typography variant="h6">{headerText}&nbsp;&nbsp;&nbsp;</Typography>
                 </Badge>
               }
-              avatar={
-                <Avatar className={classes.avatar}>
-                  {currentUserInitials}
-                </Avatar>
-              }
+              avatar={<Avatar className={classes.avatar}>{currentUserInitials}</Avatar>}
             />
           )}
           <CardContent>
@@ -444,18 +375,12 @@ export default function ToDo(props: ToDoProps) {
                   divider
                   onClick={() => clickGo(assignment)}
                   secondaryAction={
-                    <IconButton
-                      onClick={() => clickGo(assignment)}
-                      size='large'
-                    >
+                    <IconButton onClick={() => clickGo(assignment)} size="large">
                       <ArrowForwardIosOutlinedIcon />
                     </IconButton>
                   }
                 >
-                  <ListItemText
-                    primary={getAssignmentName(assignment)}
-                    secondary={getListItemComponent(assignment)}
-                  />
+                  <ListItemText primary={getAssignmentName(assignment)} secondary={getListItemComponent(assignment)} />
                 </ListItem>
               ))}
             </List>
@@ -463,24 +388,18 @@ export default function ToDo(props: ToDoProps) {
         </Card>
       )}
 
-      {type === CONSTS.TODO && !isConfirm && (
-        <Card className={classes.todoWrapper}>{toDoContent}</Card>
-      )}
+      {type === CONSTS.TODO && !isConfirm && <Card className={classes.todoWrapper}>{toDoContent}</Card>}
       {type === CONSTS.TODO && isConfirm && <>{toDoContent}</>}
 
       {getCount() > 3 && (
-        <Box display='flex' justifyContent='center'>
+        <Box display="flex" justifyContent="center">
           {bShowMore ? (
-            <Button color='primary' onClick={_showMore}>
-              {showMoreLocalizedValue === 'show_more'
-                ? 'Show more'
-                : showMoreLocalizedValue}
+            <Button color="primary" onClick={_showMore}>
+              {showMoreLocalizedValue === 'show_more' ? 'Show more' : showMoreLocalizedValue}
             </Button>
           ) : (
             <Button onClick={_showLess}>
-              {showlessLocalizedValue === 'show_less'
-                ? 'Show less'
-                : showlessLocalizedValue}
+              {showlessLocalizedValue === 'show_less' ? 'Show less' : showlessLocalizedValue}
             </Button>
           )}
         </Box>
@@ -492,13 +411,8 @@ export default function ToDo(props: ToDoProps) {
         onClose={handleSnackbarClose}
         message={snackbarMessage}
         action={
-          <IconButton
-            size='small'
-            aria-label='close'
-            color='inherit'
-            onClick={handleSnackbarClose}
-          >
-            <CloseIcon fontSize='small' />
+          <IconButton size="small" aria-label="close" color="inherit" onClick={handleSnackbarClose}>
+            <CloseIcon fontSize="small" />
           </IconButton>
         }
       />

package/templates/react-sdk-reference/src/main.tsx

@@ -1,6 +1,6 @@
-import '@pega/sdk-react/dist/index.css';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
+import '@pega/sdk-react/dist/index.css';
 import { AppSelector } from './AppSelector';
 
 const outlet = document.getElementById('outlet');

package/templates/react-sdk-reference/tsconfig.json

@@ -18,7 +18,8 @@
     "noEmit": true,
     "typeRoots": ["../../node_modules/@types", "../../node_modules/@pega"],
     "types": ["pcore-pconnect-typedefs"],
-    "noImplicitAny": false
+    "noImplicitAny": false,
+    "ignoreDeprecations": "6.0"
   },
   "include": ["src", "vite.config.ts"]
 }

package/templates/react-sdk-reference/vite.config.ts

@@ -3,41 +3,66 @@ import react from '@vitejs/plugin-react';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 import { createRequire } from 'module';
 import path from 'path';
+import fs from 'node:fs';
 
 const require = createRequire(import.meta.url);
 
 // Resolve paths from hoisted node_modules (npm workspaces hoist to monorepo root)
-const constellationDist = path.join(
-  path.dirname(require.resolve('@pega/constellationjs/package.json')),
-  'dist',
-);
-const authLibDir = path.join(
-  path.dirname(require.resolve('@pega/auth/package.json')),
-  'lib',
-  'oauth-client',
-);
+const constellationDist = path.join(path.dirname(require.resolve('@pega/constellationjs/package.json')), 'dist');
+const authLibDir = path.join(path.dirname(require.resolve('@pega/auth/package.json')), 'lib', 'oauth-client');
 
 export default defineConfig({
   plugins: [
     react(),
+    // vite-plugin-static-copy maps files to wrong URLs when packages are hoisted to the
+    // monorepo root (../../node_modules/…). This middleware fixes dev-mode serving by
+    // intercepting the expected URLs and streaming from the resolved hoisted paths.
+    {
+      name: 'serve-hoisted-statics',
+      apply: 'serve' as const,
+      configureServer(server) {
+        server.middlewares.use((req, res, next) => {
+          const urlPath = (req.url ?? '').split('?')[0];
+          let srcFile: string | undefined;
+
+          // /constellation/<file>            → constellationDist/<file>
+          const constRoot = urlPath.match(/^\/constellation\/([^/]+)$/);
+          if (constRoot) srcFile = path.join(constellationDist, constRoot[1]);
+
+          // /constellation/prerequisite/<path> → constellationDist/<path>
+          const constPre = urlPath.match(/^\/constellation\/prerequisite\/(.+)$/);
+          if (constPre) srcFile = path.join(constellationDist, constPre[1]);
+
+          // index.html inline <script src="node_modules/@pega/constellationjs/dist/…">
+          const nodeConst = urlPath.match(/^\/node_modules\/@pega\/constellationjs\/dist\/(.+)$/);
+          if (nodeConst) srcFile = path.join(constellationDist, nodeConst[1]);
+
+          // Auth callback files
+          if (urlPath === '/auth.html') srcFile = path.join(authLibDir, 'authDone.html');
+          if (urlPath === '/authDone.js') srcFile = path.join(authLibDir, 'authDone.js');
+
+          if (srcFile && fs.existsSync(srcFile)) {
+            const ext = path.extname(srcFile).toLowerCase();
+            res.setHeader(
+              'Content-Type',
+              ext === '.js'
+                ? 'application/javascript'
+                : ext === '.json'
+                  ? 'application/json'
+                  : ext === '.html'
+                    ? 'text/html'
+                    : 'application/octet-stream',
+            );
+            res.setHeader('Cache-Control', 'no-cache');
+            fs.createReadStream(srcFile).pipe(res as any);
+            return;
+          }
+          next();
+        });
+      },
+    },
     viteStaticCopy({
       targets: [
-        {
-          src: path.join(constellationDist, 'bootstrap-shell.js'),
-          dest: 'constellation',
-        },
-        {
-          src: path.join(constellationDist, 'lib_asset.json'),
-          dest: 'constellation',
-        },
-        {
-          src: path.join(constellationDist, 'constellation-core.*'),
-          dest: 'constellation/prerequisite',
-        },
-        {
-          src: path.join(constellationDist, 'js'),
-          dest: 'constellation/prerequisite',
-        },
         {
           src: path.join(authLibDir, 'authDone.html'),
           dest: '.',
@@ -52,14 +77,14 @@ export default defineConfig({
           dest: '.',
         },
         {
-          src: 'assets/*',
+          src: 'assets/**/*',
           dest: './constellation',
         },
       ],
     }),
   ],
   server: {
-    port: 3500,
+    port: 3502,
     open: true,
   },
 });

package/templates/wc-sdk-reference/package.json

@@ -10,10 +10,10 @@
   },
   "dependencies": {
     "@pega/sdk-wc": "^0.1.0",
-    "lit": "^3.2.0"
+    "lit": "^3.3.3"
   },
   "devDependencies": {
-    "typescript": "~5.8.2",
-    "vite": "^6.3.5"
+    "typescript": "~6.0.3",
+    "vite": "^8.1.4"
   }
 }

package/templates/wc-sdk-reference/src/index.ts

@@ -76,13 +76,15 @@ export class PegaApp extends LitElement {
       </div>
       <div class="content">
         <div class="card">
-          ${this.isReady
-            ? html`<p>SDK Ready. Implement your Pega components here.</p>`
-            : html`
-                <h2>Ready to connect</h2>
-                <p>Configure sdk-config.json and initialize the Pega SDK.</p>
-                <button @click=${this._handleInit}>Initialize SDK</button>
-              `}
+          ${
+            this.isReady
+              ? html`<p>SDK Ready. Implement your Pega components here.</p>`
+              : html`
+                  <h2>Ready to connect</h2>
+                  <p>Configure sdk-config.json and initialize the Pega SDK.</p>
+                  <button @click=${this._handleInit}>Initialize SDK</button>
+                `
+          }
         </div>
       </div>
     `;
@@ -90,9 +92,7 @@ export class PegaApp extends LitElement {
 
   private _handleInit() {
     // TODO: Initialize @pega/sdk-wc bridge and auth
-    console.log(
-      'Initialize Pega SDK — configure sdk-config.json with your server details',
-    );
+    console.log('Initialize Pega SDK — configure sdk-config.json with your server details');
     this.isReady = true;
   }
 }

package/templates/wc-sdk-reference/tsconfig.json

@@ -12,6 +12,7 @@
     "noEmit": true,
     "experimentalDecorators": true,
     "useDefineForClassFields": false,
+    "ignoreDeprecations": "6.0",
     "paths": {
       "@pega/sdk-wc": ["../../packages/sdk-wc/src/index.ts"],
       "@pega/sdk-types": ["../../packages/sdk-types/src/index.ts"]

package/templates/react-sdk-reference/.github/prompts/replace-all-fields.prompt.md

@@ -1,48 +0,0 @@
----
-agent: agent
-description: Replace ALL field components with a new design system
----
-
-Replace ALL field components in `src/components/field/` with equivalents from **{{designSystem}}**.
-
-## Step 1: Replace all field components using subagents
-
-For each of the following field components, run a subagent using the `replace-field` prompt with `fieldName` set to the component directory name and `designSystem` set to **{{designSystem}}**:
-
-- TextInput
-- TextArea
-- Dropdown
-- Checkbox
-- RadioButtons
-- Date
-- DateTime
-- Time
-- Currency
-- Decimal
-- Integer
-- Percentage
-- Email
-- Phone
-- URL
-- AutoComplete
-- Multiselect
-- RichText
-- ScalarList
-- SelectableCard
-- Group
-- Location
-- ObjectReference
-- SemanticLink
-- UserReference
-- CancelAlert
-- TextContent
-
-Run subagents in parallel batches of 5 to maximize throughput.
-
-## Step 2: Replace FieldValueList
-
-Run a subagent to replace `FieldValueList` in `src/components/designSystemExtension/FieldValueList/` with a {{designSystem}} equivalent. Every field component depends on it for display modes.
-
-## Step 3: Verify
-
-After all subagents complete, run `npm run build` to verify everything compiles correctly.