@pega/custom-dx-components 23.1.10 → 23.1.12

package/src/tasks/build/helper.js

@@ -1,116 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-
-import fetch from 'node-fetch';
-import AdmZip from 'adm-zip';
-import chalk from 'chalk';
-
-import { constructCompleteUrl, getComponentDirectoryPath, getComponents, getPegaServerConfig, getHttpsAgent } from '../../util.js';
-import { PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT, TOKEN_PATH } from '../../constants.js';
-
-export const getPublishComponentQuestions = async () => {
-  const components = await getComponents();
-
-  if (components.length === 0) {
-    console.log(chalk.redBright('No components to build'));
-    process.exit();
-  }
-
-  const defaultPegaConfig = await getPegaServerConfig();
-
-  return [
-    {
-      name: 'componentKey',
-      type: 'rawlist',
-      message: 'Select component to build',
-      choices: components
-    },
-    {
-      name: 'sourceMap',
-      message: 'Generate source map ?',
-      default: defaultPegaConfig.sourceMap,
-      // eslint-disable-next-line sonarjs/no-redundant-boolean
-      when: () => false && !process.env.SOURCE_MAP
-    },
-    {
-      name: 'devBuild',
-      type: 'confirm',
-      message: 'Generate development build ?',
-      default: defaultPegaConfig.devBuild
-    }
-  ];
-};
-
-export const zipComponent = async (componentKey) => {
-  const srcDirectory = await getComponentDirectoryPath(componentKey);
-  const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
-  const configJson = `${srcDirectory}/config.json`;
-
-  const zip = new AdmZip();
-
-  zip.addLocalFolder(srcDirectory, 'src/');
-  zip.addLocalFile(configJson);
-  zip.addLocalFolder(buildDirectory);
-  const zipContent = zip.toBuffer().toString('base64');
-
-  const configContent = Buffer.from(fs.readFileSync(`${srcDirectory}/config.json`)).toString();
-  fs.rmdir('dist', { recursive: true }, (err) => {
-    if (err) {
-      throw err;
-    }
-  });
-  return { zipContent, configContent };
-};
-
-export const publishComponentToServer = async (data) => {
-  const { configContent, zipContent, rulesetName, rulesetVersion } = data;
-
-  const apiBody = {
-    configContent,
-    zipContent,
-    componentKey: JSON.parse(configContent).componentKey,
-    publishFor: 'constellation',
-    rulesetName,
-    rulesetVersion,
-    category: ''
-  };
-  const defaultPegaConfig = await getPegaServerConfig();
-  const url = constructCompleteUrl(defaultPegaConfig.server, PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT);
-  try {
-    const OauthData = fs.readFileSync(TOKEN_PATH, 'utf8');
-    if (OauthData) {
-      const { access_token: accessToken, token_type: tokenType } = JSON.parse(OauthData);
-      let status = 500;
-      fetch(url, {
-        method: 'POST',
-        agent: getHttpsAgent(defaultPegaConfig),
-        headers: {
-          Authorization: `${tokenType} ${accessToken}`
-        },
-        body: JSON.stringify(apiBody)
-      })
-        .then((response) => {
-          status = response.status;
-          return response.text();
-        })
-        .then((resp) => {
-          const respData = JSON.parse(resp);
-          if (status === 401) {
-            throw new Error('Error occurred in authentication. Please regenerate using authenticate');
-            // console.log(accessTokenUri, refreshToken);
-            /* TODO - Handle refresh_token */
-          } else if (status === 200) {
-            console.log(chalk.bold.green(`Success : ${respData.message}`));
-          } else {
-            throw new Error(`${respData.message}`);
-          }
-        })
-        // eslint-disable-next-line prefer-promise-reject-errors
-        .catch((e) => Promise.reject(`${chalk.bold.red(e)}`));
-    } else {
-      throw new Error(`Error occurred in authentication. Please regenerate using authenticate`);
-    }
-  } catch (err) {
-    throw new Error(`Error occurred in authentication. Please regenerate using authenticate`);
-  }
-};

package/src/tasks/build/index.js

