@pega/sdk 0.0.1

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

@@ -0,0 +1,105 @@
+import type { CSSProperties } from 'react';
+
+export const styles = {
+  fallback: {
+    container: {
+      border: '1px solid #ddd',
+      borderRadius: 4,
+      margin: 4,
+      padding: 8,
+      fontSize: 13,
+      fontFamily: 'system-ui, sans-serif',
+    } satisfies CSSProperties,
+    label: {
+      background: '#f0f4ff',
+      padding: '4px 8px',
+      borderRadius: 3,
+      fontSize: 12,
+      fontWeight: 600,
+      color: '#1a56db',
+      marginBottom: 4,
+    } satisfies CSSProperties,
+    props: {
+      fontSize: 11,
+      color: '#555',
+      margin: '4px 0',
+      maxHeight: 100,
+      overflow: 'auto',
+      background: '#fafafa',
+      padding: 4,
+      borderRadius: 3,
+    } satisfies CSSProperties,
+    children: {
+      paddingLeft: 12,
+    } satisfies CSSProperties,
+  },
+  root: {
+    padding: 16,
+    fontFamily: 'system-ui, sans-serif',
+  } satisfies CSSProperties,
+  app: {
+    container: {
+      fontFamily: 'system-ui, sans-serif',
+    } satisfies CSSProperties,
+    header: {
+      padding: '1rem 1.5rem',
+      background: '#1e293b',
+      color: '#fff',
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    } satisfies CSSProperties,
+    headerTitle: {
+      fontWeight: 600,
+    } satisfies CSSProperties,
+    logoutButton: {
+      background: 'transparent',
+      border: '1px solid #64748b',
+      color: '#94a3b8',
+      padding: '0.375rem 0.75rem',
+      borderRadius: '0.375rem',
+      cursor: 'pointer',
+      fontSize: '0.8125rem',
+    } satisfies CSSProperties,
+    content: {
+      maxWidth: 720,
+      margin: '2rem auto',
+      padding: '0 1.5rem',
+    } satisfies CSSProperties,
+    welcome: {
+      textAlign: 'center',
+      marginBottom: '2rem',
+    } satisfies CSSProperties,
+    welcomeHeading: {
+      fontSize: '1.5rem',
+      fontWeight: 600,
+      marginBottom: '0.75rem',
+    } satisfies CSSProperties,
+    welcomeText: {
+      color: '#64748b',
+      marginBottom: '1.5rem',
+    } satisfies CSSProperties,
+    createButton: {
+      background: '#2563eb',
+      color: '#fff',
+      border: 'none',
+      padding: '0.625rem 1.5rem',
+      borderRadius: '0.375rem',
+      fontSize: '0.9375rem',
+      fontWeight: 500,
+      cursor: 'pointer',
+    } 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)',
+    } satisfies CSSProperties,
+    loading: {
+      textAlign: 'center',
+      padding: '2rem',
+      color: '#64748b',
+    } satisfies CSSProperties,
+  },
+};

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

