@pega/custom-dx-components 23.1.10 → 23.1.11

package/src/util.js

@@ -30,13 +30,14 @@ export const checkPathAccess = async (path, options = {}) => {
   try {
     await access(path, fs.constants.R_OK);
   } catch (err) {
-    const message = errorMessage || `${chalk.red.bold('ERROR')} Could not able to access path - ${path}`;
+    const message =
+      errorMessage || `${chalk.red.bold('ERROR')} Could not able to access path - ${path}`;
     console.error(message);
     process.exit(1);
   }
 };
 
-export const deleteLocalComponent = async (componentKey) => {
+export const deleteLocalComponent = async componentKey => {
   const currentDirectory = process.cwd();
   const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
 
@@ -46,7 +47,9 @@ export const deleteLocalComponent = async (componentKey) => {
   data = JSON.parse(data);
 
   if (!data[COMPONENTS_DIRECTORY_PATH]) {
-    console.error(`${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`);
+    console.error(
+      `${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`
+    );
     process.exit(1);
   }
 
@@ -61,7 +64,7 @@ export const deleteLocalComponent = async (componentKey) => {
   }
 };
 
-export const getHttpsAgent = (serverConfig) => {
+export const getHttpsAgent = serverConfig => {
   const agentOptions = { rejectUnauthorized: false };
   if (serverConfig.legacyTLS) {
     agentOptions.secureOptions = crypto.constants.SSL_OP_LEGACY_SERVER_CONNECT;
@@ -69,7 +72,7 @@ export const getHttpsAgent = (serverConfig) => {
   return new https.Agent(agentOptions);
 };
 
-export const deleteServerComponent = async (componentKey) => {
+export const deleteServerComponent = async componentKey => {
   const serverConfig = await getPegaServerConfig();
   const { server, user, password } = serverConfig;
   const url = constructCompleteUrl(server, DELETE_COMPONENT_SERVICE_REST_ENDPOINT);
@@ -79,7 +82,11 @@ export const deleteServerComponent = async (componentKey) => {
     const OauthData = fs.readFileSync(TOKEN_PATH, 'utf8');
 
     if (OauthData) {
-      const { access_token: accessToken, token_type: tokenType, refresh_token: refreshToken } = JSON.parse(OauthData);
+      const {
+        access_token: accessToken,
+        token_type: tokenType,
+        refresh_token: refreshToken
+      } = JSON.parse(OauthData);
       fetch(deleteUrl, {
         method: 'DELETE',
         agent: getHttpsAgent(serverConfig),
@@ -87,8 +94,8 @@ export const deleteServerComponent = async (componentKey) => {
           Authorization: `${tokenType} ${accessToken}`
         }
       })
-        .then((response) => response.text())
-        .then((resp) => {
+        .then(response => response.text())
+        .then(resp => {
           let respData;
           try {
             respData = JSON.parse(resp);
@@ -103,7 +110,7 @@ export const deleteServerComponent = async (componentKey) => {
             throw new Error(`${respData.message}`);
           }
         })
-        .catch((e) => Promise.reject(`${chalk.bold.red(e)}`));
+        .catch(e => Promise.reject(`${chalk.bold.red(e)}`));
     }
   } catch (error) {
     console.log(`\n${chalk.bold.red(error)}`);
@@ -121,30 +128,32 @@ export const getComponents = async () => {
   data = JSON.parse(data);
 
   if (!data[COMPONENTS_DIRECTORY_PATH]) {
-    console.error(`${chalk.red.bold('ERROR')} Could not find components directory path in config.json`);
+    console.error(
+      `${chalk.red.bold('ERROR')} Could not find components directory path in config.json`
+    );
     process.exit(1);
   }
 
   const directory = join(currentDirectory, data[COMPONENTS_DIRECTORY_PATH]);
   return fs
     .readdirSync(directory, { withFileTypes: true })
-    .filter((dirent) => dirent.isDirectory())
-    .map((dirent) => dirent.name);
+    .filter(dirent => dirent.isDirectory())
+    .map(dirent => dirent.name);
 };
 
 export const getSubComponents = async (directory, type) => {
   const subDirectory = join(directory, type);
   return fs
     .readdirSync(subDirectory, { withFileTypes: true })
-    .filter((dirent) => dirent.isDirectory())
-    .map((dirent) => dirent.name);
+    .filter(dirent => dirent.isDirectory())
+    .map(dirent => dirent.name);
 };
 
-export const getDirectoryFiles = async (directory) => {
+export const getDirectoryFiles = async directory => {
   return fs
     .readdirSync(directory, { withFileTypes: true })
-    .filter((dirent) => !dirent.isDirectory())
-    .map((dirent) => dirent.name);
+    .filter(dirent => !dirent.isDirectory())
+    .map(dirent => dirent.name);
 };
 
 export const getComponentsObj = async () => {
@@ -155,7 +164,7 @@ export const getComponentsObj = async () => {
 
   if (componentList.length > 0) {
     compList.push(
-      ...componentList.map((name) => {
+      ...componentList.map(name => {
         const container = {};
         container.name = name;
         container.value = name;
@@ -190,7 +199,7 @@ export const getComponentDefaults = async () => {
   return config.component;
 };
 
-export const getComponentDirectoryPath = async (componentKey) => {
+export const getComponentDirectoryPath = async componentKey => {
   const currentDirectory = process.cwd();
   const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
 
@@ -200,7 +209,9 @@ export const getComponentDirectoryPath = async (componentKey) => {
   data = JSON.parse(data);
 
   if (!data[COMPONENTS_DIRECTORY_PATH]) {
-    console.error(`${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`);
+    console.error(
+      `${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`
+    );
     process.exit(1);
   }
 
@@ -212,11 +223,11 @@ export const compileMustacheTemplate = (file, data) => {
   return mustache.render(content, data);
 };
 
-export const isPascalCase = (string) => {
+export const isPascalCase = string => {
   return string === pascalCase(string);
 };
 
-export const convertIntoPascalCase = (string) => {
+export const convertIntoPascalCase = string => {
   return pascalCase(string);
 };
 
@@ -224,7 +235,7 @@ export const constructCompleteUrl = (baseServer, endPoint) => {
   return baseServer.endsWith('/') ? `${baseServer}${endPoint}` : `${baseServer}/${endPoint}`;
 };
 
-export const sanitize = (str) => {
+export const sanitize = str => {
   /* Allow only numbers and case insensitive alphabets */
   str = str.replace(/[^a-zA-Z0-9 ]/g, '');
   /* spaces will be replaced by - */
@@ -232,13 +243,13 @@ export const sanitize = (str) => {
   return str;
 };
 
-export const validateSemver = (str) => {
+export const validateSemver = str => {
   /* basic semver version validation - 0.0.1-dev */
   const regex = /^[0-9]\d*\.\d+\.\d+(?:-[a-zA-Z0-9]+)?$/g;
   return regex.test(str);
 };
 
-export const validateRulesetVersion = (str) => {
+export const validateRulesetVersion = str => {
   /* Ruleset version range - 01-99 */
   if (str.indexOf('00') !== -1) {
     return false;
@@ -268,20 +279,24 @@ export const showVersion = () => {
   const nodeMinorVersion = parseInt(arNodeVersion[1]);
 
   if (nodeMajorVersion < 18) {
-    console.log(chalk.redBright(`DX Component Builder - SDK requires node v18 or greater, current version: ${process.version}`));
+    console.log(
+      chalk.redBright(
+        `DX Component Builder - SDK requires node v18 or greater, current version: ${process.version}`
+      )
+    );
     process.exit(1);
   }
 
   const hasGit = checkGit(process.cwd());
 
   if (!hasGit) {
-    console.log(chalk.redBright('DX Component Builder - SDK git to be installed.'));
+    console.log(chalk.redBright('DX Component Builder - Git needs to be installed.'));
     process.exit(1);
   }
 };
 
 export const getOOTBComponents = async () => {
-  return new Promise((resolve) => {
+  return new Promise(resolve => {
     fs.readFile(OOTB_COMPONENTS, 'utf-8', async (error, ootbComponentsData) => {
       if (error) {
         try {
@@ -298,12 +313,12 @@ export const getOOTBComponents = async () => {
                 Authorization: `${tokenType} ${accessToken}`
               }
             })
-              .then((response) => response.text())
-              .then((data) => {
+              .then(response => response.text())
+              .then(data => {
                 if (data.charAt() === '[') {
                   data = data.slice(1, -1);
                   data = data.replace(/\s/g, '');
-                  fs.writeFile(OOTB_COMPONENTS, data, (err) => {
+                  fs.writeFile(OOTB_COMPONENTS, data, err => {
                     if (err) {
                       console.error(err);
                     }
@@ -313,14 +328,14 @@ export const getOOTBComponents = async () => {
                   data = JSON.parse(data);
                   if (data && data.errors) {
                     const errMessages = data.errors;
-                    errMessages.forEach((msgArr) => {
+                    errMessages.forEach(msgArr => {
                       throw new Error(`Failed with error - ${JSON.stringify(msgArr.message)}`);
                     });
                   }
                 }
               })
               // eslint-disable-next-line prefer-promise-reject-errors
-              .catch((e) => Promise.reject(`${chalk.bold.red(e)}`));
+              .catch(e => Promise.reject(`${chalk.bold.red(e)}`));
           }
         } catch (e) {
           throw new Error('Error occurred in validation', e);
@@ -332,7 +347,7 @@ export const getOOTBComponents = async () => {
   });
 };
 
-export const deleteInfinityServerComponent = async (componentKey) => {
+export const deleteInfinityServerComponent = async componentKey => {
   const serverConfig = await getPegaServerConfig();
   const { server } = serverConfig;
   const url = constructCompleteUrl(server, DELETE_COMPONENT_SERVICE_REST_ENDPOINT);
@@ -352,11 +367,11 @@ export const deleteInfinityServerComponent = async (componentKey) => {
           Authorization: `${tokenType} ${accessToken}`
         }
       })
-        .then((response) => {
+        .then(response => {
           status = response.status;
           return response.text();
         })
-        .then((resp) => {
+        .then(resp => {
           let respData;
           try {
             respData = JSON.parse(resp);
@@ -371,10 +386,12 @@ export const deleteInfinityServerComponent = async (componentKey) => {
             throw new Error(`${respData.message}`);
           }
         })
-        .catch((e) => {
+        .catch(e => {
           if (status === 403) {
             // eslint-disable-next-line prefer-promise-reject-errors
-            Promise.reject(`${chalk.bold.red('Error forbidden: User does not have privileges to Delete.')}`);
+            Promise.reject(
+              `${chalk.bold.red('Error forbidden: User does not have privileges to Delete.')}`
+            );
           } else {
             // eslint-disable-next-line prefer-promise-reject-errors
             Promise.reject(`${chalk.bold.red(e)}`);
@@ -386,9 +403,12 @@ export const deleteInfinityServerComponent = async (componentKey) => {
   }
 };
 
-export const deleteLaunchpadServerComponent = async (componentKey) => {
+export const deleteLaunchpadServerComponent = async componentKey => {
   const { server, isolationId } = await getPegaServerConfig();
-  const deleteUrl = constructCompleteUrl(server, LP_DELETE_COMPONENT_SERVICE_REST_ENDPOINT.replace('{isolationId}', isolationId));
+  const deleteUrl = constructCompleteUrl(
+    server,
+    LP_DELETE_COMPONENT_SERVICE_REST_ENDPOINT.replace('{isolationId}', isolationId || 'undefined')
+  );
   const [componentName] = componentKey.split('~|~');
 
   try {
@@ -416,13 +436,15 @@ export const deleteLaunchpadServerComponent = async (componentKey) => {
         headers,
         body: JSON.stringify(apiBody)
       })
-        .then((response) => {
+        .then(response => {
           status = response.status;
           return response.text();
         })
-        .then((response) => {
+        .then(response => {
           if (status === 401) {
-            throw new Error('Error occurred in authentication. Please regenerate using authenticate');
+            throw new Error(
+              'Error occurred in authentication. Please regenerate using authenticate'
+            );
             // console.log(accessTokenUri, refreshToken);
             /* TODO - Handle refresh_token */
           } else if (status === 200 || status === 201) {
@@ -431,10 +453,12 @@ export const deleteLaunchpadServerComponent = async (componentKey) => {
             throw new Error(`${response.message}`);
           }
         })
-        .catch((e) => {
+        .catch(e => {
           if (status === 403) {
             // eslint-disable-next-line prefer-promise-reject-errors
-            Promise.reject(`${chalk.bold.red('Error forbidden: User does not have privileges to Delete.')}`);
+            Promise.reject(
+              `${chalk.bold.red('Error forbidden: User does not have privileges to Delete.')}`
+            );
           } else {
             // eslint-disable-next-line prefer-promise-reject-errors
             Promise.reject(`${chalk.bold.red(e)}`);

package/tests/assets/components/create/Pega_DXIL_MyTestText/PConnProps.d.ts

@@ -0,0 +1,46 @@
+import  {PConnect } from '@pega/pcore-pconnect-typedefs';
+
+// PConnProps.d.ts
+// This gives us a place to have each component (which is most DX Components) that is
+//  expected to have a getPConnect extend its props (from BaseProps)
+//  such that every component will be expected to have a getPConnect() function
+//  that returns a PConnect object. (new/better way of doing .propTypes).
+//  This PConnProps can be extended to include other props that we know are in every component
+export interface PConnProps {
+  // getPConnect should exist for every C11n component. (add @ts-ignore in special cases where it isn't)
+  getPConnect: () => typeof PConnect;
+
+  // Allow any/all other key/value pairs in the BaseProps for now
+  //  TODO: refine which other props are always expected for various component
+  //    types and consider further interface "subclassing". For example, we may
+  //    want to create a "BasePropsForm" that gives guidance on required, readonly, etc.
+  //    and any other props that every Form component expects.
+  //    For example, see the PConnFieldProps below.
+  // NOTE: if you uncomment the line below, the PConnProps type will allow
+  //  otherwise undefined types to appear. This can be helpful for debugging
+  //  or when adding new components whose types aren't yet known.
+  // [key: string]: any;
+}
+
+
+// PConnFieldProps extends PConnProps to bring in the common properties that are
+// associated with most field components (ex: Dropdown, TextInput, etc.) in the
+//  components/field directory
+export interface PConnFieldProps extends PConnProps {
+  label: string,
+  required: boolean,
+  disabled: boolean,
+  value: any,
+  validatemessage: string,
+  status?: string,
+  onChange?: any,
+  onBlur?: any,
+  readOnly: boolean,
+  testId: string,
+  helperText: string,
+  displayMode?: string,
+  hideLabel: boolean,
+  placeholder?: string,
+  fieldMetadata?: any,
+  additionalProps?: any
+}

package/tests/assets/components/create/Pega_DXIL_MyTestText/demo.stories.tsx

@@ -0,0 +1,54 @@
+
+/* eslint-disable react/jsx-no-useless-fragment */
+// @ts-nocheck
+import { useState } from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { stateProps, configProps } from './mock';
+
+import PegaDxilMyTestText from './index';
+
+export default {
+  title: 'PegaDxilMyTestText',
+  decorators: [withKnobs],
+  component: PegaDxilMyTestText
+};
+
+export const BasePegaDxilMyTestText = () => {
+
+  const [value, setValue] = useState(configProps.value);
+
+  const props = {
+    value,
+    placeholder: configProps.placeholder,
+    label: configProps.label,
+    testId: configProps.testId,
+    hasSuggestions: configProps.hasSuggestions,
+
+    getPConnect: () => {
+      return {
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            },
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <PegaDxilMyTestText {...props} />
+    </>
+  );
+};

package/tests/assets/components/create/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/components/create/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/components/create/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/components/createAll/Constellation/Pega_DXIL_MyBoolean/PConnProps.d.ts

@@ -0,0 +1,46 @@
+import  {PConnect } from '@pega/pcore-pconnect-typedefs';
+
+// PConnProps.d.ts
+// This gives us a place to have each component (which is most DX Components) that is
+//  expected to have a getPConnect extend its props (from BaseProps)
+//  such that every component will be expected to have a getPConnect() function
+//  that returns a PConnect object. (new/better way of doing .propTypes).
+//  This PConnProps can be extended to include other props that we know are in every component
+export interface PConnProps {
+  // getPConnect should exist for every C11n component. (add @ts-ignore in special cases where it isn't)
+  getPConnect: () => typeof PConnect;
+
+  // Allow any/all other key/value pairs in the BaseProps for now
+  //  TODO: refine which other props are always expected for various component
+  //    types and consider further interface "subclassing". For example, we may
+  //    want to create a "BasePropsForm" that gives guidance on required, readonly, etc.
+  //    and any other props that every Form component expects.
+  //    For example, see the PConnFieldProps below.
+  // NOTE: if you uncomment the line below, the PConnProps type will allow
+  //  otherwise undefined types to appear. This can be helpful for debugging
+  //  or when adding new components whose types aren't yet known.
+  // [key: string]: any;
+}
+
+
+// PConnFieldProps extends PConnProps to bring in the common properties that are
+// associated with most field components (ex: Dropdown, TextInput, etc.) in the
+//  components/field directory
+export interface PConnFieldProps extends PConnProps {
+  label: string,
+  required: boolean,
+  disabled: boolean,
+  value: any,
+  validatemessage: string,
+  status?: string,
+  onChange?: any,
+  onBlur?: any,
+  readOnly: boolean,
+  testId: string,
+  helperText: string,
+  displayMode?: string,
+  hideLabel: boolean,
+  placeholder?: string,
+  fieldMetadata?: any,
+  additionalProps?: any
+}

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyBoolean/boolean-format.ts

@@ -0,0 +1,25 @@
+import Boolean from "./Boolean";
+
+export default {
+  ...Boolean
+};
+
+
+
+export function format(value: any, type: string) {
+  let formattedValue;
+
+  switch (type?.toLowerCase()) {
+
+
+    case "boolean":
+    case "checkbox": {
+      formattedValue = Boolean.TrueFalse(value, { allowEmpty: false });
+      break;
+    }
+
+    default:
+      formattedValue = value;
+  }
+  return formattedValue;
+}

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyBoolean/demo.stories.tsx

@@ -0,0 +1,64 @@
+
+/* eslint-disable react/jsx-no-useless-fragment */
+// @ts-nocheck
+import { useState } from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { configProps, stateProps } from './mock';
+
+import PegaDxilMyBoolean from './index';
+
+export default {
+  title: 'PegaDxilMyBoolean',
+  decorators: [withKnobs],
+  component: PegaDxilMyBoolean
+};
+
+export const BasePegaDxilMyBoolean = () => {
+
+  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: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            },
+            triggerFieldChange: () => { /* nothing */}
+          };
+        },
+        getValidationApi: () => {
+          return {
+            validate: () => { /* nothing */}
+          };
+        }
+      };
+    }
+  };
+
+  return (
+    <>
+      <PegaDxilMyBoolean {...props} />
+    </>
+  );
+};