@pega/sdk 0.0.1

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@pega/sdk",
+  "version": "0.0.1",
+  "description": "Scaffold a Pega SDK application project",
+  "type": "module",
+  "bin": {
+    "sdk": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates",
+    "LICENSE",
+    "SECURITY.md"
+  ],
+  "scripts": {
+    "prepare:templates": "node ./scripts/prepare-templates.mjs",
+    "build": "npm run prepare:templates && tsup",
+    "dev": "tsup --watch",
+    "prepack": "npm run build"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.9.1",
+    "picocolors": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.17.0",
+    "tsup": "^8.4.0",
+    "typescript": "~5.8.2"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "keywords": [
+    "pega",
+    "sdk",
+    "scaffold",
+    "cli",
+    "create-app"
+  ],
+  "license": "Apache-2.0"
+}

package/templates/angular-sdk-reference/.github/AGENTS.md

@@ -0,0 +1,23 @@
+# Agents
+
+## SDK Component Developer
+
+This agent specializes in creating and modifying Pega SDK components.
+
+### Capabilities
+
+- Creating new field, template, and widget components
+- Registering components in the component map
+- Debugging PConnect prop issues
+- Handling form validation and state management
+
+### Skills
+
+- [pega-sdk-component](.github/skills/pega-sdk-component.md)
+
+### Instructions
+
+- Always follow the PConnect pattern for data binding
+- Use MUI components for UI primitives
+- Handle loading states and error states gracefully
+- Ensure components are registered in the component map after creation

package/templates/angular-sdk-reference/.github/copilot-instructions.md

@@ -0,0 +1,40 @@
+# Pega SDK Project
+
+## Coding Guidelines
+
+- Use TypeScript strict mode
+- Follow the component patterns established in the `src/components/` directory
+- Each component should handle its own PConnect props via `getPConnect()`
+- Use MUI (Material UI) for UI primitives
+- Register all components in `src/components/component-map.ts`
+
+## Pega SDK Architecture
+
+- **PConnect**: The bridge between Pega's DX engine and your UI components
+- **ComponentRegistry**: Maps Pega component type names to your React/Angular/WC implementations
+- **BootstrapClient**: Handles auth + loading the Pega runtime
+- **PCore**: Global Pega runtime API (available after bootstrap)
+
+## Key Patterns
+
+### Creating a new field component
+
+1. Create a file in `src/components/field/MyField/index.ts`
+2. Accept `getPConnect` prop, extract `actionsApi` and `stateProps`
+3. Call `actions.updateFieldValue()` on change and `actions.triggerFieldChange()` on blur
+4. Register in `component-map.ts`
+
+### Creating a new template component
+
+1. Create in `src/components/template/MyTemplate/index.ts`
+2. Use `pConn.getChildren()` to get child PConnect nodes
+3. Render children via `<PConnectComponent getPConnect={() => child.getPConnect()} />`
+
+## SDK Config
+
+The `sdk-config.json` file configures:
+
+- `serverConfig.infinityRestServerUrl` — Pega server endpoint
+- `serverConfig.appAlias` — Application alias
+- `authConfig.mashupClientId` — OAuth client ID for embedded mode
+- `authConfig.portalClientId` — OAuth client ID for portal mode

package/templates/angular-sdk-reference/.github/skills/pega-sdk-component.md

@@ -0,0 +1,48 @@
+---
+name: pega-sdk-component
+description: Create a new Pega SDK component (field, template, or widget)
+---
+
+# Pega SDK Component Skill
+
+You are an expert at building Pega SDK components. When asked to create a component:
+
+## For Field Components
+
+Create a React component that:
+
+1. Accepts `getPConnect` as a prop
+2. Extracts the PConnect instance: `const pConn = getPConnect()`
+3. Gets the actions API: `const actions = pConn.getActionsApi()`
+4. Gets the property name: `const propName = pConn.getStateProps().value`
+5. Handles value changes with `actions.updateFieldValue(propName, value)`
+6. Triggers validation on blur with `actions.triggerFieldChange(propName, value)`
+7. Displays validation errors from `validatemessage` prop
+
+## For Template Components
+
+Create a React component that:
+
+1. Accepts `getPConnect` as a prop
+2. Gets children: `const children = pConn.getChildren()`
+3. Renders each child using `<PConnectComponent getPConnect={() => child.getPConnect()} />`
+4. Applies layout (grid, flex, etc.) around the children
+
+## For Widget Components
+
+Create a React component that:
+
+1. Accepts `getPConnect` as a prop
+2. Reads data from PConnect: `pConn.getValue('.propertyPath')`
+3. May call PCore APIs for data fetching
+4. Renders the widget UI
+
+## Registration
+
+After creating the component, add it to `src/components/component-map.ts`:
+
+```typescript
+import MyComponent from './field/MyComponent';
+// In getSampleComponentMap():
+MyComponent,
+```

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

