@pega/cosmos-react-demos 3.0.0-dev.2.1 → 3.0.0-dev.3.0

package/lib/work/Details/Details.stories.js

@@ -10,17 +10,17 @@ export const DetailsDemo = () => {
                 {
                     id: '1',
                     name: 'Statement balance',
-                    value: _jsx(CurrencyDisplay, { value: '1289.00', currencyISOCode: 'USD' }, void 0)
+                    value: _jsx(CurrencyDisplay, { value: 1289.0, currencyISOCode: 'USD' }, void 0)
                 },
                 {
                     id: '2',
                     name: 'Total balance',
-                    value: _jsx(CurrencyDisplay, { value: '35667.00', currencyISOCode: 'USD' }, void 0)
+                    value: _jsx(CurrencyDisplay, { value: 35667.0, currencyISOCode: 'USD' }, void 0)
                 },
                 {
                     id: '3',
                     name: 'Available credit',
-                    value: _jsx(CurrencyDisplay, { value: '5813.00', currencyISOCode: 'USD' }, void 0)
+                    value: _jsx(CurrencyDisplay, { value: 5813.0, currencyISOCode: 'USD' }, void 0)
                 },
                 {
                     id: '4',

package/lib/work/Details/Details.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Details.stories.js","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  CurrencyDisplay,\n  DateTimeDisplay,\n  URLDisplay,\n  BooleanDisplay,\n  FieldGroup,\n  FieldValueList,\n  LocationDisplay,\n  MapsContext,\n  PhoneDisplay,\n  EmailDisplay\n} from '@pega/cosmos-react-core';\nimport { Details } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Details',\n  component: Details\n} as Meta;\n\nexport const DetailsDemo: Story = () => {\n  return (\n    <MapsContext.Provider value={{ name: 'google' }}>\n      <Details\n        highlightedFields={[\n          {\n            id: '1',\n            name: 'Statement balance',\n            value: <CurrencyDisplay value='1289.00' currencyISOCode='USD' />\n          },\n          {\n            id: '2',\n            name: 'Total balance',\n            value: <CurrencyDisplay value='35667.00' currencyISOCode='USD' />\n          },\n          {\n            id: '3',\n            name: 'Available credit',\n            value: <CurrencyDisplay value='5813.00' currencyISOCode='USD' />\n          },\n          {\n            id: '4',\n            name: 'Payment due date',\n            value: <DateTimeDisplay value={Date.now()} variant='datetime' format='long' />\n          },\n          {\n            id: '5',\n            name: 'Available benefits',\n            value: (\n              <URLDisplay\n                value='https://www.google.com/'\n                displayText='View benefits'\n                variant='link'\n              />\n            )\n          },\n          {\n            id: '6',\n            name: 'Platinum member',\n            value: <BooleanDisplay value />\n          }\n        ]}\n        regions={[\n          <FieldGroup name='Personal'>\n            <FieldValueList\n              fields={[\n                {\n                  name: 'Home address',\n                  value: (\n                    <LocationDisplay\n                      value='12 Higgins Bottom Way, Carnell, NH, 02133'\n                      variant='text'\n                    />\n                  )\n                },\n                { name: 'Primary phone', value: <PhoneDisplay value='+15553749637' /> },\n                {\n                  name: 'Primary email',\n                  value: <EmailDisplay value='joe.smith@example.com' />\n                }\n              ]}\n            />\n          </FieldGroup>,\n          <FieldGroup name='Work'>\n            <FieldValueList\n              fields={[\n                {\n                  name: 'Work address',\n                  value: (\n                    <LocationDisplay\n                      value='1 Monolith Business Parkway, Milltown, NH, 02333'\n                      variant='text'\n                    />\n                  )\n                },\n                { name: 'Work phone', value: <PhoneDisplay value='+15553742200' /> },\n                {\n                  name: 'Work email',\n                  value: <EmailDisplay value='jane.smith@example.com' />\n                }\n              ]}\n            />\n          </FieldGroup>\n        ]}\n      />\n    </MapsContext.Provider>\n  );\n};\n"]}
+{"version":3,"file":"Details.stories.js","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  CurrencyDisplay,\n  DateTimeDisplay,\n  URLDisplay,\n  BooleanDisplay,\n  FieldGroup,\n  FieldValueList,\n  LocationDisplay,\n  MapsContext,\n  PhoneDisplay,\n  EmailDisplay\n} from '@pega/cosmos-react-core';\nimport { Details } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Details',\n  component: Details\n} as Meta;\n\nexport const DetailsDemo: Story = () => {\n  return (\n    <MapsContext.Provider value={{ name: 'google' }}>\n      <Details\n        highlightedFields={[\n          {\n            id: '1',\n            name: 'Statement balance',\n            value: <CurrencyDisplay value={1289.0} currencyISOCode='USD' />\n          },\n          {\n            id: '2',\n            name: 'Total balance',\n            value: <CurrencyDisplay value={35667.0} currencyISOCode='USD' />\n          },\n          {\n            id: '3',\n            name: 'Available credit',\n            value: <CurrencyDisplay value={5813.0} currencyISOCode='USD' />\n          },\n          {\n            id: '4',\n            name: 'Payment due date',\n            value: <DateTimeDisplay value={Date.now()} variant='datetime' format='long' />\n          },\n          {\n            id: '5',\n            name: 'Available benefits',\n            value: (\n              <URLDisplay\n                value='https://www.google.com/'\n                displayText='View benefits'\n                variant='link'\n              />\n            )\n          },\n          {\n            id: '6',\n            name: 'Platinum member',\n            value: <BooleanDisplay value />\n          }\n        ]}\n        regions={[\n          <FieldGroup name='Personal'>\n            <FieldValueList\n              fields={[\n                {\n                  name: 'Home address',\n                  value: (\n                    <LocationDisplay\n                      value='12 Higgins Bottom Way, Carnell, NH, 02133'\n                      variant='text'\n                    />\n                  )\n                },\n                { name: 'Primary phone', value: <PhoneDisplay value='+15553749637' /> },\n                {\n                  name: 'Primary email',\n                  value: <EmailDisplay value='joe.smith@example.com' />\n                }\n              ]}\n            />\n          </FieldGroup>,\n          <FieldGroup name='Work'>\n            <FieldValueList\n              fields={[\n                {\n                  name: 'Work address',\n                  value: (\n                    <LocationDisplay\n                      value='1 Monolith Business Parkway, Milltown, NH, 02333'\n                      variant='text'\n                    />\n                  )\n                },\n                { name: 'Work phone', value: <PhoneDisplay value='+15553742200' /> },\n                {\n                  name: 'Work email',\n                  value: <EmailDisplay value='jane.smith@example.com' />\n                }\n              ]}\n            />\n          </FieldGroup>\n        ]}\n      />\n    </MapsContext.Provider>\n  );\n};\n"]}

