@pega/cosmos-react-demos 6.6.0 → 6.6.2

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

@@ -1,34 +0,0 @@
-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/jsx/rte/RichTextEditor/RichTextEditor.mocks.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"RichTextEditor.mocks.jsx","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextEditor.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAIjD,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 } from '@pega/cosmos-react-core';\nimport type { 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// cspell:enable\n"]}

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

@@ -1,7 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-import type { RichTextEditorProps } from '@pega/cosmos-react-rte';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-export declare const RichTextEditorMDDemo: StoryFn<RichTextEditorProps>;
-export declare const RichTextEditorImperativeHandleDemo: StoryFn;
-//# sourceMappingURL=RichTextEditor.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"RichTextEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextEditor.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAKtD,OAAO,KAAK,EAAE,mBAAmB,EAAuB,MAAM,wBAAwB,CAAC;;AAKvF,wBAsBU;AAEV,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,mBAAmB,CA6C7D,CAAC;AAEF,eAAO,MAAM,kCAAkC,EAAE,OA0FhD,CAAC"}

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

@@ -1,108 +0,0 @@
-import { useRef, useState } from 'react';
-import { Button, Flex } from '@pega/cosmos-react-core';
-import { RichTextEditor } from '@pega/cosmos-react-rte';
-import { MentionButton } from '@pega/cosmos-react-social';
-import { demoUsers } from './RichTextEditor.mocks';
-export default {
-    title: 'RTE/RichTextEditor',
-    component: RichTextEditor,
-    args: {
-        label: 'Rich text editor',
-        labelHidden: false,
-        info: 'The markdown editor offers dynamic rendering of markdown syntax',
-        status: undefined,
-        required: false,
-        disabled: false,
-        readOnly: false
-    },
-    argTypes: {
-        label: { control: { type: 'text' } },
-        labelHidden: { control: { type: 'boolean' } },
-        info: { control: { type: 'text', label: 'Helper text' } },
-        status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
-        required: { control: { type: 'boolean' } },
-        disabled: { control: { type: 'boolean' } },
-        readOnly: { control: { type: 'boolean' } }
-    }
-};
-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: '[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,
-                component: MentionButton,
-                props: {
-                    id: item.id,
-                    text: item.primary,
-                    type: 'user'
-                }
-            };
-        }} menu={users.length ? { items: users } : undefined} markdownOnly label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} autoFocus/>);
-};
-export const RichTextEditorImperativeHandleDemo = () => {
-    const rteRef = useRef(null);
-    const [textContent, setTextContent] = useState('');
-    return (<>
-      <RichTextEditor ref={rteRef} type='html' toolbar={['headers', 'inline-styling', 'indentation', 'lists']} defaultValue='Hello, World! '/>
-      <Flex container={{ gap: 1, pad: 1 }}>
-        <Button data-testid='focusHandle' onClick={() => {
-            rteRef.current?.focus();
-        }}>
-          Focus
-        </Button>
-        <Button data-testid='plainTextHandle' onClick={() => {
-            setTextContent(rteRef.current?.getPlainText() || '');
-        }}>
-          Get plain text
-        </Button>
-        <Button data-testid='richTextHandle' onClick={() => {
-            setTextContent(rteRef.current?.getRichText() || '');
-        }}>
-          Get rich text
-        </Button>
-        <Button data-testid='htmlHandle' onClick={() => {
-            setTextContent(rteRef.current?.getHtml() || '');
-        }}>
-          Get HTML
-        </Button>
-        <Button data-testid='clearHandle' onClick={() => {
-            rteRef.current?.clear();
-        }}>
-          Clear
-        </Button>
-        <Button data-testid='insertTextHandle' onClick={() => {
-            rteRef.current?.insertText('Some text');
-        }}>
-          Insert text
-        </Button>
-        <Button data-testid='insertHTMLHandle' onClick={() => {
-            rteRef.current?.insertHtml('Some text', true);
-        }}>
-          Insert HTML
-        </Button>
-        <Button data-testid='appendHTMLHandle' onClick={() => {
-            rteRef.current?.insertHtml('Some text', false);
-        }}>
-          Append HTML
-        </Button>
-        <Button data-testid='insertEmptyHTMLHandle' onClick={() => {
-            rteRef.current?.insertHtml('', true);
-        }}>
-          Insert empty HTML
-        </Button>
-      </Flex>
-      <div data-testid='textRegion'>{textContent}</div>
-    </>);
-};
-//# sourceMappingURL=RichTextEditor.stories.jsx.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"RichTextEditor.stories.jsx","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextEditor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { Button, Flex, type MenuItemProps } from '@pega/cosmos-react-core';\nimport { RichTextEditor } from '@pega/cosmos-react-rte';\nimport type { RichTextEditorProps, RichTextEditorState } from '@pega/cosmos-react-rte';\nimport { MentionButton } from '@pega/cosmos-react-social';\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 markdown editor offers dynamic rendering of markdown syntax',\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', label: 'Helper 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  // excludeStories: ['RichTextEditorImperativeHandleDemo']\n} as Meta;\n\nexport const RichTextEditorMDDemo: StoryFn<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: '[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          component: MentionButton,\n          props: {\n            id: item.id,\n            text: item.primary,\n            type: 'user'\n          }\n        };\n      }}\n      menu={users.length ? { items: users } : undefined}\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      autoFocus\n    />\n  );\n};\n\nexport const RichTextEditorImperativeHandleDemo: StoryFn = () => {\n  const rteRef = useRef<RichTextEditorState>(null);\n\n  const [textContent, setTextContent] = useState('');\n\n  return (\n    <>\n      <RichTextEditor\n        ref={rteRef}\n        type='html'\n        toolbar={['headers', 'inline-styling', 'indentation', 'lists']}\n        defaultValue='Hello, World! '\n      />\n      <Flex container={{ gap: 1, pad: 1 }}>\n        <Button\n          data-testid='focusHandle'\n          onClick={() => {\n            rteRef.current?.focus();\n          }}\n        >\n          Focus\n        </Button>\n        <Button\n          data-testid='plainTextHandle'\n          onClick={() => {\n            setTextContent(rteRef.current?.getPlainText() || '');\n          }}\n        >\n          Get plain text\n        </Button>\n        <Button\n          data-testid='richTextHandle'\n          onClick={() => {\n            setTextContent(rteRef.current?.getRichText() || '');\n          }}\n        >\n          Get rich text\n        </Button>\n        <Button\n          data-testid='htmlHandle'\n          onClick={() => {\n            setTextContent(rteRef.current?.getHtml() || '');\n          }}\n        >\n          Get HTML\n        </Button>\n        <Button\n          data-testid='clearHandle'\n          onClick={() => {\n            rteRef.current?.clear();\n          }}\n        >\n          Clear\n        </Button>\n        <Button\n          data-testid='insertTextHandle'\n          onClick={() => {\n            rteRef.current?.insertText('Some text');\n          }}\n        >\n          Insert text\n        </Button>\n        <Button\n          data-testid='insertHTMLHandle'\n          onClick={() => {\n            rteRef.current?.insertHtml('Some text', true);\n          }}\n        >\n          Insert HTML\n        </Button>\n        <Button\n          data-testid='appendHTMLHandle'\n          onClick={() => {\n            rteRef.current?.insertHtml('Some text', false);\n          }}\n        >\n          Append HTML\n        </Button>\n        <Button\n          data-testid='insertEmptyHTMLHandle'\n          onClick={() => {\n            rteRef.current?.insertHtml('', true);\n          }}\n        >\n          Insert empty HTML\n        </Button>\n      </Flex>\n      <div data-testid='textRegion'>{textContent}</div>\n    </>\n  );\n};\n"]}

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

