@pega/cosmos-react-demos 2.0.0 → 2.1.3

package/lib/core/FieldGroup/FieldGroupList.mocks.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { FieldGroupListItemProps } from '@pega/cosmos-react-core';
+declare type FieldGroupReducerPayload = {
+    action: 'add';
+} | {
+    action: 'delete';
+    id: string;
+};
+export interface FieldMeta {
+    label: string;
+    type: 'text' | 'date' | 'file' | 'select' | 'textarea';
+}
+export interface GroupMeta {
+    label: string;
+    fields: FieldMeta[];
+}
+export declare const fieldGroupReducer: (groupMeta: GroupMeta, FieldRenderer: (props: FieldMeta) => JSX.Element | null) => (items: FieldGroupListItemProps[], payload: FieldGroupReducerPayload) => FieldGroupListItemProps[];
+export declare const DemoFieldRenderer: ({ label, type }: FieldMeta) => JSX.Element | null;
+export declare const demoGroupMeta: GroupMeta;
+export {};
+//# sourceMappingURL=FieldGroupList.mocks.d.ts.map

package/lib/core/FieldGroup/FieldGroupList.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroupList.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,uBAAuB,EAAS,MAAM,yBAAyB,CAAC;AAEpF,aAAK,wBAAwB,GACzB;IACE,MAAM,EAAE,KAAK,CAAC;CACf,GACD;IACE,MAAM,EAAE,QAAQ,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEN,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;CACxD;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,cAChB,SAAS,yBAAyB,SAAS,KAAK,WAAW,GAAG,IAAI,aAErE,uBAAuB,EAAE,WACvB,wBAAwB,KAChC,uBAAuB,EAoBzB,CAAC;AAEJ,eAAO,MAAM,iBAAiB,oBAAqB,SAAS,uBAM3D,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAQ3B,CAAC"}

package/lib/core/FieldGroup/FieldGroupList.mocks.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { createUID, Input } from '@pega/cosmos-react-core';
+export const fieldGroupReducer = (groupMeta, FieldRenderer) => (items, payload) => {
+    switch (payload.action) {
+        case 'add':
+            return [
+                ...items,
+                {
+                    name: `${groupMeta.label} ${items.length + 1}`,
+                    id: createUID(),
+                    children: groupMeta.fields.map(props => _createElement(FieldRenderer, { ...props, key: props.label }))
+                }
+            ];
+        case 'delete':
+            return items
+                .filter(group => group.id !== payload.id)
+                .map((group, i) => ({ ...group, name: `${groupMeta.label} ${i + 1}` }));
+        default:
+            return items;
+    }
+};
+export const DemoFieldRenderer = ({ label, type }) => {
+    if (type === 'text') {
+        return _jsx(Input, { label: label }, void 0);
+    }
+    return null;
+};
+export const demoGroupMeta = {
+    label: 'Applicant',
+    fields: [
+        {
+            type: 'text',
+            label: 'Applicant name'
+        }
+    ]
+};
+//# sourceMappingURL=FieldGroupList.mocks.js.map

package/lib/core/FieldGroup/FieldGroupList.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroupList.mocks.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,SAAS,EAA2B,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAqBpF,MAAM,CAAC,MAAM,iBAAiB,GAC5B,CAAC,SAAoB,EAAE,aAAuD,EAAE,EAAE,CAClF,CACE,KAAgC,EAChC,OAAiC,EACN,EAAE;IAC7B,QAAQ,OAAO,CAAC,MAAM,EAAE;QACtB,KAAK,KAAK;YACR,OAAO;gBACL,GAAG,KAAK;gBACR;oBACE,IAAI,EAAE,GAAG,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC9C,EAAE,EAAE,SAAS,EAAE;oBACf,QAAQ,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,eAAC,aAAa,OAAK,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,KAAK,GAAI,CAAC;iBACxF;aACF,CAAC;QAEJ,KAAK,QAAQ;YACX,OAAO,KAAK;iBACT,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,CAAC;iBACxC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;QAE5E;YACE,OAAO,KAAK,CAAC;KAChB;AACH,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAa,EAAE,EAAE;IAC9D,IAAI,IAAI,KAAK,MAAM,EAAE;QACnB,OAAO,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,WAAI,CAAC;KAChC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,KAAK,EAAE,WAAW;IAClB,MAAM,EAAE;QACN;YACE,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,gBAAgB;SACxB;KACF;CACF,CAAC","sourcesContent":["import { createUID, FieldGroupListItemProps, Input } from '@pega/cosmos-react-core';\n\ntype FieldGroupReducerPayload =\n  | {\n      action: 'add';\n    }\n  | {\n      action: 'delete';\n      id: string;\n    };\n\nexport interface FieldMeta {\n  label: string;\n  type: 'text' | 'date' | 'file' | 'select' | 'textarea';\n}\n\nexport interface GroupMeta {\n  label: string;\n  fields: FieldMeta[];\n}\n\nexport const fieldGroupReducer =\n  (groupMeta: GroupMeta, FieldRenderer: (props: FieldMeta) => JSX.Element | null) =>\n  (\n    items: FieldGroupListItemProps[],\n    payload: FieldGroupReducerPayload\n  ): FieldGroupListItemProps[] => {\n    switch (payload.action) {\n      case 'add':\n        return [\n          ...items,\n          {\n            name: `${groupMeta.label} ${items.length + 1}`,\n            id: createUID(),\n            children: groupMeta.fields.map(props => <FieldRenderer {...props} key={props.label} />)\n          }\n        ];\n\n      case 'delete':\n        return items\n          .filter(group => group.id !== payload.id)\n          .map((group, i) => ({ ...group, name: `${groupMeta.label} ${i + 1}` }));\n\n      default:\n        return items;\n    }\n  };\n\nexport const DemoFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n\n  return null;\n};\n\nexport const demoGroupMeta: GroupMeta = {\n  label: 'Applicant',\n  fields: [\n    {\n      type: 'text',\n      label: 'Applicant name'\n    }\n  ]\n};\n"]}

