From 24d4bbe0540fe149e1b0832e67c5d2b250905350 Mon Sep 17 00:00:00 2001 From: Jakub Kotula <520927+jkbktl@users.noreply.github.com> Date: Tue, 11 Apr 2023 20:54:56 +0200 Subject: [PATCH] Delete message / system messages (#367) * initial * system messages * create subcomponents * all variants * integration into app * fix incorrect naming * fix icon color * fix spacings, positionings, colors * CR fixes * fix wrong props * fix imports * fix PR --- .../src/messages/components/actions.tsx | 11 +- packages/components/src/messages/index.tsx | 33 +++- .../added-users-message-content.tsx | 78 ++++++++++ .../components/deleted-message-content.tsx | 67 +++++++++ .../components/pinned-message-content.tsx | 76 ++++++++++ .../components/src/system-message/index.ts | 1 + .../system-message/system-message.stories.tsx | 142 ++++++++++++++++++ .../src/system-message/system-message.tsx | 121 +++++++++++++++ .../components/src/system-messages/index.ts | 1 - .../pin-announcement.stories.tsx | 25 --- .../src/system-messages/pin-announcement.tsx | 48 ------ packages/components/src/tokens.ts | 1 + 12 files changed, 521 insertions(+), 83 deletions(-) create mode 100644 packages/components/src/system-message/components/added-users-message-content.tsx create mode 100644 packages/components/src/system-message/components/deleted-message-content.tsx create mode 100644 packages/components/src/system-message/components/pinned-message-content.tsx create mode 100644 packages/components/src/system-message/index.ts create mode 100644 packages/components/src/system-message/system-message.stories.tsx create mode 100644 packages/components/src/system-message/system-message.tsx delete mode 100644 packages/components/src/system-messages/index.ts delete mode 100644 packages/components/src/system-messages/pin-announcement.stories.tsx delete mode 100644 packages/components/src/system-messages/pin-announcement.tsx diff --git a/packages/components/src/messages/components/actions.tsx b/packages/components/src/messages/components/actions.tsx index ef49f6ab..91353fcd 100644 --- a/packages/components/src/messages/components/actions.tsx +++ b/packages/components/src/messages/components/actions.tsx @@ -121,9 +121,16 @@ export const Actions = (props: Props) => { } - label="Delete message" + label="Delete for me" danger - onSelect={() => console.log('delete')} + onSelect={() => console.log('delete for me')} + /> + + } + label="Delete for everyone" + danger + onSelect={() => console.log('delete for everyone')} /> diff --git a/packages/components/src/messages/index.tsx b/packages/components/src/messages/index.tsx index c338709b..96e23fcc 100644 --- a/packages/components/src/messages/index.tsx +++ b/packages/components/src/messages/index.tsx @@ -2,7 +2,7 @@ import { Stack } from '@tamagui/core' import { DividerDate, DividerNewMessages } from '../dividers' import { MessageSkeleton } from '../skeleton' -import { PinAnnouncement } from '../system-messages' +import { SystemMessage } from '../system-message' import { Message } from './message' import type { ReactionsType } from './types' @@ -66,6 +66,11 @@ export const Messages = (props: Props) => { reactions={{}} id="1234-1237" /> + { pinned id="1234-1239" /> - { reactions={reactions} id="1234-1243" /> + + state: SystemMessageState +} + +const AddedUsersMessageContent = (props: Props) => { + const { user, users, timestamp, state } = props + + return ( + <> + + + + + + + + {user.name} + + added + {users.length === 1 && ( + + + + {users[0].name} + + + {timestamp} + + + )} + {users.length > 1 && ( + + + {users.map((user, i) => { + return ( + <> + + {users.length === i + 1 ? ' and ' : null} + + + + {user.name} + + + ) + })} + + + {timestamp} + + + )} + + + + ) +} + +export { AddedUsersMessageContent } diff --git a/packages/components/src/system-message/components/deleted-message-content.tsx b/packages/components/src/system-message/components/deleted-message-content.tsx new file mode 100644 index 00000000..f2d76ed7 --- /dev/null +++ b/packages/components/src/system-message/components/deleted-message-content.tsx @@ -0,0 +1,67 @@ +import { TimeoutIcon } from '@status-im/icons/12' +import { DeleteIcon } from '@status-im/icons/20' +import { Stack } from 'tamagui' + +import { IconAvatar } from '../../avatar' +import { Button } from '../../button' +import { Text } from '../../text' + +import type { SystemMessageState } from '../system-message' + +type Props = { + timestamp: string + text: string + action?: { + label: string + onPress: () => void + } + state: SystemMessageState +} + +const DeletedMessageContent = (props: Props) => { + const { timestamp, text, action, state } = props + + return ( + <> + + + + + + + {text} + + {timestamp} + + + {action && ( + + )} + + + + ) +} + +export { DeletedMessageContent } diff --git a/packages/components/src/system-message/components/pinned-message-content.tsx b/packages/components/src/system-message/components/pinned-message-content.tsx new file mode 100644 index 00000000..e3b82e85 --- /dev/null +++ b/packages/components/src/system-message/components/pinned-message-content.tsx @@ -0,0 +1,76 @@ +import { PinIcon } from '@status-im/icons/20' +import { Stack } from 'tamagui' + +import { Avatar, IconAvatar } from '../../avatar' +import { Text } from '../../text' + +import type { SystemMessageState, User } from '../system-message' + +type Props = { + timestamp: string + user: User + message: { + author: User + text: string + images?: { + type: 'photo' | 'gif' + srcs: Array + } + } + state: SystemMessageState +} + +const PinnedMessageContent = (props: Props) => { + const { timestamp, user, message, state } = props + + const { author, images, text } = message + + return ( + <> + + + + + + + {user.name} + + pinned a message + + {timestamp} + + + + + + + {author.name} + + {images?.type === 'gif' ? 'GIF' : text} + + {images?.type === 'photo' && images.srcs.length > 0 && ( + + {images.srcs.length} photos + + )} + + + + ) +} + +export { PinnedMessageContent } diff --git a/packages/components/src/system-message/index.ts b/packages/components/src/system-message/index.ts new file mode 100644 index 00000000..346b2039 --- /dev/null +++ b/packages/components/src/system-message/index.ts @@ -0,0 +1 @@ +export { SystemMessage } from './system-message' diff --git a/packages/components/src/system-message/system-message.stories.tsx b/packages/components/src/system-message/system-message.stories.tsx new file mode 100644 index 00000000..d64228ed --- /dev/null +++ b/packages/components/src/system-message/system-message.stories.tsx @@ -0,0 +1,142 @@ +import { action } from '@storybook/addon-actions' +import { Stack } from '@tamagui/core' + +import { SystemMessage } from './system-message' + +import type { Meta, StoryObj } from '@storybook/react' + +const meta: Meta = { + component: SystemMessage, + argTypes: { + state: { + control: 'select', + options: ['default', 'pressed', 'landed'], + }, + }, +} + +type Story = StoryObj + +export const AllVariants: Story = { + args: { state: 'default' }, + render: ({ state }) => ( + + + + + + + + + + + + ), +} + +export default meta diff --git a/packages/components/src/system-message/system-message.tsx b/packages/components/src/system-message/system-message.tsx new file mode 100644 index 00000000..99399eb7 --- /dev/null +++ b/packages/components/src/system-message/system-message.tsx @@ -0,0 +1,121 @@ +import { styled } from '@tamagui/core' +import { View } from 'react-native' + +import { AddedUsersMessageContent } from './components/added-users-message-content' +import { DeletedMessageContent } from './components/deleted-message-content' +import { PinnedMessageContent } from './components/pinned-message-content' + +type User = { + id: string + name: string + src: string +} + +type SystemMessageState = 'default' | 'pressed' | 'landed' + +type Props = { + state?: SystemMessageState + timestamp: string +} & ( + | { + type: 'pinned' + user: User + message: { + author: User + text: string + images?: { + type: 'photo' | 'gif' + srcs: Array + } + } + } + | { + type: 'deleted' + text: string + action?: { + label: string + onClick: () => void + } + } + | { + type: 'added' + user: User + users: Array + } +) + +const SystemMessage = (props: Props) => { + const { state = 'default', timestamp, type } = props + + const renderMessage = (type: 'pinned' | 'deleted' | 'added') => { + switch (type) { + case 'pinned': + return ( + + ) + case 'deleted': + return ( + + ) + case 'added': + return ( + + ) + } + } + + return ( + + {renderMessage(type)} + + ) +} + +export { SystemMessage } +export type { Props as SystemMessageProps, SystemMessageState, User } + +const Base = styled(View, { + backgroundColor: '$white-50', + borderRadius: '$16', + padding: 8, + + variants: { + state: { + default: { + backgroundColor: '$white-50', + }, + pressed: { + backgroundColor: '$neutral-5', + }, + landed: { + backgroundColor: '$blue-50-opa-5', + }, + landed_deleted: { + backgroundColor: '$red-50-opa-5', + }, + }, + }, +}) diff --git a/packages/components/src/system-messages/index.ts b/packages/components/src/system-messages/index.ts deleted file mode 100644 index 63e89270..00000000 --- a/packages/components/src/system-messages/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { PinAnnouncement } from './pin-announcement' diff --git a/packages/components/src/system-messages/pin-announcement.stories.tsx b/packages/components/src/system-messages/pin-announcement.stories.tsx deleted file mode 100644 index c5d659eb..00000000 --- a/packages/components/src/system-messages/pin-announcement.stories.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { PinAnnouncement } from './pin-announcement' - -import type { Meta, StoryObj } from '@storybook/react' - -const mockMessage = { - text: 'Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit.', - reactions: {}, - pinned: true, - id: '1234-1234', -} - -const meta: Meta = { - component: PinAnnouncement, -} - -type Story = StoryObj - -export const Primary: Story = { - args: { - name: 'Pavel', - message: mockMessage, - }, -} - -export default meta diff --git a/packages/components/src/system-messages/pin-announcement.tsx b/packages/components/src/system-messages/pin-announcement.tsx deleted file mode 100644 index fab4f65e..00000000 --- a/packages/components/src/system-messages/pin-announcement.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { PinIcon } from '@status-im/icons/16' -import { Stack } from '@tamagui/core' - -import { Avatar, IconAvatar } from '../avatar' -import { Text } from '../text' - -import type { MessageProps } from '../messages' - -type Props = { - message: MessageProps - name: string -} - -const PinAnnouncement = (props: Props) => { - const { message, name } = props - - return ( - - - - - - - - {name} - - pinned a message - - 09:30 - - - - - - Alisher Yakupov - - {message.text} - - - - ) -} - -export { PinAnnouncement } -export type { Props as PinAnnouncementProps } diff --git a/packages/components/src/tokens.ts b/packages/components/src/tokens.ts index 812453e4..a5590bdf 100644 --- a/packages/components/src/tokens.ts +++ b/packages/components/src/tokens.ts @@ -180,6 +180,7 @@ export const tokens = createTokens({ xdai: 'hsla(179, 51%, 50%, 1)', polygon: 'hsla(268, 84%, 70%, 1)', unknown: 'hsla(206, 26%, 95%, 1)', + transparent: 'hsla(0, 0%, 0%, 0)', }, size, space,