@@ -0,0 +1,34 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular-sdk-reference": {
+      "projectType": "application",
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "tsconfig.json",
+            "assets": ["src/assets", "src/sdk-config.json"],
+            "styles": ["src/styles.css"],
+            "scripts": []
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "port": 3501
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+{
+  "name": "@pega/angular-sdk-reference",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "dev": "ng serve --open"
+  },
+  "dependencies": {
+    "@angular/animations": "^18.0.0",
+    "@angular/common": "^18.0.0",
+    "@angular/compiler": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/forms": "^18.0.0",
+    "@angular/platform-browser": "^18.0.0",
+    "@angular/platform-browser-dynamic": "^18.0.0",
+    "@angular/router": "^18.0.0",
+    "@pega/sdk-angular": "^0.1.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.6.0",
+    "zone.js": "~0.14.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^18.0.0",
+    "@angular/cli": "^18.0.0",
+    "@angular/compiler-cli": "^18.0.0",
+    "typescript": "~5.4.0"
+  }
+}

package/templates/angular-sdk-reference/sdk-config.json

@@ -0,0 +1,26 @@
+{
+  "serverConfig": {
+    "infinityRestServerUrl": "https://YOUR_PEGA_SERVER/prweb",
+    "appAlias": "YOUR_APP_ALIAS",
+    "sdkContentServerUrl": "",
+    "appPortal": "YOUR_PORTAL_NAME",
+    "appMashupCaseType": "YOUR-CASETYPE-CLASS",
+    "excludePortals": [
+      "pxExpress",
+      "Developer",
+      "pxPredictionStudio",
+      "pxAdminStudio",
+      "pyCaseWorker",
+      "pyCaseManager7"
+    ]
+  },
+  "authConfig": {
+    "authService": "pega",
+    "mashupClientId": "YOUR_MASHUP_CLIENT_ID",
+    "mashupUserIdentifier": "",
+    "mashupPassword": "",
+    "portalClientId": "YOUR_PORTAL_CLIENT_ID",
+    "portalClientSecret": "",
+    "portalGrantType": ""
+  }
+}