package/lib/core/FieldGroup/FieldGroupList.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":";;;;;AAkBA,wBAGE;AA+FF,eAAO,MAAM,YAAY,mBAiDxB,CAAC;AAiCF,eAAO,MAAM,aAAa,mBAkDzB,CAAC;AAoBF,eAAO,MAAM,kBAAkB,mBAwB9B,CAAC"}
+{"version":3,"file":"FieldGroupList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":";;;;;AAyBA,wBAGE;AAiDF,eAAO,MAAM,YAAY,mBAiDxB,CAAC;AAiCF,eAAO,MAAM,aAAa,mBAkDzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mBAwB9B,CAAC"}

package/lib/core/FieldGroup/FieldGroupList.stories.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useReducer } from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button, createUID, DateInput, FieldGroupList, FileInput, Form, Input, Select, Option, Text, TextArea } from '@pega/cosmos-react-core';
+import { DemoFieldRenderer, demoGroupMeta, fieldGroupReducer } from './FieldGroupList.mocks';
+export default {
+    title: 'Core/FieldGroupList',
+    component: FieldGroupList
+};
+const ExpensesFieldRenderer = ({ label, type }) => {
+    if (type === 'text') {
+        return _jsx(Input, { label: label }, void 0);
+    }
+    if (type === 'select') {
+        return (_jsxs(Select, { label: label, children: [_jsx(Option, { children: "Select" }, void 0), _jsx(Option, { children: "Advertising" }, void 0), _jsx(Option, { children: "Car and truck expenses" }, void 0), _jsx(Option, { children: "Commissions and fees" }, void 0), _jsx(Option, { children: "Contract labor" }, void 0), _jsx(Option, { children: "Legal and professional services" }, void 0), _jsx(Option, { children: "Office expense" }, void 0), _jsx(Option, { children: "Rent or lease" }, void 0), _jsx(Option, { children: "Vehicles, machinery, and equipment" }, void 0), _jsx(Option, { children: "Repairs and maintenance" }, void 0), _jsx(Option, { children: "Travel and meals" }, void 0), _jsx(Option, { children: "Deductible meals" }, void 0), _jsx(Option, { children: "Utilities" }, void 0), _jsx(Option, { children: "Other" }, void 0)] }, void 0));
+    }
+    if (type === 'file') {
+        return _jsx(FileInput, { label: label, multiple: true }, void 0);
+    }
+    if (type === 'textarea') {
+        return _jsx(TextArea, { label: label }, void 0);
+    }
+    if (type === 'date') {
+        return _jsx(DateInput, { label: label }, void 0);
+    }
+    return null;
+};
+const expensesGroupMeta = {
+    label: 'Expense',
+    fields: [
+        { type: 'select', label: 'Type of expense' },
+        { type: 'date', label: 'Date of expense' },
+        { type: 'file', label: 'Receipts' },
+        { type: 'textarea', label: 'Notes' }
+    ]
+};
+export const ExpensesDemo = () => {
+    const [state, dispatch] = useReducer(fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer), undefined, () => [
+        {
+            name: `${expensesGroupMeta.label} 1`,
+            id: createUID(),
+            children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)
+        }
+    ]);
+    return (_jsxs(Form, { actions: _jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', onClick: (e) => {
+                        action('Click')(`${e.currentTarget.name}:${e.type}`);
+                    }, children: "Cancel" }, void 0), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', children: "Submit" }, void 0)] }, void 0), onSubmit: (e) => {
+            e.preventDefault();
+            action('Submit')(`Form:${e.type}`);
+        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: [_jsx(Text, { variant: 'h2', children: "Expense report" }, void 0), _jsx(FieldGroupList, { items: state, onAdd: () => {
+                    dispatch({ action: 'add' });
+                }, onDelete: id => {
+                    dispatch({ action: 'delete', id });
+                } }, void 0)] }, void 0));
+};
+const InsuranceFieldRenderer = ({ label, type }) => {
+    if (type === 'text') {
+        return _jsx(Input, { label: label }, void 0);
+    }
+    if (type === 'select') {
+        return (_jsxs(Select, { label: label, children: [_jsx(Option, { children: "Select" }, void 0), _jsx(Option, { children: "Mother" }, void 0), _jsx(Option, { children: "Father" }, void 0), _jsx(Option, { children: "Guardian" }, void 0), _jsx(Option, { children: "Child" }, void 0), _jsx(Option, { children: "Spouse" }, void 0), _jsx(Option, { children: "Sibling" }, void 0), _jsx(Option, { children: "Other" }, void 0)] }, void 0));
+    }
+    return null;
+};
+const insuranceGroupMeta = {
+    label: 'Entry',
+    fields: [
+        { type: 'text', label: 'First name' },
+        { type: 'text', label: 'Last name' },
+        { type: 'select', label: 'Relationship' }
+    ]
+};
+export const InsuranceDemo = () => {
+    const [state, dispatch] = useReducer(fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer), undefined, () => [
+        {
+            name: `${insuranceGroupMeta.label} 1`,
+            id: createUID(),
+            children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)
+        }
+    ]);
+    return (_jsxs(Form, { actions: _jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', onClick: (e) => {
+                        action('Click')(`${e.currentTarget.name}:${e.type}`);
+                    }, children: "Cancel" }, void 0), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', children: "Submit" }, void 0)] }, void 0), onSubmit: (e) => {
+            e.preventDefault();
+            action('Submit')(`Form:${e.type}`);
+        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: [_jsx(Text, { variant: 'h1', children: "Insurance step 1" }, void 0), _jsx(Text, { variant: 'h2', children: "Dependants" }, void 0), _jsx(FieldGroupList, { items: state, onAdd: () => {
+                    dispatch({ action: 'add' });
+                }, onDelete: id => {
+                    dispatch({ action: 'delete', id });
+                } }, void 0)] }, void 0));
+};
+export const FieldGroupListDemo = () => {
+    const [state, dispatch] = useReducer(fieldGroupReducer(demoGroupMeta, DemoFieldRenderer), undefined, () => [
+        {
+            name: `${demoGroupMeta.label} 1`,
+            id: createUID(),
+            children: demoGroupMeta.fields.map(DemoFieldRenderer)
+        }
+    ]);
+    return (_jsx(FieldGroupList, { items: state, onAdd: () => {
+            dispatch({ action: 'add' });
+        }, onDelete: id => {
+            dispatch({ action: 'delete', id });
+        } }, void 0));
+};
+//# sourceMappingURL=FieldGroupList.stories.js.map

