@pega/dx-component-builder-sdk 0.1.7 → 0.1.8

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/demo.stories.jsx.mustache

@@ -0,0 +1,68 @@
+import { withKnobs } from '@storybook/addon-knobs';
+
+import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+
+import { configProps, operatorDetails } from './mock.stories';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+window.PCore.getLocaleUtils = () => {
+  return {
+    getLocaleValue: value => {
+      return value;
+    }
+  };
+};
+
+window.PCore.getUserApi = () => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
+};
+
+export const base{{COMPONENT_CLASS_NAME}} = () => {
+
+  const props = {
+    label: configProps.label,
+    createLabel: configProps.createLabel,
+    updateLabel: configProps.updateLabel,
+    createOperator: configProps.createOperator,
+    updateOperator: configProps.updateOperator,
+    createDateTime: configProps.createDateTime,
+    updateDateTime: configProps.updateDateTime,
+    hideLabel: configProps.hideLabel,
+
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {},
+            triggerFieldChange: () => {}
+          };
+        },
+        ignoreSuggestion: () => {},
+        acceptSuggestion: () => {},
+        setInheritedProps: () => {},
+        resolveConfigProps: () => {}
+      };
+    }
+};
+
+return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} />
+    </>
+  );
+};

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/index.jsx.mustache

@@ -1,9 +1,10 @@
-import { Fragment, memo } from 'react';
+/* eslint-disable no-nested-ternary */
+import { Fragment } from 'react';
 import { DateTimeDisplay, Card, CardHeader, CardContent, Flex } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
 
 // includes in bundle
-import Operator from './Operator';
+import Operator from './Operator.jsx';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -27,8 +28,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
     resolveLabel,
     resolveOperator,
     resolveDateTime,
-    hideLabel,
-    defVal
+    hideLabel
   } = props;
 
 
@@ -84,13 +84,13 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
   resolveLabel: null,
   resolveOperator: null,
   resolveDateTime: null,
