@pega/dx-component-builder-sdk 23.1.14 → 23.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "23.1.14",
+  "version": "23.1.15",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/cli.js

@@ -5,6 +5,7 @@ import {
   authenticate,
   buildComponent,
   buildAllComponents,
+  buildJestAssets,
   clearMap,
   createComponent,
   createAllComponents,
@@ -31,6 +32,7 @@ const TASKS = {
   OVERRIDE_ALL: 'overrideAll',
   BUILD: 'buildComponent',
   BUILD_ALL: 'buildAllComponents',
+  BUILD_JEST_ASSETS: 'buildJestAssets',
   MAP_ALL: "mapAll",
   PUBLISH: 'publish',
   PUBLISH_ALL: 'publishAll',
@@ -144,6 +146,10 @@ export default async (args = []) => {
       scanAndFix(options);
       break;
     }
+    case TASKS.BUILD_JEST_ASSETS: {
+      buildJestAssets(options);
+      break;
+    }
     default: {
       console.log(chalk.red(`No task matched with ${task}`));
       break;

package/src/constants.js

@@ -54,6 +54,12 @@ export const SERVER_TYPE = 'serverType';
 export const SERVER_REST_URL = 'infinityRestServerUrl';
 export const LP_SERVER_REST_URL = 'launchpadRestServerUrl';
 
+export const JEST_ASSETS_PATH = 'node_modules/@pega/dx-component-builder-sdk/tests/assets/';
+export const JEST_ASSETS_SDK_A = 'sdk-a/components';
+export const JEST_ASSETS_SDK_R = 'sdk-r/components';
+export const JEST_CREATE_PATH = 'create/';
+export const JEST_CREATE_ALL_PATH = 'createAll/';
+
 /* dxcbConfig.componentDefaults LINT setting/value constants */
 export const LINT_SETTING_KEY = 'lintAction'; // LINT_SETTING_KEY is expected to be in sdk-config's dxcbConfig.componentDefaults
 export const LINT_OFF = 'off'; // LINT_OFF: don't run lint
@@ -308,6 +314,10 @@ export const COMPONENT_SCHEMA = {
         name: 'Integer',
         value: 'Integer'
       },
+      {
+        name: 'Multi Select',
+        value: 'Multiselect'
+      },
       {
         name: 'Percentage',
         value: 'Percentage'

package/src/tasks/build-jest-assets/index.js

@@ -0,0 +1,153 @@
+import fs from 'fs';
+import path from 'path';
+import { join } from 'path';
+import inquirer from 'inquirer';
+import { Listr } from 'listr2';
+import chalk from 'chalk';
+
+import { showVersion, getSubComponents, checkPathAccess, getComponents, getFramework, getListOfDirectories } from '../../util.js';
+import createAll from '../create-all/index.js';
+import create from '../create/index.js';
+import overrideAll from '../override-all/index.js';
+import override from '../override/index.js';
+import deleteAll from '../delete-all/index.js';
+
+import { JEST_ASSETS_PATH, JEST_CREATE_PATH, JEST_CREATE_ALL_PATH, JEST_ASSETS_SDK_A,
+  JEST_ASSETS_SDK_R, SDK_CONFIG_JSON_FILENAME,
+  REACT_COMPONENTS_DIRECTORY_PATH, ANGULAR_COMPONENTS_DIRECTORY_PATH } from '../../constants.js';
+import { dir } from 'console';
+
+
+const getBuildAssetsQuestions = async ()  => {
+  const message = "\n**IMPORTANT** Building Jest Assets will remove any local components in your components directory!\n";
+  console.log(`${chalk.green.bold(message)}`);
+
+  return [
+    {
+      name: 'buildAssets',
+      type: 'confirm',
+      message: 'Generate Jest Assets ?',
+      default: false
+    }
+  ];
+};
+
+
+
+
+const deleteTestDirectory = async(dirPath) => {
+
+  try {
+    fs.rmSync(dirPath, { recursive: true });
+    // console.log(`${chalk.red.bold(dirPath)} is deleted from assets`);
+  } catch (err) {
+    console.log('no directory');
+    throw new Error(`No such directory ${dirPath}`);
+  }
+}
+
+const copyAssets = async(destinationPath) => {
+  const currentDirectory = process.cwd();
+  const framework = await getFramework();
+
+  const SDK_DIR = framework === "SDK-React" ? REACT_COMPONENTS_DIRECTORY_PATH : ANGULAR_COMPONENTS_DIRECTORY_PATH;
+
+  const srcDir = join(currentDirectory, SDK_DIR );
+
+
+
+  fs.cpSync(srcDir, destinationPath, { recursive: true});
+}
+
+const deleteAssets = async() => {
+  let args  = [ '','', '', 'Local', 'custom', 'Y'];
+  let myOptions = {};
+  myOptions["params"] = args;
+
+  await deleteAll(myOptions);
+
+  args  = [ '','', '', 'Local', 'override', 'Y'];
+  myOptions = {};
+  myOptions["params"] = args;
+
+  await deleteAll(myOptions);
+
+}
+
+const createJestAssets = async() => {
+
+  const framework = await getFramework();
+
+  // initially delete local assets
+  await deleteAssets();
+
+  let args  = [ '','', '', 'My', '0.0.1', 'DXIL', '', 'Pega'];
+  let myOptions = {};
+  myOptions["params"] = args;
+
+  await createAll(myOptions);
+  await overrideAll();
+
+
+  const jestAssetFrameworkPath = framework === "SDK-React" ? JEST_ASSETS_SDK_R: JEST_ASSETS_SDK_A;
+
+  // create All
+  // get current test assets and delete them
+  let createAllPath = path.join(path.resolve(), JEST_ASSETS_PATH, jestAssetFrameworkPath, JEST_CREATE_ALL_PATH);
+  const fileDirList = await getListOfDirectories(createAllPath);
+
+  for (const index in fileDirList) {
+    const directoryToDelete = fileDirList[index];
+    // console.log(chalk.bold.green("Deleting: " + componentToDelete));
+    // eslint-disable-next-line no-await-in-loop
+    await deleteTestDirectory(path.join(createAllPath, directoryToDelete));
+  }
+
+
+
+  await copyAssets(createAllPath);
+  await deleteAssets();
+
+  // create
+  args  = [ '','', '', 'Field', 'Text', 'MyTestText', 'My Test Text', '0.0.1','DXIL', '', 'My Test Text Description', 'Pega'];
+  myOptions = {};
+  myOptions["params"] = args;
+
+  await create(myOptions);
+  await overrideAll();
+
+  // get current test assets and delete them
+  let createPath = path.join(path.resolve(), JEST_ASSETS_PATH, jestAssetFrameworkPath, JEST_CREATE_PATH);
+  const fileDirList2 = await getListOfDirectories(createPath);
+
+  for (const index in fileDirList2) {
+    const directoryToDelete = fileDirList2[index];
+    // console.log(chalk.bold.green("Deleting: " + componentToDelete));
+    // eslint-disable-next-line no-await-in-loop
+    await deleteTestDirectory(path.join(createPath, directoryToDelete));
+  }
+
+
+
+  await copyAssets(createPath);
+  await deleteAssets();
+
+
+}
+
+
+export default async options => {
+  showVersion();
+
+  const questions = await getBuildAssetsQuestions();
+  const answers = await inquirer.prompt(questions);
+  const {  buildAssets } = answers;
+
+  if (buildAssets) {
+
+    await createJestAssets(false);
+
+  }
+
+
+};

package/src/tasks/create/templates/Constellation/field/Boolean/Boolean.ts.mustache

@@ -0,0 +1,35 @@
+function Boolean(value: any, { allowEmpty = true, tick = '', cross = '' } = {}) {
+  if (
+    (!allowEmpty && !value) ||
+    value === false ||
+    value?.toString()?.toLowerCase() === 'false' ||
+    value === 0 ||
+    value === '0'
+  ) {
+    return cross || '';
+  }
+  if (
+    value === true ||
+    value?.toString()?.toLowerCase() === 'true' ||
+    value === 1 ||
+    value === '1'
+  ) {
+    return tick || '';
+  }
+  if (
+    allowEmpty &&
+    (value === 'null' || value === '' || value === null || typeof value === 'undefined')
+  ) {
+    return '––';
+  }
+  return value;
+}
+
+export default {
+  TrueFalse: (value: any, options: Object) =>
+    Boolean(value, {
+      ...options,
+      tick: 'True',
+      cross: 'False'
+    })
+};

package/src/tasks/create/templates/Constellation/field/Boolean/demo.stories.tsx.mustache

@@ -1,38 +1,29 @@
+
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
 import { useState } from 'react';
-import { withKnobs } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { configProps, stateProps } from './mock';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
 
-export default {
+const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
-  decorators: [withKnobs],
-  component: {{COMPONENT_CLASS_NAME}}
+  component: {{COMPONENT_CLASS_NAME}},
+  excludeStories: /.*Data$/
 };
 
-export const Base{{COMPONENT_CLASS_NAME}} = () => {
+export default meta;
+type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
+
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const [value, setValue] = useState(configProps.value);
 
   const props = {
     value,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    caption: configProps.caption,
-    validatemessage: configProps.validatemessage,
-    hideLabel: configProps.hideLabel,
-    testId: configProps.testId,
     additionalProps: configProps.additionalProps,
-    displayMode: configProps.displayMode,
-    variant: configProps.variant,
-    trueLabel: configProps.trueLabel,
-    falseLabel: configProps.falseLabel,
-    disabled: configProps.disabled,
-    readOnly: configProps.readOnly,
-    required: configProps.required,
     getPConnect: () => {
       return {
         getStateProps: () => {
@@ -57,7 +48,24 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
 
   return (
     <>
-      <{{COMPONENT_CLASS_NAME}} {...props} />
+      <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
     </>
   );
-};
+};
+
+Base{{COMPONENT_CLASS_NAME}}.args = {
+  label: configProps.label,
+  helperText: configProps.helperText,
+  caption: configProps.caption,
+  testId: configProps.testId,
+  readOnly: configProps.readOnly,
+  disabled: configProps.disabled,
+  required: configProps.required,
+  status: configProps.status,
+  hideLabel: configProps.hideLabel,
+  trueLabel: configProps.trueLabel,
+  falseLabel: configProps.falseLabel,
+  displayMode: configProps.displayMode,
+  variant: configProps.variant,
+  validatemessage: configProps.validatemessage
+};

package/src/tasks/create/templates/Constellation/field/Boolean/index.tsx.mustache

@@ -2,10 +2,9 @@ import {
   Checkbox as CosmosCheckbox,
   CheckboxGroup,
   FieldValueList,
-  Text
+  Text,
+  withConfiguration
 } from "@pega/cosmos-react-core";
-import PropTypes from "prop-types";
-
 
 import type { PConnFieldProps } from './PConnProps';
 
@@ -40,19 +39,19 @@ interface ActionsProps {
 
 // 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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
+function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const {
     getPConnect,
-    value,
-    label,
-    helperText,
+    value = false,
+    label = '',
+    helperText = '',
     caption,
     validatemessage,
     hideLabel,
     testId,
-    additionalProps,
+    additionalProps = {},
     displayMode,
-    variant,
+    variant = 'inline',
     trueLabel,
     falseLabel
   } = props;
@@ -62,7 +61,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const stateProps = pConn.getStateProps() as StateProps;
   const propName: string = stateProps.value;
 
-  let { readOnly, required, disabled } = props;
+  let { readOnly = false, required = false, disabled = false } = props;
   [readOnly, required, disabled] = [readOnly, required, disabled].map(
     (prop) => prop === true || (typeof prop === 'string' && prop === 'true')
   );
@@ -105,7 +104,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   }
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return ( <Styled{{COMPONENT_CLASS_NAME}}Wrapper> displayComponent </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
+    return ( <Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComponent} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
   }
 
   if (displayMode === "LABELS_LEFT") {
@@ -161,40 +160,4 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 };
 
 
-{{COMPONENT_CLASS_NAME}}.defaultProps = {
-  validatemessage: '',
-  value: false,
-  label: '',
-  hideLabel: false,
-  helperText: '',
-  disabled: false,
-  readOnly: false,
-  required: false,
-  testId: '',
-  additionalProps: {},
-  displayMode: null,
-  variant: 'inline',
-  displayValue: 'Yes/No',
-  trueLabel: '',
-  falseLabel: ''
-};
-
-{{COMPONENT_CLASS_NAME}}.propTypes = {
-  getPConnect: PropTypes.func.isRequired,
-  validatemessage: PropTypes.string,
-  label: PropTypes.string,
-  hideLabel: PropTypes.bool,
-  helperText: PropTypes.string,
-  value: PropTypes.bool,
-  caption: PropTypes.string.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,
-  additionalProps: PropTypes.objectOf(PropTypes.any),
-  displayMode: PropTypes.string,
-  variant: PropTypes.string,
-  displayValue: PropTypes.string,
-  trueLabel: PropTypes.string,
-  falseLabel: PropTypes.string
-};
+export default withConfiguration({{COMPONENT_CLASS_NAME}});

package/src/tasks/create/templates/Constellation/field/Boolean/mock.ts.mustache

@@ -14,7 +14,8 @@ export const configProps = {
   falseLabel: 'False',
   disabled: false,
   readOnly: false,
-  required: true
+  required: true,
+  status: ''
 };
 
 export const stateProps = {

package/src/tasks/create/templates/Constellation/field/Boolean/styles.ts.mustache

@@ -1,15 +1,8 @@
-
-// 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;
-//  `;
-// });
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/src/tasks/create/templates/Constellation/field/Date/{DateFormatter.js.mustache → DateFormatter.ts.mustache}

@@ -15,8 +15,8 @@ const types = ['fromNow', 'customFormat'];
 
 // value should be in ISO 8601 format.
 function DateFormatter(
-  value,
-  { type = types[1], format = "DD/MM/YYYY", tzone } = {}
+  value: any,
+  { type = types[1], format = "DD/MM/YYYY", tzone = null } = {}
 ) {
   if (!value) return value;
   switch (type) {
@@ -31,7 +31,7 @@ function DateFormatter(
 }
 
 // value should be in hh:mm:ss format (00:00:00 - 23:59:59).
-function TimeFormatter(value, options) {
+function TimeFormatter(value: any, options: any) {
   if (!value) return value;
   const { locale = "en-US" } = options;
   const timeOnlyRegex = /^(?:[01]\d|2[0123]):(?:[012345]\d):(?:[012345]\d)$/;
@@ -49,10 +49,10 @@ function TimeFormatter(value, options) {
 }
 
 export default {
-  Date: (value, options) => DateFormatter(value, { type: 'customFormat', ...options }),
-  'Date-Time-Default': (value, options) =>
+  Date: (value: any, options: any) => DateFormatter(value, { type: 'customFormat', ...options }),
+  'Date-Time-Default': (value: any, options: any) =>
     DateFormatter(value, { ...options, type: 'customFormat', format: 'lll' }),
-  'Time-Default': (value, options) =>
+  'Time-Default': (value: any, options: any) =>
     TimeFormatter(value, {
       ...options,
       type: 'customFormat',

package/src/tasks/create/templates/Constellation/field/Date/FormattedText.tsx.mustache

@@ -0,0 +1,20 @@
+import { FieldValueList } from '@pega/cosmos-react-core';
+
+import { format } from './date';
+
+export default function FormattedText(props: any) {
+  const { formatType = 'none', label, value, testId, hideLabel, variant = 'stacked', additionalProps = {} } = props;
+
+  let text = value;
+
+  text = format(text, formatType, additionalProps);
+
+  const fields = [
+    {
+      id: label.toLowerCase(),
+      name: hideLabel ? '' : label,
+      value: text
+    }
+  ];
+  return <FieldValueList variant={variant} fields={fields} data-testid={testId} />;
+}

package/{tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyDate/date.js → src/tasks/create/templates/Constellation/field/Date/date.ts.mustache}

@@ -1,6 +1,6 @@
-/* eslint-disable no-undef */
+// @ts-nocheck
 import dayjs from 'dayjs';
-import DateFormatter from './DateFormatter.js';
+import DateFormatter from './DateFormatter';
 
 import relativeTime from 'dayjs/plugin/relativeTime.js';
 import localizedFormat from 'dayjs/plugin/localizedFormat.js';
@@ -47,6 +47,7 @@ function getDateObject(text) {
 }
 
 function parseDateInISO(value) {
+  // eslint-disable-next-line prefer-regex-literals
   const isMilliSeconds = new RegExp('^[0-9]+$').exec(value);
   if (isMilliSeconds) {
     const date = new Date(parseInt(value, 10));

package/src/tasks/create/templates/Constellation/field/Date/demo.stories.tsx.mustache

@@ -1,16 +1,19 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
-import { withKnobs } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 import { configProps, stateProps } from './mock';
 import {{COMPONENT_CLASS_NAME}} from './index';
 
-export default {
+const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
-  decorators: [withKnobs],
-  component: {{COMPONENT_CLASS_NAME}}
+  component: {{COMPONENT_CLASS_NAME}},
+  excludeStories: /.*Data$/
 };
 
+export default meta;
+type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
+
 if (!window.PCore) {
   window.PCore = {};
 }
@@ -26,8 +29,11 @@ window.PCore.getEnvironmentInfo = () => {
   };
 };
 
-export const Base{{COMPONENT_CLASS_NAME}} = () => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {
+    value: configProps.value,
+    additionalProps: configProps.additionalProps,
+    hasSuggestions: configProps.hasSuggestions,
     getPConnect: () => {
       return {
         getActionsApi: () => {
@@ -51,29 +57,30 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
         acceptSuggestion: () => {/* nothing */},
         clearErrorMessages: () => {/* nothing */}
       };
-    },
-    value: configProps.value,
-    validatemessage: configProps.validatemessage,
-    label: configProps.label,
-    hideLabel: configProps.hideLabel,
-    helperText: configProps.helperText,
-    nextYearRange: configProps.nextYearRange,
-    previousYearRange: configProps.previousYearRange,
-    showWeekNumber: configProps.showWeekNumber,
-    testId: configProps.testId,
-    showAsFormattedText: configProps.showAsFormattedText,
-    additionalProps: configProps.additionalProps,
-    displayMode: configProps.displayMode,
-    variant: configProps.variant,
-    hasSuggestions: configProps.hasSuggestions,
-    disabled: configProps.disabled,
-    readOnly: configProps.readOnly,
-    required: configProps.required
+    }
   };
 
   return (
     <>
-      <{{COMPONENT_CLASS_NAME}} {...props} />
+      <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
     </>
   );
 };
+
+Base{{COMPONENT_CLASS_NAME}}.args = {
+  label: configProps.label,
+  helperText: configProps.helperText,
+  showWeekNumber: configProps.showWeekNumber,
+  testId: configProps.testId,
+  readOnly: configProps.readOnly,
+  disabled: configProps.disabled,
+  required: configProps.required,
+  status: configProps.status,
+  hideLabel: configProps.hideLabel,
+  nextYearRange: configProps.nextYearRange,
+  previousYearRange: configProps.previousYearRange,
+  showAsFormattedText: configProps.showAsFormattedText,
+  displayMode: configProps.displayMode,
+  variant: configProps.variant,
+  validatemessage: configProps.validatemessage
+};