Repeater pattern component

.gitignore

@@ -5,6 +5,7 @@
 _site
 .turbo/
 .vscode/
+.idea/
 coverage/
 html/
 node_modules/

apps/spotlight/src/components/SplashPage.tsx

@@ -0,0 +1,3 @@
+export default () => {
+  return <h1>Hero</h1>
+}

packages/common/src/locales/en/app.ts

@@ -89,5 +89,10 @@ export const en = {
       hint: 'For example, 555-11-0000',
       errorTextMustContainChar: 'String must contain at least 1 character(s)',
     },
+    repeater: {
+      ...defaults,
+      displayName: 'Repeatable Group',
+      errorTextMustContainChar: 'String must contain at least 1 character(s)',
+    },
   },
 };

packages/design/src/Form/components/RadioGroup/RadioGroup.tsx

@@ -13,17 +13,20 @@ export const RadioGroupPattern: PatternComponent<RadioGroupProps> = props => {
         {props.legend}
       </legend>
       {props.options.map((option, index) => {
+        const id = props.idSuffix ? `${option.id}${props.idSuffix}` : option.id;
         return (
           <div key={index} className="usa-radio">
             <input
               className="usa-radio__input"
               type="radio"
-              id={option.id}
-              {...register(props.groupId)}
+              id={`input-${id}`}
+              {...register(
+                `${props.groupId}${props.idSuffix ? props.idSuffix : ''}`
+              )}
               value={option.id}
               defaultChecked={option.defaultChecked}
             />
-            <label htmlFor={option.id} className="usa-radio__label">
+            <label htmlFor={`input-${id}`} className="usa-radio__label">
               {option.label}
             </label>
           </div>

packages/design/src/Form/components/Repeater/Repeater.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import Repeater from './index.js';
+import { expect, userEvent } from '@storybook/test';
+import { FormProvider, useForm } from 'react-hook-form';
+
+export default {
+  title: 'patterns/Repeater',
+  component: Repeater,
+  decorators: [
+    (Story, args) => {
+      const FormDecorator = () => {
+        const formMethods = useForm();
+        return (
+          <FormProvider {...formMethods}>
+            <Story {...args} />
+          </FormProvider>
+        );
+      };
+      return <FormDecorator />;
+    },
+  ],
+  tags: ['autodocs'],
+} satisfies Meta<typeof Repeater>;
+
+const defaultArgs = {
+  legend: 'Default Heading',
+  _patternId: 'test-id',
+};
+
+export const Default = {
+  args: {
+    ...defaultArgs,
+    type: 'repeater',
+  },
+} satisfies StoryObj<typeof Repeater>;
+
+export const WithContents = {
+  play: async ({ mount, args }) => {
+    const canvas = await mount(<Repeater {...args} />);
+
+    const addButton = canvas.getByRole('button', { name: /Add new item/ });
+    const deleteButton = canvas.getByRole('button', { name: /Delete item/ });
+    await userEvent.click(addButton);
+
+    let inputs = canvas.queryAllByRole('textbox');
+    await expect(inputs).toHaveLength(1);
+
+    await userEvent.click(deleteButton);
+    inputs = canvas.queryAllByRole('textbox');
+    await expect(inputs).toHaveLength(0);
+  },
+  args: {
+    ...defaultArgs,
+    type: 'repeater',
+    children: [
+      // eslint-disable-next-line
+      <div className="usa-form-group-wrapper">
+        <label className="usa-label" htmlFor="input">
+          Input
+        </label>
+        <input className="usa-input" type="text" id="input" name="input" />
+      </div>,
+    ],
+  },
+} satisfies StoryObj<typeof Repeater>;

packages/design/src/Form/components/Repeater/Repeater.test.tsx

@@ -0,0 +1,7 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describeStories } from '../../../test-helper.js';
+import meta, * as stories from './Repeater.stories.js';
+
+describeStories(meta, stories);

packages/design/src/Form/components/Repeater/edit.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { type RepeaterProps } from '@atj/forms';
+import { type PatternComponent } from '../../../Form/index.js';
+
+const RepeaterEditView: PatternComponent<RepeaterProps> = props => {
+  return (
+    <fieldset className="usa-fieldset width-full padding-top-2">
+      {props.legend !== '' && props.legend !== undefined && (
+        <legend className="usa-legend text-bold text-uppercase line-height-body-4 width-full margin-top-0 padding-top-3 padding-bottom-1">
+          {props.legend}
+        </legend>
+      )}
+
+      {props.children}
+    </fieldset>
+  );
+};
+
+export default RepeaterEditView;

packages/design/src/Form/components/Repeater/index.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { type RepeaterProps } from '@atj/forms';
+import { type PatternComponent } from '../../index.js';
+
+const Repeater: PatternComponent<RepeaterProps> = props => {
+  const { control } = useForm();
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'fields',
+  });
+
+  const hasFields = React.Children.toArray(props.children).length > 0;
+
+  /**
+   * TODO: we want to have an array of objects so it is grouped correctly when submitted
+   * child components when submitted need to escalate validation logic to the repeater and rows without
+   * any input should not be considered fields that we care about for validation.
+   *
+   * Each row of the repeater should have its own unique index
+   */
+
+  const renderWithUniqueIds = (children: React.ReactNode) => {
+    return React.Children.map(children, child => {
+      if (React.isValidElement(child) && child?.props?.component?.props) {
+        console.group('renderwithuniqueids');
+        console.log(child.props);
+        console.groupEnd();
+        return React.cloneElement(child as React.ReactElement, {
+          component: {
+            ...child.props.component,
+            props: {
+              ...child.props.component.props,
+            },
+          },
+        });
+      }
+      return child;
+    });
+  };
+
+  return (
+    <fieldset className="usa-fieldset width-full padding-top-2">
+      {props.legend && (
+        <legend className="usa-legend text-bold text-uppercase line-height-body-4 width-full margin-top-0 padding-top-3 padding-bottom-1">
+          {props.legend}
+        </legend>
+      )}
+      {hasFields && (
+        <>
+          {fields.length ? (
+            <ul className="add-list-reset margin-bottom-4">
+              {fields.map((field, index) => (
+                <li
+                  key={field.id}
+                  className="padding-bottom-4 border-bottom border-base-lighter"
+                >
+                  {renderWithUniqueIds(props.children, index)}
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <div className="usa-prose bg-accent-cool-lighter padding-1 margin-bottom-2">
+              <p className="margin-top-0">
+                This section is empty. Start by{' '}
+                <button
+                  type="submit"
+                  className="usa-button usa-button--secondary usa-button--unstyled"
+                  onClick={e => {
+                    e.preventDefault();
+                    append({});
+                  }}
+                >
+                  adding an item
+                </button>
+                .
+              </p>
+            </div>
+          )}
+          <div className="usa-button-group margin-bottom-4">
+            <button
+              type="submit"
+              className="usa-button usa-button--outline"
+              onClick={e => {
+                e.preventDefault();
+                append({});
+              }}
+            >
+              Add new item
+            </button>
+            <button
+              type="submit"
+              className="usa-button usa-button--outline"
+              onClick={e => {
+                e.preventDefault();
+                remove(fields.length - 1);
+              }}
+              disabled={fields.length === 0}
+            >
+              Delete item
+            </button>
+          </div>
+        </>
+      )}
+    </fieldset>
+  );
+};
+
+export default Repeater;

packages/design/src/Form/components/SubmissionConfirmation/index.tsx

@@ -40,30 +40,35 @@ const SubmissionConfirmation: PatternComponent<
             Submission details
           </button>
         </h4>
-        <div
-          id="submission-confirmation-table"
-          className="usa-accordion__content usa-prose"
-          hidden={true}
-        >
-          {/*<table className="usa-table usa-table--striped width-full">*/}
-          {/*  <thead>*/}
-          {/*    <tr>*/}
-          {/*      <th scope="col">Form field</th>*/}
-          {/*      <th scope="col">Provided value</th>*/}
-          {/*    </tr>*/}
-          {/*  </thead>*/}
-          {/*  <tbody>*/}
-          {/*    {props.table.map((row, index) => {*/}
-          {/*      return (*/}
-          {/*        <tr key={index}>*/}
-          {/*          <th scope="row">{row.label}</th>*/}
-          {/*          <td>{row.value}</td>*/}
-          {/*        </tr>*/}
-          {/*      );*/}
-          {/*    })}*/}
-          {/*  </tbody>*/}
-          {/*</table>*/}
-        </div>
+        {/*
+          EG: turn this off for now. Will need some design perhaps to see what the presentation
+          should look like. This was a minimal blocker for the repeater field due to the flat data structure
+          that was there previously.
+        */}
+        {/*<div*/}
+        {/*  id="submission-confirmation-table"*/}
+        {/*  className="usa-accordion__content usa-prose"*/}
+        {/*  hidden={true}*/}
+        {/*>*/}
+        {/*  <table className="usa-table usa-table--striped width-full">*/}
+        {/*    <thead>*/}
+        {/*      <tr>*/}
+        {/*        <th scope="col">Form field</th>*/}
+        {/*        <th scope="col">Provided value</th>*/}
+        {/*      </tr>*/}
+        {/*    </thead>*/}
+        {/*    <tbody>*/}
+        {/*      {props.table.map((row, index) => {*/}
+        {/*        return (*/}
+        {/*          <tr key={index}>*/}
+        {/*            <th scope="row">{row.label}</th>*/}
+        {/*            <td>{row.value}</td>*/}
+        {/*          </tr>*/}
+        {/*        );*/}
+        {/*      })}*/}
+        {/*    </tbody>*/}
+        {/*  </table>*/}
+        {/*</div>*/}
       </div>
     </>
   );

packages/design/src/Form/components/TextInput/index.tsx

@@ -7,6 +7,9 @@ import { type PatternComponent } from '../../../Form/index.js';
 
 const TextInput: PatternComponent<TextInputProps> = props => {
   const { register } = useFormContext();
+  const id = props.idSuffix
+    ? `${props.inputId}${props.idSuffix}`
+    : props.inputId;
   return (
     <div className="usa-form-group-wrapper" key={props.inputId}>
       <div
@@ -18,13 +21,13 @@ const TextInput: PatternComponent<TextInputProps> = props => {
           className={classNames('usa-label', {
             'usa-label--error': props.error,
           })}
-          id={`input-message-${props.inputId}`}
+          id={`input-message-${id}`}
         >
           {props.label}
           {props.error && (
             <span
               className="usa-error-message"
-              id={`input-error-message-${props.inputId}`}
+              id={`input-error-message-${id}`}
               role="alert"
             >
               {props.error.message}
@@ -34,13 +37,13 @@ const TextInput: PatternComponent<TextInputProps> = props => {
             className={classNames('usa-input', {
               'usa-input--error': props.error,
             })}
-            id={`input-${props.inputId}`}
+            id={`input-${id}`}
             defaultValue={props.value}
-            {...register(props.inputId || Math.random().toString(), {
+            {...register(id || Math.random().toString(), {
               //required: props.required,
             })}
             type="text"
-            aria-describedby={`input-message-${props.inputId}`}
+            aria-describedby={`input-message-${id}`}
           />
         </label>
       </div>

packages/design/src/Form/components/index.tsx

@@ -13,6 +13,7 @@ import PageSet from './PageSet/index.js';
 import Paragraph from './Paragraph/index.js';
 import PhoneNumber from './PhoneNumber/index.js';
 import RadioGroup from './RadioGroup/index.js';
+import Repeater from './Repeater/index.js';
 import RichText from './RichText/index.js';
 import Sequence from './Sequence/index.js';
 import SelectDropdown from './SelectDropdown/index.js';
@@ -35,6 +36,7 @@ export const defaultPatternComponents: ComponentForPattern = {
   paragraph: Paragraph as PatternComponent,
   'phone-number': PhoneNumber as PatternComponent,
   'radio-group': RadioGroup as PatternComponent,
+  repeater: Repeater as PatternComponent,
   'rich-text': RichText as PatternComponent,
   'select-dropdown': SelectDropdown as PatternComponent,
   sequence: Sequence as PatternComponent,