feat: text input storie

Author: iuricmp

.eslintrc.js

@@ -14,7 +14,7 @@ module.exports = {
 		'no-spaced-func': 0,
 		'react/react-in-jsx-scope': 2,
 		'import/order': [
-			2,
+			0,
 			{
 				groups: [['builtin', 'external'], 'internal', ['sibling', 'parent', 'index'], 'object', 'type'],
 				pathGroups: [

example/.storybook/preview.tsx

@@ -6,6 +6,12 @@ const theme: DefaultTheme = {
 	colors: {
 		black: '#000000',
 	},
+	textinputs: {
+		background: '#5999fa',
+		placeholder: {
+			color: '#535AE4',
+		},
+	},
 	buttons: {
 		primary: '#000000',
 		secondary: '#E5E5E5',

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

@@ -0,0 +1,50 @@
+import React from 'react'
+import { View } from 'react-native'
+import { TextField } from '@berty/ui-components'
+import type { Meta } from '@storybook/react'
+
+const meta = {
+	title: 'Components/TextField',
+	component: TextField,
+	argTypes: {
+		onPress: { action: 'pressed the button' },
+		color: {
+			control: {
+				type: 'text',
+				options: ['primary', 'secondary'],
+				defaultValue: 'primary',
+			},
+		},
+	},
+	args: {
+		color: 'primary',
+		children: 'Primary Button',
+		placeholder: 'Placeholder Text',
+	},
+	decorators: [
+		Story => (
+			<View
+				style={{
+					flex: 1,
+					padding: 16,
+					alignItems: 'flex-start',
+					backgroundColor: '#4690FF',
+				}}
+			>
+				<Story />
+			</View>
+		),
+	],
+} satisfies Meta<typeof TextField>
+
+export default meta
+
+export const Basic = (args: any) => (
+	<>
+		<TextField {...args} />
+		<View style={{ height: 16 }} />
+		<TextField {...args} type='password' text='' />
+		<View style={{ height: 16 }} />
+		<TextField {...args} type='password' />
+	</>
+)

package.json

@@ -65,6 +65,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "@expo/vector-icons": "^14.0.4",
     "styled-components": "^6.1.14"
   },
   "devDependencies": {

src/components/textFields/TextField.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { TextInputProps } from 'react-native'
+import styled, { DefaultTheme } from 'styled-components/native'
+import { FontAwesome } from '@expo/vector-icons'
+
+export type Props = {
+	type: 'password' | 'text'
+	theme: DefaultTheme
+} & TextInputProps
+
+export const TextField: React.FC<Props> = props => {
+	const [isSecureText, setShowSecureText] = React.useState(props.type === 'password')
+
+	return (
+		<Container>
+			<TextFieldStyled {...props} secureTextEntry={isSecureText} />
+			{props.type === 'password' ? (
+				<ToggleIcon>
+					<FontAwesome size={28} name={isSecureText ? 'eye-slash' : 'eye'} onPress={() => setShowSecureText(prev => !prev)} />
+				</ToggleIcon>
+			) : null}
+		</Container>
+	)
+}
+
+const Container = styled.View<Props>`
+	flex-direction: row;
+	align-items: center;
+	border-width: 1px;
+	border-radius: 4px;
+	padding: 2px;
+	margin: 10px 0;
+	border-color: ${({ theme }: { theme: DefaultTheme }) => theme.colors.black};
+	color: ${({ theme }: { theme: DefaultTheme }) => theme.colors.black};
+	background-color: ${({ theme }: { theme: DefaultTheme }) => theme.textinputs?.background};
+`
+
+const TextFieldStyled = styled.TextInput.attrs((props: Props) => ({
+	placeholderTextColor: props.theme.textinputs?.placeholder.color || props.theme.colors.black,
+}))`
+	flex: 1;
+	height: 40px;
+	width: 100%;
+	padding-horizontal: 16px;
+	placeholder: ${({ theme }: { theme: DefaultTheme }) => theme.colors.black};
+	border-style: solid;
+`
+
+const ToggleIcon = styled.TouchableOpacity`
+	color: ${({ theme }: { theme: DefaultTheme }) => theme.colors.black};
+	padding: 2px;
+`

src/components/theme/styled.d.ts

@@ -11,6 +11,13 @@ declare module 'styled-components/native' {
 			}
 		}
 
+		textinputs: {
+			background: string
+			placeholder: {
+				color: string
+			}
+		}
+
 		colors: {
 			black: string
 		}

src/index.tsx

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

yarn.lock

@@ -1655,6 +1655,7 @@ __metadata:
   dependencies:
     "@commitlint/config-conventional": "npm:^17.0.2"
     "@evilmartians/lefthook": "npm:^1.5.0"
+    "@expo/vector-icons": "npm:^14.0.4"
     "@react-native/eslint-config": "npm:^0.73.1"
     "@release-it/conventional-changelog": "npm:^9.0.2"
     "@trivago/prettier-plugin-sort-imports": "npm:^5.2.1"