@pega/cosmos-react-demos 2.0.0

package/lib/dnd/DragDropList/DragDropList.stories.jsx

@@ -0,0 +1,119 @@
+import { useCallback, useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { optionsKnob } from '@storybook/addon-knobs';
+import styled from 'styled-components';
+import { Button, Flex, createUID } from '@pega/cosmos-react-core';
+import { DragDropManager, DragDropList } from '@pega/cosmos-react-dnd';
+export default {
+    title: 'DnD/DragDropList',
+    component: DragDropList,
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+const createMockDataArray = (length, type, listId) => {
+    return Array.from({ length }, (_, i) => {
+        const id = `${i}`;
+        return {
+            type,
+            id: createUID(),
+            data: {
+                content: `Item ${listId}:${id}`,
+                color: `hsl(${(i * 360) / length}deg, 100%, 66%)`
+            }
+        };
+    });
+};
+const StyledEmptyItem = styled.li `
+  display: grid;
+  padding: 1rem;
+  gap: 1rem;
+`;
+const EmptyItem = () => {
+    return <StyledEmptyItem>No Items</StyledEmptyItem>;
+};
+const StyledDemoDragDropList = styled.ul `
+  list-style: none;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 0.5rem;
+`;
+const StyledDemoDragDropListItem = styled.li `
+  border: 0.0625rem dashed gray;
+  margin: 0.5rem;
+  padding: 0.5rem;
+  background: white;
+  cursor: ${({ useDragHandle }) => (useDragHandle ? 'auto' : 'move')};
+  transition: transform 0.3s;
+
+  .handle {
+    background: pink;
+    width: 1rem;
+    height: 1rem;
+    display: inline-block;
+    margin-right: 0.0625rem;
+    cursor: move;
+  }
+`;
+const DemoListItem = ({ id, type, dragRef, data, isDragging, ...restProps }) => {
+    return (<StyledDemoDragDropListItem ref={dragRef} style={{
+            opacity: isDragging ? '0.5' : undefined,
+            backgroundColor: data?.color ?? 'white'
+        }} {...restProps}>
+      {data?.content}
+    </StyledDemoDragDropListItem>);
+};
+const pullModes = {
+    remove: 'remove',
+    clone: 'clone'
+};
+const pushModes = {
+    insert: 'insert',
+    prepend: 'prepend',
+    append: 'append',
+    sort: 'sort'
+};
+const sort = (a, b) => {
+    return a.data.content.localeCompare(b.data.content);
+};
+const itemType = Symbol('');
+const mockDataArrayA = createMockDataArray(10, itemType, 'A');
+const mockDataArrayB = createMockDataArray(4, itemType, 'B');
+export const DragDropListDemo = () => {
+    const pullMode = optionsKnob('Pull Mode', pullModes, 'remove', { display: 'inline-radio' });
+    const pushMode = optionsKnob('Push Mode', pushModes, 'insert', { display: 'inline-radio' });
+    const [arrayA, setArrayA] = useState(mockDataArrayA);
+    const [arrayB, setArrayB] = useState(mockDataArrayB);
+    return (<>
+      <Button onClick={useCallback(() => {
+            setArrayA(items => {
+                return [...items, ...createMockDataArray(1, itemType, 'A-new')];
+            });
+        }, [])}>
+        Add to List A
+      </Button>
+      <Button onClick={useCallback(() => {
+            setArrayB(items => {
+                return [...items, ...createMockDataArray(1, itemType, 'B-new')];
+            });
+        }, [])}>
+        Add to List B
+      </Button>
+      <DragDropManager>
+        <Flex container style={{ minHeight: '100vh' }}>
+          <DragDropList as={StyledDemoDragDropList} id='list1' accept={itemType} pullMode={pullMode} pushMode={pushMode === 'sort' ? sort : pushMode} items={arrayA} itemRenderer={DemoListItem} emptyRenderer={EmptyItem} onChange={newArray => {
+            setArrayA(newArray);
+            action('List A changed')(newArray);
+        }} style={{ background: 'palegreen' }}/>
+
+          <DragDropList as={StyledDemoDragDropList} id='list2' accept={itemType} pullMode={pullMode} pushMode={pushMode === 'sort' ? sort : pushMode} items={arrayB} itemRenderer={DemoListItem} emptyRenderer={EmptyItem} onChange={newArray => {
+            setArrayB(newArray);
+            action('List B changed')(newArray);
+        }} style={{ background: 'lightblue' }}/>
+        </Flex>
+      </DragDropManager>
+    </>);
+};
+//# sourceMappingURL=DragDropList.stories.jsx.map

package/lib/dnd/DragDropList/DragDropList.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropList.stories.jsx","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { optionsKnob } from '@storybook/addon-knobs';\nimport styled from 'styled-components';\n\nimport { Button, Flex, createUID } from '@pega/cosmos-react-core';\nimport {\n  DragDropManager,\n  DraggableItem,\n  DraggableProps,\n  DragDropList,\n  ItemRendererProps\n} from '@pega/cosmos-react-dnd';\n\nexport default {\n  title: 'DnD/DragDropList',\n  component: DragDropList,\n  parameters: {\n    layout: 'fullscreen'\n  }\n};\n\ninterface ItemData {\n  content: string;\n  color: string;\n}\n\n// Helper function to create demo arrays\nconst createMockDataArray = (\n  length: number,\n  type: DraggableProps['type'],\n  listId: string\n): DraggableItem<ItemData>[] => {\n  return Array.from({ length }, (_, i) => {\n    const id = `${i}`;\n    return {\n      type,\n      id: createUID(),\n      data: {\n        content: `Item ${listId}:${id}`,\n        color: `hsl(${(i * 360) / length}deg, 100%, 66%)`\n      }\n    };\n  });\n};\n\n// styled demo list component\nconst StyledEmptyItem = styled.li`\n  display: grid;\n  padding: 1rem;\n  gap: 1rem;\n`;\n\n// Demo component used to render list items\nconst EmptyItem = () => {\n  return <StyledEmptyItem>No Items</StyledEmptyItem>;\n};\n\n// styled demo list component\nconst StyledDemoDragDropList = styled.ul`\n  list-style: none;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  padding: 0.5rem;\n`;\n\n// styled demo list item component\nconst StyledDemoDragDropListItem = styled.li<{ [key: string]: any }>`\n  border: 0.0625rem dashed gray;\n  margin: 0.5rem;\n  padding: 0.5rem;\n  background: white;\n  cursor: ${({ useDragHandle }) => (useDragHandle ? 'auto' : 'move')};\n  transition: transform 0.3s;\n\n  .handle {\n    background: pink;\n    width: 1rem;\n    height: 1rem;\n    display: inline-block;\n    margin-right: 0.0625rem;\n    cursor: move;\n  }\n`;\n\n// Demo component used to render list items\nconst DemoListItem = ({\n  id,\n  type,\n  dragRef,\n  data,\n  isDragging,\n  ...restProps\n}: ItemRendererProps<ItemData>) => {\n  return (\n    <StyledDemoDragDropListItem\n      ref={dragRef}\n      style={{\n        opacity: isDragging ? '0.5' : undefined,\n        backgroundColor: data?.color ?? 'white'\n      }}\n      {...restProps}\n    >\n      {data?.content}\n    </StyledDemoDragDropListItem>\n  );\n};\n\nconst pullModes = {\n  remove: 'remove',\n  clone: 'clone'\n} as const;\n\nconst pushModes = {\n  insert: 'insert',\n  prepend: 'prepend',\n  append: 'append',\n  sort: 'sort'\n} as const;\n\nconst sort = (a: DraggableItem<ItemData>, b: DraggableItem<ItemData>): number => {\n  return a.data!.content.localeCompare(b.data!.content);\n};\n\nconst itemType = Symbol('');\nconst mockDataArrayA = createMockDataArray(10, itemType, 'A');\nconst mockDataArrayB = createMockDataArray(4, itemType, 'B');\n\n// -----------------------------------------------------------------------------\n// DragDropList\n// -----------------------------------------------------------------------------\nexport const DragDropListDemo = () => {\n  const pullMode = optionsKnob('Pull Mode', pullModes, 'remove', { display: 'inline-radio' });\n  const pushMode = optionsKnob('Push Mode', pushModes, 'insert', { display: 'inline-radio' });\n\n  const [arrayA, setArrayA] = useState(mockDataArrayA);\n  const [arrayB, setArrayB] = useState(mockDataArrayB);\n\n  return (\n    <>\n      <Button\n        onClick={useCallback(() => {\n          setArrayA(items => {\n            return [...items, ...createMockDataArray(1, itemType, 'A-new')];\n          });\n        }, [])}\n      >\n        Add to List A\n      </Button>\n      <Button\n        onClick={useCallback(() => {\n          setArrayB(items => {\n            return [...items, ...createMockDataArray(1, itemType, 'B-new')];\n          });\n        }, [])}\n      >\n        Add to List B\n      </Button>\n      <DragDropManager>\n        <Flex container style={{ minHeight: '100vh' }}>\n          <DragDropList\n            as={StyledDemoDragDropList}\n            id='list1'\n            accept={itemType}\n            pullMode={pullMode}\n            pushMode={pushMode === 'sort' ? sort : pushMode}\n            items={arrayA}\n            itemRenderer={DemoListItem}\n            emptyRenderer={EmptyItem}\n            onChange={newArray => {\n              setArrayA(newArray);\n              action('List A changed')(newArray);\n            }}\n            style={{ background: 'palegreen' }}\n          />\n\n          <DragDropList\n            as={StyledDemoDragDropList}\n            id='list2'\n            accept={itemType}\n            pullMode={pullMode}\n            pushMode={pushMode === 'sort' ? sort : pushMode}\n            items={arrayB}\n            itemRenderer={DemoListItem}\n            emptyRenderer={EmptyItem}\n            onChange={newArray => {\n              setArrayB(newArray);\n              action('List B changed')(newArray);\n            }}\n            style={{ background: 'lightblue' }}\n          />\n        </Flex>\n      </DragDropManager>\n    </>\n  );\n};\n"]}

package/lib/rte/RichTextEditor/RichTextEditor.mocks.d.ts

@@ -0,0 +1,3 @@
+import { MenuItemProps } from '@pega/cosmos-react-core';
+export declare const demoUsers: MenuItemProps[];
+//# sourceMappingURL=RichTextEditor.mocks.d.ts.map

package/lib/rte/RichTextEditor/RichTextEditor.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.mocks.d.ts","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextEditor.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGhE,eAAO,MAAM,SAAS,EAAE,aAAa,EA+BpC,CAAC"}

package/lib/rte/RichTextEditor/RichTextEditor.mocks.jsx

@@ -0,0 +1,34 @@
+import { Avatar } from '@pega/cosmos-react-core';
+export const demoUsers = [
+    {
+        id: 'turnc',
+        primary: 'Cindy Turner',
+        secondary: ['Lead Engineer'],
+        visual: <Avatar size='l' name='Cindy Turner'/>
+    },
+    {
+        id: 'deans',
+        primary: 'Seth DeAngelo',
+        secondary: ['Senior Software Engineer', 'Backend Developer'],
+        visual: <Avatar size='l' name='Seth DeAngelo'/>
+    },
+    {
+        id: 'moorj',
+        primary: 'Janet Moore',
+        secondary: ['Backend Developer'],
+        visual: <Avatar size='l' name='Janet Moore'/>
+    },
+    {
+        id: 'thomd',
+        primary: 'Dean Thomas',
+        secondary: ['Designer'],
+        visual: <Avatar size='l' name='Dean Thomas'/>
+    },
+    {
+        id: 'hathb',
+        primary: 'Bob Hathoway',
+        secondary: ['Lead Designer', 'Product Owner'],
+        visual: <Avatar size='l' name='Bob Hathoway'/>
+    }
+];
+//# sourceMappingURL=RichTextEditor.mocks.jsx.map

package/lib/rte/RichTextEditor/RichTextEditor.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.mocks.jsx","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextEditor.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAiB,MAAM,yBAAyB,CAAC;AAGhE,MAAM,CAAC,MAAM,SAAS,GAAoB;IACxC;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,cAAc;QACvB,SAAS,EAAE,CAAC,eAAe,CAAC;QAC5B,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,EAAG;KAChD;IACD;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,eAAe;QACxB,SAAS,EAAE,CAAC,0BAA0B,EAAE,mBAAmB,CAAC;QAC5D,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,EAAG;KACjD;IACD;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,aAAa;QACtB,SAAS,EAAE,CAAC,mBAAmB,CAAC;QAChC,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,EAAG;KAC/C;IACD;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,aAAa;QACtB,SAAS,EAAE,CAAC,UAAU,CAAC;QACvB,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,EAAG;KAC/C;IACD;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,cAAc;QACvB,SAAS,EAAE,CAAC,eAAe,EAAE,eAAe,CAAC;QAC7C,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,EAAG;KAChD;CACF,CAAC","sourcesContent":["import { Avatar, MenuItemProps } from '@pega/cosmos-react-core';\n\n// cspell:disable\nexport const demoUsers: MenuItemProps[] = [\n  {\n    id: 'turnc',\n    primary: 'Cindy Turner',\n    secondary: ['Lead Engineer'],\n    visual: <Avatar size='l' name='Cindy Turner' />\n  },\n  {\n    id: 'deans',\n    primary: 'Seth DeAngelo',\n    secondary: ['Senior Software Engineer', 'Backend Developer'],\n    visual: <Avatar size='l' name='Seth DeAngelo' />\n  },\n  {\n    id: 'moorj',\n    primary: 'Janet Moore',\n    secondary: ['Backend Developer'],\n    visual: <Avatar size='l' name='Janet Moore' />\n  },\n  {\n    id: 'thomd',\n    primary: 'Dean Thomas',\n    secondary: ['Designer'],\n    visual: <Avatar size='l' name='Dean Thomas' />\n  },\n  {\n    id: 'hathb',\n    primary: 'Bob Hathoway',\n    secondary: ['Lead Designer', 'Product Owner'],\n    visual: <Avatar size='l' name='Bob Hathoway' />\n  }\n];\n"]}

package/lib/rte/RichTextEditor/RichTextEditor.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Meta, Story } from '@storybook/react';
+import { RichTextEditorProps } from '@pega/cosmos-react-rte';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const RichTextEditorDemo: Story<RichTextEditorProps>;
+export declare const RichTextEditorWithLogs: () => JSX.Element;
+export declare const RichTextEditorMDDemo: Story<RichTextEditorProps>;
+export declare const RichTextEditorHtmlParsingDemo: () => JSX.Element;
+//# sourceMappingURL=RichTextEditor.stories.d.ts.map

package/lib/rte/RichTextEditor/RichTextEditor.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextEditor.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAa/C,OAAO,EAAkB,mBAAmB,EAAuB,MAAM,wBAAwB,CAAC;;AAIlG,wBAqBU;AAEV,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,mBAAmB,CAkDzD,CAAC;AAEF,eAAO,MAAM,sBAAsB,mBA2ClC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,mBAAmB,CAuC3D,CAAC;AAEF,eAAO,MAAM,6BAA6B,mBAuCzC,CAAC"}

package/lib/rte/RichTextEditor/RichTextEditor.stories.jsx

@@ -0,0 +1,145 @@
+import { useState, useRef } from 'react';
+import { Button, Flex, Text, Card, CardContent, CardFooter, TextArea } from '@pega/cosmos-react-core';
+import { RichTextEditor } from '@pega/cosmos-react-rte';
+import { demoUsers } from './RichTextEditor.mocks';
+export default {
+    title: 'RTE/RichTextEditor',
+    component: RichTextEditor,
+    args: {
+        label: 'Rich text editor',
+        labelHidden: false,
+        info: 'The rich text editor can be used in forms, comments, and documents',
+        status: undefined,
+        required: false,
+        disabled: false,
+        readOnly: false
+    },
+    argTypes: {
+        label: { control: { type: 'text' } },
+        labelHidden: { control: { type: 'boolean' } },
+        info: { control: { type: 'text' } },
+        status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+        required: { control: { type: 'boolean' } },
+        disabled: { control: { type: 'boolean' } },
+        readOnly: { control: { type: 'boolean' } }
+    }
+};
+export const RichTextEditorDemo = (args) => {
+    const editorRef = useRef(null);
+    const onImageAdded = (image, id) => {
+        const src = URL.createObjectURL(image);
+        editorRef.current?.appendImage({ src, alt: image.name }, id);
+    };
+    const overwriteText = () => {
+        editorRef.current?.insertHtml('<p>Hello world!</p>', true);
+    };
+    const insertText = () => {
+        editorRef.current?.insertText('Hi mom!');
+    };
+    return (<Flex container={{ direction: 'column', gap: 2 }}>
+      <RichTextEditor ref={editorRef} toolbar={[
+            'inline-styling',
+            'headers',
+            'tables',
+            'links',
+            'images',
+            'lists',
+            'cut-copy-paste',
+            'indentation'
+        ]} onImageAdded={onImageAdded} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} defaultValue='<body><!-- I will break the RTE --><p> Life is stress free.</p><p> Life is stress free.</p></body>'/>
+      <Flex container={{ gap: 1 }}>
+        <Button onClick={overwriteText}>
+          Overwrite RTE value with &#39;Hello world!&#39; HTML
+        </Button>
+        <Button onClick={insertText} label='RTE Must be focused for insert text to work'>
+          Insert &#39;Hi mom!&#39;
+        </Button>
+      </Flex>
+    </Flex>);
+};
+export const RichTextEditorWithLogs = () => {
+    const editorRef = useRef(null);
+    const [content, setContent] = useState();
+    const onImageAdded = (image, id) => {
+        const src = URL.createObjectURL(image);
+        editorRef.current?.appendImage({ src, alt: image.name }, id);
+    };
+    const showContent = (type) => {
+        if (type === 'html')
+            setContent(editorRef.current?.getHtml());
+        else if (type === 'plain_text')
+            setContent(editorRef.current?.getPlainText());
+        else if (type === 'rich_text')
+            setContent(editorRef.current?.getRichText());
+    };
+    return (<Flex container={{ direction: 'column', gap: 2 }}>
+      <RichTextEditor ref={editorRef} toolbar={[
+            'inline-styling',
+            'headers',
+            'tables',
+            'links',
+            'images',
+            'lists',
+            'cut-copy-paste',
+            'indentation'
+        ]} onImageAdded={onImageAdded} label='Rich text editor with logs' info='Click on the buttons below to show the different formatted outputs of the RTE'/>
+
+      <Flex container={{ gap: 1 }}>
+        <Button onClick={() => showContent('html')}>Show HTML</Button>
+        <Button onClick={() => showContent('plain_text')}>Show plain text</Button>
+        <Button onClick={() => showContent('rich_text')}>Show rich text</Button>
+      </Flex>
+
+      <Text>{content}</Text>
+    </Flex>);
+};
+export const RichTextEditorMDDemo = (args) => {
+    const [users, setUsers] = useState(demoUsers);
+    const searchUsers = (event) => {
+        if (event.trigger === '@') {
+            setUsers(demoUsers.filter(user => {
+                return user.primary.toLowerCase().includes(event.search.toLowerCase());
+            }));
+        }
+    };
+    return (<RichTextEditor searchTriggers={[{ trigger: '@', regex: String.raw `[a-zA-Z]*(?: [a-zA-Z]*)?` }]} onSearch={searchUsers} getSearchItemReplacement={(id) => {
+            const item = demoUsers.find(({ id: itemId }) => itemId === id);
+            if (!item)
+                return undefined;
+            return {
+                markdown: `@${item.id}:${item.primary}:user:`,
+                text: item.primary
+            };
+        }} menu={users.length ? { items: users } : undefined} autoFocus markdownOnly label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
+};
+export const RichTextEditorHtmlParsingDemo = () => {
+    const [html, setHtml] = useState('<p>Hello world!</p>');
+    const rteRef = useRef(null);
+    const onImageAdded = (image, id) => {
+        const src = URL.createObjectURL(image);
+        rteRef.current?.appendImage({ src, alt: image.name }, id);
+    };
+    return (<Flex container={{ direction: 'column', gap: 2 }}>
+      <Card>
+        <CardContent>
+          <TextArea value={html} onChange={e => setHtml(e.target.value)}/>
+        </CardContent>
+        <CardFooter>
+          <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>
+            Overwrite RTE with new HTML
+          </Button>
+        </CardFooter>
+      </Card>
+      <RichTextEditor defaultValue={html} onImageAdded={onImageAdded} ref={rteRef} label='Rich text editor' toolbar={[
+            'inline-styling',
+            'headers',
+            'tables',
+            'links',
+            'images',
+            'lists',
+            'cut-copy-paste',
+            'indentation'
+        ]}/>
+    </Flex>);
+};
+//# sourceMappingURL=RichTextEditor.stories.jsx.map

package/lib/rte/RichTextEditor/RichTextEditor.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.stories.jsx","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextEditor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useRef } from 'react';\n\nimport {\n  Button,\n  Flex,\n  MenuItemProps,\n  Text,\n  Card,\n  CardContent,\n  CardFooter,\n  TextArea\n} from '@pega/cosmos-react-core';\nimport { RichTextEditor, RichTextEditorProps, RichTextEditorState } from '@pega/cosmos-react-rte';\n\nimport { demoUsers } from './RichTextEditor.mocks';\n\nexport default {\n  title: 'RTE/RichTextEditor',\n  component: RichTextEditor,\n  args: {\n    label: 'Rich text editor',\n    labelHidden: false,\n    info: 'The rich text editor can be used in forms, comments, and documents',\n    status: undefined,\n    required: false,\n    disabled: false,\n    readOnly: false\n  },\n  argTypes: {\n    label: { control: { type: 'text' } },\n    labelHidden: { control: { type: 'boolean' } },\n    info: { control: { type: 'text' } },\n    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\nexport const RichTextEditorDemo: Story<RichTextEditorProps> = (args: RichTextEditorProps) => {\n  const editorRef = useRef<RichTextEditorState>(null);\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  const overwriteText = () => {\n    editorRef.current?.insertHtml('<p>Hello world!</p>', true);\n  };\n\n  const insertText = () => {\n    editorRef.current?.insertText('Hi mom!');\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        toolbar={[\n          'inline-styling',\n          'headers',\n          'tables',\n          'links',\n          'images',\n          'lists',\n          'cut-copy-paste',\n          'indentation'\n        ]}\n        onImageAdded={onImageAdded}\n        label={args.label}\n        labelHidden={args.labelHidden}\n        info={args.info}\n        status={args.status}\n        required={args.required}\n        disabled={args.disabled}\n        readOnly={args.readOnly}\n        defaultValue='<body><!-- I will break the RTE --><p> Life is stress free.</p><p> Life is stress free.</p></body>'\n      />\n      <Flex container={{ gap: 1 }}>\n        <Button onClick={overwriteText}>\n          Overwrite RTE value with &#39;Hello world!&#39; HTML\n        </Button>\n        <Button onClick={insertText} label='RTE Must be focused for insert text to work'>\n          Insert &#39;Hi mom!&#39;\n        </Button>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport const RichTextEditorWithLogs = () => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState<string | undefined>();\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  const showContent = (type: 'html' | 'plain_text' | 'rich_text') => {\n    if (type === 'html') setContent(editorRef.current?.getHtml());\n    else if (type === 'plain_text') setContent(editorRef.current?.getPlainText());\n    else if (type === 'rich_text') setContent(editorRef.current?.getRichText());\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        toolbar={[\n          'inline-styling',\n          'headers',\n          'tables',\n          'links',\n          'images',\n          'lists',\n          'cut-copy-paste',\n          'indentation'\n        ]}\n        onImageAdded={onImageAdded}\n        label='Rich text editor with logs'\n        info='Click on the buttons below to show the different formatted outputs of the RTE'\n      />\n\n      <Flex container={{ gap: 1 }}>\n        <Button onClick={() => showContent('html')}>Show HTML</Button>\n        <Button onClick={() => showContent('plain_text')}>Show plain text</Button>\n        <Button onClick={() => showContent('rich_text')}>Show rich text</Button>\n      </Flex>\n\n      <Text>{content}</Text>\n    </Flex>\n  );\n};\n\nexport const RichTextEditorMDDemo: Story<RichTextEditorProps> = (args: RichTextEditorProps) => {\n  const [users, setUsers] = useState<MenuItemProps[]>(demoUsers);\n\n  const searchUsers = (event: { search: string; trigger: string }) => {\n    if (event.trigger === '@') {\n      setUsers(\n        demoUsers.filter(user => {\n          return user.primary.toLowerCase().includes(event.search.toLowerCase());\n        })\n      );\n    }\n  };\n\n  return (\n    <RichTextEditor\n      searchTriggers={[{ trigger: '@', regex: String.raw`[a-zA-Z]*(?: [a-zA-Z]*)?` }]}\n      onSearch={searchUsers}\n      getSearchItemReplacement={(id: string) => {\n        const item = demoUsers.find(({ id: itemId }) => itemId === id);\n\n        if (!item) return undefined;\n\n        return {\n          markdown: `@${item.id}:${item.primary}:user:`,\n          text: item.primary\n        };\n      }}\n      menu={users.length ? { items: users } : undefined}\n      autoFocus\n      markdownOnly\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nexport const RichTextEditorHtmlParsingDemo = () => {\n  const [html, setHtml] = useState('<p>Hello world!</p>');\n  const rteRef = useRef<RichTextEditorState>(null);\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    rteRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Card>\n        <CardContent>\n          <TextArea value={html} onChange={e => setHtml(e.target.value)} />\n        </CardContent>\n        <CardFooter>\n          <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n            Overwrite RTE with new HTML\n          </Button>\n        </CardFooter>\n      </Card>\n      <RichTextEditor\n        defaultValue={html}\n        onImageAdded={onImageAdded}\n        ref={rteRef}\n        label='Rich text editor'\n        toolbar={[\n          'inline-styling',\n          'headers',\n          'tables',\n          'links',\n          'images',\n          'lists',\n          'cut-copy-paste',\n          'indentation'\n        ]}\n      />\n    </Flex>\n  );\n};\n"]}

package/lib/rte/RichTextEditor/RichTextViewer.stories.d.ts

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

package/lib/rte/RichTextEditor/RichTextViewer.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextViewer.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextViewer.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAcxC,wBAGU;AAEV,eAAO,MAAM,sBAAsB,mBAuBlC,CAAC;AAEF,eAAO,MAAM,oBAAoB,mBA4DhC,CAAC"}

package/lib/rte/RichTextEditor/RichTextViewer.stories.jsx

@@ -0,0 +1,62 @@
+import { useRef, useState } from 'react';
+import { Flex, Link } from '@pega/cosmos-react-core';
+import { HashtagButtonConfig, MentionButtonConfig } from '@pega/cosmos-react-social';
+import { RichTextEditor, RichTextViewer } from '@pega/cosmos-react-rte';
+import { demoUsers } from './RichTextEditor.mocks';
+export default {
+    title: 'RTE/RichTextViewer',
+    component: RichTextViewer
+};
+export const RichTextViewerHTMLDemo = () => {
+    const editorRef = useRef(null);
+    const [content, setContent] = useState('');
+    return (<Flex container={{ direction: 'column', gap: 2 }}>
+      <RichTextEditor ref={editorRef} toolbar={[
+            'inline-styling',
+            'headers',
+            'tables',
+            'links',
+            'lists',
+            'cut-copy-paste',
+            'indentation'
+        ]} onChange={() => setContent(editorRef.current?.getHtml() || '')}/>
+
+      <RichTextViewer content={content} type='html'/>
+    </Flex>);
+};
+export const RichTextViewerMDDemo = () => {
+    const LinkComponent = ({ token }) => {
+        return (<Link href={token.href} previewable>
+        {token.text}
+      </Link>);
+    };
+    const editorRef = useRef(null);
+    const [content, setContent] = useState('');
+    const [users, setUsers] = useState(demoUsers);
+    const searchUsers = (event) => {
+        if (event.trigger === '@') {
+            setUsers(demoUsers.filter(user => {
+                return user.primary.toLowerCase().includes(event.search.toLowerCase());
+            }));
+        }
+    };
+    return (<Flex container={{ direction: 'column', gap: 2 }}>
+      <RichTextEditor ref={editorRef} searchTriggers={[{ trigger: '@', regex: String.raw `[a-zA-Z]*(?: [a-zA-Z]*)?` }]} onSearch={searchUsers} getSearchItemReplacement={(id) => {
+            const item = demoUsers.find(({ id: itemId }) => itemId === id);
+            if (!item)
+                return undefined;
+            return {
+                markdown: `@${item.id}:${item.primary}:user:`,
+                text: item.primary
+            };
+        }} menu={users.length ? { items: users } : undefined} autoFocus markdownOnly defaultValue={'# Try writing some of your own markdown and see how it renders!\n\nYou can interact with mentions such as @deans:Seth DeAngelo:user:\n\nThere is built in support for #tags as well!\n\nComponent renderings can also be conditionally overwritten: [Link](https://www.google.com) -- [Link with preview](https://www.pega.com)'} onChange={() => setContent(editorRef.current?.getPlainText() || '')}/>
+
+      <RichTextViewer content={content} type='markdown' interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]} markdownMap={{
+            link: (linkToken) => {
+                if (linkToken.href?.includes('www.pega.com'))
+                    return LinkComponent;
+            }
+        }}/>
+    </Flex>);
+};
+//# sourceMappingURL=RichTextViewer.stories.jsx.map

package/lib/rte/RichTextEditor/RichTextViewer.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextViewer.stories.jsx","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextViewer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { Flex, Link, MenuItemProps } from '@pega/cosmos-react-core';\nimport { HashtagButtonConfig, MentionButtonConfig } from '@pega/cosmos-react-social';\nimport {\n  RichTextEditor,\n  RichTextViewer,\n  RichTextEditorState,\n  TokenMap\n} from '@pega/cosmos-react-rte';\n\nimport { demoUsers } from './RichTextEditor.mocks';\n\nexport default {\n  title: 'RTE/RichTextViewer',\n  component: RichTextViewer\n} as Meta;\n\nexport const RichTextViewerHTMLDemo = () => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState('');\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        toolbar={[\n          'inline-styling',\n          'headers',\n          'tables',\n          'links',\n          'lists',\n          'cut-copy-paste',\n          'indentation'\n        ]}\n        onChange={() => setContent(editorRef.current?.getHtml() || '')}\n      />\n\n      <RichTextViewer content={content} type='html' />\n    </Flex>\n  );\n};\n\nexport const RichTextViewerMDDemo = () => {\n  const LinkComponent = ({ token }: { token: TokenMap['link'] }) => {\n    return (\n      <Link href={token.href} previewable>\n        {token.text}\n      </Link>\n    );\n  };\n\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState('');\n  const [users, setUsers] = useState<MenuItemProps[]>(demoUsers);\n\n  const searchUsers = (event: { search: string; trigger: string }) => {\n    if (event.trigger === '@') {\n      setUsers(\n        demoUsers.filter(user => {\n          return user.primary.toLowerCase().includes(event.search.toLowerCase());\n        })\n      );\n    }\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        searchTriggers={[{ trigger: '@', regex: String.raw`[a-zA-Z]*(?: [a-zA-Z]*)?` }]}\n        onSearch={searchUsers}\n        getSearchItemReplacement={(id: string) => {\n          const item = demoUsers.find(({ id: itemId }) => itemId === id);\n\n          if (!item) return undefined;\n\n          return {\n            markdown: `@${item.id}:${item.primary}:user:`,\n            text: item.primary\n          };\n        }}\n        menu={users.length ? { items: users } : undefined}\n        autoFocus\n        markdownOnly\n        defaultValue={\n          '# Try writing some of your own markdown and see how it renders!\\n\\nYou can interact with mentions such as @deans:Seth DeAngelo:user:\\n\\nThere is built in support for #tags as well!\\n\\nComponent renderings can also be conditionally overwritten: [Link](https://www.google.com) -- [Link with preview](https://www.pega.com)'\n        }\n        onChange={() => setContent(editorRef.current?.getPlainText() || '')}\n      />\n\n      <RichTextViewer\n        content={content}\n        type='markdown'\n        interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]}\n        markdownMap={{\n          link: (linkToken: TokenMap['link']) => {\n            if (linkToken.href?.includes('www.pega.com')) return LinkComponent;\n          }\n        }}\n      />\n    </Flex>\n  );\n};\n"]}