@pega/dx-component-builder-sdk 0.1.4 → 0.1.6

package/src/tasks/create/templates/SDK-React/Field/Text-Email/demo.stories.jsx.mustache

@@ -1,4 +1,5 @@
-import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import { useState } from 'react';
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
 import { withKnobs } from '@storybook/addon-knobs';
 import { configProps } from './mock.stories';
 
@@ -9,9 +10,10 @@ export default {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
- 
+  const [value, setValue] = useState(configProps.value);
+
   const props = {
-    value: configProps.value,
+    value,
     placeholder: configProps.placeholder,
     label: configProps.label,
     testId: configProps.testId,
@@ -21,7 +23,21 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
     required: configProps.required,
     readOnly: configProps.readOnly,
     displayMode: configProps.displayMode,
-    onchange: () => { return configProps.value; },
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            }
+          };
+        },
+        getStateProps: () => {
+          return { value: '.name' };
+        }
+      };
+    },
+    onChange: (event) => { setValue(event.target.value); },
     onBlur: () => { return configProps.value; }
   };
   return (

package/src/tasks/create/templates/SDK-React/Field/Text-Input/demo.stories.jsx.mustache

@@ -1,4 +1,5 @@
-import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import { useState } from 'react';
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
 import { withKnobs } from '@storybook/addon-knobs';
 import { configProps, fieldMetadata } from './mock.stories';
 
@@ -9,15 +10,31 @@ export default {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
+  const [value, setValue] = useState(configProps.value);
+
   const props = {
-    value: configProps.value,
+    value,
     placeholder: configProps.placeholder,
     label: configProps.label,
     helperText: configProps.helperText,
     testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
     fieldMetadata,
-    onchange: () => { return configProps.value; },
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            }
+          };
+        },
+        getStateProps: () => {
+          return { value: '.name' };
+        }
+      };
+    },
+    onChange: (event) => { setValue(event.target.value); },
     onBlur: () => { return configProps.value; }
   };
 

package/src/tasks/create/templates/SDK-React/Field/Text-Paragraph/demo.stories.jsx.mustache

@@ -1,5 +1,5 @@
-
-import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import { useState } from 'react';
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
 import { configProps, fieldMetadata } from './mock.stories';
 import { withKnobs } from '@storybook/addon-knobs';
 
@@ -10,9 +10,10 @@ export default {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
+  const [value, setValue] = useState(configProps.value);
 
   const props = {
-    value: configProps.value,
+    value,
     placeholder: configProps.placeholder,
     label: configProps.label,
     testId: configProps.testId,
@@ -23,7 +24,21 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
     readOnly: configProps.readOnly,
     displayMode: configProps.displayMode,
     fieldMetadata,
-    onchange: () => { return configProps.value; },
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            }
+          };
+        },
+        getStateProps: () => {
+          return { value: '.name' };
+        }
+      };
+    },
+    onChange: (event) => { setValue(event.target.value); },
     onBlur: () => { return configProps.value; }
   };
 

package/src/tasks/create/templates/SDK-React/Field/Text-Phone/demo.stories.jsx.mustache

@@ -1,4 +1,5 @@
-import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import { useState } from 'react';
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
 import { withKnobs } from '@storybook/addon-knobs';
 import { configProps } from './mock.stories';
 
@@ -9,9 +10,10 @@ export default {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
+  const [value, setValue] = useState(configProps.value);
  
   const props = {
-    value: configProps.value,
+    value,
     placeholder: configProps.placeholder,
     label: configProps.label,
     testId: configProps.testId,
@@ -21,7 +23,23 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
     required: configProps.required,
     readOnly: configProps.readOnly,
     displayMode: configProps.displayMode,
-    onchange: () => { return configProps.value; },
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            }
+          };
+        },
+        getStateProps: () => {
+          return { value: '.name' };
+        }
+      };
+    },
+    onChange: phone => {
+      setValue(phone.value);
+    },
     onBlur: () => { return configProps.value; }
   };
 

package/src/tasks/create/templates/SDK-React/Field/Text-URL/demo.stories.jsx.mustache

@@ -1,5 +1,6 @@
+import { useState } from 'react';
 import { withKnobs } from '@storybook/addon-knobs';
-import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
 import { configProps } from './mock.stories';
 
 export default {
@@ -9,9 +10,10 @@ export default {
 };
 
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
+  const [value, setValue] = useState(configProps.value);
 
   const props = {
-    value: configProps.value,
+    value,
     placeholder: configProps.placeholder,
     label: configProps.label,
     testId: configProps.testId,
@@ -21,8 +23,22 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
     required: configProps.required,
     readOnly: configProps.readOnly,
     displayMode: configProps.displayMode,
-    onchange: () => { return configProps.value; },
-    onBlur: ( return configProps.value; ) => {}
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            }
+          };
+        },
+        getStateProps: () => {
+          return { value: '.name' };
+        }
+      };
+    },
+    onChange: (event) => { setValue(event.target.value); },
+    onBlur: () => { return configProps.value; }
   };
 
   return (

package/src/tasks/create/templates/SDK-React/Field/TimeofDay/demo.stories.jsx.mustache

@@ -3,7 +3,7 @@ import { withKnobs } from '@storybook/addon-knobs';
 
 import { configProps, stateProps } from './mock.stories';
 
-import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
 
 export default {
   title: '{{COMPONENT_CLASS_NAME}}',

package/src/tasks/create/templates/SDK-React/Field/TimeofDay/index.tsx.mustache

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
+
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation

package/src/tasks/create/templates/SDK-React/Widget/CASE/demo.stories.jsx.mustache

@@ -0,0 +1,70 @@
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { historyData } from './mock.stories';
+
+import {{COMPONENT_CLASS_NAME}} from './index.tsx';
+
+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.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: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} />
+    </>
+  );
+};