From 5a717294630ed7bec9384639fe2591d315ac1469 Mon Sep 17 00:00:00 2001
From: Sam Ferrero <ferrerocompanylimited@gmail.com>
Date: Sun, 8 Oct 2023 14:14:31 +0200
Subject: [PATCH 01/13] feat(textArea): adding textare and textarea field

---
 .../src/components/TextArea/CopyButton.tsx    |  46 ++++++
 .../src/components/TextArea/TextArea.css.ts   | 151 ++++++++++++++++++
 .../components/TextArea/TextArea.stories.tsx  |  91 +++++++++++
 .../src/components/TextArea/TextArea.test.tsx |  12 ++
 .../src/components/TextArea/TextArea.tsx      |  69 ++++++++
 .../src/components/TextArea/TextAreaField.tsx |  26 +++
 .../react-ui/src/components/TextArea/index.ts |   1 +
 .../components/TextAreaField/TextArea.css.ts  | 151 ++++++++++++++++++
 .../TextAreaField/TextArea.stories.tsx        |  91 +++++++++++
 .../TextAreaField/TextArea.test.tsx           |  12 ++
 .../src/components/TextAreaField/TextArea.tsx |  69 ++++++++
 .../TextAreaField/TextAreaField.tsx           |  26 +++
 .../src/components/TextAreaField/index.ts     |   1 +
 .../libs/react-ui/src/components/index.ts     |   2 +
 .../libs/react-ui/src/styles/sprinkles.css.ts |   6 +
 15 files changed, 754 insertions(+)
 create mode 100644 packages/libs/react-ui/src/components/TextArea/CopyButton.tsx
 create mode 100644 packages/libs/react-ui/src/components/TextArea/TextArea.css.ts
 create mode 100644 packages/libs/react-ui/src/components/TextArea/TextArea.stories.tsx
 create mode 100644 packages/libs/react-ui/src/components/TextArea/TextArea.test.tsx
 create mode 100644 packages/libs/react-ui/src/components/TextArea/TextArea.tsx
 create mode 100644 packages/libs/react-ui/src/components/TextArea/TextAreaField.tsx
 create mode 100644 packages/libs/react-ui/src/components/TextArea/index.ts
 create mode 100644 packages/libs/react-ui/src/components/TextAreaField/TextArea.css.ts
 create mode 100644 packages/libs/react-ui/src/components/TextAreaField/TextArea.stories.tsx
 create mode 100644 packages/libs/react-ui/src/components/TextAreaField/TextArea.test.tsx
 create mode 100644 packages/libs/react-ui/src/components/TextAreaField/TextArea.tsx
 create mode 100644 packages/libs/react-ui/src/components/TextAreaField/TextAreaField.tsx
 create mode 100644 packages/libs/react-ui/src/components/TextAreaField/index.ts

