feat: textarea primitive story

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...'}

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">

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,
   };
 

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';