@pega/custom-dx-components 0.0.1

package/src/constants.js

@@ -0,0 +1,92 @@
+// cSpell:ignore words timeofday caseview casepreview objectview
+export const TASKS_CONFIG_JSON_FILENAME = 'tasks.config.json';
+export const BUILD_CONFIG_JSON_FILENAME = 'build.config.json';
+export const COMPONENTS_DIRECTORY_PATH = 'components-directory-path';
+export const TOKEN_PATH = 'node_modules/@pega/custom-dx-components/.access_token';
+export const OOTB_COMPONENTS = 'node_modules/@pega/custom-dx-components/.ootb_components';
+
+/* REST end points */
+export const PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/publish_component';
+export const LIST_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/list_component';
+export const OOTB_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/ootb_component';
+export const DELETE_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/delete_component';
+export const TOKEN_URL_V1 = 'PRRestService/oauth2/v1/token';
+
+export const COMPONENT_SCHEMA = {
+  type: [
+    {
+      name: 'Field',
+      value: 'Field'
+    },
+    {
+      name: 'Layout template',
+      value: 'Template'
+    },
+    {
+      name: 'Widget',
+      value: 'Widget'
+    }
+  ],
+  subtype: {
+    field: [
+      {
+        name: 'Text',
+        value: 'Text'
+      },
+      {
+        name: 'Paragraph',
+        value: 'Text-Paragraph'
+      },
+      {
+        name: 'Email',
+        value: 'Email'
+      },
+      {
+        name: 'Phone',
+        value: 'Phone'
+      },
+      {
+        name: 'URL',
+        value: 'URL'
+      },
+      {
+        name: 'Integer',
+        value: 'Integer'
+      },
+      {
+        name: 'Decimal',
+        value: 'Decimal'
+      },
+      {
+        name: 'Currency',
+        value: 'Decimal-Currency'
+      },
+      {
+        name: 'Percentage',
+        value: 'Decimal-Percentage'
+      },
+      {
+        name: 'Boolean',
+        value: 'Boolean'
+      },
+      {
+        name: 'Date',
+        value: 'Date'
+      },
+      {
+        name: 'DateTime',
+        value: 'DateTime'
+      },
+      {
+        name: 'TimeofDay',
+        value: 'TimeofDay'
+      },
+      {
+        name: 'Picklist',
+        value: 'Picklist'
+      }
+    ],
+    template: ['DETAILS', 'FORM', 'PAGE'],
+    widget: ['PAGE', 'CASE']
+  }
+};

package/src/tasks/authenticate/helper.js

@@ -0,0 +1,60 @@
+/* eslint-disable import/prefer-default-export */
+import { getPegaServerConfig } from '../../util.js';
+
+export const getAuthQuestions = async () => {
+  const defaultPegaConfig = await getPegaServerConfig();
+
+  return [
+    {
+      name: 'server',
+      message: 'Enter pega server url',
+      default: defaultPegaConfig.server
+    },
+    {
+      name: 'user',
+      message: 'Enter user id',
+      default: defaultPegaConfig.user,
+      validate: value => {
+        if (value.trim()) {
+          return true;
+        }
+        return 'Username cannot be empty';
+      }
+    },
+    {
+      name: 'password',
+      type: 'password',
+      message: 'Enter password',
+      default: defaultPegaConfig.password,
+      validate: value => {
+        if (value.trim()) {
+          return true;
+        }
+        return 'Password cannot be empty';
+      }
+    },
+    {
+      name: 'clientId',
+      message: 'Enter clientId',
+      default: defaultPegaConfig.clientId,
+      validate: value => {
+        if (value.trim()) {
+          return true;
+        }
+        return 'clientId cannot be empty';
+      }
+    },
+    {
+      name: 'clientSecret',
+      type: 'password',
+      message: 'Enter clientSecret',
+      default: defaultPegaConfig.clientSecret,
+      validate: value => {
+        if (value.trim()) {
+          return true;
+        }
+        return 'clientSecret cannot be empty';
+      }
+    }
+  ];
+};

package/src/tasks/authenticate/index.js

