@pega/dx-component-builder-sdk 0.1.35 → 0.1.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "0.1.35",
+  "version": "0.1.37",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/constants.js

@@ -329,6 +329,10 @@ export const COMPONENT_SCHEMA = {
       }
     ],
     designSystemExtension: [
+      {
+        name: 'Banner',
+        value: 'Banner'
+      },
       {
         name: 'Case Summary Fields',
         value: 'CaseSummaryFields'
@@ -409,6 +413,10 @@ export const COMPONENT_SCHEMA = {
         name: 'App Shell',
         value: 'AppShell'
       },
+      {
+        name: 'Banner Page',
+        value: 'BannerPage'
+      },
       {
         name: 'Case Summary',
         value: 'CaseSummary'
@@ -552,6 +560,10 @@ export const COMPONENT_SCHEMA = {
       {
         name: 'Wide Narrow Page',
         value: 'WideNarrow/WideNarrowPage'
+      },
+      {
+        name: 'Wss Nav Bar',
+        value: 'WssNavBar'
       }
     ],
     widget: [

package/src/tasks/authenticate/index.js

@@ -123,9 +123,12 @@ export default async options => {
   let bWriteUpdate = false;
   for (let i = 0; i < aProps.length; i += 1) {
     const prop = aProps[i];
-    if (serverConfig[prop] !== answers[prop]) {
-      // console.log(`property ${prop} changed from ${serverConfig[prop]} to ${answers[prop]}`);
-      serverConfig[prop] = answers[prop];
+    const configValue = serverConfig[prop];
+    const answerValue = answers[prop];
+    // Treat an empty serverConfig property value as same as an undefined answer response
+    if (configValue !== answerValue && !(configValue === '' && answerValue === undefined)) {
+      // console.log(`property ${prop} changed from ${configValue} to ${answerValue}`);
+      serverConfig[prop] = answerValue;
       if (prop !== 'password' || isPwdNonEmpty) {
         bWriteUpdate = true;
       }

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

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/field/Date/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/field/DateTime/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/field/Decimal/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/field/Decimal-Currency/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/field/Decimal-Percentage/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/field/Integer/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/field/Picklist/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/field/Text/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/field/Text-Email/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/field/Text-Input/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/field/Text-Paragraph/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/field/Text-Phone/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/field/Text-URL/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/field/TimeofDay/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/template/DETAILS/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/template/DETAILS-region/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/template/FORM/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/template/FORM-region/index.jsx.mustache

@@ -19,13 +19,16 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
   gridContainer.cols = gridRepeat;
   gridContainer.alignItems = 'start';
 
+  const flexContainer = {direction: 'column'};
+  flexContainer.gap = 2;
+
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     {{! pick new delimiteres for mustache }}
     {{=<% %>=}}
       <Grid container={gridContainer}>
        {children.map((child, i) => (
-        <Flex container={{ direction: 'column'}} key={`r-${i + 1}`}>
+        <Flex container={flexContainer} key={`r-${i + 1}`}>
         {child}
         </Flex>
        ))}

package/src/tasks/create/templates/Constellation/template/FORM-region/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/template/PAGE/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 0px 0;
+    margin: 0px 0px;
   `;
 });

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

@@ -1,62 +0,0 @@
-{
-  "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

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

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

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