@pega/custom-dx-components 26.1.10 → 26.1.11-alpha-0.2

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MySearchbox/config.json

@@ -1,143 +0,0 @@
-{
-  "name": "Pega_DXIL_MySearchbox",
-  "label": "My Search box",
-  "description": "My Search box",
-  "organization": "Pega",
-  "version": "0.0.1",
-  "library": "DXIL",
-  "componentKey": "Pega_DXIL_MySearchbox",
-  "type": "Field",
-  "subtype": "Picklist",
-  "subtypeLabel": "Search box",
-  "icon": "images/pz-dropdown-active.svg",
-  "properties": [
-    {
-      "name": "label",
-      "label": "Field label",
-      "format": "TEXT",
-      "required": true
-    },
-    {
-      "name": "labelOption",
-      "label": "Field label",
-      "format": "SELECT",
-      "defaultValue": "custom",
-      "visibility": "@PLATFORMNAME != 'launchpad'",
-      "source": [
-        {
-          "key": "default",
-          "value": "Default"
-        },
-        {
-          "key": "custom",
-          "value": "Custom"
-        }
-      ]
-    },
-    {
-      "name": "label",
-      "label": "Custom field label",
-      "format": "VALUEINPUT",
-      "required": true,
-      "ruleType": "Paragraph",
-      "visibility": "@PLATFORMNAME != 'launchpad'"
-    },
-    {
-      "name": "readOnly",
-      "label": "Edit mode",
-      "format": "READONLY"
-    },
-    {
-      "label": "Column settings",
-      "format": "GROUP",
-      "visibility": "@VIEWTYPE == 'MultiRecordDisplayAsTable'",
-      "properties": [
-        {
-          "name": "columnWidth",
-          "label": "Column width",
-          "format": "SELECT",
-          "source": [
-            {
-              "key": "auto",
-              "value": "Auto"
-            },
-            {
-              "key": "custom",
-              "value": "Custom"
-            }
-          ]
-        },
-        {
-          "name": "width",
-          "label": "Width (px)",
-          "format": "NUMBER",
-          "visibility": "$this.columnWidth == 'custom'"
-        }
-      ]
-    },
-    {
-      "label": "Input settings",
-      "format": "GROUP",
-      "visibility": "(!readOnly = true)",
-      "properties": [
-        {
-          "name": "placeholder",
-          "label": "Placeholder",
-          "format": "TEXT"
-        },
-        {
-          "name": "helperText",
-          "label": "Helper text",
-          "format": "TEXT"
-        }
-      ]
-    },
-    {
-      "label": "Conditions",
-      "format": "GROUP",
-      "properties": [
-        {
-          "name": "required",
-          "label": "Required",
-          "format": "REQUIRED",
-          "visibility": "(!readOnly = true)"
-        },
-        {
-          "name": "disabled",
-          "label": "Disabled",
-          "format": "DISABLED",
-          "visibility": "(!readOnly = true)"
-        },
-        {
-          "name": "visibility",
-          "label": "Visibility",
-          "format": "VISIBILITY"
-        }
-      ]
-    },
-    {
-      "label": "Advanced",
-      "format": "GROUP",
-      "collapsible": true,
-      "properties": [
-        {
-          "name": "testId",
-          "label": "Test ID",
-          "format": "TEXT",
-          "ignorePattern": "[^-_\\p{N}\\p{L}]",
-          "includeAnnotations": false
-        }
-      ]
-    }
-  ],
-  "defaultConfig": {
-    "label": "@L $this.label",
-    "placeholder": "@L Select...",
-    "listType": "associated",
-    "datasource": "@ASSOCIATED .$this.name",
-    "deferDatasource": true,
-    "detailFVLItem": true,
-    "isFormWidth" : false,
-    "isContainerWidth" : false
-  }
-}

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MySearchbox/create-nonce.ts

@@ -1,5 +0,0 @@
-// @ts-ignore
-if (window?.__webpack_nonce__) {
-  // @ts-ignore
-  __webpack_nonce__ = window.__webpack_nonce__;
-}

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MySearchbox/date.ts

