@pega/dx-component-builder-sdk 0.1.7 → 0.1.9

package/src/tasks/create/templates/Constellation/Template/FORM-region/demo.stories.jsx.mustache

@@ -0,0 +1,100 @@
+import { withKnobs } from '@storybook/addon-knobs';
+
+import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import { DateInput, Input, FieldValueList, Text } from '@pega/cosmos-react-core';
+import { PhoneInput as CosmosPhone } from '@pega/cosmos-react-core';
+import { pyReviewRaw, regionChildrenResolved } from './mock.stories';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+const Template = args => {
+  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
+    return Primary.args.getPConnect().createComponent(child);
+  });
+  const regionBChildren = pyReviewRaw.children[1].children.map(child => {
+    return Primary.args.getPConnect().createComponent(child);
+  });
+
+  return (
+    <{{COMPONENT_CLASS_NAME}} {...args}>
+      {regionAChildren}
+      {regionBChildren}
+    </{{COMPONENT_CLASS_NAME}}>
+  );
+};
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  template: 'DefaultForm',
+  getPConnect: () => {
+    return {
+      getChildren: () => {
+        return pyReviewRaw.children;
+      },
+      createComponent: config => {
+        switch (config.config.value) {
+          case '@P .FirstName':
+            return renderField(regionChildrenResolved[0]);
+          case '@P .MiddleName':
+            return renderField(regionChildrenResolved[1]);
+          case '@P .LastName':
+            return renderField(regionChildrenResolved[2]);
+          case '@P .Email':
+            return renderField(regionChildrenResolved[3]);
+          case '@P .PhoneNumber':
+            return renderField(regionChildrenResolved[4]);
+          case '@P .ServiceDate':
+            return renderField(regionChildrenResolved[5]);
+        }
+      }
+    };
+  }
+};
+
+const renderField = resolvedProps => {
+  const { displayMode, value = '', label = '' } = resolvedProps;
+
+  const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
+
+  let val =
+    value != '' ? (
+      <Text variant='h1' as='span'>
+        {value}
+      </Text>
+    ) : (
+      ''
+    );
+
+{{! pick new delimiteres for mustache }}
+{{=<% %>=}}
+
+  if (label === 'Service Date')
+    val = <DateInput value={value} style={{ fontSize: '14px' }}></DateInput>;
+
+  if (label === 'Email')
+    val = <Input type='email' value={value} style={{ fontSize: '14px' }}></Input>;
+
+  if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name')
+    val = <Input value={value} style={{ fontSize: '14px' }}></Input>;
+
+  if (label === 'Phone Number')
+    val = <CosmosPhone value={value} style={{ fontSize: '14px' }}></CosmosPhone>;
+
+<%={{ }}=%>     {{! revert delimiteres for mustache }}
+
+  if (variant === 'inline') {
+    val = value || <span aria-hidden='true'>&ndash;&ndash;</span>;
+  } else {
+    val = (
+      <Text variant='h1' as='span'>
+        {val}
+      </Text>
+    );
+  }
+  return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} />;
+};

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

@@ -1,5 +1,4 @@
-import { useContext } from 'react';
-import { Grid , Flex } from '@pega/cosmos-react-core';
+import { Grid, Flex } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
@@ -12,15 +11,13 @@ import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 export default function {{COMPONENT_CLASS_NAME}}(props) {
 
 
-  const { getPConnect, children, template, label } = props;
+  const { children } = props;
 
   const numRegions = children?.length;
-  const gridRepeat = 'repeat(' + numRegions + ', 1fr)';
-  let gridContainer = {};
+  const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
+  const gridContainer = {"colGap" : 1};
   gridContainer.cols = gridRepeat;
   gridContainer.alignItems = 'start';
-  gridContainer.colGap = 1;
-
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
@@ -44,8 +41,5 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
 };
 
 {{COMPONENT_CLASS_NAME}}.propTypes = {
-  label: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  template: PropTypes.string.isRequired
+  children: PropTypes.arrayOf(PropTypes.node),
 };

package/src/tasks/create/templates/Constellation/Template/FORM-region/mock.stories.js.mustache

