npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.3.0 → 3.0.0-dev.4.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (79) hide show

package/jsx/build/DynamicContentEditor/DynamicContentEditor.stories.d.ts CHANGED Viewed

@@ -1,6 +1,9 @@
 /// <reference types="react" />
 import { Meta } from '@storybook/react';
+import { DynamicContentEditorProps } from '@pega/cosmos-react-build';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const DynamicContentEditorDemo: () => JSX.Element;
+export interface DynamicContentEditorStoryProps extends DynamicContentEditorProps {
+}
+export declare const DynamicContentEditorDemo: (args: DynamicContentEditorStoryProps) => JSX.Element;
 //# sourceMappingURL=DynamicContentEditor.stories.d.ts.map

package/jsx/build/DynamicContentEditor/DynamicContentEditor.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicContentEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/build/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;~~AAmBxC~~,wBAGU;AAEV,eAAO,MAAM,wBAAwB,~~mBAwFpC~~,CAAC"}
1	+ {"version":3,"file":"DynamicContentEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/build/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAexC,OAAO,EAEL,yBAAyB,EAE1B,MAAM,0BAA0B,CAAC;;AAIlC,wBAGU;AAEV,MAAM,WAAW,8BAA+B,SAAQ,yBAAyB;CAAG;AAEpF,eAAO,MAAM,wBAAwB,SAAU,8BAA8B,gBA0G5E,CAAC"}

package/jsx/build/DynamicContentEditor/DynamicContentEditor.stories.jsx CHANGED Viewed

@@ -6,9 +6,23 @@ export default {
     title: 'Build/DynamicContentEditor',
     component: DynamicContentEditor
 };
