@pega/sdk 0.0.1

package/templates/react-sdk-reference/src/components/template/MultiReferenceReadOnly/MultiReferenceReadOnly.tsx

@@ -0,0 +1,52 @@
+import type { PConnProps } from '@pega/sdk-react';
+
+interface MultiReferenceReadOnlyProps extends PConnProps {
+  config: { referenceList: any; readonlyContextList: any };
+  label: string;
+  hideLabel: boolean;
+  displayMode?: any;
+  displayAs?: any;
+}
+
+export default function MultiReferenceReadOnly(props: MultiReferenceReadOnlyProps) {
+  const { getPConnect, label = '', hideLabel = false, config, displayMode, displayAs } = props;
+  const { referenceList, readonlyContextList } = config;
+
+  if (['readonlyMulti', 'combobox', 'checkboxgroup'].includes(displayAs)) {
+    return getPConnect().createComponent({
+      type: 'SimpleTableSelectReadonly',
+      config: {
+        ...config,
+        displayMode,
+        label,
+        hideLabel,
+        displayAs
+      }
+    } as any);
+  }
+
+  // When referenceList does not contain selected values, it should be replaced with readonlyContextList while calling SimpleTableManual
+  let readonlyContextObject;
+  if (!PCore.getAnnotationUtils().isProperty(referenceList)) {
+    readonlyContextObject = {
+      referenceList: readonlyContextList
+    };
+  }
+
+  const component = getPConnect().createComponent(
+    {
+      type: 'SimpleTable',
+      config: {
+        ...config,
+        ...readonlyContextObject,
+        label,
+        hideLabel
+      }
+    },
+    '',
+    0,
+    {}
+  ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+
+  return <>{component}</>;
+}

package/templates/react-sdk-reference/src/components/template/MultiReferenceReadOnly/index.tsx

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

package/templates/react-sdk-reference/src/components/template/NarrowWide/NarrowWide/NarrowWide.css

@@ -0,0 +1,19 @@
+.psdk-narrow-wide-column {
+  display: flow-root;
+  height: 100%;
+}
+
+/* Create two equal columns that floats next to each other */
+.psdk-narrow-wide-column .psdk-narrow-column-column {
+  width: 30%;
+  float: left;
+  padding: 0rem 0.3125rem 0rem 0rem;
+  height: 100%;
+}
+
+.psdk-narrow-wide-column .psdk-wide-column-column {
+  width: 70%;
+  float: left;
+  padding: 0rem 0rem 0rem 0.3125rem;
+  height: 100%;
+}

package/templates/react-sdk-reference/src/components/template/NarrowWide/NarrowWide/NarrowWide.tsx

@@ -0,0 +1,37 @@
+import type { PropsWithChildren, ReactElement } from 'react';
+import type { PConnProps } from '@pega/sdk-react';
+import './NarrowWide.css';
+
+interface NarrowWideProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  a: any;
+  b: any;
+
+  title?: string;
+
+  cols?: string;
+
+  icon?: string;
+}
+
+export default function NarrowWide(props: PropsWithChildren<NarrowWideProps>) {
+  // const {a, b /*, cols, icon, title */ } = props;
+  const { a, b, children } = props;
+
+  return (
+    <>
+      {children && (children as ReactElement[]).length === 2 && (
+        <div className='psdk-narrow-wide-column'>
+          <div className='psdk-narrow-column-column'>{children[0]}</div>
+          <div className='psdk-wide-column-column'>{children[1]}</div>
+        </div>
+      )}
+      {a && b && (
+        <div className='psdk-narrow-wide-column'>
+          <div className='psdk-narrow-column-column'>{a}</div>
+          <div className='psdk-wide-column-column'>{b}</div>
+        </div>
+      )}
+    </>
+  );
+}

package/templates/react-sdk-reference/src/components/template/NarrowWide/NarrowWide/index.tsx

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

package/templates/react-sdk-reference/src/components/template/NarrowWide/NarrowWideDetails/NarrowWideDetails.tsx