@@ -0,0 +1,75 @@
+import path from 'path';
+import fs from 'fs';
+import https from 'https';
+
+import chalk from 'chalk';
+import inquirer from 'inquirer';
+import fetch from 'node-fetch';
+
+import { checkPathAccess, getTokenUrl } from '../../util.js';
+import { TOKEN_PATH } from '../../constants.js';
+
+import { getAuthQuestions } from './helper.js';
+
+export const TASKS_CONFIG_JSON_FILENAME = 'tasks.config.json';
+
+const pegaConfigJsonPath = path.join(path.resolve(), TASKS_CONFIG_JSON_FILENAME);
+
+const generateAccessToken = async config => {
+  const formData = new URLSearchParams();
+  formData.append('client_id', config.clientId);
+  formData.append('client_secret', config.clientSecret);
+  formData.append('username', config.user);
+  formData.append('password', config.password);
+  formData.append('grant_type', 'password');
+
+  const accessTokenUri = await getTokenUrl(config.server);
+  fetch(accessTokenUri, {
+    agent: new https.Agent({ rejectUnauthorized: false }),
+    method: 'POST',
+    headers: { 'content-type': 'application/x-www-form-urlencoded' },
+    body: formData.toString()
+  })
+    .then(response => response.json())
+    .then(data => {
+      if (data && data.errors) {
+        const errMessages = data.errors;
+        errMessages.forEach(msgArr => {
+          throw new Error(`Failed with error - ${JSON.stringify(msgArr.message)}`);
+        });
+      }
+      if (data.token_type) {
+        fs.writeFile(TOKEN_PATH, JSON.stringify(data), err => {
+          if (err) {
+            console.error(err);
+          }
+          console.log(`${chalk.bold.green('Authenticated successfully !!')}`);
+        });
+      }
+    })
+    .catch(e => console.log(`${chalk.bold.red(e)}`));
+};
+
+export default async options => {
+  await checkPathAccess(pegaConfigJsonPath);
+
+  let data = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });
+  data = data && JSON.parse(data);
+
+  const serverConfig = data['server-config'];
+  const params = options.params;
+
+  const questions = await getAuthQuestions(params);
+  const answers = await inquirer.prompt(questions);
+  serverConfig.server = answers.server;
+  serverConfig.user = answers.user;
+  serverConfig.password = answers.password;
+  serverConfig.clientId = answers.clientId;
+  serverConfig.clientSecret = answers.clientSecret;
+  await generateAccessToken(serverConfig);
+
+  data = JSON.stringify(data, null, 2);
+  fs.writeFile(pegaConfigJsonPath, data, err => {
+    if (err) throw err;
+  });
+};

package/src/tasks/create/index.js