-export const DynamicContentEditorDemo = () => {
+export const DynamicContentEditorDemo = (args) => {
     const [html, setHtml] = useState('<p>Hi <pega-reference role="button" contenteditable="false" data-rule-type="field" data-rule-id="CustomerName">CustomerName</pega-reference><p>please check this <a href="https://google.com">link</a></p></p>');
     const rteRef = useRef(null);
+    const fieldItems = [
+        { id: 'CustomerName', primary: 'CustomerName' },
+        { id: 'Address', primary: 'Address' },
+        { id: 'Locality', primary: 'Locality' },
+        { id: 'Country', primary: 'Country' },
+        { id: 'Region', primary: 'Region' },
+        { id: 'Occupation', primary: 'Occupation' },
+        { id: 'City', primary: 'City' },
+        { id: 'Colony', primary: 'Colony' },
+        { id: 'Lastname', primary: 'Lastname' },
+        { id: 'Preference', primary: 'Preference' },
+        { id: 'Currency', primary: 'Currency' },
+        { id: 'Iconname', primary: 'Iconname' }
+    ];
     const onImageAdded = (image, id) => {
         const src = URL.createObjectURL(image);
         rteRef.current?.appendImage({ src, alt: image.name }, id);
@@ -44,6 +58,7 @@ export const DynamicContentEditorDemo = () => {
             { id: 'Occupation', text: 'Occupation' }
         ]} key={selectedField?.id} label='Field' updateSelection={updateSelection} placeholder={t('select')} defaultSelection={selectedField}/>
     </Flex>);
+    const onActiveFieldChange = (field) => setSelectedField(field);
     return (<Flex container={{ direction: 'column', gap: 2 }}>
       <Card>
         <CardContent>
@@ -55,7 +70,7 @@ export const DynamicContentEditorDemo = () => {
           </Button>
         </CardFooter>
       </Card>
-      <DynamicContentEditor defaultValue={html} onImageAdded={onImageAdded} ref={rteRef} label='Dynamic content editor' toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']} form={{ onSubmit, dynamicContentPicker }} onActiveFieldChange={(field) => setSelectedField(field)}/>
+      <DynamicContentEditor defaultValue={args.defaultValue || html} onImageAdded={onImageAdded} ref={rteRef} label='Dynamic content editor' toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']} form={args.form || { onSubmit, dynamicContentPicker }} onActiveFieldChange={args.onActiveFieldChange || onActiveFieldChange} fieldItems={args.fieldItems || fieldItems}/>
       <Flex container={{ gap: 1 }}>
         <Button onClick={() => handleShowHtml()}>Show HTML</Button>
       </Flex>

package/jsx/build/DynamicContentEditor/DynamicContentEditor.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicContentEditor.stories.jsx","sourceRoot":"","sources":["../../../src/build/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,kBAAkB,EAClB,OAAO,EACR,MAAM,yBAAyB,CAAC;AAEjC,OAAO,~~EAAE~~,oBAAoB,~~EAAY~~,MAAM,0BAA0B,CAAC;~~AAE1E~~,OAAO,aAAqC,MAAM,iBAAiB,CAAC;AAEpE,eAAe;IACb,KAAK,EAAE,4BAA4B;IACnC,SAAS,EAAE,oBAAoB;CACxB,CAAC;~~AAEV~~,MAAM,CAAC,MAAM,wBAAwB,GAAG,~~GAAG~~,EAAE;~~IAC3C~~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~~CACnB~~,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,GAAG,CAAC,CAAC,MAAM,CAAC,CACZ,KAAK,CAAC,wBAAwB,CAC9B,OAAO,CAAC,CAAC,CAAC,gBAAgB,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CACvE,IAAI,CAAC,CAAC,EAAE,QAAQ,EAAE,oBAAoB,EAAE,CAAC,~~CACzC~~,mBAAmB,CAAC,CAAC,CAAC,~~KAAe~~,~~EAAE~~,~~EAAE~~,CAAC,~~gBAAgB~~,CAAC,~~KAAK~~,CAAC,CAAC,~~EAEpE~~;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC1B;QAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,cAAc,EAAE,CAAC,CAAC,SAAS,EAAE,MAAM,CAC5D;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useRef, useState, useCallback } from 'react';\n\nimport {\n Button,\n Card,\n CardContent,\n CardFooter,\n Flex,\n TextArea,\n useAutoResize,\n useConsolidatedRef,\n useI18n\n} from '@pega/cosmos-react-core';\nimport { EditorState } from '@pega/cosmos-react-rte';\nimport { DynamicContentEditor, ItemType } from '@pega/cosmos-react-build';\n\nimport FieldSelector, { FieldSelectorProps } from './FieldSelector';\n\nexport default {\n title: 'Build/DynamicContentEditor',\n component: DynamicContentEditor\n} as Meta;\n\nexport const DynamicContentEditorDemo = () => {\n const [html, setHtml] = useState(\n '<p>Hi <pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=\"CustomerName\">CustomerName</pega-reference><p>please check this <a href=\"https://google.com\">link</a></p></p>'\n );\n const rteRef = useRef<EditorState>(null);\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n rteRef.current?.appendImage({ src, alt: image.name }, id);\n };\n const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(undefined, 100);\n const ref = useRef(null);\n const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n const handleShowHtml = () => {\n resizeTextArea();\n setHtml(rteRef.current?.getHtml() \|\| '');\n };\n const t = useI18n();\n const [selectedField, setSelectedField] = useState<ItemType>({\n id: '',\n text: ''\n });\n\n const updateSelection: FieldSelectorProps['updateSelection'] = (selectedItem: ItemType) => {\n setSelectedField(selectedItem);\n };\n const onSubmit = useCallback(\n (insertField: (selectedField: ItemType) => void) => {\n insertField(selectedField);\n },\n [selectedField]\n );\n\n const dynamicContentPicker = (\n <Flex\n container={{\n gap: 2,\n direction: 'column'\n }}\n >\n <FieldSelector\n itemList={[\n { id: 'CustomerName', text: 'CustomerName' },\n { id: 'Address', text: 'Address' },\n { id: 'Locality', text: 'Locality' },\n { id: 'Country', text: 'Country' },\n { id: 'Region', text: 'Region' },\n { id: 'Occupation', text: 'Occupation' }\n ]}\n key={selectedField?.id}\n label='Field'\n updateSelection={updateSelection}\n placeholder={t('select')}\n defaultSelection={selectedField}\n />\n </Flex>\n );\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Card>\n <CardContent>\n <TextArea\n value={html}\n onChange={e => setHtml(e.target.value)}\n autoResize\n ref={consolidatedRef}\n />\n </CardContent>\n <CardFooter>\n <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n Overwrite RTE with new HTML\n </Button>\n </CardFooter>\n </Card>\n <DynamicContentEditor\n defaultValue={html}\n onImageAdded={onImageAdded}\n ref={rteRef}\n label='Dynamic content editor'\n toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n form={{ onSubmit, dynamicContentPicker }}\n onActiveFieldChange={~~(field:~~ ~~ItemType)~~ => ~~setSelectedField(field)~~}\n />\n <Flex container={{ gap: 1 }}>\n <Button onClick={() => handleShowHtml()}>Show HTML</Button>\n </Flex>\n </Flex>\n );\n};\n"]}
1	+ {"version":3,"file":"DynamicContentEditor.stories.jsx","sourceRoot":"","sources":["../../../src/build/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useRef, useState, useCallback } from 'react';\n\nimport {\n Button,\n Card,\n CardContent,\n CardFooter,\n Flex,\n TextArea,\n useAutoResize,\n useConsolidatedRef,\n useI18n\n} from '@pega/cosmos-react-core';\nimport { EditorState } from '@pega/cosmos-react-rte';\nimport {\n DynamicContentEditor,\n DynamicContentEditorProps,\n ItemType\n} from '@pega/cosmos-react-build';\n\nimport FieldSelector, { FieldSelectorProps } from './FieldSelector';\n\nexport default {\n title: 'Build/DynamicContentEditor',\n component: DynamicContentEditor\n} as Meta;\n\nexport interface DynamicContentEditorStoryProps extends DynamicContentEditorProps {}\n\nexport const DynamicContentEditorDemo = (args: DynamicContentEditorStoryProps) => {\n const [html, setHtml] = useState(\n '<p>Hi <pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=\"CustomerName\">CustomerName</pega-reference><p>please check this <a href=\"https://google.com\">link</a></p></p>'\n );\n const rteRef = useRef<EditorState>(null);\n\n const fieldItems: DynamicContentEditorProps['fieldItems'] = [\n { id: 'CustomerName', primary: 'CustomerName' },\n { id: 'Address', primary: 'Address' },\n { id: 'Locality', primary: 'Locality' },\n { id: 'Country', primary: 'Country' },\n { id: 'Region', primary: 'Region' },\n { id: 'Occupation', primary: 'Occupation' },\n { id: 'City', primary: 'City' },\n { id: 'Colony', primary: 'Colony' },\n { id: 'Lastname', primary: 'Lastname' },\n { id: 'Preference', primary: 'Preference' },\n { id: 'Currency', primary: 'Currency' },\n { id: 'Iconname', primary: 'Iconname' }\n ];\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n rteRef.current?.appendImage({ src, alt: image.name }, id);\n };\n const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(undefined, 100);\n const ref = useRef(null);\n const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n const handleShowHtml = () => {\n resizeTextArea();\n setHtml(rteRef.current?.getHtml() \|\| '');\n };\n const t = useI18n();\n const [selectedField, setSelectedField] = useState<ItemType>({\n id: '',\n text: ''\n });\n\n const updateSelection: FieldSelectorProps['updateSelection'] = (selectedItem: ItemType) => {\n setSelectedField(selectedItem);\n };\n const onSubmit = useCallback(\n (insertField: (selectedField: ItemType) => void) => {\n insertField(selectedField);\n },\n [selectedField]\n );\n\n const dynamicContentPicker = (\n <Flex\n container={{\n gap: 2,\n direction: 'column'\n }}\n >\n <FieldSelector\n itemList={[\n { id: 'CustomerName', text: 'CustomerName' },\n { id: 'Address', text: 'Address' },\n { id: 'Locality', text: 'Locality' },\n { id: 'Country', text: 'Country' },\n { id: 'Region', text: 'Region' },\n { id: 'Occupation', text: 'Occupation' }\n ]}\n key={selectedField?.id}\n label='Field'\n updateSelection={updateSelection}\n placeholder={t('select')}\n defaultSelection={selectedField}\n />\n </Flex>\n );\n const onActiveFieldChange = (field: ItemType) => setSelectedField(field);\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Card>\n <CardContent>\n <TextArea\n value={html}\n onChange={e => setHtml(e.target.value)}\n autoResize\n ref={consolidatedRef}\n />\n </CardContent>\n <CardFooter>\n <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n Overwrite RTE with new HTML\n </Button>\n </CardFooter>\n </Card>\n <DynamicContentEditor\n defaultValue={args.defaultValue \|\| html}\n onImageAdded={onImageAdded}\n ref={rteRef}\n label='Dynamic content editor'\n toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n form={args.form \|\| { onSubmit, dynamicContentPicker }}\n onActiveFieldChange={args.onActiveFieldChange \|\| onActiveFieldChange}\n fieldItems={args.fieldItems \|\| fieldItems}\n />\n <Flex container={{ gap: 1 }}>\n <Button onClick={() => handleShowHtml()}>Show HTML</Button>\n </Flex>\n </Flex>\n );\n};\n"]}