@@ -1,163 +0,0 @@
-// @ts-nocheck
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime.js';
-import localizedFormat from 'dayjs/plugin/localizedFormat.js';
-import utc from 'dayjs/plugin/utc.js';
-import tzone from 'dayjs/plugin/timezone.js';
-import { formatDateTime, parseToDate } from '@pega/cosmos-react-core';
-
-import formatConstants from './format-constants';
-
-dayjs.extend(relativeTime);
-dayjs.extend(localizedFormat);
-dayjs.extend(utc);
-dayjs.extend(tzone);
-
-export const COSMOS_FORMAT_CONSTANTS = {
-  SHORT: 'short',
-  LONG: 'long'
-};
-
-export const COSMOS_VARIANT_CONSTANTS = {
-  DATE_TIME: 'datetime',
-  DATE: 'date',
-  RELATIVE: 'relative',
-  TIME: 'time'
-};
-
-export const DATE_TYPES = {
-  DATE: 'date',
-  DATE_TIME: 'datetime',
-  TIME: 'time'
-};
-
-const constellationToCosmosFormatterMap = new Map([
-  [
-    DATE_TYPES.DATE,
-    new Map([
-      [
-        formatConstants.DateTimeLong,
-        { format: COSMOS_FORMAT_CONSTANTS.LONG, variant: COSMOS_VARIANT_CONSTANTS.DATE_TIME }
-      ],
-      [
-        formatConstants.DateTimeShort,
-        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.DATE }
-      ],
-      [
-        formatConstants.DateTimeSince,
-        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.RELATIVE }
-      ],
-      [formatConstants.DateDefault, { format: COSMOS_FORMAT_CONSTANTS.LONG, variant: COSMOS_VARIANT_CONSTANTS.DATE }]
-    ])
-  ],
-  [
-    DATE_TYPES.TIME,
-    new Map([
-      [formatConstants.TimeDefault, { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.TIME }],
-      [formatConstants.TimeOnly, { format: COSMOS_FORMAT_CONSTANTS.LONG, variant: COSMOS_VARIANT_CONSTANTS.TIME }]
-    ])
-  ],
-  [
-    DATE_TYPES.DATE_TIME,
-    new Map([
-      [
-        formatConstants.DateTimeDefault,
-        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.DATE_TIME }
-      ],
-      [
-        formatConstants.DateTimeShort,
-        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.DATE }
-      ],
-      [
-        formatConstants.DateTimeSince,
-        { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.RELATIVE }
-      ],
-      [
-        formatConstants.DateTimeLong,
-        { format: COSMOS_FORMAT_CONSTANTS.LONG, variant: COSMOS_VARIANT_CONSTANTS.DATE_TIME }
-      ],
-      [formatConstants.TimeOnly, { format: COSMOS_FORMAT_CONSTANTS.SHORT, variant: COSMOS_VARIANT_CONSTANTS.TIME }]
-    ])
-  ]
-]);
-const types = ['fromNow', 'customFormat'];
-
-// value should be in ISO 8601 format.
-function DateFormatter(
-  value,
-  // eslint-disable-next-line no-shadow, @typescript-eslint/no-shadow
-  { type = types[1], format = 'DD/MM/YYYY', timezone, fieldType } = {}) {
-  if (!value) return value;
-  switch (type) {
-    case types[1]:
-      if (timezone && !(fieldType === 'Date' || fieldType === 'Date only'))
-        return dayjs(value).tz(timezone).format(format); // Date only value should be formatted without timezone
-      return dayjs(value).format(format);
-    case types[0]:
-      return dayjs(value).from(dayjs());
-    default:
-      return value;
-  }
-}
-// value should be in hh:mm:ss format (00:00:00 - 23:59:59).
-// function TimeFormatter(value, options) {
-//   if (!value) return value;
-//   const { locale = 'en-US' } = options;
-//   const timeOnlyRegex = /^(?:[01]\d|2[0123]):(?:[012345]\d):(?:[012345]\d)$/;
-//   if (value.length === 8 && timeOnlyRegex.test(value)) {
-//     const { timeOptions = {} } = options;
-//     const tempDate = new Date();
-//     const hours = parseInt(value.substr(0, 2), 10);
-//     const minutes = parseInt(value.substr(3, 2), 10);
-//     const seconds = parseInt(value.substr(6, 2), 10);
-//     tempDate.setHours(hours);
-//     tempDate.setMinutes(minutes);
-//     tempDate.setSeconds(seconds);
-//     return tempDate.toLocaleTimeString(locale, timeOptions);
-//   }
-//   return DateFormatter(value, options);
-// }
-
-// function DateTimeShortFormatter(value, options) {
-//   return DateFormatter(value, {
-//     ...options,
-//     type: 'customFormat',
-//     format: 'MMM DD, YYYY'
-//   });
-// }
-
-export function format(value, options) {
-  if (!value) return null;
-  const { type, locale, timezone, formatter, translate } = options;
-  // eslint-disable-next-line no-shadow, @typescript-eslint/no-shadow
-  const { format, variant } = constellationToCosmosFormatterMap.get(type).get(formatter);
-  return formatDateTime(parseToDate(value), {
-    t: translate,
-    locale,
-    format,
-    variant,
-    timeZone: type === DATE_TYPES.DATE_TIME ? timezone : 'UTC'
-  });
-}
-
-export default {
-  'DateTime-Long': (value, options) => format(value, { ...options, formatter: 'DateTime-Long' }),
-  'DateTime-Short': (value, options) => format(value, { ...options, formatter: 'DateTime-Short' }),
-  'DateTime-Since': (value, options) => format(value, { ...options, formatter: 'DateTime-Since' }),
-  'Time-Only': (value, options) => format(value, { ...options, formatter: 'Time-Only' }),
-  convertToTimezone: (value, options) => {
-    return value && options && options.timezone
-      ? DateFormatter(value, {
-          ...options,
-          type: 'customFormat',
-          format: 'YYYY-MM-DDTHH:mm:ss'
-        })
-      : value;
-  },
-  convertFromTimezone: (value, timezone) =>
-    value && timezone ? dayjs.tz(value, timezone).utc().format('YYYY-MM-DDTHH:mm:ss[Z]') : value,
-  Date: (value, options) => DateFormatter(value, { type: 'customFormat', ...options }),
-  'Date-Default': (value, options) => format(value, { ...options, formatter: 'Date-Default' }),
-  'Date-Time-Default': (value, options) => format(value, { ...options, formatter: 'Date-Time-Default' }),
-  'Time-Default': (value, options) => format(value, { ...options, formatter: 'Time-Default' })
-};

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MySearchbox/demo.stories.tsx

