From bc315ac0c679b62304518148e5e056845432b300 Mon Sep 17 00:00:00 2001
From: JoaoSaIvador <j.salvador@kigroup.de>
Date: Tue, 7 Feb 2023 16:43:16 +0000
Subject: [PATCH 1/2] refactor: textarea primitive normalization

---
 frontend/src/components/Board/AddCardOrComment.tsx          | 1 -
 .../Board/Column/partials/UpdateColumnDialog/index.tsx      | 6 +-----
 frontend/src/components/Primitives/TextArea.tsx             | 4 ----
 3 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/frontend/src/components/Board/AddCardOrComment.tsx b/frontend/src/components/Board/AddCardOrComment.tsx
index 114cfa8fd..05d2cc42b 100644
--- a/frontend/src/components/Board/AddCardOrComment.tsx
+++ b/frontend/src/components/Board/AddCardOrComment.tsx
@@ -210,7 +210,6 @@ const AddCard = React.memo<AddCardProps>(
       >
         <FormProvider {...methods}>
           <TextArea
-            floatPlaceholder={false}
             // variant={!isEmpty(cardText) ? default : undefined} }
             id="text"
             placeholder={!isDefaultText ? placeholder : 'Write your comment here...'}
diff --git a/frontend/src/components/Board/Column/partials/UpdateColumnDialog/index.tsx b/frontend/src/components/Board/Column/partials/UpdateColumnDialog/index.tsx
index 9a4d85cd0..f51c5e42d 100644
--- a/frontend/src/components/Board/Column/partials/UpdateColumnDialog/index.tsx
+++ b/frontend/src/components/Board/Column/partials/UpdateColumnDialog/index.tsx
@@ -127,11 +127,7 @@ const UpdateColumnDialog: React.FC<UpdateColumnNameProps> = ({
                   This default text will be visible as placeholder when someone is creating a new
                   card.
                 </Text>
-                <TextArea
-                  floatPlaceholder={false}
-                  id="text"
-                  placeholder={columnTextCard || 'Write your comment here...'}
-                />
+                <TextArea id="text" placeholder={columnTextCard || 'Write your comment here...'} />
               </>
             )}
             <Flex gap="16" justify="end">
diff --git a/frontend/src/components/Primitives/TextArea.tsx b/frontend/src/components/Primitives/TextArea.tsx
index caa84e84f..87bb86057 100644
--- a/frontend/src/components/Primitives/TextArea.tsx
+++ b/frontend/src/components/Primitives/TextArea.tsx
@@ -21,7 +21,6 @@ const StyledTextArea = styled('textarea', {
   },
 
   // Custom
-
   fontSize: '$16',
   lineHeight: '$20',
   resize: 'none',
@@ -76,14 +75,11 @@ const StyledTextArea = styled('textarea', {
 interface ResizableTextAreaProps {
   id: string;
   placeholder: string;
-  helperText?: string;
   disabled?: boolean;
-  floatPlaceholder?: boolean;
 }
 
 const TextArea: React.FC<ResizableTextAreaProps> = ({ id, placeholder, disabled }) => {
   TextArea.defaultProps = {
-    helperText: undefined,
     disabled: false,
   };
 

From 9f4a7c38983528e5f2125f23116e944ef4b6f920 Mon Sep 17 00:00:00 2001
From: JoaoSaIvador <j.salvador@kigroup.de>
Date: Tue, 7 Feb 2023 16:45:45 +0000
Subject: [PATCH 2/2] feat: textarea story

---
 frontend/src/stories/TextArea.stories.tsx | 66 +++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 frontend/src/stories/TextArea.stories.tsx

diff --git a/frontend/src/stories/TextArea.stories.tsx b/frontend/src/stories/TextArea.stories.tsx
new file mode 100644
index 000000000..873b65955
--- /dev/null
+++ b/frontend/src/stories/TextArea.stories.tsx
@@ -0,0 +1,66 @@
+import React, { VFC, ReactNode } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import TextArea from '@/components/Primitives/TextArea';
+
+export default {
+  title: 'Primitives/TextArea',
+  component: TextArea,
+  parameters: {
+    controls: {
+      expanded: true,
+      exclude: ['ref', 'as', 'css'],
+      sort: 'requiredFirst',
+    },
+    docs: {
+      description: {
+        component:
+          'The border color of the TextArea component is controlled by the react hook form validator that is used.',
+      },
+    },
+  },
+  args: {
+    placeholder: 'Some text...',
+  },
+  argTypes: {
+    id: {
+      control: false,
+    },
+    placeholder: {
+      control: false,
+      description: 'Placeholder text that appears in the textarea',
+      table: {
+        type: { summary: 'string' },
+      },
+      defaultValue: false,
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'Disable the textarea.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+      defaultValue: false,
+    },
+  },
+};
+
+const StorybookFormProvider: VFC<{ children: ReactNode }> = ({ children }) => {
+  const methods = useForm();
+  return (
+    <FormProvider {...methods}>
+      <form>{children}</form>
+    </FormProvider>
+  );
+};
+
+const Template: ComponentStory<typeof TextArea> = ({ placeholder, disabled }) => (
+  <StorybookFormProvider>
+    <TextArea id="text" placeholder={placeholder} disabled={disabled} />
+  </StorybookFormProvider>
+);
+
+export const Default = Template.bind({});
+Default.storyName = 'Basic Usage';