package/lib/work/Stakeholders/Stakeholders.mocks.js

@@ -4,7 +4,7 @@ import { Input, Grid, FieldGroup } from '@pega/cosmos-react-core';
 import { useMockListData } from '../../core/SummaryList/SummaryList.mocks';
 export const mockNetworkReq = () => new Promise(resolve => setTimeout(resolve, 2000));
 // Mock total count of Stakeholder resource.
-const count = Math.floor(Math.random() * 50) + 1;
+const count = 20;
 // Mock stakeholder roles.
 export const mockRoles = Array.from({ length: 3 }, (_, i) => ({
     name: `Role-${i + 1}`,

package/lib/work/Stakeholders/Stakeholders.mocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stakeholders.mocks.js","sourceRoot":"","sources":["../../../src/work/Stakeholders/Stakeholders.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4B,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGlE,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAO3E,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;AAEtF,4CAA4C;AAC5C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;AAEjD,0BAA0B;AAC1B,MAAM,CAAC,MAAM,SAAS,GAAoD,KAAK,CAAC,IAAI,CAClF,EAAE,MAAM,EAAE,CAAC,EAAE,EACb,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACT,IAAI,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE;IACrB,WAAW,EAAE,iCACX,CAAC,GAAG,CACN,6GAA6G;CAC9G,CAAC,CACH,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EAQN,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,CACb,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,aACtC,KAAC,KAAK,IAAC,KAAK,EAAC,YAAY,EAAC,QAAQ,QAAC,YAAY,EAAE,SAAS,WAAI,EAC9D,KAAC,KAAK,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,QAAC,YAAY,EAAE,QAAQ,WAAI,EAC5D,KAAC,KAAK,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,QAAQ,QAAC,YAAY,EAAE,KAAK,WAAI,EAClE,KAAC,KAAK,IAAC,KAAK,EAAC,WAAW,EAAC,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,WAAI,YAC9E,CACR,CAAC;IAEF,OAAO,gBAAgB,CAAC,CAAC,CAAC,CACxB,KAAC,UAAU,IAAC,IAAI,EAAE,eAAe,gBAAgB,EAAE,YAAG,MAAM,WAAc,CAC3E,CAAC,CAAC,CAAC,CACF,MAAM,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,EAAc,EACgE,EAAE;IAChF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAA0B,EAAE,CAAC,CAAC;IACtF,yBAAyB;IACzB,MAAM,CAAC,YAAY,CAAC,GAAG,eAAe,CACpC,GAAG,EAAE;QACH,mBAAmB,CAAC,YAAY,CAAC,CAAC;QAClC,EAAE,EAAE,CAAC;IACP,CAAC,EACD,EAAE,KAAK,EAAE,CACV,CAAC;IAEF,OAAO;QACL,gBAAgB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;YACjC,OAAO,EAAE,GAAG,WAAW,EAAE,IAAI,EAAE,WAAW,CAAC,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;QACpE,CAAC,CAAC;QACF,mBAAmB;KACpB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Dispatch, SetStateAction, useState } from 'react';\n\nimport { Input, Grid, FieldGroup } from '@pega/cosmos-react-core';\nimport { Role, StakeholdersProps, Stakeholder } from '@pega/cosmos-react-work';\n\nimport { useMockListData } from '../../core/SummaryList/SummaryList.mocks';\n\ninterface MockStakeholderObject extends Stakeholder {\n  role?: Role;\n  data?: StakeholdersProps['form']['rendererProps'];\n}\n\nexport const mockNetworkReq = () => new Promise(resolve => setTimeout(resolve, 2000));\n\n// Mock total count of Stakeholder resource.\nconst count = Math.floor(Math.random() * 50) + 1;\n\n// Mock stakeholder roles.\nexport const mockRoles: NonNullable<StakeholdersProps['form']>['roles'] = Array.from(\n  { length: 3 },\n  (_, i) => ({\n    name: `Role-${i + 1}`,\n    description: `This is a description of Role-${\n      i + 1\n    }. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet dolor a mauris imperdiet convallis.`\n  })\n);\n\n/**\n * A component that will be rendered internally by Stakeholders when adding or editing.\n * If roles exists, the component will be passed the selected role as a prop.\n * The return content of this will likely be a dynamically rendered view.\n */\nexport const AddAndEditForm = ({\n  selectedRoleName,\n  firstName,\n  lastName,\n  email\n}: {\n  // Cosmos will pass the selectedRoleName\n  selectedRoleName?: Role['name'];\n  // Any prop passed to rendererProps will be forwarded here\n  firstName?: string;\n  lastName?: string;\n  email?: string;\n}) => {\n  const inputs = (\n    <Grid container={{ cols: '1fr', gap: 2 }}>\n      <Input label='First name' required defaultValue={firstName} />\n      <Input label='Last name' required defaultValue={lastName} />\n      <Input type='email' label='Email' required defaultValue={email} />\n      <Input label='Job title' defaultValue={firstName ? 'Vice president' : undefined} />\n    </Grid>\n  );\n\n  return selectedRoleName ? (\n    <FieldGroup name={`Fields for: ${selectedRoleName}`}>{inputs}</FieldGroup>\n  ) : (\n    inputs\n  );\n};\n\nexport const useMockStakeholders = (\n  cb: () => void\n): [MockStakeholderObject[], Dispatch<SetStateAction<MockStakeholderObject[]>>] => {\n  const [mockStakeholders, setMockStakeholders] = useState<MockStakeholderObject[]>([]);\n  // Grab some mock data...\n  const [mockListData] = useMockListData(\n    () => {\n      setMockStakeholders(mockListData);\n      cb();\n    },\n    { count }\n  );\n\n  return [\n    mockStakeholders.map(stakeholder => {\n      return { ...stakeholder, role: stakeholder.role ?? mockRoles[0] };\n    }),\n    setMockStakeholders\n  ];\n};\n"]}
+{"version":3,"file":"Stakeholders.mocks.js","sourceRoot":"","sources":["../../../src/work/Stakeholders/Stakeholders.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4B,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGlE,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAO3E,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;AAEtF,4CAA4C;AAC5C,MAAM,KAAK,GAAG,EAAE,CAAC;AAEjB,0BAA0B;AAC1B,MAAM,CAAC,MAAM,SAAS,GAAoD,KAAK,CAAC,IAAI,CAClF,EAAE,MAAM,EAAE,CAAC,EAAE,EACb,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACT,IAAI,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE;IACrB,WAAW,EAAE,iCACX,CAAC,GAAG,CACN,6GAA6G;CAC9G,CAAC,CACH,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EAQN,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,CACb,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,aACtC,KAAC,KAAK,IAAC,KAAK,EAAC,YAAY,EAAC,QAAQ,QAAC,YAAY,EAAE,SAAS,WAAI,EAC9D,KAAC,KAAK,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,QAAC,YAAY,EAAE,QAAQ,WAAI,EAC5D,KAAC,KAAK,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,QAAQ,QAAC,YAAY,EAAE,KAAK,WAAI,EAClE,KAAC,KAAK,IAAC,KAAK,EAAC,WAAW,EAAC,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,WAAI,YAC9E,CACR,CAAC;IAEF,OAAO,gBAAgB,CAAC,CAAC,CAAC,CACxB,KAAC,UAAU,IAAC,IAAI,EAAE,eAAe,gBAAgB,EAAE,YAAG,MAAM,WAAc,CAC3E,CAAC,CAAC,CAAC,CACF,MAAM,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,EAAc,EACgE,EAAE;IAChF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAA0B,EAAE,CAAC,CAAC;IACtF,yBAAyB;IACzB,MAAM,CAAC,YAAY,CAAC,GAAG,eAAe,CACpC,GAAG,EAAE;QACH,mBAAmB,CAAC,YAAY,CAAC,CAAC;QAClC,EAAE,EAAE,CAAC;IACP,CAAC,EACD,EAAE,KAAK,EAAE,CACV,CAAC;IAEF,OAAO;QACL,gBAAgB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;YACjC,OAAO,EAAE,GAAG,WAAW,EAAE,IAAI,EAAE,WAAW,CAAC,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;QACpE,CAAC,CAAC;QACF,mBAAmB;KACpB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Dispatch, SetStateAction, useState } from 'react';\n\nimport { Input, Grid, FieldGroup } from '@pega/cosmos-react-core';\nimport { Role, StakeholdersProps, Stakeholder } from '@pega/cosmos-react-work';\n\nimport { useMockListData } from '../../core/SummaryList/SummaryList.mocks';\n\ninterface MockStakeholderObject extends Stakeholder {\n  role?: Role;\n  data?: StakeholdersProps['form']['rendererProps'];\n}\n\nexport const mockNetworkReq = () => new Promise(resolve => setTimeout(resolve, 2000));\n\n// Mock total count of Stakeholder resource.\nconst count = 20;\n\n// Mock stakeholder roles.\nexport const mockRoles: NonNullable<StakeholdersProps['form']>['roles'] = Array.from(\n  { length: 3 },\n  (_, i) => ({\n    name: `Role-${i + 1}`,\n    description: `This is a description of Role-${\n      i + 1\n    }. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet dolor a mauris imperdiet convallis.`\n  })\n);\n\n/**\n * A component that will be rendered internally by Stakeholders when adding or editing.\n * If roles exists, the component will be passed the selected role as a prop.\n * The return content of this will likely be a dynamically rendered view.\n */\nexport const AddAndEditForm = ({\n  selectedRoleName,\n  firstName,\n  lastName,\n  email\n}: {\n  // Cosmos will pass the selectedRoleName\n  selectedRoleName?: Role['name'];\n  // Any prop passed to rendererProps will be forwarded here\n  firstName?: string;\n  lastName?: string;\n  email?: string;\n}) => {\n  const inputs = (\n    <Grid container={{ cols: '1fr', gap: 2 }}>\n      <Input label='First name' required defaultValue={firstName} />\n      <Input label='Last name' required defaultValue={lastName} />\n      <Input type='email' label='Email' required defaultValue={email} />\n      <Input label='Job title' defaultValue={firstName ? 'Vice president' : undefined} />\n    </Grid>\n  );\n\n  return selectedRoleName ? (\n    <FieldGroup name={`Fields for: ${selectedRoleName}`}>{inputs}</FieldGroup>\n  ) : (\n    inputs\n  );\n};\n\nexport const useMockStakeholders = (\n  cb: () => void\n): [MockStakeholderObject[], Dispatch<SetStateAction<MockStakeholderObject[]>>] => {\n  const [mockStakeholders, setMockStakeholders] = useState<MockStakeholderObject[]>([]);\n  // Grab some mock data...\n  const [mockListData] = useMockListData(\n    () => {\n      setMockStakeholders(mockListData);\n      cb();\n    },\n    { count }\n  );\n\n  return [\n    mockStakeholders.map(stakeholder => {\n      return { ...stakeholder, role: stakeholder.role ?? mockRoles[0] };\n    }),\n    setMockStakeholders\n  ];\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-demos",
-  "version": "3.0.0-dev.2.1",
+  "version": "3.0.0-dev.3.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,14 +20,14 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-build": "3.0.0-dev.2.1",
-    "@pega/cosmos-react-condition-builder": "3.0.0-dev.2.1",
-    "@pega/cosmos-react-core": "3.0.0-dev.2.1",
-    "@pega/cosmos-react-cs": "3.0.0-dev.2.1",
-    "@pega/cosmos-react-dnd": "3.0.0-dev.2.1",
-    "@pega/cosmos-react-rte": "3.0.0-dev.2.1",
-    "@pega/cosmos-react-social": "3.0.0-dev.2.1",
-    "@pega/cosmos-react-work": "3.0.0-dev.2.1",
+    "@pega/cosmos-react-build": "3.0.0-dev.3.0",
+    "@pega/cosmos-react-condition-builder": "3.0.0-dev.3.0",
+    "@pega/cosmos-react-core": "3.0.0-dev.3.0",
+    "@pega/cosmos-react-cs": "3.0.0-dev.3.0",
+    "@pega/cosmos-react-dnd": "3.0.0-dev.3.0",
+    "@pega/cosmos-react-rte": "3.0.0-dev.3.0",
+    "@pega/cosmos-react-social": "3.0.0-dev.3.0",
+    "@pega/cosmos-react-work": "3.0.0-dev.3.0",
     "emoji-mart": "^3.0.1",
     "polished": "^4.1.0",
     "react": "^16.14.0 || ^17.0.0",