@pega/custom-dx-components 0.23.34 → 0.23.36

package/SECURITY.md

@@ -0,0 +1,10 @@
+# Reporting Security Issues
+
+Pegasystems takes security seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.
+
+To report a security issue, [email us](mailto:opensource@pega.com;security@pega.com) and include the word "SECURITY" in the subject line.
+
+The Pega team will send a response indicating the next steps in handling your report. We may ask for additional information or guidance.
+
+## Learning More About Security
+To learn more about securing a Pega application or our security capabilities, please see the [security article](https://community.pega.com/knowledgebase/capabilities/security) on Pega Community and the [Pega Trust Center](https://www.pega.com/products/cloud/pega-trust-center).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "0.23.34",
+  "version": "0.23.36",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/tasks/build-all/index.js

@@ -9,9 +9,7 @@ import { getComponentDirectoryPath, showVersion, getComponents } from '../../uti
 
 import { getBuildComponentQuestions, cleanUp } from './helper.js';
 
-
 export function getCustomTasks(componentKey, sourceMap, devBuild, options) {
-
   const sDevBuild = devBuild ? '(dev build)' : '';
   return new Listr(
     [
@@ -35,50 +33,37 @@ export function getCustomTasks(componentKey, sourceMap, devBuild, options) {
         skip: () => (options.skipBundle ? 'Skipped bundling component' : undefined)
       }
     ],
-    {
-      exitOnError: true
-    }
+    { concurrent: false, exitOnError: true }
   );
-
-
 }
 
-
-
-
-export default async (options) => {
+export default async options => {
   showVersion();
 
-
   const components = await getComponents();
   let sourceMap;
   let devBuild;
 
   if (options.params.length >= 4) {
     const dBuild = options.params[3];
-    devBuild = (dBuild === 'Y' ||
-    dBuild === 'y' ||
-    dBuild === true ||
-    dBuild === 'true') ? true : false;
-  }
-  else {
+    devBuild = !!(dBuild === 'Y' || dBuild === 'y' || dBuild === true || dBuild === 'true');
+  } else {
     const questions = await getBuildComponentQuestions();
     const answers = await inquirer.prompt(questions);
     ({ sourceMap, devBuild } = answers);
   }
 
-
-  for (const componentKey of components) {
+  for await (const componentKey of components) {
     console.log(chalk.bold.green(`Building ${componentKey}`));
 
-    const myCustomTasks = getCustomTasks(componentKey, sourceMap, devBuild, options );
+    const myCustomTasks = getCustomTasks(componentKey, sourceMap, devBuild, options);
 
-    // eslint-disable-next-line no-await-in-loop
-    await myCustomTasks.run().catch(err => {
+    try {
+      await myCustomTasks.run();
+    } catch (err) {
       console.log(chalk.bold.red(err.toString()));
       process.exit(1);
-    });
-
+    }
   }
 
   // once done, remove leftover directories

package/src/tasks/build-comp/index.js

@@ -71,6 +71,7 @@ export default async options => {
 
   await tasks.run().catch(err => {
     console.log(chalk.bold.red(err.toString()));
+    process.exit(1);
   });
   return true;
 };

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

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

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

@@ -2,19 +2,22 @@
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
 import { useState } from 'react';
-import { withKnobs } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { configProps, stateProps } from './mock';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
 
-export default {
+const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
-  decorators: [withKnobs],
-  component: {{COMPONENT_CLASS_NAME}}
+  component: {{COMPONENT_CLASS_NAME}},
+  excludeStories: /.*Data$/
 };
 
-export const Base{{COMPONENT_CLASS_NAME}} = () => {
+export default meta;
+type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
+
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const [value, setValue] = useState(configProps.value);
 

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

@@ -2,10 +2,9 @@ import {
   Checkbox as CosmosCheckbox,
   CheckboxGroup,
   FieldValueList,
-  Text
+  Text,
+  withConfiguration
 } from "@pega/cosmos-react-core";
-import PropTypes from "prop-types";
-
 
 import type { PConnFieldProps } from './PConnProps';
 
@@ -40,19 +39,19 @@ interface ActionsProps {
 
 // 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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
+function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const {
     getPConnect,
-    value,
-    label,
-    helperText,
+    value = false,
+    label = '',
+    helperText = '',
     caption,
     validatemessage,
     hideLabel,
     testId,
-    additionalProps,
+    additionalProps = {},
     displayMode,
-    variant,
+    variant = 'inline',
     trueLabel,
     falseLabel
   } = props;
@@ -62,7 +61,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const stateProps = pConn.getStateProps() as StateProps;
   const propName: string = stateProps.value;
 
-  let { readOnly, required, disabled } = props;
+  let { readOnly = false, required = false, disabled = false } = props;
   [readOnly, required, disabled] = [readOnly, required, disabled].map(
     (prop) => prop === true || (typeof prop === 'string' && prop === 'true')
   );
@@ -100,7 +99,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     // @ts-ignore
     displayComponent = (
       // @ts-ignore
-      <PegaDxilMyBoolean value={value} trueLabel={trueLabel} falseLabel={falseLabel} />
+      <{{COMPONENT_CLASS_NAME}} value={value} trueLabel={trueLabel} falseLabel={falseLabel} />
     );
   }
 
@@ -161,40 +160,4 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 };
 
 
-{{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 withConfiguration({{COMPONENT_CLASS_NAME}});

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

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

package/{tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDate/DateFormatter.js → src/tasks/create/templates/Constellation/Field/Date/DateFormatter.ts.mustache}

@@ -15,8 +15,8 @@ const types = ['fromNow', 'customFormat'];
 
 // value should be in ISO 8601 format.
 function DateFormatter(
-  value,
-  { type = types[1], format = "DD/MM/YYYY", tzone } = {}
+  value: any,
+  { type = types[1], format = "DD/MM/YYYY", tzone = null } = {}
 ) {
   if (!value) return value;
   switch (type) {
@@ -31,7 +31,7 @@ function DateFormatter(
 }
 
 // value should be in hh:mm:ss format (00:00:00 - 23:59:59).
-function TimeFormatter(value, options) {
+function TimeFormatter(value: any, options: any) {
   if (!value) return value;
   const { locale = "en-US" } = options;
   const timeOnlyRegex = /^(?:[01]\d|2[0123]):(?:[012345]\d):(?:[012345]\d)$/;
@@ -49,10 +49,10 @@ function TimeFormatter(value, options) {
 }
 
 export default {
-  Date: (value, options) => DateFormatter(value, { type: 'customFormat', ...options }),
-  'Date-Time-Default': (value, options) =>
+  Date: (value: any, options: any) => DateFormatter(value, { type: 'customFormat', ...options }),
+  'Date-Time-Default': (value: any, options: any) =>
     DateFormatter(value, { ...options, type: 'customFormat', format: 'lll' }),
-  'Time-Default': (value, options) =>
+  'Time-Default': (value: any, options: any) =>
     TimeFormatter(value, {
       ...options,
       type: 'customFormat',

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

@@ -0,0 +1,20 @@
+import { FieldValueList } from '@pega/cosmos-react-core';
+
+import { format } from './date';
+
+export default function FormattedText(props: any) {
+  const { formatType = 'none', label, value, testId, hideLabel, variant = 'stacked', 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} />;
+}

package/{tests/assets/components/createAll/Constellation/Pega_DXIL_MyDate/date.js → src/tasks/create/templates/Constellation/Field/Date/date.ts.mustache}

@@ -1,6 +1,6 @@
-/* eslint-disable no-undef */
+// @ts-nocheck
 import dayjs from 'dayjs';
-import DateFormatter from './DateFormatter.js';
+import DateFormatter from './DateFormatter';
 
 import relativeTime from 'dayjs/plugin/relativeTime.js';
 import localizedFormat from 'dayjs/plugin/localizedFormat.js';

package/src/tasks/create/templates/Constellation/Field/Date/demo.stories.tsx.mustache

@@ -1,16 +1,19 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
-import { withKnobs } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 import { configProps, stateProps } from './mock';
 import {{COMPONENT_CLASS_NAME}} from './index';
 
-export default {
+const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
-  decorators: [withKnobs],
-  component: {{COMPONENT_CLASS_NAME}}
+  component: {{COMPONENT_CLASS_NAME}},
+  excludeStories: /.*Data$/
 };
 
+export default meta;
+type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
+
 if (!window.PCore) {
   window.PCore = {};
 }
@@ -26,7 +29,7 @@ window.PCore.getEnvironmentInfo = () => {
   };
 };
 
-export const Base{{COMPONENT_CLASS_NAME}} = () => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {
     getPConnect: () => {
       return {

package/src/tasks/create/templates/Constellation/Field/Date/index.tsx.mustache

@@ -1,11 +1,10 @@
 import { useEffect, useState } from 'react';
-import { DateInput, FieldValueList, DateTimeDisplay, Text,  } from '@pega/cosmos-react-core';
-import PropTypes from 'prop-types';
-import FormattedText from "./FormattedText.jsx";
+import { DateInput, FieldValueList, DateTimeDisplay, Text, withConfiguration } from '@pega/cosmos-react-core';
+import FormattedText from "./FormattedText";
 
 import type { PConnFieldProps } from './PConnProps';
 
-import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+import StyledPegaDxilMyDateWrapper from './styles';
 
 // includes in bundle
 import {
@@ -16,12 +15,12 @@ import {
   getMinDate,
   datetimeFireChangeBlurEvents,
   getDateFormat
-} from "./date.js";
+} from "./date";
 import { suggestionsHandler } from './suggestions-handler';
 import type { DateTimeFormat, DateTimeVariant } from '@pega/cosmos-react-core/lib/components/DateTime/DateTime.types.js';
 
 // interface for props
-interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
+interface PegaDxilMyDateProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
   displayAsStatus?: boolean;
   isTableFormatter?: boolean;
@@ -42,7 +41,7 @@ interface StateProps {
 }
 
 interface ConfigProps {
-  formatter?: string;
+  formatter?: string | undefined;
 }
 
 interface ActionsProps {
@@ -53,33 +52,33 @@ interface ActionsProps {
 
 // 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 {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}}Props)  {
+function PegaDxilMyDate (props: PegaDxilMyDateProps)  {
   const {
     getPConnect,
     value,
     validatemessage,
     label,
-    hideLabel,
-    helperText,
+    hideLabel = false,
+    helperText = '',
     nextYearRange,
     previousYearRange,
-    showWeekNumber,
+    showWeekNumber = false,
     testId,
-    showAsFormattedText,
-    additionalProps,
+    showAsFormattedText = false,
+    additionalProps = {},
     displayMode,
-    variant,
-    hasSuggestions
+    variant = 'inline',
+    hasSuggestions = false
    } = props;
 
-  let {formatter} = props;
+  let {formatter = 'defaultDate' } = props;
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const actionsProps = pConn.getActionsApi() as unknown as ActionsProps;
   const stateProps = pConn.getStateProps() as StateProps;
   const propName: string = stateProps.value;
 
- let { readOnly, required, disabled } = props;
+ let { readOnly = false, required = false, disabled = false } = props;
   [readOnly, required, disabled] = [readOnly, required, disabled].map(
     (prop) => prop === true || (typeof prop === "string" && prop === "true")
   );
@@ -156,13 +155,14 @@ export default function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}
         const runtimeformatter = configProps?.formatter;
 
         if (formatter !== runtimeformatter) {
-          formatter = runtimeformatter;
+          formatter = runtimeformatter!;
         }
      }
 
 
     if (formatter !== "" && formatExists(formatter)){
-        const {variantVal,formatVal} = datetimedisplayformatter(formatter);
+        // @ts-ignore
+        const {variantVal, formatVal} = datetimedisplayformatter(formatter);
         variantValue = variantVal;
         formatValue = formatVal;
     }
@@ -175,29 +175,29 @@ export default function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}
     );
     switch(displayMode){
       case 'DISPLAY_ONLY': {
-        return ( <Styled{{COMPONENT_CLASS_NAME}}Wrapper> displayComp </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
+        return ( <StyledPegaDxilMyDateWrapper> displayComp </StyledPegaDxilMyDateWrapper>);
       }
       case "LABELS_LEFT" : {
         return (
-          <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+          <StyledPegaDxilMyDateWrapper>
           <FieldValueList
             variant={hideLabel ? "stacked" : variant}
             data-testid={testId}
             fields={[{ id: '1', name: hideLabel ? "" :label, value: displayComp }]}
           />
-          </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+          </StyledPegaDxilMyDateWrapper>
 
         );
       }
       case "STACKED_LARGE_VAL" : {
         return (
-          <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+          <StyledPegaDxilMyDateWrapper>
           <FieldValueList
             variant='stacked'
             data-testid={testId}
             fields={[{ id: '2', name: hideLabel ? "" :label, value: <Text variant='h1' as='span'>{displayComp}</Text> }]}
           />
-          </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+          </StyledPegaDxilMyDateWrapper>
 
         );
       }
@@ -216,7 +216,7 @@ export default function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}
       fieldType: 'Date'
     };
     dateComponent = (
-      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      <StyledPegaDxilMyDateWrapper>
         <FormattedText
           formatType='date'
           value={value}
@@ -227,12 +227,12 @@ export default function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}
           // @ts-ignore
           customFormat={getDateFormat(locale)}
         />
-      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      </StyledPegaDxilMyDateWrapper>
     );
   } else {
 
     dateComponent = (
-      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      <StyledPegaDxilMyDateWrapper>
       <DateInput
         {...additionalProps}
         label={label}
@@ -252,52 +252,11 @@ export default function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}
         onBlur={handleBlur}
         onResolveSuggestion={onResolveSuggestionHandler}
       />
-      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      </StyledPegaDxilMyDateWrapper>
     );
   }
   return dateComponent;
 }
 
 
-
-{{COMPONENT_CLASS_NAME}}.defaultProps = {
-  value: undefined,
-  validatemessage: "",
-  helperText: "",
-  hideLabel: false,
-  disabled: false,
-  readOnly: false,
-  required: false,
-  showWeekNumber: false,
-  nextYearRange: "",
-  previousYearRange: "",
-  testId: "",
-  showAsFormattedText: false,
-  additionalProps: {},
-  displayMode: null,
-  variant: "inline",
-  formatter: "defaultDate",
-  hasSuggestions: false
-};
-
-{{COMPONENT_CLASS_NAME}}.propTypes = {
-  value: PropTypes.string,
-  label: PropTypes.string.isRequired,
-  hideLabel: PropTypes.bool,
-  getPConnect: PropTypes.func.isRequired,
-  validatemessage: PropTypes.string,
-  helperText: PropTypes.string,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  showWeekNumber: PropTypes.bool,
-  nextYearRange: PropTypes.string,
-  previousYearRange: PropTypes.string,
-  testId: PropTypes.string,
-  showAsFormattedText: PropTypes.bool,
-  additionalProps: PropTypes.objectOf(PropTypes.any),
-  displayMode: PropTypes.string,
-  variant: PropTypes.string,
-  formatter: PropTypes.string,
-  hasSuggestions: PropTypes.bool
-};
+export default withConfiguration(PegaDxilMyDate);

package/src/tasks/create/templates/Constellation/Field/Date/styles.ts.mustache

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