@pega/custom-dx-components 0.25.53 → 0.25.55

package/src/tasks/create/templates/Launchpad/Template/FORM-region/demo.stories.tsx.mustache

@@ -0,0 +1,272 @@
+// @ts-nocheck
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {{COMPONENT_CLASS_NAME}} from './index';
+import { DateInput, Input, FieldValueList, Text } from '@pega/cosmos-react-core';
+import { PhoneInput as CosmosPhone } from '@pega/cosmos-react-core';
+import { pyReviewRaw, regionChildrenResolved } from './mock';
+
+const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  component: {{COMPONENT_CLASS_NAME}},
+  excludeStories: /.*Data$/,
+  parameters: {
+    type: 'TwoColumnForm'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
+
+const renderField = resolvedProps => {
+  const { displayMode, value = '', label = '', key, readOnly } = resolvedProps;
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [inputValue, setInputValue] = useState(value);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [phoneValue, setPhoneValue] = useState('+16397975093');
+
+  const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
+
+  let val =
+    value !== '' ? (
+      <Text
+        variant='h1'
+        as='span'
+        key={key}
+        onChange={e => {
+          setInputValue(e.target.value);
+        }}
+      >
+        {inputValue}
+      </Text>
+    ) : (
+      ''
+    );
+
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
+
+  if (label === 'Service Date')
+    val = (
+      <DateInput
+        value={inputValue}
+        style={{ fontSize: '14px' }}
+        key={key}
+        onChange={dateVal => {
+          const { valueAsISOString: date } = dateVal;
+          const trimmedDate = date ? date.substring(0, date.indexOf('T')) : date;
+          setInputValue(trimmedDate);
+        }}
+      />
+    );
+
+  if (label === 'Email')
+    val = (
+      <Input
+        type='email'
+        value={inputValue}
+        style={{ fontSize: '14px' }}
+        key={key}
+        onChange={e => {
+          setInputValue(e.target.value);
+        }}
+      />
+    );
+
+  if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name')
+    val = (
+      <Input
+        value={inputValue}
+        style={{ fontSize: '14px' }}
+        key={key}
+        onChange={e => {
+          setInputValue(e.target.value);
+        }}
+      />
+    );
+
+  if (label === 'Phone Number')
+    val = (
+      <CosmosPhone
+        value={phoneValue}
+        showCountryCode
+        style={{ fontSize: '14px' }}
+        key={key}
+        onChange={phoneVal => {
+          setPhoneValue(phoneVal);
+        }}
+      />
+    );
+
+<%={{ }}=%>     {{! revert delimiters for mustache }}
+
+  if (variant === 'inline') {
+    val = value || (
+      <span
+        aria-hidden='true'
+        key={key}
+        onChange={e => {
+          setInputValue(e.target.value);
+        }}
+      >
+        &ndash;&ndash;
+      </span>
+    );
+  } else {
+    val = (
+      <Text
+        variant='h1'
+        as='span'
+        key={key}
+        onChange={e => {
+          setInputValue(e.target.value);
+        }}
+      >
+        {val}
+      </Text>
+    );
+  }
+  if (readOnly) {
+    return {
+      getPConnect: () => {
+        return {
+          getRawMetadata: () => {
+            return {};
+          },
+          resolveConfigProps: props => {
+            return props;
+          },
+          getConfigProps: () => {
+            return {
+              value: '',
+              label: label,
+              displayMode: 'LABELS_LEFT'
+            };
+          },
+          getComponent: () => {
+            return val;
+          }
+        };
+      }
+    };
+  }
+  return (
+    <FieldValueList
+      variant={variant}
+      fields={[{ name: label, value: val }]}
+      key={key}
+      onChange={() => {
+        /* nothing */
+      }}
+    />
+  );
+};
+
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+  const { readOnly } = args;
+
+  const props = {
+    readOnly: readOnly,
+    getPConnect: () => {
+      return {
+        getChildren: () => {
+          return pyReviewRaw.children;
+        },
+        getInheritedProps: () => {
+          return pyReviewRaw.config.inheritedProps;
+        },
+        createComponent: config => {
+          // eslint-disable-next-line default-case
+          switch (config.config.value) {
+            case '@P .FirstName':
+              return renderField({
+                ...regionChildrenResolved[0],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
+            case '@P .MiddleName':
+              return renderField({
+                ...regionChildrenResolved[1],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
+            case '@P .LastName':
+              return renderField({
+                ...regionChildrenResolved[2],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
+            case '@P .Email':
+              return renderField({
+                ...regionChildrenResolved[3],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
+            case '@P .PhoneNumber':
+              return renderField({
+                ...regionChildrenResolved[4],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
+            case '@P .ServiceDate':
+              return renderField({
+                ...regionChildrenResolved[5],
+                readOnly,
+                displayMode: readOnly ? 'LABELS_LEFT' : ''
+              });
+          }
+        }
+      };
+    }
+  };
+
+  const regionAChildren = readOnly
+    ? {
+        props: {
+          getPConnect: () => {
+            return {
+              getChildren: () => {
+                return pyReviewRaw.children[0].children.map(child => {
+                  return props.getPConnect().createComponent(child);
+                });
+              }
+            };
+          }
+        }
+      }
+    : pyReviewRaw.children[0].children.map(child => {
+        return props.getPConnect().createComponent(child);
+      });
+
+  const regionBChildren = readOnly
+    ? {
+        props: {
+          getPConnect: () => {
+            return {
+              getChildren: () => {
+                return pyReviewRaw.children[1].children.map(child => {
+                  return props.getPConnect().createComponent(child);
+                });
+              }
+            };
+          }
+        }
+      }
+    : pyReviewRaw.children[1].children.map(child => {
+        return props.getPConnect().createComponent(child);
+      });
+
+  return (
+    <{{COMPONENT_CLASS_NAME}} {...props} {...args}>
+      {[regionAChildren, regionBChildren]}
+    </{{COMPONENT_CLASS_NAME}}>
+  );
+};
+
+Base{{COMPONENT_CLASS_NAME}}.args = {
+  readOnly: false,
+  showLabel: true,
+  label: 'Form Region template',
+};

package/src/tasks/create/templates/Launchpad/Template/FORM-region/demo.test.tsx.mustache

@@ -0,0 +1,56 @@
+// import { expect, test } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import '@testing-library/jest-dom';
+
+import * as DemoStories from './demo.stories';
+
+const { Base{{COMPONENT_CLASS_NAME}} } = composeStories(DemoStories);
+
+test('renders {{COMPONENT_CLASS_NAME}}', async () => {
+  render(<Base{{COMPONENT_CLASS_NAME}} />);
+  expect(await screen.findByText('Form Region template')).toBeVisible();
+
+  // labels
+  expect(await screen.findByText('First Name')).toBeVisible();
+  expect(await screen.findByText('Middle Name')).toBeVisible();
+  expect(await screen.findByText('Last Name')).toBeVisible();
+  expect(await screen.findByText('Email')).toBeVisible();
+  expect(await screen.findByText('Phone Number')).toBeVisible();
+  expect(await screen.findByText('Service Date')).toBeVisible();
+
+  const inputElements = screen.getAllByTestId(':input:control');
+  expect((inputElements[0] as HTMLInputElement).value).toBe('John');
+  expect((inputElements[1] as HTMLInputElement).value).toBe('');
+  expect((inputElements[2] as HTMLInputElement).value).toBe('Doe');
+  expect((inputElements[3] as HTMLInputElement).value).toBe('John@doe.com');
+
+  const myPhone = (screen.getByTestId(':phone-input:control') as HTMLInputElement).value;
+  expect(myPhone).toContain('(639) 797-5093');
+
+  const myClearMonth = (screen.getByTestId(':date-input:control-month') as HTMLInputElement).value;
+  expect(myClearMonth).toContain('01');
+
+  const myClearDay = (screen.getByTestId(':date-input:control-day') as HTMLInputElement).value;
+  expect(myClearDay).toContain('25');
+
+  const myClearYear = (screen.getByTestId(':date-input:control-year') as HTMLInputElement).value;
+  expect(myClearYear).toContain('2023');
+
+  // verify 2 columns
+  const fieldSet = screen.getByRole('group');
+
+  // <fieldset>
+  // <legend></legend>
+  // <div>
+  //  <div>
+  //    <div> 2 divs (columns) </div>
+  //  </div>
+  // </div>
+  // </fieldset>
+
+  // eslint-disable-next-line testing-library/no-node-access
+  expect(fieldSet.children[1].children[0].children[0].children).toHaveLength(2);
+
+
+});

package/src/tasks/create/templates/Launchpad/Template/FORM-region/index.tsx.mustache

@@ -0,0 +1,80 @@
+import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
+
+import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
+import DetailsRender from './DetailsRender';
+
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+
+// interface for props
+interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  showLabel: boolean;
+  children: any;
+}
+
+// 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
+function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
+
+
+  const { children = [], label, showLabel, getPConnect, readOnly, displayMode  } = props;
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
+
+  const numRegions = children?.length;
+  const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
+  const gridContainer = {"colGap" : 6};
+  // @ts-ignore
+  gridContainer.cols = gridRepeat;
+  // @ts-ignore
+  gridContainer.alignItems = 'start';
+
+  const flexContainer = {direction: 'column'};
+  // @ts-ignore
+  flexContainer.gap = 2;
+
+  if (readOnly && readOnly === true || displayMode && displayMode === 'DISPLAY_ONLY') {
+    return (
+      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
+        <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+          <Grid container={gridContainer} data-testid={`column-count-${numRegions}`}>
+            {children.map((child: any, i: number) => (
+              <Flex
+                // @ts-ignore
+                container={{ direction: 'column', alignItems: 'normal', colGap: 1, rowGap: 1.5 }}
+                key={`r-${i + 1}`}
+              >
+                <DetailsRender child={child} />
+              </Flex>
+            ))}
+          </Grid>
+        </FieldGroup>
+<%={{ }}=%>     {{! revert delimiters for mustache }}
+      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    );
+  }
+
+  return (
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
+      <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+        <Grid container={gridContainer}>
+        {children.map((child: any, i: number) => (
+          // @ts-ignore
+          <Flex container={flexContainer} key={`r-${i + 1}`}>
+          {child}
+          </Flex>
+        ))}
+        </Grid>
+      </FieldGroup>
+<%={{ }}=%>     {{! revert delimiters for mustache }}
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+  );
+
+}
+
+
+export default withConfiguration({{COMPONENT_CLASS_NAME}});

package/src/tasks/create/templates/Launchpad/Template/FORM-region/mock.ts.mustache

@@ -0,0 +1,141 @@
+
+// @ts-nocheck
+export const pyReviewRaw = {
+  name: 'CollectInformation',
+  type: 'View',
+  config: {
+    template: 'DefaultForm',
+    ruleClass: 'OM5W9U-SampleApp-Work-Test',
+    localeReference: '@LR OM5W9U-SAMPLEAPP-WORK-TEST!VIEW!COLLECTINFORMATION',
+    context: '@P .pyViewContext'
+  },
+  children: [
+    {
+      name: 'A',
+      type: 'Region',
+      children: [
+        {
+          type: 'TextInput',
+          config: {
+            value: '@P .FirstName',
+            label: '@L First Name',
+            key: 'FirstName'
+          }
+        },
+        {
+          type: 'TextInput',
+          config: {
+            value: '@P .MiddleName',
+            label: '@L Middle Name',
+            key: 'MiddleName'
+          }
+        },
+        {
+          type: 'TextInput',
+          config: {
+            value: '@P .LastName',
+            label: '@L Last Name',
+            key: 'LastName'
+          }
+        }
+      ]
+    },
+    {
+      name: 'B',
+      type: 'Region',
+      children: [
+        {
+          type: 'Email',
+          config: {
+            value: '@P .Email',
+            label: '@L Email',
+            key: 'Email'
+          }
+        },
+        {
+          type: 'Phone',
+          config: {
+            value: '@P .PhoneNumber',
+            label: '@L Phone Number',
+            datasource: {
+            },
+            key: 'PhoneNumber'
+          }
+        },
+        {
+          type: 'Date',
+          config: {
+            value: '@P .ServiceDate',
+            label: '@L Service Date',
+            key: 'ServiceDate'
+          }
+        }
+      ]
+    }
+  ],
+  classID: 'OM5W9U-SampleApp-Work-Test'
+};
+
+export const regionChildrenResolved = [
+  {
+    readOnly: undefined,
+    value: 'John',
+    label: 'First Name',
+    hasSuggestions: false,
+    key: 'First Name'
+  },
+  {
+    readOnly: undefined,
+    value: '',
+    label: 'Middle Name',
+    hasSuggestions: false,
+    key: 'Middle Name'
+  },
+  {
+    readOnly: undefined,
+    value: 'Doe',
+    label: 'Last Name',
+    hasSuggestions: false,
+    key: 'Last Name'
+  },
+  {
+    readOnly: undefined,
+    value: 'John@doe.com',
+    label: 'Email',
+    hasSuggestions: false,
+    key: 'Email'
+  },
+  {
+    readOnly: undefined,
+    value: '+16397975093',
+    label: 'Phone Number',
+    datasource: {
+      fields: {
+        value: undefined
+      },
+      source: [
+        {
+          value: '+1'
+        },
+        {
+          value: '+91'
+        },
+        {
+          value: '+48'
+        },
+        {
+          value: '+44'
+        }
+      ]
+    },
+    hasSuggestions: false,
+    key: 'Phone Number'
+  },
+  {
+    readOnly: undefined,
+    value: '2023-01-25',
+    label: 'Service Date',
+    hasSuggestions: false,
+    key: 'Service Date'
+  }
+];

package/src/tasks/create/templates/Launchpad/Template/FORM-region/styles.ts.mustache

@@ -0,0 +1,8 @@
+// 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/src/tasks/delete-lib/index.js

@@ -242,6 +242,12 @@ addDebugLog("deleteLibrary", "", "+");
     }
 
     libraryName = inputConfig.libraryName;
+    if (libraryName.indexOf("_") < 0) {
+      // need to add in organization
+      libraryName = `${compDef.organization}_${libraryName}`;
+    }
+
+
     version = inputConfig.libraryVersion;
     const isPermanent = inputConfig?.isPermanent || "N";
     let permBuild = convertYNToBoolean(isPermanent);

package/src/tasks/init/template/README.md

@@ -4,6 +4,24 @@
 
 This project provides you with an environment to extend Constellation by giving you tools to create and publish custom components that are not available from the Constellation installation.
 
+## Before you begin
+Review the following checklist before you create a Constellation DX component:
+
+## Design considerations
+Involve an Experience Designer in your process. This will help you determine the exact issue to be resolved. For more information on the role of an Experience Designer, see **Experience Designer**[here](https://community.pega.com/roles/experience-designer).
+
+## The Experience Designer must meet the following requirements:
+Must have a background in UI and UX design.
+Must understand Pega's best practices for design. For more information, see **Best practices for designing with the Constellation design system**[here](https://design.pega.com/design/getting-started/).
+
+## Functionality considerations
+Check if an existing component in App Studio contains the features you need. If not, check for existing components that contain similar features.
+Connect with Pega Support to find out if a component containing a similar feature will be included in the next release. If yes, assess if you can wait for the next release.
+
+## Maintenance considerations
+Ensure you have the bandwidth to maintain the Constellation DX component and keep it up-to-date with every release of Pega Infinity. Evaluate if doing this might prevent you from upgrading to future releases of Pega Infinity.
+Evaluate if you are able to meet the compliance standards for data privacy and accessibility for Constellation DX components. Note that not meeting these standards might lead to legal compliance issues.
+
 ## Prerequisites
 
 Ensure you have access to the following in your system:

package/src/tasks/init/template/package.json.mustache

@@ -107,8 +107,8 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@pega/configs": "^0.16.3",
-    "@pega/custom-dx-components": "~0.25.53",
-    "@pega/pcore-pconnect-typedefs": "^4.1.0-alpha.1",
+    "@pega/custom-dx-components": "~0.25.55",
+    "@pega/pcore-pconnect-typedefs": "^4.0.0-alpha.0",
     "@storybook/addon-actions": "^8.6.14",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-links": "^8.6.14",

package/src/tasks/restore/index.js

@@ -11,7 +11,10 @@ import {
   getLibraryBased,
   restoreFromArchive,
   cleanUpTemp,
-  forceDefaultsUpdate
+  forceDefaultsUpdate,
+  getUseInputConfig,
+  getInputConfigForCommand,
+  convertYNToBoolean
  } from '../../util.js';
 
  import { showCurrentStatus } from '../show-status/index.js';
@@ -19,6 +22,7 @@ import {
 export default async options => {
   await showVersion();
   await checkLibraryAndArchives();
+  const useInputConfig = getUseInputConfig();
 
 addDebugLog("restoreComponent", "", "+");
 
@@ -31,26 +35,43 @@ addDebugLog("restoreComponent", "", "+");
   }
   const confDef = getConfigDefaults();
 
-  console.log(chalk.bold.yellow('\nChanges not saved to local storage will be LOST, code will be restored from local storage.'));
-  console.log("");
 
   let restoreFromStore = {};
 
-  if (options.params.length === 4) {
-    const optConfirm = options.params[3];
-    restoreFromStore["confirmRestore"] = optConfirm === 'Y' || optConfirm === 'y' || optConfirm === true || optConfirm === 'true' ? true : false;
+  if (useInputConfig) {
+    const inputConfig = await getInputConfigForCommand("restoreLibVersion");
+    if (!inputConfig || Object.keys(inputConfig).length === 0) {
+      console.log(chalk.redBright("Configured for input config, but no input.config.json file found."));
+      process.exit(1);
+    }
+
+    const okToRestore = convertYNToBoolean(inputConfig.okToRestore);
+
+    restoreFromStore.confirmRestore = okToRestore;
+
   }
   else {
-    restoreFromStore = await inquirer.prompt([
-      {
-        name: 'confirmRestore',
-        type: 'confirm',
-        message: `Restoring ${chalk.bold.green(`${confDef.displayLibVersion}`)} from local storage, proceed ?`,
-        default: true
-      }
-    ]);
+    console.log(chalk.bold.yellow('\nChanges not saved to local storage will be LOST, code will be restored from local storage.'));
+    console.log("");
+
+    if (options.params.length === 4) {
+      const optConfirm = options.params[3];
+      restoreFromStore["confirmRestore"] = optConfirm === 'Y' || optConfirm === 'y' || optConfirm === true || optConfirm === 'true' ? true : false;
+    }
+    else {
+      restoreFromStore = await inquirer.prompt([
+        {
+          name: 'confirmRestore',
+          type: 'confirm',
+          message: `Restoring ${chalk.bold.green(`${confDef.displayLibVersion}`)} from local storage, proceed ?`,
+          default: true
+        }
+      ]);
+    }
   }
 
+
+
   if (restoreFromStore.confirmRestore) {
     const switchToFileName = `${confDef.currentOrgLib}_${confDef.version}.arch.zip`;
     const tasks = new Listr(