@@ -0,0 +1,254 @@
+/**
+ * React Mashup sample — demonstrates @pega/sdk-react
+ * in embedded/mashup mode with ZERO dependency on @pega/react-sdk-components.
+ *
+ * Flow:
+ *   1. Auth via AuthClient → @pega/auth
+ *   2. Bootstrap via BootstrapClient.loadMashup()
+ *   3. Show "Create Case" button
+ *   4. On click → PCore.getMashupApi().createCase()
+ *   5. PConnectComponent renders the case form via registered sample components
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+// ── React adapter (includes sdk-core re-exports)  ───────────────────────────────────────
+import {
+  PConnectComponent,
+  PegaStoreContext,
+  registerComponentCreator,
+} from '@pega/sdk-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';
+
+// ── Sample components (local to this app) ───────────────────────────────────────────────────────
+import { registerSampleComponents } from './components/component-map';
+
+// ── @pega/auth for SDK config access ────────────────────────────────────────
+import { getSdkConfig } from '@pega/auth/lib/sdk-auth-manager';
+import { AuthClient } from '@pega/auth';
+
+import { styles } from './MashupApp.styles';
+import { FallbackComponent } from './FallbackComponent';
+
+// ─── Create component registry + register sample components ─────────────────
+// const registry =
+//   createComponentRegistry<React.ComponentType<Record<string, unknown>>>();
+// registerSampleComponents(registry);
+
+// ─── Root Component ─────────────────────────────────────────────────────────
+const muiTheme = createTheme();
+
+function RootComponent({
+  renderProps,
+  registry,
+}: {
+  renderProps: Record<string, unknown>;
+  registry: any;
+}) {
+  const contextValue = useMemo(() => ({ store: PCore.getStore() }), []);
+
+  const getPConnect = renderProps.getPConnect as () => any;
+
+  return (
+    <ThemeProvider theme={muiTheme}>
+      <LegacyThemeProvider theme={muiTheme}>
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+          <PegaStoreContext.Provider value={contextValue}>
+            <div style={styles.root}>
+              <PConnectComponent
+                getPConnect={getPConnect}
+                componentRegistry={registry}
+                fallback={FallbackComponent}
+              />
+            </div>
+          </PegaStoreContext.Provider>
+        </LocalizationProvider>
+      </LegacyThemeProvider>
+    </ThemeProvider>
+  );
+}
+
+// ─── Mashup App ─────────────────────────────────────────────────────────────
+function MashupApp() {
+  const [isPegaReady, setIsPegaReady] = useState(false);
+  const [rootProps, setRootProps] = useState<Record<string, unknown> | null>(
+    null,
+  );
+  const [showForm, setShowForm] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const authClientRef = useRef<AuthClient | null>(null);
+
+  let registry;
+
+  // ── 1. Auth + Bootstrap mashup on mount ─────────────────────────────────
+  useEffect(() => {
+    let cancelled = false;
+
+    async function bootstrap() {
+      const auth = new AuthClient();
+      authClientRef.current = auth;
+
+      const locale = sessionStorage.getItem('rsdk_locale') || undefined;
+      await auth.login({ appName: 'embedded', mainRedirect: true, locale });
+      if (cancelled) return;
+
+      sessionStorage.setItem('isLoggedIn', 'true');
+
+      const {
+        BootstrapClient,
+        compareSdkPCoreVersions,
+        createComponentRegistry,
+        // @ts-ignore
+      } = PCore.getInitialiser().getSdkCore();
+
+      // ─── Create component registry + register sample components ─────────────────
+      registry = createComponentRegistry();
+      registerSampleComponents(registry);
+
+      // Register component creator so PCore uses our bridge
+      registerComponentCreator(registry, FallbackComponent);
+
+      const client = new BootstrapClient({
+        componentRegistry: registry,
+      });
+
+      const result = await client.loadMashup({
+        onPCoreReady: () => {
+          compareSdkPCoreVersions();
+        },
+      });
+
+      if (cancelled) return;
+
+      setRootProps(result.rootProps);
+      setIsPegaReady(true);
+    }
+
+    bootstrap().catch(console.error);
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // ── 2. Subscribe to PCore lifecycle events ──────────────────────────────
+  useEffect(() => {
+    if (!isPegaReady) return;
+
+    const cancelId = 'mashupApp-cancel';
+    const doneId = 'mashupApp-assignmentDone';
+
+    PCore.getPubSubUtils().subscribe(
+      PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL,
+      () => setShowForm(false),
+      cancelId,
+    );
+
+    PCore.getPubSubUtils().subscribe(
+      PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS
+        .END_OF_ASSIGNMENT_PROCESSING,
+      () => setShowForm(false),
+      doneId,
+    );
+
+    return () => {
+      PCore.getPubSubUtils().unsubscribe(
+        PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL,
+        cancelId,
+      );
+      PCore.getPubSubUtils().unsubscribe(
+        PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS
+          .END_OF_ASSIGNMENT_PROCESSING,
+        doneId,
+      );
+    };
+  }, [isPegaReady]);
+
+  // ── 3. Create case via MashupApi ────────────────────────────────────────
+  const handleCreateCase = useCallback(async () => {
+    if (!isPegaReady) return;
+
+    setLoading(true);
+    setShowForm(true);
+
+    try {
+      const sdkConfig = await getSdkConfig();
+      const mashupCaseType = (
+        sdkConfig as Record<string, Record<string, unknown>>
+      ).serverConfig.appMashupCaseType as string;
+
+      await PCore.getMashupApi().createCase(
+        mashupCaseType,
+        PCore.getConstants().APP.APP,
+        { pageName: 'pyEmbedAssignment', startingFields: {} },
+      );
+    } catch (err) {
+      console.error('Error creating case:', err);
+      setShowForm(false);
+    } finally {
+      setLoading(false);
+    }
+  }, [isPegaReady]);
+
+  // ── Render ──────────────────────────────────────────────────────────────
+  if (!isPegaReady) {
+    return (
+      <div className='loading-container'>
+        <span className='loading-text'>Authenticating and loading Pega...</span>
+      </div>
+    );
+  }
+
+  return (
+    <div id='pega-root' style={styles.app.container}>
+      {/* Header */}
+      <div style={styles.app.header}>
+        <span style={styles.app.headerTitle}>
+          Pega SDK — React Mashup Sample
+        </span>
+        <button
+          type='button'
+          onClick={() => authClientRef.current?.logout()}
+          style={styles.app.logoutButton}
+        >
+          Logout
+        </button>
+      </div>
+
+      <div style={styles.app.content}>
+        {!showForm && (
+          <div style={styles.app.welcome}>
+            <h2 style={styles.app.welcomeHeading}>Ready to go</h2>
+            <p style={styles.app.welcomeText}>
+              Click below to create a new case and see the Pega form components
+              in action.
+            </p>
+            <button
+              type='button'
+              onClick={handleCreateCase}
+              style={styles.app.createButton}
+            >
+              Create Case
+            </button>
+          </div>
+        )}
+
+        {/* {showForm && ( */}
+        <div style={styles.app.formArea}>
+          {loading ? (
+            <div style={styles.app.loading}>Loading case form...</div>
+          ) : rootProps ? (
+            <RootComponent renderProps={rootProps} registry={registry} />
+          ) : null}
+        </div>
+        {/* )} */}
+      </div>
+    </div>
+  );
+}
+
+export { MashupApp };

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

