@pega/sdk 0.0.1

package/templates/react-sdk-reference/src/components/component-map.ts

@@ -0,0 +1,255 @@
+import { sdkComponents } from '@pega/sdk-react';
+import type { ComponentRegistry } from '@pega/sdk-core';
+
+// Fields
+import AutoComplete from './field/AutoComplete';
+import CancelAlert from './field/CancelAlert';
+import Checkbox from './field/Checkbox';
+import Currency from './field/Currency';
+import DateField from './field/Date';
+import DateTime from './field/DateTime';
+import Decimal from './field/Decimal';
+import Dropdown from './field/Dropdown';
+import Email from './field/Email/Email';
+import Group from './field/Group';
+import Integer from './field/Integer';
+import Location from './field/Location';
+import Multiselect from './field/Multiselect/Multiselect';
+import ObjectReference from './field/ObjectReference';
+import Percentage from './field/Percentage';
+import Phone from './field/Phone/Phone';
+import RadioButtons from './field/RadioButtons';
+import RichText from './field/RichText';
+import ScalarList from './field/ScalarList';
+import SelectableCard from './field/SelectableCard';
+import SemanticLink from './field/SemanticLink';
+import TextArea from './field/TextArea';
+import TextContent from './field/TextContent';
+import TextInput from './field/TextInput/TextInput';
+import Time from './field/Time';
+import URLComponent from './field/URL';
+import UserReference from './field/UserReference';
+
+// Templates
+import AdvancedSearch from './template/AdvancedSearch';
+import AppShell from './template/AppShell/AppShell';
+import BannerPage from './template/BannerPage';
+import CaseSummary from './template/CaseSummary';
+import CaseView from './template/CaseView';
+import CaseViewActionsMenu from './template/CaseViewActionsMenu';
+import Confirmation from './template/Confirmation';
+import DataReference from './template/DataReference';
+import DefaultForm from './template/DefaultForm';
+import DefaultPage from './template/DefaultPage';
+import Details from './template/Details/Details';
+import DetailsSubTabs from './template/Details/DetailsSubTabs';
+import DetailsThreeColumn from './template/Details/DetailsThreeColumn';
+import DetailsTwoColumn from './template/Details/DetailsTwoColumn/DetailsTwoColumn';
+import DynamicTabs from './template/Details/DynamicTabs';
+import FieldGroupTemplate from './template/FieldGroupTemplate';
+import HierarchicalForm from './template/HierarchicalForm';
+import InlineDashboard from './template/InlineDashboard';
+import InlineDashboardPage from './template/InlineDashboardPage/InlineDashboardPage';
+import ListPage from './template/ListPage/ListPage';
+import ListView from './template/ListView';
+import MultiReferenceReadOnly from './template/MultiReferenceReadOnly';
+import NarrowWide from './template/NarrowWide/NarrowWide';
+import NarrowWideDetails from './template/NarrowWide/NarrowWideDetails';
+import NarrowWideForm from './template/NarrowWide/NarrowWideForm';
+import NarrowWidePage from './template/NarrowWide/NarrowWidePage';
+import ObjectPage from './template/ObjectPage';
+import OneColumn from './template/OneColumn/OneColumn';
+import OneColumnPage from './template/OneColumn/OneColumnPage';
+import OneColumnTab from './template/OneColumn/OneColumnTab';
+import PromotedFilters from './template/PromotedFilters';
+import SearchForm from './template/DataReference/SearchForm';
+import SearchGroups from './template/AdvancedSearch/SearchGroups';
+import SelfServiceCaseView from './template/SelfServiceCaseView';
+import SimpleTable from './template/SimpleTable/SimpleTable';
+import SimpleTableManual from './template/SimpleTable/SimpleTableManual';
+import SimpleTableSelect from './template/SimpleTable/SimpleTableSelect';
+import SimpleTableSelectReadonly from './template/SimpleTable/SimpleTableSelectReadonly';
+import SingleReferenceReadOnly from './template/SingleReferenceReadOnly';
+import SubTabs from './template/SubTabs';
+import TwoColumn from './template/TwoColumn/TwoColumn';
+import TwoColumnPage from './template/TwoColumn/TwoColumnPage';
+import TwoColumnTab from './template/TwoColumn/TwoColumnTab';
+import WideNarrow from './template/WideNarrow/WideNarrow';
+import WideNarrowDetails from './template/WideNarrow/WideNarrowDetails';
+import WideNarrowForm from './template/WideNarrow/WideNarrowForm';
+import WideNarrowPage from './template/WideNarrow/WideNarrowPage';
+import WssNavBar from './template/WssNavBar/WssNavBar';
+
+// Widgets
+import AppAnnouncement from './widget/AppAnnouncement';
+import Attachment from './widget/Attachment';
+import CaseHistory from './widget/CaseHistory';
+import ActionButtonsForFileUtil from './widget/FileUtility/ActionButtonsForFileUtil';
+import FileUtility from './widget/FileUtility/FileUtility';
+import Followers from './widget/Followers';
+import QuickCreate from './widget/QuickCreate';
+import SummaryItem from './widget/SummaryItem';
+import SummaryList from './widget/SummaryList';
+import ToDo from './widget/ToDo';
+
+// Design System Extension
+import AlertBanner from './designSystemExtension/AlertBanner';
+import Banner from './designSystemExtension/Banner';
+import CaseSummaryFields from './designSystemExtension/CaseSummaryFields';
+import DetailsFields from './designSystemExtension/DetailsFields';
+import FieldGroup from './designSystemExtension/FieldGroup';
+import FieldGroupList from './designSystemExtension/FieldGroupList';
+import FieldValueList from './designSystemExtension/FieldValueList';
+import Operator from './designSystemExtension/Operator';
+import Pulse from './designSystemExtension/Pulse';
+import RichTextEditor from './designSystemExtension/RichTextEditor';
+import WssQuickCreate from './designSystemExtension/WssQuickCreate';
+
+// Infra (provided by @pega/sdk-react)
+import {
+  ActionButtons,
+  DeferLoad,
+  NavBar,
+  Stages,
+  DashboardFilter,
+  VerticalTabs,
+  LeftAlignVerticalTabs,
+} from '@pega/sdk-react';
+
+/**
+ * Returns a map of Pega component names → sample React components.
+ */
+function getSampleComponentMap(): Record<
+  string,
+  React.ComponentType<Record<string, unknown>>
+> {
+  return {
+    // Infrastructure from sdk-react (includes View, Region, Reference,
+    // RootContainer, FlowContainer, ViewContainer, Assignment, AssignmentCard, etc.)
+    ...sdkComponents,
+
+    // Fields
+    AutoComplete,
+    CancelAlert,
+    Checkbox,
+    Currency,
+    Date: DateField,
+    DateTime,
+    Decimal,
+    Dropdown,
+    Email,
+    Group,
+    Integer,
+    Location,
+    Multiselect,
+    ObjectReference,
+    Percentage,
+    Phone,
+    RadioButtons,
+    RichText,
+    ScalarList,
+    SelectableCard,
+    SemanticLink,
+    TextArea,
+    TextContent,
+    TextInput,
+    Time,
+    URL: URLComponent,
+    UserReference,
+
+    // Templates
+    AdvancedSearch,
+    AppShell,
+    BannerPage,
+    CaseSummary,
+    CaseView,
+    CaseViewActionsMenu,
+    Confirmation,
+    DataReference,
+    DefaultForm,
+    DefaultPage,
+    Details,
+    DetailsSubTabs,
+    DetailsThreeColumn,
+    DetailsTwoColumn,
+    DynamicTabs,
+    FieldGroupTemplate,
+    HierarchicalForm,
+    InlineDashboard,
+    InlineDashboardPage,
+    ListPage,
+    ListView,
+    MultiReferenceReadOnly,
+    NarrowWide,
+    NarrowWideDetails,
+    NarrowWideForm,
+    NarrowWidePage,
+    ObjectPage,
+    OneColumn,
+    OneColumnPage,
+    OneColumnTab,
+    PromotedFilters,
+    SearchForm,
+    SearchGroups,
+    SelfServiceCaseView,
+    SimpleTable,
+    SimpleTableManual,
+    SimpleTableSelect,
+    SimpleTableSelectReadonly,
+    SingleReferenceReadOnly,
+    SubTabs,
+    TwoColumn,
+    TwoColumnPage,
+    TwoColumnTab,
+    WideNarrow,
+    WideNarrowDetails,
+    WideNarrowForm,
+    WideNarrowPage,
+    WssNavBar,
+
+    // Widgets
+    ActionButtonsForFileUtil,
+    AppAnnouncement,
+    Attachment,
+    CaseHistory,
+    FileUtility,
+    Followers,
+    QuickCreate,
+    SummaryItem,
+    SummaryList,
+    Todo: ToDo,
+
+    // Design System Extension
+    AlertBanner,
+    Banner,
+    CaseSummaryFields,
+    DetailsFields,
+    FieldGroup,
+    FieldGroupList,
+    FieldValueList,
+    Operator,
+    Pulse,
+    RichTextEditor,
+    WssQuickCreate,
+
+    // Infra (sample-specific)
+    ActionButtons,
+    DeferLoad,
+    DashboardFilter,
+    LeftAlignVerticalTabs,
+    NavBar,
+    Stages,
+    VerticalTabs,
+  } as unknown as Record<string, React.ComponentType<Record<string, unknown>>>;
+}
+
+function registerSampleComponents(
+  registry: ComponentRegistry<React.ComponentType<Record<string, unknown>>>,
+): void {
+  const map = getSampleComponentMap();
+  for (const [name, component] of Object.entries(map)) {
+    registry.register(name, component);
+  }
+}
+
+export { getSampleComponentMap, registerSampleComponents };

