From 35f1f7705a3358abdabbbe82495b2bcd3128e368 Mon Sep 17 00:00:00 2001
From: Dimitris Giannaris <mtsgiannaris@gmail.com>
Date: Tue, 19 Nov 2024 11:36:30 +0200
Subject: [PATCH] Introduce TextAreaField to symbiosis (#21)

* fix: numberfield with icon styles

* feat(NumberField): add icon, onChange, and onBlur props to Storybook controls

Enhances the Storybook documentation for the NumberField component by adding controls for the icon prop and descriptions for onChange and onBlur event handlers. This improvement provides better visibility and understanding of the component's capabilities for developers using Storybook.

* feat(ui): add TextAreaField component

Introduces a new TextAreaField component to the UI package, providing a customizable textarea input with various features such as error handling, hints, icons, and accessibility support. This component enhances form functionality by offering a multi-line text input option with consistent styling and behavior across the application.

* feat(storybook): add TextAreaField component stories

Introduces a new set of stories for the TextAreaField component in Storybook. This addition enhances the documentation and testing capabilities for the TextAreaField, providing various examples of its usage and configurations. The stories showcase different states and properties of the component, including default, error, hint, icon, disabled, and controlled scenarios, which will help developers understand and utilize the component more effectively.
---
 .../src/stories/NumberField.stories.tsx       |  29 ++
 .../src/stories/TextAreaField.stories.tsx     | 263 ++++++++++++++++++
 .../ui/src/components/NumberField/index.tsx   |   2 +-
 .../ui/src/components/TextAreaField/index.tsx | 100 +++++++
 .../ui/src/components/TextAreaField/styles.ts |  64 +++++
 .../ui/src/components/TextAreaField/types.ts  |  19 ++
 packages/ui/src/index.ts                      |   4 +
 7 files changed, 480 insertions(+), 1 deletion(-)
 create mode 100644 examples/storybook/src/stories/TextAreaField.stories.tsx
 create mode 100644 packages/ui/src/components/TextAreaField/index.tsx
 create mode 100644 packages/ui/src/components/TextAreaField/styles.ts
 create mode 100644 packages/ui/src/components/TextAreaField/types.ts

diff --git a/examples/storybook/src/stories/NumberField.stories.tsx b/examples/storybook/src/stories/NumberField.stories.tsx
index 3a510cf..8055f5d 100644
--- a/examples/storybook/src/stories/NumberField.stories.tsx
+++ b/examples/storybook/src/stories/NumberField.stories.tsx
@@ -131,6 +131,35 @@ const meta: Meta<NumberFieldProps> = {
         },
       },
     },
+    icon: {
+      control: {
+        type: "text",
+      },
+      description: "Icon name for the input field",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    onChange: {
+      control: false,
+      description: "Event handler called when the value changes",
+      table: {
+        type: {
+          summary: "(value: string) => void",
+        },
+      },
+    },
+    onBlur: {
+      control: false,
+      description: "Event handler called when the field loses focus",
+      table: {
+        type: {
+          summary: "(value: string) => void",
+        },
+      },
+    },
   },
 };
 
