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

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyCaseview/index.tsx

@@ -1,101 +0,0 @@
-import { withConfiguration } from '@pega/cosmos-react-core';
-import type { CaseViewProps } from '@pega/cosmos-react-work';
-
-import StyledPegaDxilMyCaseviewWrapper from './styles';
-
-// Presentation-only component: props contract defined by CaseViewProps.
-// No PCore / PConnect dependencies — all data is provided through props.
-function PegaDxilMyCaseview(props: CaseViewProps) {
-  const {
-    caseId,
-    heading,
-    subheading,
-    caseType,
-    summaryFields,
-    tabs,
-    tabContent,
-    stages,
-    tasks,
-    banners,
-    utilities,
-    summaryExpanded,
-    onToggleSummary,
-    utilitiesExpanded,
-    onToggleUtilities
-  } = props;
-
-  const activeTab = tabContent?.find(t => t.id === tabs.currentTabId);
-
-  return (
-    <StyledPegaDxilMyCaseviewWrapper>
-      <header>
-        <span>{caseType}</span>
-        <h1>{typeof heading === 'string' ? heading : heading?.text}</h1>
-        {subheading && (
-          <p>
-            {(() => {
-              if (typeof subheading === 'string') return subheading;
-              if (Array.isArray(subheading)) return subheading.join(' ');
-              return subheading?.text;
-            })()}
-          </p>
-        )}
-        <span>{caseId}</span>
-      </header>
-
-      {banners && <section aria-label='Banners'>{banners}</section>}
-
-      <section aria-label='Summary' aria-expanded={summaryExpanded}>
-        <button type='button' onClick={onToggleSummary}>{summaryExpanded ? 'Collapse' : 'Expand'} summary</button>
-        {summaryExpanded && (
-          <>
-            <dl>
-              {summaryFields.primary?.map(f => (
-                <div key={String(f.name)}>
-                  <dt>{f.name}</dt>
-                  <dd>{f.value}</dd>
-                </div>
-              ))}
-            </dl>
-            {summaryFields.secondary && summaryFields.secondary.length > 0 && (
-              <dl>
-                {summaryFields.secondary.map(f => (
-                  <div key={String(f.name)}>
-                    <dt>{f.name}</dt>
-                    <dd>{f.value}</dd>
-                  </div>
-                ))}
-              </dl>
-            )}
-          </>
-        )}
-      </section>
-
-      {stages && <section aria-label='Stages'>{stages}</section>}
-
-      <nav aria-label='Tabs'>
-        {tabs.items.map(tab => (
-          <button
-            type='button'
-            key={tab.id}
-            onClick={e => tabs.onClick(tab.id, e)}
-            aria-selected={tab.id === tabs.currentTabId}
-          >
-            {tab.name}
-          </button>
-        ))}
-      </nav>
-
-      {activeTab && <section aria-label='Tab content'>{activeTab.content}</section>}
-
-      {tasks && <section aria-label='Tasks'>{tasks}</section>}
-
-      <section aria-label='Utilities' aria-expanded={utilitiesExpanded}>
-        <button type='button' onClick={onToggleUtilities}>{utilitiesExpanded ? 'Collapse' : 'Expand'} utilities</button>
-        {utilitiesExpanded && utilities}
-      </section>
-    </StyledPegaDxilMyCaseviewWrapper>
-  );
-}
-
-export default withConfiguration(PegaDxilMyCaseview);

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyCaseview/localizations.json

@@ -1,15 +0,0 @@
-{
-  "fields": {
-    "Status": "Status",
-    "Urgency": "Urgency",
-    "Created": "Created",
-    "Owner": "Owner",
-    "Details": "Details",
-    "History": "History",
-    "Summary": "Summary",
-    "Collapse summary": "Collapse summary",
-    "Expand summary": "Expand summary",
-    "Collapse utilities": "Collapse utilities",
-    "Expand utilities": "Expand utilities"
-  }
-}

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyCaseview/mock.ts

@@ -1,33 +0,0 @@
-// Mock props satisfying CaseViewProps from @pega/cosmos-react-work
-const configProps = {
-  caseId: 'C-1001',
-  heading: 'My Caseview',
-  subheading: 'Subheading for My Caseview',
-  caseType: 'My Case Type',
-  summaryFields: {
-    primary: [
-      { name: 'Status', value: 'Open' },
-      { name: 'Urgency', value: '10' }
-    ],
-    secondary: [
-      { name: 'Created', value: '2024-01-01' },
-      { name: 'Owner', value: 'John Doe' }
-    ]
-  },
-  tabs: {
-    items: [
-      { id: 'tab-details', name: 'Details' },
-      { id: 'tab-history', name: 'History' }
-    ],
-    onClick: () => {},
-    currentTabId: 'tab-details'
-  },
-  tabContent: [
-    { id: 'tab-details', content: 'Details content goes here' },
-    { id: 'tab-history', content: 'History content goes here' }
-  ],
-  summaryExpanded: true,
-  utilitiesExpanded: false
-};
-
-export default configProps;

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyCaseview/styles.ts

