@pega/cosmos-react-demos 2.0.0

package/lib/work/Stakeholders/Stakeholders.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stakeholders.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Stakeholders/Stakeholders.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAgB,iBAAiB,EAAqB,MAAM,yBAAyB,CAAC;;;;;AAG7F,wBAGE;AA8EF,eAAO,MAAM,gBAAgB,mBA8H5B,CAAC"}

package/lib/work/Stakeholders/Stakeholders.stories.jsx

@@ -0,0 +1,118 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { Input, Grid, FieldGroup, createStringMatcher } from '@pega/cosmos-react-core';
+import { Stakeholders } from '@pega/cosmos-react-work';
+import { useMockListData } from '@pega/cosmos-react-demos/lib/core/SummaryList/SummaryList.mocks';
+export default {
+    title: 'Work/Stakeholders',
+    component: Stakeholders
+};
+const mockNetworkReq = () => new Promise(resolve => setTimeout(resolve, 2000));
+const count = Math.floor(Math.random() * 50) + 1;
+const mockRoles = Array.from({ length: 3 }, (_, i) => ({
+    name: `Role-${i + 1}`,
+    description: `This is a description of Role-${i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet dolor a mauris imperdiet convallis.`
+}));
+const AddAndEditForm = ({ selectedRoleName, firstName, lastName, email }) => {
+    const inputs = (<Grid container={{ cols: '1fr', gap: 2 }}>
+      <Input label='First name' required defaultValue={firstName}/>
+      <Input label='Last name' required defaultValue={lastName}/>
+      <Input type='email' label='Email' required defaultValue={email}/>
+      <Input label='Job title' defaultValue={firstName ? 'Vice president' : undefined}/>
+    </Grid>);
+    return selectedRoleName ? (<FieldGroup name={`Fields for: ${selectedRoleName}`}>{inputs}</FieldGroup>) : (inputs);
+};
+const useMockStakeholders = (cb) => {
+    const [mockStakeholders, setMockStakeholders] = useState([]);
+    const [mockListData] = useMockListData(() => {
+        setMockStakeholders(mockListData);
+        cb();
+    }, { count });
+    return [
+        mockStakeholders.map(stakeholder => {
+            return { ...stakeholder, role: stakeholder.role ?? mockRoles[0] };
+        }),
+        setMockStakeholders
+    ];
+};
+export const StakeHoldersDemo = () => {
+    const [loading, setLoading] = useState(true);
+    const [mode, setMode] = useState();
+    const [editing, setEditing] = useState(null);
+    const [formLoading, setFormLoading] = useState(false);
+    const [viewAllLoading, setViewAllLoading] = useState(false);
+    const [viewAllSearchValue, setViewAllSearchValue] = useState('');
+    const [mockStakeholders, setMockStakeholders] = useMockStakeholders(() => {
+        setLoading(false);
+    });
+    const [editData, setEditData] = useState();
+    const addActions = useCallback((items) => {
+        return items.map(stakeholder => {
+            return {
+                ...stakeholder,
+                onEdit: () => {
+                    setFormLoading(true);
+                    setEditing(stakeholder.id);
+                    setEditData(mockStakeholders.find(ms => ms.id === stakeholder.id)?.data);
+                    mockNetworkReq().then(() => setFormLoading(false));
+                },
+                onRemove: () => {
+                    setMockStakeholders(cur => cur.filter(({ id }) => id !== stakeholder.id));
+                }
+            };
+        });
+    }, [mockStakeholders]);
+    const form = useMemo(() => {
+        return {
+            loading: formLoading,
+            roles: mode === 'add' ? mockRoles : undefined,
+            currentRole: editing ? mockStakeholders.find(({ id }) => id === editing)?.role : undefined,
+            renderer: AddAndEditForm,
+            rendererProps: editData,
+            onSubmit: ({ selectedRoleName, closeForm }) => {
+                setFormLoading(true);
+                action(`The selected role is: ${selectedRoleName}`);
+                mockNetworkReq().then(closeForm);
+            },
+            onDismiss: ({ closeForm }) => {
+                closeForm();
+            },
+            onAfterClose: () => {
+                setFormLoading(false);
+                setEditing(null);
+                setEditData(undefined);
+                setMode(undefined);
+            }
+        };
+    }, [mode, formLoading, mockRoles, editing, editData]);
+    const viewAll = useMemo(() => {
+        let viewAllItems = mockStakeholders;
+        if (viewAllSearchValue) {
+            const filterRegex = createStringMatcher(viewAllSearchValue, 'boundary');
+            viewAllItems = mockStakeholders.filter(({ primary }) => filterRegex.test(primary));
+        }
+        return {
+            loading: viewAllLoading,
+            items: addActions(viewAllItems),
+            onSearch: setViewAllSearchValue,
+            onAfterClose: () => {
+                if (viewAllLoading)
+                    setViewAllLoading(false);
+            }
+        };
+    }, [viewAllLoading, mockStakeholders, viewAllSearchValue, addActions]);
+    useEffect(() => {
+    }, [mode]);
+    useEffect(() => {
+    }, [editing]);
+    return (<Stakeholders loading={loading} items={useMemo(() => addActions(mockStakeholders.slice(0, 3)), [addActions, mockStakeholders])} count={loading ? undefined : mockStakeholders.length} onAddNew={() => {
+            setMode('add');
+            setFormLoading(true);
+            mockNetworkReq().then(() => setFormLoading(false));
+        }} form={form} onViewAll={() => {
+            setMode('viewAll');
+            setViewAllLoading(true);
+            mockNetworkReq().then(() => setViewAllLoading(false));
+        }} viewAll={viewAll}/>);
+};
+//# sourceMappingURL=Stakeholders.stories.jsx.map