diff --git a/examples/storybook/src/stories/TextAreaField.stories.tsx b/examples/storybook/src/stories/TextAreaField.stories.tsx
new file mode 100644
index 0000000..a51add5
--- /dev/null
+++ b/examples/storybook/src/stories/TextAreaField.stories.tsx
@@ -0,0 +1,263 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { TextAreaField, type TextAreaFieldProps } from "@synopsisapp/symbiosis-ui";
+
+const meta: Meta<TextAreaFieldProps> = {
+  title: "Components/TextAreaField",
+  component: TextAreaField,
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      control: {
+        type: "text",
+      },
+      description: "Label for the TextAreaField",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    defaultValue: {
+      control: {
+        type: "text",
+      },
+      description: "Default value for the textarea field",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    error: {
+      control: {
+        type: "text",
+      },
+      description: "Error message for the textarea field",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    required: {
+      control: {
+        type: "boolean",
+      },
+      description: "Whether the textarea field is required",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    value: {
+      control: {
+        type: "text",
+      },
+      description: "Value of the TextAreaField",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    hint: {
+      control: {
+        type: "text",
+      },
+      description: "Hint text for the TextAreaField",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    placeholder: {
+      control: {
+        type: "text",
+      },
+      description: "Placeholder text for the TextAreaField",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    icon: {
+      control: {
+        type: "text",
+      },
+      description: "Icon name for the textarea field",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    disabled: {
+      control: {
+        type: "boolean",
+      },
+      description: "Whether the TextAreaField is disabled",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    rows: {
+      control: {
+        type: "number",
+      },
+      description: "Number of visible text lines",
+      table: {
+        type: {
+          summary: "number",
+        },
+      },
+    },
+    onChange: {
+      control: false,
+      description: "Event handler called when the value changes",
+      table: {
+        type: {
+          summary: "(value: string) => void",
+        },
+      },
+    },
+    onBlur: {
+      control: false,
+      description: "Event handler called when the field loses focus",
+      table: {
+        type: {
+          summary: "(value: string) => void",
+        },
+      },
+    },
+    name: {
+      control: {
+        type: "text",
+      },
+      description: "Name of the textarea field",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    id: {
+      control: {
+        type: "text",
+      },
+      description: "ID of the textarea field",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<TextAreaFieldProps>;
+
+export const Default: Story = {
+  render: (args) => <TextAreaField {...args} />,
+  args: {
+    label: "Default TextAreaField",
+    placeholder: "Enter text here...",
+    rows: 4,
+  },
+};
+
+export const WithError: Story = {
+  render: (args) => <TextAreaField {...args} />,
+  args: {
+    label: "TextAreaField with Error",
+    error: "This field is required",
+    required: true,
+    rows: 4,
+  },
+};
+
+export const WithHint: Story = {
+  render: (args) => <TextAreaField {...args} />,
+  args: {
+    label: "TextAreaField with Hint",
+    hint: "This is a helpful hint message",
+    rows: 4,
+  },
+};
+
+export const WithIcon: Story = {
+  render: (args) => <TextAreaField {...args} />,
+  args: {
+    label: "TextAreaField with Icon",
+    icon: "symbiosis-minus",
+    placeholder: "Type your message...",
+    rows: 4,
+  },
+};
+
+export const Disabled: Story = {
+  render: (args) => <TextAreaField {...args} />,
+  args: {
+    label: "Disabled TextAreaField",
+    disabled: true,
+    placeholder: "This field is disabled",
+    rows: 4,
+  },
+};
+
+export const DifferentRows: Story = {
+  render: (args) => (
+    <>
+      <TextAreaField {...args} rows={2} label="2 Rows" />
+      <TextAreaField {...args} rows={4} label="4 Rows" />
+      <TextAreaField {...args} rows={6} label="6 Rows" />
+    </>
+  ),
+  args: {
+    placeholder: "Enter text here...",
+  },
+};
+
+export const Controlled: Story = {
+  render: (args) => {
+    const [value, setValue] = React.useState("");
+
+    return <TextAreaField {...args} value={value} onChange={setValue} />;
+  },
+  args: {
+    label: "Controlled TextAreaField",
+    placeholder: "Type something...",
+    rows: 4,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+const ControlledTextAreaField = () => {
+  const [value, setValue] = React.useState("");
+
+  return <TextAreaField label="Controlled TextAreaField" placeholder="Type something..." rows={4} value={value} onChange={setValue} />;
+}
+`,
+        language: "tsx",
+        type: "code",
+      },
+    },
+  },
+};
+
+export const CustomStyled: Story = {
+  render: (args) => <TextAreaField {...args} className="[&>div[data-symbiosis-textAreaField='hint']]:text-red-300" />,
+  args: {
+    label: "Custom Styled TextAreaField",
+    placeholder: "Enter text here...",
+    hint: "This is a custom styled hint",
+    rows: 4,
+  },
+};
diff --git a/packages/ui/src/components/NumberField/index.tsx b/packages/ui/src/components/NumberField/index.tsx
index 5723726..2cbb2f3 100644
--- a/packages/ui/src/components/NumberField/index.tsx
+++ b/packages/ui/src/components/NumberField/index.tsx
@@ -110,7 +110,7 @@ export const NumberField = ({
               tone="monochrome-dark"
               size="small-100"
               isDisabled={disabled}
-              className="focus:before:border-none"
+              className={cn("focus:before:border-none", icon ? "left-6" : "left-0")}
             />
             {icon && (
               <Icon
diff --git a/packages/ui/src/components/TextAreaField/index.tsx b/packages/ui/src/components/TextAreaField/index.tsx
new file mode 100644
index 0000000..cac4984
--- /dev/null
+++ b/packages/ui/src/components/TextAreaField/index.tsx
@@ -0,0 +1,100 @@
+import * as React from "react";
+import { Icon } from "../Icon";
+import { cn } from "../../utils/cn";
+import { Text } from "../Text";
+
+import type { TextAreaFieldProps } from "./types";
+import { inputLabel, input } from "./styles";
+
+export const TextAreaField = ({
+  error,
+  required,
+  value,
+  hint,
+  placeholder,
+  icon,
+  disabled,
+  onChange,
+  defaultValue,
+  name,
+  rows = 3,
+  id,
+  label,
+  onBlur,
+  className,
+}: TextAreaFieldProps) => {
+  const formId = id ?? label ?? "";
+  const ref = React.useRef<HTMLTextAreaElement>(null);
+
+  const hasError = Boolean(error);
+
+  return (
+    <div className={cn("flex flex-col w-full gap-1", className)}>
+      {label && (
+        <label
+          htmlFor={formId}
+          data-symbiosis-textAreaField="label"
+          className={cn(inputLabel({ size: "small-100" }), "m-0")}
+        >
+          {label}
+        </label>
+      )}
+      <div className="flex items-center gap-1 relative flex-1">
+        <div className="h-auto flex-1 flex">
+          {icon && (
+            <Icon
+              data-symbiosis-textAreaField="icon"
+              name={icon}
+              className="absolute left-2 top-3 translate-y-[5px] z-10 text-grays-500"
+              size="small-200"
+            />
+          )}
+          <textarea
+            data-symbiosis-textAreaField="input"
+            id={formId}
+            name={name}
+            className={cn(
+              input({
+                size: "base",
+                variant: hasError ? "error" : "default",
+              }),
+              "h-auto",
+              "flex-1",
+              icon && "pl-6",
+            )}
+            ref={ref}
+            defaultValue={defaultValue}
+            placeholder={placeholder}
+            value={value}
+            aria-label={id}
+            disabled={disabled}
+            required={required}
+            onChange={(e) => {
+              onChange?.(e.target.value);
+            }}
+            onBlur={(e) => {
+              onBlur?.(e.target.value);
+            }}
+            rows={rows}
+          />
+        </div>
+      </div>
+      {hasError && (
+        <div className="flex gap-1 items-center" data-symbiosis-textAreaField="error">
+          <Icon name="symbiosis-exclamation-circle" size="small-200" className="text-red-600" />
+          <Text noTranslations variant="body-small-200" className="m-0 text-red-600">
+            {error}
+          </Text>
+        </div>
+      )}
+      {!hasError && hint && (
+        <div className="flex gap-1 items-center text-slate-400" data-symbiosis-textAreaField="hint">
+          <Icon name="symbiosis-exclamation-circle" size="small-200" className="text-inherit" />
+          <Text noTranslations variant="body-small-200" className="m-0 text-inherit">
+            {hint}
+          </Text>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/TextAreaField/styles.ts b/packages/ui/src/components/TextAreaField/styles.ts
new file mode 100644
index 0000000..1036817
--- /dev/null
+++ b/packages/ui/src/components/TextAreaField/styles.ts
@@ -0,0 +1,64 @@
+import { cn } from "../../utils/cn";
+import { cva, type VariantProps } from "class-variance-authority";
+import { buttonHeightSizing } from "../Button/styles";
+import { text } from "../Text/styles";
+
+export interface InputLabelVariants extends VariantProps<typeof inputLabelCva> {}
+const inputLabelCva = cva([], {
+  variants: {
+    size: {
+      "small-200": [text({ variant: "body-small-200" })],
+      "small-100": [text({ variant: "body-small-100" })],
+      base: [text({ variant: "body-base" })],
+      "large-100": [text({ variant: "body-large-100" })],
+    },
+  },
+});
+
+export const inputLabel = ({ size = "small-100", ...rest }: InputLabelVariants) => cn(inputLabelCva({ size, ...rest }));
+
+export const input = ({ variant = "default", ...rest }: InputVariants) => cn(inputCva({ variant, ...rest }));
+export interface InputVariants extends VariantProps<typeof inputCva> {}
+const inputCva = cva(
+  [
+    "justify-center p-3 rounded-md items-center border border-slate-400 bg-inherit",
+    "relative",
+    "!m-0 flex items-center outline-none",
+    "disabled:border-gray-400 disabled:text-gray-400",
+    "focus-within:ring-2 focus-within:ring-offset-1",
+    "placeholder-slate-400",
+  ],
+  {
+    variants: {
+      variant: {
+        default: ["focus-within:border-mainColors-base focus-within:ring-mainColors-base"],
+        error: ["text-red-500 border-red-500 focus-within:ring-red-500"],
+      },
+      size: {
+        "small-200": [buttonHeightSizing({ size: "small-200" }), "p-2"],
+        "small-100": [buttonHeightSizing({ size: "small-100" })],
+        base: [buttonHeightSizing({ size: "base" })],
+        "large-100": [buttonHeightSizing({ size: "large-100" })],
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "default",
+        size: ["small-200"],
+        className: [text({ variant: "body-small-200" })],
+      },
+      {
+        variant: "default",
+        size: ["small-100", "base"],
+        className: [text({ variant: "body-small-100" })],
+      },
+      {
+        variant: "default",
+        size: ["large-100"],
+        className: [text({ variant: "body-base" })],
+      },
+    ],
+  },
+);
+
+
diff --git a/packages/ui/src/components/TextAreaField/types.ts b/packages/ui/src/components/TextAreaField/types.ts
new file mode 100644
index 0000000..2097692
--- /dev/null
+++ b/packages/ui/src/components/TextAreaField/types.ts
@@ -0,0 +1,19 @@
+import type { IconProps } from "../Icon/types";
+
+export type TextAreaFieldProps = {
+  label?: string;
+  error?: string;
+  required?: boolean;
+  value?: string;
+  hint?: string;
+  placeholder?: string;
+  icon?: IconProps["name"];
+  disabled?: boolean;
+  onChange?: (value: string) => void;
+  onBlur?: (value: string) => void;
+  name?: string;
+  defaultValue?: string;
+  rows?: number;
+  id?: string;
+  className?: string;
+};
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 3b82e3a..47ca0a1 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -85,3 +85,7 @@ export type { TextFieldProps } from "./components/TextField/types";
 export { NumberField } from "./components/NumberField";
 export * from "./components/NumberField/types";
 export type { NumberFieldProps } from "./components/NumberField/types";
+
+export { TextAreaField } from "./components/TextAreaField";
+export * from "./components/TextAreaField/types";
+export type { TextAreaFieldProps } from "./components/TextAreaField/types";