diff --git a/packages/components/src/accordion/accordion.stories.tsx b/packages/components/src/accordion/accordion.stories.tsx index 27ffe8f3..8d75f3d5 100644 --- a/packages/components/src/accordion/accordion.stories.tsx +++ b/packages/components/src/accordion/accordion.stories.tsx @@ -1,4 +1,4 @@ -import { Basketball, Collaboration, Play, Unicorn } from '../emoji' +import { CHANNEL_GROUPS } from '../sidebar/mock-data' import { Accordion } from './accordion' import { AccordionItem } from './accordionItem' @@ -27,47 +27,12 @@ export const Default: Story = { <> } - title={'# welcome'} - channelStatus="withMessages" - numberOfMessages={1} isSelected - onPress={() => { - // do nothing - }} - /> - } - title={'# general'} - channelStatus="withMentions" - numberOfMessages={2} - onPress={() => { - // do nothing - }} - mb={8} - /> - } - title={'# lounge'} - numberOfMessages={0} - onPress={() => { - // do nothing - }} - mb={8} - /> - } - title={'# random'} - channelStatus="muted" - numberOfMessages={0} - onPress={() => { - // do nothing - }} - mb={8} + channel={CHANNEL_GROUPS[0].channels[0]} /> + + + ), }, diff --git a/packages/components/src/accordion/accordionItem.tsx b/packages/components/src/accordion/accordionItem.tsx index 6f1eda6e..8c50f71e 100644 --- a/packages/components/src/accordion/accordionItem.tsx +++ b/packages/components/src/accordion/accordionItem.tsx @@ -3,18 +3,14 @@ import { Stack } from '@tamagui/core' import { Label, Paragraph } from '../typography' -import type { GetProps } from '@tamagui/core' - -type BaseProps = GetProps +import type { Channel } from '../sidebar/mock-data' type Props = { isSelected?: boolean - onToggle?: () => void - title: string - channelStatus?: 'muted' | 'normal' | 'withMessages' | 'withMentions' - icon?: React.ReactNode - numberOfMessages?: number -} & BaseProps + onPress?: () => void + channel: Channel + mb?: number +} const textColor = { muted: '$neutral-40', @@ -23,17 +19,12 @@ const textColor = { withMentions: '$neutral-100', } -const AccordionItem = ({ - icon, - isSelected, - title, - channelStatus = 'normal', - numberOfMessages, - ...rest -}: Props) => { +const AccordionItem = (props: Props) => { + const { channel, isSelected, onPress, mb } = props + const { emoji, title, channelStatus = 'normal', numberOfMessages } = channel + return ( - {icon && <>{icon}} + {emoji && ( + + {emoji} + + )} {title} diff --git a/packages/components/src/emoji/EmojiProps.ts b/packages/components/src/emoji/EmojiProps.ts deleted file mode 100644 index 79f18c2c..00000000 --- a/packages/components/src/emoji/EmojiProps.ts +++ /dev/null @@ -1,9 +0,0 @@ -import type { SizeTokens, StyleObject } from '@tamagui/core' -import type { SvgProps } from 'react-native-svg' - -export type EmojiProps = SvgProps & { - size?: number | SizeTokens - style?: StyleObject - sizeBackground?: number - hasBackground?: boolean -} diff --git a/packages/components/src/emoji/emojis/basketball.tsx b/packages/components/src/emoji/emojis/basketball.tsx deleted file mode 100644 index de031c9c..00000000 --- a/packages/components/src/emoji/emojis/basketball.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { memo } from 'react' - -import { Defs, Image, Path, Pattern, Svg, Use } from 'react-native-svg' - -import { themed } from '../themed' - -import type { EmojiProps } from '../EmojiProps' - -const Emoji = (props: EmojiProps) => { - const { size = 16, ...otherProps } = props - - return ( - - - - - - - - - - - ) -} - -Emoji.displayName = 'Basketball' - -export const Basketball = memo(themed(Emoji)) diff --git a/packages/components/src/emoji/emojis/collaboration.tsx b/packages/components/src/emoji/emojis/collaboration.tsx deleted file mode 100644 index 1eca8de5..00000000 --- a/packages/components/src/emoji/emojis/collaboration.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { memo } from 'react' - -import { Path, Svg } from 'react-native-svg' - -import { themed } from '../themed' - -import type { EmojiProps } from '../EmojiProps' - -const Emoji = (props: EmojiProps) => { - const { size = 16, ...otherProps } = props - - return ( - - - - - - - ) -} - -Emoji.displayName = 'Collaboration' - -export const Collaboration = memo(themed(Emoji)) diff --git a/packages/components/src/emoji/emojis/fire.tsx b/packages/components/src/emoji/emojis/fire.tsx deleted file mode 100644 index a341ca8b..00000000 --- a/packages/components/src/emoji/emojis/fire.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { memo } from 'react' - -import { Defs, Image, Path, Pattern, Svg, Use } from 'react-native-svg' - -import { themed } from '../themed' - -import type { EmojiProps } from '../EmojiProps' - -const Emoji = (props: EmojiProps) => { - const { size = 16, ...otherProps } = props - - return ( - - - - - - - - - - ) -} - -Emoji.displayName = 'Fire' - -export const Fire = memo(themed(Emoji)) diff --git a/packages/components/src/emoji/emojis/peach.tsx b/packages/components/src/emoji/emojis/peach.tsx deleted file mode 100644 index fd009f7b..00000000 --- a/packages/components/src/emoji/emojis/peach.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { memo } from 'react' - -import { - ClipPath, - Defs, - G, - Image, - Path, - Pattern, - Svg, - Use, -} from 'react-native-svg' - -import { themed } from '../themed' - -import type { EmojiProps } from '../EmojiProps' - -const Emoji = (props: EmojiProps) => { - const { size = 16, ...otherProps } = props - - return ( - - - - - - - - - - - - - - - ) -} - -Emoji.displayName = 'Peach' - -export const Peach = memo(themed(Emoji)) diff --git a/packages/components/src/emoji/emojis/play.tsx b/packages/components/src/emoji/emojis/play.tsx deleted file mode 100644 index bbe75133..00000000 --- a/packages/components/src/emoji/emojis/play.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { memo } from 'react' - -import { Path, Svg } from 'react-native-svg' - -import { themed } from '../themed' - -import type { EmojiProps } from '../EmojiProps' - -const Emoji = (props: EmojiProps) => { - const { size = 16, ...otherProps } = props - - return ( - - - - - - - - ) -} - -Emoji.displayName = 'Play' - -export const Play = memo(themed(Emoji)) diff --git a/packages/components/src/emoji/emojis/unicorn.tsx b/packages/components/src/emoji/emojis/unicorn.tsx deleted file mode 100644 index f96db2ba..00000000 --- a/packages/components/src/emoji/emojis/unicorn.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { memo } from 'react' - -import { - ClipPath, - Defs, - G, - Image, - Path, - Pattern, - Svg, - Use, -} from 'react-native-svg' - -import { themed } from '../themed' - -import type { EmojiProps } from '../EmojiProps' - -const Emoji = (props: EmojiProps) => { - const { size = 16, ...otherProps } = props - - return ( - - - - - - - - - - - - - - - ) -} - -Emoji.displayName = 'Unicorn' - -export const Unicorn = memo(themed(Emoji)) diff --git a/packages/components/src/emoji/index.tsx b/packages/components/src/emoji/index.tsx deleted file mode 100644 index 75639ca4..00000000 --- a/packages/components/src/emoji/index.tsx +++ /dev/null @@ -1,6 +0,0 @@ -export { Basketball } from './emojis/basketball' -export { Collaboration } from './emojis/collaboration' -export { Fire } from './emojis/fire' -export { Peach } from './emojis/peach' -export { Play } from './emojis/play' -export { Unicorn } from './emojis/unicorn' diff --git a/packages/components/src/emoji/themed.tsx b/packages/components/src/emoji/themed.tsx deleted file mode 100644 index e9975b71..00000000 --- a/packages/components/src/emoji/themed.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { Stack } from '@tamagui/core' - -import type { EmojiProps } from './EmojiProps' -import type React from 'react' - -export function themed(Component: React.ElementType) { - const useWrapped = (props: EmojiProps) => { - const { size, hasBackground, sizeBackground = 24, ...rest } = props - - if (hasBackground) { - return ( - - - - ) - } - return - } - return useWrapped -} diff --git a/packages/components/src/sidebar/mock-data.tsx b/packages/components/src/sidebar/mock-data.tsx index 55651a45..6bd3fefb 100644 --- a/packages/components/src/sidebar/mock-data.tsx +++ b/packages/components/src/sidebar/mock-data.tsx @@ -1,10 +1,8 @@ -import { Basketball, Collaboration, Fire, Peach, Play, Unicorn } from '../emoji' - export interface Channel { id: string title: string description: string - icon?: React.ReactNode + emoji: string channelStatus?: 'muted' | 'normal' | 'withMessages' | 'withMentions' numberOfMessages?: number } @@ -16,6 +14,10 @@ export interface ChannelGroup { channels: Channel[] } +const emojis = ['👋', '🔥', '🦄', '🍑', '🤫', '🫣', '🏀', '🤝'] + +const randomEmoji = () => emojis[Math.floor(Math.random() * emojis.length)] + // MOCK DATA export const CHANNEL_GROUPS: ChannelGroup[] = [ { @@ -26,25 +28,25 @@ export const CHANNEL_GROUPS: ChannelGroup[] = [ { id: 'welcome', title: '# welcome', - icon: , + emoji: randomEmoji(), description: 'Share random funny stuff with the community. Play nice.', }, { id: 'general-welcome', title: '# general', - icon: , + emoji: randomEmoji(), description: 'Share random funny stuff with the community. Play nice.', }, { id: 'random', title: '# random', - icon: , + emoji: randomEmoji(), description: 'Share random funny stuff with the community. Play nice.', }, { id: 'onboarding', title: '# onboarding', - icon: , + emoji: randomEmoji(), description: 'Share random funny stuff with the community. Play nice.', channelStatus: 'withMentions', numberOfMessages: 3, @@ -59,7 +61,7 @@ export const CHANNEL_GROUPS: ChannelGroup[] = [ { id: 'announcements', title: '# announcements', - icon: , + emoji: randomEmoji(), description: 'Share random funny stuff with the community. Play nice.', }, { @@ -67,7 +69,7 @@ export const CHANNEL_GROUPS: ChannelGroup[] = [ title: '# jobs', channelStatus: 'withMentions', numberOfMessages: 3, - icon: , + emoji: randomEmoji(), description: 'Share random funny stuff with the community. Play nice.', }, { @@ -75,13 +77,13 @@ export const CHANNEL_GROUPS: ChannelGroup[] = [ title: '# events', channelStatus: 'withMentions', numberOfMessages: 2, - icon: , + emoji: randomEmoji(), description: 'Share random funny stuff with the community. Play nice.', }, { id: 'meetups', title: '# meetups', - icon: , + emoji: randomEmoji(), description: 'Share random funny stuff with the community. Play nice.', }, ], @@ -93,25 +95,25 @@ export const CHANNEL_GROUPS: ChannelGroup[] = [ { id: 'design', title: '# design', - icon: , + emoji: randomEmoji(), description: 'Share random funny stuff with the community. Play nice.', }, { id: 'ux', title: '# ux', - icon: , + emoji: randomEmoji(), description: 'Share random funny stuff with the community. Play nice.', }, { id: 'ui', title: '# ui', - icon: , + emoji: randomEmoji(), description: 'Share random funny stuff with the community. Play nice.', }, { id: 'figma', title: '# figma', - icon: , + emoji: randomEmoji(), description: 'Share random funny stuff with the community. Play nice.', }, ], @@ -123,13 +125,13 @@ export const CHANNEL_GROUPS: ChannelGroup[] = [ { id: 'general', title: '# general', - icon: , + emoji: randomEmoji(), description: 'Share random funny stuff with the community. Play nice.', }, { id: 'people-ops', title: '# people-ops', - icon: , + emoji: randomEmoji(), description: 'Share random funny stuff with the community. Play nice.', }, ], @@ -141,27 +143,27 @@ export const CHANNEL_GROUPS: ChannelGroup[] = [ { id: 'react', title: '# react', - icon: , + emoji: randomEmoji(), description: 'Share random funny stuff with the community. Play nice.', channelStatus: 'withMessages', }, { id: 'vue', title: '# vue', - icon: , + emoji: randomEmoji(), description: 'Share random funny stuff with the community. Play nice.', }, { id: 'angular', title: '# angular', channelStatus: 'muted', - icon: , + emoji: randomEmoji(), description: 'Share random funny stuff with the community. Play nice.', }, { id: 'svelte', title: '# svelte', - icon: , + emoji: randomEmoji(), description: 'Share random funny stuff with the community. Play nice.', }, ], @@ -173,26 +175,26 @@ export const CHANNEL_GROUPS: ChannelGroup[] = [ { id: 'node', title: '# node', - icon: , + emoji: randomEmoji(), description: 'Share random funny stuff with the community. Play nice.', }, { id: 'python', title: '# python', - icon: , + emoji: randomEmoji(), description: 'Share random funny stuff with the community. Play nice.', }, { id: 'ruby', title: '# ruby', - icon: , + emoji: randomEmoji(), description: 'Share random funny stuff with the community. Play nice.', }, { id: 'php', title: '# php', channelStatus: 'muted', - icon: , + emoji: randomEmoji(), description: 'Share random funny stuff with the community. Play nice.', }, ], diff --git a/packages/components/src/sidebar/sidebar.stories.tsx b/packages/components/src/sidebar/sidebar.stories.tsx index 8f9206cd..832972e2 100644 --- a/packages/components/src/sidebar/sidebar.stories.tsx +++ b/packages/components/src/sidebar/sidebar.stories.tsx @@ -1,3 +1,4 @@ +import { CHANNEL_GROUPS } from './mock-data' import { Sidebar } from './sidebar' import type { Meta, StoryObj } from '@storybook/react' @@ -6,6 +7,9 @@ import type { Meta, StoryObj } from '@storybook/react' const meta: Meta = { title: 'Sidebar/Community', component: Sidebar, + args: { + channels: CHANNEL_GROUPS, + }, argTypes: {}, parameters: { design: { @@ -19,12 +23,7 @@ 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: { - name: 'Rarible', - description: - 'Multichain community-centric NFT marketplace. Create, buy and sell your NFTs.', - membersCount: 476, - }, + args: {}, } export default meta diff --git a/packages/components/src/sidebar/sidebar.tsx b/packages/components/src/sidebar/sidebar.tsx index 9aff2897..cc98c5ee 100644 --- a/packages/components/src/sidebar/sidebar.tsx +++ b/packages/components/src/sidebar/sidebar.tsx @@ -80,10 +80,7 @@ const Sidebar = (props: Props) => { return ( onChannelPress(channel.id)} mb={isLastChannelOfTheList ? 8 : 0} diff --git a/packages/components/src/topbar/topbar.stories.tsx b/packages/components/src/topbar/topbar.stories.tsx index 42695894..8d86d578 100644 --- a/packages/components/src/topbar/topbar.stories.tsx +++ b/packages/components/src/topbar/topbar.stories.tsx @@ -8,6 +8,14 @@ import type { Meta, StoryObj } from '@storybook/react' const meta: Meta = { title: 'Navigation/Topbar', component: Topbar, + args: { + channel: { + id: '1', + emoji: '👋', + title: '# channel', + description: 'This is a channel description', + }, + }, argTypes: {}, parameters: { viewport: { @@ -24,10 +32,7 @@ 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: { - title: '# channel', - description: 'This is a channel description', - }, + args: {}, } export const WithMembersSelected: Story = { diff --git a/packages/components/src/topbar/topbar.tsx b/packages/components/src/topbar/topbar.tsx index 2ff43c8b..e75cf073 100644 --- a/packages/components/src/topbar/topbar.tsx +++ b/packages/components/src/topbar/topbar.tsx @@ -11,7 +11,7 @@ import { ShareIcon, UpToDateIcon, } from '@status-im/icons/20' -import { Stack } from '@tamagui/core' +import { Stack, Text } from '@tamagui/core' import { BlurView } from 'expo-blur' import { DropdownMenu } from '../dropdown-menu' @@ -29,7 +29,7 @@ type Props = { const Topbar = (props: Props) => { const { membersVisisble, onMembersPress, goBack, blur, channel } = props - const { title, description, icon } = channel + const { title, description, emoji } = channel return ( @@ -53,7 +53,11 @@ const Topbar = (props: Props) => { /> - {icon && {icon}} + {emoji && ( + + {emoji} + + )} {title && (