@@ -0,0 +1,85 @@
+import { createElement } from 'react';
+import Grid, { type GridSize } from '@mui/material/Grid';
+
+import { getComponentFromRegistry, PConnectComponent } from '@pega/sdk-react';
+
+import type { PConnProps } from '@pega/sdk-react';
+
+interface NarrowWideDetailsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  showLabel?: boolean;
+  label: string;
+  showHighlightedData?: boolean;
+}
+
+const COLUMN_WIDTHS = [4, 8];
+
+export default function NarrowWideDetails(props: NarrowWideDetailsProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldGroup = getComponentFromRegistry('FieldGroup');
+
+  const {
+    label,
+    showLabel = true,
+    getPConnect,
+    showHighlightedData = false,
+  } = props;
+
+  // Get the inherited props from the parent to determine label settings
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
+
+  // Set display mode prop and re-create the children so this part of the dom tree renders
+  // in a readonly (display) mode instead of a editable
+  getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
+  getPConnect().setInheritedProp('readOnly', true);
+  const children = (getPConnect().getChildren() as any[]).map(
+    (configObject, index) =>
+      createElement(PConnectComponent, {
+        ...configObject,
+
+        key: index.toString(),
+      }),
+  );
+
+  // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
+  let highlightedDataArr = [];
+  if (showHighlightedData) {
+    const { highlightedData = [] } = (getPConnect().getRawMetadata() as any)
+      .config;
+    highlightedDataArr = highlightedData.map((field) => {
+      field.config.displayMode = 'STACKED_LARGE_VAL';
+
+      // Mark as status display when using pyStatusWork
+      if (field.config.value === '@P .pyStatusWork') {
+        field.type = 'TextInput';
+        field.config.displayAsStatus = true;
+      }
+
+      return getPConnect().createComponent(field, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+    });
+  }
+
+  return (
+    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+      {showHighlightedData && highlightedDataArr.length > 0 && (
+        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+          {highlightedDataArr.map((child, i) => (
+            <Grid
+              size={{ xs: COLUMN_WIDTHS[i] as GridSize }}
+              key={`hf-${i + 1}`}
+            >
+              {child}
+            </Grid>
+          ))}
+        </Grid>
+      )}
+      <Grid container spacing={1}>
+        {children.map((child, i) => (
+          <Grid size={{ xs: COLUMN_WIDTHS[i] as GridSize }} key={`r-${i + 1}`}>
+            {child}
+          </Grid>
+        ))}
+      </Grid>
+    </FieldGroup>
+  );
+}

package/templates/react-sdk-reference/src/components/template/NarrowWide/NarrowWideDetails/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "NarrowWideDetails",
+  "label": "Details (Narrow-wide)",
+  "description": "Details (Narrow-wide) template",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/template/NarrowWide/NarrowWideDetails/index.tsx

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

package/templates/react-sdk-reference/src/components/template/NarrowWide/NarrowWideForm/NarrowWideForm.css

@@ -0,0 +1,19 @@
+.psdk-narrow-wide-column {
+  display: flow-root;
+  height: 100%;
+}
+
+/* Create two equal columns that floats next to each other */
+.psdk-narrow-wide-column .psdk-narrow-column-column {
+  width: 30%;
+  float: left;
+  padding: 0rem 0.3125rem 0rem 0rem;
+  height: 100%;
+}
+
+.psdk-narrow-wide-column .psdk-wide-column-column {
+  width: 70%;
+  float: left;
+  padding: 0rem 0rem 0rem 0.3125rem;
+  height: 100%;
+}

package/templates/react-sdk-reference/src/components/template/NarrowWide/NarrowWideForm/NarrowWideForm.tsx

@@ -0,0 +1,22 @@
+import type { PropsWithChildren, ReactElement } from 'react';
+import type { PConnProps } from '@pega/sdk-react';
+import './NarrowWideForm.css';
+
+interface NarrowWideFormProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
+
+export default function NarrowWideForm(props: PropsWithChildren<NarrowWideFormProps>) {
+  const { children } = props;
+
+  return (
+    <>
+      {children && (children as ReactElement[]).length === 2 && (
+        <div className='psdk-narrow-wide-column'>
+          <div className='psdk-narrow-column-column'>{children[0]}</div>
+          <div className='psdk-wide-column-column'>{children[1]}</div>
+        </div>
+      )}
+    </>
+  );
+}

package/templates/react-sdk-reference/src/components/template/NarrowWide/NarrowWideForm/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "NarrowWideForm",
+  "label": "Narrow-wide",
+  "description": "NarrowWide Template",
+  "type": "Template",
+  "subtype": "FORM",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/template/NarrowWide/NarrowWideForm/index.tsx

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

package/templates/react-sdk-reference/src/components/template/NarrowWide/NarrowWidePage/NarrowWidePage.tsx

@@ -0,0 +1,28 @@
+import type { PropsWithChildren, ReactElement } from 'react';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface NarrowWidePageProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  title: string;
+  templateCol: string;
+  icon: string;
+}
+
+/*
+ * The wrapper handles knowing how to take in just children and mapping
+ * to the Cosmos template.
+ */
+export default function NarrowWidePage(props: PropsWithChildren<NarrowWidePageProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const NarrowWide = getComponentFromRegistry('NarrowWide');
+
+  const { children, title, templateCol = '1fr 1fr', icon = '' } = props;
+  const childrenToRender = children as ReactElement[];
+
+  return (
+    <div>
+      <NarrowWide a={childrenToRender[0]} b={childrenToRender[1]} title={title} cols={templateCol} icon={icon?.replace('pi pi-', '')} />
+    </div>
+  );
+}

