@pega/dx-component-builder-sdk 0.23.10 → 0.23.11

package/src/tasks/create/templates/SDK-Angular/widget/PAGE/demo.stories.tsx.mustache

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
 
 import { configProps } from './mock';
 
@@ -11,9 +10,13 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   excludeStories: /.*Data$/,
   render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
     props: {
-      ...args
-    },
-    template: `<app-{{COMPONENT_CLASS_NAME_KEBAB}} ${argsToTemplate(args)}></app-{{COMPONENT_CLASS_NAME_KEBAB}}>`
+      ...args,
+      pConn$: {
+      getConfigProps: () => {
+        return configProps;
+      }
+    } as any
+    }
   })
 };
 
@@ -21,11 +24,5 @@ export default meta;
 type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
 
 export const {{COMPONENT_CLASS_NAME}}: Story = {
-  args: {
-    pConn$: {
-      getConfigProps: () => {
-        return configProps;
-      }
-    } as any
-  }
+  args: {}
 };

package/src/tasks/create/templates/SDK-Angular/widget/PAGE/page.component.scss.mustache

@@ -1,5 +1,3 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 h2 {
   font-size: 1.2rem;
   margin-block-start: 0rem;
@@ -12,10 +10,10 @@ ul {
   padding-inline-start: 20px;
 }
 .psdk-announcement {
-  background-color: white;
+  background-color: var(--app-form-color);
   padding: 1rem;
   margin: 1rem 0;
   border-radius: 0.6125rem;
   border-left: 6px solid;
-  border-left-color: #7986cb;
+  border-left-color: var(--app-primary-color);
 }

package/src/tasks/create/templates/SDK-Angular/widget/PAGE-CASE/demo.stories.tsx.mustache

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { argsToTemplate } from '@storybook/angular';
 
 import { configProps, operatorDetails } from './mock';
 
@@ -29,9 +28,14 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   excludeStories: /.*Data$/,
   render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
     props: {
-      ...args
-    },
-    template: `<app-{{COMPONENT_CLASS_NAME_KEBAB}} ${argsToTemplate(args)}></app-{{COMPONENT_CLASS_NAME_KEBAB}}>`
+      ...args,
+      pConn$: {
+      resolveConfigProps: props => props,
+      getConfigProps: () => {
+        return configProps;
+      }
+    } as any
+    }
   })
 };
 
@@ -39,12 +43,5 @@ export default meta;
 type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
 
 export const {{COMPONENT_CLASS_NAME}}: Story = {
-  args: {
-    pConn$: {
-      resolveConfigProps: props => props,
-      getConfigProps: () => {
-        return configProps;
-      }
-    } as any
-  }
+  args: {}
 };

package/src/tasks/create/templates/SDK-Angular/widget/PAGE-CASE/page-case.component.scss.mustache

@@ -1,10 +1,8 @@
-@import '@pega/angular-sdk-components/_shared/styles.scss';
-
 .psdk-operator {
   display: flex;
   flex-direction: row;
   font-size: 0.8rem;
-  color: $app-neutral-color;
+  color: var(--app-neutral-color);
   align-items: center;
 }
 
@@ -12,22 +10,22 @@
   display: table;
   margin: auto;
   min-width: 100px;
-  background-color: white;
-  border: 1px solid black;
+  background-color: var(--app-form-color);
+  border: 1px solid var(--app-inverse-form-color);
   border-radius: 10px;
   padding: 20px;
-  box-shadow: 0 0 10px 3px #777;
+  box-shadow: 0 0 10px 3px var(--app-box-shadow-color);
   position: absolute;
   z-index: 99;
 }
 
 .psdk-operator-name {
-  color: $app-neutral-color;
+  color: var(--app-neutral-color);
 }
 
 .psdk-operator-value {
   padding-left: 5px;
-  color: $app-neutral-dark-color;
+  color: var(--app-neutral-dark-color);
   margin: 0px;
 }
 
@@ -79,5 +77,5 @@ dd {
   word-break: break-word;
   grid-column-start: 1;
   max-width: max-content;
-  color: rgba(0, 0, 0, 0.8);
+  color: var(--app-field-header-color);
 }

package/src/tasks/create/templates/SDK-React/template/FORM/demo.stories.tsx.mustache

