@pega/custom-dx-components 26.1.10-alpha-0.4 → 26.1.10-alpha-0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "26.1.10-alpha-0.4",
+  "version": "26.1.10-alpha-0.6",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "keywords": [

package/src/tasks/create/templates/Constellation/Presentation/CASEVIEW/index.tsx.mustache

@@ -30,8 +30,16 @@ function {{COMPONENT_CLASS_NAME}}(props: CaseViewProps) {
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <header>
         <span>{caseType}</span>
-        <h1>{heading}</h1>
-        {subheading && <p>{subheading}</p>}
+        <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>
 

package/src/tasks/init/template/package.json.mustache

@@ -83,10 +83,10 @@
     "pega"
   ],
   "dependencies": {
-    "@pega/cosmos-react-condition-builder": "^9.0.0-build.6.5",
-    "@pega/cosmos-react-core": "^9.0.0-build.6.5",
-    "@pega/cosmos-react-work": "^9.0.0-build.6.5",
-    "@pega/cosmos-react-wss": "^9.0.0-build.6.5",
+    "@pega/cosmos-react-condition-builder": "~9.5.5-8",
+    "@pega/cosmos-react-core": "~9.5.5-8",
+    "@pega/cosmos-react-work": "~9.5.5-8",
+    "@pega/cosmos-react-wss": "~9.5.5-8",
     "@pega/eslint-config": "^0.16.3",
     "@pega/tsconfig": "^0.16.3",
     "babel-loader": "^10.0.0",

package/tests/assets/library/components/create/shared/PConnProps.d.ts

@@ -1,4 +1,4 @@
-import  {PConnect } from '@pega/pcore-pconnect-typedefs';
+import { PConnect } from '@pega/pcore-pconnect-typedefs';
 
 // PConnProps.d.ts
 // This gives us a place to have each component (which is most DX Components) that is
@@ -22,25 +22,24 @@ export interface PConnProps {
   // [key: string]: any;
 }
 
-
 // PConnFieldProps extends PConnProps to bring in the common properties that are
 // associated with most field components (ex: Dropdown, TextInput, etc.) in the
 //  components/field directory
 export interface PConnFieldProps extends PConnProps {
-  label: string,
-  required: boolean,
-  disabled: boolean,
-  value: any,
-  validatemessage: string,
-  status?: string,
-  onChange?: any,
-  onBlur?: any,
-  readOnly: boolean,
-  testId: string,
-  helperText: string,
-  displayMode?: string,
-  hideLabel: boolean,
-  placeholder?: string,
-  fieldMetadata?: any,
-  additionalProps?: any
+  label: string;
+  required: boolean;
+  disabled: boolean;
+  value: any;
+  validatemessage: string;
+  status?: string;
+  onChange?: any;
+  onBlur?: any;
+  readOnly: boolean;
+  testId: string;
+  helperText: string;
+  displayMode?: string;
+  hideLabel: boolean;
+  placeholder?: string;
+  fieldMetadata?: any;
+  additionalProps?: any;
 }

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

@@ -0,0 +1,15 @@
+{
+  "name": "Pega_DXIL_MyCaseview",
+  "label": "My Caseview",
+  "description": "My Caseview",
+  "organization": "Pega",
+  "version": "0.0.1",
+  "library": "DXIL",
+  "componentKey": "Pega_DXIL_MyCaseview",
+  "type": "Presentation",
+  "subtype": "CASEVIEW",
+  "subtypeLabel": "CASEVIEW",
+  "icon": "OneColumnPage.svg",
+  "properties": [],
+  "defaultConfig": {}
+}

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

@@ -0,0 +1,37 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import PegaDxilMyCaseview from './index';
+import configProps from './mock';
+
+const meta: Meta<typeof PegaDxilMyCaseview> = {
+  title: 'PegaDxilMyCaseview',
+  component: PegaDxilMyCaseview,
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyCaseview>;
+
+export const BasePegaDxilMyCaseview: Story = (args: any) => {
+  const props = {
+    ...configProps
+  };
+
+  return (
+    <>
+      <PegaDxilMyCaseview {...props} {...args} />
+    </>
+  );
+};
+
+BasePegaDxilMyCaseview.args = {
+  caseId: configProps.caseId,
+  heading: configProps.heading,
+  subheading: configProps.subheading,
+  caseType: configProps.caseType,
+  summaryFields: configProps.summaryFields,
+  tabs: configProps.tabs,
+  summaryExpanded: configProps.summaryExpanded,
+  utilitiesExpanded: configProps.utilitiesExpanded
+};

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyCaseview/demo.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import '@testing-library/jest-dom';
+
+import * as DemoStories from './demo.stories';
+
+const { BasePegaDxilMyCaseview } = composeStories(DemoStories);
+
+test('renders PegaDxilMyCaseview', async () => {
+  render(<BasePegaDxilMyCaseview />);
+  expect(await screen.findByText('My Caseview')).toBeVisible();
+  expect(await screen.findByText('C-1001')).toBeInTheDocument();
+  expect(await screen.findByText('Subheading for My Caseview')).toBeInTheDocument();
+  expect(await screen.findByText('My Case Type')).toBeInTheDocument();
+  expect(await screen.findByText('Status')).toBeVisible();
+  expect(await screen.findByText('Open')).toBeVisible();
+  expect(await screen.findByText('Details')).toBeVisible();
+  expect(await screen.findByText('History')).toBeVisible();
+});

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

@@ -0,0 +1,101 @@
+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

@@ -0,0 +1,15 @@
+{
+  "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

@@ -0,0 +1,33 @@
+// 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

@@ -0,0 +1,27 @@
+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_MyWsscaseview/config.json

@@ -0,0 +1,15 @@
+{
+  "name": "Pega_DXIL_MyWsscaseview",
+  "label": "My Wsscaseview",
+  "description": "My Wsscaseview",
+  "organization": "Pega",
+  "version": "0.0.1",
+  "library": "DXIL",
+  "componentKey": "Pega_DXIL_MyWsscaseview",
+  "type": "Presentation",
+  "subtype": "WSSCASEVIEW",
+  "subtypeLabel": "WSSCASEVIEW",
+  "icon": "OneColumnPage.svg",
+  "properties": [],
+  "defaultConfig": {}
+}

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

@@ -0,0 +1,36 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import PegaDxilMyWsscaseview from './index';
+import configProps from './mock';
+
+const meta: Meta<typeof PegaDxilMyWsscaseview> = {
+  title: 'PegaDxilMyWsscaseview',
+  component: PegaDxilMyWsscaseview,
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyWsscaseview>;
+
+export const BasePegaDxilMyWsscaseview: Story = (args: any) => {
+  const props = {
+    ...configProps
+  };
+
+  return (
+    <>
+      <PegaDxilMyWsscaseview {...props} {...args} />
+    </>
+  );
+};
+
+BasePegaDxilMyWsscaseview.args = {
+  caseId: configProps.caseId,
+  heading: configProps.heading,
+  summary: configProps.summary,
+  stages: configProps.stages,
+  tasks: configProps.tasks,
+  feed: configProps.feed,
+  utility: configProps.utility
+};

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyWsscaseview/demo.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import '@testing-library/jest-dom';
+
+import * as DemoStories from './demo.stories';
+
+const { BasePegaDxilMyWsscaseview } = composeStories(DemoStories);
+
+test('renders PegaDxilMyWsscaseview', async () => {
+  render(<BasePegaDxilMyWsscaseview />);
+  expect(await screen.findByText('My Wsscaseview')).toBeVisible();
+  expect(await screen.findByText('C-1001')).toBeInTheDocument();
+  expect(await screen.findByText('Summary')).toBeVisible();
+  expect(await screen.findByText('Stages')).toBeVisible();
+  expect(await screen.findByText('Tasks')).toBeVisible();
+  expect(await screen.findByText('Feed')).toBeVisible();
+  expect(await screen.findByText('Utilities')).toBeVisible();
+});

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

@@ -0,0 +1,64 @@
+import { withConfiguration } from '@pega/cosmos-react-core';
+import type { CaseViewProps as WSSCaseViewProps } from '@pega/cosmos-react-wss';
+
+import StyledPegaDxilMyWsscaseviewWrapper from './styles';
+
+// Presentation-only component: props contract defined by WSSCaseViewProps.
+// No PCore / PConnect dependencies — all data is provided through props.
+function PegaDxilMyWsscaseview(props: WSSCaseViewProps) {
+  const {
+    caseId,
+    heading,
+    summary,
+    stages,
+    tasks,
+    feed,
+    utility
+  } = props;
+
+  return (
+    <StyledPegaDxilMyWsscaseviewWrapper>
+      <header>
+        <h1>{heading}</h1>
+        <span>{caseId}</span>
+      </header>
+
+      {summary && (
+        <section aria-label={summary.label}>
+          <h2>{summary.label}</h2>
+          {summary.content}
+        </section>
+      )}
+
+      {stages && (
+        <section aria-label={stages.label}>
+          <h2>{stages.label}</h2>
+          {stages.content}
+        </section>
+      )}
+
+      {tasks && (
+        <section aria-label={tasks.label}>
+          <h2>{tasks.label}</h2>
+          {tasks.content}
+        </section>
+      )}
+
+      {feed && (
+        <section aria-label={feed.label}>
+          <h2>{feed.label}</h2>
+          {feed.content}
+        </section>
+      )}
+
+      {utility && (
+        <section aria-label={utility.label}>
+          <h2>{utility.label}</h2>
+          {utility.content}
+        </section>
+      )}
+    </StyledPegaDxilMyWsscaseviewWrapper>
+  );
+}
+
+export default withConfiguration(PegaDxilMyWsscaseview);

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

@@ -0,0 +1,9 @@
+{
+  "fields": {
+    "Summary": "Summary",
+    "Stages": "Stages",
+    "Tasks": "Tasks",
+    "Feed": "Feed",
+    "Utilities": "Utilities"
+  }
+}

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

@@ -0,0 +1,27 @@
+// Mock props satisfying CaseViewProps from @pega/cosmos-react-wss
+const configProps = {
+  caseId: 'C-1001',
+  heading: 'My Wsscaseview',
+  summary: {
+    label: 'Summary',
+    content: 'Summary content goes here'
+  },
+  stages: {
+    label: 'Stages',
+    content: 'Stages content goes here'
+  },
+  tasks: {
+    label: 'Tasks',
+    content: 'Tasks content goes here'
+  },
+  feed: {
+    label: 'Feed',
+    content: 'Feed content goes here'
+  },
+  utility: {
+    label: 'Utilities',
+    content: 'Utilities content goes here'
+  }
+};
+
+export default configProps;

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

@@ -0,0 +1,27 @@
+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 StyledPegaDxilMyWsscaseviewWrapper = styled.div(({ theme }) => {
+  const foregroundColor = theme.base.palette['foreground-color'];
+
+  return css`
+    color: ${foregroundColor};
+  `;
+});
+
+StyledPegaDxilMyWsscaseviewWrapper.defaultProps = defaultThemeProp;
+
+export default StyledPegaDxilMyWsscaseviewWrapper;

package/tests/assets/library/components/createAll/Constellation/shared/PConnProps.d.ts

@@ -1,4 +1,4 @@
-import  {PConnect } from '@pega/pcore-pconnect-typedefs';
+import { PConnect } from '@pega/pcore-pconnect-typedefs';
 
 // PConnProps.d.ts
 // This gives us a place to have each component (which is most DX Components) that is
@@ -22,25 +22,24 @@ export interface PConnProps {
   // [key: string]: any;
 }
 
-
 // PConnFieldProps extends PConnProps to bring in the common properties that are
 // associated with most field components (ex: Dropdown, TextInput, etc.) in the
 //  components/field directory
 export interface PConnFieldProps extends PConnProps {
-  label: string,
-  required: boolean,
-  disabled: boolean,
-  value: any,
-  validatemessage: string,
-  status?: string,
-  onChange?: any,
-  onBlur?: any,
-  readOnly: boolean,
-  testId: string,
-  helperText: string,
-  displayMode?: string,
-  hideLabel: boolean,
-  placeholder?: string,
-  fieldMetadata?: any,
-  additionalProps?: any
+  label: string;
+  required: boolean;
+  disabled: boolean;
+  value: any;
+  validatemessage: string;
+  status?: string;
+  onChange?: any;
+  onBlur?: any;
+  readOnly: boolean;
+  testId: string;
+  helperText: string;
+  displayMode?: string;
+  hideLabel: boolean;
+  placeholder?: string;
+  fieldMetadata?: any;
+  additionalProps?: any;
 }

package/tests/assets/original/components/create/Pega_DXIL_MyTestText/PConnProps.d.ts

@@ -1,4 +1,4 @@
-import  {PConnect } from '@pega/pcore-pconnect-typedefs';
+import { PConnect } from '@pega/pcore-pconnect-typedefs';
 
 // PConnProps.d.ts
 // This gives us a place to have each component (which is most DX Components) that is
@@ -22,25 +22,24 @@ export interface PConnProps {
   // [key: string]: any;
 }
 
-
 // PConnFieldProps extends PConnProps to bring in the common properties that are
 // associated with most field components (ex: Dropdown, TextInput, etc.) in the
 //  components/field directory
 export interface PConnFieldProps extends PConnProps {
-  label: string,
-  required: boolean,
-  disabled: boolean,
-  value: any,
-  validatemessage: string,
-  status?: string,
-  onChange?: any,
-  onBlur?: any,
-  readOnly: boolean,
-  testId: string,
-  helperText: string,
-  displayMode?: string,
-  hideLabel: boolean,
-  placeholder?: string,
-  fieldMetadata?: any,
-  additionalProps?: any
+  label: string;
+  required: boolean;
+  disabled: boolean;
+  value: any;
+  validatemessage: string;
+  status?: string;
+  onChange?: any;
+  onBlur?: any;
+  readOnly: boolean;
+  testId: string;
+  helperText: string;
+  displayMode?: string;
+  hideLabel: boolean;
+  placeholder?: string;
+  fieldMetadata?: any;
+  additionalProps?: any;
 }

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

@@ -0,0 +1,15 @@
+{
+  "name": "Pega_DXIL_MyCaseview",
+  "label": "My Caseview",
+  "description": "My Caseview",
+  "organization": "Pega",
+  "version": "0.0.1",
+  "library": "DXIL",
+  "componentKey": "Pega_DXIL_MyCaseview",
+  "type": "Presentation",
+  "subtype": "CASEVIEW",
+  "subtypeLabel": "CASEVIEW",
+  "icon": "OneColumnPage.svg",
+  "properties": [],
+  "defaultConfig": {}
+}