package/templates/react-sdk-reference/src/components/template/NarrowWide/NarrowWidePage/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "NarrowWidePage",
+  "label": "Narrow-wide",
+  "description": "Narrow-wide Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/template/NarrowWide/NarrowWidePage/index.tsx

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

package/templates/react-sdk-reference/src/components/template/ObjectPage/index.tsx

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

package/templates/react-sdk-reference/src/components/template/OneColumn/OneColumn/OneColumn.tsx

@@ -0,0 +1,32 @@
+import type { PropsWithChildren, ReactElement } from 'react';
+import Grid from '@mui/material/Grid';
+import makeStyles from '@mui/styles/makeStyles';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface OneColumnProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
+
+const useStyles = makeStyles((/* theme */) => ({
+  colStyles: {
+    display: 'grid',
+    gap: '1rem',
+    alignContent: 'baseline'
+  }
+}));
+
+export default function OneColumn(props: PropsWithChildren<OneColumnProps>) {
+  const classes = useStyles();
+
+  const { children } = props;
+
+  return (
+    <Grid container spacing={2}>
+      <Grid size={{ xs: 12 }} className={classes.colStyles}>
+        {(children as ReactElement[]).map(child => {
+          return child;
+        })}
+      </Grid>
+    </Grid>
+  );
+}

package/templates/react-sdk-reference/src/components/template/OneColumn/OneColumn/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "OneColumn",
+  "label": "One column",
+  "description": "OneColumn Template",
+  "type": "Template",
+  "subtype": "FORM",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/template/OneColumn/OneColumn/index.tsx

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

package/templates/react-sdk-reference/src/components/template/OneColumn/OneColumnPage/OneColumnPage.tsx

@@ -0,0 +1,17 @@
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface OneColumnPageProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
+
+/*
+ * The wrapper handles knowing how to take in just children
+ *  and mapping to the TwoColumn template.
+ */
+export default function OneColumnPage(props: OneColumnPageProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const OneColumn = getComponentFromRegistry('OneColumn');
+
+  return <OneColumn {...props} />;
+}

package/templates/react-sdk-reference/src/components/template/OneColumn/OneColumnPage/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "OneColumnPage",
+  "label": "One column",
+  "description": "OneColumn Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/template/OneColumn/OneColumnPage/index.tsx

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

package/templates/react-sdk-reference/src/components/template/OneColumn/OneColumnTab/OneColumnTab.tsx

@@ -0,0 +1,11 @@
+import type { PropsWithChildren } from 'react';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface OneColumnTabProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
+export default function OneColumnTab(props: PropsWithChildren<OneColumnTabProps>) {
+  const { children } = props;
+
+  return <div id='OneColumnTab'>{children}</div>;
+}

package/templates/react-sdk-reference/src/components/template/OneColumn/OneColumnTab/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "OneColumnTab",
+  "label": "One column",
+  "description": "One column",
+  "type": "Template",
+  "subtype": "TAB",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/template/OneColumn/OneColumnTab/index.tsx

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

package/templates/react-sdk-reference/src/components/template/PromotedFilters/PromotedFilters.css

@@ -0,0 +1,7 @@
+.psdk-grid-filter {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}

package/templates/react-sdk-reference/src/components/template/PromotedFilters/PromotedFilters.tsx