@@ -0,0 +1,131 @@
+export const pyReviewRaw = {
+  name: 'CollectInformation',
+  type: 'View',
+  config: {
+    template: 'DefaultForm',
+    ruleClass: 'OM5W9U-SampleApp-Work-Test',
+    localeReference: '@LR OM5W9U-SAMPLEAPP-WORK-TEST!VIEW!COLLECTINFORMATION',
+    context: '@P .pyViewContext'
+  },
+  children: [
+    {
+      name: 'A',
+      type: 'Region',
+      children: [
+        {
+          type: 'TextInput',
+          config: {
+            value: '@P .FirstName',
+            label: '@L First Name'
+          }
+        },
+        {
+          type: 'TextInput',
+          config: {
+            value: '@P .MiddleName',
+            label: '@L Middle Name'
+          }
+        },
+        {
+          type: 'TextInput',
+          config: {
+            value: '@P .LastName',
+            label: '@L Last Name'
+          }
+        }
+      ]
+    },
+    {
+      name: 'B',
+      type: 'Region',
+      children: [
+        {
+          type: 'Email',
+          config: {
+            value: '@P .Email',
+            label: '@L Email'
+          }
+        },
+        {
+          type: 'Phone',
+          config: {
+            value: '@P .PhoneNumber',
+            label: '@L Phone Number',
+            datasource: {
+              source: '@DATASOURCE D_pyCountryCallingCodeList.pxResults',
+              fields: {
+                value: '@P .pyCallingCode'
+              }
+            }
+          }
+        },
+        {
+          type: 'Date',
+          config: {
+            value: '@P .ServiceDate',
+            label: '@L Service Date'
+          }
+        }
+      ]
+    }
+  ],
+  classID: 'OM5W9U-SampleApp-Work-Test'
+};
+
+export const regionChildrenResolved = [
+  {
+    readOnly: undefined,
+    value: 'John',
+    label: 'First Name',
+    hasSuggestions: false
+  },
+  {
+    readOnly: undefined,
+    value: '',
+    label: 'Middle Name',
+    hasSuggestions: false
+  },
+  {
+    readOnly: undefined,
+    value: 'Doe',
+    label: 'Last Name',
+    hasSuggestions: false
+  },
+  {
+    readOnly: undefined,
+    value: 'John@doe.com',
+    label: 'Email',
+    hasSuggestions: false
+  },
+  {
+    readOnly: undefined,
+    value: '+16397975093',
+    label: 'Phone Number',
+    datasource: {
+      fields: {
+        value: undefined
+      },
+      source: [
+        {
+          value: '+1'
+        },
+        {
+          value: '+91'
+        },
+        {
+          value: '+48'
+        },
+        {
+          value: '+44'
+        }
+      ]
+    },
+    hasSuggestions: false
+  },
+  {
+    readOnly: undefined,
+    value: '2023-01-25',
+    label: 'Service Date',
+    hasSuggestions: false
+  }
+];

