@pega/dx-component-builder-sdk 0.23.10 → 0.23.11

package/tests/assets/sdk-r/components/create/custom-constellation/field/Pega_DXIL_MyTestText/index.tsx

@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types';
+import { Input } from '@pega/cosmos-react-core';
+
+import type { PConnFieldProps } from './PConnProps';
+
+import StyledPegaDxilMyTestTextWrapper from './styles';
+
+// interface for props
+interface PegaDxilMyTestTextProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+
+}
+
+// interface for StateProps object
+interface StateProps {
+  value: string;
+  hasSuggestions: boolean;
+}
+
+// Duplicated runtime code from Constellation Design System Component
+
+// props passed in combination of props from property panel (config.json) and run time props from Constellation
+// any default values in config.pros should be set in defaultProps at bottom of this file
+export default function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
+  const { getPConnect, value, placeholder, disabled, readOnly, required, label, hideLabel, testId } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const stateProps = pConn.getStateProps() as StateProps;
+  const propName: string = stateProps.value;
+
+  const handleOnChange = (event: any) => {
+    const { value: updatedValue } = event.target;
+    actions.updateFieldValue(propName, updatedValue);
+  };
+
+  return (
+    <StyledPegaDxilMyTestTextWrapper>
+      <Input
+        type='text'
+        value={value}
+        label={label}
+        labelHidden={hideLabel}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        required={required}
+        onChange={handleOnChange}
+        testId={testId}
+      />
+    </StyledPegaDxilMyTestTextWrapper>
+  );
+};
+
+PegaDxilMyTestText.defaultProps = {
+  value: '',
+  placeholder: '',
+  disabled: false,
+  readOnly: false,
+  required: false,
+  testId: ''
+};
+
+PegaDxilMyTestText.propTypes = {
+  label: PropTypes.string,
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+  getPConnect: PropTypes.func.isRequired,
+  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  testId: PropTypes.string
+};

package/tests/assets/sdk-r/components/create/custom-constellation/field/Pega_DXIL_MyTestText/mock.ts

@@ -0,0 +1,15 @@
+
+// @ts-nocheck
+export const configProps = {
+  value: '',
+  label: 'Text Sample',
+  placeholder: 'Text Placeholder',
+  helperText: 'Text Helper Text',
+  testId: 'Text-12345678',
+  hasSuggestions: false
+};
+
+export const stateProps = {
+  value: '.TextSample',
+  hasSuggestions: false
+};

package/tests/assets/sdk-r/components/create/custom-constellation/field/Pega_DXIL_MyTestText/styles.ts

@@ -0,0 +1,15 @@
+
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
+
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/tests/assets/sdk-r/components/create/custom-constellation/field/_field.md

@@ -0,0 +1,5 @@
+# The **custom-constellation/field** directory
+
+The **src/components/custom-constellation/field** directory contains the code for the Constellation-based associated component for any custom **field** component you have created for use with the **React SDK**.
+
+For each component in the **src/components/custom-constellation/field** directory, there will be a matching component in the **src/components/custom-sdk/field** directory.

package/tests/assets/sdk-r/components/create/custom-constellation/template/_template.md

@@ -0,0 +1,5 @@
+# The **custom-constellation/template** directory
+
+The **src/components/custom-constellation/template** directory contains the code for the Constellation-based associated component for any custom **template** component you have created for use with the **React SDK**.
+
+For each component in the **src/components/custom-constellation/template** directory, there will be a matching component in the **src/components/custom-sdk/template** directory.

package/tests/assets/sdk-r/components/create/custom-constellation/widget/_widget.md

@@ -0,0 +1,5 @@
+# The **custom-constellation/widget** directory
+
+The **src/components/custom-constellation/widget** directory contains the code for the Constellation-based associated component for any custom **widget** component you have created for use with the **React SDK**.
+
+For each component in the **src/components/custom-constellation/widget** directory, there will be a matching component in the **src/components/custom-sdk/widget** directory.

package/tests/assets/sdk-r/components/create/custom-sdk/_custom-sdk.md

@@ -0,0 +1,5 @@
+# The **components/custom-sdk** directory
+
+The **src/components/custom-sdk** directory contains the code for custom components that you create and use with the **React SDK**.
+
+When you run the **npm run  create** command to create new components, the generated code that you can use as a starting point for your component development will be placed in type-specific and component-specific folders in **src/components/custom-sdk**.

package/tests/assets/sdk-r/components/create/custom-sdk/field/Pega_DXIL_MyTestText/config.json

