EAS integration & Improvements & fixes (#334)
* fix: issues with build after debugging expo app * feat: updates icons app and increases build version * fix: react-native-svg resolution * feat: multiple fixes and top bar implementation * fix: sidebar members animation Co-authored-by: marcelines <marcio@significa.co>
This commit is contained in:
marcelines
GitHub
parent
16b2c13a47
commit
9e613244e0
|
|
@ -4,11 +4,14 @@ import 'expo-dev-client'
|
|||
|
||||
import { useMemo, useState } from 'react'
|
||||
|
||||
import { useNavigation, useRoute } from '@react-navigation/native'
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack'
|
||||
import { Heading } from '@status-im/components'
|
||||
import { Heading, IconButton, Paragraph } from '@status-im/components'
|
||||
import { Avatar } from '@status-im/components/src/avatar'
|
||||
import { ArrowLeftIcon, MembersIcon } from '@status-im/icons/20'
|
||||
import { Stack as View, TamaguiProvider } from '@tamagui/core'
|
||||
import { useFonts } from 'expo-font'
|
||||
import { Platform } from 'react-native'
|
||||
import { SafeAreaProvider } from 'react-native-safe-area-context'
|
||||
import { AnimatePresence } from 'tamagui'
|
||||
|
||||
|
|
@ -17,7 +20,34 @@ import { ChannelScreen } from './screens/channel'
|
|||
import { HomeScreen } from './screens/home'
|
||||
import tamaguiConfig from './tamagui.config'
|
||||
|
||||
const Stack = createNativeStackNavigator()
|
||||
import type { RouteProp } from '@react-navigation/native'
|
||||
import type { HeaderBackButtonProps } from '@react-navigation/native-stack/lib/typescript/src/types'
|
||||
|
||||
export type RootStackParamList = {
|
||||
Home: undefined
|
||||
Channel: { channelId: string }
|
||||
}
|
||||
|
||||
const Stack = createNativeStackNavigator<RootStackParamList>()
|
||||
|
||||
const CustomHeaderLeft = (props: HeaderBackButtonProps) => {
|
||||
const navigation = useNavigation()
|
||||
const route = useRoute<RouteProp<RootStackParamList, 'Channel'>>()
|
||||
|
||||
return (
|
||||
<>
|
||||
<IconButton
|
||||
icon={<ArrowLeftIcon />}
|
||||
onPress={() => {
|
||||
props.canGoBack && navigation.goBack()
|
||||
}}
|
||||
/>
|
||||
<Paragraph weight="semibold" marginLeft={12}>
|
||||
# {route.params.channelId || 'channel'}
|
||||
</Paragraph>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const [position, setPosition] = useState(0)
|
||||
|
|
@ -49,13 +79,16 @@ export default function App() {
|
|||
<TamaguiProvider config={tamaguiConfig} defaultTheme="light">
|
||||
<NavigationProvider>
|
||||
<SafeAreaProvider>
|
||||
<Stack.Navigator>
|
||||
<Stack.Navigator
|
||||
screenOptions={{
|
||||
animation: 'slide_from_right',
|
||||
}}
|
||||
>
|
||||
<Stack.Screen
|
||||
name="Home"
|
||||
options={{
|
||||
headerBlurEffect: 'systemUltraThinMaterialLight',
|
||||
headerTransparent: true,
|
||||
headerShadowVisible: true,
|
||||
headerShadowVisible: false,
|
||||
header: () => (
|
||||
<View
|
||||
height={100}
|
||||
|
|
@ -113,7 +146,31 @@ export default function App() {
|
|||
<Stack.Screen
|
||||
name="Channel"
|
||||
component={ChannelScreen}
|
||||
options={{ title: 'Messages' }}
|
||||
options={{
|
||||
headerBlurEffect: 'systemUltraThinMaterialLight',
|
||||
headerStyle: {
|
||||
backgroundColor: Platform.select({
|
||||
ios: 'transparent',
|
||||
default: 'white',
|
||||
}),
|
||||
},
|
||||
headerTransparent: true,
|
||||
headerShadowVisible: false,
|
||||
headerTitle: '',
|
||||
headerLeft(props) {
|
||||
return <CustomHeaderLeft {...props} />
|
||||
},
|
||||
headerRight() {
|
||||
return (
|
||||
<IconButton
|
||||
icon={<MembersIcon />}
|
||||
onPress={() => {
|
||||
// noop
|
||||
}}
|
||||
/>
|
||||
)
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
</SafeAreaProvider>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
{
|
||||
"expo": {
|
||||
"name": "mobile",
|
||||
"slug": "mobile",
|
||||
"version": "1.0.0",
|
||||
"slug": "status-poc",
|
||||
"version": "1.0.2",
|
||||
"orientation": "portrait",
|
||||
"icon": "./assets/icon.png",
|
||||
"userInterfaceStyle": "light",
|
||||
|
|
@ -16,16 +16,24 @@
|
|||
},
|
||||
"assetBundlePatterns": ["**/*"],
|
||||
"ios": {
|
||||
"supportsTablet": true
|
||||
"supportsTablet": true,
|
||||
"bundleIdentifier": "com.marcelines.statuspoc"
|
||||
},
|
||||
"android": {
|
||||
"adaptiveIcon": {
|
||||
"foregroundImage": "./assets/adaptive-icon.png",
|
||||
"backgroundColor": "#FFFFFF"
|
||||
}
|
||||
},
|
||||
"package": "com.marcelines.statuspoc"
|
||||
},
|
||||
"web": {
|
||||
"favicon": "./assets/favicon.png"
|
||||
},
|
||||
"extra": {
|
||||
"eas": {
|
||||
"projectId": "e214cc8a-4e7e-4850-8a41-e280ca3a4469"
|
||||
}
|
||||
},
|
||||
"owner": "marcelines"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 24 KiB |
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"cli": {
|
||||
"version": ">= 3.3.2"
|
||||
},
|
||||
"build": {
|
||||
"development": {
|
||||
"developmentClient": true,
|
||||
"distribution": "internal"
|
||||
},
|
||||
"preview": {
|
||||
"distribution": "internal"
|
||||
},
|
||||
"production": {},
|
||||
"simulator": {
|
||||
"ios": {
|
||||
"simulator": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"submit": {
|
||||
"production": {}
|
||||
}
|
||||
}
|
||||
|
|
@ -6,18 +6,19 @@
|
|||
"scripts": {
|
||||
"dev": "expo start -c",
|
||||
"ios": "TAMAGUI_TARGET=native yarn expo run:ios",
|
||||
"android": "TAMAGUI_TARGET=native yarn expo run:android"
|
||||
"android": "TAMAGUI_TARGET=native yarn expo run:android",
|
||||
"start": "expo start --dev-client"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.18.9",
|
||||
"@react-navigation/native": "^6.1.2",
|
||||
"@react-navigation/native-stack": "^6.9.8",
|
||||
"@status-im/components": "*",
|
||||
"expo": "^47.0.12",
|
||||
"expo": "~47.0.12",
|
||||
"expo-constants": "^14.0.2",
|
||||
"expo-dev-client": "^2.0.1",
|
||||
"expo-linear-gradient": "^12.0.1",
|
||||
"expo-splash-screen": "^0.17.5",
|
||||
"expo-splash-screen": "~0.17.5",
|
||||
"expo-status-bar": "^1.4.2",
|
||||
"expo-updates": "^0.15.6",
|
||||
"react": "18.1.0",
|
||||
|
|
@ -25,6 +26,7 @@
|
|||
"react-native": "0.70.5",
|
||||
"react-native-safe-area-context": "4.4.1",
|
||||
"react-native-screens": "~3.18.0",
|
||||
"react-native-svg": "^13.7.0",
|
||||
"react-native-web": "~0.18.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
// eslint-disable-next-line eslint-comments/disable-enable-pair
|
||||
/* eslint-disable import/namespace */
|
||||
|
||||
import { useRef } from 'react'
|
||||
|
||||
import { Composer, Messages } from '@status-im/components'
|
||||
import { Stack, useTheme } from '@tamagui/core'
|
||||
import { StatusBar } from 'expo-status-bar'
|
||||
import {
|
||||
Keyboard,
|
||||
KeyboardAvoidingView,
|
||||
|
|
@ -11,22 +15,41 @@ import {
|
|||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { ScrollView } from 'tamagui'
|
||||
|
||||
export const ChannelScreen = () => {
|
||||
import type { RootStackParamList } from '../App'
|
||||
import type { NativeStackScreenProps } from '@react-navigation/native-stack'
|
||||
|
||||
type ChannelScreenProps = NativeStackScreenProps<RootStackParamList, 'Channel'>
|
||||
|
||||
export const ChannelScreen = ({ route }: ChannelScreenProps) => {
|
||||
const insets = useSafeAreaInsets()
|
||||
const theme = useTheme()
|
||||
|
||||
// We need to get the channel name from the route params
|
||||
const channelName = route.params.channelId
|
||||
const scrollRef = useRef(null)
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
keyboardVerticalOffset={Platform.select({ ios: 60 })}
|
||||
style={{ height: '100%', flex: 1, backgroundColor: theme.background.val }}
|
||||
>
|
||||
<ScrollView paddingHorizontal={12} width="100%">
|
||||
<Messages py={20} />
|
||||
<StatusBar style={'dark'} animated />
|
||||
<ScrollView
|
||||
ref={scrollRef}
|
||||
paddingHorizontal={12}
|
||||
width="100%"
|
||||
onContentSizeChange={() => scrollRef.current?.scrollToEnd()}
|
||||
>
|
||||
<Stack pt={insets.top + 60} pb={insets.bottom}>
|
||||
<Messages />
|
||||
</Stack>
|
||||
</ScrollView>
|
||||
|
||||
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
||||
<Stack pb={insets.bottom}>
|
||||
<Composer />
|
||||
<Stack>
|
||||
<Composer
|
||||
pb={insets.bottom + Platform.select({ android: 12, ios: 0 })}
|
||||
/>
|
||||
</Stack>
|
||||
</TouchableWithoutFeedback>
|
||||
</KeyboardAvoidingView>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,27 @@
|
|||
// eslint-disable-next-line eslint-comments/disable-enable-pair
|
||||
/* eslint-disable import/namespace */
|
||||
import { useState } from 'react'
|
||||
|
||||
import { Sidebar } from '@status-im/components'
|
||||
import { Stack } from '@tamagui/core'
|
||||
import { StatusBar } from 'expo-status-bar'
|
||||
import { ScrollView } from 'tamagui'
|
||||
|
||||
export const HomeScreen = ({ navigation, onScroll, isMinimized }) => {
|
||||
const [selectedChannel, setSelectedChannel] = useState<string>('welcome')
|
||||
import type { RootStackParamList } from '../App'
|
||||
import type { NativeStackScreenProps } from '@react-navigation/native-stack'
|
||||
import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native'
|
||||
|
||||
type HomeScreenProps = NativeStackScreenProps<RootStackParamList, 'Home'> & {
|
||||
onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
|
||||
isMinimized?: boolean
|
||||
}
|
||||
|
||||
export const HomeScreen = ({
|
||||
navigation,
|
||||
onScroll,
|
||||
isMinimized,
|
||||
}: HomeScreenProps) => {
|
||||
const onChannelPress = (id: string) => {
|
||||
setSelectedChannel(id)
|
||||
navigation.navigate('Channel')
|
||||
navigation.navigate('Channel', { channelId: id })
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -25,7 +34,6 @@ export const HomeScreen = ({ navigation, onScroll, isMinimized }) => {
|
|||
description="Multichain community-centric NFT marketplace. Create, buy and sell your NFTs."
|
||||
membersCount={123}
|
||||
onChannelPress={onChannelPress}
|
||||
selectedChannel={selectedChannel}
|
||||
/>
|
||||
</Stack>
|
||||
</ScrollView>
|
||||
|
|
|
|||
|
|
@ -1,41 +1,35 @@
|
|||
import { useState } from 'react'
|
||||
|
||||
import {
|
||||
Button,
|
||||
Code,
|
||||
Composer,
|
||||
Heading,
|
||||
Label,
|
||||
Messages,
|
||||
Paragraph,
|
||||
Shape,
|
||||
Sidebar,
|
||||
SidebarMembers,
|
||||
Topbar,
|
||||
} from '@status-im/components'
|
||||
import { Stack, styled, TamaguiProvider } from '@tamagui/core'
|
||||
import { AnimatePresence } from 'tamagui'
|
||||
|
||||
// import { AnimatePresence } from 'tamagui'
|
||||
import tamaguiConfig from '../tamagui.config'
|
||||
import { Topbar } from './components/topbar'
|
||||
|
||||
type ThemeVars = 'light' | 'dark'
|
||||
|
||||
// const AnimatableDrawer = styled(Stack, {
|
||||
// variants: {
|
||||
// fromRight: {
|
||||
// true: {
|
||||
// x: 500,
|
||||
// width: 0,
|
||||
// },
|
||||
// },
|
||||
// fromLeft: {
|
||||
// true: {
|
||||
// x: 500,
|
||||
// width: 250,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// })
|
||||
const AnimatableDrawer = styled(Stack, {
|
||||
variants: {
|
||||
fromRight: {
|
||||
true: {
|
||||
x: 500,
|
||||
width: 0,
|
||||
},
|
||||
},
|
||||
fromLeft: {
|
||||
true: {
|
||||
x: 500,
|
||||
width: 250,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
function App() {
|
||||
const [theme, setTheme] = useState<ThemeVars>('light')
|
||||
|
|
@ -61,6 +55,8 @@ function App() {
|
|||
</div>
|
||||
<main id="main">
|
||||
<Topbar
|
||||
title={`#${selectedChannel}`}
|
||||
description="Share random funny stuff with the community. Play nice."
|
||||
membersVisisble={showMembers}
|
||||
onMembersPress={() => setShowMembers(show => !show)}
|
||||
/>
|
||||
|
|
@ -69,12 +65,27 @@ function App() {
|
|||
</div>
|
||||
<Composer />
|
||||
</main>
|
||||
|
||||
<AnimatePresence enterVariant="fromRight" exitVariant="fromLeft">
|
||||
{showMembers && (
|
||||
<div id="members">
|
||||
<AnimatableDrawer
|
||||
id="members"
|
||||
key="members"
|
||||
animation={[
|
||||
'fast',
|
||||
{
|
||||
opacity: {
|
||||
overshootClamping: true,
|
||||
},
|
||||
},
|
||||
]}
|
||||
enterStyle={{ opacity: 0 }}
|
||||
exitStyle={{ opacity: 0 }}
|
||||
opacity={1}
|
||||
>
|
||||
<SidebarMembers />
|
||||
</div>
|
||||
</AnimatableDrawer>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</TamaguiProvider>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,44 +0,0 @@
|
|||
import { Divider, IconButton, Paragraph } from '@status-im/components'
|
||||
import { LockedIcon, MembersIcon, OptionsIcon } from '@status-im/icons/20'
|
||||
import { Stack } from '@tamagui/core'
|
||||
|
||||
type Props = {
|
||||
membersVisisble: boolean
|
||||
onMembersPress: () => void
|
||||
}
|
||||
|
||||
export const Topbar = (props: Props) => {
|
||||
const { membersVisisble, onMembersPress } = props
|
||||
|
||||
return (
|
||||
<Stack
|
||||
flexDirection="row"
|
||||
height={56}
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
padding={16}
|
||||
borderBottomWidth={1}
|
||||
borderColor="$neutral-10"
|
||||
>
|
||||
<Stack flexDirection="row" alignItems="center">
|
||||
<Paragraph weight="semibold" marginRight={4}>
|
||||
# random
|
||||
</Paragraph>
|
||||
<LockedIcon color="rgba(27, 39, 61, 0.4)" size={16} />
|
||||
<Divider height={16} />
|
||||
<Paragraph weight="medium" color="$neutral-80-opa-50" variant="smaller">
|
||||
Share random funny stuff with the community. Play nice.
|
||||
</Paragraph>
|
||||
</Stack>
|
||||
|
||||
<Stack space={12} flexDirection="row">
|
||||
<IconButton
|
||||
icon={<MembersIcon />}
|
||||
selected={membersVisisble}
|
||||
onPress={onMembersPress}
|
||||
/>
|
||||
<IconButton icon={<OptionsIcon />} />
|
||||
</Stack>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
|
@ -22,7 +22,8 @@
|
|||
},
|
||||
"resolutions": {
|
||||
"react": "18.1.0",
|
||||
"react-dom": "18.1.0"
|
||||
"react-dom": "18.1.0",
|
||||
"react-native-svg": "13.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@changesets/cli": "^2.23.0",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from 'react'
|
||||
import React, { useState } from 'react'
|
||||
|
||||
import { ChevronRightIcon } from '@status-im/icons/20'
|
||||
import { Stack } from '@tamagui/core'
|
||||
|
|
@ -12,21 +12,18 @@ type BaseProps = GetProps<typeof Stack>
|
|||
|
||||
type Props = {
|
||||
children: React.ReactElement[] | React.ReactElement
|
||||
isExpanded: boolean
|
||||
onToggle?: () => void
|
||||
initialExpanded: boolean
|
||||
title: string
|
||||
numberOfNewMessages?: number
|
||||
showNotifications?: boolean
|
||||
} & BaseProps
|
||||
|
||||
const Accordion = ({
|
||||
children,
|
||||
isExpanded,
|
||||
onToggle,
|
||||
initialExpanded,
|
||||
title,
|
||||
numberOfNewMessages,
|
||||
showNotifications,
|
||||
}: Props) => {
|
||||
const [isExpanded, setIsExpanded] = useState(initialExpanded)
|
||||
return (
|
||||
<Stack
|
||||
width="100%"
|
||||
|
|
@ -41,7 +38,7 @@ const Accordion = ({
|
|||
width="100%"
|
||||
flexDirection="row"
|
||||
justifyContent={'space-between'}
|
||||
onPress={onToggle}
|
||||
onPress={() => setIsExpanded(prev => !prev)}
|
||||
cursor="pointer"
|
||||
py={8}
|
||||
>
|
||||
|
|
@ -70,7 +67,7 @@ const Accordion = ({
|
|||
</Paragraph>
|
||||
</Stack>
|
||||
<AnimatePresence>
|
||||
{showNotifications && numberOfNewMessages && (
|
||||
{!isExpanded && numberOfNewMessages && (
|
||||
<Stack
|
||||
key={`notifications-${title}}`}
|
||||
width={20}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import type { GetProps } from '@tamagui/core'
|
|||
const Base = styled(Stack, {
|
||||
name: 'Avatar',
|
||||
|
||||
display: 'inline-flex',
|
||||
display: 'flex',
|
||||
position: 'relative',
|
||||
backgroundColor: '$white-100',
|
||||
justifyContent: 'center',
|
||||
|
|
@ -78,20 +78,20 @@ const Indicator = styled(Stack, {
|
|||
right: 2,
|
||||
zIndex: 2,
|
||||
|
||||
borderWidth: '2px',
|
||||
borderWidth: 2,
|
||||
borderColor: '$white-100',
|
||||
|
||||
variants: {
|
||||
size: {
|
||||
80: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
borderRadius: '50%',
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: 10 / 2,
|
||||
},
|
||||
56: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
borderRadius: 12 / 2,
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: 10 / 2,
|
||||
},
|
||||
// FIXME: use catch all variant
|
||||
52: {
|
||||
|
|
|
|||
|
|
@ -10,8 +10,12 @@ const Base = styled(Stack, {
|
|||
accessibilityRole: 'button',
|
||||
|
||||
borderRadius: 12,
|
||||
display: 'flex',
|
||||
paddingHorizontal: 16,
|
||||
paddingTop: 7,
|
||||
paddingBottom: 9,
|
||||
cursor: 'pointer',
|
||||
display: 'inline-flex',
|
||||
|
||||
alignItems: 'center',
|
||||
animation: 'fast',
|
||||
userSelect: 'none',
|
||||
|
|
@ -65,7 +69,7 @@ const Base = styled(Stack, {
|
|||
const ButtonText = styled(Paragraph, {
|
||||
textAlign: 'center',
|
||||
weight: 'medium',
|
||||
display: 'inline-flex',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
space: 4,
|
||||
|
||||
|
|
|
|||
|
|
@ -22,21 +22,15 @@ const Composer = (props: BaseProps) => {
|
|||
shadowRadius={20}
|
||||
borderTopLeftRadius={20}
|
||||
borderTopRightRadius={20}
|
||||
elevation={0}
|
||||
px={16}
|
||||
pt={8}
|
||||
pb={12}
|
||||
width="100%"
|
||||
style={{
|
||||
elevation: 10,
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<YStack>
|
||||
<Input
|
||||
elevation={10}
|
||||
placeholder="Type something..."
|
||||
borderWidth={0}
|
||||
px={0}
|
||||
/>
|
||||
</YStack>
|
||||
<Input placeholder="Type something..." borderWidth={0} px={0} />
|
||||
<XStack alignItems="center" justifyContent="space-between" pt={8}>
|
||||
<Stack space={12} flexDirection="row">
|
||||
<IconButton icon={<ImageIcon />} transparent />
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ export const Divider = styled(Stack, {
|
|||
flex: 1,
|
||||
height: '100%',
|
||||
// maxHeight: 0,
|
||||
maxWidth: 1,
|
||||
width: 1,
|
||||
marginHorizontal: 12,
|
||||
// y: -0.5,
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export function themed(Component: React.ElementType) {
|
|||
<Stack
|
||||
width={sizeBackground}
|
||||
height={sizeBackground}
|
||||
borderRadius="50%"
|
||||
borderRadius={sizeBackground / 2}
|
||||
backgroundColor="$turquoise-50-opa-10"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { cloneElement } from 'react'
|
|||
|
||||
import { Stack, styled, Text } from '@tamagui/core'
|
||||
|
||||
// import { Pressable } from 'react-native'
|
||||
import type React from 'react'
|
||||
|
||||
const Base = styled(Stack, {
|
||||
|
|
@ -12,6 +11,9 @@ const Base = styled(Stack, {
|
|||
cursor: 'pointer',
|
||||
userSelect: 'none',
|
||||
borderRadius: 10,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
animation: 'fast',
|
||||
|
||||
width: 30,
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ export * from './input'
|
|||
export * from './messages'
|
||||
export * from './sidebar'
|
||||
export * from './sidebar-members'
|
||||
export * from './topbar'
|
||||
export * from './typography'
|
||||
export * from './user-list'
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ const ReactButton = styled(Stack, {
|
|||
cursor: 'pointer',
|
||||
userSelect: 'none',
|
||||
borderRadius: 8,
|
||||
display: 'inline-flex',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
space: 4,
|
||||
alignItems: 'center',
|
||||
|
|
@ -82,7 +82,7 @@ export const Reactions = (props: Props) => {
|
|||
console.log(reactions)
|
||||
|
||||
return (
|
||||
<XStack space={8}>
|
||||
<XStack space={8} flexWrap="wrap">
|
||||
<ReactionButton count={1} icon={<LoveIcon />} selected />
|
||||
<ReactionButton count={10} icon={<ThumbsUpIcon />} />
|
||||
<ReactionButton count={99} icon={<ThumbsDownIcon />} />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
import { useState } from 'react'
|
||||
|
||||
import { GroupIcon } from '@status-im/icons/16'
|
||||
import { Stack } from '@tamagui/core'
|
||||
|
||||
|
|
@ -35,26 +33,6 @@ const Sidebar = (props: Props) => {
|
|||
onChannelPress,
|
||||
} = props
|
||||
|
||||
const communitiesExpandControl = communities.reduce(
|
||||
(o, key) => ({ ...o, [key.id]: false }),
|
||||
|
||||
{} as Record<string, boolean>[]
|
||||
)
|
||||
|
||||
const [isExpanded, setIsExpanded] = useState({
|
||||
...communitiesExpandControl,
|
||||
welcome: true,
|
||||
community: true,
|
||||
design: true,
|
||||
})
|
||||
|
||||
const handleToggle = (id: string) => {
|
||||
setIsExpanded(prev => ({
|
||||
...prev,
|
||||
[id]: !prev[id as keyof typeof isExpanded],
|
||||
}))
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack
|
||||
backgroundColor="$background"
|
||||
|
|
@ -96,13 +74,10 @@ const Sidebar = (props: Props) => {
|
|||
{communities.map(community => (
|
||||
<Accordion
|
||||
key={community.id}
|
||||
isExpanded={!!isExpanded[community.id as keyof typeof isExpanded]}
|
||||
onToggle={() => handleToggle(community.id)}
|
||||
// This is just for the demo
|
||||
initialExpanded={community.id === 'welcome'}
|
||||
title={community.title}
|
||||
numberOfNewMessages={community.numberOfNewMessages}
|
||||
showNotifications={
|
||||
!isExpanded[community.id as keyof typeof isExpanded]
|
||||
}
|
||||
>
|
||||
{community.channels.map((channel, index) => {
|
||||
const isLastChannelOfTheList =
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export { Topbar } from './topbar'
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
import { Divider, IconButton, Paragraph } from '@status-im/components'
|
||||
import {
|
||||
ArrowLeftIcon,
|
||||
LockedIcon,
|
||||
MembersIcon,
|
||||
OptionsIcon,
|
||||
} from '@status-im/icons/20'
|
||||
import { Stack } from '@tamagui/core'
|
||||
|
||||
type Props = {
|
||||
membersVisisble: boolean
|
||||
onMembersPress: () => void
|
||||
goBack?: () => void
|
||||
title?: string
|
||||
description?: string
|
||||
}
|
||||
|
||||
const Topbar = (props: Props) => {
|
||||
const { membersVisisble, onMembersPress, goBack, title, description } = props
|
||||
|
||||
return (
|
||||
<Stack
|
||||
flexDirection="row"
|
||||
height={56}
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
padding={16}
|
||||
borderBottomWidth={1}
|
||||
borderColor="$neutral-10"
|
||||
width="100%"
|
||||
>
|
||||
<Stack flexDirection="row" alignItems="center" flexWrap="wrap">
|
||||
<Stack mr={12} $gtSm={{ display: 'none' }}>
|
||||
<IconButton icon={<ArrowLeftIcon />} onPress={() => goBack?.()} />
|
||||
</Stack>
|
||||
|
||||
{title && (
|
||||
<Paragraph weight="semibold" marginRight={4}>
|
||||
{title}
|
||||
</Paragraph>
|
||||
)}
|
||||
|
||||
<LockedIcon color="$neutral-80-opa-40" />
|
||||
<Divider height={16} $sm={{ display: 'none' }} />
|
||||
{description && (
|
||||
<Paragraph
|
||||
weight="medium"
|
||||
color="$neutral-80-opa-50"
|
||||
variant="smaller"
|
||||
$sm={{ display: 'none' }}
|
||||
>
|
||||
{description}
|
||||
</Paragraph>
|
||||
)}
|
||||
</Stack>
|
||||
|
||||
<Stack space={12} flexDirection="row">
|
||||
<Stack $sm={{ display: 'none' }}>
|
||||
<IconButton
|
||||
icon={<MembersIcon />}
|
||||
selected={membersVisisble}
|
||||
onPress={onMembersPress}
|
||||
/>
|
||||
</Stack>
|
||||
<IconButton icon={<OptionsIcon />} />
|
||||
</Stack>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
export { Topbar }
|
||||
|
|
@ -11,12 +11,12 @@ export const Heading = styled(SizableText, {
|
|||
h1: {
|
||||
fontSize: 27,
|
||||
lineHeight: 32,
|
||||
letterSpacing: '-0.021em',
|
||||
letterSpacing: -0.021,
|
||||
},
|
||||
h2: {
|
||||
fontSize: 19,
|
||||
lineHeight: 26,
|
||||
letterSpacing: '-0.016em',
|
||||
letterSpacing: -0.016,
|
||||
},
|
||||
},
|
||||
uppercase: {
|
||||
|
|
@ -53,17 +53,17 @@ export const Paragraph = styled(SizableText, {
|
|||
normal: {
|
||||
fontSize: 15,
|
||||
lineHeight: 22,
|
||||
letterSpacing: '-0.009em',
|
||||
letterSpacing: -0.009,
|
||||
},
|
||||
smaller: {
|
||||
fontSize: 13,
|
||||
lineHeight: 18,
|
||||
letterSpacing: '-0.003em',
|
||||
letterSpacing: -0.003,
|
||||
},
|
||||
11: {
|
||||
fontSize: 11,
|
||||
lineHeight: 18,
|
||||
letterSpacing: '-0.003em',
|
||||
letterSpacing: -0.003,
|
||||
},
|
||||
},
|
||||
uppercase: {
|
||||
|
|
@ -98,7 +98,7 @@ export const Label = styled(SizableText, {
|
|||
|
||||
fontSize: 11,
|
||||
lineHeight: 16,
|
||||
letterSpacing: '-0.005em',
|
||||
letterSpacing: -0.005,
|
||||
|
||||
variants: {
|
||||
uppercase: {
|
||||
|
|
@ -132,18 +132,18 @@ export const Code = styled(SizableText, {
|
|||
|
||||
fontSize: 11,
|
||||
lineHeight: 16,
|
||||
letterSpacing: '-0.005em',
|
||||
letterSpacing: -0.005,
|
||||
|
||||
variants: {
|
||||
normal: {
|
||||
fontSize: 15,
|
||||
lineHeight: 22,
|
||||
letterSpacing: '-0.009em',
|
||||
letterSpacing: -0.009,
|
||||
},
|
||||
smaller: {
|
||||
fontSize: 13,
|
||||
lineHeight: 18,
|
||||
letterSpacing: '-0.003em',
|
||||
letterSpacing: -0.003,
|
||||
},
|
||||
uppercase: {
|
||||
true: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
import { memo } from 'react'
|
||||
|
||||
import { themed } from '@status-im/icons/src/themed'
|
||||
import { Path, Svg } from 'react-native-svg'
|
||||
|
||||
import type { IconProps } from './types'
|
||||
|
||||
function Icon(props: IconProps) {
|
||||
const { color, size = 20, ...otherProps } = props
|
||||
|
||||
return (
|
||||
<Svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox={`0 0 ${size} ${size}`}
|
||||
fill="none"
|
||||
{...otherProps}
|
||||
>
|
||||
<Path
|
||||
d="m5.569 9.35 3.89-3.89-.919-.92-5 5-.46.46.46.46 5 5 .92-.92-3.891-3.89h10.43v-1.3H5.57Z"
|
||||
fill={`${color}`}
|
||||
/>
|
||||
</Svg>
|
||||
)
|
||||
}
|
||||
|
||||
export const ArrowIcon = memo<IconProps>(themed(Icon))
|
||||
28
yarn.lock
28
yarn.lock
|
|
@ -10682,10 +10682,10 @@ expo-manifests@~0.4.0:
|
|||
dependencies:
|
||||
expo-json-utils "~0.4.0"
|
||||
|
||||
expo-modules-autolinking@1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/expo-modules-autolinking/-/expo-modules-autolinking-1.0.1.tgz#a82eaef2decd1d518458d64cb542c64fc23eacde"
|
||||
integrity sha512-Ch0K/Vb2W7zSPlPKKFr6dwgwge6sSCpl7XPW8jrc7hUy+M72dvcfsBsaphvGNlKIZM6TtpCt0xbUlL48wI2y1A==
|
||||
expo-modules-autolinking@1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/expo-modules-autolinking/-/expo-modules-autolinking-1.0.2.tgz#f072f342ab797e43b16ddcdef251fcd4db851e1a"
|
||||
integrity sha512-skAUXERKw1gtSw8xsvft9DE0KVhBvw4dujAtgCZoG2l513fN7ds+B5+30ZVgZATMC+EjtlmjKXzhp5QS44DCFA==
|
||||
dependencies:
|
||||
chalk "^4.1.0"
|
||||
commander "^7.2.0"
|
||||
|
|
@ -10701,7 +10701,7 @@ expo-modules-core@1.1.1:
|
|||
compare-versions "^3.4.0"
|
||||
invariant "^2.2.4"
|
||||
|
||||
expo-splash-screen@^0.17.5:
|
||||
expo-splash-screen@~0.17.5:
|
||||
version "0.17.5"
|
||||
resolved "https://registry.yarnpkg.com/expo-splash-screen/-/expo-splash-screen-0.17.5.tgz#a18dc59c1cc28ebbedbf0a7529a419d18ab0b311"
|
||||
integrity sha512-ejSO78hwHXz8T9u8kh8t4r6CR4h70iBvA65gX8GK+dYxZl6/IANPbIb2VnUpND9vqfW+JnkDw+ZFst+gDnkpcQ==
|
||||
|
|
@ -10742,10 +10742,10 @@ expo-updates@^0.15.6:
|
|||
resolve-from "^5.0.0"
|
||||
uuid "^3.4.0"
|
||||
|
||||
expo@^47.0.12:
|
||||
version "47.0.12"
|
||||
resolved "https://registry.yarnpkg.com/expo/-/expo-47.0.12.tgz#2a8b41217e1cb630f84ea3723031d07354289ae7"
|
||||
integrity sha512-LqECuBpV6arTncksQzOGGQmxOdeQmzm15VqwIJ/c3SWoxiVh5hKf+taUv2oaLmfx2z04TSm1oo56pRSrsL5iIA==
|
||||
expo@~47.0.12:
|
||||
version "47.0.13"
|
||||
resolved "https://registry.yarnpkg.com/expo/-/expo-47.0.13.tgz#f53f82e7f9e209f8a8b25f2493f58439958368cb"
|
||||
integrity sha512-9VjjGdViCJ9NfWbUE7brkwFBDvKuA35V345vMtHFYNKoGJjXib36yitmawreMDQFv0kMTqTnzc7T2191Pod7Ng==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.14.0"
|
||||
"@expo/cli" "0.4.11"
|
||||
|
|
@ -10760,7 +10760,7 @@ expo@^47.0.12:
|
|||
expo-file-system "~15.1.1"
|
||||
expo-font "~11.0.1"
|
||||
expo-keep-awake "~11.0.1"
|
||||
expo-modules-autolinking "1.0.1"
|
||||
expo-modules-autolinking "1.0.2"
|
||||
expo-modules-core "1.1.1"
|
||||
fbemitter "^3.0.0"
|
||||
getenv "^1.0.0"
|
||||
|
|
@ -15755,10 +15755,10 @@ react-native-screens@~3.18.0:
|
|||
react-freeze "^1.0.0"
|
||||
warn-once "^0.1.0"
|
||||
|
||||
react-native-svg@^13.7.0:
|
||||
version "13.7.0"
|
||||
resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-13.7.0.tgz#be2ffb935e996762543dd7376bdc910722f7a43c"
|
||||
integrity sha512-WR5CIURvee5cAfvMhmdoeOjh1SC8KdLq5u5eFsz4pbYzCtIFClGSkLnNgkMSDMVV5LV0qQa4jeIk75ieIBzaDA==
|
||||
react-native-svg@13.4.0, react-native-svg@^13.7.0:
|
||||
version "13.4.0"
|
||||
resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-13.4.0.tgz#82399ba0956c454144618aa581e2d748dd3f010a"
|
||||
integrity sha512-B3TwK+H0+JuRhYPzF21AgqMt4fjhCwDZ9QUtwNstT5XcslJBXC0FoTkdZo8IEb1Sv4suSqhZwlAY6lwOv3tHag==
|
||||
dependencies:
|
||||
css-select "^5.1.0"
|
||||
css-tree "^1.1.3"
|
||||
|
|
|
|||
Loading…
Reference in New Issue