package/src/tasks/create/templates/Constellation/Template/PAGE/{GetNextWork.js.mustache → GetNextWork.jsx.mustache}

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import { Button, useToaster } from '@pega/cosmos-react-core';
 
 export default function GetNextWork(props) {
@@ -8,11 +9,16 @@ export default function GetNextWork(props) {
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
 
   const getNextWork = () => {
+
+    // alert('Get next work clicked');
+
     getPConnect()
       .getActionsApi()
       .getNextWork()
       .catch((err) => {
+        /* eslint-disable no-console */
         console.log(err);
+        /* eslint-enable no-console */
         if (err[0].status === 404) {
           toasterCtx.push({
             content: localizedVal('No task currently available')

package/src/tasks/create/templates/Constellation/Template/PAGE/demo.stories.jsx.mustache

@@ -0,0 +1,102 @@
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { AppAnnouncement as PegaAppAnnouncement } from '@pega/cosmos-react-work';
+
+import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import { pyHome1Resolved, pyHome1Raw } from './mock.stories.js';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+export const base{{COMPONENT_CLASS_NAME}} = () => {
+  if (!window.PCore) {
+    window.PCore = {};
+  }
+
+  window.PCore.getLocaleUtils = () => {
+    return {
+      getLocaleValue: val => {
+        return val;
+      }
+    };
+  };
+
+  const configProps = pyHome1Resolved.children[0].children[0].config;
+
+  const props = {
+    useConfigurableLayout: false,
+    enableGetNextWork: pyHome1Raw.config.enableGetNextWork,
+    icon: pyHome1Raw.config.icon,
+    title: 'Page Template',
+
+    getPConnect: () => {
+      return {
+        getStateProps: () => {
+          return {};
+        },
+        getActionsApi: () => {
+          return {
+            getNextWork: () => {
+              return new Promise(resolve => {
+                resolve({});
+              });
+            },
+            updateFieldValue: () => {},
+            triggerFieldChange: () => {}
+          };
+        },
+        getChildren: () => {
+          return pyHome1Raw.children;
+        },
+        getComponentName: () => {
+          return '';
+        },
+        getLocalizedValue: value => {
+          return value;
+        },
+        getRawMetadata: () => {
+          return pyHome1Raw;
+        },
+        createComponent: config => {
+          switch (config.type) {
+            case 'AppAnnouncement':
+              return (
+                <PegaAppAnnouncement
+                  heading='Announcements'
+                  description={configProps.description}
+                  whatsNewLink={configProps.whatsnewlink}
+                  image={configProps.image.replace(/ /g, '+')}
+                  datasource={configProps.datasource}
+                  label={configProps.label}
+                  getPConnect={() => {
+                    return {
+                      getChildren: () => {
+                        return pyHome1Resolved.children;
+                      }
+                    };
+                  }}
+                />
+              );
+          }
+        },
+        ignoreSuggestion: () => {},
+        acceptSuggestion: () => {},
+        setInheritedProps: () => {},
+        resolveConfigProps: () => {}
+      };
+    }
+  };
+
+  const regionAChildren = pyHome1Raw.children[0].children.map(child => {
+    return props.getPConnect().createComponent(child);
+  });
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props}>{regionAChildren}</{{COMPONENT_CLASS_NAME}}>
+    </>
+  );
+};

package/src/tasks/create/templates/Constellation/Template/PAGE/index.jsx.mustache

@@ -1,19 +1,19 @@
 import { useMemo, Children } from 'react';
 import PropTypes from 'prop-types';
 import { OneColumnPage as OneColumn } from '@pega/cosmos-react-core';
-import { registerIcon } from '@pega/cosmos-react-core';
 import { ConfigurableLayout } from '@pega/cosmos-react-work'
+// import { registerIcon } from '@pega/cosmos-react-core';
 
 // temp
-//import * as headlineIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headline.icon';
+// import * as headlineIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headline.icon';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
-import GetNextWork from './GetNextWork';
+import GetNextWork from './GetNextWork.jsx';
 import { getLayoutDataFromRegion } from './utils';
 
 // temp
-//registerIcon(headlineIcon);
+// registerIcon(headlineIcon);
 
 // currently getting 'icon' from props is not supported with iconRegistry
 // have to manually get icon, so can't determine a runtime for now
@@ -27,7 +27,9 @@ import { getLayoutDataFromRegion } from './utils';
 // any default values in config.pros should be set in defaultProps at bottom of this file
 export default function {{COMPONENT_CLASS_NAME}}(props) {
 
-  const { children, title, icon, useConfigurableLayout, getPConnect, enableGetNextWork } = props;
+  // add back in icon when working
+  // const { children, title, icon, useConfigurableLayout, getPConnect, enableGetNextWork } = props;
+  const { children, title, useConfigurableLayout, getPConnect, enableGetNextWork } = props;
   const childArray = useMemo(() => {
     return Children.toArray(children);
   }, [children]);
@@ -56,13 +58,13 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
 }
 
 {{COMPONENT_CLASS_NAME}}.defaultProps = {
-  icon: '',
+  /* icon: '', */
   useConfigurableLayout: false
 };
 
 {{COMPONENT_CLASS_NAME}}.propTypes = {
   children: PropTypes.arrayOf(PropTypes.node).isRequired,
   title: PropTypes.string.isRequired,
-  icon: PropTypes.string,
+  /* icon: PropTypes.string, */
   useConfigurableLayout: PropTypes.bool
 };

package/src/tasks/create/templates/Constellation/Template/PAGE/mock.stories.js.mustache

@@ -0,0 +1,94 @@
+export const pyHome1Raw = {
+  name: 'pyHome1',
+  type: 'View',
+  config: {
+    type: 'landingpage',
+    template: 'OneColumnPage',
+    icon: 'home-solid',
+    title: '@ENV APPLICATION_DESC',
+    ruleClass: 'DIXL-MediaCo-UIPages',
+    localeReference: '@LR DIXL-MEDIACO-UIPAGES!PAGE!PYHOME1',
+    enableGetNextWork: true,
+    context: 'pyPortal'
+  },
+  children: [
+    {
+      name: 'A',
+      type: 'Region',
+      children: [
+        {
+          type: 'AppAnnouncement',
+          config: {
+            label: '@L App announcement',
+            description:
+              "We've launched a brand new experience to accelerate your workflow. Check out the guides to help you get the most of Cosmos.",
+            whatsnewlink: 'https://design.pega.com',
+            image:
+              'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSAxMSI+PHRpdGxlPlBlZ2EgdGV4dC1vbmx5IGxvZ288L3RpdGxlPjxwYXRoIHN0eWxlPSJmaWxsLW9wYWNpdHk6IC4yNTsiIGZpbGw9IiNmZmYiIGQ9Ik03LjcyIDMuODJjMCAyLjI1LTEuNzggMy40MS00IDMuNDFoLTEuNnYzSDBWLjQyaDMuOTRjMi4zNiAwIDMuNzggMS4zOSAzLjc4IDMuNHptLTQtMS40N2gtMS42djNoMS43QTEuNDcgMS40NyAwIDAgMCA1LjUgMy44MmMwLS45MS0uNjUtMS40Ny0xLjc1LTEuNDd6bTcuNjggNS45MWg1LjN2Mkg5LjI5Vi40Mmg3LjM4djEuOTNoLTUuMjR2Mmg0LjI0djEuOWgtNC4yNHpNMjMuMTggMGE1IDUgMCAwIDEgMy41NyAxLjI4TDI1LjYzIDIuOGEzLjc4IDMuNzggMCAwIDAtMS4wNS0uNjNBNC4zMiA0LjMyIDAgMCAwIDIzLjMxIDIgMy4xNyAzLjE3IDAgMCAwIDIwIDUuMjdhMy4xNiAzLjE2IDAgMCAwIDEgMi4zOSAzLjA3IDMuMDcgMCAwIDAgMi4xNy44NCA0LjYgNC42IDAgMCAwIDIuMDktLjVWNi4xOWgtMi4yVjQuMzhoNC4yNXY0LjU2YTUuNDEgNS40MSAwIDAgMS00LjA4IDEuNTdBNS4zNSA1LjM1IDAgMCAxIDE5LjQzIDlhNS4wNSA1LjA1IDAgMCAxLTEuNTYtMy43NCA1LjIxIDUuMjEgMCAwIDEgMS41Ni0zLjc2QTUuMzEgNS4zMSAwIDAgMSAyMy4xOCAwem0xMS4yOS40Mmw0LjEzIDkuNzloLTIuMjVMMzUuNDggOGgtNC4wNmwtLjkgMi4xOGgtMi4yTDMyLjUxLjQyem0uMjUgNS43MkwzMy40NCAzbC0xLjI5IDMuMTR6bTMtNWEuNzEuNzEgMCAwIDEtLjc0Ljc1LjcxLjcxIDAgMCAxLS43My0uNzUuNzMuNzMgMCAwIDEgLjc1LS43Mi43Mi43MiAwIDAgMSAuNzUuNzF6TTM3IC41M2EuNTkuNTkgMCAwIDAtLjYuNi42MS42MSAwIDEgMCAxLjIxIDAgLjYuNiAwIDAgMC0uNjEtLjZ6bS0uMjQgMVYuNzFIMzdjLjEyIDAgLjE4LjA2LjI1LjA2YS4yMS4yMSAwIDAgMSAuMDcuMTguMTkuMTkgMCAwIDEtLjA3LjE4cy0uMDcuMDgtLjEzLjA4bC4yNi4zNmgtLjJMMzcgMS4yOGgtLjF2LjI5em0uMTMtLjQ0aC4yM2EuMjYuMjYgMCAwIDAgLjA3LS4wOWgtLjA2Yy0uMDUtLjE3LS4wNS0uMTctLjEzLS4xN2gtLjF6Ii8+PC9zdmc+',
+            datasource: {
+              source: '@DATASOURCE D_pyAnnouncements.pxResults',
+              fields: {
+                name: '@P .pyLabel'
+              }
+            }
+          }
+        }
+      ]
+    }
+  ],
+  classID: 'DIXL-MediaCo-UIPages'
+};
+
+export const pyHome1Resolved = {
+  name: 'pyHome1',
+  type: 'View',
+  config: {
+    type: 'landingpage',
+    template: 'OneColumnPage',
+    icon: 'home-solid',
+    title: '@ENV APPLICATION_DESC',
+    ruleClass: 'DIXL-MediaCo-UIPages',
+    localeReference: '@LR DIXL-MEDIACO-UIPAGES!PAGE!PYHOME1',
+    enableGetNextWork: true,
+    context: 'pyPortal'
+  },
+  children: [
+    {
+      name: 'A',
+      type: 'Region',
+      getPConnect: () => {
+        return {
+          getComponentName: () => {
+            return '';
+          },
+          getComponent: () => {
+            return pyHome1Resolved.children[0];
+          },
+          getConfigProps: () => {
+            return {};
+          }
+        };
+      },
+      children: [
+        {
+          type: 'AppAnnouncement',
+          config: {
+            label: '@L App announcement',
+            description:
+              "We've launched a brand new experience to accelerate your workflow. Check out the guides to help you get the most of Cosmos.",
+            whatsnewlink: 'https://design.pega.com',
+            image:
+              'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSAxMSI+PHRpdGxlPlBlZ2EgdGV4dC1vbmx5IGxvZ288L3RpdGxlPjxwYXRoIHN0eWxlPSJmaWxsLW9wYWNpdHk6IC4yNTsiIGZpbGw9IiNmZmYiIGQ9Ik03LjcyIDMuODJjMCAyLjI1LTEuNzggMy40MS00IDMuNDFoLTEuNnYzSDBWLjQyaDMuOTRjMi4zNiAwIDMuNzggMS4zOSAzLjc4IDMuNHptLTQtMS40N2gtMS42djNoMS43QTEuNDcgMS40NyAwIDAgMCA1LjUgMy44MmMwLS45MS0uNjUtMS40Ny0xLjc1LTEuNDd6bTcuNjggNS45MWg1LjN2Mkg5LjI5Vi40Mmg3LjM4djEuOTNoLTUuMjR2Mmg0LjI0djEuOWgtNC4yNHpNMjMuMTggMGE1IDUgMCAwIDEgMy41NyAxLjI4TDI1LjYzIDIuOGEzLjc4IDMuNzggMCAwIDAtMS4wNS0uNjNBNC4zMiA0LjMyIDAgMCAwIDIzLjMxIDIgMy4xNyAzLjE3IDAgMCAwIDIwIDUuMjdhMy4xNiAzLjE2IDAgMCAwIDEgMi4zOSAzLjA3IDMuMDcgMCAwIDAgMi4xNy44NCA0LjYgNC42IDAgMCAwIDIuMDktLjVWNi4xOWgtMi4yVjQuMzhoNC4yNXY0LjU2YTUuNDEgNS40MSAwIDAgMS00LjA4IDEuNTdBNS4zNSA1LjM1IDAgMCAxIDE5LjQzIDlhNS4wNSA1LjA1IDAgMCAxLTEuNTYtMy43NCA1LjIxIDUuMjEgMCAwIDEgMS41Ni0zLjc2QTUuMzEgNS4zMSAwIDAgMSAyMy4xOCAwem0xMS4yOS40Mmw0LjEzIDkuNzloLTIuMjVMMzUuNDggOGgtNC4wNmwtLjkgMi4xOGgtMi4yTDMyLjUxLjQyem0uMjUgNS43MkwzMy40NCAzbC0xLjI5IDMuMTR6bTMtNWEuNzEuNzEgMCAwIDEtLjc0Ljc1LjcxLjcxIDAgMCAxLS43My0uNzUuNzMuNzMgMCAwIDEgLjc1LS43Mi43Mi43MiAwIDAgMSAuNzUuNzF6TTM3IC41M2EuNTkuNTkgMCAwIDAtLjYuNi42MS42MSAwIDEgMCAxLjIxIDAgLjYuNiAwIDAgMC0uNjEtLjZ6bS0uMjQgMVYuNzFIMzdjLjEyIDAgLjE4LjA2LjI1LjA2YS4yMS4yMSAwIDAgMSAuMDcuMTguMTkuMTkgMCAwIDEtLjA3LjE4cy0uMDcuMDgtLjEzLjA4bC4yNi4zNmgtLjJMMzcgMS4yOGgtLjF2LjI5em0uMTMtLjQ0aC4yM2EuMjYuMjYgMCAwIDAgLjA3LS4wOWgtLjA2Yy0uMDUtLjE3LS4wNS0uMTctLjEzLS4xN2gtLjF6Ii8+PC9zdmc+',
+            datasource: {
+              source: '@DATASOURCE D_pyAnnouncements.pxResults',
+              fields: {
+                name: '@P .pyLabel'
+              }
+            }
+          }
+        }
+      ]
+    }
+  ],
+  classID: 'DIXL-MediaCo-UIPages'
+};

package/src/tasks/create/templates/Constellation/Template/PAGE/utils.js.mustache

@@ -1,6 +1,7 @@
+/* eslint-disable no-undef */
 import { createUID } from '@pega/cosmos-react-core';
 
-//import { LazyMap as LazyComponentMap } from '../../components_map';
+// import { LazyMap as LazyComponentMap } from '../../components_map';
 
 const LazyComponentMap = {};
 
@@ -212,7 +213,9 @@ export function getInstructions(pConnect, instructions = 'casestep') {
 
   // If the annotation wasn't processed correctly, don't return any instruction text
   if (instructions?.startsWith('@PARAGRAPH')) {
+    /* eslint-disable no-console */
     console.error('@PARAGRAPH annotation was not processed. Hiding custom instructions.');
+    /* eslint-enable no-console */
     return undefined;
   }
 

package/src/tasks/create/templates/Constellation/Widget/CASE/demo.stories.jsx.mustache

@@ -0,0 +1,78 @@
+import { withKnobs } from '@storybook/addon-knobs';
+
+import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+
+import { historyData } from './mock.stories';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+window.PCore.getConstants = () => {
+  return {
+    CASE_INFO: {
+      CASE_INFO_ID: 'caseInfo.ID'
+    }
+  };
+};
+
+window.PCore.getLocaleUtils = () => {
+  return {
+    getLocaleValue: value => {
+      return value;
+    }
+  };
+};
+
+window.PCore.getDataApiUtils = () => {
+  return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(historyData);
+      });
+    }
+  };
+};
+
+export const base{{COMPONENT_CLASS_NAME}} = () => {
+
+  const props = {
+    label: 'Case history',
+
+    getPConnect: () => {
+      return {
+        getValue: value => {
+          return value;
+        },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
+        getLocalizedValue: value => {
+          return value;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {},
+            triggerFieldChange: () => {}
+          };
+        },
+        ignoreSuggestion: () => {},
+        acceptSuggestion: () => {},
+        setInheritedProps: () => {},
+        resolveConfigProps: () => {}
+      };
+    }
+};
+
+return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} />
+    </>
+  );
+};

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Table, Text } from '@pega/cosmos-react-core';