@@ -1,107 +0,0 @@
-/* eslint-disable react/jsx-no-useless-fragment */
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { configProps, rawMetadata, fieldMetadata, stateProps } from './mock';
-
-import PegaDxilMySearchbox from './index';
-
-const meta: Meta<typeof PegaDxilMySearchbox> = {
-  title: 'PegaDxilMySearchbox',
-  component: PegaDxilMySearchbox,
-  excludeStories: /.*Data$/
-};
-
-export default meta;
-type Story = StoryObj<typeof PegaDxilMySearchbox>;
-
-export const BasePegaDxilMySearchbox: Story = (args: any) => {
-
-  const [value, setValue] = useState(configProps.value);
-  const datasourceMetadata = fieldMetadata;
-
-  const props = {
-    value,
-    hasSuggestions: configProps.hasSuggestions,
-    columns: [],
-    listType: 'associated',
-    datasourceMetadata,
-    fieldMetadata,
-    getPConnect: () => {
-      return {
-        getConfigProps: () => {
-          return configProps;
-        },
-        getStateProps: () => {
-          return stateProps;
-        },
-        getContextName: () => {
-          return 'app/primary_1';
-        },
-        getLocalizationService:() => {
-          return {
-            getLocalizedText: (value: any) => {
-              return value;
-            }
-          }
-        },
-        getLocalizedValue: (val: any) => {
-          return val;
-        },
-        getLocaleRuleNameFromKeys: (localeClass: string, localeContext: string, localeName: string) => {
-          return `${localeClass}!${localeContext}!${localeName}`;
-        },
-        getCaseInfo: () => {
-          return {
-            getClassName: () => {
-              return 'DIXL-MediaCo-Work-NewService';
-            }
-          };
-        },
-        getRawMetadata: () => {
-          return rawMetadata;
-        },
-        getActionsApi: () => {
-          return {
-            updateFieldValue: (propName: string, theValue: any) => {
-              setValue(theValue);
-            },
-            triggerFieldChange: () => {/* nothing */}
-          };
-        },
-        getValidationApi: () => {
-          return {
-            validate: () => {/* nothing */}
-          };
-        },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
-      };
-    }
-  };
-
-  return (
-    <>
-      <PegaDxilMySearchbox {...props} {...args} />
-    </>
-  );
-};
-
-BasePegaDxilMySearchbox.args = {
-  datasource: configProps.datasource,
-  label: configProps.label,
-  helperText: configProps.helperText,
-  placeholder: configProps.placeholder,
-  parameters: {},
-  isTableFormatter: false,
-  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/original/components/createAll/Constellation/Pega_DXIL_MySearchbox/demo.test.tsx

@@ -1,33 +0,0 @@
-// import { expect, test } from '@jest/globals';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { composeStories } from '@storybook/react';
-import '@testing-library/jest-dom';
-
-import * as DemoStories from './demo.stories';
-
-const { BasePegaDxilMySearchbox } = composeStories(DemoStories);
-
-test('renders PegaDxilMySearchbox', async () => {
-  render(<BasePegaDxilMySearchbox />);
-  expect(await screen.findByText('Picklist Sample')).toBeVisible();
-  expect(await screen.findByText('Picklist Helper Text')).toBeVisible();
-
-  const searchboxElement = screen.getByTestId(
-    'picklist-12345678:combo-box:control'
-  ) as HTMLInputElement;
-  // expect(searchboxElement).toHaveAttribute('role', 'searchbox');
-  expect(searchboxElement).toHaveAttribute('role', 'combobox');
-  expect(searchboxElement).toHaveAttribute('autocomplete', 'off');
-  expect(searchboxElement).toHaveAttribute('placeholder', 'Select...');
-  expect(searchboxElement.value).toContain('');
-
-  fireEvent.click(searchboxElement);
-
-  // because need to wait after button pressed before finding the data picker pop up, need to do this
-  // via "await" and "findByTestId" (as opposed to getByTestId)
-  const dataPickerPopUp = await screen.findByTestId(':menu:');
-  expect(dataPickerPopUp).not.toBeNull();
-
-
-
-});