@@ -0,0 +1,175 @@
+/**
+ * React Portal sample — demonstrates @pega/sdk-react
+ * in full portal mode.
+ *
+ * Flow:
+ *   1. Auth via AuthClient → @pega/auth (mainRedirect: true for portal)
+ *   2. Bootstrap via BootstrapClient.loadPortal()
+ *   3. PConnectComponent renders the full portal UI via registered sample components
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import {
+  PConnectComponent,
+  PegaStoreContext,
+  registerComponentCreator,
+} from '@pega/sdk-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';
+
+import { registerSampleComponents } from './components/component-map';
+import { getSdkConfig } from '@pega/auth/lib/sdk-auth-manager';
+import { AuthClient } from '@pega/auth';
+
+import { FallbackComponent } from './FallbackComponent';
+
+// ─── Root Component ─────────────────────────────────────────────────────────
+const muiTheme = createTheme();
+
+function RootComponent({
+  renderProps,
+  registry,
+}: {
+  renderProps: Record<string, unknown>;
+  registry: any;
+}) {
+  const contextValue = useMemo(() => ({ store: PCore.getStore() }), []);
+  const getPConnect = renderProps.getPConnect as () => any;
+
+  return (
+    <ThemeProvider theme={muiTheme}>
+      <LegacyThemeProvider theme={muiTheme}>
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+          <PegaStoreContext.Provider value={contextValue}>
+            <PConnectComponent
+              getPConnect={getPConnect}
+              componentRegistry={registry}
+              fallback={FallbackComponent}
+            />
+          </PegaStoreContext.Provider>
+        </LocalizationProvider>
+      </LegacyThemeProvider>
+    </ThemeProvider>
+  );
+}
+
+// ─── Portal App ─────────────────────────────────────────────────────────────
+function PortalApp() {
+  const [isPegaReady, setIsPegaReady] = useState(false);
+  const [rootProps, setRootProps] = useState<Record<string, unknown> | null>(
+    null,
+  );
+  const authClientRef = useRef<AuthClient | null>(null);
+  const registryRef = useRef<unknown>(null);
+
+  const { search } = useLocation();
+  const query = useMemo(() => new URLSearchParams(search), [search]);
+
+  // Capture query params into sessionStorage
+  useEffect(() => {
+    const portalParam = query.get('portal');
+    if (portalParam) {
+      sessionStorage.setItem('rsdk_portalName', portalParam);
+    }
+    const localeParam = query.get('locale');
+    if (localeParam) {
+      sessionStorage.setItem('rsdk_locale', localeParam);
+    }
+  }, [query]);
+
+  // ── Auth + Bootstrap portal on mount ─────────────────────────────────
+  useEffect(() => {
+    let cancelled = false;
+
+    async function bootstrap() {
+      const auth = new AuthClient();
+      authClientRef.current = auth;
+
+      const locale = sessionStorage.getItem('rsdk_locale') || undefined;
+      await auth.login({ appName: 'portal', mainRedirect: true, locale });
+      if (cancelled) return;
+
+      sessionStorage.setItem('isLoggedIn', 'true');
+
+      const {
+        BootstrapClient,
+        compareSdkPCoreVersions,
+        createComponentRegistry,
+        // @ts-ignore
+      } = PCore.getInitialiser().getSdkCore();
+
+      // Create component registry + register sample components
+      const registry = createComponentRegistry();
+      registerSampleComponents(registry);
+      registerComponentCreator(registry, FallbackComponent);
+      registryRef.current = registry;
+
+      // Determine which portal to load
+      const sdkConfig = (await getSdkConfig()) as Record<
+        string,
+        Record<string, unknown>
+      >;
+      const appPortal = sdkConfig.serverConfig.appPortal as string;
+      const excludePortals = (sdkConfig.serverConfig.excludePortals ??
+        []) as string[];
+
+      const queryPortal = sessionStorage.getItem('rsdk_portalName');
+      const portalName = queryPortal || appPortal || undefined;
+
+      const client = new BootstrapClient({
+        sdkConfig: {
+          serverConfig: { infinityRestServerUrl: '', appAlias: '' },
+          authConfig: { clientId: '' },
+        },
+        componentRegistry: registry,
+        targetId: 'pega-root',
+      });
+
+      console.log(
+        `Loading portal: ${portalName}, excluding portals: ${excludePortals}`,
+      );
+      const result = await client.loadPortal({
+        portalName,
+        excludePortals,
+        onPCoreReady: () => {
+          compareSdkPCoreVersions();
+        },
+      });
+
+      if (cancelled) return;
+
+      setRootProps(result.rootProps);
+      setIsPegaReady(true);
+    }
+
+    bootstrap().catch(console.error);
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // ── Render ──────────────────────────────────────────────────────────────
+  if (!isPegaReady || !rootProps) {
+    return (
+      <div className='loading-container'>
+        <span className='loading-text'>
+          Authenticating and loading portal...
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div id='pega-root'>
+      <RootComponent renderProps={rootProps} registry={registryRef.current} />
+    </div>
+  );
+}
+
+export { PortalApp };