Skip to content

Commit 56ab03e

Browse files
kodiakhq[bot]kodiakhq[bot]
authored
feat(text-area):add textarea component (#83)
feat(text-area):add textarea component
2 parents 0f707c8 + 69b211c commit 56ab03e

File tree

14 files changed

+866
-35
lines changed

14 files changed

+866
-35
lines changed

‎.vscode/settings.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@
2222
"kodiak",
2323
"utils",
2424
"divider",
25-
"select"
25+
"select",
26+
"text-area"
2627
],
2728
"git.branchProtection": ["main"]
2829
}

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ Check out our [getting started docs](/docs/getting-started.md)
5555
- [Spinner](docs/spinner.md)
5656
- [Switch](docs/switch.md)
5757
- [Tag](docs/tag.md)
58+
- [Textarea](docs/text-area.md)
5859
- [Tooltip](docs/tooltip.md)
5960

6061
> **Note:** As the 0.#.# version number suggests that we are still very much
@@ -82,6 +83,7 @@ Thanks goes to these wonderful people
8283
<tr>
8384
<td align="center"><a href="https://peerlist.io/_iam_karthik"><img src="https://avatars.githubusercontent.com/u/35562287?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Karthik</b></sub></a><br /><a href="https://github.com/adaptui/react-native-tailwind/commits?author=Karthik-B-06" title="Code">💻</a></td>
8485
<td align="center"><a href="https://navinmoorthy.me/"><img src="https://avatars.githubusercontent.com/u/39694575?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Navin Moorthy</b></sub></a><br /><a href="https://github.com/adaptui/react-native-tailwind/commits?author=navin-moorthy" title="Code">💻</a></td>
86+
<td align="center"><a href="https://crstnmac.github.io/"><img src="https://avatars.githubusercontent.com/u/20360870?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Criston</b></sub></a><br /><a href="https://github.com/adaptui/react-native-tailwind/commits?author=crstnmac" title="Code">💻</a></td>
8587
</tr>
8688
</table>
8789

