@pega/cosmos-react-demos 2.0.0 → 2.1.3

package/jsx/work/SearchResults/SearchResults.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.styles.d.ts","sourceRoot":"","sources":["../../../src/work/SearchResults/SearchResults.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,mBAAmB,yGAE/B,CAAC;AAEF,eAAO,MAAM,WAAW;kBAA+B,MAAM,GAAG,QAAQ;SAWvE,CAAC"}

package/jsx/work/SearchResults/SearchResults.styles.js

@@ -0,0 +1,12 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '@pega/cosmos-react-core';
+export const StyledSearchResults = styled.div `
+  height: 100vh;
+`;
+export const ColoredText = styled.span(({ colorVariant, theme: { base: { palette } } }) => {
+    return css `
+      color: ${palette[colorVariant]};
+    `;
+});
+ColoredText.defaultProps = defaultThemeProp;
+//# sourceMappingURL=SearchResults.styles.js.map

package/jsx/work/SearchResults/SearchResults.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.styles.js","sourceRoot":"","sources":["../../../src/work/SearchResults/SearchResults.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE5C,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CACpC,CAAC,EACC,YAAY,EACZ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;eACC,OAAO,CAAC,YAAY,CAAC;KAC/B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledSearchResults = styled.div`\n  height: 100vh;\n`;\n\nexport const ColoredText = styled.span<{ colorVariant: 'warn' | 'urgent' }>(\n  ({\n    colorVariant,\n    theme: {\n      base: { palette }\n    }\n  }) => {\n    return css`\n      color: ${palette[colorVariant]};\n    `;\n  }\n);\n\nColoredText.defaultProps = defaultThemeProp;\n"]}

package/jsx/work/Stages/Stages.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/react';
+import { StagesProps } from '@pega/cosmos-react-work';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface StagesStoryProps {
+    caseTitle?: StagesProps['caseTitle'];
+    numberOfStages?: number;
+    currentStage?: number;
+}
+export declare const StagesDemo: Story<StagesStoryProps>;
+//# sourceMappingURL=Stages.stories.d.ts.map

package/jsx/work/Stages/Stages.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stages.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Stages/Stages.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAU,WAAW,EAAE,MAAM,yBAAyB,CAAC;;AAE9D,wBAMU;AAEV,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAsD9C,CAAC"}

package/jsx/work/Stakeholders/Stakeholders.mocks.d.ts

@@ -0,0 +1,17 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Role, StakeholdersProps, Stakeholder } from '@pega/cosmos-react-work';
+interface MockStakeholderObject extends Stakeholder {
+    role?: Role;
+    data?: StakeholdersProps['form']['rendererProps'];
+}
+export declare const mockNetworkReq: () => Promise<unknown>;
+export declare const mockRoles: NonNullable<StakeholdersProps['form']>['roles'];
+export declare const AddAndEditForm: ({ selectedRoleName, firstName, lastName, email }: {
+    selectedRoleName?: string | undefined;
+    firstName?: string | undefined;
+    lastName?: string | undefined;
+    email?: string | undefined;
+}) => JSX.Element;
+export declare const useMockStakeholders: (cb: () => void) => [MockStakeholderObject[], Dispatch<SetStateAction<MockStakeholderObject[]>>];
+export {};
+//# sourceMappingURL=Stakeholders.mocks.d.ts.map

package/jsx/work/Stakeholders/Stakeholders.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stakeholders.mocks.d.ts","sourceRoot":"","sources":["../../../src/work/Stakeholders/Stakeholders.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,IAAI,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG/E,UAAU,qBAAsB,SAAQ,WAAW;IACjD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC,eAAe,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,cAAc,wBAA0D,CAAC;AAMtF,eAAO,MAAM,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAQrE,CAAC;AAOF,eAAO,MAAM,cAAc;;;;;iBA2B1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,OAC1B,MAAM,IAAI,KACb,CAAC,qBAAqB,EAAE,EAAE,SAAS,eAAe,qBAAqB,EAAE,CAAC,CAAC,CAiB7E,CAAC"}

