@pega/dx-component-builder-sdk 0.1.0

package/src/tasks/create/index.js

@@ -0,0 +1,380 @@
+import path from 'path';
+import { URL, fileURLToPath } from 'url';
+import fs from 'fs';
+import { promisify } from 'util';
+import { createRequire } from "module";
+import { join } from 'path';
+
+import inquirer from 'inquirer';
+import ncp from 'ncp';
+import chalk from 'chalk';
+
+import { checkPathAccess, getTokenUrl } from '../../util.js';
+
+
+export const DXCB_CONFIG_JSON_FILENAME = 'dxcb.config.json';
+export const DXCB_CONFIG_INTERNAL_JSON_FILENAME = 'src/dxcb.config.json';
+
+const pegaConfigJsonPath = path.join(path.resolve(), DXCB_CONFIG_JSON_FILENAME);
+const pegaConfigInternalJsonPath = path.join(path.resolve(), DXCB_CONFIG_INTERNAL_JSON_FILENAME);
+
+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();
+  }
+
+  let mustacheSubType = subtype;
+
+  // overrides
+  if (typeof(mustacheSubType) == "string") {
+    switch (mustacheSubType) {
+      case "FORM-region" :
+        mustacheSubType = "FORM";
+        break;
+      case "DETAILS-region" :
+        mustacheSubType = "DETAILS";
+        break;
+      case "Text-Input" :
+        mustacheSubType = "Text";
+        break;
+    }
+
+  }
+
+  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(mustacheSubType),
+      DESCRIPTION: description || componentLabel,
+      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 (
+  {
+    library,
+    organization,
+    componentName,
+    componentLabel,
+    version,
+    framework,
+    type,
+    subtype,
+    description,
+    allowedApplications
+  },
+  options
+) => {
+
+  let sSubType = subtype;
+  if (Array.isArray(subtype)) {
+    sSubType = subtype.join("-");
+  }
+
+  await checkPathAccess(pegaConfigInternalJsonPath);
+
+  let internalData = fs.readFileSync(pegaConfigInternalJsonPath, { encoding: 'utf8' });
+  internalData = internalData && JSON.parse(internalData);
+
+  framework = internalData.sdkType;
+
+  const templateDir = `./templates/${framework}/${type}/${sSubType}`;
+  const templateDirectory = fileURLToPath(new URL(templateDir, import.meta.url));
+
+  const componentKey = `${organization}_${library}_${componentName}`;
+
+  const typeLC = type.toLowerCase();
+  const targetDirectory = await getComponentDirectoryPath(join(typeLC, "/",componentKey));
+
+  const components = await getComponents(false);
+  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(`created ${componentKey} component in ${targetDirectory}`));
+
+};
+
+export default async options => {
+  if (options.params[10]) {
+    const componentName = options.params[3];
+    const componentLabel = options.params[4];
+    const library = options.params[5];
+    const version = options.params[6];
+    const framework = options.params[7];
+    const type = options.params[8];
+    const subtype = options.params[9];
+    const description = options.params[10];
+
+    await validateCompile(
+      {
+        componentName,
+        componentLabel,
+        library,
+        version,
+        framework,
+        type,
+        subtype,
+        description,
+        organization
+      },
+      options
+    );
+  } else {
+
+    await checkPathAccess(pegaConfigJsonPath);
+
+    let data = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });
+    data = data && JSON.parse(data);
+
+    const componentData = data['component'];
+
+    const { organization, library} = componentData;
+
+    let componentDefaults = await getComponentDefaults();
+    componentDefaults.library = library;
+
+
+    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',
+        default: componentDefaults.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: 'framework',
+      //   type: 'rawlist',
+      //   message: 'Enter framework a',
+      //   default: 'COSMOS_React',
+      //   choices: COMPONENT_SCHEMA.framework
+      // },
+      {
+        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: 'rawlist',
+        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,
+        /* if left blank and no defaults, mustache will use componentLabel, because description is used in app studio and
+        shouldn't be blank */
+      }
+    ];
+
+    // get package version, so can display at create
+    const require = createRequire(import.meta.url);
+    const pData = require("../../../package.json");
+
+    console.log(chalk.green("DX Component Builder - SDK v" + pData.version));
+    await inquirer.prompt(questions).then(async answers => {
+      const {
+        componentName,
+        componentLabel,
+        library,
+        version,
+        framework,
+        type,
+        subtype,
+        description,
+        allowedApplications
+      } = answers;
+      await validateCompile(
+        {
+          componentName,
+          componentLabel,
+          library,
+          version,
+          framework,
+          type,
+          subtype,
+          description,
+          allowedApplications,
+          organization
+        },
+        options
+      );
+    });
+  }
+};

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

@@ -0,0 +1,62 @@
+{
+  "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": "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;
+  `;
+});

package/src/tasks/create/templates/Constellation/Field/Boolean/Boolean.js.mustache

@@ -0,0 +1,38 @@
+function Boolean(value, { 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, options) =>
+    Boolean(value, {
+      ...options,
+      tick: "True",
+      cross: "False"
+    })
+};

package/src/tasks/create/templates/Constellation/Field/Boolean/boolean-format.js.mustache

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