feat(textArea): added textarea component

.storybook/preview.js

@@ -46,6 +46,7 @@ export const parameters = {
         'Image',
         'Input',
         'Text',
+        'TextArea',
         'Toast',
         'Switch',
         'Modal',

.storybook/storybook.requires.js

@@ -35,6 +35,7 @@ const getStories = () => {
     require('../src/components/Input/Input.stories.tsx'),
     require('../src/components/Switch/Switch.stories.tsx'),
     require('../src/components/Text/Text.stories.tsx'),
+    require('../src/components/TextArea/TextArea.stories.tsx'),
     require('../src/components/TextLink/TextLink.stories.tsx'),
     require('../src/components/Toast/Toast.stories.tsx'),
     require('../src/components/Spinner/Spinner.stories.tsx'),

docs/stories/components/textarea.stories.mdx

@@ -0,0 +1,100 @@
+import { Meta } from '@storybook/addon-docs';
+import TextAreaSizes from '../assets/textarea/TextAreaSizes.png';
+import TextAreaTypes from '../assets/textarea/TextAreaTypes.png';
+import TextAreaCases from '../assets/textarea/TextAreaCases.png';
+
+<Meta
+  title="Components/TextArea"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {
+        hidden: true,
+      },
+    },
+  }}
+/>
+
+# TextArea
+
+Text areas let users enter and edit text.
+
+<div
+  style={{
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+  }}>
+  <img src={TextAreaSizes} width="250" alt="TextAreaSizes" />
+  <img src={TextAreaTypes} width="250" alt="TextAreaTypes" />
+  <img src={TextAreaCases} width="250" alt="TextAreaCases" />
+</div>
+
+<br/>
+<br/>
+
+## Usage
+
+```jsx
+<TextArea label="Lorem" placeHolder="Lorem" size="small" maxLength={200} />
+```
+
+## Props
+
+#### size
+
+The size of the button.
+`large`,
+`medium`,
+`small`
+
+#### label
+
+The text or component to use for the floating label.
+
+#### labelFixed
+
+Boolean value that checks if the label is fixed.
+
+#### placeholder
+
+The string that will be rendered before text has been entered.
+
+#### disabled
+
+If true, user won't be able to interact with the component.
+
+#### helpText
+
+Helper text providing information for the textArea.
+
+#### counterText
+
+Counts the length of the textArea.
+
+#### error
+
+Boolean value indicating the error status.
+
+#### errorText
+
+Helper text showing the error in the textArea.
+
+#### maxLength
+
+Max length of content.
+
+#### maxLengthErrorText
+
+Helper text showing the error if exceed maxLength.
+
+#### style
+
+Type: `StyleProp<TextAreaStyle>`
+
+<br />
+TextArea implements: <>
+  <a href="https://reactnative.dev/docs/textinput#props" title="title">
+    ...TextInput props
+  </a>
+</>

src/components/TextArea/TextArea.stories.tsx

@@ -0,0 +1,149 @@
+import React, { useState } from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react-native';
+import Text from '../Text/Text';
+import TextArea from './TextArea';
+import Box from '../Box/Box';
+import Button from '../Button/Button';
+
+const sizeList = ['small', 'medium', 'large'];
+
+const TextAreaMeta: ComponentMeta<typeof TextArea> = {
+  title: 'TextArea',
+  component: TextArea,
+  argTypes: {
+    size: {
+      options: sizeList,
+      control: { type: 'radios' },
+    },
+  },
+  args: {
+    size: 'medium',
+    label: 'Label',
+    placeholder: 'Type something...',
+    labelFixed: false,
+    helpText: 'Helper Text',
+    error: false,
+    disabled: false,
+    errorText: 'Error Text',
+  },
+};
+
+export default TextAreaMeta;
+
+type TextAreaStory = ComponentStory<typeof TextArea>;
+
+export const Basic: TextAreaStory = args => (
+  <Box>
+    <Box px="2xs">
+      <Text py="2xs" variant="subtitle01Bold">
+        Text Area
+      </Text>
+    </Box>
+
+    <TextArea {...args} />
+  </Box>
+);
+
+export const Cases: TextAreaStory = args => {
+  const [state, setState] = useState(args);
+
+  return (
+    <Box>
+      <Box px="2xs">
+        <Text py="2xs" variant="subtitle01Bold">
+          Text Area Cases
+        </Text>
+      </Box>
+
+      <TextArea {...args} disabled={true} />
+
+      <Box pt="2xl">
+        <TextArea {...state} />
+
+        <Box flexDirection="row" px="2xs" marginLeft="2xs" marginTop="xs">
+          <Button
+            flex={1}
+            kind="danger"
+            variant="secondary"
+            size="s"
+            onPress={() => setState({ ...state, error: true, errorText: null })}
+            label="Toggle Error"
+            filled={true}
+            mr="2xs"
+          />
+          <Button
+            flex={1}
+            size="s"
+            kind="danger"
+            variant="secondary"
+            onPress={() =>
+              setState({
+                ...state,
+                error: true,
+                errorText: 'Error text',
+              })
+            }
+            label="Error with Text"
+            filled={true}
+            mr="2xs"
+          />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export const Sizes: TextAreaStory = () => (
+  <Box>
+    <Box px="2xs">
+      <Text py="2xs" variant="subtitle01Bold">
+        Text Area Sizes
+      </Text>
+    </Box>
+
+    <Box py="xs">
+      <TextArea
+        size="large"
+        label="Label"
+        placeholder="Large"
+        helpText="Help Text"
+      />
+    </Box>
+
+    <Box py="xs">
+      <TextArea
+        size="medium"
+        label="Label"
+        placeholder="Medium"
+        helpText="Help Text"
+      />
+    </Box>
+
+    <Box py="xs">
+      <TextArea
+        size="small"
+        label="Label"
+        placeholder="Small"
+        helpText="Help Text"
+      />
+    </Box>
+  </Box>
+);
+
+export const Types: TextAreaStory = args => {
+  return (
+    <Box>
+      <Box px="2xs">
+        <Text py="2xs" variant="subtitle01Bold">
+          Text Area Types
+        </Text>
+      </Box>
+
+      <TextArea {...args} labelFixed={true} />
+
+      <TextArea {...args} />
+
+      <TextArea {...args} label={null} />
+    </Box>
+  );
+};