From 576d8e3db7cb2318601683fb285feaa6b3ff27a7 Mon Sep 17 00:00:00 2001 From: Luca Cannarozzo Date: Wed, 27 Dec 2023 17:08:17 +0100 Subject: [PATCH 1/8] Refactor chat component and types --- src/stories/chat/_types.tsx | 17 +++++++---- src/stories/chat/index.stories.tsx | 41 +++++++++------------------ src/stories/chat/index.tsx | 2 -- src/stories/chat/parts/comment.tsx | 17 +++++++++-- src/stories/chat/parts/commentBox.tsx | 4 +-- 5 files changed, 42 insertions(+), 39 deletions(-) diff --git a/src/stories/chat/_types.tsx b/src/stories/chat/_types.tsx index 248e99e7..29ef4007 100644 --- a/src/stories/chat/_types.tsx +++ b/src/stories/chat/_types.tsx @@ -3,18 +3,25 @@ import { BubbleMenuProps, Editor, EditorOptions } from "@tiptap/react"; type validationStatus = "success" | "warning" | "error"; -export interface ChatArgs extends Partial { +export interface ChatEditorArgs extends Partial { placeholderOptions?: Partial; hasInlineMenu?: boolean; bubbleOptions?: any; - author: { - avatar: string; - avatarType?: "icon" | "image" | "text" /* default: text */; - }; + author: Author; onSave?: (editor: Editor) => void; triggerSave?: () => void; } +export interface Author { + avatar: string; + name?: string; + avatarType?: "icon" | "image" | "text" /* default: text */; +} + +export interface ChatArgs { + background?: string; +} + export interface EditorHeaderArgs { title?: string; validation?: validationStatus; diff --git a/src/stories/chat/index.stories.tsx b/src/stories/chat/index.stories.tsx index cd370ddc..3753296b 100644 --- a/src/stories/chat/index.stories.tsx +++ b/src/stories/chat/index.stories.tsx @@ -4,11 +4,12 @@ import { Chat, ChatProvider, useChatContext } from "."; import { Col } from "../grid/col"; import { Grid } from "../grid/grid"; import { Row } from "../grid/row"; -import { ChatArgs } from "./_types"; +import { ChatArgs, ChatEditorArgs } from "./_types"; import { Button } from "../buttons/button"; import { Comment } from "./parts/comment"; +import { PlaceholderOptions } from "@tiptap/extension-placeholder"; -interface EditorStoryArgs extends ChatArgs { +interface EditorStoryArgs extends ChatEditorArgs { children?: any; comments?: { author: { @@ -18,6 +19,8 @@ interface EditorStoryArgs extends ChatArgs { message: string; date: string; }[]; + editorText?: string; + placeholderOptions?: Partial; } const ChatPanel = (args: EditorStoryArgs) => { @@ -27,17 +30,15 @@ const ChatPanel = (args: EditorStoryArgs) => { Titolone {args.comments?.map((comment, index) => ( - - {comment.message}
+ + <> +
+ altre cose + ))} - console.log(editor.getHTML())} - > - default text if needed - + {args.editorText} @@ -85,7 +86,7 @@ const defaultArgs: EditorStoryArgs = { }, }, { - message: "Hi, I'm a comment too", + message: "Hi, I'm a comment too but with bold", date: "2021-04-20T11:02:00.000Z", author: { name: "Marco B.", @@ -108,27 +109,13 @@ Default.parameters = { export const Placeholder = Template.bind({}); Placeholder.args = { ...defaultArgs, - children: `

Embrace Markdown

-

- Markdown shortcuts make it easy to format the text while typing. -

-

- To test that, start a new line and type # followed by a space to get a heading. Try #, ##, ###, ####, #####, ###### for different levels. -

-

Smart Editor

-

- Try > for blockquotes, *, - or + for bullet lists, or \`foobar\` to highlight code or ~~tildes~~ to strike text. -

-

- Try typing (c) to see how it’s converted to a proper © character. You can also try ->, >>, 1/2, !=, or --. -

`, placeholderOptions: { placeholder: ({ node }) => { if (node.type.name === "heading") { return "What do you want to do?"; } - return "Can you add some further context?"; + return "What do you want to say?"; }, }, }; @@ -136,14 +123,12 @@ Placeholder.args = { export const BubbleMenu = Template.bind({}); BubbleMenu.args = { ...defaultArgs, - children: `

Hey, try to select some text here. There will popup a menu for selecting some inline styles.
Remember: you have full control about content and styling of this menu.

`, hasInlineMenu: true, }; export const ReadOnly = Template.bind({}); ReadOnly.args = { ...defaultArgs, - children: `

Hey, try to select some text here. There will popup a menu for selecting some inline styles.
Remember: you have full control about content and styling of this menu.

`, editable: false, }; diff --git a/src/stories/chat/index.tsx b/src/stories/chat/index.tsx index 88a0a9e1..421ad073 100644 --- a/src/stories/chat/index.tsx +++ b/src/stories/chat/index.tsx @@ -24,9 +24,7 @@ import { Comment } from "./parts/comment"; - Simple text input, use textarea instead. */ const Chat = (props: PropsWithChildren) => ( - // {props.children} - // ); Chat.Header = ChatTitle; diff --git a/src/stories/chat/parts/comment.tsx b/src/stories/chat/parts/comment.tsx index 2dcded41..9d60b691 100644 --- a/src/stories/chat/parts/comment.tsx +++ b/src/stories/chat/parts/comment.tsx @@ -2,18 +2,31 @@ import { PropsWithChildren } from "react"; import { Title } from "../../title"; import { Card } from "../../cards"; import { styled } from "styled-components"; +import { Editor } from "../../editor"; +import { Author } from "../_types"; const CommentCard = styled(Card)` padding: ${({ theme }) => `${theme.space.base * 3}px ${theme.space.sm}`}; `; +const ReadOnly = styled.div` + > div:focus { + box-shadow: none; + outline: none; + } +`; + export const Comment = ({ author, + message, children, -}: PropsWithChildren<{ author: string }>) => { +}: PropsWithChildren<{ author: Author; message: string }>) => { return ( - {author} + {author.name ?? "User"} + + {message} + {children} ); diff --git a/src/stories/chat/parts/commentBox.tsx b/src/stories/chat/parts/commentBox.tsx index aea6e996..c9a97051 100644 --- a/src/stories/chat/parts/commentBox.tsx +++ b/src/stories/chat/parts/commentBox.tsx @@ -13,7 +13,7 @@ import Placeholder from "@tiptap/extension-placeholder"; import CharacterCount from "@tiptap/extension-character-count"; import { editorStyle } from "../../shared/editorStyle"; -import { ChatArgs } from "../_types"; +import { ChatArgs, ChatEditorArgs } from "../_types"; import { KeyboardEvent as ReactKeyboardEvent, PropsWithChildren } from "react"; import { FloatingMenu } from "../../editor/floatingMenu"; import { FauxInput } from "@zendeskgarden/react-forms"; @@ -57,7 +57,7 @@ export const CommentBox = ({ onSave, placeholderOptions, ...props -}: PropsWithChildren) => { +}: PropsWithChildren) => { const { children, hasInlineMenu, bubbleOptions, author } = props; const { setEditor, triggerSave } = useChatContext(); From 62644e986ab62403c4b4e9f7ed7d77c30c1b450b Mon Sep 17 00:00:00 2001 From: Luca Cannarozzo Date: Wed, 27 Dec 2023 18:03:23 +0100 Subject: [PATCH 2/8] Fix onSave callback in ChatEditorArgs --- src/stories/chat/_types.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/chat/_types.tsx b/src/stories/chat/_types.tsx index 29ef4007..2adb9ab6 100644 --- a/src/stories/chat/_types.tsx +++ b/src/stories/chat/_types.tsx @@ -8,7 +8,7 @@ export interface ChatEditorArgs extends Partial { hasInlineMenu?: boolean; bubbleOptions?: any; author: Author; - onSave?: (editor: Editor) => void; + onSave: (editor: Editor) => void; triggerSave?: () => void; } From 7d82a1f06238b016ae434212d4a6b8935d5b9fb1 Mon Sep 17 00:00:00 2001 From: Luca Cannarozzo Date: Wed, 27 Dec 2023 19:38:54 +0100 Subject: [PATCH 3/8] refactor(chat): remove repetitive types and improve comment style --- src/stories/chat/_types.tsx | 4 +- src/stories/chat/defaultBkg.svg | 460 ++++++++++++++++++++++++++ src/stories/chat/index.stories.tsx | 19 +- src/stories/chat/index.tsx | 2 +- src/stories/chat/parts/comment.tsx | 45 ++- src/stories/chat/parts/commentBox.tsx | 1 - src/stories/chat/parts/containers.tsx | 15 +- yarn.lock | 6 +- 8 files changed, 524 insertions(+), 28 deletions(-) create mode 100644 src/stories/chat/defaultBkg.svg diff --git a/src/stories/chat/_types.tsx b/src/stories/chat/_types.tsx index 2adb9ab6..539c15d4 100644 --- a/src/stories/chat/_types.tsx +++ b/src/stories/chat/_types.tsx @@ -8,8 +8,6 @@ export interface ChatEditorArgs extends Partial { hasInlineMenu?: boolean; bubbleOptions?: any; author: Author; - onSave: (editor: Editor) => void; - triggerSave?: () => void; } export interface Author { @@ -19,7 +17,7 @@ export interface Author { } export interface ChatArgs { - background?: string; + chatBkg?: string; } export interface EditorHeaderArgs { diff --git a/src/stories/chat/defaultBkg.svg b/src/stories/chat/defaultBkg.svg new file mode 100644 index 00000000..69ba18a5 --- /dev/null +++ b/src/stories/chat/defaultBkg.svg @@ -0,0 +1,460 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/stories/chat/index.stories.tsx b/src/stories/chat/index.stories.tsx index 3753296b..050e2a7e 100644 --- a/src/stories/chat/index.stories.tsx +++ b/src/stories/chat/index.stories.tsx @@ -20,21 +20,20 @@ interface EditorStoryArgs extends ChatEditorArgs { date: string; }[]; editorText?: string; + background?: string; + onSave: (editor: TipTapEditor) => void; placeholderOptions?: Partial; } -const ChatPanel = (args: EditorStoryArgs) => { +const ChatPanel = ({ background, ...args }: EditorStoryArgs) => { const { triggerSave } = useChatContext(); return ( - + Titolone - + {args.comments?.map((comment, index) => ( - <> -
- altre cose - + <>altre cose ))} @@ -126,10 +125,10 @@ BubbleMenu.args = { hasInlineMenu: true, }; -export const ReadOnly = Template.bind({}); -ReadOnly.args = { +export const CustomBackground = Template.bind({}); +CustomBackground.args = { ...defaultArgs, - editable: false, + background: "#BE3455", }; export default { diff --git a/src/stories/chat/index.tsx b/src/stories/chat/index.tsx index 421ad073..38f97eba 100644 --- a/src/stories/chat/index.tsx +++ b/src/stories/chat/index.tsx @@ -12,7 +12,7 @@ import { CommentBox } from "./parts/commentBox"; import { Comment } from "./parts/comment"; /** - * CommentBox is a wrapper around Editor component + * Chat is a wrapper around Editor component *
* It's a rich text WYSIWYG editors. *
diff --git a/src/stories/chat/parts/comment.tsx b/src/stories/chat/parts/comment.tsx index 9d60b691..91d08fa3 100644 --- a/src/stories/chat/parts/comment.tsx +++ b/src/stories/chat/parts/comment.tsx @@ -4,18 +4,40 @@ import { Card } from "../../cards"; import { styled } from "styled-components"; import { Editor } from "../../editor"; import { Author } from "../_types"; +import { Avatar } from "../../avatar"; const CommentCard = styled(Card)` padding: ${({ theme }) => `${theme.space.base * 3}px ${theme.space.sm}`}; + background-color: ${({ theme }) => theme.palette.grey[100]}; + &:hover { + box-shadow: none; + } + border-radius: 8px; `; const ReadOnly = styled.div` - > div:focus { - box-shadow: none; - outline: none; + > div { + background-color: ${({ theme }) => theme.palette.grey[100]}; + &:focus { + box-shadow: none; + outline: none; + } + padding: 0; } `; +const AuthorContainer = styled.div` + display: flex; + gap: ${({ theme }) => theme.space.sm}; +`; + +const Footer = styled.div` + display: flex; + flex-direction: row; + justify-content: flex-end; + gap: ${({ theme }) => theme.space.xs}; +`; + export const Comment = ({ author, message, @@ -23,11 +45,18 @@ export const Comment = ({ }: PropsWithChildren<{ author: Author; message: string }>) => { return ( - {author.name ?? "User"} - - {message} - - {children} + + + {author.avatar} + +
+ {author.name ?? "User"} + + {message} + +
+ +
{children}
 ); }; diff --git a/src/stories/chat/parts/commentBox.tsx b/src/stories/chat/parts/commentBox.tsx index c9a97051..cab1d161 100644 --- a/src/stories/chat/parts/commentBox.tsx +++ b/src/stories/chat/parts/commentBox.tsx @@ -54,7 +54,6 @@ const EditorContainer = styled(FauxInput)` - Simple text input, use textarea instead. */ export const CommentBox = ({ - onSave, placeholderOptions, ...props }: PropsWithChildren) => { diff --git a/src/stories/chat/parts/containers.tsx b/src/stories/chat/parts/containers.tsx index 431330c1..3d785d33 100644 --- a/src/stories/chat/parts/containers.tsx +++ b/src/stories/chat/parts/containers.tsx @@ -1,5 +1,7 @@ import styled from "styled-components"; import { Card } from "../../cards"; +import { ChatArgs } from "../_types"; +import defaultBkg from "../defaultBkg.svg"; export const ChatContainer = styled(Card)` padding: ${({ theme }) => theme.space.md}; @@ -9,9 +11,18 @@ export const ChatContainer = styled(Card)` cursor: default; `; -export const MessagesContainer = styled.div` - padding: ${({ theme }) => `${theme.space.md} 0`}; +const parseBackground = (bkg: string) => { + if (bkg.startsWith("#") || bkg.startsWith("rgb") || bkg.startsWith("hsl")) { + return bkg; + } + return `url(${bkg}) repeat center center`; +}; + +export const MessagesContainer = styled.div` + padding: ${({ theme }) => theme.space.md}; + margin: ${({ theme }) => `0 -${theme.space.md}`}; display: flex; flex-direction: column; gap: ${({ theme }) => theme.space.sm}; + background: ${({ chatBkg }) => `${parseBackground(chatBkg ?? defaultBkg)}`}; `; diff --git a/yarn.lock b/yarn.lock index b624f0ff..354fc180 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5473,9 +5473,9 @@ caniuse-api@^3.0.0: lodash.uniq "^4.5.0" caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001464: - version "1.0.30001486" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001486.tgz#56a08885228edf62cbe1ac8980f2b5dae159997e" - integrity sha512-uv7/gXuHi10Whlj0pp5q/tsK/32J2QSqVRKQhs2j8VsDCjgyruAh/eEXHF822VqO9yT6iZKw3nRwZRSPBE9OQg== + version "1.0.30001571" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001571.tgz" + integrity sha512-tYq/6MoXhdezDLFZuCO/TKboTzuQ/xR5cFdgXPfDtM7/kchBO3b4VWghE/OAi/DV7tTdhmLjZiZBZi1fA/GheQ== case-anything@^2.1.10: version "2.1.11" From 855afdd6b4eee4b822ba23e5b279d91fa57e1165 Mon Sep 17 00:00:00 2001 From: Luca Cannarozzo Date: Wed, 27 Dec 2023 23:19:35 +0100 Subject: [PATCH 4/8] restore old yarn.lock --- src/stories/chat/_types.tsx | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/stories/chat/_types.tsx b/src/stories/chat/_types.tsx index 539c15d4..01b3937e 100644 --- a/src/stories/chat/_types.tsx +++ b/src/stories/chat/_types.tsx @@ -1,5 +1,5 @@ import { PlaceholderOptions } from "@tiptap/extension-placeholder"; -import { BubbleMenuProps, Editor, EditorOptions } from "@tiptap/react"; +import { BubbleMenuProps, EditorOptions } from "@tiptap/react"; type validationStatus = "success" | "warning" | "error"; diff --git a/yarn.lock b/yarn.lock index 354fc180..82c9d181 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5473,9 +5473,9 @@ caniuse-api@^3.0.0: lodash.uniq "^4.5.0" caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001464: - version "1.0.30001571" - resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001571.tgz" - integrity sha512-tYq/6MoXhdezDLFZuCO/TKboTzuQ/xR5cFdgXPfDtM7/kchBO3b4VWghE/OAi/DV7tTdhmLjZiZBZi1fA/GheQ== + version "1.0.30001486" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001486.tgz#56a08885228edf62cbe1ac8980f2b5dae159997e" + integrity sha512-uv7/gXuHi10Whlj0pp5q/tsK/32J2QSqVRKQhs2j8VsDCjgyruAh/eEXHF822VqO9yT6iZKw3nRwZRSPBE9OQg== case-anything@^2.1.10: version "2.1.11" @@ -13898,4 +13898,4 @@ yauzl@^2.10.0: yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" - integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== + integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== \ No newline at end of file From c19f690d745a3dbad4e3b84760b89c95f4dd8dc5 Mon Sep 17 00:00:00 2001 From: Luca Cannarozzo Date: Wed, 27 Dec 2023 23:49:51 +0100 Subject: [PATCH 5/8] test styled with bug --- src/stories/chat/parts/containers.tsx | 5 +++-- yarn.lock | 8 ++++---- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/stories/chat/parts/containers.tsx b/src/stories/chat/parts/containers.tsx index 3d785d33..e7077081 100644 --- a/src/stories/chat/parts/containers.tsx +++ b/src/stories/chat/parts/containers.tsx @@ -24,5 +24,6 @@ export const MessagesContainer = styled.div` display: flex; flex-direction: column; gap: ${({ theme }) => theme.space.sm}; - background: ${({ chatBkg }) => `${parseBackground(chatBkg ?? defaultBkg)}`}; -`; + `; + + // background: ${({ chatBkg }) => `${parseBackground(chatBkg ?? defaultBkg)}`}; diff --git a/yarn.lock b/yarn.lock index 82c9d181..2e50f7d6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5473,9 +5473,9 @@ caniuse-api@^3.0.0: lodash.uniq "^4.5.0" caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001464: - version "1.0.30001486" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001486.tgz#56a08885228edf62cbe1ac8980f2b5dae159997e" - integrity sha512-uv7/gXuHi10Whlj0pp5q/tsK/32J2QSqVRKQhs2j8VsDCjgyruAh/eEXHF822VqO9yT6iZKw3nRwZRSPBE9OQg== + version "1.0.30001572" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001572.tgz" + integrity sha512-1Pbh5FLmn5y4+QhNyJE9j3/7dK44dGB83/ZMjv/qJk86TvDbjk0LosiZo0i0WB0Vx607qMX9jYrn1VLHCkN4rw== case-anything@^2.1.10: version "2.1.11" @@ -13898,4 +13898,4 @@ yauzl@^2.10.0: yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" - integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== \ No newline at end of file + integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== From 0d57c58f87e6f7a06093d01c4d86cef37de007b6 Mon Sep 17 00:00:00 2001 From: Luca Cannarozzo Date: Thu, 28 Dec 2023 00:02:04 +0100 Subject: [PATCH 6/8] feat(chat): restore function inside styled --- src/stories/chat/parts/containers.tsx | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/stories/chat/parts/containers.tsx b/src/stories/chat/parts/containers.tsx index e7077081..b9f0d91d 100644 --- a/src/stories/chat/parts/containers.tsx +++ b/src/stories/chat/parts/containers.tsx @@ -11,11 +11,17 @@ export const ChatContainer = styled(Card)` cursor: default; `; -const parseBackground = (bkg: string) => { - if (bkg.startsWith("#") || bkg.startsWith("rgb") || bkg.startsWith("hsl")) { - return bkg; +const parseBackground = (props: ChatArgs) => { + if (!props.chatBkg) return `url(${defaultBkg}) repeat center center`; + + if ( + props.chatBkg.startsWith("#") || + props.chatBkg.startsWith("rgb") || + props.chatBkg.startsWith("hsl") + ) { + return props.chatBkg; } - return `url(${bkg}) repeat center center`; + return `url(${props.chatBkg}) repeat center center`; }; export const MessagesContainer = styled.div` @@ -24,6 +30,5 @@ export const MessagesContainer = styled.div` display: flex; flex-direction: column; gap: ${({ theme }) => theme.space.sm}; - `; - - // background: ${({ chatBkg }) => `${parseBackground(chatBkg ?? defaultBkg)}`}; + background: ${parseBackground}; +`; From fa0857b2445d73e8b33decce2126b76f20f75482 Mon Sep 17 00:00:00 2001 From: Luca Cannarozzo Date: Thu, 28 Dec 2023 00:14:01 +0100 Subject: [PATCH 7/8] fix(chat): remove function from styled component --- src/stories/chat/parts/containers.tsx | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/src/stories/chat/parts/containers.tsx b/src/stories/chat/parts/containers.tsx index b9f0d91d..7713b2b6 100644 --- a/src/stories/chat/parts/containers.tsx +++ b/src/stories/chat/parts/containers.tsx @@ -11,24 +11,11 @@ export const ChatContainer = styled(Card)` cursor: default; `; -const parseBackground = (props: ChatArgs) => { - if (!props.chatBkg) return `url(${defaultBkg}) repeat center center`; - - if ( - props.chatBkg.startsWith("#") || - props.chatBkg.startsWith("rgb") || - props.chatBkg.startsWith("hsl") - ) { - return props.chatBkg; - } - return `url(${props.chatBkg}) repeat center center`; -}; - export const MessagesContainer = styled.div` padding: ${({ theme }) => theme.space.md}; margin: ${({ theme }) => `0 -${theme.space.md}`}; display: flex; flex-direction: column; gap: ${({ theme }) => theme.space.sm}; - background: ${parseBackground}; + background: ${({ chatBkg }) => chatBkg ?? `url(${defaultBkg}) repeat center center`}; `; From a16fabfb4acd0247c7b533b6c22fd5fbad225ab5 Mon Sep 17 00:00:00 2001 From: Luca Cannarozzo Date: Thu, 28 Dec 2023 00:23:45 +0100 Subject: [PATCH 8/8] Remove unused import and update background color --- src/stories/chat/defaultBkg.svg | 460 -------------------------- src/stories/chat/parts/containers.tsx | 3 +- 2 files changed, 1 insertion(+), 462 deletions(-) delete mode 100644 src/stories/chat/defaultBkg.svg diff --git a/src/stories/chat/defaultBkg.svg b/src/stories/chat/defaultBkg.svg deleted file mode 100644 index 69ba18a5..00000000 --- a/src/stories/chat/defaultBkg.svg +++ /dev/null @@ -1,460 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/stories/chat/parts/containers.tsx b/src/stories/chat/parts/containers.tsx index 7713b2b6..e6984d08 100644 --- a/src/stories/chat/parts/containers.tsx +++ b/src/stories/chat/parts/containers.tsx @@ -1,7 +1,6 @@ import styled from "styled-components"; import { Card } from "../../cards"; import { ChatArgs } from "../_types"; -import defaultBkg from "../defaultBkg.svg"; export const ChatContainer = styled(Card)` padding: ${({ theme }) => theme.space.md}; @@ -17,5 +16,5 @@ export const MessagesContainer = styled.div` display: flex; flex-direction: column; gap: ${({ theme }) => theme.space.sm}; - background: ${({ chatBkg }) => chatBkg ?? `url(${defaultBkg}) repeat center center`}; + background: ${({ chatBkg }) => chatBkg ?? `#fff`}; `;