package/lib/core/FieldGroup/FieldGroupList.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroupList.stories.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, MouseEvent, FormEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Button,\n  createUID,\n  DateInput,\n  FieldGroupList,\n  FileInput,\n  Form,\n  Input,\n  Select,\n  Option,\n  Text,\n  TextArea\n} from '@pega/cosmos-react-core';\n\nimport {\n  DemoFieldRenderer,\n  demoGroupMeta,\n  fieldGroupReducer,\n  FieldMeta,\n  GroupMeta\n} from './FieldGroupList.mocks';\n\nexport default {\n  title: 'Core/FieldGroupList',\n  component: FieldGroupList\n};\n\nconst ExpensesFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n  if (type === 'select') {\n    return (\n      <Select label={label}>\n        <Option>Select</Option>\n        <Option>Advertising</Option>\n        <Option>Car and truck expenses</Option>\n        <Option>Commissions and fees</Option>\n        <Option>Contract labor</Option>\n        <Option>Legal and professional services</Option>\n        <Option>Office expense</Option>\n        <Option>Rent or lease</Option>\n        <Option>Vehicles, machinery, and equipment</Option>\n        <Option>Repairs and maintenance</Option>\n        <Option>Travel and meals</Option>\n        <Option>Deductible meals</Option>\n        <Option>Utilities</Option>\n        <Option>Other</Option>\n      </Select>\n    );\n  }\n  if (type === 'file') {\n    return <FileInput label={label} multiple />;\n  }\n  if (type === 'textarea') {\n    return <TextArea label={label} />;\n  }\n  if (type === 'date') {\n    return <DateInput label={label} />;\n  }\n\n  return null;\n};\n\nconst expensesGroupMeta: GroupMeta = {\n  label: 'Expense',\n  fields: [\n    { type: 'select', label: 'Type of expense' },\n    { type: 'date', label: 'Date of expense' },\n    { type: 'file', label: 'Receipts' },\n    { type: 'textarea', label: 'Notes' }\n  ]\n};\n\nexport const ExpensesDemo = () => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${expensesGroupMeta.label} 1`,\n        id: createUID(),\n        children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <Form\n      actions={\n        <>\n          <Button\n            name='Cancel'\n            variant='secondary'\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              action('Click')(`${e.currentTarget.name}:${e.type}`);\n            }}\n          >\n            Cancel\n          </Button>\n          <Button name='Submit' type='submit' variant='primary'>\n            Submit\n          </Button>\n        </>\n      }\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        action('Submit')(`Form:${e.type}`);\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Text variant='h2'>Expense report</Text>\n      <FieldGroupList\n        items={state}\n        onAdd={() => {\n          dispatch({ action: 'add' });\n        }}\n        onDelete={id => {\n          dispatch({ action: 'delete', id });\n        }}\n      />\n    </Form>\n  );\n};\n\nconst InsuranceFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n  if (type === 'select') {\n    return (\n      <Select label={label}>\n        <Option>Select</Option>\n        <Option>Mother</Option>\n        <Option>Father</Option>\n        <Option>Guardian</Option>\n        <Option>Child</Option>\n        <Option>Spouse</Option>\n        <Option>Sibling</Option>\n        <Option>Other</Option>\n      </Select>\n    );\n  }\n\n  return null;\n};\n\nconst insuranceGroupMeta: GroupMeta = {\n  label: 'Entry',\n  fields: [\n    { type: 'text', label: 'First name' },\n    { type: 'text', label: 'Last name' },\n    { type: 'select', label: 'Relationship' }\n  ]\n};\n\nexport const InsuranceDemo = () => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${insuranceGroupMeta.label} 1`,\n        id: createUID(),\n        children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <Form\n      actions={\n        <>\n          <Button\n            name='Cancel'\n            variant='secondary'\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              action('Click')(`${e.currentTarget.name}:${e.type}`);\n            }}\n          >\n            Cancel\n          </Button>\n          <Button name='Submit' type='submit' variant='primary'>\n            Submit\n          </Button>\n        </>\n      }\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        action('Submit')(`Form:${e.type}`);\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Text variant='h1'>Insurance step 1</Text>\n      <Text variant='h2'>Dependants</Text>\n      <FieldGroupList\n        items={state}\n        onAdd={() => {\n          dispatch({ action: 'add' });\n        }}\n        onDelete={id => {\n          dispatch({ action: 'delete', id });\n        }}\n      />\n    </Form>\n  );\n};\n\nexport const FieldGroupListDemo = () => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(demoGroupMeta, DemoFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${demoGroupMeta.label} 1`,\n        id: createUID(),\n        children: demoGroupMeta.fields.map(DemoFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <FieldGroupList\n      items={state}\n      onAdd={() => {\n        dispatch({ action: 'add' });\n      }}\n      onDelete={id => {\n        dispatch({ action: 'delete', id });\n      }}\n    />\n  );\n};\n"]}

package/lib/core/FieldValueList/FieldValueList.stories.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FieldValueList, Link, Status, Text } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/FieldValueList',
+    component: FieldValueList
+};
+export const FieldValueListDemo = (args) => {
+    const data = [
+        {
+            id: 'id',
+            name: 'ID',
+            value: (_jsx(Text, { variant: 'h1', as: 'span', children: "C-1234" }, void 0))
+        },
+        {
+            id: 'status',
+            name: 'Status',
+            value: _jsx(Status, { variant: 'pending', children: "pending" }, void 0)
+        },
+        {
+            id: 'dynamic',
+            name: args.name,
+            value: args.value
+        },
+        {
+            id: 'link',
+            name: 'Link',
+            value: (_jsx(Link, { href: 'https://www.pega.com', target: '_blank', children: "C-ABC" }, void 0))
+        },
+        {
+            id: 'created',
+            name: 'Created',
+            value: new Date().toLocaleDateString()
+        },
+        {
+            id: 'no value',
+            name: 'No Value'
+        }
+    ];
+    return _jsx(FieldValueList, { variant: args.variant, fields: data }, void 0);
+};
+FieldValueListDemo.args = {
+    variant: 'inline',
+    name: 'Name',
+    value: 'Value'
+};
+FieldValueListDemo.argTypes = {
+    variant: { options: ['inline', 'stacked'], control: { type: 'select' } },
+    name: { control: { type: 'text' } },
+    value: { control: { type: 'text' } }
+};
+//# sourceMappingURL=FieldValueList.stories.js.map

package/lib/core/FieldValueList/FieldValueList.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldValueList.stories.js","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAuB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAElG,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CAClB,CAAC;AAOV,MAAM,CAAC,MAAM,kBAAkB,GAAoC,CACjE,IAA8B,EAC9B,EAAE;IACF,MAAM,IAAI,GAAG;QACX;YACE,EAAE,EAAE,IAAI;YACR,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,CACL,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,+BAErB,CACR;SACF;QACD;YACE,EAAE,EAAE,QAAQ;YACZ,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,gCAAiB;SAClD;QACD;YACE,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB;QACD;YACE,EAAE,EAAE,MAAM;YACV,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,CACL,KAAC,IAAI,IAAC,IAAI,EAAC,sBAAsB,EAAC,MAAM,EAAC,QAAQ,8BAE1C,CACR;SACF;QACD;YACE,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE;SACvC;QACD;YACE,EAAE,EAAE,UAAU;YACd,IAAI,EAAE,UAAU;SACjB;KACF,CAAC;IAEF,OAAO,KAAC,cAAc,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,WAAI,CAAC;AACjE,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,OAAO,EAAE,QAAQ;IACjB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACxE,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { FieldValueList, FieldValueListProps, Link, Status, Text } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/FieldValueList',\n  component: FieldValueList\n} as Meta;\n\ninterface FieldValueListStoryProps extends FieldValueListProps {\n  name: string;\n  value: string;\n}\n\nexport const FieldValueListDemo: Story<FieldValueListStoryProps> = (\n  args: FieldValueListStoryProps\n) => {\n  const data = [\n    {\n      id: 'id',\n      name: 'ID',\n      value: (\n        <Text variant='h1' as='span'>\n          C-1234\n        </Text>\n      )\n    },\n    {\n      id: 'status',\n      name: 'Status',\n      value: <Status variant='pending'>pending</Status>\n    },\n    {\n      id: 'dynamic',\n      name: args.name,\n      value: args.value\n    },\n    {\n      id: 'link',\n      name: 'Link',\n      value: (\n        <Link href='https://www.pega.com' target='_blank'>\n          C-ABC\n        </Link>\n      )\n    },\n    {\n      id: 'created',\n      name: 'Created',\n      value: new Date().toLocaleDateString()\n    },\n    {\n      id: 'no value',\n      name: 'No Value'\n    }\n  ];\n\n  return <FieldValueList variant={args.variant} fields={data} />;\n};\n\nFieldValueListDemo.args = {\n  variant: 'inline',\n  name: 'Name',\n  value: 'Value'\n};\n\nFieldValueListDemo.argTypes = {\n  variant: { options: ['inline', 'stacked'], control: { type: 'select' } },\n  name: { control: { type: 'text' } },\n  value: { control: { type: 'text' } }\n};\n"]}

package/lib/core/File/FileDisplay.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/react';
-import { FileDisplayProps } from '@pega/cosmos-react-core';
+import { FileDisplayProps, FileUploadItemProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 interface FileDisplayDemoProps {
@@ -10,4 +10,11 @@ interface FileDisplayDemoProps {
 }
 export declare const FileDisplayTypes: Story<FileDisplayDemoProps>;
 export declare const FileDisplayDemo: Story<FileDisplayProps & FileDisplayDemoProps>;
+interface FileUploadItemDemoProps extends FileDisplayDemoProps {
+    name: FileUploadItemProps['name'];
+    meta?: FileUploadItemProps['meta'];
+    error?: FileUploadItemProps['error'];
+    progress?: FileUploadItemProps['progress'];
+}
+export declare const FileUploadItemDemo: Story<FileUploadItemDemoProps>;
 //# sourceMappingURL=FileDisplay.stories.d.ts.map

package/lib/core/File/FileDisplay.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileDisplay.stories.d.ts","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,gBAAgB,EAQjB,MAAM,yBAAyB,CAAC;;AAEjC,wBAaU;AAEV,UAAU,oBAAoB;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,oBAAoB,CAmGxD,CAAC;AAUF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,CAsC1E,CAAC"}
+{"version":3,"file":"FileDisplay.stories.d.ts","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,gBAAgB,EAQhB,mBAAmB,EAEpB,MAAM,yBAAyB,CAAC;;AAEjC,wBAaU;AAEV,UAAU,oBAAoB;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,oBAAoB,CAmGxD,CAAC;AAUF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,CAsC1E,CAAC;AAYF,UAAU,uBAAwB,SAAQ,oBAAoB;IAC5D,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAwC7D,CAAC"}

package/lib/core/File/FileDisplay.stories.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState } from 'react';
+import { FileDisplay, FieldValueList, Image, Popover, ToasterContext, useElement, useOuterEvent, FileUploadItem } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/File/Display',
+    component: FileDisplay,
+    args: {
+        withValue: true,
+        withPreview: true,
+        withDownload: true
+    },
+    argTypes: {
+        withValue: { control: { type: 'boolean' } },
+        withPreview: { control: { type: 'boolean' } },
+        withDownload: { control: { type: 'boolean' } }
+    }
+};
+export const FileDisplayTypes = (args) => {
+    const { push } = useContext(ToasterContext);
+    const handlePreview = args.withPreview
+        ? (url) => push({ content: `Previewed ${url}` })
+        : undefined;
+    const handleDownload = args.withDownload
+        ? (url) => push({ content: `Downloaded ${url}` })
+        : undefined;
+    const fields = [
+        {
+            id: '1',
+            name: 'Image file',
+            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'image.jpg' : undefined, value: args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0))
+        },
+        {
+            id: '2',
+            name: 'Video file',
+            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'video.avi' : undefined, value: args.withValue ? 'https://pega.com/media/some-video.avi' : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0))
+        },
+        {
+            id: '3',
+            name: 'Audio file',
+            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'recording.mp3' : undefined, value: args.withValue ? 'https://pega.com/media/sprint-review-recording.mp3' : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0))
+        },
+        {
+            id: '4',
+            name: 'Document file',
+            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'document.doc' : undefined, value: args.withValue ? 'https://pega.com/media/document.doc' : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0))
+        },
+        {
+            id: '5',
+            name: 'PDF file',
+            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'invoice.pdf' : undefined, value: args.withValue ? 'https://pega.com/media/invoice.pdf' : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0))
+        },
+        {
+            id: '6',
+            name: 'Presentation file',
+            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'review.pps' : undefined, value: args.withValue ? 'https://pega.com/media/review.pps' : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0))
+        },
+        {
+            id: '7',
+            name: 'Spreadsheet file',
+            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'welfare.xlsx' : undefined, value: args.withValue ? 'https://pega.com/media/welfare.xlsx' : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0))
+        }
+    ];
+    return _jsx(FieldValueList, { fields: fields }, void 0);
+};
+FileDisplayTypes.args = {
+    withDisplayText: true
+};
+FileDisplayTypes.argTypes = {
+    withDisplayText: { control: { type: 'boolean' } }
+};
+export const FileDisplayDemo = (args) => {
+    const [buttonEl, setButtonEl] = useElement();
+    const [popoverEl, setPopoverEl] = useElement();
+    const [showPreview, setShowPreview] = useState(false);
+    useOuterEvent('click', [buttonEl, popoverEl], () => setShowPreview(false));
+    const imageSrc = 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';
+    const handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;
+    const handleDownload = args.withDownload
+        ? () => {
+            const element = document.createElement('a');
+            element.href = imageSrc;
+            element.download = 'cosmos_file_display_download.jpg';
+            element.click();
+        }
+        : undefined;
+    return (_jsxs(_Fragment, { children: [_jsx(FileDisplay, { ref: setButtonEl, variant: args.variant, displayText: args.displayText, value: args.withValue ? imageSrc : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0), _jsx(Popover, { ref: setPopoverEl, show: showPreview, target: buttonEl, children: _jsx(Image, { src: imageSrc, alt: args.displayText || 'Pega World iNspire' }, void 0) }, void 0)] }, void 0));
+};
+FileDisplayDemo.args = {
+    variant: 'file',
+    displayText: 'Pega World iNspire'
+};
+FileDisplayDemo.argTypes = {
+    variant: { options: ['file', 'text', 'link'], control: { type: 'radio' } },
+    displayText: { control: { type: 'text' } }
+};
+export const FileUploadItemDemo = (args) => {
+    const [fileEl, setFileEl] = useElement();
+    const [popoverEl, setPopoverEl] = useElement();
+    const [showPreview, setShowPreview] = useState(false);
+    useOuterEvent('click', [fileEl, popoverEl], () => setShowPreview(false));
+    const imageSrc = 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';
+    const handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;
+    const handleDownload = args.withDownload
+        ? () => {
+            const element = document.createElement('a');
+            element.href = imageSrc;
+            element.download = 'cosmos_file_display_download.jpg';
+            element.click();
+        }
+        : undefined;
+    return (_jsxs(_Fragment, { children: [_jsx(FileUploadItem, { ref: setFileEl, name: args.name, meta: args.meta, error: args.error, progress: args.progress, thumbnail: imageSrc, onPreview: handlePreview, onDownload: handleDownload }, void 0), _jsx(Popover, { ref: setPopoverEl, show: showPreview, target: fileEl, strategy: 'fixed', children: _jsx(Image, { src: imageSrc, alt: args.name }, void 0) }, void 0)] }, void 0));
+};
+FileUploadItemDemo.args = {
+    name: 'Pega World iNspire',
+    meta: 'Some additional information',
+    error: false,
+    progress: 100
+};
+FileUploadItemDemo.argTypes = {
+    withValue: { table: { disable: true } },
+    name: { control: { type: 'text' } },
+    meta: { control: { type: 'text' } },
+    error: { control: { type: 'boolean' } },
+    progress: { control: { type: 'number' } }
+};
+//# sourceMappingURL=FileDisplay.stories.js.map

package/lib/core/File/FileDisplay.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useContext, useState } from 'react';\n\nimport {\n  FileDisplay,\n  FileDisplayProps,\n  FileItemProps,\n  FieldValueList,\n  Image,\n  Popover,\n  ToasterContext,\n  useElement,\n  useOuterEvent,\n  FileUploadItemProps,\n  FileUploadItem\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/File/Display',\n  component: FileDisplay,\n  args: {\n    withValue: true,\n    withPreview: true,\n    withDownload: true\n  },\n  argTypes: {\n    withValue: { control: { type: 'boolean' } },\n    withPreview: { control: { type: 'boolean' } },\n    withDownload: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface FileDisplayDemoProps {\n  withDisplayText?: boolean;\n  withValue?: boolean;\n  withPreview?: boolean;\n  withDownload?: boolean;\n}\n\nexport const FileDisplayTypes: Story<FileDisplayDemoProps> = (args: FileDisplayDemoProps) => {\n  const { push } = useContext(ToasterContext);\n\n  const handlePreview = args.withPreview\n    ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n    : undefined;\n\n  const handleDownload = args.withDownload\n    ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n    : undefined;\n\n  const fields = [\n    {\n      id: '1',\n      name: 'Image file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'image.jpg' : undefined}\n          value={args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '2',\n      name: 'Video file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'video.avi' : undefined}\n          value={args.withValue ? 'https://pega.com/media/some-video.avi' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '3',\n      name: 'Audio file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'recording.mp3' : undefined}\n          value={args.withValue ? 'https://pega.com/media/sprint-review-recording.mp3' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '4',\n      name: 'Document file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'document.doc' : undefined}\n          value={args.withValue ? 'https://pega.com/media/document.doc' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '5',\n      name: 'PDF file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'invoice.pdf' : undefined}\n          value={args.withValue ? 'https://pega.com/media/invoice.pdf' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '6',\n      name: 'Presentation file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'review.pps' : undefined}\n          value={args.withValue ? 'https://pega.com/media/review.pps' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '7',\n      name: 'Spreadsheet file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'welfare.xlsx' : undefined}\n          value={args.withValue ? 'https://pega.com/media/welfare.xlsx' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    }\n  ];\n\n  return <FieldValueList fields={fields} />;\n};\n\nFileDisplayTypes.args = {\n  withDisplayText: true\n};\n\nFileDisplayTypes.argTypes = {\n  withDisplayText: { control: { type: 'boolean' } }\n};\n\nexport const FileDisplayDemo: Story<FileDisplayProps & FileDisplayDemoProps> = (\n  args: FileDisplayProps & FileDisplayDemoProps\n) => {\n  const [buttonEl, setButtonEl] = useElement();\n  const [popoverEl, setPopoverEl] = useElement();\n  const [showPreview, setShowPreview] = useState(false);\n\n  useOuterEvent('click', [buttonEl, popoverEl], () => setShowPreview(false));\n\n  const imageSrc =\n    'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n  const handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;\n\n  const handleDownload = args.withDownload\n    ? () => {\n        const element = document.createElement('a');\n        element.href = imageSrc;\n        element.download = 'cosmos_file_display_download.jpg';\n        element.click();\n      }\n    : undefined;\n\n  return (\n    <>\n      <FileDisplay\n        ref={setButtonEl}\n        variant={args.variant}\n        displayText={args.displayText}\n        value={args.withValue ? imageSrc : undefined}\n        onPreview={handlePreview}\n        onDownload={handleDownload}\n      />\n      <Popover ref={setPopoverEl} show={showPreview} target={buttonEl}>\n        <Image src={imageSrc} alt={args.displayText || 'Pega World iNspire'} />\n      </Popover>\n    </>\n  );\n};\n\nFileDisplayDemo.args = {\n  variant: 'file',\n  displayText: 'Pega World iNspire'\n};\n\nFileDisplayDemo.argTypes = {\n  variant: { options: ['file', 'text', 'link'], control: { type: 'radio' } },\n  displayText: { control: { type: 'text' } }\n};\n\ninterface FileUploadItemDemoProps extends FileDisplayDemoProps {\n  name: FileUploadItemProps['name'];\n  meta?: FileUploadItemProps['meta'];\n  error?: FileUploadItemProps['error'];\n  progress?: FileUploadItemProps['progress'];\n}\n\nexport const FileUploadItemDemo: Story<FileUploadItemDemoProps> = (\n  args: FileUploadItemDemoProps\n) => {\n  const [fileEl, setFileEl] = useElement();\n  const [popoverEl, setPopoverEl] = useElement();\n  const [showPreview, setShowPreview] = useState(false);\n\n  useOuterEvent('click', [fileEl, popoverEl], () => setShowPreview(false));\n\n  const imageSrc =\n    'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n  const handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;\n\n  const handleDownload = args.withDownload\n    ? () => {\n        const element = document.createElement('a');\n        element.href = imageSrc;\n        element.download = 'cosmos_file_display_download.jpg';\n        element.click();\n      }\n    : undefined;\n\n  return (\n    <>\n      <FileUploadItem\n        ref={setFileEl}\n        name={args.name}\n        meta={args.meta}\n        error={args.error}\n        progress={args.progress}\n        thumbnail={imageSrc}\n        onPreview={handlePreview}\n        onDownload={handleDownload}\n      />\n      <Popover ref={setPopoverEl} show={showPreview} target={fileEl} strategy='fixed'>\n        <Image src={imageSrc} alt={args.name} />\n      </Popover>\n    </>\n  );\n};\n\nFileUploadItemDemo.args = {\n  name: 'Pega World iNspire',\n  meta: 'Some additional information',\n  error: false,\n  progress: 100\n};\n\nFileUploadItemDemo.argTypes = {\n  withValue: { table: { disable: true } },\n  name: { control: { type: 'text' } },\n  meta: { control: { type: 'text' } },\n  error: { control: { type: 'boolean' } },\n  progress: { control: { type: 'number' } }\n};\n"]}

package/lib/core/File/FileInput.stories.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useMemo, useCallback, useRef, useContext } from 'react';
+import { FileInput, createUID, useAfterInitialEffect } from '@pega/cosmos-react-core';
+import { FileServiceContext } from '@pega/cosmos-react-demos/lib/work/CaseView/FileService.mock';
+export default {
+    title: 'Core/File/Input',
+    component: FileInput
+};
+export const FileInputDemo = (args) => {
+    const { files, attachFile, cancelFile, deleteFile } = useContext(FileServiceContext);
+    const errCounts = useRef({ invalidType: 0, invalidSize: 0 });
+    const [hasError, setHasError] = useState(false);
+    const sizeLimit = args.sizeLimit || 100;
+    // Fires anytime files are added to the input either through selection or drop
+    const onFilesAdded = useCallback((addedFiles) => {
+        errCounts.current = { invalidType: 0, invalidSize: 0 };
+        const newFiles = addedFiles.filter(f => {
+            let isValidSize = true;
+            if (f.size / 1000000 > sizeLimit) {
+                errCounts.current.invalidSize += 1;
+                isValidSize = false;
+            }
+            return isValidSize;
+        });
+        setHasError(newFiles.length < addedFiles.length);
+        newFiles.forEach((File) => {
+            const id = createUID();
+            attachFile({
+                id,
+                thumbnail: File.type.startsWith('image') ? URL.createObjectURL(File) : undefined,
+                name: File.name,
+                category: '',
+                File,
+                onCancel: () => {
+                    cancelFile(id);
+                }
+            });
+        });
+    }, [attachFile, deleteFile]);
+    useAfterInitialEffect(() => {
+        if (files.length === 0)
+            setHasError(false);
+    }, [files.length]);
+    const info = useMemo(() => {
+        return hasError
+            ? errCounts.current.invalidSize > 0 && (_jsx("div", { children: `File size must be less than ${sizeLimit}MB` }, void 0))
+            : null;
+    }, [hasError]);
+    return (_jsx(FileInput, { label: args.label, labelHidden: args.labelHidden, multiple: args.multiple, status: hasError ? 'error' : undefined, info: info, required: args.required, disabled: args.disabled, onFilesAdded: onFilesAdded, files: files.map(file => {
+            return {
+                ...file,
+                onCancel: undefined,
+                onPreview: () => { },
+                onDownload: () => { },
+                onDelete: () => {
+                    deleteFile(file.id);
+                }
+            };
+            return file;
+        }) }, void 0));
+};
+FileInputDemo.args = {
+    multiple: true,
+    sizeLimit: 100,
+    label: 'File input label',
+    labelHidden: false,
+    required: false,
+    disabled: false
+};
+FileInputDemo.argTypes = {
+    multiple: { control: { type: 'boolean' } },
+    sizeLimit: { control: { type: 'number' } },
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=FileInput.stories.js.map

package/lib/core/File/FileInput.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.stories.js","sourceRoot":"","sources":["../../../src/core/File/FileInput.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useMemo, useCallback, useRef, useContext } from 'react';\n\nimport {\n  FileInput,\n  FileInputProps,\n  createUID,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport { FileServiceContext } from '@pega/cosmos-react-demos/lib/work/CaseView/FileService.mock';\n\nexport default {\n  title: 'Core/File/Input',\n  component: FileInput\n} as Meta;\n\ninterface FileInputStoryProps extends FileInputProps {\n  sizeLimit?: number;\n}\n\nexport const FileInputDemo: Story<FileInputStoryProps> = (args: FileInputStoryProps) => {\n  const { files, attachFile, cancelFile, deleteFile } = useContext(FileServiceContext);\n  const errCounts = useRef({ invalidType: 0, invalidSize: 0 });\n  const [hasError, setHasError] = useState(false);\n\n  const sizeLimit = args.sizeLimit || 100;\n\n  // Fires anytime files are added to the input either through selection or drop\n  const onFilesAdded = useCallback(\n    (addedFiles: File[]) => {\n      errCounts.current = { invalidType: 0, invalidSize: 0 };\n\n      const newFiles = addedFiles.filter(f => {\n        let isValidSize = true;\n\n        if (f.size / 1000000 > sizeLimit) {\n          errCounts.current.invalidSize += 1;\n          isValidSize = false;\n        }\n\n        return isValidSize;\n      });\n\n      setHasError(newFiles.length < addedFiles.length);\n\n      newFiles.forEach((File: File) => {\n        const id = createUID();\n        attachFile({\n          id,\n          thumbnail: File.type.startsWith('image') ? URL.createObjectURL(File) : undefined,\n          name: File.name,\n          category: '',\n          File,\n          onCancel: () => {\n            cancelFile(id);\n          }\n        });\n      });\n    },\n    [attachFile, deleteFile]\n  );\n\n  useAfterInitialEffect(() => {\n    if (files.length === 0) setHasError(false);\n  }, [files.length]);\n\n  const info = useMemo(() => {\n    return hasError\n      ? errCounts.current.invalidSize > 0 && (\n          <div>{`File size must be less than ${sizeLimit}MB`}</div>\n        )\n      : null;\n  }, [hasError]);\n\n  return (\n    <FileInput\n      label={args.label}\n      labelHidden={args.labelHidden}\n      multiple={args.multiple}\n      status={hasError ? 'error' : undefined}\n      info={info}\n      required={args.required}\n      disabled={args.disabled}\n      onFilesAdded={onFilesAdded}\n      files={files.map(file => {\n        return {\n          ...file,\n          onCancel: undefined,\n          onPreview: () => {},\n          onDownload: () => {},\n          onDelete: () => {\n            deleteFile(file.id);\n          }\n        };\n\n        return file;\n      })}\n    />\n  );\n};\n\nFileInputDemo.args = {\n  multiple: true,\n  sizeLimit: 100,\n  label: 'File input label',\n  labelHidden: false,\n  required: false,\n  disabled: false\n};\n\nFileInputDemo.argTypes = {\n  multiple: { control: { type: 'boolean' } },\n  sizeLimit: { control: { type: 'number' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } }\n};\n"]}

package/lib/core/Flex/Flex.styles.d.ts

@@ -1,8 +1,8 @@
-export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const StyledFlexContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     height?: number | undefined;
     width?: number | undefined;
 }, never>;
-export declare const StyledItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const StyledFlexItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     inActive?: boolean | undefined;
     noPadding?: boolean | undefined;
     width?: number | undefined;

package/lib/core/Flex/Flex.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Flex/Flex.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe;;;SAiB3B,CAAC;AAIF,eAAO,MAAM,UAAU;;;;SAsBtB,CAAC"}
+{"version":3,"file":"Flex.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Flex/Flex.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,mBAAmB;;;SAiB/B,CAAC;AAIF,eAAO,MAAM,cAAc;;;;SAwBzB,CAAC"}

package/lib/core/Flex/Flex.styles.js

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 import { calculateFontSize, defaultThemeProp } from '@pega/cosmos-react-core';
-export const StyledContainer = styled.div(({ height, theme, width }) => {
+export const StyledFlexContainer = styled.div(({ height, theme, width }) => {
     return css `
       border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};
       background-color: ${theme.base.colors.blue.light};