@@ -1,13 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-import type { RichTextViewerProps } from '@pega/cosmos-react-rte';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-interface RichTextViewerDemoProps {
-    content?: RichTextViewerProps['content'];
-    interactionRenderers?: boolean;
-}
-export declare const RichTextViewerDemo: StoryFn<RichTextViewerDemoProps>;
-export declare const RichTextViewerHTMLDemo: StoryFn<RichTextViewerDemoProps>;
-export declare const RichTextViewerHTMLOverflowDemo: StoryFn;
-export declare const RichTextViewerMDDemo: StoryFn<RichTextViewerDemoProps>;
-//# sourceMappingURL=RichTextViewer.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"RichTextViewer.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextViewer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAOtD,OAAO,KAAK,EAAuB,mBAAmB,EAAY,MAAM,wBAAwB,CAAC;;AAIjG,wBAWU;AAEV,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACzC,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,uBAAuB,CAyB/D,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,OAAO,CAAC,uBAAuB,CAsCnE,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,OA0B5C,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,uBAAuB,CAuGjE,CAAC"}

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

@@ -1,151 +0,0 @@
-import { useRef, useState } from 'react';
-import { Flex, Link } from '@pega/cosmos-react-core';
-import { HashtagButtonConfig, MentionButtonConfig } from '@pega/cosmos-react-social';
-import { RichTextViewer, RichTextEditor, getXMLAttributes } from '@pega/cosmos-react-rte';
-import { demoUsers } from './RichTextEditor.mocks';
-export default {
-    title: 'RTE/RichTextViewer',
-    component: RichTextViewer,
-    args: {
-        content: undefined,
-        interactionRenderers: false
-    },
-    argTypes: {
-        content: { control: { type: 'text' }, table: { disable: true } },
-        interactionRenderers: { control: { type: 'boolean' } }
-    }
-};
-export const RichTextViewerDemo = (args) => {
-    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?.getRichText() || '')}/>
-
-      <RichTextViewer content={args.content || content} type='richtext'/>
-    </Flex>);
-};
-export const RichTextViewerHTMLDemo = (args) => {
-    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={args.content || content} type='html' interactionRenderers={args.interactionRenderers
-            ? [
-                {
-                    regexPattern: /A custom pattern/g,
-                    type: 'custom'
-                }
-            ]
-            : undefined}/>
-    </Flex>);
-};
-export const RichTextViewerHTMLOverflowDemo = () => {
-    const editorRef = useRef(null);
-    const [content, setContent] = useState(() => "<p style='background-color: green; width: 110%; height: 100px;'>hi</p>");
-    return (<Flex container={{ direction: 'column', gap: 2 }}>
-      <RichTextEditor ref={editorRef} toolbar={[
-            'inline-styling',
-            'headers',
-            'tables',
-            'links',
-            'lists',
-            'cut-copy-paste',
-            'indentation'
-        ]} defaultValue={content} onChange={() => setContent(editorRef.current?.getHtml() || '')}/>
-
-      <RichTextViewer content={content} type='html'/>
-    </Flex>);
-};
-export const RichTextViewerMDDemo = (args) => {
-    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());
-            }));
-        }
-    };
-    const getSearchAttributes = (xmlElement, searchResult) => {
-        if (xmlElement === 'pega-mention') {
-            const attributes = getXMLAttributes(searchResult);
-            if (!attributes)
-                return;
-            return {
-                markdown: searchResult,
-                component: MentionButtonConfig.component,
-                props: attributes,
-                text: attributes.text
-            };
-        }
-    };
-    return (<Flex container={{ direction: 'column', gap: 2 }}>
-      <RichTextEditor markdownOnly ref={editorRef} searchTriggers={[
-            { trigger: '@', regex: String.raw `(?:\S+(?:[^\n\S][^@#\s]\S*)*[^\n\S]?|)` },
-            { trigger: '#', regex: String.raw `[^\s,]*` }
-        ]} getSearchItemReplacement={(id) => {
-            const item = users.find(({ id: itemId }) => itemId === id);
-            if (!item)
-                return undefined;
-            return {
-                markdown: MentionButtonConfig.inject({
-                    id: item.id,
-                    type: 'user',
-                    text: item.primary
-                }),
-                component: MentionButtonConfig.component,
-                props: {
-                    id: item.id,
-                    text: item.primary,
-                    type: 'user',
-                    tabIndex: -1
-                },
-                text: item.primary
-            };
-        }} searchRenderers={[
-            {
-                type: MentionButtonConfig.type,
-                xmlElement: MentionButtonConfig.xmlElement,
-                regexPattern: MentionButtonConfig.regexPattern,
-                getSearchAttributes
-            },
-            {
-                type: HashtagButtonConfig.type,
-                xmlElement: HashtagButtonConfig.xmlElement,
-                regexPattern: HashtagButtonConfig.regexPattern,
-                getSearchAttributes
-            }
-        ]} onSearch={searchUsers} menu={users.length ? { items: users } : undefined} defaultValue={"# Try writing some of your own markdown and see how it renders!\n\nYou can interact with mentions such as <pega-mention id='deans' text='Seth DeAngelo' type='user'/>\n\nThere is built in support for <pega-tag tag='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={args.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/jsx/rte/RichTextEditor/RichTextViewer.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"RichTextViewer.stories.jsx","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextViewer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { Flex, Link } from '@pega/cosmos-react-core';\nimport type { MenuItemProps } from '@pega/cosmos-react-core';\nimport { HashtagButtonConfig, MentionButtonConfig } from '@pega/cosmos-react-social';\nimport { RichTextViewer, RichTextEditor, getXMLAttributes } from '@pega/cosmos-react-rte';\nimport type { RichTextEditorState, RichTextViewerProps, TokenMap } from '@pega/cosmos-react-rte';\n\nimport { demoUsers } from './RichTextEditor.mocks';\n\nexport default {\n  title: 'RTE/RichTextViewer',\n  component: RichTextViewer,\n  args: {\n    content: undefined,\n    interactionRenderers: false\n  },\n  argTypes: {\n    content: { control: { type: 'text' }, table: { disable: true } },\n    interactionRenderers: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface RichTextViewerDemoProps {\n  content?: RichTextViewerProps['content'];\n  interactionRenderers?: boolean;\n}\n\nexport const RichTextViewerDemo: StoryFn<RichTextViewerDemoProps> = (\n  args: RichTextViewerDemoProps\n) => {\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?.getRichText() || '')}\n      />\n\n      <RichTextViewer content={args.content || content} type='richtext' />\n    </Flex>\n  );\n};\n\nexport const RichTextViewerHTMLDemo: StoryFn<RichTextViewerDemoProps> = (\n  args: RichTextViewerDemoProps\n) => {\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\n        content={args.content || content}\n        type='html'\n        interactionRenderers={\n          args.interactionRenderers\n            ? [\n                {\n                  regexPattern: /A custom pattern/g,\n                  type: 'custom'\n                }\n              ]\n            : undefined\n        }\n      />\n    </Flex>\n  );\n};\n\nexport const RichTextViewerHTMLOverflowDemo: StoryFn = () => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState(\n    () => \"<p style='background-color: green; width: 110%; height: 100px;'>hi</p>\"\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          'lists',\n          'cut-copy-paste',\n          'indentation'\n        ]}\n        defaultValue={content}\n        onChange={() => setContent(editorRef.current?.getHtml() || '')}\n      />\n\n      <RichTextViewer content={content} type='html' />\n    </Flex>\n  );\n};\n\nexport const RichTextViewerMDDemo: StoryFn<RichTextViewerDemoProps> = (\n  args: RichTextViewerDemoProps\n) => {\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  const getSearchAttributes = (xmlElement: string, searchResult: string) => {\n    if (xmlElement === 'pega-mention') {\n      const attributes = getXMLAttributes(searchResult);\n\n      if (!attributes) return;\n      return {\n        markdown: searchResult,\n        component: MentionButtonConfig.component,\n        props: attributes,\n        text: attributes.text\n      };\n    }\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        markdownOnly\n        ref={editorRef}\n        searchTriggers={[\n          { trigger: '@', regex: String.raw`(?:\\S+(?:[^\\n\\S][^@#\\s]\\S*)*[^\\n\\S]?|)` },\n          { trigger: '#', regex: String.raw`[^\\s,]*` }\n        ]}\n        getSearchItemReplacement={(id: string) => {\n          const item = users.find(({ id: itemId }) => itemId === id);\n\n          if (!item) return undefined;\n\n          return {\n            markdown: MentionButtonConfig.inject({\n              id: item.id,\n              type: 'user',\n              text: item.primary\n            }),\n            component: MentionButtonConfig.component,\n            props: {\n              id: item.id,\n              text: item.primary,\n              type: 'user',\n              tabIndex: -1\n            },\n            text: item.primary\n          };\n        }}\n        searchRenderers={[\n          {\n            type: MentionButtonConfig.type,\n            xmlElement: MentionButtonConfig.xmlElement,\n            regexPattern: MentionButtonConfig.regexPattern,\n            getSearchAttributes\n          },\n          {\n            type: HashtagButtonConfig.type,\n            xmlElement: HashtagButtonConfig.xmlElement,\n            regexPattern: HashtagButtonConfig.regexPattern,\n            getSearchAttributes\n          }\n        ]}\n        onSearch={searchUsers}\n        menu={users.length ? { items: users } : undefined}\n        defaultValue={\n          \"# Try writing some of your own markdown and see how it renders!\\n\\nYou can interact with mentions such as <pega-mention id='deans' text='Seth DeAngelo' type='user'/>\\n\\nThere is built in support for <pega-tag tag='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={args.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"]}

