Skip to content

Commit 487e21c

Browse files
iuricmpiuricmp
committed
feat: second screen
1 parent bb46c87 commit 487e21c

File tree

12 files changed

+125
-27
lines changed

12 files changed

+125
-27
lines changed

‎README.md

-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ npm install @berty/ui-components
1010

1111
## Usage
1212

13-
1413
```js
1514
import { Button, DefaultTheme, Text, ThemeProvider } from '@berty/ui-components'
1615

@@ -23,7 +22,6 @@ import { Button, DefaultTheme, Text, ThemeProvider } from '@berty/ui-components'
2322

2423
```
2524

26-
2725
## Contributing
2826

2927
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

‎example/.storybook/preview.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,11 @@ const theme: DefaultTheme = {
2424
buttons: {
2525
primary: '#000000',
2626
secondary: '#E5E5E5',
27+
tertirary: '#4c8ae7',
2728
label: {
2829
primary: '#ffffff',
2930
secondary: '#000000',
31+
tertirary: '#000000',
3032
},
3133
},
3234
}

‎example/.storybook/stories/Button/Button.stories.tsx

+18-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
import { View } from 'react-native'
3-
import { Button } from '@berty/ui-components'
3+
import { Button, Text, ButtonIcon } from '@berty/ui-components'
44
import FontAwesome6 from '@expo/vector-icons/FontAwesome6'
55
import type { Meta } from '@storybook/react'
66