@@ -0,0 +1,304 @@
+import path from 'path';
+import { URL, fileURLToPath } from 'url';
+import fs from 'fs';
+import { promisify } from 'util';
+
+import inquirer from 'inquirer';
+import ncp from 'ncp';
+import chalk from 'chalk';
+
+import {
+  convertIntoPascalCase,
+  compileMustacheTemplate,
+  getComponentDirectoryPath,
+  getComponents,
+  getComponentDefaults,
+  sanitize,
+  validateSemver
+} from '../../util.js';
+import { COMPONENT_SCHEMA } from '../../constants.js';
+
+const copy = promisify(ncp);
+
+const copyComponentTemplate = async options => {
+  return copy(options.templateDirectory, options.targetDirectory, {
+    clobber: false
+  });
+};
+
+const compileMustacheTemplates = async (
+  componentDirectory,
+  {
+    componentKey,
+    componentName,
+    componentLabel,
+    library,
+    version,
+    type,
+    subtype,
+    description,
+    organization,
+    allowedApplications
+  }
+) => {
+  const files = fs.readdirSync(componentDirectory);
+  const componentClassName = convertIntoPascalCase(componentKey);
+
+  const isTemplate = type === 'Template';
+  const isPicklist = subtype === 'Picklist';
+  const isBool = subtype === 'Boolean';
+  const isPhone = subtype === 'Phone';
+
+  if (Array.isArray(subtype) && subtype.length === 1) {
+    subtype = subtype.toString();
+  }
+
+  if (allowedApplications.trim() === '') {
+    allowedApplications = [];
+  } else {
+    if (allowedApplications.indexOf(',') !== -1) {
+      allowedApplications = allowedApplications.split(',');
+    }
+    allowedApplications = [].concat(allowedApplications);
+  }
+
+  allowedApplications = allowedApplications.filter(el => !!el.trim()).map(el => el.trim());
+  files.forEach(file => {
+    const filePath = path.join(componentDirectory, file);
+
+    const output = compileMustacheTemplate(filePath, {
+      COMPONENT_KEY: componentKey,
+      COMPONENT_NAME: componentName,
+      COMPONENT_LABEL: componentLabel,
+      COMPONENT_CLASS_NAME: componentClassName,
+      ORGANIZATION: organization,
+      VERSION: version,
+      LIBRARY: library,
+      ALLOWEDAPPS: JSON.stringify(allowedApplications),
+      TYPE: type,
+      SUB_TYPE: JSON.stringify(subtype),
+      DESCRIPTION: description,
+      IS_TEMPLATE: isTemplate,
+      IS_PICKLIST: isPicklist,
+      IS_BOOLEAN: isBool,
+      IS_PHONE: isPhone
+    });
+    fs.writeFileSync(filePath, output);
+    fs.renameSync(filePath, filePath.replace('.mustache', ''));
+  });
+};
+
+const validateCompile = async (
+  {
+    componentName,
+    componentLabel,
+    library,
+    version,
+    type,
+    subtype,
+    description,
+    allowedApplications
+  },
+  options
+) => {
+  const templateDirectory = fileURLToPath(new URL('./template', import.meta.url));
+
+  const { organization } = JSON.parse(fs.readFileSync(path.resolve('package.json'), 'utf8'));
+
+  const componentKey = `${organization}_${library}_${componentName}`;
+  /*
+  if (!isPascalCase(componentKey)) {
+    console.log(
+      chalk.yellowBright(
+        `${componentKey} is not in Pascal Case. Attempting to create component in Pascal Case !!`
+      )
+    );
+    componentKey = convertIntoPascalCase(componentKey);
+  } */
+
+  const targetDirectory = await getComponentDirectoryPath(componentKey);
+
+  const components = await getComponents();
+  if (components.includes(componentKey)) {
+    console.log(chalk.red(`${componentKey} component already exists in ${targetDirectory}`));
+    return;
+  }
+
+  await copyComponentTemplate({
+    ...options,
+    targetDirectory,
+    templateDirectory
+  });
+  await compileMustacheTemplates(targetDirectory, {
+    componentKey,
+    componentName,
+    componentLabel,
+    library,
+    version,
+    type,
+    subtype,
+    description,
+    organization,
+    allowedApplications
+  });
+
+  console.log(chalk.green(`${componentKey} component is created in ${targetDirectory}`));
+};
+
+export default async options => {
+  if (options.params[9]) {
+    const componentName = options.params[3];
+    const componentLabel = options.params[4];
+    const library = options.params[5];
+    const version = options.params[6];
+    const type = options.params[7];
+    const subtype = options.params[8];
+    const description = options.params[9];
+    await validateCompile(
+      {
+        componentName,
+        componentLabel,
+        library,
+        version,
+        type,
+        subtype,
+        description
+      },
+      options
+    );
+  } else {
+    const componentDefaults = await getComponentDefaults();
+    const questions = [
+      {
+        name: 'componentName',
+        message: 'Enter component name (required)',
+        validate: value => {
+          /* value should not be empty
+          It should not have spaces
+          It should not start with a number
+          Only case-insensitive alphanumeric values are allowed
+        */
+          if (value && !/^\d/.test(value) && value === sanitize(value)) {
+            return true;
+          }
+          return 'Only alphanumeric values are allowed, starting with alphabets';
+        }
+      },
+      {
+        name: 'componentLabel',
+        message: 'Enter component label for display (required)',
+        validate: value => {
+          if (value) {
+            return true;
+          }
+          return 'Please provide value for label';
+        }
+      },
+      {
+        name: 'version',
+        message: 'Enter component version',
+        validate: value => {
+          if (validateSemver(value)) {
+            return true;
+          }
+          return 'Please provide semver compatible version e.g 0.0.1';
+        }
+      },
+      {
+        name: 'library',
+        message: 'Enter library name (required)',
+        default: componentDefaults.library,
+        validate: value => {
+          /* value should not be empty
+            It should not have spaces
+            It should not start with a number
+            Only case-insensitive alphanumeric values are allowed
+          */
+          if (value && !/^\d/.test(value) && value === sanitize(value)) {
+            return true;
+          }
+          return 'Only alphanumeric values are allowed, starting with alphabets';
+        }
+      },
+      {
+        name: 'allowedApplications',
+        message: 'Please enter the application names to be supported (comma-separated). ',
+        suffix: 'Keep empty for all applications'
+      },
+      {
+        name: 'type',
+        type: 'rawlist',
+        message: 'Enter type of component',
+        default: componentDefaults.type,
+        choices: COMPONENT_SCHEMA.type
+      },
+      {
+        name: 'subtype',
+        type: 'rawlist',
+        message: 'Enter subtype of component',
+        default: componentDefaults.subtype,
+        choices: COMPONENT_SCHEMA.subtype.field,
+        when(answers) {
+          return answers.type === 'Field';
+        }
+      },
+      {
+        name: 'subtype',
+        type: 'rawlist',
+        message: 'Enter subtype of component',
+        default: componentDefaults.subtype,
+        choices: COMPONENT_SCHEMA.subtype.template,
+        when(answers) {
+          return answers.type === 'Template';
+        }
+      },
+      {
+        name: 'subtype',
+        type: 'checkbox',
+        message: 'Enter subtype of component',
+        default: [componentDefaults.subtype || COMPONENT_SCHEMA.subtype.widget[0]],
+        choices: COMPONENT_SCHEMA.subtype.widget,
+        when(answers) {
+          return answers.type === 'Widget';
+        },
+        validate: value => {
+          /* value should not be empty */
+          if (Array.isArray(value) && value.length) {
+            return true;
+          }
+          return 'Please select subtype';
+        }
+      },
+      {
+        name: 'description',
+        message: 'Enter description for the component',
+        default: componentDefaults.description
+      }
+    ];
+    await inquirer.prompt(questions).then(async answers => {
+      const {
+        componentName,
+        componentLabel,
+        library,
+        version,
+        type,
+        subtype,
+        description,
+        allowedApplications
+      } = answers;
+      await validateCompile(
+        {
+          componentName,
+          componentLabel,
+          library,
+          version,
+          type,
+          subtype,
+          description,
+          allowedApplications
+        },
+        options
+      );
+    });
+  }
+};