package/jsx/build/ObjectSelect/ObjectSelect.mocks.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { DateFunctionsByType, Field } from '@pega/cosmos-react-condition-builder';
+export declare const skeletonData: {
+    id: string;
+    primary: string;
+    secondary: string[];
+    href: string;
+}[];
+export declare const dataPages: {
+    id: string;
+    primary: string;
+    secondary: string[];
+    href: string;
+}[];
+export declare const demoFields: Field[];
+export declare const demoDateFunctions: DateFunctionsByType;
+//# sourceMappingURL=ObjectSelect.mocks.d.ts.map

package/jsx/build/ObjectSelect/ObjectSelect.mocks.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ObjectSelect.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/ObjectSelect/ObjectSelect.mocks.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAElF,eAAO,MAAM,YAAY;;;;;GAmCxB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;GAyBrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,EAkD7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,mBAqB/B,CAAC"}

package/jsx/build/ObjectSelect/ObjectSelect.mocks.js ADDED Viewed

@@ -0,0 +1,136 @@
+export const skeletonData = [
+    {
+        id: '01-1',
+        primary: 'primary-link-1',
+        secondary: ['secondary-1'],
+        href: 'http://www.pega.com'
+    },
+    {
+        id: '01-2',
+        primary: 'primary-link-2',
+        secondary: [
+            'secondary-1',
+            'secondary-2',
+            'secondary-3',
+            'secondary-4',
+            'secondary-5',
+            'secondary-6',
+            'secondary-7',
+            'secondary-8',
+            'secondary-9'
+        ],
+        href: 'http://www.pega.com'
+    },
+    {
+        id: '01-3',
+        primary: 'primary-link-3',
+        secondary: ['secondary-1', 'secondary-2'],
+        href: 'http://www.pega.com'
+    },
+    {
+        id: '01-4',
+        primary: 'primary-link-4',
+        secondary: ['secondary-1', 'secondary-2'],
+        href: 'http://www.pega.com'
+    }
+];
+export const dataPages = [
+    {
+        id: '01-1',
+        primary: 'MortgageRequestList-DataSource',
+        secondary: ['Scope', 'O1XPTI-CCompass-Work-MortgageRequest'],
+        href: 'http://www.pega.com'
+    },
+    {
+        id: '01-2',
+        primary: 'Credit Scores List Data Source',
+        secondary: ['Scope', 'CreditScore'],
+        href: 'http://www.pega.com'
+    },
+    {
+        id: '01-3',
+        primary: 'GetAutoLoanByIDDataSource',
+        secondary: ['Scope', 'O1XPTI-CCompass-Work-AutoLoan'],
+        href: 'http://www.pega.com'
+    },
+    {
+        id: '01-4',
+        primary: 'DS_pyMyWorkList',
+        secondary: ['Scope', 'Assign-Worklist'],
+        href: 'http://www.pega.com'
+    }
+];
+export const demoFields = [
+    { name: 'employeeId', label: 'Employee ID', type: 'TEXT' },
+    { name: 'firstName', label: 'First Name', type: 'TEXT' },
+    { name: 'lastName', label: 'Last Name', type: 'TEXT' },
+    { name: 'gender', label: 'Gender', type: 'TEXT' },
+    {
+        name: 'department',
+        label: 'Department',
+        type: 'TEXT',
+        possibleValues: [
+            'Customer Service',
+            'Engineering',
+            'Facilities',
+            'Finance',
+            'HR',
+            'IT',
+            'Sales'
+        ]
+    },
+    { name: 'age', label: 'Age', type: 'NUMBER' },
+    { name: 'experience', label: 'Experience (yrs)', type: 'NUMBER' },
+    { name: 'salary', label: 'Salary', type: 'NUMBER' },
+    { name: 'hireDate', label: 'Hire Date', type: 'DATE_ONLY' },
+    { name: 'dateOfBirth', label: 'Date of Birth', type: 'DATE_ONLY' },
+    {
+        name: 'shiftStartTime',
+        label: 'Shift start time',
+        type: 'TIME_ONLY',
+        groupLabel: 'Technical details'
+    },
+    {
+        name: 'shiftEndTime',
+        label: 'Shift end time',
+        type: 'TIME_ONLY',
+        groupLabel: 'Technical details'
+    },
+    {
+        name: 'lastActivityAt',
+        label: 'Last activity at',
+        type: 'DATE_TIME',
+        groupLabel: 'Technical details'
+    },
+    {
+        name: 'nextPasswordReset',
+        label: 'Next password reset',
+        type: 'DATE_TIME',
+        groupLabel: 'Technical details'
+    },
+    { name: 'isSeniorCitizen', label: 'Is Senior Citizen', type: 'BOOLEAN' },
+    { name: 'isRemoteEmployee', label: 'Is Remote Employee', type: 'BOOLEAN' }
+];
+export const demoDateFunctions = {
+    DATE_TIME: [
+        'YEARS',
+        'QUARTERS',
+        'MONTHS',
+        'WEEKS',
+        'DAYS',
+        'HOURS',
+        'MONTHS_OF_YEAR',
+        'DAYS_OF_MONTH',
+        'DAYS_OF_WEEK'
+    ],
+    DATE_ONLY: [
+        'YEARS',
+        'QUARTERS',
+        'MONTHS',
+        'WEEKS',
+        'MONTHS_OF_YEAR',
+        'DAYS_OF_MONTH',
+        'DAYS_OF_WEEK'
+    ]
+};
+//# sourceMappingURL=ObjectSelect.mocks.js.map

