From b742fa207b6a6c249eae225d2af08296134da6e8 Mon Sep 17 00:00:00 2001 From: Lee White Date: Wed, 7 Dec 2022 14:26:36 -0800 Subject: [PATCH] fix: chat small fixes (#2859) --- .changeset/fair-paws-lick.md | 6 + .changeset/nasty-dolls-burn.md | 6 + .changeset/ten-trains-fold.md | 6 + .../stories/ConversationsUIKit/helpers.tsx | 71 +++++++ .../ConversationsUIKit/index.stories.tsx | 183 ++++++++++++++++++ .../chat-composer/stories/index.stories.tsx | 171 +--------------- .../components/chat-log/src/ChatBookend.tsx | 2 +- .../components/chat-log/src/ChatEvent.tsx | 1 - .../components/chat-log/src/ChatLog.tsx | 11 +- .../components/chat-log/src/ChatMessage.tsx | 2 - .../paste-libraries/lexical/src/index.tsx | 14 +- 11 files changed, 305 insertions(+), 168 deletions(-) create mode 100644 .changeset/fair-paws-lick.md create mode 100644 .changeset/nasty-dolls-burn.md create mode 100644 .changeset/ten-trains-fold.md create mode 100644 packages/paste-core/components/chat-composer/stories/ConversationsUIKit/helpers.tsx create mode 100644 packages/paste-core/components/chat-composer/stories/ConversationsUIKit/index.stories.tsx diff --git a/.changeset/fair-paws-lick.md b/.changeset/fair-paws-lick.md new file mode 100644 index 0000000000..928c463a5d --- /dev/null +++ b/.changeset/fair-paws-lick.md @@ -0,0 +1,6 @@ +--- +'@twilio-paste/chat-composer': patch +'@twilio-paste/core': patch +--- + +[Chat Composer] refactor stories, create a new one called Conversations UI Kit Example. diff --git a/.changeset/nasty-dolls-burn.md b/.changeset/nasty-dolls-burn.md new file mode 100644 index 0000000000..d23369e2b7 --- /dev/null +++ b/.changeset/nasty-dolls-burn.md @@ -0,0 +1,6 @@ +--- +'@twilio-paste/lexical-library': minor +'@twilio-paste/core': minor +--- + +[Lexical Library] add export for: CLEAR_EDITOR_COMMAND, CLEAR_EDITOR_COMMAND, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_NORMAL, COMMAND_PRIORITY_LOW, and COMMAND_PRIORITY_EDITOR diff --git a/.changeset/ten-trains-fold.md b/.changeset/ten-trains-fold.md new file mode 100644 index 0000000000..5c4f675500 --- /dev/null +++ b/.changeset/ten-trains-fold.md @@ -0,0 +1,6 @@ +--- +'@twilio-paste/chat-log': patch +'@twilio-paste/core': patch +--- + +[Chat Log] refactor styles to use row gap instead of margin bottom diff --git a/packages/paste-core/components/chat-composer/stories/ConversationsUIKit/helpers.tsx b/packages/paste-core/components/chat-composer/stories/ConversationsUIKit/helpers.tsx new file mode 100644 index 0000000000..6dc2e25b46 --- /dev/null +++ b/packages/paste-core/components/chat-composer/stories/ConversationsUIKit/helpers.tsx @@ -0,0 +1,71 @@ +import * as React from 'react'; +import {ChatMessage, ChatBubble, ChatMessageMeta, ChatMessageMetaItem} from '@twilio-paste/chat-log'; +import type {Chat} from '@twilio-paste/chat-log'; +import {Box} from '@twilio-paste/box'; +import {Button} from '@twilio-paste/button'; +import {SendIcon} from '@twilio-paste/icons/esm/SendIcon'; +import { + useLexicalComposerContext, + CLEAR_EDITOR_COMMAND, + COMMAND_PRIORITY_HIGH, + KEY_ENTER_COMMAND, +} from '@twilio-paste/lexical-library'; + +export const createNewMessage = (message: string): Omit => { + const time = new Date().toLocaleString('en-US', { + hour: 'numeric', + minute: 'numeric', + hour12: true, + }); + + return { + variant: 'outbound', + content: ( + + {message} + + {time} + + + ), + }; +}; + +export const SendButtonPlugin = ({onClick}: {onClick: () => void}): JSX.Element => { + const [editor] = useLexicalComposerContext(); + + const handleSend = (): void => { + onClick(); + editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined); + }; + + return ( + + + + ); +}; + +export const EnterKeySubmitPlugin = ({onKeyDown}: {onKeyDown: () => void}): null => { + const [editor] = useLexicalComposerContext(); + + const handleEnterKey = React.useCallback( + (event: KeyboardEvent) => { + const {shiftKey, ctrlKey} = event; + if (shiftKey || ctrlKey) return false; + event.preventDefault(); + event.stopPropagation(); + onKeyDown(); + editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined); + return true; + }, + [editor, onKeyDown] + ); + + React.useEffect(() => { + return editor.registerCommand(KEY_ENTER_COMMAND, handleEnterKey, COMMAND_PRIORITY_HIGH); + }, [editor, handleEnterKey]); + return null; +}; diff --git a/packages/paste-core/components/chat-composer/stories/ConversationsUIKit/index.stories.tsx b/packages/paste-core/components/chat-composer/stories/ConversationsUIKit/index.stories.tsx new file mode 100644 index 0000000000..8242678fc8 --- /dev/null +++ b/packages/paste-core/components/chat-composer/stories/ConversationsUIKit/index.stories.tsx @@ -0,0 +1,183 @@ +import * as React from 'react'; +import { + MinimizableDialog, + MinimizableDialogButton, + MinimizableDialogContainer, + MinimizableDialogHeader, + MinimizableDialogContent, +} from '@twilio-paste/minimizable-dialog'; +import {AutoScrollPlugin, $getRoot, ClearEditorPlugin} from '@twilio-paste/lexical-library'; +import {ChatIcon} from '@twilio-paste/icons/esm/ChatIcon'; +import {Box} from '@twilio-paste/box'; +import type {Story} from '@storybook/react'; +import { + ChatLogger, + useChatLogger, + ChatMessage, + ChatMessageMeta, + ChatMessageMetaItem, + ChatBubble, + ChatAttachment, + ChatEvent, + ChatAttachmentDescription, + ChatAttachmentLink, + ChatBookend, + ChatBookendItem, + ComposerAttachmentCard, +} from '@twilio-paste/chat-log'; +import {Avatar} from '@twilio-paste/avatar'; +import {DownloadIcon} from '@twilio-paste/icons/esm/DownloadIcon'; +import type {EditorState} from '@twilio-paste/lexical-library'; + +import {ChatComposer} from '../../src'; +import {SendButtonPlugin, EnterKeySubmitPlugin, createNewMessage} from './helpers'; + +// eslint-disable-next-line import/no-default-export +export default { + title: 'Components/Conversations UI Kit', + component: ChatComposer, +}; + +const ComposerAttachmentExample: React.FC = () => ( + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + + +); + +export const ConversationsUIKitExample: Story = () => { + const scrollRef = React.createRef(); + const {chats, push} = useChatLogger( + { + content: ( + + Today + + Chat Started・3:34 PM + + + ), + }, + { + variant: 'inbound', + content: ( + + Quisque ullamcorper ipsum vitae lorem euismod sodales. + + }> + Document-FINAL.doc + 123 MB + + + + Gibby Radki ・ 5:04 PM + + + ), + }, + { + content: ( + + Lauren Gardner has joined the chat ・ 4:26 PM + + ), + }, + { + variant: 'inbound', + content: ( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + + + Lauren Gardner ・ 4:30 PM + + + + ), + } + ); + const [message, setMessage] = React.useState(''); + + const handleComposerChange = (editorState: EditorState): void => { + editorState.read(() => { + const text = $getRoot().getTextContent(); + setMessage(text); + }); + }; + + const submitMessage = (): void => { + push(createNewMessage(message)); + }; + + return ( + + + + + + Live chat + + + + + + { + throw error; + }, + }} + ariaLabel="Message" + placeholder="Type here..." + onChange={handleComposerChange} + > + + + + + + + + + + + ); +}; + +ConversationsUIKitExample.parameters = { + a11y: { + /* + * axe says that the chat attachment links and some of the bubbles are failing contrast even though they're not. + * Disabled the tests because all of these components are tested in other stories. + */ + disable: true, + }, +}; diff --git a/packages/paste-core/components/chat-composer/stories/index.stories.tsx b/packages/paste-core/components/chat-composer/stories/index.stories.tsx index 3d376b90a8..45b6bbd98a 100644 --- a/packages/paste-core/components/chat-composer/stories/index.stories.tsx +++ b/packages/paste-core/components/chat-composer/stories/index.stories.tsx @@ -1,35 +1,11 @@ import * as React from 'react'; -import {Button} from '@twilio-paste/button'; -import {Box} from '@twilio-paste/box'; -import {AttachIcon} from '@twilio-paste/icons/esm/AttachIcon'; -import {SendIcon} from '@twilio-paste/icons/esm/SendIcon'; import type {EditorState} from '@twilio-paste/lexical-library'; -import {$getRoot, $createParagraphNode, $createTextNode, AutoScrollPlugin} from '@twilio-paste/lexical-library'; -import { - MinimizableDialog, - MinimizableDialogButton, - MinimizableDialogContainer, - MinimizableDialogHeader, - MinimizableDialogContent, -} from '@twilio-paste/minimizable-dialog'; -import {ChatIcon} from '@twilio-paste/icons/esm/ChatIcon'; -import {DownloadIcon} from '@twilio-paste/icons/esm/DownloadIcon'; -import { - ChatLog, - ChatMessage, - ChatMessageMeta, - ChatMessageMetaItem, - ChatBubble, - ChatAttachment, - ChatEvent, - ChatAttachmentDescription, - ChatAttachmentLink, - ChatBookend, - ChatBookendItem, - ComposerAttachmentCard, -} from '@twilio-paste/chat-log'; -import {Avatar} from '@twilio-paste/avatar'; +import {$getRoot, $createParagraphNode, $createTextNode} from '@twilio-paste/lexical-library'; import type {Story} from '@storybook/react'; +import {Box} from '@twilio-paste/box'; +import {Button} from '@twilio-paste/button'; +import {SendIcon} from '@twilio-paste/icons/esm/SendIcon'; +import {AttachIcon} from '@twilio-paste/icons/esm/AttachIcon'; import {ChatComposer} from '../src'; import type {ChatComposerProps} from '../src'; @@ -81,9 +57,8 @@ const myOnChange = (editorState: EditorState): void => { }); }; -const ChatComposerWrapper = React.forwardRef(({children}, ref) => ( +const ComposerWrapperExample: React.FC = ({children}) => ( -)); +); export const Default: Story = () => { return ( @@ -178,7 +153,7 @@ export const WithCustomInitialValue: Story = () => { export const WithMaxHeight: Story = () => { return ( - + { }} placeholder="Type here..." /> - + ); }; @@ -206,131 +181,3 @@ WithMaxHeight.parameters = { disable: true, }, }; - -const ChatLogExample: React.FC = () => ( - - - Today - - - Lauren Gardner has joined the chat ・ 4:26 PM - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - - - Gibby Radki ・ 4:30 PM - - - - - Nulla sit amet elit mauris. - - 4:32 PM - - - - - Curabitur enim lorem, cursus et massa non, pretium faucibus lacus. Donec odio neque, consectetur a suscipit sit - amet, blandit id erat. - - - 4:48 PM - - - - - Quisque ullamcorper ipsum vitae lorem euismod sodales. Donec a nisi eget eros laoreet pellentesque. Donec sed - bibendum justo, at ornare mi. Sed eget tempor metus, sed sagittis lacus. Donec commodo nisi in ligula accumsan - euismod. Nam ornare lobortis orci, eget rhoncus ligula euismod ut.{' '} - - - }> - Document-FINAL.doc - 123 MB - - - Donec sit amet orci hendrerit, varius diam in, porttitor felis. - - Gibby Radki ・ 5:04 PM - - - - Donec sit amet orci hendrerit, varius diam in, porttitor felis. - - 2 minutes ago - - - Read - - - -); - -const ChatAttachmentExample: React.FC = () => ( - - - {}}> - }> - Document-FINAL.doc - 123 MB - - - - - {}}> - }> - Document-FINAL.doc - 123 MB - - - - -); - -export const ChatDialog: Story = () => { - const scrollRef = React.createRef(); - - return ( - - - - - - Live chat - - - - - - { - throw error; - }, - }} - ariaLabel="Message" - placeholder="Type here..." - > - - - - - - - - ); -}; - -ChatDialog.parameters = { - a11y: { - /* - * axe says that the chat attachment links and some of the bubbles are failing contrast even though they're not. - * Disabled the tests because all of these components are tested in other stories. - */ - disable: true, - }, -}; diff --git a/packages/paste-core/components/chat-log/src/ChatBookend.tsx b/packages/paste-core/components/chat-log/src/ChatBookend.tsx index a9650fec45..a6b1bc56dc 100644 --- a/packages/paste-core/components/chat-log/src/ChatBookend.tsx +++ b/packages/paste-core/components/chat-log/src/ChatBookend.tsx @@ -18,7 +18,7 @@ const ChatBookend = React.forwardRef( color="colorTextWeak" element={element} textAlign="center" - marginBottom="space90" + marginBottom="space20" lineHeight="lineHeight20" fontSize="fontSize20" ref={ref} diff --git a/packages/paste-core/components/chat-log/src/ChatEvent.tsx b/packages/paste-core/components/chat-log/src/ChatEvent.tsx index ef64403028..213cb7c084 100644 --- a/packages/paste-core/components/chat-log/src/ChatEvent.tsx +++ b/packages/paste-core/components/chat-log/src/ChatEvent.tsx @@ -18,7 +18,6 @@ const ChatEvent = React.forwardRef( color="colorTextWeak" element={element} textAlign="center" - marginBottom="space80" lineHeight="lineHeight20" fontSize="fontSize20" ref={ref} diff --git a/packages/paste-core/components/chat-log/src/ChatLog.tsx b/packages/paste-core/components/chat-log/src/ChatLog.tsx index 8a3210c4df..a18bdf0ec4 100644 --- a/packages/paste-core/components/chat-log/src/ChatLog.tsx +++ b/packages/paste-core/components/chat-log/src/ChatLog.tsx @@ -11,7 +11,16 @@ export interface ChatLogProps { const ChatLog = React.forwardRef(({children, element = 'CHAT_LOG', ...props}, ref) => { return ( - + {children} diff --git a/packages/paste-core/components/chat-log/src/ChatMessage.tsx b/packages/paste-core/components/chat-log/src/ChatMessage.tsx index 189190697f..54521d0501 100644 --- a/packages/paste-core/components/chat-log/src/ChatMessage.tsx +++ b/packages/paste-core/components/chat-log/src/ChatMessage.tsx @@ -32,13 +32,11 @@ export const ChatMessage = React.forwardRef( diff --git a/packages/paste-libraries/lexical/src/index.tsx b/packages/paste-libraries/lexical/src/index.tsx index 3679a54b11..e5028028f8 100644 --- a/packages/paste-libraries/lexical/src/index.tsx +++ b/packages/paste-libraries/lexical/src/index.tsx @@ -3,7 +3,19 @@ import {LexicalComposer} from '@lexical/react/LexicalComposer'; import {OnChangePlugin} from '@lexical/react/LexicalOnChangePlugin'; import {ContentEditable} from '@lexical/react/LexicalContentEditable'; -export {$getRoot, $getSelection, $createParagraphNode, $createTextNode} from 'lexical'; +export { + $getRoot, + $getSelection, + $createParagraphNode, + $createTextNode, + CLEAR_EDITOR_COMMAND, + KEY_ENTER_COMMAND, + COMMAND_PRIORITY_CRITICAL, + COMMAND_PRIORITY_HIGH, + COMMAND_PRIORITY_NORMAL, + COMMAND_PRIORITY_LOW, + COMMAND_PRIORITY_EDITOR, +} from 'lexical'; export type {EditorState, EditorThemeClasses} from 'lexical'; export {AutoLinkNode} from '@lexical/link';