From 510615c74b323917e18244e07d57c3acc1f5f5bf Mon Sep 17 00:00:00 2001 From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com> Date: Fri, 20 Jan 2023 15:21:21 +0100 Subject: [PATCH] rename chat message -> messages and cleanup --- .../src/chat-message/components/actions.tsx | 15 ---- .../src/chat-message/components/reactions.tsx | 31 ------- .../chat-message.tsx | 29 +++--- .../messages/components/actions.stories.tsx | 41 +++++++++ .../src/messages/components/actions.tsx | 31 +++++++ .../messages/components/reactions.stories.tsx | 25 ++++++ .../src/messages/components/reactions.tsx | 88 +++++++++++++++++++ .../src/{chat-message => messages}/index.tsx | 27 +++--- .../messages.stories.tsx} | 38 ++++++-- 9 files changed, 246 insertions(+), 79 deletions(-) delete mode 100644 packages/components/src/chat-message/components/actions.tsx delete mode 100644 packages/components/src/chat-message/components/reactions.tsx rename packages/components/src/{chat-message => messages}/chat-message.tsx (78%) create mode 100644 packages/components/src/messages/components/actions.stories.tsx create mode 100644 packages/components/src/messages/components/actions.tsx create mode 100644 packages/components/src/messages/components/reactions.stories.tsx create mode 100644 packages/components/src/messages/components/reactions.tsx rename packages/components/src/{chat-message => messages}/index.tsx (64%) rename packages/components/src/{chat-message/chat-message.stories.tsx => messages/messages.stories.tsx} (57%) diff --git a/packages/components/src/chat-message/components/actions.tsx b/packages/components/src/chat-message/components/actions.tsx deleted file mode 100644 index 73b44291..00000000 --- a/packages/components/src/chat-message/components/actions.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Stack } from 'tamagui' - -import { Paragraph } from '../../typography' - -interface Props { - onClick?: VoidFunction -} - -export const Actions = (_props: Props) => { - return ( - - actions - - ) -} diff --git a/packages/components/src/chat-message/components/reactions.tsx b/packages/components/src/chat-message/components/reactions.tsx deleted file mode 100644 index 66af3659..00000000 --- a/packages/components/src/chat-message/components/reactions.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { Pressable } from 'react-native' -import { Stack, XStack, YStack } from 'tamagui' - -interface Props {} - -const ReactionButton = ({ type }) => { - return ( - - {type} - - ) -} - -export const Reactions = (props: Props) => { - const {} = props - - return ( - - - - - - - - ) -} diff --git a/packages/components/src/chat-message/chat-message.tsx b/packages/components/src/messages/chat-message.tsx similarity index 78% rename from packages/components/src/chat-message/chat-message.tsx rename to packages/components/src/messages/chat-message.tsx index 044d602a..6a63b7f5 100644 --- a/packages/components/src/chat-message/chat-message.tsx +++ b/packages/components/src/messages/chat-message.tsx @@ -2,6 +2,7 @@ import React from 'react' import { Stack, Unspaced, XStack, YStack } from 'tamagui' +import { Author } from '../author/author' import { Avatar } from '../avatar' import { Image } from '../image' import { Paragraph } from '../typography' @@ -24,7 +25,6 @@ const ChatMessage = (props: Props) => { space={10} position="relative" alignItems="flex-start" - justifyContent="center" paddingHorizontal={8} paddingVertical={12} borderRadius={16} @@ -36,7 +36,7 @@ const ChatMessage = (props: Props) => { > {hovered && ( - + {}} /> )} @@ -47,17 +47,12 @@ const ChatMessage = (props: Props) => { /> - - - Alisher Yakupov - - - zQ3...9d4Gs0 - - - 09:30 - - + {text && ( @@ -70,7 +65,7 @@ const ChatMessage = (props: Props) => { key={image.url} borderRadius={12} overflow="hidden" - marginTop={6} + marginTop={8} $gtMd={{ maxWidth: 320, }} @@ -79,7 +74,11 @@ const ChatMessage = (props: Props) => { ))} - {reactions && } + {reactions && ( + + + + )} ) diff --git a/packages/components/src/messages/components/actions.stories.tsx b/packages/components/src/messages/components/actions.stories.tsx new file mode 100644 index 00000000..712f6c93 --- /dev/null +++ b/packages/components/src/messages/components/actions.stories.tsx @@ -0,0 +1,41 @@ +import { Actions } from './actions' + +import type { Meta, StoryObj } from '@storybook/react' + +// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction +const meta: Meta = { + title: 'Messages/actions', + component: Actions, + argTypes: {}, + parameters: { + layout: 'centered', + design: { + type: 'figma', + url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Web?node-id=14560%3A157866&t=87Ziud3PyYYSvsRg-4', + }, + }, + decorators: [ + Story => { + return ( +
+ +
+ ) + }, + ], +} + +type Story = StoryObj + +// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args +export const Default: Story = { + args: {}, +} + +export default meta diff --git a/packages/components/src/messages/components/actions.tsx b/packages/components/src/messages/components/actions.tsx new file mode 100644 index 00000000..30c73bd0 --- /dev/null +++ b/packages/components/src/messages/components/actions.tsx @@ -0,0 +1,31 @@ +import { AddReaction, Options, Reply } from '@status-im/icons/20' +import { Stack } from 'tamagui' + +import { Button } from '../../button' + +interface Props { + onClick: VoidFunction +} +export const Actions = (_props: Props) => { + return ( + +