package/jsx/build/ObjectSelect/ObjectSelect.mocks.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ObjectSelect.mocks.js","sourceRoot":"","sources":["../../../src/build/ObjectSelect/ObjectSelect.mocks.ts"],"names":[],"mappings":"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","sourcesContent":["// cSpell:words XPTI\nimport { DateFunctionsByType, Field } from '@pega/cosmos-react-condition-builder';\n\nexport const skeletonData = [\n {\n id: '01-1',\n primary: 'primary-link-1',\n secondary: ['secondary-1'],\n href: 'http://www.pega.com'\n },\n {\n id: '01-2',\n primary: 'primary-link-2',\n secondary: [\n 'secondary-1',\n 'secondary-2',\n 'secondary-3',\n 'secondary-4',\n 'secondary-5',\n 'secondary-6',\n 'secondary-7',\n 'secondary-8',\n 'secondary-9'\n ],\n href: 'http://www.pega.com'\n },\n {\n id: '01-3',\n primary: 'primary-link-3',\n secondary: ['secondary-1', 'secondary-2'],\n href: 'http://www.pega.com'\n },\n {\n id: '01-4',\n primary: 'primary-link-4',\n secondary: ['secondary-1', 'secondary-2'],\n href: 'http://www.pega.com'\n }\n];\n\nexport const dataPages = [\n {\n id: '01-1',\n primary: 'MortgageRequestList-DataSource',\n secondary: ['Scope', 'O1XPTI-CCompass-Work-MortgageRequest'],\n href: 'http://www.pega.com'\n },\n {\n id: '01-2',\n primary: 'Credit Scores List Data Source',\n secondary: ['Scope', 'CreditScore'],\n href: 'http://www.pega.com'\n },\n {\n id: '01-3',\n primary: 'GetAutoLoanByIDDataSource',\n secondary: ['Scope', 'O1XPTI-CCompass-Work-AutoLoan'],\n href: 'http://www.pega.com'\n },\n {\n id: '01-4',\n primary: 'DS_pyMyWorkList',\n secondary: ['Scope', 'Assign-Worklist'],\n href: 'http://www.pega.com'\n }\n];\n\nexport const demoFields: Field[] = [\n { name: 'employeeId', label: 'Employee ID', type: 'TEXT' },\n { name: 'firstName', label: 'First Name', type: 'TEXT' },\n { name: 'lastName', label: 'Last Name', type: 'TEXT' },\n { name: 'gender', label: 'Gender', type: 'TEXT' },\n {\n name: 'department',\n label: 'Department',\n type: 'TEXT',\n possibleValues: [\n 'Customer Service',\n 'Engineering',\n 'Facilities',\n 'Finance',\n 'HR',\n 'IT',\n 'Sales'\n ]\n },\n { name: 'age', label: 'Age', type: 'NUMBER' },\n { name: 'experience', label: 'Experience (yrs)', type: 'NUMBER' },\n { name: 'salary', label: 'Salary', type: 'NUMBER' },\n { name: 'hireDate', label: 'Hire Date', type: 'DATE_ONLY' },\n { name: 'dateOfBirth', label: 'Date of Birth', type: 'DATE_ONLY' },\n {\n name: 'shiftStartTime',\n label: 'Shift start time',\n type: 'TIME_ONLY',\n groupLabel: 'Technical details'\n },\n {\n name: 'shiftEndTime',\n label: 'Shift end time',\n type: 'TIME_ONLY',\n groupLabel: 'Technical details'\n },\n {\n name: 'lastActivityAt',\n label: 'Last activity at',\n type: 'DATE_TIME',\n groupLabel: 'Technical details'\n },\n {\n name: 'nextPasswordReset',\n label: 'Next password reset',\n type: 'DATE_TIME',\n groupLabel: 'Technical details'\n },\n { name: 'isSeniorCitizen', label: 'Is Senior Citizen', type: 'BOOLEAN' },\n { name: 'isRemoteEmployee', label: 'Is Remote Employee', type: 'BOOLEAN' }\n];\n\nexport const demoDateFunctions: DateFunctionsByType = {\n DATE_TIME: [\n 'YEARS',\n 'QUARTERS',\n 'MONTHS',\n 'WEEKS',\n 'DAYS',\n 'HOURS',\n 'MONTHS_OF_YEAR',\n 'DAYS_OF_MONTH',\n 'DAYS_OF_WEEK'\n ],\n DATE_ONLY: [\n 'YEARS',\n 'QUARTERS',\n 'MONTHS',\n 'WEEKS',\n 'MONTHS_OF_YEAR',\n 'DAYS_OF_MONTH',\n 'DAYS_OF_WEEK'\n ]\n};\n"]}

