feat: add Textarea component

libs/ui/src/atoms/index.ts

@@ -1,3 +1,4 @@
 export * from './button';
 export * from './input';
 export * from './password-input';
+export * from './textarea';

libs/ui/src/atoms/textarea/index.ts

@@ -0,0 +1 @@
+export * from "./textarea";

libs/ui/src/atoms/textarea/textarea.stories.tsx

@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Textarea } from "./textarea";
+
+const meta: Meta = {
+  title: "Components/Textarea",
+  component: Textarea,
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+
+export const Large: Story = {
+  args: {
+    size: "lg",
+    placeholder: "Placeholder",
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: "md",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "sm",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    size: "md",
+    disabled: true,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    size: "md",
+    error: "Error message",
+  },
+};

libs/ui/src/atoms/textarea/textarea.tsx

@@ -0,0 +1,59 @@
+import { cn } from '@imphnen-frontend-service/utils';
+import {
+  DetailedHTMLProps,
+  FC,
+  ReactElement,
+  TextareaHTMLAttributes,
+} from 'react';
+
+type TTextareaSize = 'sm' | 'md' | 'lg';
+
+type TTextareaProps = Omit<
+  DetailedHTMLProps<
+    TextareaHTMLAttributes<HTMLTextAreaElement>,
+    HTMLTextAreaElement
+  >,
+  'size'
+> & {
+  size?: TTextareaSize;
+  error?: string;
+};
+
+const sizeClasses: Record<TTextareaSize, string> = {
+  sm: 'text-[10px]',
+  md: 'text-[12px]',
+  lg: 'text-[15px]',
+};
+
+const disabledClass = 'opacity-50 hover:border-neutral-200 cursor-not-allowed';
+const errorClass =
+  'border-danger-500 hover:border-danger-500 focus:outline-danger-500';
+
+export const Textarea: FC<TTextareaProps> = ({
+  size = 'md',
+  placeholder = 'Placeholder',
+  disabled,
+  error,
+  className,
+  ...rest
+}): ReactElement => {
+  const mergedClassName = cn(
+    'rounded-md border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 px-[12px] py-[8px] invalid:border-danger-500 invalid:text-danger-500',
+    sizeClasses[size],
+    disabled && disabledClass,
+    error && errorClass,
+    className
+  );
+  return (
+    <>
+      <textarea
+        className={mergedClassName}
+        placeholder={placeholder}
+        disabled={disabled}
+        style={{ resize: disabled ? 'none' : 'both' }}
+        {...rest}
+      ></textarea>
+      {error && <p className="text-danger-500 text-xs">{error}</p>}
+    </>
+  );
+};