package/templates/angular-sdk-reference/src/app/app.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div *ngIf="!isReady" class="loading-container">
+      <span class="loading-text">Authenticating and loading Pega...</span>
+    </div>
+    <div *ngIf="isReady" id="pega-root">
+      <div class="header">
+        <span class="header-title">Pega SDK — Angular Reference</span>
+      </div>
+      <div class="content">
+        <p>Pega SDK Angular app is ready. Implement your components here.</p>
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      .header {
+        padding: 1rem 1.5rem;
+        background: #1e293b;
+        color: #fff;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .header-title {
+        font-weight: 600;
+      }
+      .content {
+        max-width: 720px;
+        margin: 2rem auto;
+        padding: 0 1.5rem;
+      }
+    `,
+  ],
+})
+export class AppComponent implements OnInit {
+  isReady = false;
+
+  constructor() {}
+
+  async ngOnInit() {
+    try {
+      this.isReady = true;
+    } catch (err) {
+      console.error('Failed to initialize Pega SDK:', err);
+    }
+  }
+}

package/templates/angular-sdk-reference/src/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Pega SDK Angular Reference</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

package/templates/angular-sdk-reference/src/main.ts

@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent).catch((err) => console.error(err));

package/templates/angular-sdk-reference/src/styles.css

@@ -0,0 +1,19 @@
+body {
+  margin: 0;
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
+}
+
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.loading-text {
+  font-size: 18px;
+  color: #555;
+}

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

@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": ["ES2022", "dom"],
+    "skipLibCheck": true,
+    "paths": {
+      "@pega/sdk-angular": ["../../packages/sdk-angular/src/index.ts"],
+      "@pega/sdk-types": ["../../packages/sdk-types/src/index.ts"]
+    }
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

package/templates/react-native-sdk-reference/.github/AGENTS.md

@@ -0,0 +1,23 @@
+# Agents
+
+## SDK Component Developer
+
+This agent specializes in creating and modifying Pega SDK components.
+
+### Capabilities
+
+- Creating new field, template, and widget components
+- Registering components in the component map
+- Debugging PConnect prop issues
+- Handling form validation and state management
+
+### Skills
+
+- [pega-sdk-component](.github/skills/pega-sdk-component.md)
+
+### Instructions
+
+- Always follow the PConnect pattern for data binding
+- Use MUI components for UI primitives
+- Handle loading states and error states gracefully
+- Ensure components are registered in the component map after creation

package/templates/react-native-sdk-reference/.github/copilot-instructions.md

@@ -0,0 +1,40 @@
+# Pega SDK Project
+
+## Coding Guidelines
+
+- Use TypeScript strict mode
+- Follow the component patterns established in the `src/components/` directory
+- Each component should handle its own PConnect props via `getPConnect()`
+- Use MUI (Material UI) for UI primitives
+- Register all components in `src/components/component-map.ts`
+
+## Pega SDK Architecture
+
+- **PConnect**: The bridge between Pega's DX engine and your UI components
+- **ComponentRegistry**: Maps Pega component type names to your React/Angular/WC implementations
+- **BootstrapClient**: Handles auth + loading the Pega runtime
+- **PCore**: Global Pega runtime API (available after bootstrap)
+
+## Key Patterns
+
+### Creating a new field component
+
+1. Create a file in `src/components/field/MyField/index.ts`
+2. Accept `getPConnect` prop, extract `actionsApi` and `stateProps`
+3. Call `actions.updateFieldValue()` on change and `actions.triggerFieldChange()` on blur
+4. Register in `component-map.ts`
+
+### Creating a new template component
+
+1. Create in `src/components/template/MyTemplate/index.ts`
+2. Use `pConn.getChildren()` to get child PConnect nodes
+3. Render children via `<PConnectComponent getPConnect={() => child.getPConnect()} />`
+
+## SDK Config
+
+The `sdk-config.json` file configures:
+
+- `serverConfig.infinityRestServerUrl` — Pega server endpoint
+- `serverConfig.appAlias` — Application alias
+- `authConfig.mashupClientId` — OAuth client ID for embedded mode
+- `authConfig.portalClientId` — OAuth client ID for portal mode

package/templates/react-native-sdk-reference/.github/skills/pega-sdk-component.md

@@ -0,0 +1,48 @@
+---
+name: pega-sdk-component
+description: Create a new Pega SDK component (field, template, or widget)
+---
+
+# Pega SDK Component Skill
+
+You are an expert at building Pega SDK components. When asked to create a component:
+
+## For Field Components
+
+Create a React component that:
+
+1. Accepts `getPConnect` as a prop
+2. Extracts the PConnect instance: `const pConn = getPConnect()`
+3. Gets the actions API: `const actions = pConn.getActionsApi()`
+4. Gets the property name: `const propName = pConn.getStateProps().value`
+5. Handles value changes with `actions.updateFieldValue(propName, value)`
+6. Triggers validation on blur with `actions.triggerFieldChange(propName, value)`
+7. Displays validation errors from `validatemessage` prop
+
+## For Template Components
+
+Create a React component that:
+
+1. Accepts `getPConnect` as a prop
+2. Gets children: `const children = pConn.getChildren()`
+3. Renders each child using `<PConnectComponent getPConnect={() => child.getPConnect()} />`
+4. Applies layout (grid, flex, etc.) around the children
+
+## For Widget Components
+
+Create a React component that:
+
+1. Accepts `getPConnect` as a prop
+2. Reads data from PConnect: `pConn.getValue('.propertyPath')`
+3. May call PCore APIs for data fetching
+4. Renders the widget UI
+
+## Registration
+
+After creating the component, add it to `src/components/component-map.ts`:
+
+```typescript
+import MyComponent from './field/MyComponent';
+// In getSampleComponentMap():
+MyComponent,
+```

package/templates/react-native-sdk-reference/App.tsx

@@ -0,0 +1,51 @@
+import { View, Text, StyleSheet, Button } from 'react-native';
+
+/**
+ * Pega SDK React Native Reference App (Experimental)
+ *
+ * This is a starter template for using @pega/sdk-react with React Native.
+ * Note: React Native support is experimental. The SDK bridge components
+ * may need adaptation for native rendering.
+ */
+export default function App() {
+  const handleCreateCase = () => {
+    // TODO: Initialize Pega auth + bootstrap, then create a case
+    console.log('Create case — implement with Pega SDK');
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Pega SDK — React Native</Text>
+      <Text style={styles.subtitle}>
+        Configure sdk-config.json and implement your Pega integration.
+      </Text>
+      <View style={styles.buttonContainer}>
+        <Button title='Create Case' onPress={handleCreateCase} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 24,
+    backgroundColor: '#fff',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+    marginBottom: 12,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: '#64748b',
+    textAlign: 'center',
+    marginBottom: 24,
+  },
+  buttonContainer: {
+    marginTop: 16,
+  },
+});

package/templates/react-native-sdk-reference/app.json

@@ -0,0 +1,11 @@
+{
+  "expo": {
+    "name": "pega-sdk-react-native-reference",
+    "slug": "pega-sdk-react-native-reference",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "scheme": "pegasdk",
+    "userInterfaceStyle": "light",
+    "platforms": ["ios", "android"]
+  }
+}

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

@@ -0,0 +1,22 @@
+{
+  "name": "@pega/react-native-sdk-reference",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@pega/sdk-react": "^0.1.0",
+    "expo": "~52.0.0",
+    "react": "^18.3.1",
+    "react-native": "0.76.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@types/react": "^18.3.18",
+    "typescript": "~5.8.2"
+  }
+}

package/templates/react-native-sdk-reference/sdk-config.json

@@ -0,0 +1,14 @@
+{
+  "serverConfig": {
+    "infinityRestServerUrl": "https://YOUR_PEGA_SERVER/prweb",
+    "appAlias": "YOUR_APP_ALIAS",
+    "sdkContentServerUrl": "",
+    "appMashupCaseType": "YOUR-CASETYPE-CLASS"
+  },
+  "authConfig": {
+    "authService": "pega",
+    "mashupClientId": "YOUR_MASHUP_CLIENT_ID",
+    "mashupUserIdentifier": "",
+    "mashupPassword": ""
+  }
+}

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

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "extends": "expo/tsconfig.base"
+}