package/src/tasks/create/template/config.json.mustache

@@ -0,0 +1,67 @@
+{
+  "name": "{{COMPONENT_KEY}}",
+  "label": "{{COMPONENT_LABEL}}",
+  "description": "{{DESCRIPTION}}",
+  "organization": "{{ORGANIZATION}}",
+  "version": "{{VERSION}}",
+  "library": "{{LIBRARY}}",
+  "allowedApplications": {{{ALLOWEDAPPS}}},
+  "componentKey": "{{COMPONENT_KEY}}",
+  "type": "{{TYPE}}",
+  "subtype": {{{SUB_TYPE}}},
+  {{#IS_TEMPLATE}}
+  "icon": "images/pz-text-input-active.svg",
+  {{/IS_TEMPLATE}}
+  "properties": [
+    {
+      "name": "value",
+      "label": "Property",
+      "format": "PROPERTY"
+    },
+    {
+      "name": "label",
+      "label": "Label value",
+      "format": "TEXT"
+    },
+    {
+      "name": "placeholder",
+      "label": "Placeholder",
+      "format": "TEXT"
+    },
+    {
+      "name": "visibility",
+      "label": "Visible",
+      "format": "VISIBILITY"
+    },
+    {
+      "name": "disabled",
+      "label": "Disabled",
+      "format": "DISABLED"
+    },
+    {
+      "name": "required",
+      "label": "Required",
+      "format": "REQUIRED"
+    }
+  ],
+  "defaultConfig": {
+    {{#IS_PICKLIST}}
+    "label": "@L $this.label",
+    "placeholder": "@L Select...",
+    "listType": "associated",
+    "datasource": "@ASSOCIATED .$this.name"
+    {{/IS_PICKLIST}}
+    {{#IS_BOOLEAN}}
+    "trueText": "True",
+    "falseText": "False"
+    {{/IS_BOOLEAN}}
+    {{#IS_PHONE}}
+    "datasource": {
+      "source": "@DATASOURCE D_pyCountryCallingCodeList.pxResults",
+      "fields": {
+        "value": "@P .pyCallingCode"
+      }
+    }
+    {{/IS_PHONE}}
+  }
+}

package/src/tasks/create/template/demo.stories.jsx.mustache

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+
+import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+export const base{{COMPONENT_CLASS_NAME}} = () => {
+  const [value, setValue] = useState('test value');
+
+  const props = {
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, value) => {
+              setValue(value);
+            }
+          };
+        },
+        getStateProps: () => {
+          return { value: '.name' };
+        }
+      };
+    },
+    value,
+    placeholder: text('Placeholder', 'Test placeholder'),
+    disabled: boolean('Disabled', false),
+    readOnly: boolean('Disabled', false),
+    required: boolean('Disabled', false),
+    label: text('Label', 'Sample Label'),
+    testId: text('Test id', 'text-12344566')
+  };
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} />
+    </>
+  );
+};

package/src/tasks/create/template/index.jsx.mustache

@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types';
+import { Input, Label } from '@pega/cosmos-react-core';
+
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+
+const {{COMPONENT_CLASS_NAME}} = props => {
+  const { getPConnect, value, placeholder, disabled, readOnly, required, label, testId } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = pConn?.getStateProps()?.value;
+
+  const handleOnChange = event => {
+    const { value: updatedValue } = event.target;
+    actions.updateFieldValue(propName, updatedValue);
+  };
+
+  return (
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      <Label>{label}</Label>
+      <Input
+        type='text'
+        value={value}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        required={required}
+        onChange={handleOnChange}
+        testId={testId}
+      />
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+  );
+};
+
+{{COMPONENT_CLASS_NAME}}.defaultProps = {
+  value: '',
+  placeholder: '',
+  disabled: false,
+  readOnly: false,
+  required: false,
+  testId: null
+};
+
+{{COMPONENT_CLASS_NAME}}.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
+};
+
+export default {{COMPONENT_CLASS_NAME}};

package/src/tasks/create/template/styles.js.mustache

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