From b92907aca6a6362d557678c0199715e313cb8dd8 Mon Sep 17 00:00:00 2001
From: akhilmhdh <akhilmhdh@gmail.com>
Date: Sun, 22 Jan 2023 15:05:24 +0530
Subject: [PATCH] feat(ui): added textarea component

---
 .../v2/TextArea/TextArea.stories.tsx          | 48 ++++++++++++
 .../src/components/v2/TextArea/TextArea.tsx   | 74 +++++++++++++++++++
 frontend/src/components/v2/TextArea/index.tsx |  2 +
 frontend/src/components/v2/index.tsx          |  1 +
 4 files changed, 125 insertions(+)
 create mode 100644 frontend/src/components/v2/TextArea/TextArea.stories.tsx
 create mode 100644 frontend/src/components/v2/TextArea/TextArea.tsx
 create mode 100644 frontend/src/components/v2/TextArea/index.tsx

diff --git a/frontend/src/components/v2/TextArea/TextArea.stories.tsx b/frontend/src/components/v2/TextArea/TextArea.stories.tsx
new file mode 100644
index 000000000..9edff4789
--- /dev/null
+++ b/frontend/src/components/v2/TextArea/TextArea.stories.tsx
@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TextArea } from './TextArea';
+
+const meta: Meta<typeof TextArea> = {
+  title: 'Components/TextArea',
+  component: TextArea,
+  tags: ['v2'],
+  argTypes: {
+    placeholder: {
+      defaultValue: 'Type anything',
+      type: 'string'
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Filled: Story = {
+  args: {}
+};
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline'
+  }
+};
+
+export const Plain: Story = {
+  args: {
+    variant: 'plain'
+  }
+};
+
+export const Error: Story = {
+  args: {
+    isError: true
+  }
+};
+
+export const AutoWidth: Story = {
+  args: {
+    isFullWidth: false,
+    className: 'w-auto'
+  }
+};
diff --git a/frontend/src/components/v2/TextArea/TextArea.tsx b/frontend/src/components/v2/TextArea/TextArea.tsx
new file mode 100644
index 000000000..1ed599235
--- /dev/null
+++ b/frontend/src/components/v2/TextArea/TextArea.tsx
@@ -0,0 +1,74 @@
+import { forwardRef, TextareaHTMLAttributes } from 'react';
+import { cva, VariantProps } from 'cva';
+import { twMerge } from 'tailwind-merge';
+
+type Props = {
+  placeholder?: string;
+  isFullWidth?: boolean;
+  isRequired?: boolean;
+  reSize?: 'none' | 'both' | 'vertical' | 'horizontal';
+};
+
+const textAreaVariants = cva(
+  'textarea w-full p-2 border border-solid text-gray-400 placeholder-gray-500 placeholder-opacity-50',
+  {
+    variants: {
+      size: {
+        xs: ['text-xs'],
+        sm: ['text-sm'],
+        md: ['text-md'],
+        lg: ['text-lg']
+      },
+      isRounded: {
+        true: ['rounded-md'],
+        false: ''
+      },
+      variant: {
+        filled: ['bg-bunker-800', 'text-gray-400'],
+        outline: ['bg-transparent'],
+        plain: 'bg-transparent outline-none'
+      },
+      isError: {
+        true: 'focus:ring-red/50 placeholder-red-300 border-red',
+        false: 'focus:ring-primary/50 border-mineshaft-400'
+      }
+    },
+    compoundVariants: [
+      {
+        variant: 'plain',
+        isError: [true, false],
+        className: 'border-none'
+      }
+    ]
+  }
+);
+
+export type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> &
+  VariantProps<typeof textAreaVariants> &
+  Props;
+
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  (
+    {
+      className,
+      isRounded = true,
+      isError = false,
+      isRequired,
+      variant = 'filled',
+      size = 'md',
+      reSize = 'both',
+      ...props
+    },
+    ref
+  ): JSX.Element => (
+    <textarea
+      {...props}
+      style={{ resize: reSize }}
+      required={isRequired}
+      ref={ref}
+      className={twMerge(textAreaVariants({ className, isError, size, isRounded, variant }))}
+    />
+  )
+);
+
+TextArea.displayName = 'TextArea';
diff --git a/frontend/src/components/v2/TextArea/index.tsx b/frontend/src/components/v2/TextArea/index.tsx
new file mode 100644
index 000000000..fd8e89534
--- /dev/null
+++ b/frontend/src/components/v2/TextArea/index.tsx
@@ -0,0 +1,2 @@
+export type { TextAreaProps } from './TextArea';
+export { TextArea } from './TextArea';
diff --git a/frontend/src/components/v2/index.tsx b/frontend/src/components/v2/index.tsx
index 401a02e94..0fbed1e22 100644
--- a/frontend/src/components/v2/index.tsx
+++ b/frontend/src/components/v2/index.tsx
@@ -6,3 +6,4 @@ export * from './Input';
 export * from './Menu';
 export * from './Modal';
 export * from './Select';
+export * from './TextArea';