-  hideLabel: false,
-  defVal: '––'
+  hideLabel: false
 };
 
 {{COMPONENT_CLASS_NAME}}.propTypes = {
   getPConnect: PropTypes.func.isRequired,
   label: PropTypes.string,
+  title: PropTypes.string,
   createLabel: PropTypes.string,
   updateLabel: PropTypes.string,
   resolveLabel: PropTypes.string,
@@ -105,6 +105,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
 
 // as objects are there in props, shallow comparision fails & re-rendering of comp happens even with
 // same key value pairs in obj. hence using custom comparison function on when to re-render
-//const comparisonFn = (prevProps, nextProps) => {
-//  return prevProps.updateDateTime === nextProps.updateDateTime;
-//};
+// const comparisonFn = (prevProps, nextProps) => {
+//   return prevProps.updateDateTime === nextProps.updateDateTime;
+// };

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/mock.stories.js.mustache

@@ -0,0 +1,51 @@
+export const configProps = {
+  label: 'Create operator',
+  createLabel: 'Created',
+  updateLabel: 'Updated',
+  updateDateTime: '2023-01-16T14:53:33.280Z',
+  createDateTime: '2023-01-16T14:53:33.198Z',
+  updateOperator: {
+    userId: 'admin@mediaco',
+    userName: 'admin'
+  },
+  createOperator: {
+    userId: 'admin@mediaco',
+    userName: 'admin'
+  },
+  hideLabel: true,
+  key: '_532zx1dah',
+  displayMode: 'LABELS_LEFT'
+};
+
+export const operatorDetails = {
+  data: {
+    pzLoadTime: 'January 18, 2023 10:33:19 AM EST',
+    pzPageNameHash: '_pa1519192551088960pz',
+    pyOperatorInfo: {
+      pyUserName: 'french DigV2',
+      pyPosition: '',
+      pyImageInsKey: '',
+      pySkills: [
+        {
+          pySkillName: '',
+          pzIndexOwnerKey: 'DATA-ADMIN-OPERATOR-ID FRENCHTEST.DIGV2',
+          pySkillRating: 0
+        }
+      ],
+      pyReportToUserName: '',
+      pyReportTo: '',
+      pyOrganization: 'DXIL',
+      pyTitle: '',
+      pyLabel: 'frenchTest.DigV2',
+      pyEmailAddress: 'User@DigV2',
+      pyTelephone: ''
+    }
+  },
+  status: 200,
+  statusText: '',
+  headers: {
+    'content-length': '435',
+    'content-type': 'application/json;charset=UTF-8'
+  },
+  request: {}
+};

package/src/tasks/map/map.js

@@ -56,8 +56,6 @@ export const updateComponentMap = async (componentKey, category = CATEGORY_CUSTO
 
     mapData = mapDataStart.concat(importFull).concat("\n").concat(mapDataEnd);
 
-
-
     // add map
     let endMapIndex = mapData.indexOf(MAP_END_TAG);
     mapDataStart = mapData.substring(0, endMapIndex);
@@ -65,11 +63,6 @@ export const updateComponentMap = async (componentKey, category = CATEGORY_CUSTO
 
     mapData = mapDataStart.concat("  ").concat(mapFull).concat("\n").concat(mapDataEnd);
 
-
-    //console.log(mapData);
-
-    //console.log("update");
-
     fs.writeFileSync(pegaLocalComponentMapPath, mapData, { encoding: 'utf8' });
 
 

package/src/tasks/override/index.js

@@ -10,7 +10,7 @@ import ncp from 'ncp';
 import chalk from 'chalk';
 import { updateComponentMap  } from '../map/map.js';
 
-import { checkPathAccess, getTokenUrl, showVersion, getDirectoryFiles } from '../../util.js';
+import { checkPathAccess, getTokenUrl, showVersion, getDirectoryFiles, getPegaConfig } from '../../util.js';
 import {
   convertIntoPascalCase,
   compileMustacheTemplate,
@@ -39,9 +39,21 @@ const copyComponentTemplate = async options => {
 };
 
 
+const getListAvailableComponents = async (type) => {
+  const components = await getComponents(false, CATEGORY_OVERRIDE);
+  const fullList = COMPONENT_SCHEMA.overrideComponent[type];
+  let availList = [];
+  for (var el in fullList) {
+    if (components.includes(fullList[el].value)) {
+      availList.push(new inquirer.Separator("** " + fullList[el].name));
+    }
+    else {
+      availList.push(fullList[el]);
+    }
+  }
 
-
-
+  return availList;
+}
 
 
 const validateCompile = async (
@@ -52,8 +64,15 @@ const validateCompile = async (
   options
 ) => {
 
+  let pegaConfig =
+  await getPegaConfig();
+  let templateParentDir = "node_modules/@pega/react-sdk-overrides/lib";
+  if (pegaConfig['override-templates-path'] && pegaConfig['override-templates-path'] != "") {
+    templateParentDir = pegaConfig['override-templates-path'];
+  }
+
   // componentName has sub directory if components are in a sub directory of main "type"
-  const overrideDirectory = `node_modules/@pega/react-sdk-overrides/lib/${type}/${componentName}`;
+  const overrideDirectory = `${templateParentDir}/${type}/${componentName}`;
 
   await checkPathAccess(overrideDirectory);
 
@@ -130,6 +149,11 @@ export default async options => {
   let componentDefaults = await getComponentDefaults();
   componentDefaults.library = library;
 
+  const formsList = await getListAvailableComponents("forms");
+  const desList = await getListAvailableComponents("designSystemExtensions");
+  const templateList = await getListAvailableComponents("templates");
+  const widgetList = await getListAvailableComponents("widgets");
+  const infraList = await getListAvailableComponents("infra");
 
   const questions = [
     {
@@ -145,7 +169,8 @@ export default async options => {
       name: 'componentName',
       type: 'rawlist',
       message: 'Enter component to be overridden',
-      choices: COMPONENT_SCHEMA.overrideComponent.forms,
+      choices: formsList,
+      pageSize: 15,
       when(answers) {
         return answers.type === 'forms' || promptType === 'forms';
       }
@@ -154,7 +179,8 @@ export default async options => {
       name: 'componentName',
       type: 'rawlist',
       message: 'Enter component to be overridden',
-      choices: COMPONENT_SCHEMA.overrideComponent.designSystemExtensions,
+      choices: desList,
+      pageSize: 15,
       when(answers) {
         return answers.type === 'designSystemExtensions' || promptType === 'designSystemExtensions';
       }
@@ -163,7 +189,8 @@ export default async options => {
       name: 'componentName',
       type: 'rawlist',
       message: 'Enter component to be overridden',
-      choices: COMPONENT_SCHEMA.overrideComponent.infra,
+      choices: infraList,
+      pageSize: 15,
       when(answers) {
         return answers.type === 'infra'  || promptType === 'infra';
       }
@@ -172,7 +199,8 @@ export default async options => {
       name: 'componentName',
       type: 'rawlist',
       message: 'Enter component to be overridden',
-      choices: COMPONENT_SCHEMA.overrideComponent.templates,
+      choices: templateList,
+      pageSize: 15,
       when(answers) {
         return answers.type === 'templates' || promptType === 'templates';
       }
@@ -181,7 +209,8 @@ export default async options => {
       name: 'componentName',
       type: 'rawlist',
       message: 'Enter component to be overridden',
-      choices: COMPONENT_SCHEMA.overrideComponent.widgets,
+      choices: widgetList,
+      pageSize: 15,
       when(answers) {
         return answers.type === 'widgets'  || promptType === 'widgets';
       }

package/src/tasks/create/templates/Constellation/Field/Picklist/picklist.js.mustache

@@ -1,43 +0,0 @@
-import {EmailDisplay, PhoneDisplay, URLDisplay } from "@pega/cosmos-react-core";
-
-export const formatExists = (formatterVal) => {
-    const formatterValues = [
-      "TextInput",
-      "WorkStatus",
-      "RichText",
-      "Email",
-      "Phone",
-      "URL",
-      "Operator"
-    ];
-    let isformatter = false;
-    if (formatterValues.includes(formatterVal)) {
-      isformatter = true;
-    }
-    return isformatter;
-  };
-
-
-export const textFormatter = (formatter,value) => {
-  let displayComponent = null;
-  switch(formatter){
-    case "TextInput" : {
-      displayComponent = value;
-      break;
-    }
-    case "Email" : {
-      displayComponent = (<EmailDisplay value={value} displayText={value} variant="link" />);
-      break;
-    }
-    case "Phone" : {
-      displayComponent = (<PhoneDisplay value={value} variant="link" />);
-      break;
-    }
-    case "URL" : {
-      displayComponent = (<URLDisplay target="_blank" value={value} displayText={value} variant="link" />);
-      break;
-    }
-    // no default
-  }
-  return displayComponent;
-};

package/src/tasks/create/templates/Constellation/Field/Text-Email/text-email.js.mustache

@@ -1,43 +0,0 @@
-import {EmailDisplay, PhoneDisplay, URLDisplay } from "@pega/cosmos-react-core";
-
-export const formatExists = (formatterVal) => {
-    const formatterValues = [
-      "TextInput",
-      "WorkStatus",
-      "RichText",
-      "Email",
-      "Phone",
-      "URL",
-      "Operator"
-    ];
-    let isformatter = false;
-    if (formatterValues.includes(formatterVal)) {
-      isformatter = true;
-    }
-    return isformatter;
-  };
-
-
-export const textFormatter = (formatter,value) => {
-  let displayComponent = null;
-  switch(formatter){
-    case "TextInput" : {
-      displayComponent = value;
-      break;
-    }
-    case "Email" : {
-      displayComponent = (<EmailDisplay value={value} displayText={value} variant="link" />);
-      break;
-    }
-    case "Phone" : {
-      displayComponent = (<PhoneDisplay value={value} variant="link" />);
-      break;
-    }
-    case "URL" : {
-      displayComponent = (<URLDisplay target="_blank" value={value} displayText={value} variant="link" />);
-      break;
-    }
-    // no default
-  }
-  return displayComponent;
-};

package/src/tasks/create/templates/Constellation/Field/Text-Input/text-input.js.mustache

@@ -1,43 +0,0 @@
-import {EmailDisplay, PhoneDisplay, URLDisplay } from "@pega/cosmos-react-core";
-
-export const formatExists = (formatterVal) => {
-    const formatterValues = [
-      "TextInput",
-      "WorkStatus",
-      "RichText",
-      "Email",
-      "Phone",
-      "URL",
-      "Operator"
-    ];
-    let isformatter = false;
-    if (formatterValues.includes(formatterVal)) {
-      isformatter = true;
-    }
-    return isformatter;
-  };
-
-
-export const textFormatter = (formatter,value) => {
-  let displayComponent = null;
-  switch(formatter){
-    case "TextInput" : {
-      displayComponent = value;
-      break;
-    }
-    case "Email" : {
-      displayComponent = (<EmailDisplay value={value} displayText={value} variant="link" />);
-      break;
-    }
-    case "Phone" : {
-      displayComponent = (<PhoneDisplay value={value} variant="link" />);
-      break;
-    }
-    case "URL" : {
-      displayComponent = (<URLDisplay target="_blank" value={value} displayText={value} variant="link" />);
-      break;
-    }
-    // no default
-  }
-  return displayComponent;
-};

package/src/tasks/create/templates/Constellation/Field/Text-Paragraph/text-paragraph.js.mustache

@@ -1,43 +0,0 @@
-import {EmailDisplay, PhoneDisplay, URLDisplay } from "@pega/cosmos-react-core";
-
-export const formatExists = (formatterVal) => {
-    const formatterValues = [
-      "TextInput",
-      "WorkStatus",
-      "RichText",
-      "Email",
-      "Phone",
-      "URL",
-      "Operator"
-    ];
-    let isformatter = false;
-    if (formatterValues.includes(formatterVal)) {
-      isformatter = true;
-    }
-    return isformatter;
-  };
-
-
-export const textFormatter = (formatter,value) => {
-  let displayComponent = null;
-  switch(formatter){
-    case "TextInput" : {
-      displayComponent = value;
-      break;
-    }
-    case "Email" : {
-      displayComponent = (<EmailDisplay value={value} displayText={value} variant="link" />);
-      break;
-    }
-    case "Phone" : {
-      displayComponent = (<PhoneDisplay value={value} variant="link" />);
-      break;
-    }
-    case "URL" : {
-      displayComponent = (<URLDisplay target="_blank" value={value} displayText={value} variant="link" />);
-      break;
-    }
-    // no default
-  }
-  return displayComponent;
-};

package/src/tasks/create/templates/Constellation/Field/Text-Phone/text-phone.js.mustache

@@ -1,43 +0,0 @@
-import {EmailDisplay, PhoneDisplay, URLDisplay } from "@pega/cosmos-react-core";
-
-export const formatExists = (formatterVal) => {
-    const formatterValues = [
-      "TextInput",
-      "WorkStatus",
-      "RichText",
-      "Email",
-      "Phone",
-      "URL",
-      "Operator"
-    ];
-    let isformatter = false;
-    if (formatterValues.includes(formatterVal)) {
-      isformatter = true;
-    }
-    return isformatter;
-  };
-
-
-export const textFormatter = (formatter,value) => {
-  let displayComponent = null;
-  switch(formatter){
-    case "TextInput" : {
-      displayComponent = value;
-      break;
-    }
-    case "Email" : {
-      displayComponent = (<EmailDisplay value={value} displayText={value} variant="link" />);
-      break;
-    }
-    case "Phone" : {
-      displayComponent = (<PhoneDisplay value={value} variant="link" />);
-      break;
-    }
-    case "URL" : {
-      displayComponent = (<URLDisplay target="_blank" value={value} displayText={value} variant="link" />);
-      break;
-    }
-    // no default
-  }
-  return displayComponent;
-};

package/src/tasks/create/templates/Constellation/Field/Text-URL/text-url.js.mustache

@@ -1,172 +0,0 @@
-import {EmailDisplay, PhoneDisplay, URLDisplay } from "@pega/cosmos-react-core";
-
-export const formatExists = (formatterVal) => {
-    const formatterValues = [
-      "TextInput",
-      "WorkStatus",
-      "RichText",
-      "Email",
-      "Phone",
-      "URL",
-      "Operator"
-    ];
-    let isformatter = false;
-    if (formatterValues.includes(formatterVal)) {
-      isformatter = true;
-    }
-    return isformatter;
-  };
-
-const urlLabelVal = (urlLabelSelection, btnVal, urlLabel, propUrlLabel) => {
-  if ((urlLabel !== '' || propUrlLabel !== '') && btnVal !== null) {
-    switch (urlLabelSelection) {
-      case 'constant': {
-        btnVal = urlLabel;
-        break;
-      }
-      case 'propertyRef': {
-        btnVal = propUrlLabel;
-        break;
-      }
-      // no default
-    }
-  }
-  return btnVal;
-};
-
-const isImage = (url) => /\.(jpg|jpeg|png|webp|avif|gif|svg)$/.test(url);
-
-const TableImage = (imageProps) => {
-  const { value, altText, altTextOfImage, propaltTextOfImage, urlLabelSelection, urlLabel, propUrlLabel } = imageProps;
-  const demoButtonRef = useRef(null);
-  let imageDisplayComp = null;
-  const [images, setImages] = useState(null);
-  const imgDescription = {
-    id: 'url',
-    name: urlLabelSelection === 'constant' ? urlLabel : propUrlLabel,
-    description: altText === 'constant' ? altTextOfImage : propaltTextOfImage,
-    src: value
-  };
-  const onClick = () => {
-    setImages([imgDescription]);
-  };
-  const onItemDownload = async (id) => {
-    const a = document.createElement('a');
-    a.href = await fetch(images[0].src)
-      .then((response) => {
-        return response.blob();
-      })
-      .then((blob) => {
-        return URL.createObjectURL(blob);
-      });
-    a.download = images?.find((image) => image.id === id)?.name ?? id;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-  };
-  let btnVal = value;
-  btnVal = urlLabelVal(urlLabelSelection, btnVal, urlLabel, propUrlLabel);
-  imageDisplayComp = (
-    <React.Fragment>
-      {btnVal !== null && (
-        <Button ref={demoButtonRef} variant='link' compact={false} onClick={onClick} autoFocus>
-          {btnVal}
-        </Button>
-      )}
-      {images && (
-        <Lightbox
-          items={images}
-          cycle={false}
-          onAfterClose={() => {
-            setImages(null);
-            demoButtonRef.current?.focus();
-          }}
-          onItemDownload={isImage(images[0].src) ? onItemDownload : undefined}
-        />
-      )}
-    </React.Fragment>
-  );
-  return imageDisplayComp;
-};
-
-export const textFormatter = (formatter,value) => {
-  let displayComponent = null;
-  switch(formatter){
-    case "TextInput" : {
-      displayComponent = value;
-      break;
-    }
-    case "Email" : {
-      displayComponent = (<EmailDisplay value={value} displayText={value} variant="link" />);
-      break;
-    }
-    case "Phone" : {
-      displayComponent = (<PhoneDisplay value={value} variant="link" />);
-      break;
-    }
-    case "URL" : {
-      displayComponent = (<URLDisplay target="_blank" value={value} displayText={value} variant="link" />);
-      break;
-    }
-    // no default
-  }
-  return displayComponent;
-};
-
-/**
- * Returns a URL display component based on the options
- * @function urlFormatter
- * @param {string} value value
- * @param {object} options options for formatting
- * { displayAs,tableDisplayAs,isTableFormatter,altText,altTextOfImage,propaltTextOfImage,urlLabelSelection, urlLabel,propUrlLabel, widthSel, customWidth}
- */
-export const urlFormatter = (value, options) => {
-  const {
-    displayAs,
-    tableDisplayAs,
-    isTableFormatter,
-    altText,
-    altTextOfImage,
-    propaltTextOfImage,
-    urlLabelSelection,
-    urlLabel,
-    propUrlLabel,
-    widthSel,
-    customWidth
-  } = options;
-
-  let urlFormatComp = null;
-  if (
-    (displayAs === 'labelText' || (isTableFormatter && tableDisplayAs === 'link')) &&
-    (urlLabel !== '' || propUrlLabel !== '')
-  ) {
-    urlFormatComp = (
-      <URLDisplay
-        target='_blank'
-        value={value}
-        displayText={urlLabelSelection === 'constant' ? urlLabel : propUrlLabel}
-        variant='link'
-      />
-    );
-  } else if ((displayAs === 'Image' || tableDisplayAs === 'Image') && !!value) {
-    if (isTableFormatter) {
-      urlFormatComp = TableImage({
-        value,
-        altText,
-        altTextOfImage,
-        propaltTextOfImage,
-        urlLabelSelection,
-        urlLabel,
-        propUrlLabel
-      });
-    } else {
-      const width = widthSel === 'widthpx' ? customWidth : null;
-      urlFormatComp = (
-        <Image src={value} width={width} alt={altText === 'constant' ? altTextOfImage : propaltTextOfImage} />
-      );
-    }
-  } else {
-    urlFormatComp = <URLDisplay target='_blank' value={value} displayText={value} variant='link' />;
-  }
-  return urlFormatComp;
-};