feat: container

Author: iuricmp

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

@@ -0,0 +1,46 @@
+import React from 'react'
+import { View } from 'react-native'
+import { Button, Container, Text, TextField } from '@berty/ui-components'
+import type { Meta } from '@storybook/react'
+
+const meta = {
+	title: 'Layout/Page',
+	component: Button,
+	argTypes: {
+		onPress: { action: 'pressed the button' },
+		color: {
+			control: {
+				type: 'text',
+				options: ['primary', 'secondary'],
+				defaultValue: 'primary',
+			},
+		},
+	},
+	args: {
+		color: 'primary',
+		children: 'Primary Button',
+	},
+	decorators: [
+		Story => (
+			<Container>
+				<Story />
+			</Container>
+		),
+	],
+} satisfies Meta<typeof Button>
+
+export default meta
+
+export const Basic = (args: any) => (
+	<>
+		<Text.H1>Create The</Text.H1>
+		<Text.H1>Master</Text.H1>
+		<Text.H1>Keyword</Text.H1>
+		<View style={{ height: 16 }} />
+		<TextField placeholder='Master Keyword' type='password' />
+		<View style={{ height: 2 }} />
+		<TextField placeholder='Confirm Master Keyword' type='password' />
+		<View style={{ height: 8 }} />
+		<Button>Create</Button>
+	</>
+)

example/.storybook/stories/TextField/TextField.stories.tsx

@@ -8,17 +8,9 @@ const meta = {
 	component: TextField,
 	argTypes: {
 		onPress: { action: 'pressed the button' },
-		color: {
-			control: {
-				type: 'text',
-				options: ['primary', 'secondary'],
-				defaultValue: 'primary',
-			},
-		},
 	},
 	args: {
-		color: 'primary',
-		children: 'Primary Button',
+		children: 'Text Field Content',
 		placeholder: 'Placeholder Text',
 	},
 	decorators: [

src/components/layout/Container.tsx

@@ -0,0 +1,7 @@
+import styled, { DefaultTheme } from 'styled-components/native'
+
+export const Container = styled.View`
+	flex: 1;
+	padding: 22px;
+	background-color: ${({ theme }: { theme: DefaultTheme }) => theme.textinputs?.background};
+`

src/components/textFields/TextField.tsx

@@ -4,17 +4,18 @@ import styled, { DefaultTheme } from 'styled-components/native'
 import { FontAwesome } from '@expo/vector-icons'
 
 export type Props = {
-	type: 'password' | 'text'
-	theme: DefaultTheme
+	type?: 'password' | 'text'
 } & TextInputProps
 
-export const TextField: React.FC<Props> = props => {
-	const [isSecureText, setShowSecureText] = React.useState(props.type === 'password')
+type PropsWithTheme = Props & { theme: DefaultTheme }
+
+export const TextField: React.FC<Props> = ({ type = 'text', ...rest }) => {
+	const [isSecureText, setShowSecureText] = React.useState(type === 'password')
 
 	return (
 		<Container>
-			<TextFieldStyled {...props} secureTextEntry={isSecureText} />
-			{props.type === 'password' ? (
+			<TextFieldStyled {...rest} secureTextEntry={isSecureText} />
+			{type === 'password' ? (
 				<ToggleIcon>
 					<FontAwesome size={28} name={isSecureText ? 'eye-slash' : 'eye'} onPress={() => setShowSecureText(prev => !prev)} />
 				</ToggleIcon>
@@ -35,12 +36,15 @@ const Container = styled.View<Props>`
 	background-color: ${({ theme }: { theme: DefaultTheme }) => theme.textinputs?.background};
 `
 
-const TextFieldStyled = styled.TextInput.attrs((props: Props) => ({
+const TextFieldStyled = styled.TextInput.attrs((props: PropsWithTheme) => ({
 	placeholderTextColor: props.theme.textinputs?.placeholder.color || props.theme.colors.black,
 }))`
 	flex: 1;
 	height: 40px;
 	width: 100%;
+	font-weight: 500;
+	line-height: 20px;
+	font-size: 18px;
 	padding-horizontal: 16px;
 	placeholder: ${({ theme }: { theme: DefaultTheme }) => theme.colors.black};
 	border-style: solid;

src/index.tsx

@@ -1,8 +1,9 @@
 import { DefaultTheme, ThemeProvider } from 'styled-components'
 import { Button } from './components/buttons'
+import { Container } from './components/layout/Container'
 import { H1 } from './components/text'
 import { TextField } from './components/textFields/TextField'
 
 export const Text = { H1 }
 
-export { ThemeProvider, DefaultTheme, Button, TextField }
+export { ThemeProvider, DefaultTheme, Button, TextField, Container }