From 807e22a17b43e7b49fbd413d17bf5cf6b15ac512 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rui=20Sim=C3=A3o?= <rui.daniel.simao@gmail.com>
Date: Fri, 2 Feb 2024 11:49:13 +0000
Subject: [PATCH] feat(components): add textarea

---
 packages/components/src/Input/BaseInput.tsx   |  48 ++++++-
 packages/components/src/Input/Input.style.tsx |   7 +-
 packages/components/src/Input/Input.tsx       |   5 +-
 .../src/TextArea/TextArea.stories.tsx         |  98 ++++++++++++++
 packages/components/src/TextArea/TextArea.tsx |  52 ++++++++
 .../src/TextArea/__tests__/TextArea.test.tsx  | 123 ++++++++++++++++++
 packages/components/src/TextArea/index.tsx    |   2 +
 7 files changed, 326 insertions(+), 9 deletions(-)
 create mode 100644 packages/components/src/TextArea/TextArea.stories.tsx
 create mode 100644 packages/components/src/TextArea/TextArea.tsx
 create mode 100644 packages/components/src/TextArea/__tests__/TextArea.test.tsx
 create mode 100644 packages/components/src/TextArea/index.tsx

diff --git a/packages/components/src/Input/BaseInput.tsx b/packages/components/src/Input/BaseInput.tsx
index 474768bbe..2ab34c963 100644
--- a/packages/components/src/Input/BaseInput.tsx
+++ b/packages/components/src/Input/BaseInput.tsx
@@ -1,5 +1,15 @@
-import { Sizes } from '@interlay/theme';
-import { FocusEvent, forwardRef, InputHTMLAttributes, ReactNode, useEffect, useRef, useState } from 'react';
+import { Sizes, Spacing } from '@interlay/theme';
+import {
+  FocusEvent,
+  forwardRef,
+  InputHTMLAttributes,
+  ReactNode,
+  TextareaHTMLAttributes,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+import { ElementTypeProp } from 'src/utils/types';
 
 import { Field, FieldProps, useFieldProps } from '../Field';
 import { HelperTextProps } from '../HelperText';
@@ -8,6 +18,19 @@ import { hasError } from '../utils/input';
 
 import { Adornment, StyledBaseInput } from './Input.style';
 
+// TODO: might need to consolidate this later
+interface HTMLInputProps extends ElementTypeProp {
+  elementType?: 'input';
+  inputProps: InputHTMLAttributes<HTMLInputElement>;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+interface HTMLTextAreaProps extends ElementTypeProp {
+  elementType?: 'textarea';
+  inputProps: TextareaHTMLAttributes<HTMLTextAreaElement>;
+  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+
 type Props = {
   label?: ReactNode;
   labelProps?: LabelProps;
@@ -18,11 +41,10 @@ type Props = {
   defaultValue?: string | ReadonlyArray<string> | number;
   size?: Sizes;
   isInvalid?: boolean;
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  minHeight?: Spacing;
   onFocus?: (e: FocusEvent<Element>) => void;
   onBlur?: (e: FocusEvent<Element>) => void;
-  inputProps: InputHTMLAttributes<HTMLInputElement>;
-};
+} & (HTMLInputProps | HTMLTextAreaProps);
 
 type InheritAttrs = Omit<
   HelperTextProps &
@@ -33,7 +55,17 @@ type BaseInputProps = Props & InheritAttrs;
 
 const BaseInput = forwardRef<HTMLInputElement, BaseInputProps>(
   (
-    { startAdornment, endAdornment, bottomAdornment, size = 'medium', isInvalid, inputProps, ...props },
+    {
+      startAdornment,
+      endAdornment,
+      bottomAdornment,
+      size = 'medium',
+      isInvalid,
+      inputProps,
+      minHeight,
+      elementType = 'input',
+      ...props
+    },
     ref
   ): JSX.Element => {
     const endAdornmentRef = useRef<HTMLDivElement>(null);
@@ -54,12 +86,14 @@ const BaseInput = forwardRef<HTMLInputElement, BaseInputProps>(
       <Field {...fieldProps}>
         {startAdornment && <Adornment $position='left'>{startAdornment}</Adornment>}
         <StyledBaseInput
-          ref={ref}
+          ref={ref as any}
           $adornments={{ bottom: !!bottomAdornment, left: !!startAdornment, right: !!endAdornment }}
           $endAdornmentWidth={endAdornmentWidth}
           $hasError={error}
           $isDisabled={!!inputProps.disabled}
+          $minHeight={minHeight}
           $size={size}
+          as={elementType}
           {...inputProps}
         />
         {bottomAdornment && <Adornment $position='bottom'>{bottomAdornment}</Adornment>}
diff --git a/packages/components/src/Input/Input.style.tsx b/packages/components/src/Input/Input.style.tsx
index 485482eff..6976bfcfc 100644
--- a/packages/components/src/Input/Input.style.tsx
+++ b/packages/components/src/Input/Input.style.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { theme } from '@interlay/theme';
+import { Spacing, theme } from '@interlay/theme';
 import { Placement, Sizes } from '@interlay/theme';
 
 type BaseInputProps = {
@@ -8,6 +8,7 @@ type BaseInputProps = {
   $isDisabled: boolean;
   $hasError: boolean;
   $endAdornmentWidth: number;
+  $minHeight?: Spacing;
 };
 
 type AdornmentProps = {
@@ -60,6 +61,10 @@ const StyledBaseInput = styled.input<BaseInputProps>`
   }};
   padding-bottom: ${({ $adornments }) => ($adornments.bottom ? theme.spacing.spacing6 : theme.spacing.spacing2)};
 
+  min-height: ${({ $minHeight, as }) =>
+    $minHeight ? theme.spacing[$minHeight] : as === 'textarea' && theme.spacing.spacing16};
+  resize: ${({ as }) => as === 'textarea' && 'vertical'};
+
   &:hover:not(:disabled):not(:focus) {
     border: ${(props) => !props.$isDisabled && !props.$hasError && theme.border.focus};
   }
diff --git a/packages/components/src/Input/Input.tsx b/packages/components/src/Input/Input.tsx
index 620db899a..6e98e54dd 100644
--- a/packages/components/src/Input/Input.tsx
+++ b/packages/components/src/Input/Input.tsx
@@ -9,6 +9,7 @@ type Props = {
   value?: string;
   defaultValue?: string;
   onValueChange?: (value: string) => void;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
 type InheritAttrs = Omit<BaseInputProps, keyof Props | 'errorMessageProps' | 'descriptionProps' | 'inputProps'>;
@@ -18,13 +19,14 @@ type AriaAttrs = Omit<AriaTextFieldOptions<'input'>, (keyof Props & InheritAttrs
 type InputProps = Props & InheritAttrs & AriaAttrs;
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ isInvalid, onValueChange, onChange, ...props }, ref): JSX.Element => {
+  ({ isInvalid, onValueChange, onChange, elementType = 'input', ...props }, ref): JSX.Element => {
     const inputRef = useDOMRef(ref);
     // We are specifing `validationState` so that when there are errors, `aria-invalid` is set to `true`
     const { inputProps, descriptionProps, errorMessageProps, labelProps } = useTextField(
       {
         ...props,
         isInvalid: isInvalid || !!props.errorMessage,
+        inputElementType: elementType,
         onChange: onValueChange
       },
       inputRef
@@ -34,6 +36,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       <BaseInput
         ref={inputRef}
         descriptionProps={descriptionProps}
+        elementType={elementType}
         errorMessageProps={errorMessageProps}
         inputProps={mergeProps(inputProps, { onChange })}
         labelProps={labelProps}
diff --git a/packages/components/src/TextArea/TextArea.stories.tsx b/packages/components/src/TextArea/TextArea.stories.tsx
new file mode 100644
index 000000000..5581cde0e
--- /dev/null
+++ b/packages/components/src/TextArea/TextArea.stories.tsx
@@ -0,0 +1,98 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { InformationCircle } from '@interlay/icons';
+
+import { Flex, Span } from '..';
+
+import { TextArea, TextAreaProps } from '.';
+
+export default {
+  title: 'Forms/TextArea',
+  component: TextArea,
+  parameters: {
+    layout: 'centered'
+  },
+  args: {
+    label: 'Address'
+  }
+} as Meta<typeof TextArea>;
+
+export const Default: StoryObj<TextAreaProps> = {};
+
+export const Controlled: StoryFn<TextAreaProps> = (args) => {
+  const [state, setState] = useState<string>();
+
+  return <TextArea {...args} value={state} onChange={(e) => setState(e.target.value)} />;
+};
+
+export const DefaultValue: StoryObj<TextAreaProps> = {
+  args: {
+    defaultValue: 'Sesame Street'
+  }
+};
+
+export const WithDescription: StoryObj<TextAreaProps> = {
+  args: {
+    description: 'Please enter your street address'
+  }
+};
+
+export const WithErrorMessage: StoryObj<TextAreaProps> = {
+  args: {
+    errorMessage: 'Please enter your street address'
+  }
+};
+
+export const WithMultipleErrorMessage: StoryObj<TextAreaProps> = {
+  args: {
+    errorMessage: ['Please enter your street address', 'Please enter your street address']
+  }
+};
+
+export const SideLabel: StoryObj<TextAreaProps> = {
+  args: {
+    labelPosition: 'side'
+  }
+};
+
+export const MaxWidth: StoryObj<TextAreaProps> = {
+  args: {
+    maxWidth: 'spacing28'
+  }
+};
+
+export const MinHeight: StoryObj<TextAreaProps> = {
+  args: {
+    minHeight: 'spacing28'
+  }
+};
+
+export const Adornments: StoryFn<TextAreaProps> = (args) => (
+  <Flex direction='column'>
+    <TextArea {...args} label='Start Adornment' startAdornment={<InformationCircle />} />
+    <TextArea {...args} endAdornment={<InformationCircle />} label='End Adornment' />
+    <TextArea
+      {...args}
+      bottomAdornment={
+        <Span color='tertiary' size='xs'>
+          $0.00
+        </Span>
+      }
+      label='Bottom Adornment'
+    />
+  </Flex>
+);
+
+export const Sizes: StoryFn<TextAreaProps> = (args) => (
+  <Flex direction='column'>
+    <TextArea {...args} label='Small' size='small' />
+    <TextArea {...args} label='Medium' />
+    <TextArea {...args} label='Large' size='large' />
+  </Flex>
+);
+
+export const Disabled: StoryObj<TextAreaProps> = {
+  args: {
+    isDisabled: true
+  }
+};
diff --git a/packages/components/src/TextArea/TextArea.tsx b/packages/components/src/TextArea/TextArea.tsx
new file mode 100644
index 000000000..7aa56b5e2
--- /dev/null
+++ b/packages/components/src/TextArea/TextArea.tsx
@@ -0,0 +1,52 @@
+import { useDOMRef } from '@interlay/hooks';
+import { AriaTextFieldOptions, useTextField } from '@react-aria/textfield';
+import { mergeProps } from '@react-aria/utils';
+import { forwardRef } from 'react';
+
+import { BaseInput, BaseInputProps } from '../Input';
+
+type Props = {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+};
+
+type InheritAttrs = Omit<BaseInputProps, keyof Props | 'errorMessageProps' | 'descriptionProps' | 'inputProps'>;
+
+type AriaAttrs = Omit<AriaTextFieldOptions<'textarea'>, (keyof Props & InheritAttrs) | 'onChange'>;
+
+type TextAreaProps = Props & InheritAttrs & AriaAttrs;
+
+const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  ({ isInvalid, onValueChange, onChange, elementType = 'textarea', ...props }, ref): JSX.Element => {
+    const inputRef = useDOMRef(ref);
+    // We are specifing `validationState` so that when there are errors, `aria-invalid` is set to `true`
+    const { inputProps, descriptionProps, errorMessageProps, labelProps } = useTextField(
+      {
+        ...props,
+        isInvalid: isInvalid || !!props.errorMessage,
+        inputElementType: elementType,
+        onChange: onValueChange
+      },
+      inputRef
+    );
+
+    return (
+      <BaseInput
+        ref={inputRef as any}
+        descriptionProps={descriptionProps}
+        elementType={elementType}
+        errorMessageProps={errorMessageProps}
+        inputProps={mergeProps(inputProps, { onChange })}
+        labelProps={labelProps}
+        {...props}
+      />
+    );
+  }
+);
+
+TextArea.displayName = 'TextArea';
+
+export { TextArea };
+export type { TextAreaProps };
diff --git a/packages/components/src/TextArea/__tests__/TextArea.test.tsx b/packages/components/src/TextArea/__tests__/TextArea.test.tsx
new file mode 100644
index 000000000..ce6f6210c
--- /dev/null
+++ b/packages/components/src/TextArea/__tests__/TextArea.test.tsx
@@ -0,0 +1,123 @@
+import { blur, focus, testA11y } from '@interlay/test-utils';
+import { render, screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { createRef, useState } from 'react';
+
+import { TextArea } from '..';
+
+describe('TextArea', () => {
+  it('should render correctly', () => {
+    const wrapper = render(<TextArea label='Name' />);
+
+    expect(() => wrapper.unmount()).not.toThrow();
+  });
+
+  it('ref should be forwarded', () => {
+    const ref = createRef<HTMLTextAreaElement>();
+
+    render(<TextArea ref={ref} label='label' />);
+
+    expect(ref.current).not.toBeNull();
+  });
+
+  it('should pass a11y', async () => {
+    await testA11y(<TextArea label='label' />);
+  });
+
+  it('should render default value', () => {
+    render(<TextArea defaultValue='John Doe' label='Name' />);
+
+    expect(screen.getByRole('textbox', { name: /Name/i })).toHaveValue('John Doe');
+  });
+
+  it('should control value', async () => {
+    const Component = () => {
+      const [value, setValue] = useState('John');
+
+      const handleValueChange = (value?: string | number) => setValue(value?.toString() || '');
+
+      return <TextArea label='Name' value={value} onValueChange={handleValueChange} />;
+    };
+
+    render(<Component />);
+
+    const input = screen.getByRole('textbox', { name: /Name/i });
+
+    expect(input).toHaveValue('John');
+
+    userEvent.type(input, 'y');
+
+    await waitFor(() => {
+      expect(input).toHaveValue('Johny');
+    });
+  });
+
+  it('should be disabled', () => {
+    render(<TextArea isDisabled label='Name' />);
+
+    expect(screen.getByRole('textbox', { name: /Name/i })).toBeDisabled();
+  });
+
+  it('should render description', () => {
+    render(<TextArea description='Please enter name' label='Name' />);
+
+    expect(screen.getByRole('textbox', { name: /Name/i })).toHaveAccessibleDescription(/please enter name$/i);
+  });
+
+  it('should render error message', () => {
+    render(<TextArea errorMessage='Please enter name' label='Name' />);
+
+    expect(screen.getByRole('textbox', { name: /Name/i })).toBeInvalid();
+    expect(screen.getByRole('textbox', { name: /Name/i })).toHaveAccessibleDescription(/please enter name$/i);
+  });
+
+  it('should be read only', () => {
+    render(<TextArea isReadOnly label='Name' />);
+
+    expect(screen.getByRole('textbox', { name: /Name/i })).toHaveAttribute('readonly');
+  });
+
+  it('should be read only', () => {
+    render(<TextArea isRequired label='Name' />);
+
+    expect(screen.getByRole('textbox', { name: /Name/i })).toHaveAttribute('aria-required', 'true');
+  });
+
+  it('should emit onChange', async () => {
+    const handleChange = jest.fn();
+
+    render(<TextArea label='Name' onChange={handleChange} />);
+
+    userEvent.type(screen.getByRole('textbox', { name: /Name/i }), 'j');
+
+    await waitFor(() => {
+      expect(handleChange).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('should emit onValueChange', async () => {
+    const handleValueChange = jest.fn();
+
+    render(<TextArea label='Name' onValueChange={handleValueChange} />);
+
+    userEvent.type(screen.getByRole('textbox', { name: /Name/i }), 'j');
+
+    await waitFor(() => {
+      expect(handleValueChange).toHaveBeenCalledTimes(1);
+      expect(handleValueChange).toHaveBeenCalledWith('j');
+    });
+  });
+
+  it('should emit onBlur', async () => {
+    const handleBlur = jest.fn();
+
+    render(<TextArea label='Name' onBlur={handleBlur} />);
+
+    focus(screen.getByRole('textbox', { name: /Name/i }));
+    blur(screen.getByRole('textbox', { name: /Name/i }));
+
+    await waitFor(() => {
+      expect(handleBlur).toHaveBeenCalledTimes(1);
+    });
+  });
+});
diff --git a/packages/components/src/TextArea/index.tsx b/packages/components/src/TextArea/index.tsx
new file mode 100644
index 000000000..1c303c305
--- /dev/null
+++ b/packages/components/src/TextArea/index.tsx
@@ -0,0 +1,2 @@
+export { TextArea } from './TextArea';
+export type { TextAreaProps } from './TextArea';