diff --git a/packages/libs/react-ui/src/components/TextArea/CopyButton.tsx b/packages/libs/react-ui/src/components/TextArea/CopyButton.tsx
new file mode 100644
index 0000000000..9962be29b4
--- /dev/null
+++ b/packages/libs/react-ui/src/components/TextArea/CopyButton.tsx
@@ -0,0 +1,46 @@
+import { copyButtonClass } from './TextArea.css';
+
+import { IconButton } from '@components/IconButton';
+import type { FC } from 'react';
+import React, { useState } from 'react';
+
+export interface ICopyButtonProps
+  extends Omit<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    'color' | 'className'
+  > {
+  shouldShow: boolean;
+  value: string;
+}
+
+export const CopyButton: FC<ICopyButtonProps> = ({
+  shouldShow,
+  value,
+  ...restProps
+}) => {
+  const [copied, setCopied] = useState<boolean>(false);
+
+  const handleClick = async (): Promise<void> => {
+    await navigator.clipboard.writeText(value);
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 1000);
+  };
+
+  return (
+    shouldShow && (
+      <>
+        <div className={copyButtonClass}>
+          <IconButton
+            color={'primary'}
+            icon={copied ? 'Check' : 'ContentCopy'}
+            onClick={handleClick}
+            title={'ContentCopy'}
+            {...restProps}
+          />
+        </div>
+      </>
+    )
+  );
+};
diff --git a/packages/libs/react-ui/src/components/TextArea/TextArea.css.ts b/packages/libs/react-ui/src/components/TextArea/TextArea.css.ts
new file mode 100644
index 0000000000..726b117973
--- /dev/null
+++ b/packages/libs/react-ui/src/components/TextArea/TextArea.css.ts
@@ -0,0 +1,151 @@
+import { statusColor } from '../InputWrapper/InputWrapper.css';
+
+import { sprinkles } from '@theme/sprinkles.css';
+import { darkThemeClass, vars } from '@theme/vars.css';
+import { fallbackVar, style, styleVariants } from '@vanilla-extract/css';
+
+export const containerClass = style([
+  sprinkles({
+    alignItems: 'stretch',
+    borderRadius: '$sm',
+    display: 'flex',
+    color: '$foreground',
+    overflow: 'hidden',
+    lineHeight: '$lg',
+    bg: {
+      lightMode: '$white',
+      darkMode: '$gray100',
+    },
+  }),
+  {
+    position: 'relative',
+    borderBottom: `1px solid ${fallbackVar(statusColor, vars.colors.$gray30)}`,
+    selectors: {
+      [`${darkThemeClass} &`]: {
+        borderBottom: `1px solid ${fallbackVar(
+          statusColor,
+          vars.colors.$gray60,
+        )}`,
+      },
+      '.inputGroup &': {
+        borderRadius: 0,
+      },
+      '.inputGroup &:first-child': {
+        borderTopRightRadius: vars.radii.$sm,
+        borderTopLeftRadius: vars.radii.$sm,
+      },
+      '.inputGroup &:last-child': {
+        borderBottomRightRadius: vars.radii.$sm,
+        borderBottomLeftRadius: vars.radii.$sm,
+      },
+    },
+  },
+]);
+
+export const disabledClass = style([
+  sprinkles({
+    pointerEvents: 'none',
+    bg: {
+      darkMode: '$gray60',
+      lightMode: '$gray20',
+    },
+  }),
+  {
+    opacity: 0.4,
+    selectors: {
+      '.inputGroup &': {
+        opacity: 1,
+      },
+      [`${darkThemeClass} &`]: {
+        backgroundColor: vars.colors.$gray60, // NOTE: this is to override the normal bg color
+      },
+    },
+  },
+]);
+
+export const copyButtonClass = style([
+  sprinkles({
+    position: 'absolute',
+    top: 0,
+    right: '$2',
+    backgroundColor: 'transparent',
+    fontSize: '$base',
+    border: 'none',
+    padding: '$1',
+    cursor: 'pointer',
+  }),
+]);
+
+export const inputContainerClass = style([
+  sprinkles({
+    position: 'relative',
+    alignItems: 'center',
+    display: 'flex',
+    flexGrow: 1,
+    gap: '$2',
+    lineHeight: '$lg',
+    paddingX: '$4',
+  }),
+]);
+
+export const inputClass = style([
+  sprinkles({
+    alignItems: 'center',
+    background: 'none',
+    border: 'none',
+    color: '$foreground',
+    outline: 'none',
+    flexGrow: 1,
+    paddingY: '$2',
+    minHeight: '$20',
+  }),
+  {
+    resize: 'none',
+    '::placeholder': {
+      color: vars.colors.$gray40,
+    },
+    [`${darkThemeClass} &::placeholder`]: {
+      color: vars.colors.$gray50,
+    },
+  },
+]);
+
+export const leadingTextClass = style([
+  sprinkles({
+    overflow: 'hidden',
+    display: 'inline-block',
+    minWidth: 0,
+    alignItems: 'center',
+    paddingX: '$4',
+  }),
+  {
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+]);
+
+export const leadingTextWrapperClass = style([
+  sprinkles({
+    backgroundColor: {
+      lightMode: '$gray20',
+      darkMode: '$gray60',
+    },
+    display: 'flex',
+    alignItems: 'center',
+  }),
+]);
+
+export const leadingTextWidthVariant = styleVariants(vars.sizes, (size) => {
+  return {
+    width: size,
+  };
+});
+
+export const outlinedClass = style([
+  sprinkles({
+    borderRadius: '$sm',
+  }),
+  {
+    border: `1px solid ${vars.colors.$neutral3}`,
+  },
+]);
diff --git a/packages/libs/react-ui/src/components/TextArea/TextArea.stories.tsx b/packages/libs/react-ui/src/components/TextArea/TextArea.stories.tsx
new file mode 100644
index 0000000000..1247a73d39
--- /dev/null
+++ b/packages/libs/react-ui/src/components/TextArea/TextArea.stories.tsx
@@ -0,0 +1,91 @@
+import { TextAreaField } from './TextAreaField';
+
+import type { SystemIcon } from '@components/Icon';
+import type { ITextareaProps } from '@components/TextArea';
+import { Textarea } from '@components/TextArea';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+const meta: Meta<ITextareaProps> = {
+  title: 'Form/TextArea',
+  component: Textarea,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The TextArea component is a wrapper around the native textArea element that provides the ability to add additional information.',
+      },
+    },
+  },
+  argTypes: {
+    disabled: {
+      description: 'Disables the textArea and applies visual styling.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    hasCopyButton: {
+      description:
+        'Icon rendered inside the textArea to the right of the input text.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<
+  {
+    leadingText: string;
+    rightIcon: keyof typeof SystemIcon;
+    type: React.HTMLInputTypeAttribute;
+  } & ITextareaProps
+>;
+
+export const TextAreaStory: Story = {
+  name: 'TextArea config',
+  args: {
+    disabled: false,
+    hasCopyButton: true,
+    fontFamily: '$mono',
+  },
+  render: ({ disabled, hasCopyButton, fontFamily }) => (
+    <Textarea
+      id="inlineInputStory"
+      disabled={disabled}
+      hasCopyButton={hasCopyButton}
+      fontFamily={fontFamily}
+      placeholder="This is a placeholder"
+    />
+  ),
+};
+
+export const TextFieldStory: Story = {
+  name: 'TextField config',
+  args: {
+    disabled: false,
+    hasCopyButton: true,
+    fontFamily: '$mono',
+  },
+  render: ({ disabled, hasCopyButton, fontFamily }) => (
+    <TextAreaField
+      disabled={disabled}
+      textAreaProps={{
+        hasCopyButton,
+        id: 'TextFieldStory',
+        fontFamily,
+        placeholder: 'This is a placeholder',
+      }}
+    />
+  ),
+};
diff --git a/packages/libs/react-ui/src/components/TextArea/TextArea.test.tsx b/packages/libs/react-ui/src/components/TextArea/TextArea.test.tsx
new file mode 100644
index 0000000000..897efc9289
--- /dev/null
+++ b/packages/libs/react-ui/src/components/TextArea/TextArea.test.tsx
@@ -0,0 +1,12 @@
+import { Input } from '@components/Input';
+import { render } from '@testing-library/react';
+import React from 'react';
+
+describe('Input', () => {
+  test('renders correctly', () => {
+    const { getByTestId } = render(<Input id="test-input" />);
+
+    const inputContainer = getByTestId('kda-input');
+    expect(inputContainer).toBeInTheDocument();
+  });
+});
diff --git a/packages/libs/react-ui/src/components/TextArea/TextArea.tsx b/packages/libs/react-ui/src/components/TextArea/TextArea.tsx
new file mode 100644
index 0000000000..edac3b5324
--- /dev/null
+++ b/packages/libs/react-ui/src/components/TextArea/TextArea.tsx
@@ -0,0 +1,69 @@
+import { CopyButton } from './CopyButton';
+import {
+  containerClass,
+  disabledClass,
+  inputClass,
+  inputContainerClass,
+  outlinedClass,
+} from './TextArea.css';
+
+import type { Sprinkles } from '@theme/sprinkles.css';
+import { sprinkles } from '@theme/sprinkles.css';
+import classNames from 'classnames';
+import type { FC, TextareaHTMLAttributes } from 'react';
+import React, { forwardRef, useState } from 'react';
+
+export interface ITextareaProps
+  extends Omit<
+      TextareaHTMLAttributes<HTMLTextAreaElement>,
+      'as' | 'disabled' | 'children' | 'className' | 'id'
+    >,
+    Partial<Pick<Sprinkles, 'fontFamily'>> {
+  disabled?: boolean;
+  ref?: React.ForwardedRef<HTMLTextAreaElement>;
+  id: string;
+  outlined?: boolean;
+  hasCopyButton?: boolean;
+}
+
+export const Textarea: FC<ITextareaProps> = forwardRef<
+  HTMLTextAreaElement,
+  ITextareaProps
+>(function TextArea(props, ref) {
+  const {
+    outlined,
+    hasCopyButton = false,
+    disabled = false,
+    fontFamily,
+    ...rest
+  } = props;
+  const [textAreaValue, setTextAreaValue] = useState<string>('');
+
+  const handleValueChange = (
+    event: React.ChangeEvent<HTMLTextAreaElement>,
+  ): void => {
+    setTextAreaValue(event.target.value);
+  };
+
+  return (
+    <div
+      className={classNames(containerClass, {
+        [outlinedClass]: outlined,
+        [disabledClass]: disabled,
+      })}
+      data-testid="kda-textarea"
+    >
+      <div className={inputContainerClass}>
+        <textarea
+          ref={ref}
+          className={classNames(inputClass, sprinkles({ fontFamily }))}
+          disabled={disabled}
+          onChange={handleValueChange}
+          value={textAreaValue}
+          {...rest}
+        />
+        <CopyButton shouldShow={hasCopyButton} value={textAreaValue} />
+      </div>
+    </div>
+  );
+});
diff --git a/packages/libs/react-ui/src/components/TextArea/TextAreaField.tsx b/packages/libs/react-ui/src/components/TextArea/TextAreaField.tsx
new file mode 100644
index 0000000000..ab5a18c6a1
--- /dev/null
+++ b/packages/libs/react-ui/src/components/TextArea/TextAreaField.tsx
@@ -0,0 +1,26 @@
+import type { ITextareaProps } from './TextArea';
+import { Textarea } from './TextArea';
+
+import type { IInputWrapperProps } from '@components/InputWrapper';
+import { InputWrapper } from '@components/InputWrapper';
+import type { FC } from 'react';
+import React from 'react';
+
+export interface ITextAreaFieldProps
+  extends Omit<IInputWrapperProps, 'htmlFor' | 'children'> {
+  textAreaProps: Omit<ITextareaProps, 'disabled'>;
+}
+
+export const TextAreaField: FC<ITextAreaFieldProps> = ({
+  disabled = false,
+  textAreaProps,
+  ...rest
+}) => {
+  const { id } = textAreaProps;
+
+  return (
+    <InputWrapper htmlFor={id} disabled={disabled} {...rest}>
+      <Textarea disabled={disabled} {...textAreaProps} />
+    </InputWrapper>
+  );
+};
diff --git a/packages/libs/react-ui/src/components/TextArea/index.ts b/packages/libs/react-ui/src/components/TextArea/index.ts
new file mode 100644
index 0000000000..87068141f4
--- /dev/null
+++ b/packages/libs/react-ui/src/components/TextArea/index.ts
@@ -0,0 +1 @@
+export { type ITextareaProps, Textarea } from './TextArea';
diff --git a/packages/libs/react-ui/src/components/TextAreaField/TextArea.css.ts b/packages/libs/react-ui/src/components/TextAreaField/TextArea.css.ts
new file mode 100644
index 0000000000..726b117973
--- /dev/null
+++ b/packages/libs/react-ui/src/components/TextAreaField/TextArea.css.ts
@@ -0,0 +1,151 @@
+import { statusColor } from '../InputWrapper/InputWrapper.css';
+
+import { sprinkles } from '@theme/sprinkles.css';
+import { darkThemeClass, vars } from '@theme/vars.css';
+import { fallbackVar, style, styleVariants } from '@vanilla-extract/css';
+
+export const containerClass = style([
+  sprinkles({
+    alignItems: 'stretch',
+    borderRadius: '$sm',
+    display: 'flex',
+    color: '$foreground',
+    overflow: 'hidden',
+    lineHeight: '$lg',
+    bg: {
+      lightMode: '$white',
+      darkMode: '$gray100',
+    },
+  }),
+  {
+    position: 'relative',
+    borderBottom: `1px solid ${fallbackVar(statusColor, vars.colors.$gray30)}`,
+    selectors: {
+      [`${darkThemeClass} &`]: {
+        borderBottom: `1px solid ${fallbackVar(
+          statusColor,
+          vars.colors.$gray60,
+        )}`,
+      },
+      '.inputGroup &': {
+        borderRadius: 0,
+      },
+      '.inputGroup &:first-child': {
+        borderTopRightRadius: vars.radii.$sm,
+        borderTopLeftRadius: vars.radii.$sm,
+      },
+      '.inputGroup &:last-child': {
+        borderBottomRightRadius: vars.radii.$sm,
+        borderBottomLeftRadius: vars.radii.$sm,
+      },
+    },
+  },
+]);
+
+export const disabledClass = style([
+  sprinkles({
+    pointerEvents: 'none',
+    bg: {
+      darkMode: '$gray60',
+      lightMode: '$gray20',
+    },
+  }),
+  {
+    opacity: 0.4,
+    selectors: {
+      '.inputGroup &': {
+        opacity: 1,
+      },
+      [`${darkThemeClass} &`]: {
+        backgroundColor: vars.colors.$gray60, // NOTE: this is to override the normal bg color
+      },
+    },
+  },
+]);
+
+export const copyButtonClass = style([
+  sprinkles({
+    position: 'absolute',
+    top: 0,
+    right: '$2',
+    backgroundColor: 'transparent',
+    fontSize: '$base',
+    border: 'none',
+    padding: '$1',
+    cursor: 'pointer',
+  }),
+]);
+
+export const inputContainerClass = style([
+  sprinkles({
+    position: 'relative',
+    alignItems: 'center',
+    display: 'flex',
+    flexGrow: 1,
+    gap: '$2',
+    lineHeight: '$lg',
+    paddingX: '$4',
+  }),
+]);
+
+export const inputClass = style([
+  sprinkles({
+    alignItems: 'center',
+    background: 'none',
+    border: 'none',
+    color: '$foreground',
+    outline: 'none',
+    flexGrow: 1,
+    paddingY: '$2',
+    minHeight: '$20',
+  }),
+  {
+    resize: 'none',
+    '::placeholder': {
+      color: vars.colors.$gray40,
+    },
+    [`${darkThemeClass} &::placeholder`]: {
+      color: vars.colors.$gray50,
+    },
+  },
+]);
+
+export const leadingTextClass = style([
+  sprinkles({
+    overflow: 'hidden',
+    display: 'inline-block',
+    minWidth: 0,
+    alignItems: 'center',
+    paddingX: '$4',
+  }),
+  {
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+]);
+
+export const leadingTextWrapperClass = style([
+  sprinkles({
+    backgroundColor: {
+      lightMode: '$gray20',
+      darkMode: '$gray60',
+    },
+    display: 'flex',
+    alignItems: 'center',
+  }),
+]);
+
+export const leadingTextWidthVariant = styleVariants(vars.sizes, (size) => {
+  return {
+    width: size,
+  };
+});
+
+export const outlinedClass = style([
+  sprinkles({
+    borderRadius: '$sm',
+  }),
+  {
+    border: `1px solid ${vars.colors.$neutral3}`,
+  },
+]);
diff --git a/packages/libs/react-ui/src/components/TextAreaField/TextArea.stories.tsx b/packages/libs/react-ui/src/components/TextAreaField/TextArea.stories.tsx
new file mode 100644
index 0000000000..1247a73d39
--- /dev/null
+++ b/packages/libs/react-ui/src/components/TextAreaField/TextArea.stories.tsx
@@ -0,0 +1,91 @@
+import { TextAreaField } from './TextAreaField';
+
+import type { SystemIcon } from '@components/Icon';
+import type { ITextareaProps } from '@components/TextArea';
+import { Textarea } from '@components/TextArea';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+const meta: Meta<ITextareaProps> = {
+  title: 'Form/TextArea',
+  component: Textarea,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The TextArea component is a wrapper around the native textArea element that provides the ability to add additional information.',
+      },
+    },
+  },
+  argTypes: {
+    disabled: {
+      description: 'Disables the textArea and applies visual styling.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    hasCopyButton: {
+      description:
+        'Icon rendered inside the textArea to the right of the input text.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<
+  {
+    leadingText: string;
+    rightIcon: keyof typeof SystemIcon;
+    type: React.HTMLInputTypeAttribute;
+  } & ITextareaProps
+>;
+
+export const TextAreaStory: Story = {
+  name: 'TextArea config',
+  args: {
+    disabled: false,
+    hasCopyButton: true,
+    fontFamily: '$mono',
+  },
+  render: ({ disabled, hasCopyButton, fontFamily }) => (
+    <Textarea
+      id="inlineInputStory"
+      disabled={disabled}
+      hasCopyButton={hasCopyButton}
+      fontFamily={fontFamily}
+      placeholder="This is a placeholder"
+    />
+  ),
+};
+
+export const TextFieldStory: Story = {
+  name: 'TextField config',
+  args: {
+    disabled: false,
+    hasCopyButton: true,
+    fontFamily: '$mono',
+  },
+  render: ({ disabled, hasCopyButton, fontFamily }) => (
+    <TextAreaField
+      disabled={disabled}
+      textAreaProps={{
+        hasCopyButton,
+        id: 'TextFieldStory',
+        fontFamily,
+        placeholder: 'This is a placeholder',
+      }}
+    />
+  ),
+};
diff --git a/packages/libs/react-ui/src/components/TextAreaField/TextArea.test.tsx b/packages/libs/react-ui/src/components/TextAreaField/TextArea.test.tsx
new file mode 100644
index 0000000000..897efc9289
--- /dev/null
+++ b/packages/libs/react-ui/src/components/TextAreaField/TextArea.test.tsx
@@ -0,0 +1,12 @@
+import { Input } from '@components/Input';
+import { render } from '@testing-library/react';
+import React from 'react';
+
+describe('Input', () => {
+  test('renders correctly', () => {
+    const { getByTestId } = render(<Input id="test-input" />);
+
+    const inputContainer = getByTestId('kda-input');
+    expect(inputContainer).toBeInTheDocument();
+  });
+});
diff --git a/packages/libs/react-ui/src/components/TextAreaField/TextArea.tsx b/packages/libs/react-ui/src/components/TextAreaField/TextArea.tsx
new file mode 100644
index 0000000000..edac3b5324
--- /dev/null
+++ b/packages/libs/react-ui/src/components/TextAreaField/TextArea.tsx
@@ -0,0 +1,69 @@
+import { CopyButton } from './CopyButton';
+import {
+  containerClass,
+  disabledClass,
+  inputClass,
+  inputContainerClass,
+  outlinedClass,
+} from './TextArea.css';
+
+import type { Sprinkles } from '@theme/sprinkles.css';
+import { sprinkles } from '@theme/sprinkles.css';
+import classNames from 'classnames';
+import type { FC, TextareaHTMLAttributes } from 'react';
+import React, { forwardRef, useState } from 'react';
+
+export interface ITextareaProps
+  extends Omit<
+      TextareaHTMLAttributes<HTMLTextAreaElement>,
+      'as' | 'disabled' | 'children' | 'className' | 'id'
+    >,
+    Partial<Pick<Sprinkles, 'fontFamily'>> {
+  disabled?: boolean;
+  ref?: React.ForwardedRef<HTMLTextAreaElement>;
+  id: string;
+  outlined?: boolean;
+  hasCopyButton?: boolean;
+}
+
+export const Textarea: FC<ITextareaProps> = forwardRef<
+  HTMLTextAreaElement,
+  ITextareaProps
+>(function TextArea(props, ref) {
+  const {
+    outlined,
+    hasCopyButton = false,
+    disabled = false,
+    fontFamily,
+    ...rest
+  } = props;
+  const [textAreaValue, setTextAreaValue] = useState<string>('');
+
+  const handleValueChange = (
+    event: React.ChangeEvent<HTMLTextAreaElement>,
+  ): void => {
+    setTextAreaValue(event.target.value);
+  };
+
+  return (
+    <div
+      className={classNames(containerClass, {
+        [outlinedClass]: outlined,
+        [disabledClass]: disabled,
+      })}
+      data-testid="kda-textarea"
+    >
+      <div className={inputContainerClass}>
+        <textarea
+          ref={ref}
+          className={classNames(inputClass, sprinkles({ fontFamily }))}
+          disabled={disabled}
+          onChange={handleValueChange}
+          value={textAreaValue}
+          {...rest}
+        />
+        <CopyButton shouldShow={hasCopyButton} value={textAreaValue} />
+      </div>
+    </div>
+  );
+});
diff --git a/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.tsx b/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.tsx
new file mode 100644
index 0000000000..ab5a18c6a1
--- /dev/null
+++ b/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.tsx
@@ -0,0 +1,26 @@
+import type { ITextareaProps } from './TextArea';
+import { Textarea } from './TextArea';
+
+import type { IInputWrapperProps } from '@components/InputWrapper';
+import { InputWrapper } from '@components/InputWrapper';
+import type { FC } from 'react';
+import React from 'react';
+
+export interface ITextAreaFieldProps
+  extends Omit<IInputWrapperProps, 'htmlFor' | 'children'> {
+  textAreaProps: Omit<ITextareaProps, 'disabled'>;
+}
+
+export const TextAreaField: FC<ITextAreaFieldProps> = ({
+  disabled = false,
+  textAreaProps,
+  ...rest
+}) => {
+  const { id } = textAreaProps;
+
+  return (
+    <InputWrapper htmlFor={id} disabled={disabled} {...rest}>
+      <Textarea disabled={disabled} {...textAreaProps} />
+    </InputWrapper>
+  );
+};
diff --git a/packages/libs/react-ui/src/components/TextAreaField/index.ts b/packages/libs/react-ui/src/components/TextAreaField/index.ts
new file mode 100644
index 0000000000..87068141f4
--- /dev/null
+++ b/packages/libs/react-ui/src/components/TextAreaField/index.ts
@@ -0,0 +1 @@
+export { type ITextareaProps, Textarea } from './TextArea';
diff --git a/packages/libs/react-ui/src/components/index.ts b/packages/libs/react-ui/src/components/index.ts
index e5b38a153f..02912fe05d 100644
--- a/packages/libs/react-ui/src/components/index.ts
+++ b/packages/libs/react-ui/src/components/index.ts
@@ -8,6 +8,7 @@ export type { IGridContainerProps, IGridItemProps } from './Grid';
 export type { IIconButtonProps } from './IconButton';
 export type { IIconProps } from './Icon';
 export type { IInputProps } from './Input/Input';
+export type { ITextareaProps } from './TextArea/TextArea';
 export type { IInputWrapperProps, InputWrapperStatus } from './InputWrapper';
 export type { ILinkProps } from './Link';
 export type { IMaskedValueProps } from './MaskedValue/MaskedValue';
@@ -66,6 +67,7 @@ export { NavHeader } from './NavHeader';
 export { Grid } from './Grid';
 export { IconButton } from './IconButton';
 export { Input } from './Input/Input';
+export { Textarea } from './TextArea/TextArea';
 export { InputWrapper } from './InputWrapper';
 export { Link } from './Link';
 export { MaskedValue } from './MaskedValue/MaskedValue';
diff --git a/packages/libs/react-ui/src/styles/sprinkles.css.ts b/packages/libs/react-ui/src/styles/sprinkles.css.ts
index 79de593be9..15a37c5fbc 100644
--- a/packages/libs/react-ui/src/styles/sprinkles.css.ts
+++ b/packages/libs/react-ui/src/styles/sprinkles.css.ts
@@ -107,6 +107,12 @@ const responsiveProperties = defineProperties({
       maxContent: '42.5rem', // 680px
     },
     height: { ...vars.sizes, '100%': '100%', 'min-content': 'min-content' },
+    minHeight: {
+      ...vars.sizes,
+      '100%': '100%',
+      'min-content': 'min-content',
+      'max-content': 'max-content',
+    },
     gap: vars.sizes,
     gridGap: vars.sizes,
     overflow: ['hidden'],

From 2b582b848503719a4af3d5b44f34bf4eb0fa1d81 Mon Sep 17 00:00:00 2001
From: Sam Ferrero <ferrerocompanylimited@gmail.com>
Date: Mon, 9 Oct 2023 09:36:41 +0200
Subject: [PATCH 02/13] chore(stories): added field story

---
 packages.json                                 |   2 +-
 .../src/components/Input/Input.test.tsx       |   2 +-
 .../src/components/TextArea/CopyButton.css.ts |  31 ++++
 .../src/components/TextArea/CopyButton.tsx    |  27 ++--
 .../src/components/TextArea/TextArea.css.ts   |  48 +-----
 .../components/TextArea/TextArea.stories.tsx  |  32 +---
 .../src/components/TextArea/TextArea.test.tsx |  31 +++-
 .../src/components/TextArea/TextArea.tsx      |  26 ++-
 .../src/components/TextArea/TextAreaField.tsx |   4 +-
 .../components/TextAreaField/TextArea.css.ts  | 151 ------------------
 .../TextAreaField/TextArea.stories.tsx        |  91 -----------
 .../TextAreaField/TextArea.test.tsx           |  12 --
 .../src/components/TextAreaField/TextArea.tsx |  69 --------
 .../TextAreaField/TextAreaField.stories.tsx   |  69 ++++++++
 .../TextAreaField/TextAreaField.tsx           |   5 +-
 .../src/components/TextAreaField/index.ts     |   2 +-
 .../libs/react-ui/src/components/index.ts     |   2 +
 17 files changed, 165 insertions(+), 439 deletions(-)
 create mode 100644 packages/libs/react-ui/src/components/TextArea/CopyButton.css.ts
 delete mode 100644 packages/libs/react-ui/src/components/TextAreaField/TextArea.css.ts
 delete mode 100644 packages/libs/react-ui/src/components/TextAreaField/TextArea.stories.tsx
 delete mode 100644 packages/libs/react-ui/src/components/TextAreaField/TextArea.test.tsx
 delete mode 100644 packages/libs/react-ui/src/components/TextAreaField/TextArea.tsx
 create mode 100644 packages/libs/react-ui/src/components/TextAreaField/TextAreaField.stories.tsx

diff --git a/packages.json b/packages.json
index 8f0b49b24c..e56fb3a3a3 100644
--- a/packages.json
+++ b/packages.json
@@ -167,4 +167,4 @@
     "private": true,
     "path": "packages/libs/kadena.js"
   }
-]
\ No newline at end of file
+]
diff --git a/packages/libs/react-ui/src/components/Input/Input.test.tsx b/packages/libs/react-ui/src/components/Input/Input.test.tsx
index 897efc9289..d75290a086 100644
--- a/packages/libs/react-ui/src/components/Input/Input.test.tsx
+++ b/packages/libs/react-ui/src/components/Input/Input.test.tsx
@@ -2,7 +2,7 @@ import { Input } from '@components/Input';
 import { render } from '@testing-library/react';
 import React from 'react';
 
-describe('Input', () => {
+fdescribe('Input', () => {
   test('renders correctly', () => {
     const { getByTestId } = render(<Input id="test-input" />);
 
diff --git a/packages/libs/react-ui/src/components/TextArea/CopyButton.css.ts b/packages/libs/react-ui/src/components/TextArea/CopyButton.css.ts
new file mode 100644
index 0000000000..dcc2f2ffc1
--- /dev/null
+++ b/packages/libs/react-ui/src/components/TextArea/CopyButton.css.ts
@@ -0,0 +1,31 @@
+import { colorPalette } from '@theme/colors';
+import { sprinkles } from '@theme/sprinkles.css';
+import { darkThemeClass } from '@theme/vars.css';
+import { style } from '@vanilla-extract/css';
+
+export const copyButtonClass = style([
+  sprinkles({
+    position: 'absolute',
+    top: '$2',
+    right: '$2',
+    fontSize: '$base',
+    border: 'none',
+    padding: '$1',
+    cursor: 'pointer',
+    borderRadius: '$md',
+    backgroundColor: '$gray20',
+  }),
+  {
+    ':hover': {
+      color: colorPalette.$gray40,
+    },
+    selectors: {
+      [`${darkThemeClass} &`]: {
+        backgroundColor: colorPalette.$gray90,
+      },
+      [`${darkThemeClass} &:hover`]: {
+        backgroundColor: colorPalette.$gray60,
+      },
+    },
+  },
+]);
diff --git a/packages/libs/react-ui/src/components/TextArea/CopyButton.tsx b/packages/libs/react-ui/src/components/TextArea/CopyButton.tsx
index 9962be29b4..bd776b902e 100644
--- a/packages/libs/react-ui/src/components/TextArea/CopyButton.tsx
+++ b/packages/libs/react-ui/src/components/TextArea/CopyButton.tsx
@@ -1,9 +1,11 @@
-import { copyButtonClass } from './TextArea.css';
+import { copyButtonClass } from './CopyButton.css.ts';
 
 import { IconButton } from '@components/IconButton';
 import type { FC } from 'react';
 import React, { useState } from 'react';
 
+const COPY_DURATION_TIME: number = 1000;
+
 export interface ICopyButtonProps
   extends Omit<
     React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -25,22 +27,21 @@ export const CopyButton: FC<ICopyButtonProps> = ({
     setCopied(true);
     setTimeout(() => {
       setCopied(false);
-    }, 1000);
+    }, COPY_DURATION_TIME);
   };
 
   return (
     shouldShow && (
-      <>
-        <div className={copyButtonClass}>
-          <IconButton
-            color={'primary'}
-            icon={copied ? 'Check' : 'ContentCopy'}
-            onClick={handleClick}
-            title={'ContentCopy'}
-            {...restProps}
-          />
-        </div>
-      </>
+      <div className={copyButtonClass}>
+        <IconButton
+          color={'primary'}
+          icon={copied ? 'Check' : 'ContentCopy'}
+          onClick={handleClick}
+          title={'ContentCopy'}
+          id="kda-text-area-copy-button"
+          {...restProps}
+        />
+      </div>
     )
   );
 };
diff --git a/packages/libs/react-ui/src/components/TextArea/TextArea.css.ts b/packages/libs/react-ui/src/components/TextArea/TextArea.css.ts
index 726b117973..1140630d3e 100644
--- a/packages/libs/react-ui/src/components/TextArea/TextArea.css.ts
+++ b/packages/libs/react-ui/src/components/TextArea/TextArea.css.ts
@@ -2,7 +2,7 @@ import { statusColor } from '../InputWrapper/InputWrapper.css';
 
 import { sprinkles } from '@theme/sprinkles.css';
 import { darkThemeClass, vars } from '@theme/vars.css';
-import { fallbackVar, style, styleVariants } from '@vanilla-extract/css';
+import { fallbackVar, style } from '@vanilla-extract/css';
 
 export const containerClass = style([
   sprinkles({
@@ -57,25 +57,12 @@ export const disabledClass = style([
         opacity: 1,
       },
       [`${darkThemeClass} &`]: {
-        backgroundColor: vars.colors.$gray60, // NOTE: this is to override the normal bg color
+        backgroundColor: vars.colors.$gray60,
       },
     },
   },
 ]);
 
-export const copyButtonClass = style([
-  sprinkles({
-    position: 'absolute',
-    top: 0,
-    right: '$2',
-    backgroundColor: 'transparent',
-    fontSize: '$base',
-    border: 'none',
-    padding: '$1',
-    cursor: 'pointer',
-  }),
-]);
-
 export const inputContainerClass = style([
   sprinkles({
     position: 'relative',
@@ -110,37 +97,6 @@ export const inputClass = style([
   },
 ]);
 
-export const leadingTextClass = style([
-  sprinkles({
-    overflow: 'hidden',
-    display: 'inline-block',
-    minWidth: 0,
-    alignItems: 'center',
-    paddingX: '$4',
-  }),
-  {
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-  },
-]);
-
-export const leadingTextWrapperClass = style([
-  sprinkles({
-    backgroundColor: {
-      lightMode: '$gray20',
-      darkMode: '$gray60',
-    },
-    display: 'flex',
-    alignItems: 'center',
-  }),
-]);
-
-export const leadingTextWidthVariant = styleVariants(vars.sizes, (size) => {
-  return {
-    width: size,
-  };
-});
-
 export const outlinedClass = style([
   sprinkles({
     borderRadius: '$sm',
diff --git a/packages/libs/react-ui/src/components/TextArea/TextArea.stories.tsx b/packages/libs/react-ui/src/components/TextArea/TextArea.stories.tsx
index 1247a73d39..5c5493e3c0 100644
--- a/packages/libs/react-ui/src/components/TextArea/TextArea.stories.tsx
+++ b/packages/libs/react-ui/src/components/TextArea/TextArea.stories.tsx
@@ -1,5 +1,3 @@
-import { TextAreaField } from './TextAreaField';
-
 import type { SystemIcon } from '@components/Icon';
 import type { ITextareaProps } from '@components/TextArea';
 import { Textarea } from '@components/TextArea';
@@ -29,8 +27,7 @@ const meta: Meta<ITextareaProps> = {
       },
     },
     hasCopyButton: {
-      description:
-        'Icon rendered inside the textArea to the right of the input text.',
+      description: 'Whether to show the copy button or not.',
       control: {
         type: 'boolean',
       },
@@ -58,34 +55,13 @@ export const TextAreaStory: Story = {
     disabled: false,
     hasCopyButton: true,
     fontFamily: '$mono',
+    outlined: true,
   },
-  render: ({ disabled, hasCopyButton, fontFamily }) => (
+  render: (props) => (
     <Textarea
+      {...props}
       id="inlineInputStory"
-      disabled={disabled}
-      hasCopyButton={hasCopyButton}
-      fontFamily={fontFamily}
       placeholder="This is a placeholder"
     />
   ),
 };
-
-export const TextFieldStory: Story = {
-  name: 'TextField config',
-  args: {
-    disabled: false,
-    hasCopyButton: true,
-    fontFamily: '$mono',
-  },
-  render: ({ disabled, hasCopyButton, fontFamily }) => (
-    <TextAreaField
-      disabled={disabled}
-      textAreaProps={{
-        hasCopyButton,
-        id: 'TextFieldStory',
-        fontFamily,
-        placeholder: 'This is a placeholder',
-      }}
-    />
-  ),
-};
diff --git a/packages/libs/react-ui/src/components/TextArea/TextArea.test.tsx b/packages/libs/react-ui/src/components/TextArea/TextArea.test.tsx
index 897efc9289..6d44cf47b0 100644
--- a/packages/libs/react-ui/src/components/TextArea/TextArea.test.tsx
+++ b/packages/libs/react-ui/src/components/TextArea/TextArea.test.tsx
@@ -1,12 +1,33 @@
-import { Input } from '@components/Input';
+import { Textarea } from '@components/TextArea/TextArea';
 import { render } from '@testing-library/react';
 import React from 'react';
 
-describe('Input', () => {
+describe('Textarea', () => {
   test('renders correctly', () => {
-    const { getByTestId } = render(<Input id="test-input" />);
+    const { getByTestId } = render(<Textarea id="test-text-area" />);
 
-    const inputContainer = getByTestId('kda-input');
-    expect(inputContainer).toBeInTheDocument();
+    const textareaContainer = getByTestId('kda-text-area');
+    expect(textareaContainer).toBeInTheDocument();
+  });
+
+  test('should render the copy button if the copy button is enabled', () => {
+    const { getByTestId } = render(
+      <Textarea id="test-text-area" hasCopyButton />,
+    );
+
+    const textareaCopyButton = getByTestId('kda-text-area-copy-button');
+    expect(textareaCopyButton).toBeInTheDocument();
+
+    const textareaCopyButtonIcon = getByTestId('kda-text-area-copy-button');
+    expect(textareaCopyButtonIcon).toBeInTheDocument();
+  });
+
+  test('should not render the copy button if the copy button is disabled', () => {
+    const { queryByTestId } = render(
+      <Textarea id="test-text-area" hasCopyButton={false} />,
+    );
+
+    const textareaCopyButton = queryByTestId('kda-text-area-copy-button');
+    expect(textareaCopyButton).not.toBeInTheDocument();
   });
 });
diff --git a/packages/libs/react-ui/src/components/TextArea/TextArea.tsx b/packages/libs/react-ui/src/components/TextArea/TextArea.tsx
index edac3b5324..f1fe8f96f5 100644
--- a/packages/libs/react-ui/src/components/TextArea/TextArea.tsx
+++ b/packages/libs/react-ui/src/components/TextArea/TextArea.tsx
@@ -29,20 +29,16 @@ export interface ITextareaProps
 export const Textarea: FC<ITextareaProps> = forwardRef<
   HTMLTextAreaElement,
   ITextareaProps
->(function TextArea(props, ref) {
-  const {
-    outlined,
-    hasCopyButton = false,
-    disabled = false,
-    fontFamily,
-    ...rest
-  } = props;
-  const [textAreaValue, setTextAreaValue] = useState<string>('');
+>(function TextArea(
+  { outlined, hasCopyButton = false, disabled = false, fontFamily, ...rest },
+  ref,
+) {
+  const [value, setValue] = useState<string>('');
 
-  const handleValueChange = (
-    event: React.ChangeEvent<HTMLTextAreaElement>,
-  ): void => {
-    setTextAreaValue(event.target.value);
+  const handleValueChange = ({
+    target,
+  }: React.ChangeEvent<HTMLTextAreaElement>): void => {
+    setValue(target.value);
   };
 
   return (
@@ -59,10 +55,10 @@ export const Textarea: FC<ITextareaProps> = forwardRef<
           className={classNames(inputClass, sprinkles({ fontFamily }))}
           disabled={disabled}
           onChange={handleValueChange}
-          value={textAreaValue}
+          value={value}
           {...rest}
         />
-        <CopyButton shouldShow={hasCopyButton} value={textAreaValue} />
+        <CopyButton shouldShow={hasCopyButton} value={value} />
       </div>
     </div>
   );
diff --git a/packages/libs/react-ui/src/components/TextArea/TextAreaField.tsx b/packages/libs/react-ui/src/components/TextArea/TextAreaField.tsx
index ab5a18c6a1..128aa7b3c5 100644
--- a/packages/libs/react-ui/src/components/TextArea/TextAreaField.tsx
+++ b/packages/libs/react-ui/src/components/TextArea/TextAreaField.tsx
@@ -16,10 +16,8 @@ export const TextAreaField: FC<ITextAreaFieldProps> = ({
   textAreaProps,
   ...rest
 }) => {
-  const { id } = textAreaProps;
-
   return (
-    <InputWrapper htmlFor={id} disabled={disabled} {...rest}>
+    <InputWrapper htmlFor={textAreaProps.id} disabled={disabled} {...rest}>
       <Textarea disabled={disabled} {...textAreaProps} />
     </InputWrapper>
   );
diff --git a/packages/libs/react-ui/src/components/TextAreaField/TextArea.css.ts b/packages/libs/react-ui/src/components/TextAreaField/TextArea.css.ts
deleted file mode 100644
index 726b117973..0000000000
--- a/packages/libs/react-ui/src/components/TextAreaField/TextArea.css.ts
+++ /dev/null
@@ -1,151 +0,0 @@
-import { statusColor } from '../InputWrapper/InputWrapper.css';
-
-import { sprinkles } from '@theme/sprinkles.css';
-import { darkThemeClass, vars } from '@theme/vars.css';
-import { fallbackVar, style, styleVariants } from '@vanilla-extract/css';
-
-export const containerClass = style([
-  sprinkles({
-    alignItems: 'stretch',
-    borderRadius: '$sm',
-    display: 'flex',
-    color: '$foreground',
-    overflow: 'hidden',
-    lineHeight: '$lg',
-    bg: {
-      lightMode: '$white',
-      darkMode: '$gray100',
-    },
-  }),
-  {
-    position: 'relative',
-    borderBottom: `1px solid ${fallbackVar(statusColor, vars.colors.$gray30)}`,
-    selectors: {
-      [`${darkThemeClass} &`]: {
-        borderBottom: `1px solid ${fallbackVar(
-          statusColor,
-          vars.colors.$gray60,
-        )}`,
-      },
-      '.inputGroup &': {
-        borderRadius: 0,
-      },
-      '.inputGroup &:first-child': {
-        borderTopRightRadius: vars.radii.$sm,
-        borderTopLeftRadius: vars.radii.$sm,
-      },
-      '.inputGroup &:last-child': {
-        borderBottomRightRadius: vars.radii.$sm,
-        borderBottomLeftRadius: vars.radii.$sm,
-      },
-    },
-  },
-]);
-
-export const disabledClass = style([
-  sprinkles({
-    pointerEvents: 'none',
-    bg: {
-      darkMode: '$gray60',
-      lightMode: '$gray20',
-    },
-  }),
-  {
-    opacity: 0.4,
-    selectors: {
-      '.inputGroup &': {
-        opacity: 1,
-      },
-      [`${darkThemeClass} &`]: {
-        backgroundColor: vars.colors.$gray60, // NOTE: this is to override the normal bg color
-      },
-    },
-  },
-]);
-
-export const copyButtonClass = style([
-  sprinkles({
-    position: 'absolute',
-    top: 0,
-    right: '$2',
-    backgroundColor: 'transparent',
-    fontSize: '$base',
-    border: 'none',
-    padding: '$1',
-    cursor: 'pointer',
-  }),
-]);
-
-export const inputContainerClass = style([
-  sprinkles({
-    position: 'relative',
-    alignItems: 'center',
-    display: 'flex',
-    flexGrow: 1,
-    gap: '$2',
-    lineHeight: '$lg',
-    paddingX: '$4',
-  }),
-]);
-
-export const inputClass = style([
-  sprinkles({
-    alignItems: 'center',
-    background: 'none',
-    border: 'none',
-    color: '$foreground',
-    outline: 'none',
-    flexGrow: 1,
-    paddingY: '$2',
-    minHeight: '$20',
-  }),
-  {
-    resize: 'none',
-    '::placeholder': {
-      color: vars.colors.$gray40,
-    },
-    [`${darkThemeClass} &::placeholder`]: {
-      color: vars.colors.$gray50,
-    },
-  },
-]);
-
-export const leadingTextClass = style([
-  sprinkles({
-    overflow: 'hidden',
-    display: 'inline-block',
-    minWidth: 0,
-    alignItems: 'center',
-    paddingX: '$4',
-  }),
-  {
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-  },
-]);
-
-export const leadingTextWrapperClass = style([
-  sprinkles({
-    backgroundColor: {
-      lightMode: '$gray20',
-      darkMode: '$gray60',
-    },
-    display: 'flex',
-    alignItems: 'center',
-  }),
-]);
-
-export const leadingTextWidthVariant = styleVariants(vars.sizes, (size) => {
-  return {
-    width: size,
-  };
-});
-
-export const outlinedClass = style([
-  sprinkles({
-    borderRadius: '$sm',
-  }),
-  {
-    border: `1px solid ${vars.colors.$neutral3}`,
-  },
-]);
diff --git a/packages/libs/react-ui/src/components/TextAreaField/TextArea.stories.tsx b/packages/libs/react-ui/src/components/TextAreaField/TextArea.stories.tsx
deleted file mode 100644
index 1247a73d39..0000000000
--- a/packages/libs/react-ui/src/components/TextAreaField/TextArea.stories.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { TextAreaField } from './TextAreaField';
-
-import type { SystemIcon } from '@components/Icon';
-import type { ITextareaProps } from '@components/TextArea';
-import { Textarea } from '@components/TextArea';
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-
-const meta: Meta<ITextareaProps> = {
-  title: 'Form/TextArea',
-  component: Textarea,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'The TextArea component is a wrapper around the native textArea element that provides the ability to add additional information.',
-      },
-    },
-  },
-  argTypes: {
-    disabled: {
-      description: 'Disables the textArea and applies visual styling.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
-    hasCopyButton: {
-      description:
-        'Icon rendered inside the textArea to the right of the input text.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<
-  {
-    leadingText: string;
-    rightIcon: keyof typeof SystemIcon;
-    type: React.HTMLInputTypeAttribute;
-  } & ITextareaProps
->;
-
-export const TextAreaStory: Story = {
-  name: 'TextArea config',
-  args: {
-    disabled: false,
-    hasCopyButton: true,
-    fontFamily: '$mono',
-  },
-  render: ({ disabled, hasCopyButton, fontFamily }) => (
-    <Textarea
-      id="inlineInputStory"
-      disabled={disabled}
-      hasCopyButton={hasCopyButton}
-      fontFamily={fontFamily}
-      placeholder="This is a placeholder"
-    />
-  ),
-};
-
-export const TextFieldStory: Story = {
-  name: 'TextField config',
-  args: {
-    disabled: false,
-    hasCopyButton: true,
-    fontFamily: '$mono',
-  },
-  render: ({ disabled, hasCopyButton, fontFamily }) => (
-    <TextAreaField
-      disabled={disabled}
-      textAreaProps={{
-        hasCopyButton,
-        id: 'TextFieldStory',
-        fontFamily,
-        placeholder: 'This is a placeholder',
-      }}
-    />
-  ),
-};
diff --git a/packages/libs/react-ui/src/components/TextAreaField/TextArea.test.tsx b/packages/libs/react-ui/src/components/TextAreaField/TextArea.test.tsx
deleted file mode 100644
index 897efc9289..0000000000
--- a/packages/libs/react-ui/src/components/TextAreaField/TextArea.test.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Input } from '@components/Input';
-import { render } from '@testing-library/react';
-import React from 'react';
-
-describe('Input', () => {
-  test('renders correctly', () => {
-    const { getByTestId } = render(<Input id="test-input" />);
-
-    const inputContainer = getByTestId('kda-input');
-    expect(inputContainer).toBeInTheDocument();
-  });
-});
diff --git a/packages/libs/react-ui/src/components/TextAreaField/TextArea.tsx b/packages/libs/react-ui/src/components/TextAreaField/TextArea.tsx
deleted file mode 100644
index edac3b5324..0000000000
--- a/packages/libs/react-ui/src/components/TextAreaField/TextArea.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { CopyButton } from './CopyButton';
-import {
-  containerClass,
-  disabledClass,
-  inputClass,
-  inputContainerClass,
-  outlinedClass,
-} from './TextArea.css';
-
-import type { Sprinkles } from '@theme/sprinkles.css';
-import { sprinkles } from '@theme/sprinkles.css';
-import classNames from 'classnames';
-import type { FC, TextareaHTMLAttributes } from 'react';
-import React, { forwardRef, useState } from 'react';
-
-export interface ITextareaProps
-  extends Omit<
-      TextareaHTMLAttributes<HTMLTextAreaElement>,
-      'as' | 'disabled' | 'children' | 'className' | 'id'
-    >,
-    Partial<Pick<Sprinkles, 'fontFamily'>> {
-  disabled?: boolean;
-  ref?: React.ForwardedRef<HTMLTextAreaElement>;
-  id: string;
-  outlined?: boolean;
-  hasCopyButton?: boolean;
-}
-
-export const Textarea: FC<ITextareaProps> = forwardRef<
-  HTMLTextAreaElement,
-  ITextareaProps
->(function TextArea(props, ref) {
-  const {
-    outlined,
-    hasCopyButton = false,
-    disabled = false,
-    fontFamily,
-    ...rest
-  } = props;
-  const [textAreaValue, setTextAreaValue] = useState<string>('');
-
-  const handleValueChange = (
-    event: React.ChangeEvent<HTMLTextAreaElement>,
-  ): void => {
-    setTextAreaValue(event.target.value);
-  };
-
-  return (
-    <div
-      className={classNames(containerClass, {
-        [outlinedClass]: outlined,
-        [disabledClass]: disabled,
-      })}
-      data-testid="kda-textarea"
-    >
-      <div className={inputContainerClass}>
-        <textarea
-          ref={ref}
-          className={classNames(inputClass, sprinkles({ fontFamily }))}
-          disabled={disabled}
-          onChange={handleValueChange}
-          value={textAreaValue}
-          {...rest}
-        />
-        <CopyButton shouldShow={hasCopyButton} value={textAreaValue} />
-      </div>
-    </div>
-  );
-});
diff --git a/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.stories.tsx b/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.stories.tsx
new file mode 100644
index 0000000000..575e61b054
--- /dev/null
+++ b/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.stories.tsx
@@ -0,0 +1,69 @@
+import type { ITextAreaFieldProps } from './TextAreaField';
+import { TextAreaField } from './TextAreaField';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+const meta: Meta<ITextAreaFieldProps> = {
+  title: 'Form/TextAreaField',
+  component: TextAreaField,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The TextAreaField component is a wrapper around the native textarea element that provides the ability to add additional information.',
+      },
+    },
+  },
+  argTypes: {
+    disabled: {
+      description: 'Disables the input and applies visual styling.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+
+    textAreaProps: {
+      description: 'Props for the textarea element.',
+      control: {
+        type: 'object',
+      },
+      table: {
+        type: { summary: 'object' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ITextAreaFieldProps>;
+
+export const TextFieldStory: Story = {
+  name: 'TextField config',
+  args: {
+    disabled: false,
+    tag: 'tag',
+    helperText: 'This is helper text',
+    info: '(optional)',
+    label: 'Label',
+    textAreaProps: {
+      hasCopyButton: true,
+      id: 'TextFieldStory',
+      fontFamily: '$mono',
+      placeholder: 'This is a placeholder',
+    },
+  },
+  render: ({ disabled, textAreaProps, ...rest }) => (
+    <TextAreaField
+      disabled={disabled}
+      textAreaProps={textAreaProps}
+      {...rest}
+    />
+  ),
+};
diff --git a/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.tsx b/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.tsx
index ab5a18c6a1..0161774b06 100644
--- a/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.tsx
+++ b/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.tsx
@@ -1,8 +1,7 @@
-import type { ITextareaProps } from './TextArea';
-import { Textarea } from './TextArea';
-
 import type { IInputWrapperProps } from '@components/InputWrapper';
 import { InputWrapper } from '@components/InputWrapper';
+import type { ITextareaProps } from '@components/TextArea';
+import { Textarea } from '@components/TextArea';
 import type { FC } from 'react';
 import React from 'react';
 
diff --git a/packages/libs/react-ui/src/components/TextAreaField/index.ts b/packages/libs/react-ui/src/components/TextAreaField/index.ts
index 87068141f4..d8a68462c6 100644
--- a/packages/libs/react-ui/src/components/TextAreaField/index.ts
+++ b/packages/libs/react-ui/src/components/TextAreaField/index.ts
@@ -1 +1 @@
-export { type ITextareaProps, Textarea } from './TextArea';
+export { type ITextAreaFieldProps, TextAreaField } from './TextAreaField';
diff --git a/packages/libs/react-ui/src/components/index.ts b/packages/libs/react-ui/src/components/index.ts
index 02912fe05d..98bab4110e 100644
--- a/packages/libs/react-ui/src/components/index.ts
+++ b/packages/libs/react-ui/src/components/index.ts
@@ -20,6 +20,7 @@ export type { IStackProps } from './Stack';
 export type { ITabsContainerProps, ITabProps, ITabContentProps } from './Tabs';
 export type { ITagProps } from './Tag';
 export type { ITextFieldProps } from './TextField/TextField';
+export type { ITextAreaFieldProps } from './TextAreaField/TextAreaField';
 export type { ITooltipProps } from './Tooltip';
 export type { ITrackerCardProps, ILabelValue } from './TrackerCard/TrackerCard';
 export type { ITreeProps } from './Tree';
@@ -83,6 +84,7 @@ export { Tabs } from './Tabs';
 export { Tag } from './Tag';
 export { Text, Heading, GradientText, Label } from './Typography';
 export { TextField } from './TextField/TextField';
+export { TextAreaField } from './TextAreaField/TextAreaField';
 export { Tooltip } from './Tooltip';
 export { TrackerCard } from './TrackerCard/TrackerCard';
 export { Tree } from './Tree';

From ea096d86f017ea37022e934929d9f45e4b193578 Mon Sep 17 00:00:00 2001
From: Sam Ferrero <ferrerocompanylimited@gmail.com>
Date: Mon, 9 Oct 2023 11:59:56 +0200
Subject: [PATCH 03/13] chore: extra

---
 .../components/InputWrapper/InputWrapper.tsx  | 18 +++----
 .../src/components/TextArea/CopyButton.css.ts | 31 ------------
 .../src/components/TextArea/CopyButton.tsx    | 47 -------------------
 .../src/components/TextArea/TextArea.tsx      |  8 +---
 .../src/components/TextArea/TextAreaField.tsx | 24 ----------
 .../TextAreaField/TextAreaField.stories.tsx   |  1 -
 6 files changed, 11 insertions(+), 118 deletions(-)
 delete mode 100644 packages/libs/react-ui/src/components/TextArea/CopyButton.css.ts
 delete mode 100644 packages/libs/react-ui/src/components/TextArea/CopyButton.tsx
 delete mode 100644 packages/libs/react-ui/src/components/TextArea/TextAreaField.tsx

diff --git a/packages/libs/react-ui/src/components/InputWrapper/InputWrapper.tsx b/packages/libs/react-ui/src/components/InputWrapper/InputWrapper.tsx
index 5add74ee79..f26717645d 100644
--- a/packages/libs/react-ui/src/components/InputWrapper/InputWrapper.tsx
+++ b/packages/libs/react-ui/src/components/InputWrapper/InputWrapper.tsx
@@ -39,15 +39,17 @@ export const InputWrapper: FC<IInputWrapperProps> = ({
         <InputHeader htmlFor={htmlFor} label={label} tag={tag} info={info} />
       )}
       <div className="inputGroup">
-        {React.Children.map(children, (child) => {
-          if (!React.isValidElement(child)) return null;
-          const props = {
-            ...child.props,
-            leadingTextWidth,
-          };
+        {leadingTextWidth
+          ? React.Children.map(children, (child) => {
+              if (!React.isValidElement(child)) return null;
+              const props = {
+                ...child.props,
+                leadingTextWidth,
+              };
 
-          return React.cloneElement(child, props);
-        })}
+              return React.cloneElement(child, props);
+            })
+          : children}
       </div>
       {Boolean(helperText) && <InputHelper>{helperText}</InputHelper>}
     </div>
diff --git a/packages/libs/react-ui/src/components/TextArea/CopyButton.css.ts b/packages/libs/react-ui/src/components/TextArea/CopyButton.css.ts
deleted file mode 100644
index dcc2f2ffc1..0000000000
--- a/packages/libs/react-ui/src/components/TextArea/CopyButton.css.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { colorPalette } from '@theme/colors';
-import { sprinkles } from '@theme/sprinkles.css';
-import { darkThemeClass } from '@theme/vars.css';
-import { style } from '@vanilla-extract/css';
-
-export const copyButtonClass = style([
-  sprinkles({
-    position: 'absolute',
-    top: '$2',
-    right: '$2',
-    fontSize: '$base',
-    border: 'none',
-    padding: '$1',
-    cursor: 'pointer',
-    borderRadius: '$md',
-    backgroundColor: '$gray20',
-  }),
-  {
-    ':hover': {
-      color: colorPalette.$gray40,
-    },
-    selectors: {
-      [`${darkThemeClass} &`]: {
-        backgroundColor: colorPalette.$gray90,
-      },
-      [`${darkThemeClass} &:hover`]: {
-        backgroundColor: colorPalette.$gray60,
-      },
-    },
-  },
-]);
diff --git a/packages/libs/react-ui/src/components/TextArea/CopyButton.tsx b/packages/libs/react-ui/src/components/TextArea/CopyButton.tsx
deleted file mode 100644
index bd776b902e..0000000000
--- a/packages/libs/react-ui/src/components/TextArea/CopyButton.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { copyButtonClass } from './CopyButton.css.ts';
-
-import { IconButton } from '@components/IconButton';
-import type { FC } from 'react';
-import React, { useState } from 'react';
-
-const COPY_DURATION_TIME: number = 1000;
-
-export interface ICopyButtonProps
-  extends Omit<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    'color' | 'className'
-  > {
-  shouldShow: boolean;
-  value: string;
-}
-
-export const CopyButton: FC<ICopyButtonProps> = ({
-  shouldShow,
-  value,
-  ...restProps
-}) => {
-  const [copied, setCopied] = useState<boolean>(false);
-
-  const handleClick = async (): Promise<void> => {
-    await navigator.clipboard.writeText(value);
-    setCopied(true);
-    setTimeout(() => {
-      setCopied(false);
-    }, COPY_DURATION_TIME);
-  };
-
-  return (
-    shouldShow && (
-      <div className={copyButtonClass}>
-        <IconButton
-          color={'primary'}
-          icon={copied ? 'Check' : 'ContentCopy'}
-          onClick={handleClick}
-          title={'ContentCopy'}
-          id="kda-text-area-copy-button"
-          {...restProps}
-        />
-      </div>
-    )
-  );
-};
diff --git a/packages/libs/react-ui/src/components/TextArea/TextArea.tsx b/packages/libs/react-ui/src/components/TextArea/TextArea.tsx
index f1fe8f96f5..b25be27c33 100644
--- a/packages/libs/react-ui/src/components/TextArea/TextArea.tsx
+++ b/packages/libs/react-ui/src/components/TextArea/TextArea.tsx
@@ -1,4 +1,3 @@
-import { CopyButton } from './CopyButton';
 import {
   containerClass,
   disabledClass,
@@ -23,16 +22,12 @@ export interface ITextareaProps
   ref?: React.ForwardedRef<HTMLTextAreaElement>;
   id: string;
   outlined?: boolean;
-  hasCopyButton?: boolean;
 }
 
 export const Textarea: FC<ITextareaProps> = forwardRef<
   HTMLTextAreaElement,
   ITextareaProps
->(function TextArea(
-  { outlined, hasCopyButton = false, disabled = false, fontFamily, ...rest },
-  ref,
-) {
+>(function TextArea({ outlined, disabled = false, fontFamily, ...rest }, ref) {
   const [value, setValue] = useState<string>('');
 
   const handleValueChange = ({
@@ -58,7 +53,6 @@ export const Textarea: FC<ITextareaProps> = forwardRef<
           value={value}
           {...rest}
         />
-        <CopyButton shouldShow={hasCopyButton} value={value} />
       </div>
     </div>
   );
diff --git a/packages/libs/react-ui/src/components/TextArea/TextAreaField.tsx b/packages/libs/react-ui/src/components/TextArea/TextAreaField.tsx
deleted file mode 100644
index 128aa7b3c5..0000000000
--- a/packages/libs/react-ui/src/components/TextArea/TextAreaField.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { ITextareaProps } from './TextArea';
-import { Textarea } from './TextArea';
-
-import type { IInputWrapperProps } from '@components/InputWrapper';
-import { InputWrapper } from '@components/InputWrapper';
-import type { FC } from 'react';
-import React from 'react';
-
-export interface ITextAreaFieldProps
-  extends Omit<IInputWrapperProps, 'htmlFor' | 'children'> {
-  textAreaProps: Omit<ITextareaProps, 'disabled'>;
-}
-
-export const TextAreaField: FC<ITextAreaFieldProps> = ({
-  disabled = false,
-  textAreaProps,
-  ...rest
-}) => {
-  return (
-    <InputWrapper htmlFor={textAreaProps.id} disabled={disabled} {...rest}>
-      <Textarea disabled={disabled} {...textAreaProps} />
-    </InputWrapper>
-  );
-};
diff --git a/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.stories.tsx b/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.stories.tsx
index 575e61b054..c5cf14da11 100644
--- a/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.stories.tsx
+++ b/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.stories.tsx
@@ -53,7 +53,6 @@ export const TextFieldStory: Story = {
     info: '(optional)',
     label: 'Label',
     textAreaProps: {
-      hasCopyButton: true,
       id: 'TextFieldStory',
       fontFamily: '$mono',
       placeholder: 'This is a placeholder',

From 9f641e0a7c811437aadce0ba9bfbccfb2287d84c Mon Sep 17 00:00:00 2001
From: Sam Ferrero <ferrerocompanylimited@gmail.com>
Date: Mon, 9 Oct 2023 14:15:28 +0200
Subject: [PATCH 04/13] chore: cleanup

---
 .../react-ui/src/components/Input/Input.test.tsx     | 12 ------------
 .../react-ui/src/components/TextArea/TextArea.css.ts |  4 ++--
 .../react-ui/src/components/TextArea/TextArea.tsx    |  8 ++++----
 3 files changed, 6 insertions(+), 18 deletions(-)
 delete mode 100644 packages/libs/react-ui/src/components/Input/Input.test.tsx

diff --git a/packages/libs/react-ui/src/components/Input/Input.test.tsx b/packages/libs/react-ui/src/components/Input/Input.test.tsx
deleted file mode 100644
index d75290a086..0000000000
--- a/packages/libs/react-ui/src/components/Input/Input.test.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Input } from '@components/Input';
-import { render } from '@testing-library/react';
-import React from 'react';
-
-fdescribe('Input', () => {
-  test('renders correctly', () => {
-    const { getByTestId } = render(<Input id="test-input" />);
-
-    const inputContainer = getByTestId('kda-input');
-    expect(inputContainer).toBeInTheDocument();
-  });
-});
diff --git a/packages/libs/react-ui/src/components/TextArea/TextArea.css.ts b/packages/libs/react-ui/src/components/TextArea/TextArea.css.ts
index 1140630d3e..3603092860 100644
--- a/packages/libs/react-ui/src/components/TextArea/TextArea.css.ts
+++ b/packages/libs/react-ui/src/components/TextArea/TextArea.css.ts
@@ -63,7 +63,7 @@ export const disabledClass = style([
   },
 ]);
 
-export const inputContainerClass = style([
+export const textAreaContainerClass = style([
   sprinkles({
     position: 'relative',
     alignItems: 'center',
@@ -75,7 +75,7 @@ export const inputContainerClass = style([
   }),
 ]);
 
-export const inputClass = style([
+export const textAreaClass = style([
   sprinkles({
     alignItems: 'center',
     background: 'none',
diff --git a/packages/libs/react-ui/src/components/TextArea/TextArea.tsx b/packages/libs/react-ui/src/components/TextArea/TextArea.tsx
index b25be27c33..4e3593f536 100644
--- a/packages/libs/react-ui/src/components/TextArea/TextArea.tsx
+++ b/packages/libs/react-ui/src/components/TextArea/TextArea.tsx
@@ -1,9 +1,9 @@
 import {
   containerClass,
   disabledClass,
-  inputClass,
-  inputContainerClass,
   outlinedClass,
+  textAreaClass,
+  textAreaContainerClass,
 } from './TextArea.css';
 
 import type { Sprinkles } from '@theme/sprinkles.css';
@@ -44,10 +44,10 @@ export const Textarea: FC<ITextareaProps> = forwardRef<
       })}
       data-testid="kda-textarea"
     >
-      <div className={inputContainerClass}>
+      <div className={textAreaContainerClass}>
         <textarea
           ref={ref}
-          className={classNames(inputClass, sprinkles({ fontFamily }))}
+          className={classNames(textAreaClass, sprinkles({ fontFamily }))}
           disabled={disabled}
           onChange={handleValueChange}
           value={value}

From 6717ce8b160693419ceb6ceaf5f377896df0c4cd Mon Sep 17 00:00:00 2001
From: Sam Ferrero <ferrerocompanylimited@gmail.com>
Date: Mon, 9 Oct 2023 14:26:24 +0200
Subject: [PATCH 05/13] chore: added changeset

---
 packages/libs/react-ui/.changeset/README.md           |  8 ++++++++
 packages/libs/react-ui/.changeset/config.json         | 11 +++++++++++
 .../libs/react-ui/.changeset/cyan-windows-fold.md     |  5 +++++
 3 files changed, 24 insertions(+)
 create mode 100644 packages/libs/react-ui/.changeset/README.md
 create mode 100644 packages/libs/react-ui/.changeset/config.json
 create mode 100644 packages/libs/react-ui/.changeset/cyan-windows-fold.md

diff --git a/packages/libs/react-ui/.changeset/README.md b/packages/libs/react-ui/.changeset/README.md
new file mode 100644
index 0000000000..e5b6d8d6a6
--- /dev/null
+++ b/packages/libs/react-ui/.changeset/README.md
@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
diff --git a/packages/libs/react-ui/.changeset/config.json b/packages/libs/react-ui/.changeset/config.json
new file mode 100644
index 0000000000..ab848d1a1e
--- /dev/null
+++ b/packages/libs/react-ui/.changeset/config.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@2.3.1/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}
diff --git a/packages/libs/react-ui/.changeset/cyan-windows-fold.md b/packages/libs/react-ui/.changeset/cyan-windows-fold.md
new file mode 100644
index 0000000000..0287700ce0
--- /dev/null
+++ b/packages/libs/react-ui/.changeset/cyan-windows-fold.md
@@ -0,0 +1,5 @@
+---
+'@kadena/react-ui': minor
+---
+
+adding new text area component and the field for it

From 251e5165cae43fee6b95b606c8925ec7b19cdb4b Mon Sep 17 00:00:00 2001
From: Sam Ferrero <ferrerocompanylimited@gmail.com>
Date: Mon, 9 Oct 2023 14:29:24 +0200
Subject: [PATCH 06/13] chore: changeset

---
 .../tiny-weeks-chew.md                                |  0
 packages/libs/react-ui/.changeset/README.md           |  8 --------
 packages/libs/react-ui/.changeset/config.json         | 11 -----------
 3 files changed, 19 deletions(-)
 rename packages/libs/react-ui/.changeset/cyan-windows-fold.md => .changeset/tiny-weeks-chew.md (100%)
 delete mode 100644 packages/libs/react-ui/.changeset/README.md
 delete mode 100644 packages/libs/react-ui/.changeset/config.json

diff --git a/packages/libs/react-ui/.changeset/cyan-windows-fold.md b/.changeset/tiny-weeks-chew.md
similarity index 100%
rename from packages/libs/react-ui/.changeset/cyan-windows-fold.md
rename to .changeset/tiny-weeks-chew.md
diff --git a/packages/libs/react-ui/.changeset/README.md b/packages/libs/react-ui/.changeset/README.md
deleted file mode 100644
index e5b6d8d6a6..0000000000
--- a/packages/libs/react-ui/.changeset/README.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Changesets
-
-Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
-with multi-package repos, or single-package repos to help you version and publish your code. You can
-find the full documentation for it [in our repository](https://github.com/changesets/changesets)
-
-We have a quick list of common questions to get you started engaging with this project in
-[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
diff --git a/packages/libs/react-ui/.changeset/config.json b/packages/libs/react-ui/.changeset/config.json
deleted file mode 100644
index ab848d1a1e..0000000000
--- a/packages/libs/react-ui/.changeset/config.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "$schema": "https://unpkg.com/@changesets/config@2.3.1/schema.json",
-  "changelog": "@changesets/cli/changelog",
-  "commit": false,
-  "fixed": [],
-  "linked": [],
-  "access": "restricted",
-  "baseBranch": "main",
-  "updateInternalDependencies": "patch",
-  "ignore": []
-}

From 4cd5225c94468adc2ca2b87ccc656d009897f1f1 Mon Sep 17 00:00:00 2001
From: Sam Ferrero <ferrerocompanylimited@gmail.com>
Date: Mon, 9 Oct 2023 14:45:32 +0200
Subject: [PATCH 07/13] fix: remover unit test

---
 .../src/components/TextArea/TextArea.test.tsx | 33 -------------------
 .../src/components/TextArea/TextArea.tsx      |  1 -
 2 files changed, 34 deletions(-)
 delete mode 100644 packages/libs/react-ui/src/components/TextArea/TextArea.test.tsx

diff --git a/packages/libs/react-ui/src/components/TextArea/TextArea.test.tsx b/packages/libs/react-ui/src/components/TextArea/TextArea.test.tsx
deleted file mode 100644
index 6d44cf47b0..0000000000
--- a/packages/libs/react-ui/src/components/TextArea/TextArea.test.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Textarea } from '@components/TextArea/TextArea';
-import { render } from '@testing-library/react';
-import React from 'react';
-
-describe('Textarea', () => {
-  test('renders correctly', () => {
-    const { getByTestId } = render(<Textarea id="test-text-area" />);
-
-    const textareaContainer = getByTestId('kda-text-area');
-    expect(textareaContainer).toBeInTheDocument();
-  });
-
-  test('should render the copy button if the copy button is enabled', () => {
-    const { getByTestId } = render(
-      <Textarea id="test-text-area" hasCopyButton />,
-    );
-
-    const textareaCopyButton = getByTestId('kda-text-area-copy-button');
-    expect(textareaCopyButton).toBeInTheDocument();
-
-    const textareaCopyButtonIcon = getByTestId('kda-text-area-copy-button');
-    expect(textareaCopyButtonIcon).toBeInTheDocument();
-  });
-
-  test('should not render the copy button if the copy button is disabled', () => {
-    const { queryByTestId } = render(
-      <Textarea id="test-text-area" hasCopyButton={false} />,
-    );
-
-    const textareaCopyButton = queryByTestId('kda-text-area-copy-button');
-    expect(textareaCopyButton).not.toBeInTheDocument();
-  });
-});
diff --git a/packages/libs/react-ui/src/components/TextArea/TextArea.tsx b/packages/libs/react-ui/src/components/TextArea/TextArea.tsx
index 4e3593f536..fe8f558ce5 100644
--- a/packages/libs/react-ui/src/components/TextArea/TextArea.tsx
+++ b/packages/libs/react-ui/src/components/TextArea/TextArea.tsx
@@ -42,7 +42,6 @@ export const Textarea: FC<ITextareaProps> = forwardRef<
         [outlinedClass]: outlined,
         [disabledClass]: disabled,
       })}
-      data-testid="kda-textarea"
     >
       <div className={textAreaContainerClass}>
         <textarea

From 9337506d4d820e49a089b7e3573339661a2f01dc Mon Sep 17 00:00:00 2001
From: Sam Ferrero <ferrerocompanylimited@gmail.com>
Date: Mon, 9 Oct 2023 15:04:26 +0200
Subject: [PATCH 08/13] chore: OOOOPS

---
 .../src/components/TextArea/TextArea.stories.tsx      | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/packages/libs/react-ui/src/components/TextArea/TextArea.stories.tsx b/packages/libs/react-ui/src/components/TextArea/TextArea.stories.tsx
index 5c5493e3c0..adf646918f 100644
--- a/packages/libs/react-ui/src/components/TextArea/TextArea.stories.tsx
+++ b/packages/libs/react-ui/src/components/TextArea/TextArea.stories.tsx
@@ -26,16 +26,6 @@ const meta: Meta<ITextareaProps> = {
         defaultValue: { summary: 'false' },
       },
     },
-    hasCopyButton: {
-      description: 'Whether to show the copy button or not.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
   },
 };
 
@@ -53,7 +43,6 @@ export const TextAreaStory: Story = {
   name: 'TextArea config',
   args: {
     disabled: false,
-    hasCopyButton: true,
     fontFamily: '$mono',
     outlined: true,
   },

From 47536eb261bcf814451b1422e4bb0389657ed6b8 Mon Sep 17 00:00:00 2001
From: ferreroltd <73488793+ferreroltd@users.noreply.github.com>
Date: Wed, 11 Oct 2023 08:36:08 +0200
Subject: [PATCH 09/13] chore: Update .changeset/tiny-weeks-chew.md

Co-authored-by: eileenmguo <eileen@kadena.io>
---
 .changeset/tiny-weeks-chew.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/tiny-weeks-chew.md b/.changeset/tiny-weeks-chew.md
index 0287700ce0..68d570f61f 100644
--- a/.changeset/tiny-weeks-chew.md
+++ b/.changeset/tiny-weeks-chew.md
@@ -2,4 +2,4 @@
 '@kadena/react-ui': minor
 ---
 
-adding new text area component and the field for it
+Added the TextArea and TextAreaField components

From ba41a46debc34655f06b06f1b190b6572e11198b Mon Sep 17 00:00:00 2001
From: Sam Ferrero <ferrerocompanylimited@gmail.com>
Date: Wed, 11 Oct 2023 09:53:33 +0200
Subject: [PATCH 10/13] chore: imports fix

---
 .../src/components/TextAreaField/TextAreaField.stories.tsx   | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.stories.tsx b/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.stories.tsx
index c5cf14da11..9ac4eae8ed 100644
--- a/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.stories.tsx
+++ b/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.stories.tsx
@@ -1,6 +1,5 @@
-import type { ITextAreaFieldProps } from './TextAreaField';
-import { TextAreaField } from './TextAreaField';
-
+import type { ITextAreaFieldProps } from '@components/TextAreaField';
+import { TextAreaField } from '@components/TextAreaField';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 

From b0a15fbe90f31538300eb92c19d8cd7e3f84e941 Mon Sep 17 00:00:00 2001
From: Sam Ferrero <ferrerocompanylimited@gmail.com>
Date: Fri, 13 Oct 2023 10:31:25 +0100
Subject: [PATCH 11/13] chore: implement passing state

---
 .../components/TextArea/TextArea.stories.tsx  | 22 ++++++++++------
 .../src/components/TextArea/TextArea.tsx      | 23 +++++++---------
 .../TextAreaField/TextAreaField.stories.tsx   | 26 +++++++++++++------
 3 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/packages/libs/react-ui/src/components/TextArea/TextArea.stories.tsx b/packages/libs/react-ui/src/components/TextArea/TextArea.stories.tsx
index adf646918f..bb0939ad4c 100644
--- a/packages/libs/react-ui/src/components/TextArea/TextArea.stories.tsx
+++ b/packages/libs/react-ui/src/components/TextArea/TextArea.stories.tsx
@@ -2,7 +2,7 @@ import type { SystemIcon } from '@components/Icon';
 import type { ITextareaProps } from '@components/TextArea';
 import { Textarea } from '@components/TextArea';
 import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
+import React, { useState } from 'react';
 
 const meta: Meta<ITextareaProps> = {
   title: 'Form/TextArea',
@@ -46,11 +46,17 @@ export const TextAreaStory: Story = {
     fontFamily: '$mono',
     outlined: true,
   },
-  render: (props) => (
-    <Textarea
-      {...props}
-      id="inlineInputStory"
-      placeholder="This is a placeholder"
-    />
-  ),
+  render: (props) => {
+    const [value, setValue] = useState<string>('');
+
+    return (
+      <Textarea
+        {...props}
+        value={value}
+        onValueChange={({ target }) => setValue(target.value)}
+        id="inlineInputStory"
+        placeholder="This is a placeholder"
+      />
+    );
+  },
 };
diff --git a/packages/libs/react-ui/src/components/TextArea/TextArea.tsx b/packages/libs/react-ui/src/components/TextArea/TextArea.tsx
index fe8f558ce5..ac2824b7dc 100644
--- a/packages/libs/react-ui/src/components/TextArea/TextArea.tsx
+++ b/packages/libs/react-ui/src/components/TextArea/TextArea.tsx
@@ -9,8 +9,8 @@ import {
 import type { Sprinkles } from '@theme/sprinkles.css';
 import { sprinkles } from '@theme/sprinkles.css';
 import classNames from 'classnames';
-import type { FC, TextareaHTMLAttributes } from 'react';
-import React, { forwardRef, useState } from 'react';
+import type { ChangeEvent, FC, TextareaHTMLAttributes } from 'react';
+import React, { forwardRef } from 'react';
 
 export interface ITextareaProps
   extends Omit<
@@ -18,24 +18,21 @@ export interface ITextareaProps
       'as' | 'disabled' | 'children' | 'className' | 'id'
     >,
     Partial<Pick<Sprinkles, 'fontFamily'>> {
+  id: string;
+  value: string;
+  onValueChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
   disabled?: boolean;
   ref?: React.ForwardedRef<HTMLTextAreaElement>;
-  id: string;
   outlined?: boolean;
 }
 
 export const Textarea: FC<ITextareaProps> = forwardRef<
   HTMLTextAreaElement,
   ITextareaProps
->(function TextArea({ outlined, disabled = false, fontFamily, ...rest }, ref) {
-  const [value, setValue] = useState<string>('');
-
-  const handleValueChange = ({
-    target,
-  }: React.ChangeEvent<HTMLTextAreaElement>): void => {
-    setValue(target.value);
-  };
-
+>(function TextArea(
+  { outlined, disabled = false, fontFamily, value, onValueChange, ...rest },
+  ref,
+) {
   return (
     <div
       className={classNames(containerClass, {
@@ -48,7 +45,7 @@ export const Textarea: FC<ITextareaProps> = forwardRef<
           ref={ref}
           className={classNames(textAreaClass, sprinkles({ fontFamily }))}
           disabled={disabled}
-          onChange={handleValueChange}
+          onChange={onValueChange}
           value={value}
           {...rest}
         />
diff --git a/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.stories.tsx b/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.stories.tsx
index 9ac4eae8ed..0d5289506f 100644
--- a/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.stories.tsx
+++ b/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.stories.tsx
@@ -1,7 +1,7 @@
 import type { ITextAreaFieldProps } from '@components/TextAreaField';
 import { TextAreaField } from '@components/TextAreaField';
 import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
+import React, { useState } from 'react';
 
 const meta: Meta<ITextAreaFieldProps> = {
   title: 'Form/TextAreaField',
@@ -55,13 +55,23 @@ export const TextFieldStory: Story = {
       id: 'TextFieldStory',
       fontFamily: '$mono',
       placeholder: 'This is a placeholder',
+      value: '',
+      onValueChange: () => {},
     },
   },
-  render: ({ disabled, textAreaProps, ...rest }) => (
-    <TextAreaField
-      disabled={disabled}
-      textAreaProps={textAreaProps}
-      {...rest}
-    />
-  ),
+  render: ({ disabled, textAreaProps, ...rest }) => {
+    const [value, setValue] = useState<string>('');
+
+    return (
+      <TextAreaField
+        disabled={disabled}
+        textAreaProps={{
+          ...textAreaProps,
+          value,
+          onValueChange: ({ target }) => setValue(target.value),
+        }}
+        {...rest}
+      />
+    );
+  },
 };

From 5f24d8b35e3bc1f180390c7e849c4f259ceab8a2 Mon Sep 17 00:00:00 2001
From: Sam Ferrero <ferrerocompanylimited@gmail.com>
Date: Fri, 13 Oct 2023 11:08:42 +0100
Subject: [PATCH 12/13] chore: changed so it can be spread

---
 .../src/components/TextArea/TextArea.stories.tsx         | 2 +-
 .../libs/react-ui/src/components/TextArea/TextArea.tsx   | 9 ++-------
 .../components/TextAreaField/TextAreaField.stories.tsx   | 4 ++--
 3 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/packages/libs/react-ui/src/components/TextArea/TextArea.stories.tsx b/packages/libs/react-ui/src/components/TextArea/TextArea.stories.tsx
index bb0939ad4c..4800f19ff3 100644
--- a/packages/libs/react-ui/src/components/TextArea/TextArea.stories.tsx
+++ b/packages/libs/react-ui/src/components/TextArea/TextArea.stories.tsx
@@ -53,7 +53,7 @@ export const TextAreaStory: Story = {
       <Textarea
         {...props}
         value={value}
-        onValueChange={({ target }) => setValue(target.value)}
+        onChange={({ target }) => setValue(target.value)}
         id="inlineInputStory"
         placeholder="This is a placeholder"
       />
diff --git a/packages/libs/react-ui/src/components/TextArea/TextArea.tsx b/packages/libs/react-ui/src/components/TextArea/TextArea.tsx
index ac2824b7dc..ed865b9b54 100644
--- a/packages/libs/react-ui/src/components/TextArea/TextArea.tsx
+++ b/packages/libs/react-ui/src/components/TextArea/TextArea.tsx
@@ -20,7 +20,7 @@ export interface ITextareaProps
     Partial<Pick<Sprinkles, 'fontFamily'>> {
   id: string;
   value: string;
-  onValueChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+  onChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
   disabled?: boolean;
   ref?: React.ForwardedRef<HTMLTextAreaElement>;
   outlined?: boolean;
@@ -29,10 +29,7 @@ export interface ITextareaProps
 export const Textarea: FC<ITextareaProps> = forwardRef<
   HTMLTextAreaElement,
   ITextareaProps
->(function TextArea(
-  { outlined, disabled = false, fontFamily, value, onValueChange, ...rest },
-  ref,
-) {
+>(function TextArea({ outlined, disabled = false, fontFamily, ...rest }, ref) {
   return (
     <div
       className={classNames(containerClass, {
@@ -45,8 +42,6 @@ export const Textarea: FC<ITextareaProps> = forwardRef<
           ref={ref}
           className={classNames(textAreaClass, sprinkles({ fontFamily }))}
           disabled={disabled}
-          onChange={onValueChange}
-          value={value}
           {...rest}
         />
       </div>
diff --git a/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.stories.tsx b/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.stories.tsx
index 0d5289506f..5e2c5f4d2c 100644
--- a/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.stories.tsx
+++ b/packages/libs/react-ui/src/components/TextAreaField/TextAreaField.stories.tsx
@@ -56,7 +56,7 @@ export const TextFieldStory: Story = {
       fontFamily: '$mono',
       placeholder: 'This is a placeholder',
       value: '',
-      onValueChange: () => {},
+      onChange: () => {},
     },
   },
   render: ({ disabled, textAreaProps, ...rest }) => {
@@ -68,7 +68,7 @@ export const TextFieldStory: Story = {
         textAreaProps={{
           ...textAreaProps,
           value,
-          onValueChange: ({ target }) => setValue(target.value),
+          onChange: ({ target }) => setValue(target.value),
         }}
         {...rest}
       />

From 95fbe41ea1e61a5e137e8009051481b840bb53d9 Mon Sep 17 00:00:00 2001
From: Sam Ferrero <ferrerocompanylimited@gmail.com>
Date: Fri, 13 Oct 2023 12:19:30 +0100
Subject: [PATCH 13/13] chore: native values

---
 packages/libs/react-ui/src/components/TextArea/TextArea.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/libs/react-ui/src/components/TextArea/TextArea.tsx b/packages/libs/react-ui/src/components/TextArea/TextArea.tsx
index ed865b9b54..498dde4afb 100644
--- a/packages/libs/react-ui/src/components/TextArea/TextArea.tsx
+++ b/packages/libs/react-ui/src/components/TextArea/TextArea.tsx
@@ -9,7 +9,7 @@ import {
 import type { Sprinkles } from '@theme/sprinkles.css';
 import { sprinkles } from '@theme/sprinkles.css';
 import classNames from 'classnames';
-import type { ChangeEvent, FC, TextareaHTMLAttributes } from 'react';
+import type { FC, TextareaHTMLAttributes } from 'react';
 import React, { forwardRef } from 'react';
 
 export interface ITextareaProps
@@ -19,8 +19,6 @@ export interface ITextareaProps
     >,
     Partial<Pick<Sprinkles, 'fontFamily'>> {
   id: string;
-  value: string;
-  onChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
   disabled?: boolean;
   ref?: React.ForwardedRef<HTMLTextAreaElement>;
   outlined?: boolean;