package/jsx/work/Stakeholders/Stakeholders.mocks.jsx

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { Input, Grid, FieldGroup } from '@pega/cosmos-react-core';
+import { useMockListData } from '@pega/cosmos-react-demos/lib/core/SummaryList/SummaryList.mocks';
+export const mockNetworkReq = () => new Promise(resolve => setTimeout(resolve, 2000));
+const count = Math.floor(Math.random() * 50) + 1;
+export 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.`
+}));
+export 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);
+};
+export 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
+    ];
+};
+//# sourceMappingURL=Stakeholders.mocks.jsx.map

package/jsx/work/Stakeholders/Stakeholders.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stakeholders.mocks.jsx","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;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,iEAAiE,CAAC;AAOlG,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;AAGtF,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;AAGjD,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;AAOF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EAQN,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,CACb,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CACvC;MAAA,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,EAC3D;MAAA,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,EACzD;MAAA,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,EAC/D;MAAA,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,EAClF;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;IAEF,OAAO,gBAAgB,CAAC,CAAC,CAAC,CACxB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,eAAe,gBAAgB,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,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;IAEtF,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';\nimport { useMockListData } from '@pega/cosmos-react-demos/lib/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"]}

package/jsx/work/Stakeholders/Stakeholders.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const StakeHoldersDemo: () => JSX.Element;
+//# sourceMappingURL=Stakeholders.stories.d.ts.map

package/jsx/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":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAYxC,wBAGU;AAEV,eAAO,MAAM,gBAAgB,mBA8H5B,CAAC"}

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

@@ -0,0 +1,90 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { createStringMatcher } from '@pega/cosmos-react-core';
+import { Stakeholders } from '@pega/cosmos-react-work';
+import { AddAndEditForm, mockNetworkReq, mockRoles, useMockStakeholders } from './Stakeholders.mocks';
+export default {
+    title: 'Work/Stakeholders',
+    component: Stakeholders
+};
+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/jsx/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 { useCallback, useEffect, useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta } from '@storybook/react';\n\nimport { createStringMatcher } from '@pega/cosmos-react-core';\nimport { Stakeholders, StakeholdersProps, Stakeholder } from '@pega/cosmos-react-work';\n\nimport {\n  AddAndEditForm,\n  mockNetworkReq,\n  mockRoles,\n  useMockStakeholders\n} from './Stakeholders.mocks';\n\nexport default {\n  title: 'Work/Stakeholders',\n  component: Stakeholders\n} as Meta;\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/jsx/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/jsx/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/jsx/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/jsx/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/jsx/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/jsx/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/jsx/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/jsx/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/jsx/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/jsx/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/jsx/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/jsx/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/jsx/work/Timeline/Timeline.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, Story } from '@storybook/react';
+import { OmitStrict } from '@pega/cosmos-react-core';
+import { TimelineProps } from '@pega/cosmos-react-work';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const TimelineDemo: Story<OmitStrict<TimelineProps, 'activity' | 'currentTime'>>;
+//# sourceMappingURL=Timeline.stories.d.ts.map

package/jsx/work/Timeline/Timeline.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAY,aAAa,EAAE,MAAM,yBAAyB,CAAC;;AAIlE,wBAGU;AAEV,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,GAAG,aAAa,CAAC,CA6CrF,CAAC"}

package/jsx/work/Timeline/Timeline.stories.jsx

@@ -0,0 +1,43 @@
+import { useCallback, useState } from 'react';
+import { Timeline } from '@pega/cosmos-react-work';
+import { activity } from './Timeline.mocks';
+export default {
+    title: 'Work/Timeline',
+    component: Timeline
+};
+export const TimelineDemo = (args) => {
+    const INITIAL_CHUNK_SIZE = 7;
+    const APPEND_CHUNK_SIZE = 3;
+    const [loading, setLoading] = useState(false);
+    const [hasMore, setHasMore] = useState(true);
+    const [items, setItems] = useState(() => activity.slice(0, INITIAL_CHUNK_SIZE));
+    const loadMore = useCallback(() => {
+        if (!loading) {
+            setLoading(true);
+            setTimeout(() => {
+                setLoading(false);
+                setItems(prevItems => {
+                    const previousItemsLength = prevItems.length;
+                    const newItems = activity.slice(previousItemsLength, previousItemsLength + APPEND_CHUNK_SIZE);
+                    if (newItems.length === 0) {
+                        setHasMore(false);
+                    }
+                    return [...prevItems, ...newItems];
+                });
+            }, 2000);
+        }
+    }, [loading]);
+    return (<Timeline activity={items} currentTime={new Date()} sortOrder={args.sortOrder} groupBy={args.groupBy} loading={loading} loadMore={hasMore ? loadMore : undefined}/>);
+};
+TimelineDemo.args = {
+    sortOrder: 'descending',
+    groupBy: 'date'
+};
+TimelineDemo.argTypes = {
+    sortOrder: { options: ['ascending', 'descending'], control: { type: 'select' } },
+    groupBy: {
+        options: ['date', 'monthyear', 'quarteryear', 'year', 'none'],
+        control: { type: 'select' }
+    }
+};
+//# sourceMappingURL=Timeline.stories.jsx.map

package/jsx/work/Timeline/Timeline.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.stories.jsx","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,QAAQ,EAAiB,MAAM,yBAAyB,CAAC;AAElE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;CACZ,CAAC;AAEV,MAAM,CAAC,MAAM,YAAY,GAAiE,CACxF,IAA2D,EAC3D,EAAE;IACF,MAAM,kBAAkB,GAAG,CAAC,CAAC;IAC7B,MAAM,iBAAiB,GAAG,CAAC,CAAC;IAE5B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAA4B,GAAG,EAAE,CACjE,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC,CACtC,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,IAAI,CAAC,OAAO,EAAE;YACZ,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,UAAU,CAAC,GAAG,EAAE;gBACd,UAAU,CAAC,KAAK,CAAC,CAAC;gBAElB,QAAQ,CAAC,SAAS,CAAC,EAAE;oBACnB,MAAM,mBAAmB,GAAG,SAAS,CAAC,MAAM,CAAC;oBAC7C,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAC7B,mBAAmB,EACnB,mBAAmB,GAAG,iBAAiB,CACxC,CAAC;oBAEF,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;wBACzB,UAAU,CAAC,KAAK,CAAC,CAAC;qBACnB;oBAED,OAAO,CAAC,GAAG,SAAS,EAAE,GAAG,QAAQ,CAAC,CAAC;gBACrC,CAAC,CAAC,CAAC;YACL,CAAC,EAAE,IAAI,CAAC,CAAC;SACV;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,CAAC,QAAQ,CACP,QAAQ,CAAC,CAAC,KAAK,CAAC,CAChB,WAAW,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CACxB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,EACzC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,SAAS,EAAE,YAAY;IACvB,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAChF,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,CAAC;QAC7D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useCallback, useState } from 'react';\n\nimport { OmitStrict } from '@pega/cosmos-react-core';\nimport { Timeline, TimelineProps } from '@pega/cosmos-react-work';\n\nimport { activity } from './Timeline.mocks';\n\nexport default {\n  title: 'Work/Timeline',\n  component: Timeline\n} as Meta;\n\nexport const TimelineDemo: Story<OmitStrict<TimelineProps, 'activity' | 'currentTime'>> = (\n  args: OmitStrict<TimelineProps, 'activity' | 'currentTime'>\n) => {\n  const INITIAL_CHUNK_SIZE = 7;\n  const APPEND_CHUNK_SIZE = 3;\n\n  const [loading, setLoading] = useState(false);\n  const [hasMore, setHasMore] = useState(true);\n  const [items, setItems] = useState<TimelineProps['activity']>(() =>\n    activity.slice(0, INITIAL_CHUNK_SIZE)\n  );\n\n  const loadMore = useCallback(() => {\n    if (!loading) {\n      setLoading(true);\n      setTimeout(() => {\n        setLoading(false);\n\n        setItems(prevItems => {\n          const previousItemsLength = prevItems.length;\n          const newItems = activity.slice(\n            previousItemsLength,\n            previousItemsLength + APPEND_CHUNK_SIZE\n          );\n\n          if (newItems.length === 0) {\n            setHasMore(false);\n          }\n\n          return [...prevItems, ...newItems];\n        });\n      }, 2000);\n    }\n  }, [loading]);\n\n  return (\n    <Timeline\n      activity={items}\n      currentTime={new Date()}\n      sortOrder={args.sortOrder}\n      groupBy={args.groupBy}\n      loading={loading}\n      loadMore={hasMore ? loadMore : undefined}\n    />\n  );\n};\n\nTimelineDemo.args = {\n  sortOrder: 'descending',\n  groupBy: 'date'\n};\n\nTimelineDemo.argTypes = {\n  sortOrder: { options: ['ascending', 'descending'], control: { type: 'select' } },\n  groupBy: {\n    options: ['date', 'monthyear', 'quarteryear', 'year', 'none'],\n    control: { type: 'select' }\n  }\n};\n"]}

package/lib/build/AppHeader/AppHeader.stories.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from '@storybook/addon-actions';
+import { AppHeader } from '@pega/cosmos-react-build';
+export default {
+    title: 'Build/AppHeader',
+    component: AppHeader,
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export const appHeader = (args) => (_jsx(AppHeader, { brand: {
+        name: 'AppStudioX',
+        onClick: action('Clicked application')
+    }, utils: {
+        avatar: { name: 'Lee Ram' },
+        search: {
+            placeholder: 'Search anything, anywhere…'
+        },
+        branchName: 'test',
+        actions: [
+            {
+                primary: 'Switch branch',
+                id: 'switchbranch',
+                onClick: action('Clicked switchbranch')
+            },
+            {
+                primary: 'Create branch',
+                id: 'createbranch',
+                onClick: action('Clicked createbranch')
+            }
+        ],
+        onPreviewClick: args.showPreview ? action('Clicked preview button') : undefined
+    }, links: [
+        {
+            id: '1',
+            name: 'Applications',
+            onClick: action('Clicked Applications')
+        },
+        {
+            id: '2',
+            name: 'Shared resources',
+            onClick: action('Clicked Shared resources')
+        },
+        {
+            id: '3',
+            name: 'Teams',
+            onClick: action('Clicked Teams')
+        },
+        {
+            id: '4',
+            name: 'AI & Analytics',
+            onClick: action('Clicked AI & Analytics')
+        },
+        {
+            id: '5',
+            name: 'Deploy',
+            onClick: action('Clicked Deploy')
+        }
+    ] }, void 0));
+appHeader.args = {
+    showPreview: true
+};
+appHeader.argTypes = {
+    showPreview: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=AppHeader.stories.js.map

package/lib/build/AppHeader/AppHeader.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.stories.js","sourceRoot":"","sources":["../../../src/build/AppHeader/AppHeader.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAMV,MAAM,CAAC,MAAM,SAAS,GAA+B,CAAC,IAAyB,EAAE,EAAE,CAAC,CAClF,KAAC,SAAS,IACR,KAAK,EAAE;QACL,IAAI,EAAE,YAAY;QAClB,OAAO,EAAE,MAAM,CAAC,qBAAqB,CAAC;KACvC,EACD,KAAK,EAAE;QACL,MAAM,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;QAC3B,MAAM,EAAE;YACN,WAAW,EAAE,4BAA4B;SAC1C;QACD,UAAU,EAAE,MAAM;QAClB,OAAO,EAAE;YACP;gBACE,OAAO,EAAE,eAAe;gBACxB,EAAE,EAAE,cAAc;gBAClB,OAAO,EAAE,MAAM,CAAC,sBAAsB,CAAC;aACxC;YACD;gBACE,OAAO,EAAE,eAAe;gBACxB,EAAE,EAAE,cAAc;gBAClB,OAAO,EAAE,MAAM,CAAC,sBAAsB,CAAC;aACxC;SACF;QACD,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,SAAS;KAChF,EACD,KAAK,EAAE;QACL;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,MAAM,CAAC,sBAAsB,CAAC;SACxC;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,kBAAkB;YACxB,OAAO,EAAE,MAAM,CAAC,0BAA0B,CAAC;SAC5C;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,MAAM,CAAC,eAAe,CAAC;SACjC;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,gBAAgB;YACtB,OAAO,EAAE,MAAM,CAAC,wBAAwB,CAAC;SAC1C;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,MAAM,CAAC,gBAAgB,CAAC;SAClC;KACF,WACD,CACH,CAAC;AAEF,SAAS,CAAC,IAAI,GAAG;IACf,WAAW,EAAE,IAAI;CAClB,CAAC;AAEF,SAAS,CAAC,QAAQ,GAAG;IACnB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport { AppHeader } from '@pega/cosmos-react-build';\n\nexport default {\n  title: 'Build/AppHeader',\n  component: AppHeader,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface AppHeaderStoryProps {\n  showPreview: boolean;\n}\n\nexport const appHeader: Story<AppHeaderStoryProps> = (args: AppHeaderStoryProps) => (\n  <AppHeader\n    brand={{\n      name: 'AppStudioX',\n      onClick: action('Clicked application')\n    }}\n    utils={{\n      avatar: { name: 'Lee Ram' },\n      search: {\n        placeholder: 'Search anything, anywhere…'\n      },\n      branchName: 'test',\n      actions: [\n        {\n          primary: 'Switch branch',\n          id: 'switchbranch',\n          onClick: action('Clicked switchbranch')\n        },\n        {\n          primary: 'Create branch',\n          id: 'createbranch',\n          onClick: action('Clicked createbranch')\n        }\n      ],\n      onPreviewClick: args.showPreview ? action('Clicked preview button') : undefined\n    }}\n    links={[\n      {\n        id: '1',\n        name: 'Applications',\n        onClick: action('Clicked Applications')\n      },\n      {\n        id: '2',\n        name: 'Shared resources',\n        onClick: action('Clicked Shared resources')\n      },\n      {\n        id: '3',\n        name: 'Teams',\n        onClick: action('Clicked Teams')\n      },\n      {\n        id: '4',\n        name: 'AI & Analytics',\n        onClick: action('Clicked AI & Analytics')\n      },\n      {\n        id: '5',\n        name: 'Deploy',\n        onClick: action('Clicked Deploy')\n      }\n    ]}\n  />\n);\n\nappHeader.args = {\n  showPreview: true\n};\n\nappHeader.argTypes = {\n  showPreview: { control: { type: 'boolean' } }\n};\n"]}

package/lib/build/AppShell/AppShell.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAmB/C,wBAMU;AAEV,MAAM,WAAW,kBAAkB;IACjC,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC5D;AAoED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAwJlD,CAAC"}
+{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAmB/C,wBAMU;AAEV,MAAM,WAAW,kBAAkB;IACjC,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC5D;AAoED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CA0JlD,CAAC"}