@@ -75,6 +75,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
                             },
                             getStateProps: () => {
                               return { value: '.firstname' };
+                            },
+                            getComputedVisibility: () => {
+                              return true;
                             }
                           };
                         }
@@ -98,6 +101,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
                             },
                             getStateProps: () => {
                               return { value: '.middlename' };
+                            },
+                            getComputedVisibility: () => {
+                              return true;
                             }
                           };
                         }
@@ -123,6 +129,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
                             },
                             getStateProps: () => {
                               return { value: '.lastname' };
+                            },
+                            getComputedVisibility: () => {
+                              return true;
                             }
                           };
                         }
@@ -157,6 +166,13 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
                         },
                         onBlur: () => {
                           /* nothing */
+                        },
+                        getPConnect: () => {
+                          return {
+                            getComputedVisibility: () => {
+                              return true;
+                            }
+                          };
                         }
                       },
 
@@ -212,6 +228,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
                               return {
                                 value: ''
                               };
+                            },
+                            getComputedVisibility: () => {
+                              return true;
                             }
                           };
                         },
@@ -228,6 +247,13 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
                         hasSuggestions: false,
                         onChange: val => {
                           setEmail(val.target.value);
+                        },
+                        getPConnect: () => {
+                          return {
+                            getComputedVisibility: () => {
+                              return true;
+                            }
+                          };
                         }
                       }
                     ];

package/src/tasks/delete/helper.js

