@pega/custom-dx-components 0.242.17 → 0.242.18

package/tests/assets/library/components/createAll/Launchpad/Pega_DXIL_MySearchbox/mock.ts

@@ -0,0 +1,74 @@
+export const configProps = {
+  value: '',
+  label: 'Picklist Sample',
+  placeholder: 'Select...',
+  listType: 'associated',
+  datasource: [
+    {
+      key: 'Option 1',
+      value: 'Option 1'
+    },
+    {
+      key: 'Option 2',
+      value: 'Option 2'
+    },
+    {
+      key: 'Option 3',
+      value: 'Option 3'
+    }
+  ],
+  helperText: 'Picklist Helper Text',
+  testId: 'picklist-12345678',
+  hasSuggestions: false,
+  displayMode: '',
+  hideLabel: false,
+  readOnly: false,
+  required: false,
+  disabled: false,
+  status: '',
+  validatemessage: ''
+};
+
+export const stateProps = {
+  value: '.PicklistSample',
+  placeholder: 'Select...',
+  datasource: '.PicklistSample',
+  hasSuggestions: false
+};
+
+export const rawMetadata = {
+  type: 'Dropdown',
+  config: {
+    value: '@P .PicklistSample',
+    label: '@L Picklist Sample',
+    placeholder: '@L Select...',
+    listType: 'associated',
+    datasource: '@ASSOCIATED .PicklistSample',
+    helperText: '@L Picklist Helper Text',
+    testId: 'picklist-12345678'
+  }
+};
+
+export const fieldMetadata = {
+  classID: 'DIXL-MediaCo-Work-NewService',
+  type: 'Text',
+  displayAs: 'pxDropdown',
+  label: 'Picklist sample',
+  datasource: {
+    tableType: 'PromptList',
+    records: [
+      {
+        key: 'Option 1',
+        value: 'Option 1'
+      },
+      {
+        key: 'Option 2',
+        value: 'Option 2'
+      },
+      {
+        key: 'Option 3',
+        value: 'Option 3'
+      }
+    ]
+  }
+};

package/tests/assets/library/components/createAll/Launchpad/Pega_DXIL_MyText/demo.stories.tsx