package/jsx/build/ObjectSelect/ObjectSelect.stories.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/react';
+import { MouseEvent } from 'react';
+import { ObjectSelectProps } from '@pega/cosmos-react-build';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export interface ObjectSelectStoryProps extends ObjectSelectProps {
+    onSubmit?: (id: string, e: MouseEvent<HTMLElement>) => void;
+    onCancel?: (id: string, e: MouseEvent<HTMLElement>) => void;
+    popoverContent?: string;
+}
+export declare const ObjectSelectSkeleton: Story<ObjectSelectStoryProps>;
+export declare const ObjectSelectDemo: Story<ObjectSelectStoryProps>;
+export declare const ObjectSelectDemoInForm: () => JSX.Element | null;
+//# sourceMappingURL=ObjectSelect.stories.d.ts.map

package/jsx/build/ObjectSelect/ObjectSelect.stories.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ObjectSelect.stories.d.ts","sourceRoot":"","sources":["../../../src/build/ObjectSelect/ObjectSelect.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAOL,UAAU,EAEX,MAAM,OAAO,CAAC;AAuBf,OAAO,EAAgB,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;;AAoB3E,wBAGU;AAcV,MAAM,WAAW,sBAAuB,SAAQ,iBAAiB;IAC/D,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC5D,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC5D,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,sBAAsB,CA2C9D,CAAC;AA6PF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,sBAAsB,CAK1D,CAAC;AAqFF,eAAO,MAAM,sBAAsB,0BA8ElC,CAAC"}