package/templates/react-sdk-reference/src/components/designSystemExtension/AlertBanner/AlertBanner.css

@@ -0,0 +1,46 @@
+.alert-banner-title {
+  font-weight: 700;
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.alert-banner-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.2rem;
+  border-radius: 999px;
+  font-size: 0.6rem;
+  font-weight: 700;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.alert-banner-badge--urgent {
+  background: var(--app-error-dark-color);
+  color: #fff;
+}
+
+.alert-banner-badge--warning {
+  background: var(--app-warning-color-dark);
+  color: #fff;
+}
+
+.alert-banner-badge--success {
+  background: var(--stepper-completed-bg-color);
+  color: #fff;
+}
+
+.alert-banner-badge--info {
+  background: var(--link-button-color);
+  color: #fff;
+}
+
+.alert-banner-list {
+  margin: 0;
+  padding-left: 1.25rem;
+}

package/templates/react-sdk-reference/src/components/designSystemExtension/AlertBanner/AlertBanner.tsx

@@ -0,0 +1,91 @@
+import { Alert, AlertTitle } from '@mui/material';
+import './AlertBanner.css';
+
+// AlertBanner is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface AlertBannerProps {
+  id: string;
+  variant: string;
+  messages: string[];
+  onDismiss?: any;
+}
+
+const VARIANT_MAP: Record<string, { severity: string; label: string }> = {
+  urgent: { severity: 'error', label: 'Error' },
+  warning: { severity: 'warning', label: 'Warning' },
+  success: { severity: 'success', label: 'Success' },
+  info: { severity: 'info', label: 'Info' },
+};
+
+function renderMessage(
+  message: string | { label?: string; description?: string },
+) {
+  if (typeof message === 'object' && message !== null) {
+    const label = message.label || '';
+    const description = message.description || '';
+    if (label) {
+      return (
+        <>
+          <strong>{label}</strong> {description}
+        </>
+      );
+    }
+    return <>{description}</>;
+  }
+  const colonIndex = message.indexOf(':');
+  if (colonIndex === -1) return message;
+  return (
+    <>
+      <strong>{message.slice(0, colonIndex + 1)}</strong>
+      {message.slice(colonIndex + 1)}
+    </>
+  );
+}
+
+export default function AlertBanner({
+  id,
+  variant,
+  messages,
+  onDismiss,
+}: AlertBannerProps) {
+  const { severity, label } = VARIANT_MAP[variant] ?? VARIANT_MAP.info;
+  const isMultiple = messages.length > 1;
+
+  return (
+    <div id={id}>
+      <Alert
+        variant='outlined'
+        severity={severity as any}
+        {...(onDismiss && { onClose: onDismiss })}
+      >
+        {isMultiple && (
+          <AlertTitle className='alert-banner-title'>
+            {label}
+            <span
+              className={`alert-banner-badge alert-banner-badge--${variant}`}
+            >
+              {messages.length}
+            </span>
+          </AlertTitle>
+        )}
+        {isMultiple ? (
+          <ul className='alert-banner-list'>
+            {messages.map((message, index) => (
+              <li
+                key={
+                  typeof message === 'string'
+                    ? message
+                    : `${message.label}-${index}`
+                }
+              >
+                {renderMessage(message)}
+              </li>
+            ))}
+          </ul>
+        ) : (
+          renderMessage(messages[0])
+        )}
+      </Alert>
+    </div>
+  );
+}

