@pega/custom-dx-components 2.0.8 → 2.0.9

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

@@ -0,0 +1,110 @@
+import { Fragment, memo } 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 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
+export default function {{COMPONENT_CLASS_NAME}}(props) {
+
+  const {
+    getPConnect,
+    title,
+    label,
+    createLabel,
+    updateLabel,
+    createOperator,
+    updateOperator,
+    createDateTime,
+    updateDateTime,
+    resolveLabel,
+    resolveOperator,
+    resolveDateTime,
+    hideLabel,
+    defVal
+  } = props;
+
+
+  const [_label, user, dateTimeValue] =
+    label === 'Create operator'
+      ? [createLabel, createOperator, createDateTime]
+      : label === 'Update operator'
+      ? [updateLabel, updateOperator, updateDateTime]
+      : [resolveLabel, resolveOperator, resolveDateTime];
+
+
+
+  return user.userId && user.userName ? (
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      <Card>
+      <CardHeader>{title}</CardHeader>
+      <CardContent>
+{{! pick new delimiteres for mustache }} {{=<% %>=}}
+      <Flex container={{ direction: 'row'}}>
+      <Operator label={hideLabel ? null : _label} name={user.userName} id={user.userId} getPConnect={getPConnect} />
+
+<%={{ }}=%>     {{! revert delimiteres for mustache }}
+      {dateTimeValue && (
+        <Fragment>
+          {' '}
+          <DateTimeDisplay value={dateTimeValue} variant='relative' />
+        </Fragment>
+      )}
+      </Flex>
+      </CardContent>
+      </Card>
+
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+  ) : (
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    defVal
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+  );
+
+
+
+}
+
+{{COMPONENT_CLASS_NAME}}.defaultProps = {
+  "label": "Create operator",
+  "title": "Create operator",
+  createLabel: null,
+  updateLabel: null,
+  createOperator: null,
+  updateOperator: null,
+  createDateTime: null,
+  updateDateTime: null,
+  resolveLabel: null,
+  resolveOperator: null,
+  resolveDateTime: null,
+  hideLabel: false,
+  defVal: '––'
+};
+
+{{COMPONENT_CLASS_NAME}}.propTypes = {
+  getPConnect: PropTypes.func.isRequired,
+  label: PropTypes.string,
+  createLabel: PropTypes.string,
+  updateLabel: PropTypes.string,
+  resolveLabel: PropTypes.string,
+  createOperator: PropTypes.objectOf(PropTypes.any),
+  updateOperator: PropTypes.objectOf(PropTypes.any),
+  resolveOperator: PropTypes.objectOf(PropTypes.any),
+  createDateTime: PropTypes.string,
+  updateDateTime: PropTypes.string,
+  resolveDateTime: PropTypes.string,
+  hideLabel: PropTypes.bool
+};
+
+// 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;
+//};

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/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/init/template/package.json.mustache