@@ -0,0 +1,204 @@
+import React, { useCallback, useMemo, useState, createElement } from 'react';
+import Button from '@mui/material/Button';
+
+import { isEmptyObject } from '../../helpers/common-utils';
+import { getComponentFromRegistry, PConnectComponent } from '@pega/sdk-react';
+import './PromotedFilters.css';
+
+import type { PConnProps } from '@pega/sdk-react';
+
+// Can't use PromotedFilterProps until getContainerManager() knows about addTransientItem
+//  Currently just expects "object"
+interface PromotedFilterProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  viewName: string;
+  filters: any[];
+  listViewProps: any;
+  pageClass: string;
+  parameters?: object;
+}
+
+const localeCategory = 'SimpleTable';
+const SUPPORTED_TYPES_IN_PROMOTED_FILTERS = [
+  'TextInput',
+  'Percentage',
+  'Email',
+  'Integer',
+  'Decimal',
+  'Checkbox',
+  'DateTime',
+  'Date',
+  'Time',
+  'Text',
+  'TextArea',
+  'Currency',
+  'URL',
+  'RichText',
+];
+
+function Filters({ filters, transientItemID, localeReference }) {
+  return filters.map((filter, index) => {
+    const filterClone = { ...filter };
+    // convert any field which is not supported to TextInput and delete the placeholder as it may contain placeholder specific to original type.
+    if (!SUPPORTED_TYPES_IN_PROMOTED_FILTERS.includes(filterClone.type)) {
+      filterClone.type = 'TextInput';
+      delete filterClone.config.placeholder;
+    }
+    filterClone.config.contextName = transientItemID;
+    filterClone.config.readOnly = false;
+    filterClone.config.context = transientItemID;
+    filterClone.config.localeReference = localeReference;
+    const c11nEnv = PCore.createPConnect({
+      meta: filterClone,
+      options: {
+        hasForm: true,
+        contextName: transientItemID,
+      },
+    });
+
+    return (
+      <React.Fragment key={index}>
+        {createElement(PConnectComponent, c11nEnv)}
+      </React.Fragment>
+    );
+  });
+}
+
+function isValidInput(input) {
+  return Object.values(input).findIndex((v) => v) >= 0;
+}
+
+export default function PromotedFilters(props: PromotedFilterProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const ListView = getComponentFromRegistry('ListView');
+
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const {
+    getPConnect,
+    viewName,
+    filters,
+    listViewProps,
+    pageClass,
+    parameters,
+  } = props;
+  const [initTable, setInitTable] = useState(false);
+  const [payload, setPayload] = useState({});
+  const filtersProperties = {};
+
+  filters.forEach((filter) => {
+    filtersProperties[
+      PCore.getAnnotationUtils().getPropertyName(filter.config.value)
+    ] = '';
+  });
+
+  const transientItemID = useMemo(() => {
+    const filtersWithClassID = {
+      ...filtersProperties,
+      classID: pageClass,
+    };
+    return getPConnect().getContainerManager().addTransientItem({
+      id: viewName,
+      data: filtersWithClassID,
+    });
+  }, []);
+
+  function formatPromotedFilters(promotedFilters) {
+    return Object.entries(promotedFilters).reduce((acc, [field, value]) => {
+      if (value) {
+        acc[field] = {
+          lhs: {
+            field,
+          },
+          comparator: 'EQ',
+          rhs: {
+            value,
+          },
+        };
+      }
+      return acc;
+    }, {});
+  }
+
+  const getFilterData = useCallback(
+    (e) => {
+      e.preventDefault(); // to prevent un-intended forms submission.
+
+      const changes = PCore.getFormUtils().getChanges(transientItemID);
+      const formValues = {};
+      Object.keys(changes).forEach((key) => {
+        if (!['context_data', 'pageInstructions'].includes(key)) {
+          formValues[key] = changes[key];
+        }
+      });
+      const promotedFilters = formatPromotedFilters(formValues);
+      if (
+        PCore.getFormUtils().isFormValid(transientItemID) &&
+        isValidInput(formValues)
+      ) {
+        setInitTable(true);
+        const Query: any = {
+          dataViewParameters: parameters,
+        };
+
+        if (!isEmptyObject(promotedFilters)) {
+          Query.query = { filter: { filterConditions: promotedFilters } };
+        }
+        setPayload(Query);
+      }
+    },
+    [transientItemID],
+  );
+
+  const clearFilterData = useCallback(() => {
+    PCore.getContainerUtils().clearTransientData(transientItemID);
+    setInitTable(false);
+    getPConnect()?.getListActions?.()?.setSelectedRows([]); // Clear the selection (if any made by user)
+  }, [transientItemID]);
+
+  return (
+    <>
+      <div>{listViewProps.title}</div>
+      <div className='psdk-grid-filter'>
+        <Filters
+          filters={filters}
+          transientItemID={transientItemID}
+          localeReference={listViewProps.localeReference}
+        />
+      </div>
+      <div>
+        <Button
+          key='1'
+          type='button'
+          onClick={clearFilterData}
+          data-testid='clear'
+          variant='contained'
+          color='primary'
+        >
+          {localizedVal('Clear', localeCategory)}
+        </Button>
+        <Button
+          style={{ float: 'right' }}
+          key='2'
+          type='submit'
+          onClick={getFilterData}
+          data-testid='search'
+          variant='contained'
+          color='primary'
+        >
+          {localizedVal('Search', localeCategory)}
+        </Button>
+      </div>
+      {initTable && (
+        <ListView
+          {...listViewProps}
+          title=''
+          payload={payload}
+          isSearchable
+          tableDisplay={{
+            show: initTable,
+          }}
+        />
+      )}
+    </>
+  );
+}

package/templates/react-sdk-reference/src/components/template/PromotedFilters/index.tsx

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