From e7b6aa090d1c350ee31c0b8a7358401202610868 Mon Sep 17 00:00:00 2001
From: Pavel <14926950+prichodko@users.noreply.github.com>
Date: Wed, 5 Apr 2023 16:31:35 +0200
Subject: [PATCH] Update community sidebars, topbar & author (#370)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* add ChannelAvatar component
* add Channel component
* add expandable state to DividerLabel
* change counter story name
* Finalize SidebarCommunity component
* complete Author component
* update UserList component
* finalize SidebarMembers component
* Finalize Topbar component
* fix Banner truncate
* update dropdown menu props
* update app styles
* make mono font work
* render author part optionally
* rename css IDs
* remove console.log
* imageUrl -> imageSrc
* upgrade expo-blur
* add loading to messages
* fix ¯\_(ツ)_/¯ comment
---
apps/web/src/app.tsx | 57 ++++--
apps/web/styles/app.css | 24 +--
apps/web/styles/reset.css | 6 +
packages/components/package.json | 3 +-
.../src/accordion/accordion.stories.tsx | 41 ----
.../components/src/accordion/accordion.tsx | 105 ----------
.../src/accordion/accordionItem.tsx | 120 ------------
.../components/src/author/author.stories.tsx | 129 +++++++++++--
packages/components/src/author/author.tsx | 38 ++--
.../components/src/avatar/channel-avatar.tsx | 81 ++++++++
packages/components/src/avatar/index.tsx | 1 +
packages/components/src/banner/banner.tsx | 14 +-
.../src/channel/channel.stories.tsx | 64 +++++++
packages/components/src/channel/channel.tsx | 130 +++++++++++++
packages/components/src/channel/index.tsx | 1 +
packages/components/src/community/index.tsx | 4 +
.../src/{sidebar => community}/mock-data.tsx | 67 ++++---
.../components/channel-group.tsx | 74 +++++++
.../src/community/sidebar-community/index.tsx | 1 +
.../sidebar-community.stories.tsx | 47 +++++
.../sidebar-community/sidebar-community.tsx} | 82 ++++----
.../{ => community}/sidebar-members/index.tsx | 0
.../sidebar-member.stories.tsx | 8 +-
.../sidebar-members/sidebar-members.tsx | 53 +++--
.../index.ts => community/topbar/index.tsx} | 0
.../{ => community}/topbar/topbar.stories.tsx | 30 ++-
.../src/community/topbar/topbar.tsx | 161 ++++++++++++++++
.../src/counter/counter.stories.tsx | 1 +
.../dividers/divider-label/divider-label.tsx | 49 ++++-
.../src/dropdown-menu/dropdown-menu.tsx | 2 +-
packages/components/src/index.tsx | 8 +-
packages/components/src/messages/index.tsx | 25 ++-
packages/components/src/sidebar/index.tsx | 1 -
.../src/sidebar/sidebar.stories.tsx | 51 -----
packages/components/src/tamagui.config.ts | 3 +-
packages/components/src/topbar/topbar.tsx | 181 ------------------
.../components/src/user-list/user-list.tsx | 15 +-
packages/icons/20/notification-icon.tsx | 2 +-
yarn.lock | 43 ++++-
39 files changed, 1027 insertions(+), 695 deletions(-)
delete mode 100644 packages/components/src/accordion/accordion.stories.tsx
delete mode 100644 packages/components/src/accordion/accordion.tsx
delete mode 100644 packages/components/src/accordion/accordionItem.tsx
create mode 100644 packages/components/src/avatar/channel-avatar.tsx
create mode 100644 packages/components/src/channel/channel.stories.tsx
create mode 100644 packages/components/src/channel/channel.tsx
create mode 100644 packages/components/src/channel/index.tsx
create mode 100644 packages/components/src/community/index.tsx
rename packages/components/src/{sidebar => community}/mock-data.tsx (79%)
create mode 100644 packages/components/src/community/sidebar-community/components/channel-group.tsx
create mode 100644 packages/components/src/community/sidebar-community/index.tsx
create mode 100644 packages/components/src/community/sidebar-community/sidebar-community.stories.tsx
rename packages/components/src/{sidebar/sidebar.tsx => community/sidebar-community/sidebar-community.tsx} (53%)
rename packages/components/src/{ => community}/sidebar-members/index.tsx (100%)
rename packages/components/src/{ => community}/sidebar-members/sidebar-member.stories.tsx (78%)
rename packages/components/src/{ => community}/sidebar-members/sidebar-members.tsx (91%)
rename packages/components/src/{topbar/index.ts => community/topbar/index.tsx} (100%)
rename packages/components/src/{ => community}/topbar/topbar.stories.tsx (68%)
create mode 100644 packages/components/src/community/topbar/topbar.tsx
delete mode 100644 packages/components/src/sidebar/index.tsx
delete mode 100644 packages/components/src/sidebar/sidebar.stories.tsx
delete mode 100644 packages/components/src/topbar/topbar.tsx
diff --git a/apps/web/src/app.tsx b/apps/web/src/app.tsx
index 4e0195bd..aa8b6f2f 100644
--- a/apps/web/src/app.tsx
+++ b/apps/web/src/app.tsx
@@ -5,7 +5,7 @@ import {
CHANNEL_GROUPS,
Composer,
Messages,
- Sidebar,
+ SidebarCommunity,
SidebarMembers,
Topbar,
useAppDispatch,
@@ -20,8 +20,8 @@ const COMMUNITY = {
description:
'Multichain community-centric NFT marketplace. Create, buy and sell your NFTs.',
membersCount: 123,
- imageUrl:
- 'https://images.unsplash.com/photo-1574786527860-f2e274867c91?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1764&q=80',
+ imageSrc:
+ 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2264&q=80',
}
const updateProperty = (property: string, value: number) => {
@@ -29,8 +29,17 @@ const updateProperty = (property: string, value: number) => {
}
function App() {
+ const [loading, setLoading] = useState(false)
const [showMembers, setShowMembers] = useState(false)
+ // TODO: Use it to simulate loading
+ // useEffect(() => {
+ // setLoading(true)
+ // setTimeout(() => {
+ // setLoading(false)
+ // }, 2000)
+ // }, [])
+
const appState = useAppState()
const appDispatch = useAppDispatch()
@@ -73,13 +82,14 @@ function App() {
return (
-
@@ -90,27 +100,44 @@ function App() {
channel={selectedChannel}
showMembers={showMembers}
onMembersPress={() => setShowMembers(show => !show)}
+ pinnedMessages={[
+ {
+ text: 'Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit.',
+ reactions: {},
+ pinned: true,
+ id: '1234-1234',
+ },
+ {
+ text: 'Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam.',
+ reactions: {},
+ pinned: true,
+ id: '4321-4321',
+ },
+ ]}
+ loading={loading}
/>
-
- {scrollPosition !== 'bottom' && (
-
- )}
-
-
+ {scrollPosition !== 'bottom' && (
+
+ )}
+
+
+
)}
diff --git a/apps/web/styles/app.css b/apps/web/styles/app.css
index f4280fb8..35c5d522 100644
--- a/apps/web/styles/app.css
+++ b/apps/web/styles/app.css
@@ -18,19 +18,25 @@ body,
#app {
isolation: isolate;
- height: 100%;
+ height: 100vh;
display: grid;
grid-template-columns: 352px 1fr auto;
}
-#main {
- position: relative;
+#sidebar-community {
+ overflow: auto;
height: 100vh;
}
-#sidebar {
+#sidebar-members {
+ width: 352px;
overflow: auto;
- height: 100vh;
+ background-color: #fff;
+ z-index: 2;
+}
+
+#main {
+ position: relative;
}
#topbar {
@@ -45,6 +51,7 @@ body,
padding-top: var(--topbar-height);
padding-bottom: var(--composer-height);
height: 100vh;
+ isolation: isolate;
}
#messages {
@@ -60,12 +67,7 @@ body,
#composer {
position: absolute;
inset: auto 0 0;
- z-index: 100;
-}
-
-#members {
- width: 352px;
- overflow: auto;
+ z-index: 1;
}
@media screen and (max-width: 768px) {
diff --git a/apps/web/styles/reset.css b/apps/web/styles/reset.css
index 4dc13e3e..5a2a76c3 100644
--- a/apps/web/styles/reset.css
+++ b/apps/web/styles/reset.css
@@ -92,3 +92,9 @@ h6 {
#__next {
isolation: isolate;
}
+
+/* Temporary testing purposes of keyboard navigation */
+button:focus-visible {
+ outline: 2px solid crimson;
+ border-radius: 3px;
+}
diff --git a/packages/components/package.json b/packages/components/package.json
index fdc5743c..ac7b26ed 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -29,6 +29,7 @@
"react-native-web": "^0.18.0"
},
"dependencies": {
+ "@radix-ui/react-accordion": "^1.1.1",
"@radix-ui/react-dialog": "^1.0.3",
"@radix-ui/react-dropdown-menu": "^2.0.4",
"@radix-ui/react-popover": "^1.0.5",
@@ -43,7 +44,7 @@
"@tamagui/react-native-media-driver": "1.7.7",
"@tamagui/shorthands": "1.7.7",
"@tamagui/theme-base": "1.7.7",
- "expo-blur": "~12.0.1",
+ "expo-blur": "^12.2.2",
"expo-linear-gradient": "^12.1.2",
"tamagui": "1.7.7",
"zustand": "^4.3.6"
diff --git a/packages/components/src/accordion/accordion.stories.tsx b/packages/components/src/accordion/accordion.stories.tsx
deleted file mode 100644
index c1afb90d..00000000
--- a/packages/components/src/accordion/accordion.stories.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { CHANNEL_GROUPS } from '../sidebar/mock-data'
-import { Accordion } from './accordion'
-import { AccordionItem } from './accordionItem'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta: Meta
= {
- component: Accordion,
- argTypes: {},
- args: {
- unreadCount: 3,
- title: 'Welcome',
- },
- parameters: {
- design: {
- type: 'figma',
- url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Web?node-id=14849%3A172544&t=4BeIzudVkio0c6Px-4',
- },
- },
-}
-
-type Story = StoryObj
-
-export const Default: Story = {
- args: {
- children: (
- <>
-
-
-
-
-
- ),
- },
-}
-
-export default meta
diff --git a/packages/components/src/accordion/accordion.tsx b/packages/components/src/accordion/accordion.tsx
deleted file mode 100644
index 2c42a3d7..00000000
--- a/packages/components/src/accordion/accordion.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { Fragment, useState } from 'react'
-
-import { ChevronRightIcon } from '@status-im/icons/20'
-import { Stack } from '@tamagui/core'
-import { AnimatePresence } from 'tamagui'
-
-import { Text } from '../text'
-
-type Props = {
- children: React.ReactElement[] | React.ReactElement
- initialExpanded: boolean
- title: string
- unreadCount?: number
-}
-
-const Accordion = (props: Props) => {
- const { children, initialExpanded, title, unreadCount } = props
-
- const [isExpanded, setIsExpanded] = useState(initialExpanded)
-
- return (
-
-
-
- setIsExpanded(prev => !prev)}
- cursor="pointer"
- py={8}
- >
-
-
-
-
-
- {title}
-
-
-
- {!isExpanded && unreadCount !== 0 && (
-
-
-
- {unreadCount}
-
-
-
- )}
-
-
-
- {isExpanded && {children}}
-
-
-
-
- )
-}
-
-export { Accordion }
diff --git a/packages/components/src/accordion/accordionItem.tsx b/packages/components/src/accordion/accordionItem.tsx
deleted file mode 100644
index ae241bed..00000000
--- a/packages/components/src/accordion/accordionItem.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { MutedIcon } from '@status-im/icons/20'
-import { Stack, Text as RNText } from '@tamagui/core'
-
-import { Text } from '../text'
-
-import type { Channel } from '../sidebar/mock-data'
-import type { ColorTokens } from '@tamagui/core'
-
-type Props = {
- selected?: boolean
- onPress?: () => void
- channel: Channel
-}
-
-const textColors: Record, ColorTokens> = {
- muted: '$neutral-40',
- normal: '$neutral-50',
- withMessages: '$neutral-100',
- withMentions: '$neutral-100',
-}
-
-const AccordionItem = (props: Props) => {
- const { channel, selected, onPress } = props
-
- const { emoji, title, channelStatus = 'normal', unreadCount } = channel
-
- return (
-
-
- {emoji && (
-
- {emoji}
-
- )}
-
- {title}
-
-
- {channelStatus !== 'normal' && (
-
- {channelStatus === 'withMentions' && (
-
-
-
- {unreadCount}
-
-
-
- )}
- {channelStatus === 'withMessages' && (
-
-
-
- )}
- {channelStatus === 'muted' && }
-
- )}
-
- )
-}
-
-export { AccordionItem }
diff --git a/packages/components/src/author/author.stories.tsx b/packages/components/src/author/author.stories.tsx
index 6c2cc87c..4c50f028 100644
--- a/packages/components/src/author/author.stories.tsx
+++ b/packages/components/src/author/author.stories.tsx
@@ -1,3 +1,5 @@
+import { Stack } from 'tamagui'
+
import { Author } from './author'
import type { Meta, StoryObj } from '@storybook/react'
@@ -14,30 +16,125 @@ const meta: Meta = {
url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Web?node-id=3155%3A49848&t=87Ziud3PyYYSvsRg-4',
},
},
+
+ render: args => (
+
+
+
+
+
+
+ ),
}
type Story = StoryObj
-export const Default: Story = {
+export const AllVariants: Story = {
args: {},
-}
+ render: args => (
+
+
+
+
+
+
+
-export const Contact: Story = {
- args: {
- status: 'contact',
- },
-}
+
+
+
+
+
+
-export const Verified: Story = {
- args: {
- status: 'verified',
- },
-}
+
+
+
+
+
+
-export const Untrustworthy: Story = {
- args: {
- status: 'untrustworthy',
- },
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
}
export default meta
diff --git a/packages/components/src/author/author.tsx b/packages/components/src/author/author.tsx
index 5f250367..c49608ec 100644
--- a/packages/components/src/author/author.tsx
+++ b/packages/components/src/author/author.tsx
@@ -7,34 +7,50 @@ import { XStack } from 'tamagui'
import { Text } from '../text'
-interface Props {
+import type { TextProps } from '../text'
+
+type Props = {
name: string
+ size?: Extract
nickname?: string
- address?: string
status?: 'verified' | 'untrustworthy' | 'contact'
+ address?: string
time?: string
- orientation?: 'horizontal' | 'vertical'
}
const Author = (props: Props) => {
- const { name, status, address, time } = props
+ const { name, size = 13, nickname, status, address, time } = props
return (
-
-
+
+
{name}
+
+ {nickname && (
+
+ · {nickname}
+
+ )}
{status === 'contact' && }
{status === 'verified' && }
{status === 'untrustworthy' && }
- {address && (
-
- {address}
- {time && ` · ${time}`}
-
+ {(address || time) && (
+
+ {address && (
+
+ {address}
+
+ )}
+ {time && (
+
+ · {time}
+
+ )}
+
)}
)
diff --git a/packages/components/src/avatar/channel-avatar.tsx b/packages/components/src/avatar/channel-avatar.tsx
new file mode 100644
index 00000000..377d452e
--- /dev/null
+++ b/packages/components/src/avatar/channel-avatar.tsx
@@ -0,0 +1,81 @@
+import { LockedIcon, UnlockedIcon } from '@status-im/icons/12'
+import { type ColorTokens, Stack, styled, Text } from '@tamagui/core'
+
+type Props = {
+ emoji: string
+ color?: ColorTokens
+ background?: ColorTokens
+ size: 32 | 24 | 20
+ lock?: 'locked' | 'unlocked' | 'none'
+}
+
+const emojiSizes: Record = {
+ 32: 14,
+ 24: 13,
+ 20: 11,
+}
+
+// https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Desktop%2FWeb?node-id=399-20709&t=kX5LC5OYFnSF8BiZ-11
+const ChannelAvatar = (props: Props) => {
+ const { emoji, background = '$blue-50-opa-20', size, lock = 'none' } = props
+
+ return (
+
+ {lock !== 'none' && (
+
+ {lock === 'locked' ? : }
+
+ )}
+
+ {emoji}
+
+ )
+}
+
+export { ChannelAvatar }
+export type { Props as ChannelAvatarProps }
+
+const Base = styled(Stack, {
+ position: 'relative',
+ justifyContent: 'center',
+ alignItems: 'center',
+
+ variants: {
+ size: {
+ '...': (size: number) => {
+ return {
+ width: size,
+ height: size,
+ borderRadius: size / 2,
+ }
+ },
+ },
+ },
+})
+
+const LockBase = styled(Stack, {
+ justifyContent: 'center',
+ alignItems: 'center',
+ width: 16,
+ height: 16,
+ backgroundColor: '$white-100',
+ position: 'absolute',
+ borderRadius: 16,
+
+ variants: {
+ variant: {
+ 32: {
+ right: -4,
+ bottom: -4,
+ },
+ 24: {
+ right: -4,
+ bottom: -4,
+ },
+ 20: {
+ right: -6,
+ bottom: -6,
+ },
+ },
+ },
+})
diff --git a/packages/components/src/avatar/index.tsx b/packages/components/src/avatar/index.tsx
index 0dac2863..e4535795 100644
--- a/packages/components/src/avatar/index.tsx
+++ b/packages/components/src/avatar/index.tsx
@@ -1,2 +1,3 @@
export * from './avatar'
+export * from './channel-avatar'
export * from './icon-avatar'
diff --git a/packages/components/src/banner/banner.tsx b/packages/components/src/banner/banner.tsx
index c8bd549c..8ca884e2 100644
--- a/packages/components/src/banner/banner.tsx
+++ b/packages/components/src/banner/banner.tsx
@@ -1,4 +1,4 @@
-import { styled } from '@tamagui/core'
+import { Stack, styled } from '@tamagui/core'
import { View } from 'react-native'
import { Counter } from '../counter'
@@ -15,7 +15,7 @@ type Props = {
const Banner = (props: Props) => {
const {
- icon,
+ icon = null,
children,
count,
backgroundColor = '$primary-50-opa-20',
@@ -25,9 +25,11 @@ const Banner = (props: Props) => {
{icon}
-
- {children}
-
+
+
+ {children}
+
+
{count ? : null}
@@ -43,10 +45,12 @@ const Base = styled(View, {
alignItems: 'center',
justifyContent: 'space-between',
maxHeight: '40px',
+ gap: 10,
})
const Content = styled(View, {
flexDirection: 'row',
gap: 10,
alignItems: 'center',
+ width: '90%', // truncate does not work without this ¯\_(ツ)_/¯
})
diff --git a/packages/components/src/channel/channel.stories.tsx b/packages/components/src/channel/channel.stories.tsx
new file mode 100644
index 00000000..41ccedb1
--- /dev/null
+++ b/packages/components/src/channel/channel.stories.tsx
@@ -0,0 +1,64 @@
+import { Stack } from '@tamagui/core'
+
+import { Channel } from './channel'
+
+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 = {
+ component: Channel,
+ args: {
+ emoji: '🍑',
+ children: 'channel',
+ },
+
+ argTypes: {},
+
+ parameters: {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Desktop%2FWeb?node-id=411-18564&t=kX5LC5OYFnSF8BiZ-11',
+ },
+ },
+
+ render: args => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+}
+
+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: {
+ lock: 'none',
+ },
+}
+
+export const Locked: Story = {
+ args: {
+ lock: 'locked',
+ },
+}
+
+export const Unlocked: Story = {
+ args: {
+ lock: 'unlocked',
+ },
+}
+
+export default meta
diff --git a/packages/components/src/channel/channel.tsx b/packages/components/src/channel/channel.tsx
new file mode 100644
index 00000000..9af9a530
--- /dev/null
+++ b/packages/components/src/channel/channel.tsx
@@ -0,0 +1,130 @@
+import { useState } from 'react'
+
+import { MutedIcon, NotificationIcon, OptionsIcon } from '@status-im/icons/20'
+import { Stack, styled } from 'tamagui'
+
+import { ChannelAvatar } from '../avatar'
+import { Counter } from '../counter'
+import { DropdownMenu } from '../dropdown-menu'
+import { Text } from '../text'
+
+import type { ChannelAvatarProps } from '../avatar'
+import type { ColorTokens } from 'tamagui'
+
+type Props = {
+ children: string
+ selected: boolean
+ emoji: ChannelAvatarProps['emoji']
+ lock?: ChannelAvatarProps['lock']
+ mentionCount?: number
+} & (
+ | {
+ type: 'default' | 'notification' | 'muted'
+ }
+ | {
+ type: 'mention'
+ mentionCount: number
+ }
+)
+
+const textColors: Record = {
+ default: '$neutral-50',
+ notification: '$neutral-100',
+ mention: '$neutral-100',
+ muted: '$neutral-40',
+}
+
+const Channel = (props: Props) => {
+ const { type, children, selected, emoji, lock } = props
+
+ const [hovered, setHovered] = useState(false)
+ const [menuOpen, setMenuOpen] = useState(false)
+
+ const active = hovered || menuOpen
+
+ const renderContent = () => {
+ if (active) {
+ return (
+
+
+
+
+
+ {/* TODO: Find all options */}
+
+ }
+ label="Mute channel"
+ onSelect={() => {
+ console.log('Mute channel')
+ }}
+ />
+ }
+ label="Mark as read"
+ onSelect={() => {
+ console.log('Mark as read')
+ }}
+ />
+
+
+ )
+ }
+
+ switch (type) {
+ case 'default':
+ return null
+ case 'mention': {
+ const { mentionCount } = props
+ return
+ }
+ case 'notification':
+ return
+ case 'muted':
+ return
+ }
+ }
+
+ const textColor: ColorTokens =
+ selected || active ? '$neutral-100' : textColors[type]
+
+ return (
+ setHovered(true)}
+ onHoverOut={() => setHovered(false)}
+ state={active ? 'active' : selected ? 'selected' : undefined}
+ >
+
+
+
+ # {children}
+
+
+
+ {renderContent()}
+
+ )
+}
+
+export { Channel }
+export type { Props as ChannelProps }
+
+const Base = styled(Stack, {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ padding: 8,
+ borderRadius: 12,
+ userSelect: 'none',
+
+ variants: {
+ state: {
+ active: {
+ backgroundColor: '$primary-50-opa-5',
+ },
+ selected: {
+ backgroundColor: '$primary-50-opa-10',
+ },
+ },
+ },
+})
diff --git a/packages/components/src/channel/index.tsx b/packages/components/src/channel/index.tsx
new file mode 100644
index 00000000..b3106c5b
--- /dev/null
+++ b/packages/components/src/channel/index.tsx
@@ -0,0 +1 @@
+export { Channel, type ChannelProps } from './channel'
diff --git a/packages/components/src/community/index.tsx b/packages/components/src/community/index.tsx
new file mode 100644
index 00000000..441fe1f4
--- /dev/null
+++ b/packages/components/src/community/index.tsx
@@ -0,0 +1,4 @@
+export { CHANNEL_GROUPS } from './mock-data'
+export { SidebarCommunity } from './sidebar-community'
+export { SidebarMembers } from './sidebar-members'
+export { Topbar } from './topbar'
diff --git a/packages/components/src/sidebar/mock-data.tsx b/packages/components/src/community/mock-data.tsx
similarity index 79%
rename from packages/components/src/sidebar/mock-data.tsx
rename to packages/components/src/community/mock-data.tsx
index 6a34cc51..6dce0ba7 100644
--- a/packages/components/src/sidebar/mock-data.tsx
+++ b/packages/components/src/community/mock-data.tsx
@@ -1,17 +1,17 @@
-export interface Channel {
+export interface ChannelType {
id: string
title: string
description: string
emoji: string
- channelStatus?: 'muted' | 'normal' | 'withMessages' | 'withMentions'
- unreadCount?: number
+ channelStatus?: 'default' | 'notification' | 'muted'
+ mentionCount?: number
}
-export interface ChannelGroup {
+export interface ChannelGroupType {
id: string
title: string
unreadCount?: number
- channels: Channel[]
+ channels: ChannelType[]
}
const emojis = ['👋', '🔥', '🦄', '🍑', '🤫', '🫣', '🏀', '🤝']
@@ -19,7 +19,7 @@ const emojis = ['👋', '🔥', '🦄', '🍑', '🤫', '🫣', '🏀', '🤝']
const randomEmoji = () => emojis[Math.floor(Math.random() * emojis.length)]
// MOCK DATA
-export const CHANNEL_GROUPS: ChannelGroup[] = [
+export const CHANNEL_GROUPS: ChannelGroupType[] = [
{
id: 'welcome',
title: 'Welcome',
@@ -27,29 +27,28 @@ export const CHANNEL_GROUPS: ChannelGroup[] = [
channels: [
{
id: 'welcome',
- title: '# welcome',
+ title: 'welcome',
emoji: randomEmoji(),
description: 'Share random funny stuff with the community. Play nice.',
},
{
id: 'general-welcome',
- title: '# general',
+ title: 'general',
emoji: randomEmoji(),
description: 'Share random funny stuff with the community. Play nice.',
},
{
id: 'random',
- title: '# random',
+ title: 'random',
emoji: randomEmoji(),
description: 'Share random funny stuff with the community. Play nice.',
},
{
id: 'onboarding',
- title: '# onboarding',
+ title: 'onboarding',
emoji: randomEmoji(),
description: 'Share random funny stuff with the community. Play nice.',
- channelStatus: 'withMentions',
- unreadCount: 3,
+ mentionCount: 3,
},
],
},
@@ -60,29 +59,27 @@ export const CHANNEL_GROUPS: ChannelGroup[] = [
channels: [
{
id: 'announcements',
- title: '# announcements',
+ title: 'announcements',
emoji: randomEmoji(),
description: 'Share random funny stuff with the community. Play nice.',
},
{
id: 'jobs',
- title: '# jobs',
- channelStatus: 'withMentions',
- unreadCount: 3,
+ title: 'jobs',
+ mentionCount: 3,
emoji: randomEmoji(),
description: 'Share random funny stuff with the community. Play nice.',
},
{
id: 'events',
- title: '# events',
- channelStatus: 'withMentions',
- unreadCount: 2,
+ title: 'events',
+ mentionCount: 2,
emoji: randomEmoji(),
description: 'Share random funny stuff with the community. Play nice.',
},
{
id: 'meetups',
- title: '# meetups',
+ title: 'meetups',
emoji: randomEmoji(),
description: 'Share random funny stuff with the community. Play nice.',
},
@@ -94,25 +91,25 @@ export const CHANNEL_GROUPS: ChannelGroup[] = [
channels: [
{
id: 'design',
- title: '# design',
+ title: 'design',
emoji: randomEmoji(),
description: 'Share random funny stuff with the community. Play nice.',
},
{
id: 'ux',
- title: '# ux',
+ title: 'ux',
emoji: randomEmoji(),
description: 'Share random funny stuff with the community. Play nice.',
},
{
id: 'ui',
- title: '# ui',
+ title: 'ui',
emoji: randomEmoji(),
description: 'Share random funny stuff with the community. Play nice.',
},
{
id: 'figma',
- title: '# figma',
+ title: 'figma',
emoji: randomEmoji(),
description: 'Share random funny stuff with the community. Play nice.',
},
@@ -124,13 +121,13 @@ export const CHANNEL_GROUPS: ChannelGroup[] = [
channels: [
{
id: 'general',
- title: '# general',
+ title: 'general',
emoji: randomEmoji(),
description: 'Share random funny stuff with the community. Play nice.',
},
{
id: 'people-ops',
- title: '# people-ops',
+ title: 'people-ops',
emoji: randomEmoji(),
description: 'Share random funny stuff with the community. Play nice.',
},
@@ -142,27 +139,27 @@ export const CHANNEL_GROUPS: ChannelGroup[] = [
channels: [
{
id: 'react',
- title: '# react',
+ title: 'react',
emoji: randomEmoji(),
description: 'Share random funny stuff with the community. Play nice.',
- channelStatus: 'withMessages',
+ channelStatus: 'notification',
},
{
id: 'vue',
- title: '# vue',
+ title: 'vue',
emoji: randomEmoji(),
description: 'Share random funny stuff with the community. Play nice.',
},
{
id: 'angular',
- title: '# angular',
+ title: 'angular',
channelStatus: 'muted',
emoji: randomEmoji(),
description: 'Share random funny stuff with the community. Play nice.',
},
{
id: 'svelte',
- title: '# svelte',
+ title: 'svelte',
emoji: randomEmoji(),
description: 'Share random funny stuff with the community. Play nice.',
},
@@ -174,25 +171,25 @@ export const CHANNEL_GROUPS: ChannelGroup[] = [
channels: [
{
id: 'node',
- title: '# node',
+ title: 'node',
emoji: randomEmoji(),
description: 'Share random funny stuff with the community. Play nice.',
},
{
id: 'python',
- title: '# python',
+ title: 'python',
emoji: randomEmoji(),
description: 'Share random funny stuff with the community. Play nice.',
},
{
id: 'ruby',
- title: '# ruby',
+ title: 'ruby',
emoji: randomEmoji(),
description: 'Share random funny stuff with the community. Play nice.',
},
{
id: 'php',
- title: '# php',
+ title: 'php',
channelStatus: 'muted',
emoji: randomEmoji(),
description: 'Share random funny stuff with the community. Play nice.',
diff --git a/packages/components/src/community/sidebar-community/components/channel-group.tsx b/packages/components/src/community/sidebar-community/components/channel-group.tsx
new file mode 100644
index 00000000..e332006f
--- /dev/null
+++ b/packages/components/src/community/sidebar-community/components/channel-group.tsx
@@ -0,0 +1,74 @@
+import * as Accordion from '@radix-ui/react-accordion'
+import { Stack } from 'tamagui'
+
+import { Channel } from '../../../channel'
+import { DividerLabel } from '../../../dividers'
+
+import type { ChannelType } from '../../mock-data'
+
+type Props = {
+ name: string
+ channels: ChannelType[]
+ unreadCount?: number
+ selectedChannelId?: string
+ expanded: boolean
+}
+
+const ChannelGroup = (props: Props) => {
+ const { name, channels, selectedChannelId, expanded } = props
+
+ const totalMentionsCount = channels.reduce(
+ (acc, channel) => acc + (channel.mentionCount || 0),
+ 0
+ )
+
+ return (
+
+
+
+ 0 && expanded === false
+ ? totalMentionsCount
+ : undefined
+ }
+ />
+
+
+
+ {channels.map(channel => {
+ const {
+ emoji,
+ title,
+ //This will work differently with the live data
+ channelStatus: type = 'default',
+ mentionCount = 0,
+ } = channel
+
+ const selected = selectedChannelId === channel.id
+
+ return (
+
+ 0
+ ? { type: 'mention', mentionCount }
+ : { type })}
+ >
+ {title}
+
+
+ )
+ })}
+
+
+
+ )
+}
+
+export { ChannelGroup }
diff --git a/packages/components/src/community/sidebar-community/index.tsx b/packages/components/src/community/sidebar-community/index.tsx
new file mode 100644
index 00000000..8ec2c457
--- /dev/null
+++ b/packages/components/src/community/sidebar-community/index.tsx
@@ -0,0 +1 @@
+export { SidebarCommunity } from './sidebar-community'
diff --git a/packages/components/src/community/sidebar-community/sidebar-community.stories.tsx b/packages/components/src/community/sidebar-community/sidebar-community.stories.tsx
new file mode 100644
index 00000000..102b335d
--- /dev/null
+++ b/packages/components/src/community/sidebar-community/sidebar-community.stories.tsx
@@ -0,0 +1,47 @@
+import { CHANNEL_GROUPS } from '../mock-data'
+import { SidebarCommunity } from './sidebar-community'
+
+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: 'Community/Community Sidebar',
+ component: SidebarCommunity,
+ args: {
+ community: {
+ name: 'Rarible',
+ description:
+ 'Multichain community-centric NFT marketplace. Create, buy and sell your NFTs.',
+ membersCount: 123,
+ imageSrc:
+ 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2264&q=80',
+ },
+ channels: CHANNEL_GROUPS,
+ },
+ argTypes: {},
+ parameters: {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Web?node-id=14692%3A148489&t=NfQkS7CPSrZknAGF-4',
+ },
+ },
+ render: args => (
+
+
+
+ ),
+}
+
+type Story = StoryObj
+
+export const Default: Story = {
+ args: {},
+}
+
+export const Loading: Story = {
+ args: {
+ loading:true
+ },
+}
+
+export default meta
diff --git a/packages/components/src/sidebar/sidebar.tsx b/packages/components/src/community/sidebar-community/sidebar-community.tsx
similarity index 53%
rename from packages/components/src/sidebar/sidebar.tsx
rename to packages/components/src/community/sidebar-community/sidebar-community.tsx
index 069ef28a..d3985433 100644
--- a/packages/components/src/sidebar/sidebar.tsx
+++ b/packages/components/src/community/sidebar-community/sidebar-community.tsx
@@ -1,42 +1,47 @@
+import { useState } from 'react'
+
+import * as Accordion from '@radix-ui/react-accordion'
import { GroupIcon } from '@status-im/icons/16'
+import { CommunitiesIcon } from '@status-im/icons/20'
import { Stack } from '@tamagui/core'
-import { Accordion } from '../accordion/accordion'
-import { AccordionItem } from '../accordion/accordionItem'
-import { Avatar } from '../avatar'
-import { Button } from '../button'
-import { Image } from '../image'
-import { SidebarSkeleton } from '../skeleton/sidebar-skeleton'
-import { Text } from '../text'
-import { CHANNEL_GROUPS } from './mock-data'
+import { Avatar } from '../../avatar'
+import { Button } from '../../button'
+import { Image } from '../../image'
+import { SidebarSkeleton } from '../../skeleton/sidebar-skeleton'
+import { Text } from '../../text'
+import { CHANNEL_GROUPS } from '../mock-data'
+import { ChannelGroup } from './components/channel-group'
-import type { ChannelGroup } from './mock-data'
+import type { ChannelGroupType } from '../mock-data'
-export type SidebarProps = {
+type Props = {
community: {
name: string
description: string
membersCount: number
- imageUrl: string
+ imageSrc: string
}
- channels?: ChannelGroup[]
+ channels?: ChannelGroupType[]
selectedChannelId?: string
onChannelPress: (channelId: string) => void
- isLoading?: boolean
+ loading?: boolean
}
-const Sidebar = (props: SidebarProps) => {
+const SidebarCommunity = (props: Props) => {
const {
community,
channels = CHANNEL_GROUPS,
selectedChannelId,
- onChannelPress,
- isLoading,
+ loading,
+ // onChannelPress,
} = props
- const { name, description, membersCount, imageUrl } = community
+ const { name, description, membersCount, imageSrc } = community
- if (isLoading) {
+ const [value, setValue] = useState(['Welcome'])
+
+ if (loading) {
return
}
@@ -48,7 +53,7 @@ const Sidebar = (props: SidebarProps) => {
height="100%"
overflow="scroll"
>
-
+
{
{membersCount}
-
+ }>Request to join community
- {channels.map(group => (
-
- {group.channels.map(channel => {
- return (
- onChannelPress(channel.id)}
- />
- )
- })}
-
- ))}
-
+
+
+ {channels.map(group => {
+ return (
+
+ )
+ })}
+
)
}
-export { Sidebar }
+export { SidebarCommunity }
diff --git a/packages/components/src/sidebar-members/index.tsx b/packages/components/src/community/sidebar-members/index.tsx
similarity index 100%
rename from packages/components/src/sidebar-members/index.tsx
rename to packages/components/src/community/sidebar-members/index.tsx
diff --git a/packages/components/src/sidebar-members/sidebar-member.stories.tsx b/packages/components/src/community/sidebar-members/sidebar-member.stories.tsx
similarity index 78%
rename from packages/components/src/sidebar-members/sidebar-member.stories.tsx
rename to packages/components/src/community/sidebar-members/sidebar-member.stories.tsx
index cf8e8314..d1b29d82 100644
--- a/packages/components/src/sidebar-members/sidebar-member.stories.tsx
+++ b/packages/components/src/community/sidebar-members/sidebar-member.stories.tsx
@@ -4,9 +4,15 @@ 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: 'Sidebar/Members',
+ title: 'Community/Members Sidebar',
component: SidebarMembers,
+ args: {},
argTypes: {},
+ render: () => (
+
+
+
+ ),
}
type Story = StoryObj
diff --git a/packages/components/src/sidebar-members/sidebar-members.tsx b/packages/components/src/community/sidebar-members/sidebar-members.tsx
similarity index 91%
rename from packages/components/src/sidebar-members/sidebar-members.tsx
rename to packages/components/src/community/sidebar-members/sidebar-members.tsx
index ff5ce454..9d84e06d 100644
--- a/packages/components/src/sidebar-members/sidebar-members.tsx
+++ b/packages/components/src/community/sidebar-members/sidebar-members.tsx
@@ -1,32 +1,18 @@
import { Stack } from '@tamagui/core'
-import { DividerLabel } from '../dividers'
-import { UserList } from '../user-list'
+import { DividerLabel } from '../../dividers'
+import { UserList } from '../../user-list'
-import type { UserListProps } from '../user-list'
+import type { UserListProps } from '../../user-list'
-type GroupProps = {
- label: string
- users: UserListProps['users']
-}
-
-const Group = (props: GroupProps) => {
- const { label, users } = props
-
- return (
-
-
-
-
-
-
- )
-}
+// type Props = {
+// users: []
+// }
const SidebarMembers = () => {
return (
{
src: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80',
address: 'zQ3...9d4Gs0',
indicator: 'online',
+ status: 'untrustworthy',
},
{
name: 'Pedro',
+ nickname: 'pedro',
src: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80',
address: 'zQ3...9d4Gs0',
indicator: 'online',
@@ -63,12 +51,14 @@ const SidebarMembers = () => {
src: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80',
address: 'zQ3...9d4Gs0',
indicator: 'online',
+ status: 'contact',
},
{
name: 'Pedro',
src: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80',
address: 'zQ3...9d4Gs0',
indicator: 'online',
+ status: 'verified',
},
{
name: 'Pedro',
@@ -92,6 +82,7 @@ const SidebarMembers = () => {
src: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80',
address: 'zQ3...9d4Gs0',
indicator: 'offline',
+ status: 'verified',
},
{
name: 'Pedro',
@@ -110,6 +101,7 @@ const SidebarMembers = () => {
src: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80',
address: 'zQ3...9d4Gs0',
indicator: 'offline',
+ status: 'verified',
},
{
name: 'Pedro',
@@ -122,6 +114,7 @@ const SidebarMembers = () => {
src: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80',
address: 'zQ3...9d4Gs0',
indicator: 'offline',
+ status: 'contact',
},
]}
/>
@@ -130,3 +123,21 @@ const SidebarMembers = () => {
}
export { SidebarMembers }
+
+type GroupProps = {
+ label: string
+ users: UserListProps['users']
+}
+
+const Group = (props: GroupProps) => {
+ const { label, users } = props
+
+ return (
+
+
+
+
+
+
+ )
+}
diff --git a/packages/components/src/topbar/index.ts b/packages/components/src/community/topbar/index.tsx
similarity index 100%
rename from packages/components/src/topbar/index.ts
rename to packages/components/src/community/topbar/index.tsx
diff --git a/packages/components/src/topbar/topbar.stories.tsx b/packages/components/src/community/topbar/topbar.stories.tsx
similarity index 68%
rename from packages/components/src/topbar/topbar.stories.tsx
rename to packages/components/src/community/topbar/topbar.stories.tsx
index b70a28ca..e4d82b6b 100644
--- a/packages/components/src/topbar/topbar.stories.tsx
+++ b/packages/components/src/community/topbar/topbar.stories.tsx
@@ -6,13 +6,13 @@ 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: 'Navigation/Topbar',
+ title: 'Community/Topbar',
component: Topbar,
args: {
channel: {
id: '1',
emoji: '👋',
- title: '# channel',
+ title: 'channel',
description: 'This is a channel description',
},
},
@@ -35,16 +35,34 @@ export const Default: Story = {
args: {},
}
-export const isLoading: Story = {
+export const Loading: Story = {
args: {
- ...Default.args,
- isLoading: true,
+ loading: true,
+ },
+}
+
+export const WithPinnedMessages: Story = {
+ args: {
+ pinnedMessages: [
+ {
+ text: 'Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit.',
+ reactions: {},
+ pinned: true,
+ id: '1234-1234',
+ },
+ {
+ text: 'Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam.',
+ reactions: {},
+ pinned: true,
+ id: '4321-4321',
+ },
+ ],
+ showMembers: true,
},
}
export const WithMembersSelected: Story = {
args: {
- ...Default.args,
showMembers: true,
},
}
diff --git a/packages/components/src/community/topbar/topbar.tsx b/packages/components/src/community/topbar/topbar.tsx
new file mode 100644
index 00000000..57843a1a
--- /dev/null
+++ b/packages/components/src/community/topbar/topbar.tsx
@@ -0,0 +1,161 @@
+import {
+ ArrowLeftIcon,
+ CommunitiesIcon,
+ DeleteIcon,
+ DownloadIcon,
+ LockedIcon,
+ MembersIcon,
+ MutedIcon,
+ OptionsIcon,
+ ShareIcon,
+ UpToDateIcon,
+} from '@status-im/icons/20'
+import { Stack, Text as RNText } from '@tamagui/core'
+import { BlurView } from 'expo-blur'
+
+import { DropdownMenu } from '../../dropdown-menu'
+import { IconButton } from '../../icon-button'
+import { PinnedMessage } from '../../pinned-message'
+import { TopbarSkeleton } from '../../skeleton/topbar-skeleton'
+import { Text } from '../../text'
+
+import type { MessageProps } from '../../messages'
+import type { ChannelType } from '../mock-data'
+
+type Props = {
+ showMembers: boolean
+ onMembersPress: () => void
+ goBack?: () => void
+ channel: ChannelType
+ blur?: boolean
+ pinnedMessages?: MessageProps[]
+ loading?: boolean
+}
+
+const Topbar = (props: Props) => {
+ const {
+ showMembers,
+ onMembersPress,
+ goBack,
+ blur,
+ channel,
+ pinnedMessages,
+ loading,
+ } = props
+
+ if (loading) {
+ return
+ }
+
+ const { title, description, emoji } = channel
+
+ return (
+
+
+
+
+ }
+ onPress={() => goBack?.()}
+ blur={blur}
+ />
+
+
+ {emoji}
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+ {description}
+
+
+
+
+
+ }
+ selected={showMembers}
+ onPress={onMembersPress}
+ blur={blur}
+ />
+
+
+
+ } />
+
+
+ }
+ label="View channel details"
+ onSelect={() => console.log('click')}
+ />
+ }
+ label="Mute channel"
+ onSelect={() => console.log('click')}
+ />
+ }
+ label="Mark as read"
+ onSelect={() => console.log('click')}
+ />
+ }
+ label="Fetch messages"
+ onSelect={() => console.log('click')}
+ />
+ }
+ label="Share link to the channel"
+ onSelect={() => console.log('click')}
+ />
+
+
+
+ }
+ label="Clear history"
+ onSelect={() => console.log('click')}
+ danger
+ />
+
+
+
+
+
+ {pinnedMessages && pinnedMessages.length > 0 && (
+
+ )}
+
+ )
+}
+
+export { Topbar }
diff --git a/packages/components/src/counter/counter.stories.tsx b/packages/components/src/counter/counter.stories.tsx
index 1f56fc7d..081cf07a 100644
--- a/packages/components/src/counter/counter.stories.tsx
+++ b/packages/components/src/counter/counter.stories.tsx
@@ -5,6 +5,7 @@ import { Counter } from './counter'
import type { Meta, StoryObj } from '@storybook/react'
const meta: Meta = {
+ title: 'Components/Counter',
component: Counter,
argTypes: {
value: {
diff --git a/packages/components/src/dividers/divider-label/divider-label.tsx b/packages/components/src/dividers/divider-label/divider-label.tsx
index d35b440c..41f20d71 100644
--- a/packages/components/src/dividers/divider-label/divider-label.tsx
+++ b/packages/components/src/dividers/divider-label/divider-label.tsx
@@ -1,25 +1,58 @@
+import { ChevronRightIcon } from '@status-im/icons/20'
import { Stack } from '@tamagui/core'
+import { Counter } from '../../counter'
import { Text } from '../../text'
import { DividerLine } from '../divider-line'
+import type { CounterProps } from '../../counter'
+
type Props = {
label: string
tight?: boolean
- count?: number
-}
+ count?: CounterProps['value']
+ counterType?: CounterProps['type']
+} & (
+ | {
+ type?: 'default'
+ }
+ | {
+ type?: 'expandable'
+ expanded: boolean
+ // ?chevronPosition?: 'left' | 'right'
+ }
+)
-// TODO: Add counter after PR #355 lands
const DividerLabel = (props: Props) => {
- const { label, tight = true } = props
+ const { label, tight = true, counterType = 'secondary', count } = props
return (
-
-
- {label}
-
+
+
+ {props.type === 'expandable' && (
+
+
+
+ )}
+
+ {label}
+
+
+ {count && count > 0 && }
)
diff --git a/packages/components/src/dropdown-menu/dropdown-menu.tsx b/packages/components/src/dropdown-menu/dropdown-menu.tsx
index d07032ec..8621706e 100644
--- a/packages/components/src/dropdown-menu/dropdown-menu.tsx
+++ b/packages/components/src/dropdown-menu/dropdown-menu.tsx
@@ -106,4 +106,4 @@ DropdownMenu.Item = MenuItem
DropdownMenu.Separator = Separator
export { DropdownMenu }
-export type { Props as DropdownMenuProps }
+export type DropdownMenuProps = Omit
diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx
index 9811cf29..e7552ed6 100644
--- a/packages/components/src/index.tsx
+++ b/packages/components/src/index.tsx
@@ -1,5 +1,7 @@
export * from './anchor-actions'
+export * from './avatar'
export * from './button'
+export * from './community'
export * from './composer'
export * from './dividers'
export * from './dynamic-button'
@@ -11,16 +13,10 @@ export * from './input'
export * from './messages'
export * from './pinned-message'
export * from './provider'
-export * from './sidebar'
-export * from './sidebar-members'
export * from './skeleton'
export * from './text'
export * from './toast'
-export * from './topbar'
export * from './user-list'
-// MOCK DATA
-export { CHANNEL_GROUPS } from './sidebar/mock-data'
-
// eslint-disable-next-line simple-import-sort/exports
export { config } from './tamagui.config'
diff --git a/packages/components/src/messages/index.tsx b/packages/components/src/messages/index.tsx
index 9cca4801..c338709b 100644
--- a/packages/components/src/messages/index.tsx
+++ b/packages/components/src/messages/index.tsx
@@ -1,6 +1,7 @@
import { Stack } from '@tamagui/core'
import { DividerDate, DividerNewMessages } from '../dividers'
+import { MessageSkeleton } from '../skeleton'
import { PinAnnouncement } from '../system-messages'
import { Message } from './message'
@@ -14,7 +15,29 @@ const reactions: ReactionsType = {
'thumbs-down': new Set(['me', '1', '2', '3']),
}
-export const Messages = () => {
+type Props = {
+ loading?: boolean
+}
+
+export const Messages = (props: Props) => {
+ const { loading } = props
+
+ if (loading) {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+
return (
<>
= {
- title: 'Sidebar/Community',
- component: Sidebar,
- args: {
- channels: CHANNEL_GROUPS,
- community: COMMUNITY,
- },
- argTypes: {},
- parameters: {
- design: {
- type: 'figma',
- url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Web?node-id=14692%3A148489&t=NfQkS7CPSrZknAGF-4',
- },
- },
-}
-
-export const Default = {
- render: (args: SidebarProps) => (
-
-
-
- ),
-}
-
-export const LoadingSidebar = {
- render: (args: SidebarProps) => (
-
-
-
- ),
-}
-
-export default meta
diff --git a/packages/components/src/tamagui.config.ts b/packages/components/src/tamagui.config.ts
index d13c01a0..54a25ee5 100644
--- a/packages/components/src/tamagui.config.ts
+++ b/packages/components/src/tamagui.config.ts
@@ -33,7 +33,8 @@ export const config = createTamagui({
},
}),
mono: createFont({
- family: 'UbuntuMono',
+ family:
+ 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;',
weight: {},
letterSpacing: {},
size: {},
diff --git a/packages/components/src/topbar/topbar.tsx b/packages/components/src/topbar/topbar.tsx
deleted file mode 100644
index d9fc77ac..00000000
--- a/packages/components/src/topbar/topbar.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import {
- ArrowLeftIcon,
- CommunitiesIcon,
- DeleteIcon,
- DownloadIcon,
- LockedIcon,
- MembersIcon,
- MutedIcon,
- OptionsIcon,
- ShareIcon,
- UpToDateIcon,
-} from '@status-im/icons/20'
-import { Stack, Text as RNText } from '@tamagui/core'
-import { BlurView } from 'expo-blur'
-
-import { DropdownMenu } from '../dropdown-menu'
-import { IconButton } from '../icon-button'
-import { PinnedMessage } from '../pinned-message'
-import { TopbarSkeleton } from '../skeleton/topbar-skeleton'
-import { Text } from '../text'
-
-import type { Channel } from '../sidebar/mock-data'
-
-const mockMessages = [
- {
- text: 'Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit.',
- reactions: {},
- pinned: true,
- id: '1234-1234',
- },
- {
- text: 'Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam.',
- reactions: {},
- pinned: true,
- id: '4321-4321',
- },
-]
-
-type Props = {
- showMembers: boolean
- onMembersPress: () => void
- goBack?: () => void
- channel: Channel
- blur?: boolean
- isLoading?: boolean
-}
-
-const Topbar = (props: Props) => {
- const { showMembers, onMembersPress, goBack, blur, channel, isLoading } =
- props
-
- const { title, description, emoji } = channel
-
- if (isLoading) {
- return
- }
-
- return (
-
-
-
-
-
- }
- onPress={() => goBack?.()}
- blur={blur}
- />
-
-
- {emoji && (
-
- {emoji}
-
- )}
-
- {title && (
-
- {title}
-
- )}
-
-
-
-
-
-
- {description && (
-
-
- {description}
-
-
- )}
-
- }
- selected={showMembers}
- onPress={onMembersPress}
- blur={blur}
- />
-
-
-
- } />
-
-
- }
- label="View channel details"
- onSelect={() => console.log('click')}
- />
- }
- label="Mute channel"
- onSelect={() => console.log('click')}
- />
- }
- label="Mark as read"
- onSelect={() => console.log('click')}
- />
- }
- label="Fetch messages"
- onSelect={() => console.log('click')}
- />
- }
- label="Share link to the channel"
- onSelect={() => console.log('click')}
- />
-
-
-
- }
- label="Clear history"
- onSelect={() => console.log('click')}
- danger
- />
-
-
-
-
-
-
-
- )
-}
-
-export { Topbar }
diff --git a/packages/components/src/user-list/user-list.tsx b/packages/components/src/user-list/user-list.tsx
index 4977d972..f41a7bd3 100644
--- a/packages/components/src/user-list/user-list.tsx
+++ b/packages/components/src/user-list/user-list.tsx
@@ -17,11 +17,13 @@ const UserList = (props: Props) => {
return (
{users.map((user, index) => {
+ const { src, indicator, ...authorProps } = user
+
return (
{
backgroundColor: '$primary-50-opa-5',
}}
>
-
+
-
-
+
+
{user.address}
diff --git a/packages/icons/20/notification-icon.tsx b/packages/icons/20/notification-icon.tsx
index 0d05672d..8b87f4ff 100644
--- a/packages/icons/20/notification-icon.tsx
+++ b/packages/icons/20/notification-icon.tsx
@@ -18,7 +18,7 @@ const SvgNotificationIcon = (props: IconProps) => {
xmlns="http://www.w3.org/2000/svg"
{...props}
>
-
+
)
}
diff --git a/yarn.lock b/yarn.lock
index 31956389..843dd926 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3321,6 +3321,22 @@
dependencies:
"@babel/runtime" "^7.13.10"
+"@radix-ui/react-accordion@^1.1.1":
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/@radix-ui/react-accordion/-/react-accordion-1.1.1.tgz#fa1ab1b5c6a29aa75aefaf306a9e72fe3a482dbc"
+ integrity sha512-TQtyyRubYe8DD6DYCovNLTjd2D+TFrNCpr99T5M3cYUbR7BsRxWsxfInjbQ1nHsdy2uPTcnJS5npyXPVfP0piw==
+ dependencies:
+ "@babel/runtime" "^7.13.10"
+ "@radix-ui/primitive" "1.0.0"
+ "@radix-ui/react-collapsible" "1.0.2"
+ "@radix-ui/react-collection" "1.0.2"
+ "@radix-ui/react-compose-refs" "1.0.0"
+ "@radix-ui/react-context" "1.0.0"
+ "@radix-ui/react-direction" "1.0.0"
+ "@radix-ui/react-id" "1.0.0"
+ "@radix-ui/react-primitive" "1.0.2"
+ "@radix-ui/react-use-controllable-state" "1.0.0"
+
"@radix-ui/react-arrow@1.0.2":
version "1.0.2"
resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.2.tgz#93b0ff95f65e2264a05b14ef1031ec798243dd6f"
@@ -3329,6 +3345,21 @@
"@babel/runtime" "^7.13.10"
"@radix-ui/react-primitive" "1.0.2"
+"@radix-ui/react-collapsible@1.0.2":
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/@radix-ui/react-collapsible/-/react-collapsible-1.0.2.tgz#0583470c7caa8cd1ab6f606416288d19b3baf777"
+ integrity sha512-QNiDT6Au8jUU0K1WV+HEd4loH7C5CKQjeXxskwqyiyAkyCmW7qlQM5vSSJCIoQC+OVPyhgafSmGudRP8Qm1/gA==
+ dependencies:
+ "@babel/runtime" "^7.13.10"
+ "@radix-ui/primitive" "1.0.0"
+ "@radix-ui/react-compose-refs" "1.0.0"
+ "@radix-ui/react-context" "1.0.0"
+ "@radix-ui/react-id" "1.0.0"
+ "@radix-ui/react-presence" "1.0.0"
+ "@radix-ui/react-primitive" "1.0.2"
+ "@radix-ui/react-use-controllable-state" "1.0.0"
+ "@radix-ui/react-use-layout-effect" "1.0.0"
+
"@radix-ui/react-collection@1.0.2":
version "1.0.2"
resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.2.tgz#d50da00bfa2ac14585319efdbbb081d4c5a29a97"
@@ -6383,7 +6414,7 @@
resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
-"@types/react-dom@18.0.11", "@types/react-dom@^18.0.11":
+"@types/react-dom@^18.0.11":
version "18.0.11"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.11.tgz#321351c1459bc9ca3d216aefc8a167beec334e33"
integrity sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==
@@ -6397,7 +6428,7 @@
dependencies:
"@types/react" "*"
-"@types/react@*", "@types/react@18.0.28", "@types/react@>=16", "@types/react@^18.0.28":
+"@types/react@*", "@types/react@>=16", "@types/react@^18.0.28":
version "18.0.28"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.28.tgz#accaeb8b86f4908057ad629a26635fe641480065"
integrity sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==
@@ -9504,10 +9535,10 @@ expo-asset@~8.7.0:
path-browserify "^1.0.0"
url-parse "^1.5.9"
-expo-blur@~12.0.1:
- version "12.0.1"
- resolved "https://registry.yarnpkg.com/expo-blur/-/expo-blur-12.0.1.tgz#7aa4186620359acfa976dda84360070b634ffe3d"
- integrity sha512-7oF/xRIFJukM4/qL6ejZ4Z/4YcVExvBPsBrz7rGYz6PtgAkWwYFR62+ExZOzTEG4hgoPPmlnt1ncimsk/MYUgQ==
+expo-blur@^12.2.2:
+ version "12.2.2"
+ resolved "https://registry.yarnpkg.com/expo-blur/-/expo-blur-12.2.2.tgz#b7f94499255afbd3468302d02f3c4e39a0e562d5"
+ integrity sha512-SvGbEZbB0VFNGqCW7FcqzWOEb3lrRgBnQKGrsKo49KwhMyHTYjYVYWnmrk9l8Tr7lIaNnd55QD6dPAzcXjZYMg==
expo-constants@^14.0.2, expo-constants@~14.0.0, expo-constants@~14.0.2:
version "14.0.2"