‎docs/select.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export default function App() {
2121
}
2222
```
2323

24+
2425
## Working Preview
2526

2627
The Select component uses [Gorhom's React Native Bottomsheet](https://github.com/gorhom/react-native-bottom-sheet) to list the options you have provided through `options` prop.

‎docs/text-area.md‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
# Textarea
2+
3+
![simulator_screenshot_ED7ABA23-96CB-42EC-B428-45ECA2EAC88A](https://user-images.githubusercontent.com/20360870/202635412-9ee5b2ce-2eef-4910-b137-2dd6566ef40c.png)
4+
5+
6+
Adapt UI provides one theme for text area component with three styles and eight interaction states. Use this component to receive information from the user.
7+
8+
#### Simple Usage
9+
10+
```js
11+
import { TextArea } from "@adaptui/react-native-tailwind"
12+
export default function App() {
13+
return (
14+
<TextArea placeholder="Type Something...." />
15+
)
16+
}
17+
```
18+
19+
## Table of Contents
20+
21+
- [Themes](#themes)
22+
- [Variant](#variant)
23+
- [Size](#size)
24+
- [Icon](#icon)
25+
- [Interactions](#interactions)
26+
- [Suffix](#suffix)
27+
- [Props](#props)
28+
## Themes
29+
30+
Adapt UI provides only one `base` theme for TextArea.
31+
32+
![simulator_screenshot_CF05548F-87A9-4B9B-8298-42BCC812F415](https://user-images.githubusercontent.com/20360870/202165894-10ad9c82-ce7e-4251-be58-deac6ba98eb2.png)
33+
34+
<details>
35+
36+
<summary>
37+
<b>Usage</b>
38+
</summary>
39+
40+
### Usage
41+
42+
```js
43+
import { TextArea, Slot, Icon } from "@adaptui/react-native-tailwind"
44+
export default function App() {
45+
return (
46+
<TextArea
47+
placeholder="Type Something..."
48+
/>
49+
)
50+
}
51+
52+
```
53+
54+
</details>
55+
56+
## Variant
57+
58+
Adapt UI provides four different input field components styles: `subtle`, `outline`,
59+
and `underline`.
60+
61+
You can use these various styled input field components based on the necessity
62+
and style you wish to provide to your design.
63+
64+
![simulator_screenshot_ED7ABA23-96CB-42EC-B428-45ECA2EAC88A](https://user-images.githubusercontent.com/20360870/202635412-9ee5b2ce-2eef-4910-b137-2dd6566ef40c.png)
65+
66+
<details>
67+
68+
<summary>
69+
<b>Usage</b>
70+
</summary>
71+
72+
### Usage
73+
74+
```js
75+
import { TextArea } from "@adaptui/react-native-tailwind"
76+
77+
export default function App() {
78+
return (
79+
<>
80+
<TextArea variant="subtle" placeholder="Whats happening" />
81+
<TextArea placeholder="Tell us about yourself" />
82+
<TextArea variant="underline" placeholder="Type your message here" />
83+
</>
84+
)
85+
}
86+
87+
```
88+
89+
</details>
90+
91+
## Size
92+
93+
There are four different sizes for input in Adapt UI: `sm`, `md`, `lg` & `xl`
94+
95+
Based on the hierarchy, you can switch between different sizes.
96+
97+
98+
![simulator_screenshot_B717A1F7-8750-4FBC-8616-B35A64853D61](https://user-images.githubusercontent.com/20360870/202188784-1aa674aa-62bc-4ec5-b207-e249c23795c2.png)
99+
100+
101+
<details>
102+
103+
<summary>
104+
<b>Usage</b>
105+
</summary>
106+
107+
### Usage
108+
109+
```js
110+
import { TextArea } from "@adaptui/react-native-tailwind"
111+
112+
export default function App() {
113+
return (
114+
<>
115+
<TextArea size="sm" placeholder="Whats happening" />
116+
<TextArea placeholder="Whats in your mind?" />
117+
<TextArea size="lg" placeholder="Type your message here" />
118+
<TextArea size="xl" placeholder="Tell us about yourself" />
119+
</>
120+
)
121+
}
122+
123+
```
124+
</details>
125+
126+
### Interactions
127+
128+
We tried to bring the most commonly used interactions for the text area component. Adapt UI provides eight-input interactions: default, hover, active, focus, disabled, loading, error, and filled. These can give a complete cycle of text area interactions.
129+
130+
![SCR-20221116-i5r](https://user-images.githubusercontent.com/20360870/202116137-bac7d6eb-8eb5-4eb9-81fc-0a1293eb3d97.png)
131+
132+
<details>
133+
134+
<summary>
135+
<b>Usage</b>
136+
</summary>
137+
138+
### Usage
139+
140+
```js
141+
import { TextArea } from "@adaptui/react-native-tailwind"
142+
143+
export default function App() {
144+
return (
145+
<>
146+
<TextArea placeholder="Type something..." loading={true} />
147+
<TextArea placeholder="Type Something" editable={true} /> //disabled
148+
<TextArea placeholder="Type something..." invalid={true} />
149+
</>
150+
)
151+
}
152+
153+
```
154+
155+
</details>
156+
157+
158+
### Suffix
159+
160+
The suffix is a slot at the beginning or suffix position of a component. Here in the Textarea, the suffix slot can be used to bring icons. Suffix itself doesn't have any unique property.
161+
162+
Here in the Textarea, we have an icon in the suffix slot. You can change the icon by passing an component to suffix prop.
163+
The Icon will get hidden when the `loading` prop is true.
164+
165+
![simulator_screenshot_669C1EEF-2D9A-4E3F-B378-6A58DCCA0DF9](https://user-images.githubusercontent.com/20360870/202167240-dd1bedc8-a5de-46a4-b6ee-b0f81c87cc1e.png)
166+
167+
<details>
168+
169+
<summary>
170+
<b>Usage</b>
171+
</summary>
172+
173+
### Usage
174+
175+
```js
176+
import { TextArea } from "@adaptui/react-native-tailwind"
177+
178+
export default function App() {
179+
return (
180+
<>
181+
<TextArea placeholder="Type something..."
182+
suffix={<Icon icon={<Slot />} />}
183+
/>
184+
</>
185+
)
186+
}
187+
188+
```
189+
190+
</details>
191+
192+
## Props
193+
194+
> TextArea implements TextInput from React Native accepting all `TextInputProps`
195+
196+
| Name | Description | Type | Default |
197+
| ------------- | ------------------------------------------------------------------------------------ | ------------------------------ | -------- |
198+
| size | Size of TextArea | `sm` `md` `lg` `xl` | `md` |
199+
| variant | How will the TextArea look? | `outline` `subtle` `underline` | `subtle` |
200+
| suffix | If added, the TextArea will show an icon on the bottom right of the TextArea's text. | JSX.Element | null |
201+
| editable | If true, TextArea is disabled | boolean | false |
202+
| invalid | Set to true, when TextArea Value is invalid | boolean | false |
203+
| loading | If true, TextArea renders a spinner in suffix slot | boolean | false |
204+
| \_suffixProps | Touchable props for the suffix element | `PressableProps` | {} |

‎example/src/AppRoot.tsx‎

Lines changed: 39 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
SpinnerScreen,
2020
SwitchComponentScreen,
2121
TagScreen,
22+
TextAreaScreen,
2223
TooltipScreen,
2324
} from "./modules";
2425

@@ -27,11 +28,6 @@ const Drawer = createDrawerNavigator();
2728
const AppRoot = () => {
2829
return (
2930
<Drawer.Navigator initialRouteName="SelectScreen">
30-
<Drawer.Screen
31-
options={{ title: "Select" }}
32-
name="SelectScreen"
33-
component={SelectScreen}
34-
/>
3531
<Drawer.Screen
3632
options={{ title: "Avatar" }}
3733
name="AvatarScreen"
@@ -42,56 +38,61 @@ const AppRoot = () => {
4238
name="AvatarGroupScreen"
4339
component={AvatarGroupScreen}
4440
/>
45-
<Drawer.Screen
46-
options={{ title: "Button" }}
47-
name="ButtonScreen"
48-
component={ButtonScreen}
49-
/>
5041
<Drawer.Screen
5142
options={{ title: "Badge" }}
5243
name="BadgeScreen"
5344
component={BadgeScreen}
5445
/>
46+
<Drawer.Screen
47+
options={{ title: "Button" }}
48+
name="ButtonScreen"
49+
component={ButtonScreen}
50+
/>
5551
<Drawer.Screen
5652
options={{ title: "Checkbox" }}
5753
name="CheckboxScreen"
5854
component={CheckboxScreen}
5955
/>
56+
<Drawer.Screen
57+
options={{ title: "Checkbox Group" }}
58+
name="CheckboxGroupScreen"
59+
component={CheckboxGroupScreen}
60+
/>
61+
<Drawer.Screen
62+
options={{ title: "Circular Progress" }}
63+
name="CircularProgressScreen"
64+
component={CircularProgressScreen}
65+
/>
6066
<Drawer.Screen
6167
options={{ title: "Divider" }}
6268
name="DividerScreen"
6369
component={DividerScreen}
6470
/>
6571
<Drawer.Screen
66-
options={{ title: "Spinner" }}
67-
name="SpinnerScreen"
68-
component={SpinnerScreen}
72+
options={{ title: "Input" }}
73+
name="InputScreen"
74+
component={InputScreen}
6975
/>
7076
<Drawer.Screen
7177
options={{ title: "Meter" }}
7278
name="MeterComponentScreen"
7379
component={MeterComponentScreen}
7480
/>
7581
<Drawer.Screen
76-
options={{ title: "Tooltip" }}
77-
name="TooltipScreen"
78-
component={TooltipScreen}
82+
options={{ title: "Select" }}
83+
name="SelectScreen"
84+
component={SelectScreen}
7985
/>
8086
<Drawer.Screen
81-
options={{ title: "Tag " }}
82-
name="TagScreen"
83-
component={TagScreen}
87+
options={{ title: "Spinner" }}
88+
name="SpinnerScreen"
89+
component={SpinnerScreen}
8490
/>
8591
<Drawer.Screen
8692
options={{ title: "Progress " }}
8793
name="ProgressScreen"
8894
component={ProgressScreen}
8995
/>
90-
<Drawer.Screen
91-
options={{ title: "Switch" }}
92-
name="SwitchComponentScreen"
93-
component={SwitchComponentScreen}
94-
/>
9596
<Drawer.Screen
9697
options={{ title: "Radio" }}
9798
name="RadioComponentScreen"
@@ -103,19 +104,24 @@ const AppRoot = () => {
103104
component={SliderComponentScreen}
104105
/>
105106
<Drawer.Screen
106-
options={{ title: "Circular Progress" }}
107-
name="CircularProgressScreen"
108-
component={CircularProgressScreen}
107+
options={{ title: "Switch" }}
108+
name="SwitchComponentScreen"
109+
component={SwitchComponentScreen}
109110
/>
110111
<Drawer.Screen
111-
options={{ title: "Input" }}
112-
name="InputScreen"
113-
component={InputScreen}
112+
options={{ title: "Tag " }}
113+
name="TagScreen"
114+
component={TagScreen}
114115
/>
115116
<Drawer.Screen
116-
options={{ title: "Checkbox Group" }}
117-
name="CheckboxGroupScreen"
118-
component={CheckboxGroupScreen}
117+
options={{ title: "Text Area" }}
118+
name="TextAreaScreen"
119+
component={TextAreaScreen}
120+
/>
121+
<Drawer.Screen
122+
options={{ title: "Tooltip" }}
123+
name="TooltipScreen"
124+
component={TooltipScreen}
119125
/>
120126
</Drawer.Navigator>
121127
);

0 commit comments

Comments
 (0)