@@ -16,26 +16,26 @@ export const StyledContainer = styled.div(({ height, theme, width }) => {
       `}
     `;
 });
-StyledContainer.defaultProps = defaultThemeProp;
-export const StyledItem = styled.div(({ inActive, noPadding, theme, width }) => {
+StyledFlexContainer.defaultProps = defaultThemeProp;
+export const StyledFlexItem = styled.div(({ inActive, noPadding, theme, width }) => {
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
-      border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};
-      padding: ${noPadding ? '0' : `calc(4 * ${theme.base.spacing}) `};
-      text-align: center;
-      background-color: ${inActive ? theme.base.colors.white : theme.base.colors.orange.light};
-      color: ${theme.base.colors.black};
+    border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};
+    padding: ${noPadding ? '0' : `calc(4 * ${theme.base.spacing}) `};
+    text-align: center;
+    background-color: ${inActive ? theme.base.colors.white : theme.base.colors.orange.light};
+    color: ${theme.base.colors.black};
 
-      ${width &&
+    ${width &&
         css `
-        width: ${width}rem;
-      `}
+      width: ${width}rem;
+    `}
 
-      span {
-        font-size: ${fontSize.xl};
-        font-weight: ${theme.base['font-weight'].bold};
-      }
-    `;
+    span {
+      font-size: ${fontSize.xl};
+      font-weight: ${theme.base['font-weight'].bold};
+    }
+  `;
 });
-StyledItem.defaultProps = defaultThemeProp;
+StyledFlexItem.defaultProps = defaultThemeProp;
 //# sourceMappingURL=Flex.styles.js.map