@pega/sdk 0.0.3 → 0.0.5

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

@@ -11,11 +11,11 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^9.0.0",
-    "@mui/lab": "^9.0.0-beta.3",
-    "@mui/material": "^9.0.0",
+    "@mui/icons-material": "^9.2.0",
+    "@mui/lab": "^9.0.0-beta.6",
+    "@mui/material": "^9.2.0",
     "@mui/styles": "^6.5.0",
-    "@mui/x-date-pickers": "^9.2.0",
+    "@mui/x-date-pickers": "^9.9.0",
     "@pega/auth": "file:pega-auth-0.2.42.tgz",
     "@pega/constellationjs": "file:pega-constellationjs-0.26.3-local.tgz",
     "@pega/sdk-react": "file:pega-sdk-react-0.1.0.tgz",
@@ -23,31 +23,31 @@
     "@react-google-maps/api": "^2.20.8",
     "@tinymce/tinymce-react": "^6.3.0",
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.20",
+    "dayjs": "^1.11.21",
     "downloadjs": "^1.4.7",
     "fast-deep-equal": "^3.1.3",
     "lodash.clonedeep": "^4.5.0",
     "mui-tel-input": "^11.0.0",
-    "react": "^18.3.1",
+    "react": "^19.2.7",
     "react-datepicker": "^9.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.2.7",
     "react-number-format": "^5.4.5",
     "react-redux": "^9.3.0",
-    "react-router-dom": "^7.6.1",
+    "react-router-dom": "^7.18.1",
     "throttle-debounce": "^5.0.2"
   },
   "devDependencies": {
     "@pega/pcore-pconnect-typedefs": "^4.1.0",
     "@types/downloadjs": "^1.4.6",
     "@types/lodash.clonedeep": "^4.5.9",
-    "@types/react": "^18.3.18",
-    "@types/react-datepicker": "^6.2.0",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.2.17",
+    "@types/react-datepicker": "^7.0.0",
+    "@types/react-dom": "^19.2.3",
     "@types/react-redux": "^7.1.34",
     "@types/throttle-debounce": "^5.0.2",
-    "@vitejs/plugin-react": "^4.3.4",
-    "typescript": "~5.8.2",
-    "vite": "^6.3.5",
-    "vite-plugin-static-copy": "^2.3.0"
+    "@vitejs/plugin-react": "^6.0.3",
+    "typescript": "~6.0.3",
+    "vite": "^8.1.4",
+    "vite-plugin-static-copy": "^4.1.1"
   }
 }

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

@@ -0,0 +1,29 @@
+{
+  "name": "@pega/react-sdk-reference",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@pega/auth": "file:pega-auth-0.2.42.tgz",
+    "@pega/constellationjs": "file:pega-constellationjs-0.26.3-local.tgz",
+    "@pega/sdk-react": "file:pega-sdk-react-0.1.0.tgz",
+    "@pega/sdk-types": "file:pega-sdk-types-0.1.0.tgz",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-router-dom": "^7.18.1"
+  },
+  "devDependencies": {
+    "@pega/pcore-pconnect-typedefs": "^4.1.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.3",
+    "typescript": "~6.0.3",
+    "vite": "^8.1.4",
+    "vite-plugin-static-copy": "^4.1.1"
+  }
+}

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

@@ -0,0 +1,17 @@
+import type { PropsWithChildren } from 'react';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { ThemeProvider as LegacyThemeProvider } from '@mui/styles';
+
+const muiTheme = createTheme();
+
+export function AppProviders({ children }: PropsWithChildren) {
+  return (
+    <ThemeProvider theme={muiTheme}>
+      <LegacyThemeProvider theme={muiTheme}>
+        <LocalizationProvider dateAdapter={AdapterDayjs}>{children}</LocalizationProvider>
+      </LegacyThemeProvider>
+    </ThemeProvider>
+  );
+}

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