@@ -0,0 +1,83 @@
+{
+  "name": "Pega_DXIL_MyTestText",
+  "label": "My Test Text",
+  "description": "My Test Text Description",
+  "organization": "Pega",
+  "version": "0.0.1",
+  "library": "DXIL",
+  "allowedApplications": [],
+  "componentKey": "Pega_DXIL_MyTestText",
+  "type": "Field",
+  "subtype": "Text",
+  "icon": "images/pz-url-active.svg",
+   "properties": [
+    {
+      "name": "label",
+      "label": "Field label",
+      "format": "TEXT",
+      "required": true
+    },
+    {
+      "name": "readOnly",
+      "label": "Edit mode",
+      "format": "READONLY"
+    },
+    {
+      "label": "Input settings",
+      "format": "GROUP",
+      "visibility": "(!readOnly = true)",
+      "properties": [
+        {
+          "name": "placeholder",
+          "label": "Placeholder",
+          "format": "TEXT"
+        },
+        {
+          "name": "helperText",
+          "label": "Helper text",
+          "format": "TEXT"
+        }
+      ]
+    },
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "required",
+          "label": "Required",
+          "format": "REQUIRED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "disabled",
+          "label": "Disabled",
+          "format": "DISABLED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY"
+        }
+      ]
+    },
+    {
+      "label": "Advanced",
+      "format": "GROUP",
+      "collapsible": true,
+      "properties": [
+        {
+          "name": "testId",
+          "label": "Test ID",
+          "format": "TEXT",
+          "ignorePattern": "[^-_\\p{N}\\p{L}]",
+          "includeAnnotations": false
+        }
+      ]
+    }
+  ],
+  "defaultConfig": {
+    "label": "@L $this.label"
+  }
+}

package/tests/assets/sdk-r/components/create/custom-sdk/field/Pega_DXIL_MyTestText/demo.stories.tsx

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import PegaDxilMyTestText from './index';
+import { configProps } from './mock';
+
+const meta: Meta<typeof PegaDxilMyTestText> = {
+  title: 'PegaDxilMyTestText',
+  component: PegaDxilMyTestText,
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyTestText>;
+
+export const BasePegaDxilMyTestText: Story = (args) => {
+  const [value, setValue] = useState(configProps.value);
+
+  const props = {
+    value,
+    placeholder: configProps.placeholder,
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            }
+          };
+        },
+        getStateProps: () => {
+          return { value: '.name' };
+        }
+      };
+    },
+    onChange: (event) => { setValue(event.target.value); },
+    onBlur: () => { return configProps.value; }
+  };
+
+  return <PegaDxilMyTestText {...props} {...args} />;
+};
+
+BasePegaDxilMyTestText.args = {
+  label: configProps.label,
+  helperText: configProps.helperText,
+  testId: configProps.testId,
+  readOnly: configProps.readOnly,
+  disabled: configProps.disabled,
+  required: configProps.required,
+  status: configProps.status,
+  hideLabel: configProps.hideLabel,
+  displayMode: configProps.displayMode,
+  validatemessage: configProps.validatemessage,
+};

package/tests/assets/sdk-r/components/create/custom-sdk/field/Pega_DXIL_MyTestText/index.tsx

@@ -0,0 +1,102 @@
+import { useState, useEffect } from 'react';
+import { TextField } from '@material-ui/core';
+
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import StyledPegaDxilMyTestTextWrapper from './styles';
+
+interface PegaDxilMyTestTextProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on this componentName
+  fieldMetadata?: any;
+}
+
+// Duplicated runtime code from React SDK
+
+// props passed in combination of props from property panel (config.json) and run time props from Constellation
+// any default values in config.pros should be set in defaultProps at bottom of this file
+export default function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromMap('FieldValueList');
+
+  const {
+    getPConnect,
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    /* onChange, onBlur */
+    readOnly,
+    testId,
+    fieldMetadata,
+    helperText,
+    displayMode,
+    hideLabel,
+    placeholder
+  } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
+  const helperTextToDisplay = validatemessage || helperText;
+
+  const [inputValue, setInputValue] = useState('');
+  const maxLength = fieldMetadata?.maxLength;
+
+  let readOnlyProp = {}; // Note: empty if NOT ReadOnly
+
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+  }
+
+  if (readOnly) {
+    readOnlyProp = { readOnly: true };
+  }
+
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
+  function handleChange(event) {
+    // update internal value
+    setInputValue(event?.target?.value);
+  }
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
+  return (
+    <StyledPegaDxilMyTestTextWrapper>
+    <TextField
+      fullWidth
+      variant={readOnly ? 'standard' : 'outlined'}
+      helperText={helperTextToDisplay}
+      placeholder={placeholder ?? ''}
+      size='small'
+      required={required}
+      disabled={disabled}
+      onChange={handleChange}
+      onBlur={!readOnly ? handleBlur : undefined}
+      error={status === 'error'}
+      label={label}
+      value={inputValue}
+      InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
+    />
+    </StyledPegaDxilMyTestTextWrapper>
+  );
+}
+