@@ -1,76 +0,0 @@
-import inquirer from 'inquirer';
-import Listr from 'listr';
-import chalk from 'chalk';
-
-import validate from '../validator/index.js';
-
-import bundleComponent from '../bundle/index.js';
-import lintComponent from '../linter/index.js';
-import { getPublishComponentQuestions } from './helper.js';
-import { getComponentDirectoryPath, showVersion } from '../../util.js';
-
-export default async options => {
-  showVersion();
-
-  let componentKey;
-  let sourceMap;
-  let devBuild;
-  let content;
-
-  if (options.params.length >= 6) {
-    componentKey = options.params[3];
-    sourceMap = options.params[4];
-    const dBuild = options.params[5];
-    devBuild = (dBuild === 'Y' ||
-    dBuild === 'y' ||
-    dBuild === true ||
-    dBuild === 'true') ? true : false;
-
-    content = { componentKey, sourceMap, devBuild};
-  }
-  else {
-    const questions = await getPublishComponentQuestions();
-    const answers = await inquirer.prompt(questions);
-    ({ componentKey, sourceMap, devBuild } = answers);
-
-    content = {
-      ...answers
-    };
-  }
-
-
-
-  const sDevBuild = devBuild ? '(dev build)' : '';
-  const tasks = new Listr(
-    [
-      {
-        title: 'Validate config schema',
-        task: async () => {
-          await validate(componentKey);
-        }
-      },
-      {
-        title: 'Lint component',
-        task: async () => {
-          const targetDirectory = await getComponentDirectoryPath(componentKey);
-          // console.log(`in buildComponent Lint component task: componentKey: ${componentKey} targetDirectory: ${targetDirectory}`);
-          await lintComponent(targetDirectory);
-        }
-      },
-      {
-        title: `Bundle Component ${sDevBuild}`,
-        type: 'confirm',
-        task: async () => await bundleComponent(componentKey, sourceMap, devBuild),
-        skip: () => (options.skipBundle ? 'Skipped bundling component' : undefined)
-      }
-    ],
-    {
-      exitOnError: true
-    }
-  );
-
-  await tasks.run().catch(err => {
-    console.log(chalk.bold.red(err.toString()));
-  });
-  return true;
-};

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

@@ -1,38 +0,0 @@
-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

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

package/src/tasks/create/templates/Constellation/Field/Boolean/demo.stories.jsx.mustache

@@ -1,61 +0,0 @@
-import { useState } from 'react';
-import { withKnobs } from '@storybook/addon-knobs';
-
-import { configProps, stateProps } from './mock.stories';
-
-import {{COMPONENT_CLASS_NAME}} from './index';
-
-export default {
-  title: '{{COMPONENT_CLASS_NAME}}',
-  decorators: [withKnobs],
-  component: {{COMPONENT_CLASS_NAME}}
-};
-
-export const base{{COMPONENT_CLASS_NAME}} = () => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  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 (
-    <>
-      <{{COMPONENT_CLASS_NAME}} {...props} />
-    </>
-  );
-};

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

@@ -1,18 +0,0 @@
-const handleEvent = (actions, eventType, propName, value) => {
-  switch (eventType) {
-    case "change":
-      actions.updateFieldValue(propName, value);
-      break;
-    case "blur":
-      actions.triggerFieldChange(propName, value);
-      break;
-    case "changeNblur":
-      actions.updateFieldValue(propName, value);
-      actions.triggerFieldChange(propName, value);
-      break;
-    default:
-      break;
-  }
-};
-
-export default handleEvent;

package/src/tasks/create/templates/Constellation/Field/Boolean/index.jsx.mustache