@@ -5,12 +5,12 @@ import { PortalApp } from './PortalApp';
 function AppSelector() {
   return (
     <Routes>
-      <Route path='/portal' element={<PortalApp />} />
-      <Route path='/portal.html' element={<PortalApp />} />
-      <Route path='/embedded' element={<MashupApp />} />
-      <Route path='/embedded.html' element={<MashupApp />} />
-      <Route path='/' element={<MashupApp />} />
-      <Route path='*' element={<MashupApp />} />
+      <Route path="/portal" element={<PortalApp />} />
+      <Route path="/portal.html" element={<PortalApp />} />
+      <Route path="/embedded" element={<MashupApp />} />
+      <Route path="/embedded.html" element={<MashupApp />} />
+      <Route path="/" element={<MashupApp />} />
+      <Route path="*" element={<MashupApp />} />
     </Routes>
   );
 }

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

@@ -18,9 +18,7 @@ function FallbackComponent({
   const displayProps = Object.fromEntries(
     Object.entries(props).filter(
       ([k]) =>
-        !['getPConnect', 'pConnect', 'fallback', 'componentRegistry'].includes(
-          k,
-        ) && typeof props[k] !== 'function',
+        !['getPConnect', 'pConnect', 'fallback', 'componentRegistry'].includes(k) && typeof props[k] !== 'function',
     ),
   );
 
@@ -28,9 +26,7 @@ function FallbackComponent({
     <div style={styles.fallback.container}>
       <div style={styles.fallback.label}>{componentName ?? 'Unknown'}</div>
       {Object.keys(displayProps).length > 0 && (
-        <pre style={styles.fallback.props}>
-          {JSON.stringify(displayProps, null, 2)}
-        </pre>
+        <pre style={styles.fallback.props}>{JSON.stringify(displayProps, null, 2)}</pre>
       )}
       {children && <div style={styles.fallback.children}>{children}</div>}
     </div>

package/templates/react-sdk-reference/src/MashupApp.styles.ts

@@ -1,6 +1,9 @@
 import type { CSSProperties } from 'react';
 
+/* ─── Airbnb-inspired service portal styles ──────────────────────── */
+
 export const styles = {
+  /* Fallback component (unchanged) */
   fallback: {
     container: {
       border: '1px solid #ddd',
@@ -33,73 +36,298 @@ export const styles = {
       paddingLeft: 12,
     } satisfies CSSProperties,
   },
+
+  /* Pega form root wrapper */
   root: {
     padding: 16,
     fontFamily: 'system-ui, sans-serif',
   } satisfies CSSProperties,
+
+  /* ── App shell ─────────────────────────────────────────────────── */
   app: {
     container: {
-      fontFamily: 'system-ui, sans-serif',
+      fontFamily: 'Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif',
+      color: '#222222',
+      minHeight: '100vh',
+      background: '#ffffff',
     } satisfies CSSProperties,
-    header: {
-      padding: '1rem 1.5rem',
-      background: '#1e293b',
-      color: '#fff',
+
+    /* ── Nav bar ────────────────────────────────────────────────── */
+    nav: {
       display: 'flex',
-      justifyContent: 'space-between',
       alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: '0 24px',
+      height: 64,
+      borderBottom: '1px solid #DDDDDD',
+      background: '#ffffff',
+      position: 'sticky' as const,
+      top: 0,
+      zIndex: 100,
     } satisfies CSSProperties,
-    headerTitle: {
+    navLogo: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
+      fontSize: 18,
       fontWeight: 600,
+      color: '#2563eb',
+      textDecoration: 'none',
+      cursor: 'pointer',
+    } satisfies CSSProperties,
+    navLogoIcon: {
+      fontSize: 24,
+    } satisfies CSSProperties,
+    navRight: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 12,
     } satisfies CSSProperties,
     logoutButton: {
-      background: 'transparent',
-      border: '1px solid #64748b',
-      color: '#94a3b8',
-      padding: '0.375rem 0.75rem',
-      borderRadius: '0.375rem',
+      background: '#ffffff',
+      border: '1px solid #DDDDDD',
+      color: '#222222',
+      padding: '8px 16px',
+      borderRadius: 24,
       cursor: 'pointer',
-      fontSize: '0.8125rem',
+      fontSize: 14,
+      fontWeight: 500,
+      transition: 'box-shadow 0.2s',
+    } satisfies CSSProperties,
+
+    /* ── Home screen ────────────────────────────────────────────── */
+    homeContent: {
+      maxWidth: 1080,
+      margin: '0 auto',
+      padding: '48px 24px',
+    } satisfies CSSProperties,
+    homeTitle: {
+      fontSize: 32,
+      fontWeight: 700,
+      marginBottom: 8,
+      color: '#222222',
+    } satisfies CSSProperties,
+    homeSubtitle: {
+      fontSize: 18,
+      color: '#717171',
+      marginBottom: 40,
+    } satisfies CSSProperties,
+
+    /* ── Card grid ──────────────────────────────────────────────── */
+    cardGrid: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(3, 1fr)',
+      gap: 24,
+      marginBottom: 56,
+    } satisfies CSSProperties,
+    card: {
+      border: '1px solid #DDDDDD',
+      borderRadius: 12,
+      padding: 24,
+      cursor: 'pointer',
+      transition: 'transform 0.2s, box-shadow 0.2s',
+      background: '#ffffff',
+      display: 'flex',
+      flexDirection: 'column' as const,
+      gap: 12,
+      position: 'relative' as const,
+      overflow: 'hidden',
+    } satisfies CSSProperties,
+    cardActive: {
+      border: '1px solid #DDDDDD',
+      borderRadius: 12,
+      padding: 24,
+      cursor: 'pointer',
+      transition: 'transform 0.2s, box-shadow 0.2s',
+      background: '#ffffff',
+      display: 'flex',
+      flexDirection: 'column' as const,
+      gap: 12,
+      position: 'relative' as const,
+      overflow: 'hidden',
+      boxShadow: '0 6px 16px rgba(0,0,0,0.12)',
+    } satisfies CSSProperties,
+    cardDisabled: {
+      border: '1px solid #EBEBEB',
+      borderRadius: 12,
+      padding: 24,
+      cursor: 'default',
+      background: '#ffffff',
+      display: 'flex',
+      flexDirection: 'column' as const,
+      gap: 12,
+      position: 'relative' as const,
+      overflow: 'hidden',
+      opacity: 0.55,
+    } satisfies CSSProperties,
+    cardIcon: {
+      width: 48,
+      height: 48,
+      borderRadius: 12,
+      background: '#F7F7F7',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: 24,
+    } satisfies CSSProperties,
+    cardIconActive: {
+      width: 48,
+      height: 48,
+      borderRadius: 12,
+      background: '#EFF6FF',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: 24,
     } satisfies CSSProperties,
-    content: {
-      maxWidth: 720,
-      margin: '2rem auto',
-      padding: '0 1.5rem',
+    cardTitle: {
+      fontSize: 16,
+      fontWeight: 600,
+      color: '#222222',
     } satisfies CSSProperties,
-    welcome: {
-      textAlign: 'center',
-      marginBottom: '2rem',
+    cardDesc: {
+      fontSize: 14,
+      color: '#717171',
+      lineHeight: 1.4,
     } satisfies CSSProperties,
-    welcomeHeading: {
-      fontSize: '1.5rem',
+    cardAction: {
+      marginTop: 'auto',
+      fontSize: 14,
       fontWeight: 600,
-      marginBottom: '0.75rem',
+      color: '#2563eb',
+    } satisfies CSSProperties,
+    comingSoonBadge: {
+      display: 'inline-block',
+      marginTop: 'auto',
+      background: '#F7F7F7',
+      color: '#717171',
+      fontSize: 12,
+      fontWeight: 600,
+      padding: '4px 12px',
+      borderRadius: 20,
+      width: 'fit-content',
+    } satisfies CSSProperties,
+
+    /* ── Trust bar ──────────────────────────────────────────────── */
+    trustBar: {
+      display: 'flex',
+      justifyContent: 'center',
+      gap: 32,
+      padding: '24px 0',
+      borderTop: '1px solid #EBEBEB',
+      color: '#717171',
+      fontSize: 14,
+    } satisfies CSSProperties,
+    trustItem: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
     } satisfies CSSProperties,
-    welcomeText: {
-      color: '#64748b',
-      marginBottom: '1.5rem',
+
+    /* ── Form screen ────────────────────────────────────────────── */
+    formContent: {
+      maxWidth: 1080,
+      margin: '0 auto',
+      padding: '0 24px 48px',
     } satisfies CSSProperties,
-    createButton: {
-      background: '#2563eb',
-      color: '#fff',
+    backButton: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 6,
+      background: 'none',
       border: 'none',
-      padding: '0.625rem 1.5rem',
-      borderRadius: '0.375rem',
-      fontSize: '0.9375rem',
+      color: '#222222',
+      fontSize: 14,
       fontWeight: 500,
       cursor: 'pointer',
+      padding: '20px 0',
+      textDecoration: 'underline',
     } satisfies CSSProperties,
-    formArea: {
-      background: '#fff',
-      border: '1px solid #e2e8f0',
-      borderRadius: '0.75rem',
-      padding: '1.5rem',
-      boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
+
+    /* Badge pills */
+    heroBadge: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 6,
+      fontSize: 14,
+      color: '#222222',
+      background: 'rgba(255,255,255,0.7)',
+      padding: '6px 14px',
+      borderRadius: 20,
+      fontWeight: 500,
+    } satisfies CSSProperties,
+
+    /* ── Two-column form layout ─────────────────────────────── */
+    twoCol: {
+      display: 'grid',
+      gridTemplateColumns: '40% 1fr',
+      gap: 32,
+      alignItems: 'start',
     } satisfies CSSProperties,
+    leftPanel: {
+      position: 'sticky' as const,
+      top: 88,
+    } satisfies CSSProperties,
+    leftPanelInner: {
+      background: 'linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 50%, #F0F0FF 100%)',
+      borderRadius: 16,
+      padding: '32px',
+    } satisfies CSSProperties,
+    leftTitle: {
+      fontSize: 24,
+      fontWeight: 700,
+      color: '#222222',
+      marginBottom: 4,
+    } satisfies CSSProperties,
+    leftSubtitle: {
+      fontSize: 15,
+      color: '#717171',
+      marginBottom: 20,
+    } satisfies CSSProperties,
+    leftBadges: {
+      display: 'flex',
+      flexDirection: 'column' as const,
+      gap: 8,
+      marginBottom: 20,
+    } satisfies CSSProperties,
+    leftDivider: {
+      height: 1,
+      background: 'rgba(0,0,0,0.08)',
+      margin: '20px 0',
+    } satisfies CSSProperties,
+    leftChecks: {
+      display: 'flex',
+      flexDirection: 'column' as const,
+      gap: 10,
+    } satisfies CSSProperties,
+
+    /* Form card */
+    formCard: {
+      background: '#ffffff',
+      border: '1px solid #DDDDDD',
+      borderRadius: 12,
+      padding: '32px',
+      boxShadow: '0 6px 16px rgba(0,0,0,0.12)',
+    } satisfies CSSProperties,
+    footerItem: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
+      fontSize: 14,
+      color: '#717171',
+    } satisfies CSSProperties,
+    footerCheck: {
+      color: '#008A05',
+      fontWeight: 700,
+      fontSize: 16,
+    } satisfies CSSProperties,
+
+    /* Loading */
     loading: {
-      textAlign: 'center',
-      padding: '2rem',
-      color: '#64748b',
+      textAlign: 'center' as const,
+      padding: '3rem',
+      color: '#717171',
+      fontSize: 16,
     } satisfies CSSProperties,
   },
 };