@@ -19,7 +19,7 @@ const meta = {
1919
},
2020
args: {
2121
color: 'primary',
22-
children: 'Primary Button',
22+
children: 'Button Label',
2323
},
2424
decorators: [
2525
Story => (
@@ -34,20 +34,29 @@ export default meta
3434

3535
export const Basic = (args: any) => (
3636
<>
37+
<Text.Body style={{ padding: 16 }}>Primary Button:</Text.Body>
3738
<Button {...args} />
3839
<View style={{ height: 16 }} />
39-
<Button {...args} color='secondary' />
40-
<View style={{ height: 16 }} />
4140
<Button {...args} endIcon={<FontAwesome6 name='copy' size={20} color='white' />} />
4241
<View style={{ height: 16 }} />
4342
<Button {...args} startIcon={<FontAwesome6 name='copy' size={20} color='white' />} />
4443
<View style={{ height: 16 }} />
45-
<Button style={{ height: 80, width: 80, borderRadius: 40 }}>
44+
45+
<Text.Body style={{ padding: 16 }}>Secondary Button:</Text.Body>
46+
<Button {...args} color='secondary' />
47+
<View style={{ height: 16 }} />
48+
49+
<Text.Body style={{ padding: 16 }}>Icon Button:</Text.Body>
50+
<ButtonIcon size={60} color='primary'>
4651
<FontAwesome6 name='copy' size={30} color='white' />
47-
</Button>
52+
</ButtonIcon>
53+
<View style={{ height: 16 }} />
54+
<ButtonIcon size={60} color='secondary'>
55+
<FontAwesome6 name='copy' size={30} color='black' />
56+
</ButtonIcon>
4857
<View style={{ height: 16 }} />
49-
<Button style={{ height: 80, width: 80, borderRadius: 40 }} color='secondary'>
50-
<FontAwesome6 name='copy' size={30} />
51-
</Button>
58+
<ButtonIcon size={40} color='tertirary'>
59+
<FontAwesome6 name='user' size={20} color='black' />
60+
</ButtonIcon>
5261
</>
5362
)

‎example/.storybook/stories/Layout/Container.stories.tsx

+45-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react'
22
import { View } from 'react-native'
3-
import { Button, Container, Text, TextField, BottonPanel, Spacer, ErrorBox } from '@berty/ui-components'
3+
import { Button, Container, Text, TextField, BottonPanel, Spacer, ErrorBox, AppBar, ButtonIcon } from '@berty/ui-components'
4+
import FontAwesome6 from '@expo/vector-icons/FontAwesome6'
45
import type { Meta } from '@storybook/react'
56

67
const meta = {
@@ -21,11 +22,11 @@ const meta = {
2122
children: 'Primary Button',
2223
},
2324
decorators: [Story => <Story />],
24-
} satisfies Meta<typeof Button>
25+
} satisfies Meta<typeof Container>
2526

2627
export default meta
2728

28-
export const Basic = (args: any) => (
29+
export const FirstScreen = (args: any) => (
2930
<>
3031
<Container>
3132
<Text.H1>Create The</Text.H1>
@@ -45,10 +46,47 @@ export const Basic = (args: any) => (
4546
<Spacer />
4647
<Text.Body>You have to setup a master keyword in order to access your future vauls from one password.</Text.Body>
4748
<Spacer />
48-
{/* <View style={{ flexDirection:'row', height: 16, backgroundColor:'red', flex: 1, width: '100%', justifyContent: 'space-between' }}>
49-
<Button>Restore</Button>
50-
<Button>Import</Button>
51-
</View> */}
49+
</BottonPanel>
50+
</>
51+
)
52+
53+
export const SecondScreen = (args: any) => (
54+
<>
55+
<AppBar>
56+
<ButtonIcon size={40} color='tertirary'>
57+
<FontAwesome6 name='user' size={20} color='black' />
58+
</ButtonIcon>
59+
60+
<Button color='tertirary' endIcon={<FontAwesome6 name='add' size={16} color='black' />}>
61+
New Vault
62+
</Button>
63+
</AppBar>
64+
<Container>
65+
<Text.H1>Check</Text.H1>
66+
<Text.H1>Your Safe</Text.H1>
67+
<Text.H1>Keys List</Text.H1>
68+
<View style={{ flexDirection: 'row', alignItems: 'center', width: '50%', paddingTop: 24 }}>
69+
<View style={{ flexDirection: 'row', alignItems: 'baseline', paddingRight: 24 }}>
70+
<Text.H1>0</Text.H1>
71+
<Text.Body>Key</Text.Body>
72+
</View>
73+
<View style={{ flexDirection: 'row', alignItems: 'baseline' }}>
74+
<Text.H1>0</Text.H1>
75+
<Text.Body>User</Text.Body>
76+
</View>
77+
</View>
78+
</Container>
79+
<BottonPanel>
80+
<Text.H2>New User</Text.H2>
81+
<Spacer />
82+
<Text.Body style={{ textAlign: 'center' }}>
83+
As a new user, your first step is to create a new Vault in the app to securely store your data.
84+
</Text.Body>
85+
<Spacer style={{ height: 56 }} />
86+
<View style={{ flexDirection: 'row', flex: 1, width: '100%', justifyContent: 'space-between' }}>
87+
<Button color='secondary'>Import Vault</Button>
88+
<Button endIcon={<FontAwesome6 name='add' size={16} color='white' />}>New Vault</Button>
89+
</View>
5290
</BottonPanel>
5391
</>
5492
)

‎src/components/buttons/Button.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ import { TouchableOpacity, TouchableOpacityProps } from 'react-native'
33
import styled from 'styled-components/native'
44
import { DefaultTheme } from 'styled-components/native'
55
import * as Text from '../text'
6-
7-
export type ButtonColor = 'primary' | 'secondary'
6+
import { ButtonColor } from './index'
87

98
export interface Button extends TouchableOpacityProps {
109
children: React.ReactNode

‎src/components/buttons/ButtonIcon.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react'
2+
import { TouchableOpacity, TouchableOpacityProps } from 'react-native'
3+
import styled from 'styled-components/native'
4+
import { DefaultTheme } from 'styled-components/native'
5+
import { ButtonColor } from '.'
6+
7+
export interface ButtonIcon extends TouchableOpacityProps {
8+
children: React.ReactNode
9+
color?: ButtonColor
10+
size?: number
11+
}
12+
13+
export const ButtonIcon: React.FC<ButtonIcon> = props => {
14+
return (
15+
<ButtonWrapper {...props} $color={props.color} style={[props.style]}>
16+
{props.children}
17+
</ButtonWrapper>
18+
)
19+
}
20+
21+
const ButtonWrapper = styled(TouchableOpacity)<{ $color?: ButtonColor; size?: number }>`
22+
width: ${({ size }: ButtonIcon) => size || 40}px;
23+
height: ${({ size }: ButtonIcon) => size || 40}px;
24+
border-radius: ${({ size }: ButtonIcon) => (size ? size / 2 : 20)}px;
25+
flex-direction: row;
26+
font-size: 40px;
27+
justify-content: center;
28+
align-items: center;
29+
background-color: ${(props: DefaultTheme) => (props.$color ? props.theme.buttons[props.$color] : props.theme.buttons.primary)};
30+
`

‎src/components/buttons/index.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
1-
export { Button } from './Button'
1+
export * from './Button'
2+
export * from './ButtonIcon'
3+
4+
export type ButtonColor = 'primary' | 'secondary' | 'tertirary'

‎src/components/surfaces/AppBar.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import styled, { DefaultTheme } from 'styled-components/native'
2+
3+
export const AppBar = styled.View`
4+
display: flex;
5+
flex-direction: row;
6+
justify-content: space-between;
7+
align-items: center;
8+
padding: 16px;
9+
background-color: ${({ theme }: { theme: DefaultTheme }) => theme.colors.primary};
10+
`

‎src/components/surfaces/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './AppBar'

‎src/components/text/index.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
import { TextProps } from 'react-native'
12
import styled, { DefaultTheme } from 'styled-components/native'
2-
import { ButtonColor } from '../buttons/Button'
3+
import { ButtonColor } from '../../index'
34

45
export const H1 = styled.Text`
56
font-weight: 400;
@@ -15,8 +16,9 @@ export const H2 = styled.Text`
1516
letter-spacing: -0.32px;
1617
color: ${(props: DefaultTheme) => props.theme.colors.primary};
1718
`
19+
export type H2 = typeof H2
1820

19-
export const Body = styled.Text`
21+
export const Body = styled.Text<TextProps>`
2022
font-weight: 400;
2123
font-size: 16px;
2224
letter-spacing: -0.32px;

‎src/components/theme/styled.d.ts

+5
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,12 @@ declare module 'styled-components/native' {
99
buttons: {
1010
primary: string
1111
secondary: string
12+
tertirary: string
13+
1214
label: {
1315
primary: string
1416
secondary: string
17+
tertirary: string
1518
}
1619
}
1720

@@ -23,6 +26,8 @@ declare module 'styled-components/native' {
2326
}
2427

2528
colors: {
29+
primary: string
30+
2631
black: string
2732
white: string
2833
}

‎src/index.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { DefaultTheme, ThemeProvider } from 'styled-components'
22
import { ErrorBox } from './components/alert'
3-
import { Button } from './components/buttons'
43
import { Container, BottonPanel, Spacer } from './components/layout'
5-
import { H1, H2, Body } from './components/text'
4+
import * as Text from './components/text'
65
import { TextField } from './components/textFields/TextField'
76

8-
export const Text = { H1, H2, Body }
7+
export * from './components/surfaces'
98

10-
export { ThemeProvider, DefaultTheme, Button, TextField, Container, BottonPanel, Spacer, ErrorBox }
9+
export * from './components/buttons'
10+
11+
export { ThemeProvider, DefaultTheme, TextField, Container, BottonPanel, Spacer, ErrorBox, Text }

0 commit comments

Comments
 (0)