feat(textarea): add FormTextArea component

src/components/FormTextArea/FormTextArea.stories.tsx

@@ -0,0 +1,35 @@
+import { Button, FormLabel, Text } from '@twilio-paste/core';
+import { Theme } from '@twilio-paste/theme';
+import { Formik } from 'formik';
+import * as React from 'react';
+
+import { FormTextArea } from './FormTextArea';
+
+export default {
+  title: 'FormTextArea',
+};
+
+export const Basic: React.FC = () => (
+  <Theme.Provider theme="default">
+    <Formik
+      initialValues={{ message: '' }}
+      onSubmit={(values) => {
+        window.alert(JSON.stringify(values));
+      }}
+    >
+      {({ handleSubmit, values }) => (
+        <form onSubmit={handleSubmit}>
+          <FormLabel htmlFor="message" required={true}>
+            Message (at least 40 characters)
+          </FormLabel>
+          <FormTextArea id="message" name="message" placeholder="Enter message" />
+          <Text as="p">{values.message.length} characters</Text>
+
+          <Button variant="primary" type="submit" disabled={values.message.length < 40}>
+            Submit
+          </Button>
+        </form>
+      )}
+    </Formik>
+  </Theme.Provider>
+);

src/components/FormTextArea/FormTextArea.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { FieldProps } from 'formik';
+import { FormTextArea as $FormTextArea, FormTextAreaProps as $FormTextAreaProps } from '@twilio-paste/core';
+
+import { FormikFieldProps } from '../../interfaces';
+import { Field } from '../Field';
+
+export type FormTextAreaProps = FormikFieldProps & Omit<$FormTextAreaProps, 'value'>;
+
+export const FormTextArea = React.forwardRef(
+  (
+    { name, validate, fast, onChange: $onChange, onBlur: $onBlur, ...restProps }: FormTextAreaProps,
+    ref: React.Ref<typeof $FormTextArea>,
+  ) => (
+    <Field name={name} validate={validate} fast={fast}>
+      {({ field: { onChange, onBlur } }: FieldProps) => (
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        <$FormTextArea
+          {...restProps}
+          ref={(ref as unknown) as React.RefObject<HTMLTextAreaElement>}
+          name={name}
+          onChange={(event) => {
+            onChange(event);
+            $onChange?.(event);
+          }}
+          onBlur={(event) => {
+            onBlur(event);
+            $onBlur?.(event);
+          }}
+        />
+      )}
+    </Field>
+  ),
+);
+
+FormTextArea.displayName = 'FormTextArea';
+
+export default FormTextArea;

src/components/FormTextArea/index.ts

@@ -0,0 +1,5 @@
+import { FormTextArea } from './FormTextArea';
+
+export { FormTextArea };
+
+export default FormTextArea;

src/components/index.ts

@@ -1,4 +1,6 @@
 export * from './Checkbox';
 export * from './Field';
+export * from './FormInput';
+export * from './FormTextArea';
 export * from './Option';
 export * from './Select';