@@ -105,7 +105,7 @@ export const deleteLocalComponents = async (sourceOfComponents, category = CATEG
         case "SDK-Angular":
           // because of naming Pascal case vs Kebab case, given Pascal - use for associated
           // Kebab case customComponentKey
-          
+
           let arComp = componentKey.split("/");
           arComp[1] = convertIntoKebabCase(convertIntoPascalCase(arComp[1]));
           customComponentKey = arComp.join("/");
@@ -151,14 +151,32 @@ export const deleteLocalComponents = async (sourceOfComponents, category = CATEG
 };
 
 export const deleteServerComponents = async (sourceOfComponents, answers) => {
-  const spinner = ora('Fetching components from server').start();
-  const data = await getComponentsFromServer(answers);
+  let spinner;
+  let data;
+  try {
+    spinner = ora('Fetching components from server').start();
+    data = await getComponentsFromServer(answers);
+    spinner.stop();
+  }
+  catch (error) {
+    spinner.stop();
+    if (error.indexOf("ECONNREFUSED") >= 0) {
+      console.log(`\n${chalk.bold.red('Error occurred in authentication. Please regenerate using authenticate')}`);
+    }
+    else {
+      console.log(`${chalk.bold.red(error)}`);
+    }
+
+    // spinner.stop();
+    process.exit(1);
+  }
+
   const componentObj = await getComponentsObj(false);
-  
   const framework = await getFramework();
-
   const serverComponents = JSON.parse(data);
   spinner.stop();
+
+
   if (serverComponents && serverComponents.pxResults?.length > 0) {
     const choicesArr = serverComponents.pxResults.map(({ label, pyRuleSet, pyRuleSetVersion }) => {
       const name = `${standardizeStr(label, 45)} ${standardizeStr(pyRuleSet, 30)} ${standardizeStr(

package/src/tasks/delete-all/helper.js

@@ -85,9 +85,9 @@ export const deleteLocalComponents = async (sourceOfComponents, category = CATEG
         else {
           console.log(chalk.bold.green(localComponents[index].name));
         }
-    
+
       }
-      
+
       const answers = await inquirer.prompt([
 
         {
@@ -112,7 +112,7 @@ export const deleteLocalComponents = async (sourceOfComponents, category = CATEG
             case "SDK-Angular":
               // because of naming Pascal case vs Kebab case, given Pascal - use for associated
               // Kebab case customComponentKey
-              
+
               let arComp = componentToDelete.split("/");
               arComp[1] = convertIntoKebabCase(convertIntoPascalCase(arComp[1]));
               customComponentKey = arComp.join("/");
@@ -158,8 +158,27 @@ export const deleteLocalComponents = async (sourceOfComponents, category = CATEG
 };
 
 export const deleteServerComponents = async (sourceOfComponents, answers) => {
-  const spinner = ora('Fetching components from server').start();
-  const data = await getComponentsFromServer(answers);
+  let spinner;
+  let data;
+  try {
+    spinner = ora('Fetching components from server').start();
+    data = await getComponentsFromServer(answers);
+    spinner.stop();
+  }
+  catch (error) {
+    spinner.stop();
+    if (error.indexOf("ECONNREFUSED") >= 0) {
+      console.log(`\n${chalk.bold.red('Error occurred in authentication. Please regenerate using authenticate')}`);
+    }
+    else {
+      console.log(`${chalk.bold.red(error)}`);
+    }
+
+    // spinner.stop();
+    process.exit(1);
+  }
+
+
   const defaultPegaConfig = await getPegaServerConfig();
   const componentObj = await getComponentsObj(false);
 

package/src/tasks/list/helper.js

@@ -81,17 +81,28 @@ export const getComponentsFromServer = async data => {
           })
             .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) {
+              }
+              else if (status === 404){
+                throw new Error('404: Server resource not found');
+              }
+              else if (status === 405){
+                throw new Error('405: Server method not allowed');
+              }
+              else if (status === 408){
+                throw new Error('408: Server timed out');
+              }
+
+              return response.text();
+            })
+            .then(resp => {
+              const respData = JSON.parse(resp);
+              if (status == 200) {
                 resolve(resp);
               } else {
                 throw new Error(`${respData.message}`);

package/src/tasks/list/index.js

@@ -1,5 +1,6 @@
 import inquirer from 'inquirer';
 import ora from 'ora';
+import chalk from 'chalk';
 
 import {
   listLocalComponents,
@@ -26,12 +27,27 @@ const getList = async (sourceOfComponents, answers, options) => {
       break;
     }
     case SOURCE_OF_COMPONENT_TYPES.SERVER: {
-      const spinner = ora('Fetching components from server\n').start();
-      const data = await getComponentsFromServer(answers);
-      spinner.stop();
-      await displayServerComponents(data, answers);
+      try {
+        const data = await getComponentsFromServer(answers);
+        spinner.stop();
+        await displayServerComponents(data, answers);
+      }
+      catch (error) {
+
+        if (error.indexOf("ECONNREFUSED") >= 0) {
+          console.log(`\n${chalk.bold.red('Error occurred in authentication. Please regenerate using authenticate')}`);
+        }
+        else {
+          console.log(`${chalk.bold.red(error)}`);
+        }
+
+        // spinner.stop();
+        process.exit(1);
+
+      }
 
       break;
+
     }
     default: {
       console.log('Source of components needs to be either Local or Server');

package/src/tasks/publish/helper.js

@@ -265,17 +265,27 @@ export const publishComponentToServer = async (data, doFetch = true) => {
         })
           .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) {
+            }
+            else if (status === 404){
+              throw new Error('404: Server resource not found');
+            }
+            else if (status === 405){
+              throw new Error('405: Server method not allowed');
+            }
+            else if (status === 408){
+              throw new Error('408: Server timed out');
+            }
+            return response.text();
+          })
+          .then(resp => {
+            const respData = JSON.parse(resp);
+            if (status == 200) {
               console.log(chalk.bold.green(`Success : ${respData.message}`));
             }
             else if (status === 403) {

package/src/tasks/publish-all/helper.js

@@ -252,33 +252,50 @@ export const publishComponentToServer = async (data, doFetch = true) => {
           body: JSON.stringify(apiBody)
         });
 
+        status = response.status;
         if (!response.ok) {
-          if (response.status === 408) {
+          if (status === 401) {
             throw new Error(
-              'Server Time out'
+              'Error occurred in authentication. Please regenerate using authenticate'
             );
-
+            // console.log(accessTokenUri, refreshToken);
+            /* TODO - Handle refresh_token */
+          }
+          else if (status === 404){
+            throw new Error('404: Server resource not found');
           }
-          if (response.status === 401) {
+          else if (status === 405){
+            throw new Error('405: Server method not allowed');
+          }
+          else if (status === 408){
+            throw new Error('408: Server timed out');
+          }
+          else if (response.status === 403) {
             throw new Error(
-              'Error occurred in authentication. Please regenerate using authenticate'
+              'Error forbidden: User does not have privileges to Publish.'
             );
           }
-          if (response.status === 403) {
+          else if (response.status === 500) {
             throw new Error(
-              'Error forbidden: User does not have privileges to Publish.'
+             `Error occurred in authentication. Please regenerate using authenticate`
+            );
+          }
+          else {
+            throw new Error(
+              `Server error: ${status}`
             );
           }
 
         }
 
+
         const data = await response.json();
 
       } 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`);
+      throw new Error(err);
     }
   }
 

package/src/util.js

@@ -160,7 +160,7 @@ export const getLocalComponentKeyFromConfig = async (folderName, category) => {
     return "";
   }
 
-  
+
 }
 
 export const deleteLocalComponent = async (componentKey, category = CATEGORY_CUSTOM) => {
@@ -230,6 +230,23 @@ export const deleteServerComponent = async componentKey => {
       })
         .then(response => {
           status = response.status;
+          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 === 404){
+            throw new Error('404: Server resource not found');
+          }
+          else if (status === 405){
+            throw new Error('405: Server method not allowed');
+          }
+          else if (status === 408){
+            throw new Error('408: Server timed out');
+          }
+
           return response.text();
         })
         .then(resp => {

package/tests/assets/sdk-r/components/create/custom-constellation/_custom-constellation.md

@@ -0,0 +1,5 @@
+# The **components/custom-constellation** directory
+
+The **src/components/custom-constellation** directory contains the code for Constellation-related _associated_ components of custom components that you create and use with the **React SDK**.
+These _associated_ components are used to show the preview of the custom component in App Studio when you are authoring your application and App Studio needs to use the Constellation
+design system version of your custom component.

package/tests/assets/sdk-r/components/create/custom-constellation/field/Pega_DXIL_MyTestText/PConnProps.d.ts

@@ -0,0 +1,46 @@
+import  {PConnect } from '@pega/pcore-pconnect-typedefs';
+
+// PConnProps.d.ts
+// This gives us a place to have each component (which is most DX Components) that is
+//  expected to have a getPConnect extend its props (from BaseProps)
+//  such that every component will be expected to have a getPConnect() function
+//  that returns a PConnect object. (new/better way of doing .propTypes).
+//  This PConnProps can be extended to include other props that we know are in every component
+export interface PConnProps {
+  // getPConnect should exist for every C11n component. (add @ts-ignore in special cases where it isn't)
+  getPConnect: () => typeof PConnect;
+
+  // Allow any/all other key/value pairs in the BaseProps for now
+  //  TODO: refine which other props are always expected for various component
+  //    types and consider further interface "subclassing". For example, we may
+  //    want to create a "BasePropsForm" that gives guidance on required, readonly, etc.
+  //    and any other props that every Form component expects.
+  //    For example, see the PConnFieldProps below.
+  // NOTE: if you uncomment the line below, the PConnProps type will allow
+  //  otherwise undefined types to appear. This can be helpful for debugging
+  //  or when adding new components whose types aren't yet known.
+  // [key: string]: any;
+}
+
+
+// PConnFieldProps extends PConnProps to bring in the common properties that are
+// associated with most field components (ex: Dropdown, TextInput, etc.) in the
+//  components/field directory
+export interface PConnFieldProps extends PConnProps {
+  label: string,
+  required: boolean,
+  disabled: boolean,
+  value: any,
+  validatemessage: string,
+  status?: string,
+  onChange?: any,
+  onBlur?: any,
+  readOnly: boolean,
+  testId: string,
+  helperText: string,
+  displayMode?: string,
+  hideLabel: boolean,
+  placeholder?: string,
+  fieldMetadata?: any,
+  additionalProps?: any
+}

package/tests/assets/sdk-r/components/create/custom-constellation/field/Pega_DXIL_MyTestText/demo.stories.tsx

@@ -0,0 +1,54 @@
+
+/* eslint-disable react/jsx-no-useless-fragment */
+// @ts-nocheck
+import { useState } from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { stateProps, configProps } from './mock';
+
+import PegaDxilMyTestText from './index';
+
+export default {
+  title: 'PegaDxilMyTestText',
+  decorators: [withKnobs],
+  component: PegaDxilMyTestText
+};
+
+export const BasePegaDxilMyTestText = () => {
+
+  const [value, setValue] = useState(configProps.value);
+
+  const props = {
+    value,
+    placeholder: configProps.placeholder,
+    label: configProps.label,
+    testId: configProps.testId,
+    hasSuggestions: configProps.hasSuggestions,
+
+    getPConnect: () => {
+      return {
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            },
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <PegaDxilMyTestText {...props} />
+    </>
+  );
+};