From 8cb48332a7d7fa856009a2d3d06faeec6e087903 Mon Sep 17 00:00:00 2001
From: Khayal Alasgarov <khayal.alasgarov@gsa.gov>
Date: Mon, 27 Jan 2025 15:41:40 -0800
Subject: [PATCH] feat: create textarea (long answer) component tckt-399 (#459)

* feat: create long answer textarea component TCKT-399

* test(storybook): add stories for textarea component TCKT-399

* feat: create long answer textarea edit component TCKT-399

* test(storybook): add stories for textarea edit component TCKT-399

* feat: add schema config and validtion logic for textarea TCKT-399

* test: add schema config and validtion tests for textarea TCKT-399

---------

Co-authored-by: Khayal Alasgarov <khayal.alasgarov@gsa.com>
---
 packages/common/src/locales/en/app.ts         |   7 +
 .../components/TextArea/TextArea.stories.tsx  |  81 +++++++++
 .../src/Form/components/TextArea/index.tsx    |  68 +++++++
 packages/design/src/Form/components/index.tsx |   2 +
 .../FormEdit/AddPatternDropdown.tsx           |   1 +
 .../TextAreaPattermEdit.stories.tsx           |  52 ++++++
 .../components/TextAreaPatternEdit/index.tsx  | 149 +++++++++++++++
 .../FormManager/FormEdit/components/index.ts  |   2 +
 packages/forms/src/components.ts              |  11 ++
 packages/forms/src/patterns/index.ts          |   3 +
 .../src/patterns/text-area/text-area.test.ts  | 170 ++++++++++++++++++
 .../forms/src/patterns/text-area/text-area.ts |  95 ++++++++++
 12 files changed, 641 insertions(+)
 create mode 100644 packages/design/src/Form/components/TextArea/TextArea.stories.tsx
 create mode 100644 packages/design/src/Form/components/TextArea/index.tsx
 create mode 100644 packages/design/src/FormManager/FormEdit/components/TextAreaPatternEdit/TextAreaPattermEdit.stories.tsx
 create mode 100644 packages/design/src/FormManager/FormEdit/components/TextAreaPatternEdit/index.tsx
 create mode 100644 packages/forms/src/patterns/text-area/text-area.test.ts
 create mode 100644 packages/forms/src/patterns/text-area/text-area.ts

diff --git a/packages/common/src/locales/en/app.ts b/packages/common/src/locales/en/app.ts
index 2e5558a5..1e4bb864 100644
--- a/packages/common/src/locales/en/app.ts
+++ b/packages/common/src/locales/en/app.ts
@@ -30,6 +30,13 @@ export const en = {
       displayName: 'Short answer',
       maxLength: 'Maximum length',
     },
+    textarea: {
+      ...defaults,
+      displayName: 'Long answer',
+      maxLength: 'Maximum length',
+      hintLabel: 'Hint Text (optional)',
+      hint: 'The more specific you can be, the better. Use the space below and/or attach additional pages.',
+    },
     packageDownload: {
       ...defaults,
       displayName: 'Package download',
diff --git a/packages/design/src/Form/components/TextArea/TextArea.stories.tsx b/packages/design/src/Form/components/TextArea/TextArea.stories.tsx
new file mode 100644
index 00000000..7e0e1d52
--- /dev/null
+++ b/packages/design/src/Form/components/TextArea/TextArea.stories.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import TextArea from './index.js';
+
+const meta: Meta<typeof TextArea> = {
+  title: 'patterns/TextArea',
+  component: TextArea,
+  decorators: [
+    (Story, args) => {
+      const FormDecorator = () => {
+        const formMethods = useForm();
+        return (
+          <div style={{ padding: '10px' }}>
+            <FormProvider {...formMethods}>
+              <Story {...args} />
+            </FormProvider>
+          </div>
+        );
+      };
+      return <FormDecorator />;
+    },
+  ],
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Required: StoryObj<typeof TextArea> = {
+  args: {
+    _patternId: '',
+    type: 'text-area',
+    inputId: 'test-textarea',
+    value: '',
+    label: 'Please enter your comments',
+    required: true,
+    maxLength: 500,
+  },
+};
+
+export const NotRequired: StoryObj<typeof TextArea> = {
+  args: {
+    _patternId: '',
+    type: 'text-area',
+    inputId: 'test-textarea',
+    value: '',
+    label: 'Please enter your comments',
+    required: false,
+    maxLength: 500,
+  },
+};
+
+export const ErrorState: StoryObj<typeof TextArea> = {
+  args: {
+    _patternId: '',
+    type: 'text-area',
+    inputId: 'test-textarea',
+    value: '',
+    label: 'Please enter your comments',
+    required: true,
+    maxLength: 500,
+    error: {
+      type: 'required',
+      message: 'This field is required',
+    },
+  },
+};
+
+export const WithHint: StoryObj<typeof TextArea> = {
+  args: {
+    _patternId: '',
+    type: 'text-area',
+    inputId: 'test-textarea',
+    value: '',
+    label: 'Please enter your comments',
+    required: false,
+    maxLength: 500,
+    hint: 'This is a hint that provides additional context to the user.',
+  },
+};
diff --git a/packages/design/src/Form/components/TextArea/index.tsx b/packages/design/src/Form/components/TextArea/index.tsx
new file mode 100644
index 00000000..4d13960a
--- /dev/null
+++ b/packages/design/src/Form/components/TextArea/index.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useFormContext } from 'react-hook-form';
+
+import { type TextAreaProps } from '@atj/forms';
+import { type PatternComponent } from '../../../Form/index.js';
+
+const TextArea: PatternComponent<TextAreaProps> = ({
+  inputId,
+  label,
+  required,
+  error,
+  value,
+  hint,
+  maxLength,
+}) => {
+  const { register } = useFormContext();
+  const errorId = `input-error-message-${inputId}`;
+  const hintId = `input-hint-${inputId}`;
+
+  return (
+    <fieldset className="usa-fieldset">
+      <div
+        className={classNames('usa-form-group margin-top-2', {
+          'usa-form-group--error': error,
+        })}
+      >
+        <div className={classNames('usa-form-group margin-top-2')}>
+          <label
+            className={classNames('usa-label', {
+              'usa-label--error': error,
+            })}
+            htmlFor={`textarea-${inputId}`}
+          >
+            {label}
+            {required && <span className="required-indicator">*</span>}
+          </label>
+          {hint && (
+            <div className="usa-hint" id={hintId}>
+              {hint}
+            </div>
+          )}
+          {error && (
+            <div className="usa-error-message" id={errorId} role="alert">
+              {error.message}
+            </div>
+          )}
+          <textarea
+            className={classNames('usa-textarea', {
+              'usa-textarea--error': error,
+            })}
+            id={`textarea-${inputId}`}
+            defaultValue={value}
+            {...register(inputId, { required })}
+            aria-describedby={
+              `${hint ? `${hintId}` : ''}${error ? ` ${errorId}` : ''}`.trim() ||
+              undefined
+            }
+            maxLength={maxLength}
+            style={{ resize: 'none', overflow: 'auto', height: '100px' }}
+          />
+        </div>
+      </div>
+    </fieldset>
+  );
+};
+
+export default TextArea;
diff --git a/packages/design/src/Form/components/index.tsx b/packages/design/src/Form/components/index.tsx
index 2fe213d6..661385c1 100644
--- a/packages/design/src/Form/components/index.tsx
+++ b/packages/design/src/Form/components/index.tsx
@@ -21,6 +21,7 @@ import SelectDropdown from './SelectDropdown/index.js';
 import SocialSecurityNumber from './SocialSecurityNumber/index.js';
 import SubmissionConfirmation from './SubmissionConfirmation/index.js';
 import TextInput from './TextInput/index.js';
+import TextArea from './TextArea/index.js';
 
 export const defaultPatternComponents: ComponentForPattern = {
   attachment: Attachment as PatternComponent,
@@ -44,4 +45,5 @@ export const defaultPatternComponents: ComponentForPattern = {
   sequence: Sequence as PatternComponent,
   'social-security-number': SocialSecurityNumber as PatternComponent,
   'submission-confirmation': SubmissionConfirmation as PatternComponent,
+  'text-area': TextArea as PatternComponent,
 };
diff --git a/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx b/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx
index ded9e669..58101935 100644
--- a/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx
+++ b/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx
@@ -121,6 +121,7 @@ const sidebarPatterns: DropdownPattern[] = [
   ['form-summary', defaultFormConfig.patterns['form-summary']],
   ['gender-id', defaultFormConfig.patterns['gender-id']],
   ['input', defaultFormConfig.patterns['input']],
+  ['text-area', defaultFormConfig.patterns['text-area']],
   ['package-download', defaultFormConfig.patterns['package-download']],
   ['paragraph', defaultFormConfig.patterns['paragraph']],
   ['phone-number', defaultFormConfig.patterns['phone-number']],
diff --git a/packages/design/src/FormManager/FormEdit/components/TextAreaPatternEdit/TextAreaPattermEdit.stories.tsx b/packages/design/src/FormManager/FormEdit/components/TextAreaPatternEdit/TextAreaPattermEdit.stories.tsx
new file mode 100644
index 00000000..32c4a0e2
--- /dev/null
+++ b/packages/design/src/FormManager/FormEdit/components/TextAreaPatternEdit/TextAreaPattermEdit.stories.tsx
@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { enLocale as message } from '@atj/common';
+import { type TextAreaPattern } from '@atj/forms';
+
+import {
+  createPatternEditStoryMeta,
+  testEmptyFormLabelError,
+  testUpdateFormFieldOnSubmit,
+} from '../common/story-helper.js';
+import FormEdit from '../../index.js';
+
+const pattern: TextAreaPattern = {
+  id: '1',
+  type: 'text-area',
+  data: {
+    label: message.patterns.textarea.displayName,
+    required: false,
+    maxLength: 256,
+    initial: 'Initial text',
+  },
+};
+
+const storyConfig: Meta = {
+  title: 'Edit components/TextAreaPattern',
+  ...createPatternEditStoryMeta({
+    pattern,
+  }),
+} as Meta<typeof FormEdit>;
+export default storyConfig;
+
+export const Basic: StoryObj<typeof FormEdit> = {
+  play: async ({ canvasElement }) => {
+    await testUpdateFormFieldOnSubmit(
+      canvasElement,
+      message.patterns.textarea.displayName,
+      message.patterns.textarea.fieldLabel,
+      'Updated textarea pattern'
+    );
+  },
+};
+
+export const Error: StoryObj<typeof FormEdit> = {
+  play: async ({ canvasElement }) => {
+    await testEmptyFormLabelError(
+      canvasElement,
+      message.patterns.textarea.displayName,
+      message.patterns.textarea.fieldLabel,
+      message.patterns.textarea.fieldLabelRequired
+    );
+  },
+};
diff --git a/packages/design/src/FormManager/FormEdit/components/TextAreaPatternEdit/index.tsx b/packages/design/src/FormManager/FormEdit/components/TextAreaPatternEdit/index.tsx
new file mode 100644
index 00000000..419a8487
--- /dev/null
+++ b/packages/design/src/FormManager/FormEdit/components/TextAreaPatternEdit/index.tsx
@@ -0,0 +1,149 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import { PatternId, TextAreaProps } from '@atj/forms';
+import { TextAreaPattern } from '@atj/forms';
+
+import TextArea from '../../../../Form/components/TextArea/index.js';
+import { useFormManagerStore } from '../../../store.js';
+import { PatternEditComponent } from '../../types.js';
+
+import { PatternEditActions } from '../common/PatternEditActions.js';
+import { PatternEditForm } from '../common/PatternEditForm.js';
+import { usePatternEditFormContext } from '../common/hooks.js';
+import { enLocale as message } from '@atj/common';
+
+const TextAreaPatternEdit: PatternEditComponent<TextAreaProps> = ({
+  context,
+  focus,
+  previewProps,
+}) => {
+  return (
+    <>
+      {focus ? (
+        <PatternEditForm
+          pattern={focus.pattern}
+          editComponent={<EditComponent patternId={focus.pattern.id} />}
+        ></PatternEditForm>
+      ) : (
+        <div className="padding-left-3 padding-bottom-3 padding-right-3">
+          <TextArea context={context} {...previewProps} />
+        </div>
+      )}
+    </>
+  );
+};
+
+const EditComponent = ({ patternId }: { patternId: PatternId }) => {
+  const pattern = useFormManagerStore<TextAreaPattern>(
+    state => state.session.form.patterns[patternId]
+  );
+  const { fieldId, register, getFieldState } =
+    usePatternEditFormContext<TextAreaPattern>(patternId);
+
+  const label = getFieldState('label');
+  const maxLength = getFieldState('maxLength');
+  const hint = getFieldState('hint');
+  const maxLengthAttributes =
+    pattern.data.maxLength > 0
+      ? {
+          defaultValue: pattern.data.maxLength,
+        }
+      : {};
+
+  return (
+    <div className="grid-row grid-gap-1">
+      <div className="tablet:grid-col-12 mobile-lg:grid-col-12">
+        <label
+          className={classNames('usa-label', {
+            'usa-label--error': label.error,
+          })}
+          htmlFor={fieldId('label')}
+        >
+          {message.patterns.textarea.fieldLabel}
+          {label.error ? (
+            <span className="usa-error-message" role="alert">
+              {label.error.message}
+            </span>
+          ) : null}
+          <input
+            className={classNames('usa-input bg-primary-lighter', {
+              'usa-input--error': label.error,
+            })}
+            id={fieldId('label')}
+            defaultValue={pattern.data.label}
+            {...register('label')}
+            type="text"
+            autoFocus
+          ></input>
+        </label>
+      </div>
+      <div className="tablet:grid-col-12 mobile-lg:grid-col-12 margin-bottom-2">
+        <label
+          className={classNames('usa-label', {
+            'usa-label--error': hint.error,
+          })}
+        >
+          {message.patterns.textarea.hintLabel}
+          {hint.error ? (
+            <span className="usa-error-message" role="alert">
+              {hint.error.message}
+            </span>
+          ) : null}
+          <input
+            className="usa-input"
+            id={fieldId('hint')}
+            defaultValue={pattern.data.hint}
+            {...register('hint')}
+            type="text"
+          />
+        </label>
+      </div>
+      <div className="tablet:grid-col-6 mobile-lg:grid-col-12">
+        <label
+          className={classNames('usa-label', {
+            'usa-label--error': maxLength.error,
+          })}
+          htmlFor={fieldId('maxLength')}
+        >
+          {maxLength.error ? (
+            <span className="usa-error-message" role="alert">
+              {maxLength.error.message}
+            </span>
+          ) : null}
+          {message.patterns.textarea.maxLength}
+          <input
+            className="usa-input bg-primary-lighter text-bold"
+            id={fieldId('maxLength')}
+            {...maxLengthAttributes}
+            {...register('maxLength')}
+            type="text"
+          ></input>
+        </label>
+      </div>
+      <div className="grid-col-12">
+        <PatternEditActions>
+          <span className="usa-checkbox">
+            <input
+              style={{ display: 'inline-block' }}
+              className="usa-checkbox__input bg-primary-lighter"
+              type="checkbox"
+              id={fieldId('required')}
+              {...register('required')}
+              defaultChecked={pattern.data.required}
+            />
+            <label
+              style={{ display: 'inline-block' }}
+              className="usa-checkbox__label"
+              htmlFor={fieldId('required')}
+            >
+              Required
+            </label>
+          </span>
+        </PatternEditActions>
+      </div>
+    </div>
+  );
+};
+
+export default TextAreaPatternEdit;
diff --git a/packages/design/src/FormManager/FormEdit/components/index.ts b/packages/design/src/FormManager/FormEdit/components/index.ts
index 86a4640a..0e532425 100644
--- a/packages/design/src/FormManager/FormEdit/components/index.ts
+++ b/packages/design/src/FormManager/FormEdit/components/index.ts
@@ -23,6 +23,7 @@ import RichTextPatternEdit from './RichTextPatternEdit/index.js';
 import SelectDropdownPatternEdit from './SelectDropdownPatternEdit/index.js';
 import SocialSecurityNumberPatternEdit from './SocialSecurityNumberPatternEdit/index.js';
 import SubmissionConfirmationEdit from './SubmissionConfirmationEdit.js';
+import TextAreaPatternEdit from './TextAreaPatternEdit/index.js';
 
 export const defaultPatternEditComponents: EditComponentForPattern = {
   attachment: AttachmentPatternEdit as PatternEditComponent,
@@ -46,4 +47,5 @@ export const defaultPatternEditComponents: EditComponentForPattern = {
   'social-security-number':
     SocialSecurityNumberPatternEdit as PatternEditComponent,
   'submission-confirmation': SubmissionConfirmationEdit as PatternEditComponent,
+  'text-area': TextAreaPatternEdit as PatternEditComponent,
 };
diff --git a/packages/forms/src/components.ts b/packages/forms/src/components.ts
index 2c0ab493..588bb0a1 100644
--- a/packages/forms/src/components.ts
+++ b/packages/forms/src/components.ts
@@ -24,6 +24,17 @@ export type TextInputProps = PatternProps<{
   error?: FormError;
 }>;
 
+export type TextAreaProps = PatternProps<{
+  type: 'text-area';
+  inputId: string;
+  value: string;
+  label: string;
+  required: boolean;
+  error?: FormError;
+  hint?: string;
+  maxLength: number;
+}>;
+
 export type AttachmentProps = PatternProps<{
   type: 'attachment';
   inputId: string;
diff --git a/packages/forms/src/patterns/index.ts b/packages/forms/src/patterns/index.ts
index e92c40a2..4f460978 100644
--- a/packages/forms/src/patterns/index.ts
+++ b/packages/forms/src/patterns/index.ts
@@ -20,6 +20,7 @@ import { richTextConfig } from './rich-text.js';
 import { selectDropdownConfig } from './select-dropdown/select-dropdown.js';
 import { sequenceConfig } from './sequence.js';
 import { socialSecurityNumberConfig } from './social-security-number/social-security-number.js';
+import { textAreaConfig } from './text-area/text-area.js';
 
 // This configuration reflects what a user of this library would provide for
 // their usage scenarios. For now, keep here in the form service until we
@@ -46,6 +47,7 @@ export const defaultFormConfig: FormConfig = {
     'select-dropdown': selectDropdownConfig,
     'social-security-number': socialSecurityNumberConfig,
     sequence: sequenceConfig,
+    'text-area': textAreaConfig,
   },
 } as const;
 
@@ -74,3 +76,4 @@ export * from './repeater/index.js';
 export * from './select-dropdown/select-dropdown.js';
 export * from './social-security-number/social-security-number.js';
 export * from './sequence.js';
+export * from './text-area/text-area.js';
diff --git a/packages/forms/src/patterns/text-area/text-area.test.ts b/packages/forms/src/patterns/text-area/text-area.test.ts
new file mode 100644
index 00000000..3bf03bf1
--- /dev/null
+++ b/packages/forms/src/patterns/text-area/text-area.test.ts
@@ -0,0 +1,170 @@
+import { describe, expect, it } from 'vitest';
+import {
+  textAreaConfig,
+  createTextAreaSchema,
+  type TextAreaPattern,
+  type TextAreaPatternOutput,
+} from './text-area.js';
+
+describe('TextAreaPattern tests', () => {
+  describe('createTextAreaSchema', () => {
+    it('should create schema for required TextArea input', () => {
+      const data: TextAreaPattern['data'] = {
+        label: 'Test TextArea Input Label',
+        initial: '',
+        required: true,
+        maxLength: 500,
+        hint: 'This is a hint',
+      };
+
+      const schema = createTextAreaSchema(data);
+      const validInput = 'This is a valid input.';
+      const invalidInput = '';
+
+      expect(schema.safeParse(validInput).success).toBe(true);
+
+      const invalidResult = schema.safeParse(invalidInput);
+      expect(invalidResult.success).toBe(false);
+      expect(invalidResult.error?.issues[0].message).toBe(
+        'This field is required'
+      );
+    });
+
+    it('should create schema for optional TextArea input', () => {
+      const data: TextAreaPattern['data'] = {
+        label: 'Test TextArea Input Label',
+        initial: '',
+        required: false,
+        maxLength: 500,
+        hint: 'This is a hint',
+      };
+
+      const schema = createTextAreaSchema(data);
+      const validInput = 'This is a valid input.';
+      const emptyInput = '';
+      const tooLongInput = 'a'.repeat(501);
+
+      expect(schema.safeParse(validInput).success).toBe(true);
+      expect(schema.safeParse(emptyInput).success).toBe(true);
+
+      const tooLongResult = schema.safeParse(tooLongInput);
+      expect(tooLongResult.success).toBe(false);
+      expect(tooLongResult.error?.issues[0].message).toBe(
+        `String must contain at most 500 character(s)`
+      );
+    });
+
+    it('should handle repeated fields', () => {
+      const data: TextAreaPattern['data'] = {
+        label: 'Test Repeater TextArea Input Label',
+        initial: '',
+        required: true,
+        maxLength: 500,
+        hint: 'This is a hint',
+      };
+
+      const schema = createTextAreaSchema(data);
+      const repeatedInput = {
+        repeater: ['First input', 'Second input'],
+      };
+
+      expect(schema.safeParse(repeatedInput).success).toBe(true);
+    });
+  });
+
+  describe('textAreaConfig', () => {
+    it('should parse user input correctly', () => {
+      const pattern: TextAreaPattern = {
+        type: 'text-area',
+        id: 'test',
+        data: {
+          label: 'Test TextArea Input Label',
+          initial: '',
+          required: true,
+          maxLength: 500,
+          hint: 'This is a hint',
+        },
+      };
+
+      const inputValue = 'This is a valid input.';
+      if (!textAreaConfig.parseUserInput) {
+        expect.fail('textAreaConfig.parseUserInput is undefined');
+      }
+      const result = textAreaConfig.parseUserInput(pattern, inputValue);
+      if (result.success) {
+        expect(result.data).toBe(inputValue);
+      } else {
+        expect.fail('Unexpected validation failure');
+      }
+    });
+
+    it('should handle validation error for user input', () => {
+      const pattern: TextAreaPattern = {
+        type: 'text-area',
+        id: 'test',
+        data: {
+          label: 'Test TextArea Input Label',
+          initial: '',
+          required: true,
+          maxLength: 500,
+          hint: 'This is a hint',
+        },
+      };
+
+      const invalidInput = '';
+      if (!textAreaConfig.parseUserInput) {
+        expect.fail('textAreaConfig.parseUserInput is undefined');
+      }
+      const result = textAreaConfig.parseUserInput(pattern, invalidInput);
+      if (!result.success) {
+        expect(result.error).toBeDefined();
+        expect(result.error?.message).toContain('This field is required');
+      } else {
+        expect.fail('Unexpected validation success');
+      }
+    });
+
+    it('should parse config data correctly', () => {
+      const obj = {
+        label: 'Test TextArea Input Label',
+        initial: '',
+        required: true,
+        maxLength: 500,
+        hint: 'This is a hint',
+      };
+
+      if (!textAreaConfig.parseConfigData) {
+        expect.fail('textAreaConfig.parseConfigData is undefined');
+      }
+      const result = textAreaConfig.parseConfigData(obj);
+      if (result.success) {
+        expect(result.data.label).toBe('Test TextArea Input Label');
+        expect(result.data.required).toBe(true);
+        expect(result.data.maxLength).toBe(500);
+        expect(result.data.hint).toBe('This is a hint');
+      } else {
+        expect.fail('Unexpected validation failure');
+      }
+    });
+
+    it('should handle invalid config data', () => {
+      const obj = {
+        label: '',
+        initial: '',
+        required: true,
+        maxLength: 500,
+        hint: 'This is a hint',
+      };
+
+      if (!textAreaConfig.parseConfigData) {
+        expect.fail('textAreaConfig.parseConfigData is undefined');
+      }
+      const result = textAreaConfig.parseConfigData(obj);
+      if (!result.success) {
+        expect(result.error).toBeDefined();
+      } else {
+        expect.fail('Unexpected validation success');
+      }
+    });
+  });
+});
diff --git a/packages/forms/src/patterns/text-area/text-area.ts b/packages/forms/src/patterns/text-area/text-area.ts
new file mode 100644
index 00000000..06ea4752
--- /dev/null
+++ b/packages/forms/src/patterns/text-area/text-area.ts
@@ -0,0 +1,95 @@
+import { z } from 'zod';
+import { enLocale as message } from '@atj/common';
+import {
+  PatternBuilder,
+  type Pattern,
+  type PatternConfig,
+  type ParsePatternConfigData,
+  type ParseUserInput,
+} from '../../pattern.js';
+import {
+  safeZodParseFormErrors,
+  safeZodParseToFormError,
+} from '../../util/zod.js';
+import type { CreatePrompt, TextAreaProps } from '../../components.js';
+import { getFormSessionValue } from '../../session.js';
+
+const textAreaConfigSchema = z.object({
+  label: z.string().min(1, message.patterns.textarea.fieldLabelRequired),
+  initial: z.string().optional(),
+  required: z.boolean(),
+  maxLength: z.coerce.number(),
+  hint: z.string().optional(),
+});
+
+export type TextAreaPattern = Pattern<z.infer<typeof textAreaConfigSchema>>;
+export type TextAreaPatternOutput = z.infer<
+  ReturnType<typeof createTextAreaSchema>
+>;
+
+export const createTextAreaSchema = (data: TextAreaPattern['data']) => {
+  const stringSchema = z.string().max(data.maxLength);
+
+  const baseSchema = data.required
+    ? stringSchema.min(1, { message: 'This field is required' })
+    : stringSchema;
+
+  return z.union([
+    baseSchema,
+    z.object({
+      repeater: z.array(baseSchema),
+    }),
+  ]);
+};
+
+export const textAreaConfig: PatternConfig<
+  TextAreaPattern,
+  TextAreaPatternOutput
+> = {
+  displayName: message.patterns.textarea.displayName,
+  iconPath: 'longanswer-icon.svg',
+  initial: {
+    label: message.patterns.textarea.fieldLabel,
+    initial: '',
+    required: false,
+    maxLength: 450,
+    hint: message.patterns.textarea.hint,
+  },
+
+  parseUserInput: (pattern, inputValue) => {
+    return safeZodParseToFormError(
+      createTextAreaSchema(pattern['data']),
+      inputValue
+    );
+  },
+
+  parseConfigData: obj => {
+    return safeZodParseFormErrors(textAreaConfigSchema, obj);
+  },
+
+  getChildren() {
+    return [];
+  },
+
+  createPrompt(config, session, pattern, options) {
+    const extraAttributes: Record<string, any> = {};
+    const sessionValue = getFormSessionValue(session, pattern.id);
+    const error = session.data.errors[pattern.id];
+
+    return {
+      props: {
+        _patternId: pattern.id,
+        type: 'text-area',
+        inputId: pattern.id,
+        value: sessionValue,
+        error,
+        label: pattern.data.label,
+        required: pattern.data.required,
+        maxLength: pattern.data.maxLength,
+        hint: pattern.data.hint,
+        ...extraAttributes,
+      } as TextAreaProps,
+      children: [],
+    };
+  },
+};