package/jsx/build/ObjectSelect/ObjectSelect.stories.jsx ADDED Viewed

@@ -0,0 +1,312 @@
+import { useReducer, useContext, useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { Form, Button, Flex, Input, ToasterContext, TextArea, Card, CardContent, Drawer, Text, FieldValueList, Icon, registerIcon, menuHelpers, useI18n, StyledRegion } from '@pega/cosmos-react-core';
+import { ObjectSelect } from '@pega/cosmos-react-build';
+import { AtomicCondition, getInitConditionForLhs, formatCondition } from '@pega/cosmos-react-condition-builder';
+import * as times from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
+import { StyledDrawerContent, StyledCodeBlock, StyledConfigurationContent } from './ObjectSelect.styles';
+import { skeletonData, dataPages, demoFields, demoDateFunctions } from './ObjectSelect.mocks';
+registerIcon(times);
+export default {
+    title: 'Build/ObjectSelect',
+    component: ObjectSelect
+};
+export const ObjectSelectSkeleton = (args) => {
+    const [value, setValue] = useState(args.value);
+    return (<ObjectSelect {...args} items={skeletonData} value={value} onChange={id => {
+            const data = menuHelpers.getItem(skeletonData, id);
+            if (data) {
+                setValue({
+                    id: data.id,
+                    primary: data.primary,
+                    href: data.href ?? '#',
+                    meta: data.id !== '01-4' ? data.secondary?.join('  ') : ''
+                });
+            }
+            else
+                setValue(undefined);
+        }} configuration={{
+            label: 'Gear button label',
+            heading: 'Popover heading',
+            primaryAction: {
+                id: 'primaryAction',
+                text: 'Primary action text',
+                onClick: args.onSubmit
+            },
+            secondaryAction: {
+                id: 'secondaryAction',
+                text: 'Secondary action text',
+                onClick: args.onCancel
+            },
+            content: (<StyledConfigurationContent>
+            <StyledRegion style={{ minHeight: '20vh' }}/>
+          </StyledConfigurationContent>)
+        }} onPreview={args.onPreview}/>);
+};
+ObjectSelectSkeleton.args = {
+    label: 'Object select label',
+    labelHidden: false,
+    info: 'Object select info text',
+    placeholder: '',
+    status: undefined,
+    required: false,
+    disabled: false,
+    readOnly: false,
+    onPreview: action('Clicked preview link'),
+    onSubmit: action('Clicked submit button'),
+    onCancel: action('Clicked cancel button')
+};
+ObjectSelectSkeleton.argTypes = {
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    info: { control: { type: 'text' } },
+    placeholder: { control: { type: 'text' } },
+    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    readOnly: { control: { type: 'boolean' } },
+    onPreview: { table: { disable: true } },
+    onSubmit: { table: { disable: true } },
+    onCancel: { table: { disable: true } }
+};
+const ViewportDrawer = ({ drawerData, drawerOpen, setDrawerOpen }) => {
+    const fields = drawerData?.secondary?.map((data, index) => {
+        return {
+            id: (index + 1).toString(),
+            name: data?.toString() ?? '',
+            value: data
+        };
+    });
+    return (<Drawer open={drawerOpen} onOuterClick={() => {
+            setDrawerOpen(false);
+        }} position='fixed' size='30rem' nullWhenClosed shadow>
+      <Flex as={StyledDrawerContent} container={{
+            direction: 'column',
+            alignItems: 'start',
+            gap: 2,
+            pad: 4
+        }}>
+        <Flex container={{ direction: 'column', gap: 1 }}>
+          <Flex container={{ gap: 2, alignItems: 'center' }}>
+            <Button variant='simple' label='Close drawer' icon onClick={() => setDrawerOpen(false)}>
+              <Icon name='times'/>
+            </Button>
+            <Text variant='h3'>{drawerData?.primary}</Text>
+          </Flex>
+          <Flex container={{ direction: 'column', gap: 2, pad: 1 }}>
+            <Text as='p'>
+              This is a mock representation for the parameters of the {drawerData?.primary} rule
+            </Text>
+            <FieldValueList variant='inline' fields={fields}/>
+          </Flex>
+        </Flex>
+      </Flex>
+    </Drawer>);
+};
+const ConfigurationContent = (args) => {
+    const [showErrorIndicators] = useState(false);
+    const ConditionBuilder = (<AtomicCondition condition={args.condition} fields={demoFields} indicateErrors={showErrorIndicators} dateFunctions={demoDateFunctions} onChange={c => args.setCondition(c)} itemDirection='row' showLhsAsLabel={false} validRhsTypes={args.validRHSTypes}/>);
+    const Inputs = (<Flex container={{ direction: 'column', gap: 2 }}>
+      <Text variant='h4'>Inputs</Text>
+      <Flex container={{ direction: 'column', gap: 1 }}>
+        <Flex container={{ alignItems: 'end', gap: 1 }}>
+          <Input label='Name' type='text' defaultValue='Sample key 1' disabled readOnly={args.readOnly}/>
+          <Input label='Value' type='text' defaultValue='Sample value 1' readOnly={args.readOnly} disabled={args.disabled}/>
+        </Flex>
+        <Flex container={{ alignItems: 'end', gap: 1 }}>
+          <Input label='Name 2' labelHidden type='text' defaultValue='Sample key 2' disabled readOnly={args.readOnly}/>
+          <Input label='Value 2' labelHidden type='text' defaultValue='Sample value 2' readOnly={args.readOnly} disabled={args.disabled}/>
+        </Flex>
+      </Flex>
+    </Flex>);
+    return args.popoverContent === 'advanced' ? ConditionBuilder : Inputs;
+};
+const ObjectSelectComp = ({ popoverContent, ...args }) => {
+    const t = useI18n();
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const [drawerData, setDrawerData] = useState(dataPages[0]);
+    const [value, setValue] = useState(args.value);
+    const convertRhsTypes = (useLiteralRHSType, useFieldRHSType, useRelativeDatesType, dateFunctions) => {
+        const setRhsTypes = new Set();
+        if (useLiteralRHSType)
+            setRhsTypes.add('LITERAL');
+        if (useFieldRHSType)
+            setRhsTypes.add('FIELD');
+        if (dateFunctions)
+            setRhsTypes.add('DATE_FUNCTION');
+        if (useRelativeDatesType)
+            setRhsTypes.add('RELATIVE_DATE');
+        return setRhsTypes;
+    };
+    const validRHSTypes = convertRhsTypes(true, true, true, demoDateFunctions);
+    const [submitCondition, setSubmitCondition] = useState(undefined);
+    const [condition, setCondition] = useState(() => submitCondition ||
+        getInitConditionForLhs({ field: 'age' }, demoFields, validRHSTypes, undefined, demoDateFunctions));
+    const handleSubmission = () => {
+        setSubmitCondition(condition);
+    };
+    return (<Flex container={{ direction: 'column', gap: 1 }}>
+      <ObjectSelect {...args} onChange={id => {
+            const data = menuHelpers.getItem(dataPages, id);
+            if (data) {
+                setValue({
+                    id: data.id,
+                    primary: data.primary,
+                    href: data.href ?? '#',
+                    meta: data.id !== '01-4' ? data.secondary?.join('  ') : ''
+                });
+            }
+            else
+                setValue(undefined);
+        }} items={dataPages} configuration={{
+            label: args.disabled || args.readOnly ? 'View Configuration' : 'Edit Configuration',
+            heading: 'Map Parameters',
+            primaryAction: {
+                id: 'submit',
+                text: 'Submit',
+                onClick: popoverContent === 'advanced' ? handleSubmission : args.onSubmit
+            },
+            secondaryAction: {
+                id: 'cancel',
+                text: 'Cancel',
+                onClick: args.onCancel
+            },
+            content: (<ConfigurationContent {...args} popoverContent={popoverContent} condition={condition} setCondition={setCondition} validRHSTypes={validRHSTypes}/>)
+        }} value={value} onPreview={(id, e) => {
+            const data = menuHelpers.getItem(dataPages, id);
+            if (data)
+                setDrawerData(data);
+            setDrawerOpen(true);
+            args.onPreview?.(id, e);
+        }}/>
+      <ViewportDrawer drawerData={drawerData} drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen}/>
+      {popoverContent === 'advanced' && (<Card>
+          <CardContent>
+            <Text variant='h4'>Output:</Text>
+            <StyledCodeBlock>
+              {submitCondition ? JSON.stringify(submitCondition, null, 2) : '(No condition)'}
+            </StyledCodeBlock>
+            <Text variant='h4'>Formatted Output:</Text>
+            <StyledCodeBlock>
+              {submitCondition
+                ? formatCondition({ condition: submitCondition }, demoFields, t)
+                : '(No condition)'}
+            </StyledCodeBlock>
+          </CardContent>
+        </Card>)}
+    </Flex>);
+};
+export const ObjectSelectDemo = ({ popoverContent, ...args }) => {
+    return <ObjectSelectComp {...args} popoverContent={popoverContent}/>;
+};
+ObjectSelectDemo.args = {
+    label: 'Data source',
+    labelHidden: false,
+    info: 'Select an appropriate data source',
+    placeholder: '',
+    status: undefined,
+    required: false,
+    disabled: false,
+    readOnly: false,
+    popoverContent: 'simple',
+    onPreview: () => { },
+    onSubmit: action('Clicked submit button'),
+    onCancel: action('Clicked cancel button')
+};
+ObjectSelectDemo.argTypes = {
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    info: { control: { type: 'text' } },
+    placeholder: { control: { type: 'text' } },
+    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    readOnly: { control: { type: 'boolean' } },
+    popoverContent: { options: ['simple', 'advanced'], control: { type: 'radio' } },
+    onPreview: { table: { disable: true } },
+    onSubmit: { table: { disable: true } },
+    onCancel: { table: { disable: true } }
+};
+const initFields = () => {
+    const common = { value: undefined, status: undefined };
+    return [
+        {
+            ...common,
+            name: 'name',
+            required: true,
+            error: 'Please enter a valid name for table',
+            validator() {
+                if (!this.value)
+                    return false;
+                return /^[a-z]{1}[a-z0-9]+$/i.test(this.value);
+            }
+        },
+        {
+            ...common,
+            name: 'description',
+            required: true,
+            help: 'Give an appropriate description for the table',
+            error: 'Field cannot be empty',
+            validator() {
+                if (!this.value)
+                    return false;
+                return true;
+            }
+        }
+    ];
+};
+const fieldReducer = (fields, { target, type }) => {
+    return fields.map(field => {
+        if (field.name === target.name) {
+            field.value = target.value;
+            if (type === 'blur' || field.status === 'error') {
+                if ((field.required || field.value) && !field.validator()) {
+                    field.status = 'error';
+                    field.info = field.error;
+                }
+                else {
+                    field.status = undefined;
+                    field.info = field.help;
+                }
+            }
+        }
+        return field;
+    });
+};
+export const ObjectSelectDemoInForm = () => {
+    const [fields, setField] = useReducer(fieldReducer, undefined, initFields);
+    const { push } = useContext(ToasterContext);
+    const name = fields.find(field => field.name === 'name');
+    const description = fields.find(field => field.name === 'description');
+    if (!name || !description)
+        return null;
+    const canSubmit = fields.every(field => field.value && field.validator());
+    const actions = (<>
+      <Button name='Cancel' variant='secondary' onClick={() => {
+            push({ content: 'Form cancelled!' });
+        }}>
+        Cancel
+      </Button>
+      <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>
+        Submit
+      </Button>
+    </>);
+    return (<Card style={{ margin: 'auto', maxWidth: '37.5rem' }}>
+      <CardContent>
+        <Form actions={actions} onSubmit={(e) => {
+            e.preventDefault();
+            push({ content: 'Form submitted!' });
+        }} heading='Configure Table'>
+          <Flex container={{ direction: 'column', gap: 2 }} item={{ grow: 1 }}>
+            <Input name='name' label='Table name' value={name.value} required={name.required} status={name.status} info='Enter a valid table name' onChange={(e) => setField({ ...e })} onBlur={(e) => setField({ ...e })} autoComplete='off'/>
+            <TextArea name='description' required={description.required} label='Table description' status={description.status} info={description.info || description.help} onChange={(e) => setField({ ...e })} onBlur={(e) => setField({ ...e })}/>
+            <ObjectSelectComp label='Data page' info='Select an appropriate data page' items={[]} onChange={() => { }}/>
+            <ObjectSelectComp label='Visibility condition' info='Choose a when condition from list' items={[]} onChange={() => { }}/>
+          </Flex>
+        </Form>
+      </CardContent>
+    </Card>);
+};
+//# sourceMappingURL=ObjectSelect.stories.jsx.map