package/lib/work/Stakeholders/Stakeholders.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stakeholders.stories.jsx","sourceRoot":"","sources":["../../../src/work/Stakeholders/Stakeholders.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Dispatch, SetStateAction, useCallback, useEffect, useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport { Input, Grid, FieldGroup, createStringMatcher } from '@pega/cosmos-react-core';\nimport { Stakeholders, StakeholdersProps, Role, Stakeholder } from '@pega/cosmos-react-work';\nimport { useMockListData } from '@pega/cosmos-react-demos/lib/core/SummaryList/SummaryList.mocks';\n\nexport default {\n  title: 'Work/Stakeholders',\n  component: Stakeholders\n};\n\ninterface MockStakeholderObject extends Stakeholder {\n  role?: Role;\n  data?: StakeholdersProps['form']['rendererProps'];\n}\n\nconst 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.\nconst 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 */\nconst 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\nconst 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\nexport const StakeHoldersDemo = () => {\n  const [loading, setLoading] = useState(true);\n  const [mode, setMode] = useState<undefined | 'add' | 'viewAll'>();\n  const [editing, setEditing] = useState<Stakeholder['id'] | null>(null);\n  const [formLoading, setFormLoading] = useState(false);\n  const [viewAllLoading, setViewAllLoading] = useState(false);\n  const [viewAllSearchValue, setViewAllSearchValue] = useState('');\n\n  // Grab some mock data...\n  const [mockStakeholders, setMockStakeholders] = useMockStakeholders(() => {\n    setLoading(false);\n  });\n\n  const [editData, setEditData] = useState<\n    StakeholdersProps['form']['rendererProps'] | undefined\n  >();\n\n  // Merges built-in available actions with stakeholder objects.\n  const addActions = useCallback(\n    (items: Stakeholder[]) => {\n      return items.map(stakeholder => {\n        return {\n          ...stakeholder,\n          onEdit: () => {\n            setFormLoading(true);\n            setEditing(stakeholder.id);\n            setEditData(mockStakeholders.find(ms => ms.id === stakeholder.id)?.data);\n            mockNetworkReq().then(() => setFormLoading(false));\n          },\n          onRemove: () => {\n            setMockStakeholders(cur => cur.filter(({ id }) => id !== stakeholder.id));\n          }\n        };\n      });\n    },\n    [mockStakeholders]\n  );\n\n  const form: StakeholdersProps['form'] = useMemo(() => {\n    return {\n      // Set this to true when fetching view metadata for the form or during submit validation.\n      loading: formLoading,\n      // Represents \"available\" roles for a stakeholder. Set to undefined when choosing not to present them as options.\n      roles: mode === 'add' ? mockRoles : undefined,\n      // Represents the current role of a stakeholder if they have one. When undefined the first role in the roles array with be selected in the UI.\n      currentRole: editing ? mockStakeholders.find(({ id }) => id === editing)?.role : undefined,\n      /**\n       * A function that will be invoked by React's createElement. If only a simple function is needed then an inline arrow is ok.\n       * If local state(hooks) is desired best to define a stable component definition outside of the parent component's function body.\n       */\n      renderer: AddAndEditForm,\n      rendererProps: editData,\n      onSubmit: ({ selectedRoleName, closeForm }) => {\n        setFormLoading(true);\n        action(`The selected role is: ${selectedRoleName}`);\n        // Create or update the stakeholder resource.\n        mockNetworkReq().then(closeForm);\n      },\n      onDismiss: ({ closeForm }) => {\n        closeForm();\n      },\n      onAfterClose: () => {\n        // Clean up loading state when the form is closed.\n        setFormLoading(false);\n        setEditing(null);\n        setEditData(undefined);\n        setMode(undefined);\n      }\n    };\n  }, [mode, formLoading, mockRoles, editing, editData]);\n\n  const viewAll: StakeholdersProps['viewAll'] = useMemo(() => {\n    let viewAllItems = mockStakeholders;\n\n    // When the user has entered a search value we can filter the array or api request.\n    if (viewAllSearchValue) {\n      // For client side searches cosmos offers utils such as createStringMatcher for creating RegExp with params.\n      const filterRegex = createStringMatcher(viewAllSearchValue, 'boundary');\n      // Asserting as string since, in this demo, primary is a string. But type is a non nullable ReactNode.\n      viewAllItems = mockStakeholders.filter(({ primary }) => filterRegex.test(primary as string));\n    }\n\n    return {\n      // Set this to true when fetching data for the view all modal.\n      loading: viewAllLoading,\n      // Even when loading is true this must be an array, empty or not.\n      items: addActions(viewAllItems),\n      // The search string will be handed back as the arg, pass a state setter and filter off of that.\n      onSearch: setViewAllSearchValue,\n      onAfterClose: () => {\n        // Clean up loading state when the modal is closed.\n        if (viewAllLoading) setViewAllLoading(false);\n      }\n    };\n  }, [viewAllLoading, mockStakeholders, viewAllSearchValue, addActions]);\n\n  useEffect(() => {\n    // Orchestrate based on mode state if needed.\n  }, [mode]);\n\n  useEffect(() => {\n    // Orchestrate based on editing state if needed.\n  }, [editing]);\n\n  return (\n    <Stakeholders\n      loading={loading}\n      items={useMemo(\n        () => addActions(mockStakeholders.slice(0, 3)),\n        [addActions, mockStakeholders]\n      )}\n      count={loading ? undefined : mockStakeholders.length}\n      onAddNew={() => {\n        setMode('add');\n        setFormLoading(true);\n        mockNetworkReq().then(() => setFormLoading(false));\n      }}\n      form={form}\n      onViewAll={() => {\n        setMode('viewAll');\n        setViewAllLoading(true);\n        mockNetworkReq().then(() => setViewAllLoading(false));\n      }}\n      viewAll={viewAll}\n    />\n  );\n};\n"]}

package/lib/work/Tags/Tags.mocks.d.ts

@@ -0,0 +1,3 @@
+export declare const getMockAvailableTags: () => string[];
+export declare const addNewMockTag: (tag: string) => void;
+//# sourceMappingURL=Tags.mocks.d.ts.map

package/lib/work/Tags/Tags.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tags.mocks.d.ts","sourceRoot":"","sources":["../../../src/work/Tags/Tags.mocks.ts"],"names":[],"mappings":"AAqEA,eAAO,MAAM,oBAAoB,gBAEhC,CAAC;AAEF,eAAO,MAAM,aAAa,QAAS,MAAM,SAGxC,CAAC"}

package/lib/work/Tags/Tags.mocks.js

@@ -0,0 +1,76 @@
+const tags = [
+    'afternoon',
+    'airplane',
+    'animal',
+    'balloon',
+    'beach',
+    'birthday',
+    'bread',
+    'cabin',
+    'camp',
+    'color',
+    'desert',
+    'dishes',
+    'dragon',
+    'earth',
+    'family',
+    'fishing',
+    'forest',
+    'grandparent',
+    'hair',
+    'heat',
+    'hour',
+    'island',
+    'igloo',
+    'joker',
+    'kitten',
+    'kite',
+    'lady',
+    'life',
+    'lunch',
+    'mail',
+    'merry',
+    'mouse',
+    'music',
+    'news',
+    'noise',
+    'number',
+    'orange',
+    'owl',
+    'paint',
+    'penny',
+    'person',
+    'plane',
+    'pocket',
+    'queen',
+    'ready',
+    'river',
+    'run',
+    'salt',
+    'sending',
+    'sit',
+    'song',
+    'space',
+    'stick',
+    'table',
+    'teeth',
+    'tonight',
+    'turn',
+    'under',
+    'violin',
+    'wagon',
+    'weather',
+    'window',
+    'world',
+    'xylophone',
+    'yard',
+    'zebra'
+];
+export const getMockAvailableTags = () => {
+    return tags;
+};
+export const addNewMockTag = (tag) => {
+    tags.push(tag);
+    tags.sort();
+};
+//# sourceMappingURL=Tags.mocks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tags.mocks.js","sourceRoot":"","sources":["../../../src/work/Tags/Tags.mocks.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG;IACX,WAAW;IACX,UAAU;IACV,QAAQ;IACR,SAAS;IACT,OAAO;IACP,UAAU;IACV,OAAO;IACP,OAAO;IACP,MAAM;IACN,OAAO;IACP,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,SAAS;IACT,QAAQ;IACR,aAAa;IACb,MAAM;IACN,MAAM;IACN,MAAM;IACN,QAAQ;IACR,OAAO;IACP,OAAO;IACP,QAAQ;IACR,MAAM;IACN,MAAM;IACN,MAAM;IACN,OAAO;IACP,MAAM;IACN,OAAO;IACP,OAAO;IACP,OAAO;IACP,MAAM;IACN,OAAO;IACP,QAAQ;IACR,QAAQ;IACR,KAAK;IACL,OAAO;IACP,OAAO;IACP,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,OAAO;IACP,OAAO;IACP,OAAO;IACP,KAAK;IACL,MAAM;IACN,SAAS;IACT,KAAK;IACL,MAAM;IACN,OAAO;IACP,OAAO;IACP,OAAO;IACP,OAAO;IACP,SAAS;IACT,MAAM;IACN,OAAO;IACP,QAAQ;IACR,OAAO;IACP,SAAS;IACT,QAAQ;IACR,OAAO;IACP,WAAW;IACX,MAAM;IACN,OAAO;CACR,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACvC,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,EAAE;IAC3C,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;AACd,CAAC,CAAC","sourcesContent":["const tags = [\n  'afternoon',\n  'airplane',\n  'animal',\n  'balloon',\n  'beach',\n  'birthday',\n  'bread',\n  'cabin',\n  'camp',\n  'color',\n  'desert',\n  'dishes',\n  'dragon',\n  'earth',\n  'family',\n  'fishing',\n  'forest',\n  'grandparent',\n  'hair',\n  'heat',\n  'hour',\n  'island',\n  'igloo',\n  'joker',\n  'kitten',\n  'kite',\n  'lady',\n  'life',\n  'lunch',\n  'mail',\n  'merry',\n  'mouse',\n  'music',\n  'news',\n  'noise',\n  'number',\n  'orange',\n  'owl',\n  'paint',\n  'penny',\n  'person',\n  'plane',\n  'pocket',\n  'queen',\n  'ready',\n  'river',\n  'run',\n  'salt',\n  'sending',\n  'sit',\n  'song',\n  'space',\n  'stick',\n  'table',\n  'teeth',\n  'tonight',\n  'turn',\n  'under',\n  'violin',\n  'wagon',\n  'weather',\n  'window',\n  'world',\n  'xylophone',\n  'yard',\n  'zebra'\n];\n\nexport const getMockAvailableTags = () => {\n  return tags;\n};\n\nexport const addNewMockTag = (tag: string) => {\n  tags.push(tag);\n  tags.sort();\n};\n"]}

package/lib/work/Tags/Tags.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface TagsStoryProps {
+    error?: string;
+    displayRetry?: boolean;
+    editError?: string;
+}
+export declare const TagsDemo: Story<TagsStoryProps>;
+//# sourceMappingURL=Tags.stories.d.ts.map

package/lib/work/Tags/Tags.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tags.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Tags/Tags.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAO/C,wBAGU;AAEV,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,cAAc,CAwD1C,CAAC"}

package/lib/work/Tags/Tags.stories.jsx

@@ -0,0 +1,61 @@
+import { useEffect, useState } from 'react';
+import { Tags } from '@pega/cosmos-react-work';
+import { addNewMockTag, getMockAvailableTags } from './Tags.mocks';
+export default {
+    title: 'Work/Tags',
+    component: Tags
+};
+export const TagsDemo = (args) => {
+    const [loading, setLoading] = useState(true);
+    const [availableTags, setAvailableTags] = useState();
+    const [filterValue, setFilterValue] = useState('');
+    const [tags, setTags] = useState([
+        'Pega',
+        'Cosmos',
+        'Design_system',
+        'animal',
+        'bread',
+        'hour',
+        'music',
+        'paint',
+        'space',
+        'weather'
+    ]);
+    useEffect(() => {
+        const allTags = getMockAvailableTags();
+        setAvailableTags(filterValue ? allTags?.filter(tag => tag.startsWith(filterValue)) : []);
+    }, [filterValue]);
+    useEffect(() => {
+        setTimeout(() => {
+            setLoading(false);
+        }, 1000);
+    }, []);
+    const handleEditTags = (selectedTags) => {
+        return new Promise((resolve, reject) => {
+            if (args.editError) {
+                reject(new Error(args.editError));
+            }
+            else {
+                setTags(selectedTags.map(tag => {
+                    if (tag.newTag) {
+                        addNewMockTag(tag.text);
+                    }
+                    return tag.text;
+                }));
+                resolve();
+            }
+        });
+    };
+    return (<Tags tags={tags} availableTags={availableTags} loading={loading} error={args.displayRetry ? { message: args.error, onRetry: () => { } } : args.error} onSearch={(query) => setFilterValue(query)} onEditTags={handleEditTags}/>);
+};
+TagsDemo.args = {
+    error: '',
+    displayRetry: false,
+    editError: ''
+};
+TagsDemo.argTypes = {
+    error: { control: { type: 'text' } },
+    displayRetry: { control: { type: 'boolean' } },
+    editError: { control: { type: 'text' } }
+};
+//# sourceMappingURL=Tags.stories.jsx.map

package/lib/work/Tags/Tags.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tags.stories.jsx","sourceRoot":"","sources":["../../../src/work/Tags/Tags.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport { Tags, SelectedTag, TagsProps } from '@pega/cosmos-react-work';\n\nimport { addNewMockTag, getMockAvailableTags } from './Tags.mocks';\n\nexport default {\n  title: 'Work/Tags',\n  component: Tags\n} as Meta;\n\ninterface TagsStoryProps {\n  error?: string;\n  displayRetry?: boolean;\n  editError?: string;\n}\n\nexport const TagsDemo: Story<TagsStoryProps> = (args: TagsStoryProps) => {\n  const [loading, setLoading] = useState(true);\n  const [availableTags, setAvailableTags] = useState<TagsProps['availableTags']>();\n  const [filterValue, setFilterValue] = useState('');\n  const [tags, setTags] = useState<TagsProps['tags']>([\n    'Pega',\n    'Cosmos',\n    'Design_system',\n    'animal',\n    'bread',\n    'hour',\n    'music',\n    'paint',\n    'space',\n    'weather'\n  ]);\n\n  useEffect(() => {\n    const allTags = getMockAvailableTags();\n    setAvailableTags(filterValue ? allTags?.filter(tag => tag.startsWith(filterValue)) : []);\n  }, [filterValue]);\n\n  useEffect(() => {\n    setTimeout(() => {\n      setLoading(false);\n    }, 1000);\n  }, []);\n\n  const handleEditTags = (selectedTags: SelectedTag[]) => {\n    return new Promise<void>((resolve, reject) => {\n      if (args.editError) {\n        reject(new Error(args.editError));\n      } else {\n        setTags(\n          selectedTags.map(tag => {\n            if (tag.newTag) {\n              addNewMockTag(tag.text);\n            }\n            return tag.text;\n          })\n        );\n        resolve();\n      }\n    });\n  };\n\n  return (\n    <Tags\n      tags={tags}\n      availableTags={availableTags}\n      loading={loading}\n      error={args.displayRetry ? { message: args.error, onRetry: () => {} } : args.error}\n      onSearch={(query: string) => setFilterValue(query)}\n      onEditTags={handleEditTags}\n    />\n  );\n};\n\nTagsDemo.args = {\n  error: '',\n  displayRetry: false,\n  editError: ''\n};\n\nTagsDemo.argTypes = {\n  error: { control: { type: 'text' } },\n  displayRetry: { control: { type: 'boolean' } },\n  editError: { control: { type: 'text' } }\n};\n"]}

package/lib/work/Tasks/TaskList.stories.d.ts

@@ -0,0 +1,5 @@
+import { Story, Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const TaskListDemo: Story;
+//# sourceMappingURL=TaskList.stories.d.ts.map

package/lib/work/Tasks/TaskList.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskList.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Tasks/TaskList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAK/C,wBAGU;AAEV,eAAO,MAAM,YAAY,EAAE,KAU1B,CAAC"}

package/lib/work/Tasks/TaskList.stories.jsx

@@ -0,0 +1,17 @@
+import { MetaList, Avatar } from '@pega/cosmos-react-core';
+import { TaskList } from '@pega/cosmos-react-work';
+export default {
+    title: 'Work/TaskList',
+    component: TaskList
+};
+export const TaskListDemo = () => {
+    const items = [
+        {
+            name: 'Send references',
+            meta: <MetaList items={[' Due in 1d', 'Priority 95']}/>,
+            avatar: <Avatar name='James Gregory'/>
+        }
+    ];
+    return <TaskList items={items}/>;
+};
+//# sourceMappingURL=TaskList.stories.jsx.map

package/lib/work/Tasks/TaskList.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskList.stories.jsx","sourceRoot":"","sources":["../../../src/work/Tasks/TaskList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAiB,MAAM,yBAAyB,CAAC;AAElE,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;CACZ,CAAC;AAEV,MAAM,CAAC,MAAM,YAAY,GAAU,GAAG,EAAE;IACtC,MAAM,KAAK,GAAoB;QAC7B;YACE,IAAI,EAAE,iBAAiB;YACvB,IAAI,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,EAAG;YACxD,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,EAAG;SACxC;KACF,CAAC;IAEF,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAG,CAAC;AACpC,CAAC,CAAC","sourcesContent":["import { Story, Meta } from '@storybook/react';\n\nimport { MetaList, Avatar } from '@pega/cosmos-react-core';\nimport { TaskList, TaskItemProps } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/TaskList',\n  component: TaskList\n} as Meta;\n\nexport const TaskListDemo: Story = () => {\n  const items: TaskItemProps[] = [\n    {\n      name: 'Send references',\n      meta: <MetaList items={[' Due in 1d', 'Priority 95']} />,\n      avatar: <Avatar name='James Gregory' />\n    }\n  ];\n\n  return <TaskList items={items} />;\n};\n"]}

package/lib/work/Tasks/Tasks.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, Story } from '@storybook/react';
+import { TasksProps } from '@pega/cosmos-react-work';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface TasksStoryProps {
+    headerText?: TasksProps['headerText'];
+}
+export declare const TasksDemo: Story<TasksStoryProps>;
+//# sourceMappingURL=Tasks.stories.d.ts.map

package/lib/work/Tasks/Tasks.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tasks.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Tasks/Tasks.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AA0B/C,OAAO,EAAS,UAAU,EAAiB,MAAM,yBAAyB,CAAC;;AAE3E,wBAGU;AAEV,UAAU,eAAe;IACvB,UAAU,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;CACvC;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,eAAe,CAwI5C,CAAC"}

package/lib/work/Tasks/Tasks.stories.jsx

@@ -0,0 +1,101 @@
+import { useMemo, useState } from 'react';
+import { Avatar, Button, MenuButton, MetaList, Text, Form, Input, TextArea, RadioCheckGroup, RadioButton, Checkbox, DateInput, NumberInput, FileInput, menuHelpers, Status, Link, DateTimeDisplay, EmptyState } from '@pega/cosmos-react-core';
+import { Tasks } from '@pega/cosmos-react-work';
+export default {
+    title: 'Work/Tasks',
+    component: Tasks
+};
+export const TasksDemo = (args) => {
+    const [isLimited, setIsLimited] = useState(true);
+    const [hasOpenTask, setHasOpenTask] = useState(false);
+    const DemoTaskForm = ({ onSubmit, onCancel }) => {
+        return (<Form actions={<>
+            <Button onClick={onCancel}>Cancel</Button>
+            <Button variant='primary' onClick={onSubmit}>
+              Submit
+            </Button>
+          </>}>
+        <Input label='Text field 1' required/>
+        <Input label='Text field 2'/>
+        <NumberInput label='Number field'/>
+        <Checkbox label='Boolean field' required/>
+        <RadioCheckGroup label='Picklist options' name='picklist-1'>
+          <RadioButton label='option 1' defaultChecked/>
+          <RadioButton label='option 2'/>
+          <RadioButton label='option 3'/>
+        </RadioCheckGroup>
+        <TextArea label='Text paragraph field' required/>
+        <FileInput label='File field'/>
+        <DateInput label='Datetime field'/>
+      </Form>);
+    };
+    const [workGroups, setWorkGroups] = useState(() => {
+        return Array.from({ length: 10 }, (_, i) => {
+            return {
+                id: `${i + 1}`,
+                primary: `Workgroup ${i + 1}`,
+                count: Math.floor(Math.random() * 10),
+                selected: i === 0,
+                visual: <Avatar size='l' name={`Team ${i + 1}`}/>
+            };
+        });
+    });
+    const activeGroup = useMemo(() => menuHelpers.getSelected(workGroups)[0], [workGroups]);
+    const activeGroupTaskCount = activeGroup?.count ?? 0;
+    const groupSelection = useMemo(() => {
+        return (<MenuButton variant='text' text={activeGroup.primary} menu={{
+                mode: 'single-select',
+                items: workGroups,
+                onItemClick: id => {
+                    setWorkGroups(currentWorkGroups => {
+                        return menuHelpers.mapTree(currentWorkGroups, group => {
+                            if (id === group.id || group.selected) {
+                                return { ...group, selected: id === group.id };
+                            }
+                            return group;
+                        });
+                    });
+                }
+            }}/>);
+    }, [activeGroup.primary]);
+    const taskArray = useMemo(() => Array.from({ length: isLimited ? Math.min(3, activeGroupTaskCount) : activeGroupTaskCount }, (_, i) => {
+        const dueIn = 86400000 * i;
+        let status = 'info';
+        if (i === 0) {
+            status = 'urgent';
+        }
+        else if (i === 1) {
+            status = 'warn';
+        }
+        return {
+            name: `Task ${i + 1}`,
+            meta: (<MetaList items={[
+                    <Status variant={status}>{status}</Status>,
+                    <Text variant='secondary'>
+                    Due <DateTimeDisplay variant='relative' value={Date.now() + dueIn}/>
+                  </Text>,
+                    <Link href='#demo'>Parent case link</Link>
+                ]}/>),
+            actions: (<Button onClick={() => {
+                    setHasOpenTask(true);
+                }}>
+                Go
+              </Button>),
+            content: hasOpenTask ? (<DemoTaskForm onSubmit={() => {
+                    setHasOpenTask(false);
+                }} onCancel={() => {
+                    setHasOpenTask(false);
+                }}/>) : null
+        };
+    }), [isLimited, activeGroup, hasOpenTask]);
+    return (<Tasks headerText={args.headerText || 'Tasks'} count={activeGroupTaskCount} items={taskArray} headerVisual={activeGroup ? <Avatar size='l' name={activeGroup.primary}/> : undefined} headerSecondary={groupSelection} emptyPlaceholder={<EmptyState />} onExpandToggle={() => {
+            setIsLimited(cur => !cur);
+        }}/>);
+};
+TasksDemo.args = {
+    headerText: 'Tasks'
+};
+TasksDemo.argTypes = {
+    headerText: { control: { type: 'text' } }
+};
+//# sourceMappingURL=Tasks.stories.jsx.map

package/lib/work/Tasks/Tasks.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tasks.stories.jsx","sourceRoot":"","sources":["../../../src/work/Tasks/Tasks.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\n\nimport {\n  Avatar,\n  Button,\n  MenuButton,\n  MenuProps,\n  MetaList,\n  Text,\n  Form,\n  Input,\n  TextArea,\n  RadioCheckGroup,\n  RadioButton,\n  Checkbox,\n  DateInput,\n  NumberInput,\n  FileInput,\n  menuHelpers,\n  Status,\n  Link,\n  DateTimeDisplay,\n  StatusProps,\n  EmptyState\n} from '@pega/cosmos-react-core';\nimport { Tasks, TasksProps, TaskItemProps } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Tasks',\n  component: Tasks\n} as Meta;\n\ninterface TasksStoryProps {\n  headerText?: TasksProps['headerText'];\n}\n\nexport const TasksDemo: Story<TasksStoryProps> = (args: TasksStoryProps) => {\n  const [isLimited, setIsLimited] = useState(true);\n  const [hasOpenTask, setHasOpenTask] = useState(false);\n\n  const DemoTaskForm = ({ onSubmit, onCancel }: { onSubmit: () => void; onCancel: () => void }) => {\n    return (\n      <Form\n        actions={\n          <>\n            <Button onClick={onCancel}>Cancel</Button>\n            <Button variant='primary' onClick={onSubmit}>\n              Submit\n            </Button>\n          </>\n        }\n      >\n        <Input label='Text field 1' required />\n        <Input label='Text field 2' />\n        <NumberInput label='Number field' />\n        <Checkbox label='Boolean field' required />\n        <RadioCheckGroup label='Picklist options' name='picklist-1'>\n          <RadioButton label='option 1' defaultChecked />\n          <RadioButton label='option 2' />\n          <RadioButton label='option 3' />\n        </RadioCheckGroup>\n        <TextArea label='Text paragraph field' required />\n        <FileInput label='File field' />\n        <DateInput label='Datetime field' />\n      </Form>\n    );\n  };\n\n  const [workGroups, setWorkGroups] = useState<MenuProps['items']>(() => {\n    return Array.from({ length: 10 }, (_, i) => {\n      return {\n        id: `${i + 1}`,\n        primary: `Workgroup ${i + 1}`,\n        count: Math.floor(Math.random() * 10),\n        selected: i === 0,\n        visual: <Avatar size='l' name={`Team ${i + 1}`} />\n      };\n    });\n  });\n\n  const activeGroup = useMemo(() => menuHelpers.getSelected(workGroups)[0], [workGroups]);\n  const activeGroupTaskCount = activeGroup?.count ?? 0;\n\n  const groupSelection = useMemo(() => {\n    return (\n      <MenuButton\n        variant='text'\n        text={activeGroup.primary}\n        menu={{\n          mode: 'single-select',\n          items: workGroups,\n          onItemClick: id => {\n            setWorkGroups(currentWorkGroups => {\n              return menuHelpers.mapTree(currentWorkGroups, group => {\n                if (id === group.id || group.selected) {\n                  return { ...group, selected: id === group.id };\n                }\n\n                return group;\n              });\n            });\n          }\n        }}\n      />\n    );\n  }, [activeGroup.primary]);\n\n  const taskArray: TaskItemProps[] = useMemo(\n    () =>\n      Array.from(\n        { length: isLimited ? Math.min(3, activeGroupTaskCount) : activeGroupTaskCount },\n        (_, i) => {\n          const dueIn = 86400000 * i;\n          let status: StatusProps['variant'] = 'info';\n\n          if (i === 0) {\n            status = 'urgent';\n          } else if (i === 1) {\n            status = 'warn';\n          }\n\n          return {\n            name: `Task ${i + 1}`,\n            meta: (\n              <MetaList\n                items={[\n                  <Status variant={status}>{status}</Status>,\n                  <Text variant='secondary'>\n                    Due <DateTimeDisplay variant='relative' value={Date.now() + dueIn} />\n                  </Text>,\n                  <Link href='#demo'>Parent case link</Link>\n                ]}\n              />\n            ),\n            actions: (\n              <Button\n                onClick={() => {\n                  setHasOpenTask(true);\n                }}\n              >\n                Go\n              </Button>\n            ),\n            content: hasOpenTask ? (\n              <DemoTaskForm\n                onSubmit={() => {\n                  setHasOpenTask(false);\n                }}\n                onCancel={() => {\n                  setHasOpenTask(false);\n                }}\n              />\n            ) : null\n          };\n        }\n      ),\n    [isLimited, activeGroup, hasOpenTask]\n  );\n\n  return (\n    <Tasks\n      headerText={args.headerText || 'Tasks'}\n      count={activeGroupTaskCount}\n      items={taskArray}\n      headerVisual={activeGroup ? <Avatar size='l' name={activeGroup.primary} /> : undefined}\n      headerSecondary={groupSelection}\n      emptyPlaceholder={<EmptyState />}\n      onExpandToggle={() => {\n        setIsLimited(cur => !cur);\n      }}\n    />\n  );\n};\n\nTasksDemo.args = {\n  headerText: 'Tasks'\n};\n\nTasksDemo.argTypes = {\n  headerText: { control: { type: 'text' } }\n};\n"]}

package/lib/work/Timeline/Timeline.mocks.d.ts

@@ -0,0 +1,3 @@
+import { TimelineProps } from '@pega/cosmos-react-work';
+export declare const activity: TimelineProps['activity'];
+//# sourceMappingURL=Timeline.mocks.d.ts.map

package/lib/work/Timeline/Timeline.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.mocks.d.ts","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.mocks.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,eAAO,MAAM,QAAQ,EAAE,aAAa,CAAC,UAAU,CAwI9C,CAAC"}

package/lib/work/Timeline/Timeline.mocks.jsx

@@ -0,0 +1,129 @@
+import { Link, Text } from '@pega/cosmos-react-core';
+export const activity = [
+    {
+        id: '1',
+        date: Date.UTC(2025, 2, 20, 19, 28, 22),
+        title: 'Email blast: "Buy today"',
+        icon: 'bell-off-solid'
+    },
+    {
+        id: '2',
+        date: Date.UTC(2025, 2, 20, 18, 6, 22),
+        title: 'Confirm eligibility',
+        icon: 'circle-stacked-mixed'
+    },
+    {
+        id: '3',
+        date: Date.UTC(2021, 1, 20, 13, 20, 22),
+        title: 'Sent over request',
+        icon: 'bulb-solid',
+        status: { variant: 'success', children: 'Good' },
+        content: [
+            { id: '31', name: 'Date range', value: <Text>Jan 1, 2021 - May 3, 2021</Text> },
+            {
+                id: '32',
+                name: "What's next",
+                value: (<Text>
+            We will fulfill your request within 3 business days. You will receive your statement
+            copy via mail at 23 Main St. Boston, MA.
+          </Text>)
+            }
+        ]
+    },
+    {
+        id: '4',
+        date: Date.UTC(2021, 1, 20, 13, 19, 22),
+        title: 'Fulfill customer request for last month’s billing statement',
+        icon: 'layers',
+        status: { variant: 'pending', children: 'Wait' },
+        content: [
+            { id: '41', name: 'Date range', value: <Text>Jan 1, 2021 - May 3, 2021</Text> },
+            {
+                id: '42',
+                name: "What's next",
+                value: (<Text>
+            We will fulfill your request within 3 business days. You will receive your statement
+            copy via mail at 23 Main St. Boston, MA.
+          </Text>)
+            }
+        ]
+    },
+    {
+        id: '5',
+        date: Date.UTC(2021, 1, 20, 0, 1, 22),
+        title: (<Link href='https://community.pega.com/support' target='_blank'>
+        Visit Pega support for assistance
+      </Link>)
+    },
+    {
+        id: '6',
+        date: Date.UTC(2021, 1, 19, 13, 20, 22),
+        title: 'Sent over request',
+        icon: 'bulb-solid',
+        status: { variant: 'success', children: 'Good' },
+        content: [
+            { id: '61', name: 'Date range', value: <Text>Jan 1, 2021 - May 3, 2021</Text> },
+            {
+                id: '62',
+                name: "What's next",
+                value: (<Text>
+            We will fulfill your request within 3 business days. You will receive your statement
+            copy via mail at 23 Main St. Boston, MA.
+          </Text>)
+            }
+        ]
+    },
+    {
+        id: '7',
+        date: Date.UTC(2021, 1, 17, 36, 20, 22),
+        title: 'Initial claim received',
+        status: { variant: 'pending', children: 'Wait' }
+    },
+    {
+        id: '8',
+        date: Date.UTC(2020, 2, 20, 19, 28, 22),
+        title: 'Email blast: "Best Offer"',
+        icon: 'bell-off-solid'
+    },
+    {
+        id: '9',
+        date: Date.UTC(2022, 7, 10, 18, 6, 22),
+        title: 'Confirm eligibility',
+        icon: 'circle-stacked-mixed'
+    },
+    {
+        id: '10',
+        date: Date.UTC(2021, 6, 10, 13, 20, 22),
+        title: 'Update plat',
+        icon: 'bulb-solid',
+        status: { variant: 'success', children: 'Good' }
+    },
+    {
+        id: '11',
+        date: Date.UTC(2020, 12, 15, 13, 19, 22),
+        title: 'Balance inquiry',
+        icon: 'phone-solid',
+        status: { variant: 'pending', children: 'Wait' }
+    },
+    {
+        id: '12',
+        date: Date.UTC(2022, 6, 18, 0, 1, 22),
+        title: (<Link href='https://www.pega.com' target='_blank'>
+        Visit Pega
+      </Link>)
+    },
+    {
+        id: '13',
+        date: Date.UTC(2023, 2, 10, 9, 26, 22),
+        title: 'Review customer bill',
+        status: { variant: 'pending', children: 'Wait' }
+    },
+    {
+        id: '14',
+        date: Date.UTC(2020, 1, 12, 10, 25, 48),
+        title: 'Receive customer bill',
+        icon: 'layers',
+        status: { variant: 'success', children: 'Good' }
+    }
+];
+//# sourceMappingURL=Timeline.mocks.jsx.map