package/tests/assets/sdk-r/components/create/custom-sdk/field/Pega_DXIL_MyTestText/mock.ts

@@ -0,0 +1,16 @@
+// eslint-disable-next-line import/prefer-default-export
+export const configProps = {
+  value: '',
+  label: 'Text Sample',
+  placeholder: 'Text Placeholder',
+  helperText: 'Text Helper Text',
+  testId: 'Text-12345678',
+  hasSuggestions: false,
+  disabled: false,
+  readOnly: false,
+  required: false,
+  displayMode: '',
+  status: '',
+  hideLabel: false,
+  validatemessage: ''
+};

package/tests/assets/sdk-r/components/create/custom-sdk/field/Pega_DXIL_MyTestText/styles.js

@@ -0,0 +1,7 @@
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/tests/assets/sdk-r/components/create/custom-sdk/field/_field.md

@@ -0,0 +1,6 @@
+# The **custom-sdk/field** directory
+
+The **src/components/custom-sdk/field** directory contains the code for the custom **field** components you want to create and use with the **React SDK**.
+
+When you run the **npm run  create** command to create new _field_ components, the generated code that you can use as a starting point for your component development
+will be placed in component-specific folders in **src/components/custom-sdk/field**.

package/tests/assets/sdk-r/components/create/custom-sdk/template/_template.md

@@ -0,0 +1,6 @@
+# The **custom-sdk/template** directory
+
+The **src/components/custom-sdk/template** directory contains the code for the custom **template** components you want to create and use with the **React SDK**.
+
+When you run the **npm run  create** command to create new _template_ components, the generated code that you can use as a starting point for your component development
+will be placed in component-specific folders in **src/components/custom-sdk/template**.

package/tests/assets/sdk-r/components/create/custom-sdk/widget/_widget.md

@@ -0,0 +1,6 @@
+# The **custom-sdk/widget** directory
+
+The **src/components/custom-sdk/widget** directory contains the code for the custom **widget** components you want to create and use with the **React SDK**.
+
+When you run the **npm run  create** command to create new _widget_ components, the generated code that you can use as a starting point for your component
+development will be placed in component-specific folders in **src/components/custom-sdk/widget**.

package/tests/assets/sdk-r/components/create/override-sdk/_override-sdk.md

@@ -0,0 +1,5 @@
+# The **components/override-sdk** directory
+
+The **src/components/override-sdk** directory contains the code for components for which you want to override the default implementation for use with the **React SDK**.
+
+When you run the **npm run  override** command to override the default implementation of a component, the generated code that you can use as a starting point for your component development will be placed in type-specific and component-specific folders in **src/components/override-sdk**.

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/AlertBanner/AlertBanner.tsx

@@ -0,0 +1,39 @@
+import { Alert } from '@material-ui/lab';
+
+// AlertBanner is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface AlertBannerProps {
+  // If any, enter additional props that only exist on Date here
+  id: string;
+  variant: string;
+  messages: string[];
+  onDismiss?: any;
+}
+
+const SEVERITY_MAP = {
+  urgent: 'error',
+  warning: 'warning',
+  success: 'success',
+  info: 'info'
+};
+
+export default function AlertBanner(props: AlertBannerProps) {
+  const { id, variant, messages, onDismiss } = props;
+  let additionalProps = {};
+
+  if (onDismiss) {
+    additionalProps = {
+      onClose: onDismiss
+    };
+  }
+
+  return (
+    <div id={id}>
+      {messages.map(message => (
+        <Alert key={message} variant='outlined' severity={SEVERITY_MAP[variant]} {...additionalProps}>
+          {message}
+        </Alert>
+      ))}
+    </div>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/AlertBanner/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/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: rgb(0, 0, 0);
+  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/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/Banner/Banner.tsx

@@ -0,0 +1,50 @@
+import Grid from '@material-ui/core/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 item xs={12} className='banner-layout' spacing={1}>
+        <Grid item xs={variantMap[variant][0]} style={{ padding: '1em' }}>
+          {a}
+        </Grid>
+        <Grid item xs={variantMap[variant][1]} style={{ padding: '1em' }}>
+          {b}
+        </Grid>
+      </Grid>
+    </div>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/Banner/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/CaseSummaryFields/CaseSummaryFields.css

@@ -0,0 +1,18 @@
+.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);
+  padding: 0 0.5rem;
+  text-transform: uppercase;
+}
+
+.psdk-case-summary-fields {
+  padding: calc(2 * 0.5rem);
+  display: grid;
+  grid-row-gap: calc(2 * 0.5rem);
+}