@@ -1,170 +0,0 @@
-import {
-  Checkbox as CosmosCheckbox,
-  CheckboxGroup,
-  FieldValueList,
-  Text
-} from "@pega/cosmos-react-core";
-import PropTypes from "prop-types";
-
-// includes in bundle
-import handleEvent from "./event-utils";
-
-import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
-
-// 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
-const {{COMPONENT_CLASS_NAME}} = props => {
-  const {
-    getPConnect,
-    value,
-    label,
-    helperText,
-    caption,
-    validatemessage,
-    hideLabel,
-    testId,
-    additionalProps,
-    displayMode,
-    variant,
-    trueLabel,
-    falseLabel
-  } = props;
-  const pConn = getPConnect();
-  const actions = pConn.getActionsApi();
-  const propName = pConn.getStateProps().value;
-
-  let { readOnly, required, disabled } = props;
-  [readOnly, required, disabled] = [readOnly, required, disabled].map(
-    (prop) => prop === true || (typeof prop === 'string' && prop === 'true')
-  );
-
-  let status = "";
-  if (validatemessage !== "") {
-    status = "error";
-  }
-
-  const aCosmosCheckbox = (
-    <CosmosCheckbox
-      {...additionalProps}
-      className="standard"
-      checked={value}
-      label={caption}
-      disabled={disabled}
-      readOnly={readOnly}
-      required={required}
-      onClick={actions.onClick}
-      onChange={(event) => {
-        handleEvent(actions, "changeNblur", propName, event.target.checked);
-      }}
-      onBlur={(event) => {
-        pConn.getValidationApi().validate(event.target.checked);
-      }}
-      data-testid={testId}
-    />
-  );
-
-  const parentTestId = testId === '' ? `${testId}-parent` : testId;
-
-  let displayComponent;
-  if (displayMode) {
-    displayComponent = <{{COMPONENT_CLASS_NAME}}  value={value} trueLabel={trueLabel} falseLabel={falseLabel} />;
-  }
-
-  if (displayMode === 'DISPLAY_ONLY') {
-    return ( <Styled{{COMPONENT_CLASS_NAME}}Wrapper> displayComponent </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
-  }
-
-  if (displayMode === "LABELS_LEFT") {
-    return (
-      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <FieldValueList
-        variant={hideLabel ? 'stacked' : variant}
-        data-testid={testId}
-        fields={[{ id: '1', name: hideLabel ? '' : caption, value: displayComponent }]}
-      />
-     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    );
-  }
-
-  if (displayMode === "STACKED_LARGE_VAL") {
-    return (
-      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <FieldValueList
-        variant='stacked'
-        data-testid={testId}
-        fields={[
-          {
-            id: '2',
-            name: hideLabel ? '' : caption,
-            value: (
-              <Text variant='h1' as='span'>
-                {displayComponent}
-              </Text>
-            )
-          }
-        ]}
-      />
-      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    );
-  }
-
-
-  return (
-    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <CheckboxGroup
-      label={label}
-      labelHidden={hideLabel}
-      data-testid={parentTestId}
-      info={validatemessage || helperText}
-      status={status}
-    >
-      {aCosmosCheckbox}
-    </CheckboxGroup>
-    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-  );
-
-
-};
-
-
-{{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 {{COMPONENT_CLASS_NAME}};

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

@@ -1,21 +0,0 @@
-export const configProps = {
-  value: true,
-  label: 'Boolean label',
-  helperText: 'Test helper text',
-  caption: 'Boolean caption',
-  validatemessage: '',
-  hideLabel: false,
-  testId: '12345678',
-  additionalProps: {},
-  displayMode: '',
-  variant: '',
-  trueLabel: 'True',
-  falseLabel: 'False',
-  disabled: false,
-  readOnly: false,
-  required: true
-};
-
-export const stateProps = {
-  value: '.Test'
-};

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

@@ -1,14 +0,0 @@
-// 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/src/tasks/create/templates/Constellation/Field/Date/DateFormatter.js.mustache

@@ -1,61 +0,0 @@
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime.js';
-import localizedFormat from 'dayjs/plugin/localizedFormat.js';
-import utc from 'dayjs/plugin/utc.js';
-import timezone from 'dayjs/plugin/timezone.js';
-
-dayjs.extend(relativeTime);
-dayjs.extend(localizedFormat);
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
-const types = ['fromNow', 'customFormat'];
-
-
-
-// value should be in ISO 8601 format.
-function DateFormatter(
-  value,
-  { type = types[1], format = "DD/MM/YYYY", tzone } = {}
-) {
-  if (!value) return value;
-  switch (type) {
-    case types[1]:
-      if (tzone) return dayjs(value).tz(tzone).format(format);
-      return dayjs(value).format(format);
-    case types[0]:
-      return dayjs(value).from(dayjs());
-    default:
-      return value;
-  }
-}
-
-// value should be in hh:mm:ss format (00:00:00 - 23:59:59).
-function TimeFormatter(value, options) {
-  if (!value) return value;
-  const { locale = "en-US" } = options;
-  const timeOnlyRegex = /^(?:[01]\d|2[0123]):(?:[012345]\d):(?:[012345]\d)$/;
-  if (value.length === 8 && timeOnlyRegex.test(value)) {
-    const tempDate = new Date();
-    const hours = parseInt(value.substr(0, 2), 10);
-    const minutes = parseInt(value.substr(3, 2), 10);
-    const seconds = parseInt(value.substr(6, 2), 10);
-    tempDate.setHours(hours);
-    tempDate.setMinutes(minutes);
-    tempDate.setSeconds(seconds);
-    return tempDate.toLocaleTimeString(locale);
-  }
-  return DateFormatter(value, options);
-}
-
-export default {
-  Date: (value, options) => DateFormatter(value, { type: 'customFormat', ...options }),
-  'Date-Time-Default': (value, options) =>
-    DateFormatter(value, { ...options, type: 'customFormat', format: 'lll' }),
-  'Time-Default': (value, options) =>
-    TimeFormatter(value, {
-      ...options,
-      type: 'customFormat',
-      format: 'hh:mm A'
-    })
-};

package/src/tasks/create/templates/Constellation/Field/Date/FormattedText.jsx.mustache

@@ -1,41 +0,0 @@
-import { FieldValueList } from '@pega/cosmos-react-core';
-import PropTypes from 'prop-types';
-
-import { format } from './date.js';
-
-export default function FormattedText(props) {
-  const { formatType, label, value, testId, hideLabel, variant, 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} />;
-}
-
-FormattedText.defaultProps = {
-  formatType: 'none',
-  variant: 'stacked',
-  value: undefined,
-  label: '',
-  testId: null,
-  hideLabel: false,
-  additionalProps: {}
-};
-
-FormattedText.propTypes = {
-  formatType: PropTypes.string,
-  variant: PropTypes.oneOf(['inline', 'stacked']),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
-  label: PropTypes.string,
-  testId: PropTypes.string,
-  additionalProps: PropTypes.objectOf(PropTypes.any),
-  hideLabel: PropTypes.bool
-};