package/jsx/social/Chat/Chat.mocks.d.ts

@@ -1,52 +0,0 @@
-import type { FieldValueListProps, FileUploadItemProps, MenuProps } from '@pega/cosmos-react-core';
-import type { ChatBodyListItemProps, ChatBodyProps, SuggestedReply } from '@pega/cosmos-react-social';
-export declare const BotConversation: ChatBodyProps['liveChat'];
-export declare const ClaimsAgentConversation: ChatBodyProps['liveChat'];
-export declare const LiveChatConversation: ChatBodyProps['liveChat'];
-export declare const SimulatedConversation: ChatBodyProps['liveChat'];
-export declare const ChatMockData: {
-    chatMessages: ChatBodyListItemProps[];
-    defaultAttachments: FileUploadItemProps[];
-    suggestedReplies: SuggestedReply[];
-};
-export declare const phrasesDisplayNames: MenuProps['items'];
-export declare const phrasesMessages: {
-    id: string;
-    message: string;
-}[];
-export declare const pagePushList: ({
-    id: string;
-    type: string;
-    senderType: string;
-    senderId: string;
-    direction: string;
-    avatarInfo: {
-        name: string;
-    };
-    message: string;
-    timestamp: string;
-    mediaPageLinks: {
-        id: string;
-        href: string;
-        thumbnail: string;
-        title: string;
-    }[];
-} | {
-    id: string;
-    type: string;
-    senderType: string;
-    senderId: string;
-    direction: string;
-    avatarInfo: {
-        name: string;
-    };
-    message: string;
-    timestamp: string;
-    mediaPageLinks: {
-        id: string;
-        href: string;
-        title: string;
-    }[];
-})[];
-export declare const contextItems: FieldValueListProps['fields'];
-//# sourceMappingURL=Chat.mocks.d.ts.map

package/jsx/social/Chat/Chat.mocks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Chat.mocks.d.ts","sourceRoot":"","sources":["../../../src/social/Chat/Chat.mocks.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACnG,OAAO,KAAK,EACV,qBAAqB,EACrB,aAAa,EACb,cAAc,EACf,MAAM,2BAA2B,CAAC;AAEnC,eAAO,MAAM,eAAe,EAAE,aAAa,CAAC,UAAU,CAwGrD,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,aAAa,CAAC,UAAU,CAqG7D,CAAC;AACF,eAAO,MAAM,oBAAoB,EAAE,aAAa,CAAC,UAAU,CAgJ1D,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,UAAU,CA2N3D,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE;IACzB,YAAY,EAAE,qBAAqB,EAAE,CAAC;IACtC,kBAAkB,EAAE,mBAAmB,EAAE,CAAC;IAC1C,gBAAgB,EAAE,cAAc,EAAE,CAAC;CAqBpC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,SAAS,CAAC,OAAO,CAyDlD,CAAC;AAEF,eAAO,MAAM,eAAe;;;GAqC3B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4DxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,mBAAmB,CAAC,QAAQ,CAyBtD,CAAC"}