@@ -36,18 +36,23 @@
   "sideEffects": false,
   "dependencies": {
     "@pega/cosmos-react-core": "^3.0.0-rc.4",
+    "@pega/cosmos-react-work": "3.0.0-rc.4",
     "@storybook/addon-knobs": "^6.3.1",
+    "dayjs": "^1.11.5",
+    "jest": "^29.3.1",
     "polished": "^4.2.2",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-autosuggest": "^10.1.0",
     "react-dom": "^17.0.2",
+    "react-is": "^18.2.0",
     "react-player": "^2.10.1",
+    "react-redux": "^7.2.6",
     "styled-components": "^5.3.5"
   },
   "devDependencies": {
     "@pega/configs": "^0.3.4",
-    "@pega/custom-dx-components": "^2.0.8",
+    "@pega/custom-dx-components": "^2.0.9",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",
     "@storybook/addon-links": "^6.5.12",

package/src/tasks/publish/bundle/builder/index.js

@@ -36,13 +36,40 @@ const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 
+let compilationErrors = null;
+
 // Create the build and print the deployment instructions.
 function build(config, previousFileSizes) {
   console.log(`Creating a ${Env} build...`);
 
+
+
   const compiler = webpack(config);
   return new Promise((resolve, reject) => {
     compiler.run((err, stats) => {
+
+       if (err != null && typeof (err) == "object") {
+          if (err.error != undefined) {
+            //store and print elsewhere
+            compilationErrors = err.error;
+            //console.log("err:" + err);
+          }
+       }
+       if (stats != null & typeof(stats) == "object") {
+        if (stats.errors != undefined) {
+          console.log("stats:" + stats);
+        }
+        else if (stats.compilation != undefined && stats.compilation.errors != undefined) {
+
+          //store and print elsewhere
+          compilationErrors = stats.compilation.errors;
+
+          console.log("stats:" + stats);
+        }
+
+       }
+
+
       let messages;
       if (err) {
         if (!err.message) {
@@ -131,7 +158,11 @@ export default ({
       .then(
         ({ stats, previousFileSizes, warnings }) => {
           if (warnings.length) {
-            console.log(chalk.yellow('Compiled with warnings.\n'), warnings[0].message);
+            //console.log(chalk.yellow('Compiled with warnings.\n'), warnings[0].message);
+            console.log(chalk.yellow('Compiled with warnings.\n'));
+            for (let warning in warnings) {
+              console.log(chalk.yellow("Warning.."), warnings[warning].message);
+            }
           } else {
             console.log(chalk.green('Compiled successfully.\n'));
           }
@@ -146,7 +177,7 @@ export default ({
           );
           resolve('done emitting');
         },
-        err => {
+        err  => {
           reject();
           const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
           if (tscCompileOnError) {
@@ -156,11 +187,24 @@ export default ({
               )
             );
             printBuildError(err);
-          } else {
-            console.log(chalk.red('Failed to compile.\n'));
-            printBuildError(err);
+          }
+          else if (compilationErrors != null) {
+            if (compilationErrors.length == undefined) {
+              console.log(chalk.red("Error..."), compilationErrors.message);
+            }
+            else {
+              for (let error in compilationErrors) {
+                console.log(chalk.red("Error..."), compilationErrors[error].message);
+              }
+            }
+
             process.exit(1);
           }
+          else {
+            console.log(chalk.red('Failed to compile.\n'));
+            printBuildError(JSON.stringify(err));
+
+          }
         }
       )
       .catch(err => {

package/src/tasks/publish/bundle/builder/webpack.config.js

@@ -103,13 +103,13 @@ export default (
     return loaders;
   };
   return {
-    mode: isEnvDevelopment ? 'development' : 'production',
+    mode: devBuild ? 'development' : 'production',
     // Stop compilation early in production
     bail: isEnvProduction,
     // These are the "entry points" to our application.
     // This means they will be the "root" imports that are included in JS bundle.
     entry: inputFile,
-    devtool: shouldUseSourceMap ? 'source-map' : false,
+    devtool: devBuild ? 'eval-cheap-module-source-map' : false,
     output: {
       // The build folder.
       path: paths.appBuild,
@@ -306,22 +306,26 @@ export default (
         contextRegExp: /moment$/
       }),
       /* Ignore cosmos icons */
+/*
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/icons$/,
         contextRegExp: /@pega\/cosmos-react-core\/lib\/components\/Icon$/
       }),
+*/
       /* Ignore cosmos icons - windows */
+/*
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/icons$/,
         contextRegExp: /@pega\\cosmos-react-core\\lib\\components\\Icon$/
       }),
+*/
       new webpack.optimize.LimitChunkCountPlugin({
         maxChunks: 5
       }),
       new webpack.optimize.MinChunkSizePlugin({
         minChunkSize: 100000 // Minimum number of characters
       }),
-      isEnvProduction && new CompressionPlugin(compressionBRConfObj)
+      !devBuild && new CompressionPlugin(compressionBRConfObj)
 
       /* Dont generate gzip file */
       /* isEnvProduction && new CompressionPlugin(compressionGZConfObj) */

package/src/tasks/validator/index.js

@@ -43,19 +43,118 @@ const schema = {
       type: 'array',
       uniqueItems: true,
       items: {
-        type: 'object',
-        properties: {
-          name: { type: 'string' },
-          label: { type: 'string' },
-          format: { type: 'string' }
-        },
-        required: ['name', 'label', 'format']
+        anyOf: [
+          {
+            type: 'object',
+            properties: {
+              name: { type: 'string' },
+              label: { type: 'string' },
+              format: { type: 'string' }
+            },
+            required: ['name', 'label', 'format']
+          },
+          {
+            type: 'object',
+            properties: {
+              format: { type: 'string' },
+              source: {
+                type: 'object',
+                properties: {
+                  name: { type: 'string' },
+                  label: { type: 'string' },
+                  format: { type: 'string' }
+                },
+                required: ['name', 'label', 'format']
+              },
+              cascadeElements: {
+                type: 'array',
+                uniqueItems: true,
+                items: {
+                  anyOf: [
+                    {
+                      type: 'object',
+                      properties: {
+                        key: { type: 'string'},
+                        name: { type: 'string' },
+                        label: { type: 'string' },
+                        format: { type: 'string' }
+                      },
+                      required: ['key','name', 'label', 'format']
+                    }
+                  ]
+                }
+              },
+            },
+            required: ['format']
+          },
+          {
+            type: 'object',
+            properties: {
+              label: { type: 'string' },
+              format: { type: 'string' },
+              properties: {
+                type: 'array',
+                uniqueItems: true,
+                items: {
+                  anyOf: [
+                    {
+                      type: 'object',
+                      properties: {
+                        name: { type: 'string' },
+                        label: { type: 'string' },
+                        format: { type: 'string' }
+                      },
+                      required: ['name', 'label', 'format']
+                    },
+                    {
+                      type: 'object',
+                      properties: {
+                        variant: { type: 'string' },
+                        label: { type: 'string' },
+                        format: { type: 'string' }
+                      },
+                      required: ['variant', 'label', 'format']
+                    },
+                    {
+                      type: 'object',
+                      properties: {
+                        format: { type: 'string' },
+                        elements: {
+                          type: 'array',
+                          uniqueItems: true,
+                          items: {
+                            anyOf: [
+                              {
+                                type: 'object',
+                                properties: {
+                                  key: { type: 'string' },
+                                  name: { type: 'string' },
+                                  label: { type: 'string' },
+                                  format: { type: 'string' },
+                                  variant: { type: 'string' }
+                                },
+                                required: ['key', 'format', 'label']
+                              }
+                            ]
+                          }
+                        }
+                      },
+                      required: ['format', 'elements']
+                    },
+                  ]
+                }
+              }
+
+            },
+            required: ['label', 'format'],
+          }
+        ]
       }
     },
     defaultConfig: { type: 'object' }
   },
   required: ['componentKey', 'name', 'description', 'type', 'subtype', 'properties'],
-  additionalProperties: false
+  additionalProperties: true
 };
 
 const validateSchema = ajv.compile(schema);