package/templates/react-sdk-reference/src/components/designSystemExtension/AlertBanner/index.tsx

@@ -0,0 +1 @@
+export { default } from './AlertBanner';

package/templates/react-sdk-reference/src/components/designSystemExtension/Banner/Banner.css

@@ -0,0 +1,39 @@
+.background-image-style {
+  margin-left: -16px;
+  margin-right: -16px;
+  height: calc(19rem);
+  background-size: cover;
+  background-position: center center;
+}
+
+.background-style {
+  background-color: transparent;
+  color: var(--banner-text-color);
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: calc(0.5rem);
+}
+
+.title {
+  margin: 0rem;
+  font-size: 1.728rem;
+  font-weight: 600;
+}
+
+.message {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+.banner-layout {
+  padding: 1rem;
+}

package/templates/react-sdk-reference/src/components/designSystemExtension/Banner/Banner.tsx

@@ -0,0 +1,53 @@
+import Grid from '@mui/material/Grid';
+import './Banner.css';
+
+// AlertBanner is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+
+interface BannerProps {
+  // If any, enter additional props that only exist on this component
+  a: any;
+  b: any;
+  banner: {
+    variant: any;
+    backgroundColor: any;
+    title: any;
+    message: any;
+    backgroundImage: any;
+    tintImage: any;
+  };
+  variant: any;
+}
+
+export default function Banner(props: BannerProps) {
+  const { a, b, banner, variant } = props;
+  const { title, message, backgroundImage } = banner;
+  const variantMap = {
+    'two-column': [6, 6],
+    'narrow-wide': [4, 8],
+    'wide-narrow': [8, 4]
+  };
+  return (
+    <div style={{ marginBottom: '2rem' }}>
+      <div className='background-image-style' style={{ backgroundImage: `url(${backgroundImage})` }}>
+        <div className='background-style content'>
+          <div>
+            <h1 className='title'>{title}</h1>
+            <p className='message'>{message}</p>
+          </div>
+        </div>
+      </div>
+      <Grid container size={12} className='banner-layout' spacing={1}>
+        <Grid
+          size={{ xs: variantMap[variant][0] }}
+          style={{ padding: '1rem', backgroundColor: 'var(--app-form-bg-color)', borderRadius: '16px', height: 'fit-content' }}
+        >
+          {a}
+        </Grid>
+        <Grid size={{ xs: variantMap[variant][1] }} style={{ padding: '0rem 1rem' }}>
+          {b}
+        </Grid>
+      </Grid>
+    </div>
+  );
+}

package/templates/react-sdk-reference/src/components/designSystemExtension/Banner/index.tsx

@@ -0,0 +1 @@
+export { default } from './Banner';

package/templates/react-sdk-reference/src/components/designSystemExtension/CaseSummaryFields/CaseSummaryFields.css

@@ -0,0 +1,16 @@
+.psdk-csf-status-style {
+  /* background-color: #e9eef3;
+  border-radius: calc(0.25 * 0.5rem);
+  color: #4c5a67; */
+  display: inline-block;
+  font-size: 0.75rem;
+  font-weight: bold;
+  line-height: calc(0.5rem * 2.5);
+  height: calc(0.5rem * 2.5);
+  text-transform: uppercase;
+}
+
+.psdk-case-summary-fields {
+  padding: calc(2 * 0.5rem);
+  grid-row-gap: calc(2 * 0.5rem);
+}