@@ -1,27 +0,0 @@
-import styled, { css } from 'styled-components';
-import { defaultThemeProp } from '@pega/cosmos-react-core';
-
-// Commonly used theme tokens — explore more under theme.base.* or theme.components.*
-// const spacing        = theme.base.spacing;
-// const borderRadius   = theme.base['border-radius'];
-// const brand          = theme.base.palette['brand-primary'];
-// const brandBg        = theme.base.palette['brand-background'];
-// const appBackground  = theme.base.palette['app-background'];
-// const panelBg        = theme.base.palette['primary-background'];
-// const secondaryBg    = theme.base.palette['secondary-background'];
-// const interactive    = theme.base.palette.interactive;
-// const border         = theme.base.palette['border-line'];
-// const urgent         = theme.base.palette.urgent;
-// const success        = theme.base.palette.success;
-
-const StyledPegaDxilMyCaseviewWrapper = styled.div(({ theme }) => {
-  const foregroundColor = theme.base.palette['foreground-color'];
-
-  return css`
-    color: ${foregroundColor};
-  `;
-});
-
-StyledPegaDxilMyCaseviewWrapper.defaultProps = defaultThemeProp;
-
-export default StyledPegaDxilMyCaseviewWrapper;

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyCurrency/config.json

@@ -1,319 +0,0 @@
-{
-  "name": "Pega_DXIL_MyCurrency",
-  "label": "My Currency",
-  "description": "My Currency",
-  "organization": "Pega",
-  "version": "0.0.1",
-  "library": "DXIL",
-  "componentKey": "Pega_DXIL_MyCurrency",
-  "type": "Field",
-  "subtype": "Decimal-Currency",
-  "subtypeLabel": "Currency",
-  "icon": "images/pz-currency-active.svg",
-  "properties": [
-    {
-      "name": "label",
-      "label": "Label value",
-      "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"
-    },
-    {
-      "format": "CASCADE",
-      "source": {
-        "format": "SELECT",
-        "label": "ISO Code Selection",
-        "name": "isoCodeSelection",
-        "defaultValue": "constant",
-        "source": [
-          {
-            "key": "constant",
-            "value": "Constant"
-          },
-          {
-            "key": "propertyRef",
-            "value": "Property Reference"
-          }
-        ]
-      },
-      "cascadeElements": [
-        {
-          "key": "currencyISOCode",
-          "format": "TEXT",
-          "name": "currencyISOCode",
-          "label": "Currency ISO Code",
-          "defaultValue": "USD",
-          "match": "constant"
-        },
-        {
-          "key": "currencyISOCode",
-          "format": "PROPERTY",
-          "name": "currencyISOCode",
-          "label": "Currency ISO Code",
-          "match": "propertyRef"
-        }
-      ]
-    },
-    {
-      "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": "allowDecimals",
-          "label": "Allow Decimals",
-          "format": "BOOLEAN",
-          "defaultValue": true
-        },
-        {
-          "name": "alwaysShowISOCode",
-          "label": "Show ISO Code",
-          "format": "BOOLEAN",
-          "defaultValue": false
-        },
-        {
-          "name": "placeholder",
-          "label": "Placeholder",
-          "format": "TEXT"
-        },
-        {
-          "name": "helperText",
-          "label": "Helper text",
-          "format": "TEXT"
-        }
-      ]
-    },
-    {
-      "label": "Read-only settings",
-      "format": "GROUP",
-      "properties": [
-        {
-          "format": "SELECT",
-          "name": "formatter",
-          "label": "Format",
-          "defaultValue": "defaultCurrency",
-          "source": [
-            {
-              "key": "defaultCurrency",
-              "value": "Default"
-            },
-            {
-              "key": "Integer",
-              "value": "Integer"
-            },
-            {
-              "key": "Decimal",
-              "value": "Decimal"
-            },
-            {
-              "key": "Percentage",
-              "value": "Percentage"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "format": "SELECT",
-      "name": "currencyDisplay",
-      "label": "Currency display",
-      "visibility": "(!formatter = Integer)&&(!formatter = Decimal)&&(!formatter = Percentage)",
-      "defaultValue": "symbol",
-      "source": [
-        {
-          "key": "symbol",
-          "value": "Auto"
-        },
-        {
-          "key": "code",
-          "value": "Code"
-        },
-        {
-          "key": "name",
-          "value": "Name"
-        }
-      ]
-    },
-    {
-      "format": "SELECT",
-      "name": "negative",
-      "label": "Negative number display",
-      "defaultValue": "minus-sign",
-      "visibility": "(!formatter = Integer)&&(!formatter = Decimal)&&(!formatter = Percentage)",
-      "source": [
-        {
-          "key": "minus-sign",
-          "value": "Standard"
-        },
-        {
-          "key": "parentheses",
-          "value": "Accounting"
-        }
-      ]
-    },
-    {
-      "format": "SELECT",
-      "name": "notation",
-      "label": "Notation",
-      "visibility": "(!negative = parentheses)&&(!formatter = Percentage)",
-      "defaultValue": "standard",
-      "source": [
-        {
-          "key": "standard",
-          "value": "Standard"
-        },
-        {
-          "key": "compact",
-          "value": "Compact"
-        }
-      ]
-    },
-    {
-      "format": "NUMBER",
-      "name": "decimalPrecision",
-      "label": "Decimal places",
-      "visibility": "(formatter = Decimal)||(formatter = Percentage)",
-      "min": 0,
-      "max": 20
-    },
-    {
-      "format": "SELECT",
-      "name": "currencyDecimalPrecision",
-      "label": "Decimal places shown",
-      "visibility": "(!formatter = Integer)&&(!formatter = Decimal)&&(!formatter = Percentage)",
-      "defaultValue": "auto",
-      "source": [
-        {
-          "key": "auto",
-          "value": "Auto"
-        },
-        {
-          "key": "0",
-          "value": "None"
-        },
-        {
-          "key": "1",
-          "value": "1"
-        },
-        {
-          "key": "2",
-          "value": "2"
-        },
-        {
-          "key": "3",
-          "value": "3"
-        },
-        {
-          "key": "4",
-          "value": "4"
-        }
-      ]
-    },
-    {
-      "name": "showGroupSeparators",
-      "label": "Show thousands separator",
-      "format": "BOOLEAN",
-      "visibility": "(formatter = Decimal)||(formatter = Integer)"
-    },
-    {
-      "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",
-    "detailFVLItem": true,
-    "isFormWidth" : false,
-    "isContainerWidth" : false
-  }
-}

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyCurrency/demo.stories.tsx

@@ -1,68 +0,0 @@
-
-/* eslint-disable react/jsx-no-useless-fragment */
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { configProps, fieldMetadata, stateProps } from './mock';
-
-import PegaDxilMyCurrency from './index';
-
-const meta: Meta<typeof PegaDxilMyCurrency> = {
-  title: 'PegaDxilMyCurrency',
-  component: PegaDxilMyCurrency,
-  excludeStories: /.*Data$/
-};
-
-export default meta;
-type Story = StoryObj<typeof PegaDxilMyCurrency>;
-
-export const BasePegaDxilMyCurrency: Story = (args: any) => {
-
-  const props = {
-    value: Number(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 */},
-        clearErrorMessages: () => {/* nothing */}
-      };
-    }
-  };
-
-  return (
-    <>
-      <PegaDxilMyCurrency {...props} {...args} />
-    </>
-  );
-};
-
-BasePegaDxilMyCurrency.args = {
-  label: configProps.label,
-  placeholder: configProps.placeholder,
-  helperText: configProps.helperText,
-  showGroupSeparators: configProps.showGroupSeparators,
-  allowDecimals: configProps.allowDecimals,
-  currencyISOCode: configProps.currencyISOCode,
-  alwaysShowISOCode: configProps.alwaysShowISOCode,
-  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/Constellation/Pega_DXIL_MyCurrency/demo.test.tsx

@@ -1,23 +0,0 @@
-// import { expect, test } from '@jest/globals';
-import { render, screen } from '@testing-library/react';
-import { composeStories } from '@storybook/react';
-import '@testing-library/jest-dom';
-
-import * as DemoStories from './demo.stories';
-
-const { BasePegaDxilMyCurrency } = composeStories(DemoStories);
-
-test('renders PegaDxilMyCurrency', async () => {
-  render(<BasePegaDxilMyCurrency />);
-  expect(await screen.findByText('Currency Sample')).toBeVisible();
-  expect(await screen.findByText('Currency Helper Text')).toBeVisible();
-
-  const currencyElement = screen.getByRole('textbox');
-  // for some odd reason, checking the full string of "USD 0.00" doesn't pass
-  // expect(currencyElement).toHaveValue('USD 0.00');
-  const myTextAreaVal = (screen.getByRole('textbox') as HTMLInputElement).value;
-  expect(myTextAreaVal).toContain('USD');
-  expect(myTextAreaVal).toContain('0.00');
-
-  expect(currencyElement).toHaveAttribute('placeholder', 'Currency Placeholder');
-});

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyCurrency/event-utils.ts

@@ -1,18 +0,0 @@
-const handleEvent = (actions: any, eventType: string, propName: string, value: string | number) => {
-  switch (eventType) {
-    case 'change':
-      actions.updateFieldValue(propName, value);
-      break;
-    case 'blur':
-      actions.triggerFieldChange(propName, value);
-      break;
-    case 'changeNblur':
-      actions.updateFieldValue(propName, value);
-      actions.triggerFieldChange(propName, value);
-      break;
-    default:
-      break;
-  }
-};
-
-export default handleEvent;