@pega/dx-component-builder-sdk 23.1.14 → 23.1.15

package/src/tasks/create/templates/Constellation/field/Text/demo.stories.tsx.mustache

@@ -2,27 +2,27 @@
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
 import { useState } from 'react';
-import { withKnobs } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { stateProps, configProps } from './mock';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
 
-export default {
+const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
-  decorators: [withKnobs],
-  component: {{COMPONENT_CLASS_NAME}}
+  component: {{COMPONENT_CLASS_NAME}},
+  excludeStories: /.*Data$/
 };
 
-export const Base{{COMPONENT_CLASS_NAME}} = () => {
+export default meta;
+type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
+
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const [value, setValue] = useState(configProps.value);
 
   const props = {
     value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
 
     getPConnect: () => {
@@ -48,7 +48,21 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
 
   return (
     <>
-      <{{COMPONENT_CLASS_NAME}} {...props} />
+      <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
     </>
   );
 };
+
+Base{{COMPONENT_CLASS_NAME}}.args = {
+  label: configProps.label,
+  helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
+  testId: configProps.testId,
+  readOnly: configProps.readOnly,
+  disabled: configProps.disabled,
+  required: configProps.required,
+  status: configProps.status,
+  hideLabel: configProps.hideLabel,
+  displayMode: configProps.displayMode,
+  validatemessage: configProps.validatemessage
+};

package/src/tasks/create/templates/Constellation/field/Text/index.tsx.mustache

@@ -1,5 +1,4 @@
-import PropTypes from 'prop-types';
-import { Input } from '@pega/cosmos-react-core';
+import { Input, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
 
@@ -21,8 +20,8 @@ interface StateProps {
 
 // 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: {{COMPONENT_CLASS_NAME}}Props) {
-  const { getPConnect, value, placeholder, disabled, readOnly, required, label, hideLabel, testId } = props;
+function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
+  const { getPConnect, value, placeholder, disabled = false, readOnly = false, required = false, label, hideLabel = false, testId } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
@@ -52,22 +51,5 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   );
 };
 
-{{COMPONENT_CLASS_NAME}}.defaultProps = {
-  value: '',
-  placeholder: '',
-  disabled: false,
-  readOnly: false,
-  required: false,
-  testId: ''
-};
 
-{{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 withConfiguration({{COMPONENT_CLASS_NAME}});

package/src/tasks/create/templates/Constellation/field/Text/mock.ts.mustache

@@ -6,7 +6,14 @@ export const configProps = {
   placeholder: 'Text Placeholder',
   helperText: 'Text Helper Text',
   testId: 'Text-12345678',
-  hasSuggestions: false
+  hasSuggestions: false,
+  displayMode: '',
+  hideLabel: false,
+  readOnly: false,
+  required: false,
+  disabled: false,
+  status: '',
+  validatemessage: ''
 };
 
 export const stateProps = {

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

@@ -1,15 +1,8 @@
-
-// utilizing theming, comment out, if want individual style
-import styled from 'styled-components';
-import { Configuration } from '@pega/cosmos-react-core';
-
-export default styled(Configuration)``;
-
 // individual style, comment out above, and uncomment here and add styles
-// import styled, { css } from 'styled-components';
-//
-// export default styled.div(() => {
-//  return css`
-//    margin: 0px 0;
-//  `;
-// });
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/src/tasks/create/templates/Constellation/field/Text-Email/demo.stories.tsx.mustache

@@ -1,29 +1,27 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
-import { withKnobs } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
 
 import { stateProps, configProps, fieldMetadata } from './mock';
 
-export default {
+const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
-  decorators: [withKnobs],
-  component: {{COMPONENT_CLASS_NAME}}
+  component: {{COMPONENT_CLASS_NAME}},
+  excludeStories: /.*Data$/
 };
 
-export const Base{{COMPONENT_CLASS_NAME}} = () => {
+export default meta;
+type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
+
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const props = {
     value: configProps.value,
-    label: configProps.label,
-    placeholder: configProps.placeholder,
-    helperText: configProps.helperText,
-    testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
     fieldMetadata,
-
     getPConnect: () => {
       return {
         getStateProps: () => {
@@ -45,7 +43,22 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
 
   return (
     <>
-      <{{COMPONENT_CLASS_NAME}} {...props} />
+      <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
     </>
   );
 };
+
+Base{{COMPONENT_CLASS_NAME}}.args = {
+  label: configProps.label,
+  helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
+  testId: configProps.testId,
+  readOnly: configProps.readOnly,
+  disabled: configProps.disabled,
+  required: configProps.required,
+  status: configProps.status,
+  hideLabel: configProps.hideLabel,
+  displayMode: configProps.displayMode,
+  variant: configProps.variant,
+  validatemessage: configProps.validatemessage
+};

package/src/tasks/create/templates/Constellation/field/Text-Email/index.tsx.mustache

@@ -1,6 +1,5 @@
 import { useState, useEffect, useRef } from 'react';
-import { Input, EmailDisplay, FieldValueList, Text, URLDisplay, PhoneDisplay } from '@pega/cosmos-react-core';
-import PropTypes from 'prop-types';
+import { Input, EmailDisplay, FieldValueList, Text, URLDisplay, PhoneDisplay, withConfiguration } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
 
 // includes in bundle
@@ -73,21 +72,21 @@ export const textFormatter = (formatter: string, value: any) => {
 
 // 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: {{COMPONENT_CLASS_NAME}}Props) {
+function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
  const {
     getPConnect,
     value,
     placeholder,
     validatemessage,
     label,
-    hideLabel,
+    hideLabel = false,
     helperText,
     testId,
     displayMode,
-    additionalProps,
-    variant,
-    isTableFormatter,
-    hasSuggestions
+    additionalProps = {},
+    variant = 'inline',
+    isTableFormatter = false,
+    hasSuggestions = false
   } = props;
   const { formatter } = props;
   const pConn = getPConnect();
@@ -98,7 +97,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const hasValueChange = useRef(false);
 
 
-  let { readOnly, required, disabled } = props;
+  let { readOnly = false, required = false, disabled = false } = props;
   [readOnly, required, disabled] = [readOnly, required, disabled].map(
     (prop) => prop === true || (typeof prop === 'string' && prop === 'true')
   );
@@ -129,7 +128,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     }
     return displayMode === 'DISPLAY_ONLY' ? (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      displayComp
+      {displayComp}
       </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     ) : (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
@@ -212,40 +211,4 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   );
 }
 
-{{COMPONENT_CLASS_NAME}}.defaultProps = {
-  value: '',
-  placeholder: '',
-  validatemessage: '',
-  helperText: '',
-  hideLabel: false,
-  disabled: false,
-  readOnly: false,
-  required: false,
-  testId: '',
-  displayMode: null,
-  additionalProps: {},
-  variant: 'inline',
-  formatter: '',
-  isTableFormatter: false,
-  hasSuggestions: false
-};
-
-{{COMPONENT_CLASS_NAME}}.propTypes = {
-  value: PropTypes.string,
-  placeholder: PropTypes.string,
-  label: PropTypes.string.isRequired,
-  hideLabel: PropTypes.bool,
-  getPConnect: PropTypes.func.isRequired,
-  validatemessage: PropTypes.string,
-  helperText: PropTypes.string,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  testId: PropTypes.string,
-  displayMode: PropTypes.string,
-  additionalProps: PropTypes.objectOf(PropTypes.any),
-  variant: PropTypes.string,
-  formatter: PropTypes.string,
-  isTableFormatter: PropTypes.bool,
-  hasSuggestions: PropTypes.bool
-};
+export default withConfiguration({{COMPONENT_CLASS_NAME}});

package/src/tasks/create/templates/Constellation/field/Text-Email/mock.ts.mustache

@@ -6,7 +6,14 @@ export const configProps = {
   placeholder: 'Email Placeholder',
   helperText: 'Email Helper Text',
   testId: 'email-12345678',
-  hasSuggestions: false
+  hasSuggestions: false,
+  displayMode: '',
+  hideLabel: false,
+  readOnly: false,
+  required: false,
+  disabled: false,
+  status: '',
+  validatemessage: ''
 };
 
 export const stateProps = {

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

@@ -1,15 +1,8 @@
-
-// utilizing theming, comment out, if want individual style
-import styled from 'styled-components';
-import { Configuration } from '@pega/cosmos-react-core';
-
-export default styled(Configuration)``;
-
 // individual style, comment out above, and uncomment here and add styles
-// import styled, { css } from 'styled-components';
-//
-// export default styled.div(() => {
-//  return css`
-//    margin: 0px 0;
-//  `;
-// });
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/src/tasks/create/templates/Constellation/field/Text-Input/StatusWork.tsx

@@ -2,9 +2,9 @@
 import React from 'react';
 import { Status } from '@pega/cosmos-react-core';
 
-export default function StatusWorkRenderer({ value } : any) {
+export default function StatusWorkRenderer({ value }: any) {
   // need to cast variant
-  let variant : 'success' | 'urgent' | 'warn' | 'pending' | 'info';
+  let variant: 'success' | 'urgent' | 'warn' | 'pending' | 'info';
   variant = 'info';
 
   const warnStrings = ['fail', 'cancel', 'reject', 'revoke', 'stopped', 'warn'];
@@ -22,11 +22,5 @@ export default function StatusWorkRenderer({ value } : any) {
     variant = 'pending';
   }
 
-
-
-  return (
-    <Status type='rectangle' variant={variant} >
-      {value}
-    </Status>
-  );
+  return <Status variant={variant}>{value}</Status>;
 }

package/src/tasks/create/templates/Constellation/field/Text-Input/demo.stories.tsx.mustache

@@ -1,29 +1,27 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
-import { withKnobs } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
 
 import { stateProps, fieldMetadata, configProps } from './mock';
 
-export default {
+const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
-  decorators: [withKnobs],
-  component: {{COMPONENT_CLASS_NAME}}
+  component: {{COMPONENT_CLASS_NAME}},
+  excludeStories: /.*Data$/
 };
 
-export const Base{{COMPONENT_CLASS_NAME}} = () => {
+export default meta;
+type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
+
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const props = {
     value: configProps.value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
     fieldMetadata,
-
     getPConnect: () => {
       return {
         getStateProps: () => {
@@ -45,7 +43,22 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
 
   return (
     <>
-      <{{COMPONENT_CLASS_NAME}} {...props} />
+      <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
     </>
   );
 };
+
+Base{{COMPONENT_CLASS_NAME}}.args = {
+  label: configProps.label,
+  helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
+  testId: configProps.testId,
+  readOnly: configProps.readOnly,
+  disabled: configProps.disabled,
+  required: configProps.required,
+  status: configProps.status,
+  hideLabel: configProps.hideLabel,
+  displayMode: configProps.displayMode,
+  variant: configProps.variant,
+  validatemessage: configProps.validatemessage
+};

package/src/tasks/create/templates/Constellation/field/Text-Input/index.tsx.mustache

@@ -1,6 +1,5 @@
 import { useEffect, useState, useRef } from 'react';
-import { Input, FieldValueList, Text, EmailDisplay, PhoneDisplay, URLDisplay } from '@pega/cosmos-react-core';
-import PropTypes from 'prop-types';
+import { Input, FieldValueList, Text, EmailDisplay, PhoneDisplay, URLDisplay, withConfiguration } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
 
 // include in bundle
@@ -74,22 +73,22 @@ export const textFormatter = (formatter: string, value: string) => {
 
 // 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: {{COMPONENT_CLASS_NAME}}Props) {
+function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
  const {
     getPConnect,
     placeholder,
     validatemessage,
     label,
-    hideLabel,
+    hideLabel = false,
     helperText,
     testId,
-    fieldMetadata,
-    additionalProps,
+    fieldMetadata = {},
+    additionalProps = {},
     displayMode,
     displayAsStatus,
-    variant,
-    hasSuggestions,
-    isTableFormatter
+    variant = 'inline',
+    hasSuggestions = false,
+    isTableFormatter = false
   } = props;
   const { formatter } = props;
   const pConn = getPConnect();
@@ -99,7 +98,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const maxLength = fieldMetadata?.maxLength;
   const hasValueChange = useRef(false);
 
-  let { value, readOnly, required, disabled } = props;
+  let { value, readOnly = false, required = false, disabled = false } = props;
   [readOnly, required, disabled] = [readOnly, required, disabled].map(
     (prop) => prop === true || (typeof prop === 'string' && prop === 'true')
   );
@@ -144,7 +143,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
       displayComp = textFormatter(formatter, value);
     }
     return displayMode === 'DISPLAY_ONLY' ? (
-      <Styled{{COMPONENT_CLASS_NAME}}Wrapper> displayComp </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      <Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComp} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     ) : (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <FieldValueList
@@ -221,44 +220,5 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   );
 }
 
-{{COMPONENT_CLASS_NAME}}.defaultProps = {
-  value: '',
-  placeholder: '',
-  validatemessage: '',
-  helperText: '',
-  displayAsStatus: false,
-  hideLabel: false,
-  disabled: false,
-  readOnly: false,
-  required: false,
-  testId: '',
-  fieldMetadata: {},
-  additionalProps: {},
-  displayMode: null,
-  variant: 'inline',
-  formatter: '',
-  isTableFormatter: false,
-  hasSuggestions: false
-};
 
-{{COMPONENT_CLASS_NAME}}.propTypes = {
-  value: PropTypes.string,
-  placeholder: PropTypes.string,
-  displayMode: PropTypes.string,
-  displayAsStatus: PropTypes.bool,
-  label: PropTypes.string.isRequired,
-  hideLabel: PropTypes.bool,
-  getPConnect: PropTypes.func.isRequired,
-  validatemessage: PropTypes.string,
-  helperText: PropTypes.string,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  testId: PropTypes.string,
-  fieldMetadata: PropTypes.objectOf(PropTypes.any),
-  additionalProps: PropTypes.objectOf(PropTypes.any),
-  variant: PropTypes.string,
-  formatter: PropTypes.string,
-  isTableFormatter: PropTypes.bool,
-  hasSuggestions: PropTypes.bool
-};
+export default withConfiguration({{COMPONENT_CLASS_NAME}});

package/src/tasks/create/templates/Constellation/field/Text-Input/mock.ts.mustache

@@ -6,7 +6,15 @@ export const configProps = {
   placeholder: 'TextInput Placeholder',
   helperText: 'TextInput Helper Text',
   testId: 'TextInput-12345678',
-  hasSuggestions: false
+  hasSuggestions: false,
+  displayMode: '',
+  variant: '',
+  hideLabel: false,
+  readOnly: false,
+  required: false,
+  disabled: false,
+  status: '',
+  validatemessage: ''
 };
 
 export const stateProps = {

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

@@ -1,15 +1,8 @@
-
-// utilizing theming, comment out, if want individual style
-import styled from 'styled-components';
-import { Configuration } from '@pega/cosmos-react-core';
-
-export default styled(Configuration)``;
-
 // individual style, comment out above, and uncomment here and add styles
-// import styled, { css } from 'styled-components';
-//
-// export default styled.div(() => {
-//  return css`
-//    margin: 0px 0;
-//  `;
-// });
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/src/tasks/create/templates/Constellation/field/Text-Paragraph/demo.stories.tsx.mustache

@@ -1,29 +1,27 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
-import { withKnobs } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
 
 import { stateProps, configProps, fieldMetadata } from './mock';
 
-export default {
+const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
-  decorators: [withKnobs],
-  component: {{COMPONENT_CLASS_NAME}}
+  component: {{COMPONENT_CLASS_NAME}},
+  excludeStories: /.*Data$/
 };
 
-export const Base{{COMPONENT_CLASS_NAME}} = () => {
+export default meta;
+type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
+
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const props = {
     value: configProps.value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
     fieldMetadata,
-
     getPConnect: () => {
       return {
         getStateProps: () => {
@@ -45,7 +43,22 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
 
   return (
     <>
-      <{{COMPONENT_CLASS_NAME}} {...props} />
+      <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
     </>
   );
 };
+
+Base{{COMPONENT_CLASS_NAME}}.args = {
+  label: configProps.label,
+  helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
+  testId: configProps.testId,
+  readOnly: configProps.readOnly,
+  disabled: configProps.disabled,
+  required: configProps.required,
+  status: configProps.status,
+  hideLabel: configProps.hideLabel,
+  displayMode: configProps.displayMode,
+  variant: configProps.variant,
+  validatemessage: configProps.validatemessage
+};