@@ -0,0 +1,67 @@
+
+/* eslint-disable react/jsx-no-useless-fragment */
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { stateProps, configProps } from './mock';
+
+import PegaDxilMyText from './index';
+
+const meta: Meta<typeof PegaDxilMyText> = {
+  title: 'PegaDxilMyText',
+  component: PegaDxilMyText,
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyText>;
+
+export const BasePegaDxilMyText: Story = (args: any) => {
+
+  const [value, setValue] = useState(configProps.value);
+
+  const props = {
+    value,
+    hasSuggestions: configProps.hasSuggestions,
+
+    getPConnect: () => {
+      return {
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName: string, theValue: any) => {
+              setValue(theValue);
+            },
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <PegaDxilMyText {...props} {...args} />
+    </>
+  );
+};
+
+BasePegaDxilMyText.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/tests/assets/library/components/createAll/Launchpad/Pega_DXIL_MyText/mock.ts

@@ -0,0 +1,21 @@
+
+export const configProps = {
+  value: '',
+  label: 'Text Sample',
+  placeholder: 'Text Placeholder',
+  helperText: 'Text Helper Text',
+  testId: 'Text-12345678',
+  hasSuggestions: false,
+  displayMode: '',
+  hideLabel: false,
+  readOnly: false,
+  required: false,
+  disabled: false,
+  status: '',
+  validatemessage: ''
+};
+
+export const stateProps = {
+  value: '.TextSample',
+  hasSuggestions: false
+};

package/tests/assets/library/components/createAll/Launchpad/Pega_DXIL_MyTextInput/demo.stories.tsx

@@ -0,0 +1,63 @@
+
+/* eslint-disable react/jsx-no-useless-fragment */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import PegaDxilMyTextInput from './index';
+
+import { stateProps, fieldMetadata, configProps } from './mock';
+
+const meta: Meta<typeof PegaDxilMyTextInput> = {
+  title: 'PegaDxilMyTextInput',
+  component: PegaDxilMyTextInput,
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyTextInput>;
+
+export const BasePegaDxilMyTextInput: Story = (args: any) => {
+
+  const props = {
+    value: configProps.value,
+    hasSuggestions: configProps.hasSuggestions,
+    fieldMetadata,
+    getPConnect: () => {
+      return {
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <PegaDxilMyTextInput {...props} {...args} />
+    </>
+  );
+};
+
+BasePegaDxilMyTextInput.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/tests/assets/library/components/createAll/Launchpad/Pega_DXIL_MyTextInput/mock.ts

@@ -0,0 +1,30 @@
+
+export const configProps = {
+  value: '',
+  label: 'TextInput Sample',
+  placeholder: 'TextInput Placeholder',
+  helperText: 'TextInput Helper Text',
+  testId: 'TextInput-12345678',
+  hasSuggestions: false,
+  displayMode: '',
+  variant: '',
+  hideLabel: false,
+  readOnly: false,
+  required: false,
+  disabled: false,
+  status: '',
+  validatemessage: ''
+};
+
+export const stateProps = {
+  value: '.TextInputSample',
+  hasSuggestions: false
+};
+
+export const fieldMetadata = {
+  classID: 'DIXL-MediaCo-Work-NewService',
+  type: 'Text',
+  maxLength: 256,
+  displayAs: 'pxTextInput',
+  label: 'TextInput Sample'
+};

package/tests/assets/library/components/createAll/Launchpad/Pega_DXIL_MyTimeOfDay/demo.stories.tsx

@@ -0,0 +1,65 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+import type { Meta, StoryObj } from '@storybook/react';
+import { configProps, stateProps } from './mock';
+import PegaDxilMyTimeOfDay from './index';
+
+const meta: Meta<typeof PegaDxilMyTimeOfDay> = {
+  title: 'PegaDxilMyTimeOfDay',
+  component: PegaDxilMyTimeOfDay,
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyTimeOfDay>;
+
+export const BasePegaDxilMyTimeOfDay: Story = (args: any) => {
+  const props = {
+    value: configProps.value,
+    additionalProps: configProps.additionalProps,
+    hasSuggestions: configProps.hasSuggestions,
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        getValidationApi: () => {
+          return {
+            validate: () => {/* nothing */}
+          };
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getConfigProps: () => {
+          return configProps;
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        clearErrorMessages: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <PegaDxilMyTimeOfDay {...props} {...args} />
+    </>
+  );
+};
+
+BasePegaDxilMyTimeOfDay.args = {
+  label: configProps.label,
+  helperText: configProps.helperText,
+  withSeconds: configProps.withSeconds,
+  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/tests/assets/library/components/createAll/Launchpad/Pega_DXIL_MyTimeOfDay/mock.ts

@@ -0,0 +1,21 @@
+export const configProps = {
+  value: '13:30',
+  validatemessage: '',
+  label: 'TimeOfDay Label',
+  hideLabel: false,
+  helperText: 'TimeOfDay helper text',
+  withSeconds: false,
+  testId: '12345678',
+  additionalProps: {},
+  displayMode: '',
+  variant: '',
+  hasSuggestions: false,
+  readOnly: false,
+  required: false,
+  disabled: false,
+  status: ''
+};
+
+export const stateProps = {
+  value: '.TimeOfDayLabel'
+};

package/tests/assets/library/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/Avatar.tsx

@@ -0,0 +1,76 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import  React from 'react';
+import { useEffect, useState } from 'react';
+import { Avatar as CosmosAvatar, withConfiguration } from '@pega/cosmos-react-core';
+import type { PConnFieldProps } from './PConnProps';
+
+
+// interface for props
+interface PegaDxilMyTwoColumnDetailsAvatarProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  metaObj: any;
+  showStatus: boolean;
+
+}
+
+function Avatar(props: PegaDxilMyTwoColumnDetailsAvatarProps) {
+  const { metaObj, showStatus = false } = props;
+  const [imageBlobUrl, setImageBlobUrl] = useState(null);
+  let userName: string;
+  let userIdentifier: string;
+
+  // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
+  // This is non CaseView case (Dashboard, MyWork etc)
+  if (!metaObj) {
+    userName = PCore.getEnvironmentInfo().getOperatorName();
+    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
+  } else {
+    userName = metaObj.name;
+    userIdentifier = metaObj.ID;
+  }
+  if (!userName && userIdentifier) {
+    userName = userIdentifier;
+  }
+
+  useEffect(() => {
+    const imageKey = !metaObj ? PCore.getEnvironmentInfo().getOperatorImageInsKey() : metaObj.image;
+    if (imageKey) {
+      PCore.getAssetLoader()
+        .getSvcImage(imageKey)
+        .then((blob) => window.URL.createObjectURL(blob))
+        .then((imagePath) => setImageBlobUrl(imagePath as React.SetStateAction<any>));
+    }
+  }, [metaObj]);
+
+  if (showStatus) {
+    const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
+    const [userState, setUserState]: any  = useState(currentState === 'online' ? 'active' : 'inactive');
+
+    const handleUserStateChange = ({ state } : any) => {
+      setUserState(state === 'online' ? 'active' : 'inactive');
+    };
+
+    useEffect(() => {
+      const subId = PCore.getMessagingServiceManager()
+        .getUserPresence()
+        // @ts-ignore
+        .subscribe(userIdentifier, handleUserStateChange);
+
+      return function cleanup() {
+        PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
+      };
+    }, [userIdentifier, handleUserStateChange]);
+    return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} status={userState} />;
+  }
+
+  // Do not render when userName does not exists
+  // TODO : In CNR case, pxRequestor is not available, please remove this condition once it populates
+  if (!userName) {
+    return null;
+  }
+
+  return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} />;
+}
+
+
+export default withConfiguration(Avatar);

package/tests/assets/library/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/demo.stories.tsx

@@ -0,0 +1,221 @@
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Text, FieldValueList, Button, DateTimeDisplay, useTheme } from '@pega/cosmos-react-core';
+import PegaDxilMyTwoColumnDetails from './index';
+import { pyReviewRaw, pyReviewResolved, regionChildrenResolved, operatorDetails, configProps } from './mock';
+import StatusWorkRenderer from './StatusWork';
+import Operator from './Operator';
+import type C11nEnv from '@pega/pcore-pconnect-typedefs/interpreter/c11n-env';
+
+const meta: Meta<typeof PegaDxilMyTwoColumnDetails> = {
+  title: 'PegaDxilMyTwoColumnDetails',
+  component: PegaDxilMyTwoColumnDetails,
+  excludeStories: /.*Data$/,
+  parameters: {
+    type: 'Details'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyTwoColumnDetails>;
+
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+window.PCore.getLocaleUtils = () => {
+  return {
+    getLocaleValue: (value: any) => {
+      return value;
+    }
+  };
+};
+
+window.PCore.getUserApi = () => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
+};
+
+const Region = (props: any) => {
+  return <></>;
+};
+
+const renderField = (resolvedProps: any) => {
+  const {
+    displayAsStatus = false,
+    displayMode,
+    value = '',
+    label = '',
+    key,
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    theme = useTheme()
+  } = resolvedProps;
+
+  const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
+
+  let val =
+    value !== '' ? (
+      <Text variant='h1' as='span' key={key}>
+        {value}
+      </Text>
+    ) : (
+      ''
+    );
+
+  if (label === 'Create date/time')
+    val = (
+      <DateTimeDisplay
+        value={value}
+        variant='datetime'
+        format='long'
+        clockFormat={undefined}
+        key={key}
+      />
+    );
+
+  if (displayAsStatus === true) val = <StatusWorkRenderer value={value} key={key} />;
+
+  const [_label] =
+    label === 'Create operator'
+      ? [configProps.createLabel, configProps.createOperator, configProps.createDateTime]
+      : label === 'Update operator'
+        ? [configProps.updateLabel, configProps.updateOperator, configProps.updateDateTime]
+        : [configProps.resolveLabel, configProps.resolveOperator, configProps.resolveDateTime];
+
+  if (label === 'Create Operator')
+    val = (
+      <Operator
+        label={configProps.hideLabel ? '' : _label}
+        name={configProps.createOperator.userName}
+        id={configProps.createOperator.userId}
+        value={undefined}
+        validatemessage=''
+        hideLabel={false}
+        readOnly={false}
+        required={false}
+        disabled={false}
+        externalUser={undefined}
+        metaObj={undefined}
+        testId=''
+        helperText=''
+        getPConnect={function (): C11nEnv {
+          throw new Error('Function not implemented.');
+        } }      />
+    );
+
+  if (variant === 'inline') {
+    val = value || (
+      <span aria-hidden='true' key={key}>
+        &ndash;&ndash;
+      </span>
+    );
+  } else {
+    val = (
+      <Text variant='h1' as='span' key={key}>
+        {val}
+      </Text>
+    );
+  }
+  return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} key={key} />;
+};
+
+export const BasePegaDxilMyTwoColumnDetails: Story = (args: any) => {
+  const props = {
+    getPConnect: () => {
+      return {
+        getChildren: () => {
+          return pyReviewRaw.children;
+        },
+        getRawMetadata: () => {
+          return pyReviewRaw;
+        },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
+        getInheritedProps: () => {
+          return pyReviewRaw.config.inheritedProps;
+        },
+        createComponent: (config: any) => {
+          // eslint-disable-next-line default-case
+          switch (config.config.value) {
+            case '@P .pyStatusWork':
+              return renderField(pyReviewResolved.highlightedData[0].config);
+            case '@P .pyID':
+              return renderField(pyReviewResolved.highlightedData[1].config);
+            case '@P .pxCreateDateTime':
+              return renderField(pyReviewResolved.highlightedData[2].config);
+            case '@USER .pxCreateOperator':
+              return renderField(pyReviewResolved.highlightedData[3].config);
+            case '@P .pySLADeadline':
+              return renderField(regionChildrenResolved[0]);
+            case '@P .pySLAGoal':
+              return renderField(regionChildrenResolved[1]);
+            case '@P .pySLAStartTime':
+              return renderField(regionChildrenResolved[2]);
+          }
+        },
+        setInheritedProp: () => {
+          /* nothing */
+        },
+        resolveConfigProps: (config: any) => {
+          return config;
+        }
+      };
+    }
+  };
+
+
+  return (
+    <PegaDxilMyTwoColumnDetails {...props} {...args}>
+        <Region
+          {...{
+            getPConnect: () => ({
+              setInheritedProp: () => {},
+              getChildren: () =>
+                pyReviewRaw.children[0].children.map((child: any, index: number) => {
+                  return {
+                    getPConnect: () => ({
+                      getRawMetadata: () => pyReviewRaw.children[0].children[index],
+                      getConfigProps: () => {},
+                      resolveConfigProps: () => regionChildrenResolved[index],
+                      getComponent: () =>
+                        props.getPConnect().createComponent(pyReviewRaw.children[0].children[index])
+                    })
+                  };
+                })
+            })
+          }}
+        />
+        <Region
+          {...{
+            getPConnect: () => ({
+              setInheritedProp: () => {},
+              getChildren: () =>
+                pyReviewRaw.children[1].children.map((child: any, index: number) => {
+                  return {
+                    getPConnect: () => ({
+                      getRawMetadata: () => pyReviewRaw.children[1].children[index],
+                      getConfigProps: () => {},
+                      resolveConfigProps: () => regionChildrenResolved[index],
+                      getComponent: () =>
+                        props.getPConnect().createComponent(pyReviewRaw.children[1].children[index])
+                    })
+                  };
+                })
+            })
+          }}
+        />
+    </PegaDxilMyTwoColumnDetails>
+  );
+};
+
+BasePegaDxilMyTwoColumnDetails.args = {
+  showLabel: true,
+  label: 'Details Region template',
+  showHighlightedData: true
+};