feat: create date of birth pattern tckt-361 (#374)

* feat: create date of birth pattern tckt-361 * feat: create date of birth pattern edit form tckt-361 * test: add vitest for date of birth pattern tckt-361 * fix: add value aggregation hook to handle structured and single values in form validation tckt-361 * feat: update aggregateValuesByPrefix to use set-value library to handle nested values tckt-361 --------- Co-authored-by: Khayal Alasgarov <[email protected]>
GSA-TTS · Nov 6, 2024 · 4480793 · 4480793
1 parent 8a7f982
commit 4480793
Show file tree

Hide file tree

Showing 21 changed files with 891 additions and 161 deletions.
diff --git a/packages/common/src/locales/en/app.ts b/packages/common/src/locales/en/app.ts
@@ -52,5 +52,13 @@ export const en = {
       fieldLabel: 'Select Dropdown label',
       errorTextMustContainChar: 'String must contain at least 1 character(s)',
     },
+    dateOfBirth: {
+      ...defaults,
+      displayName: 'Date of Birth label',
+      fieldLabel: 'Date Of Birth label',
+      hintLabel: 'Date of Birth Hint label',
+      hint: 'For example: January 19 2000',
+      errorTextMustContainChar: 'String must contain at least 1 character(s)',
+    },
   },
 };
diff --git a/packages/design/src/Form/components/DateOfBirth/DateOfBirth.stories.tsx b/packages/design/src/Form/components/DateOfBirth/DateOfBirth.stories.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import { DateOfBirthPattern } from './DateOfBirth.js';
+
+const meta: Meta<typeof DateOfBirthPattern> = {
+  title: 'patterns/DateOfBirthPattern',
+  component: DateOfBirthPattern,
+  decorators: [
+    (Story, args) => {
+      const FormDecorator = () => {
+        const formMethods = useForm({
+          defaultValues: {
+            'date-of-birth-1.day': '',
+            'date-of-birth-1.month': '',
+            'date-of-birth-1.year': '',
+          },
+        });
+        return (
+          <FormProvider {...formMethods}>
+            <Story {...args} />
+          </FormProvider>
+        );
+      };
+      return <FormDecorator />;
+    },
+  ],
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof DateOfBirthPattern> = {
+  args: {
+    _patternId: '',
+    type: 'date-of-birth',
+    monthId: 'date-of-birth-1.month',
+    dayId: 'date-of-birth-1.day',
+    yearId: 'date-of-birth-1.year',
+    label: 'Select a date of birth',
+    hint: 'For example: January 19, 2000',
+    required: false,
+  },
+};
+
+export const WithoutHint: StoryObj<typeof DateOfBirthPattern> = {
+  args: {
+    _patternId: '',
+    type: 'date-of-birth',
+    monthId: 'date-of-birth-1.month',
+    dayId: 'date-of-birth-1.day',
+    yearId: 'date-of-birth-1.year',
+    label: 'Select a date of birth',
+    hint: undefined,
+    required: false,
+  },
+};
+
+export const WithError: StoryObj<typeof DateOfBirthPattern> = {
+  args: {
+    _patternId: '',
+    type: 'date-of-birth',
+    monthId: 'date-of-birth-1.month',
+    dayId: 'date-of-birth-1.day',
+    yearId: 'date-of-birth-1.year',
+    label: 'Select a date of birth with error',
+    hint: 'For example: January 19, 2000',
+    required: false,
+    error: {
+      type: 'custom',
+      message: 'This field has an error',
+    },
+  },
+};
+
+export const Required: StoryObj<typeof DateOfBirthPattern> = {
+  args: {
+    _patternId: '',
+    type: 'date-of-birth',
+    monthId: 'date-of-birth-1.month',
+    dayId: 'date-of-birth-1.day',
+    yearId: 'date-of-birth-1.year',
+    label: 'Select a required date of birth',
+    hint: 'For example: January 19, 2000',
+    required: true,
+  },
+};
diff --git a/packages/design/src/Form/components/DateOfBirth/DateOfBirth.test.tsx b/packages/design/src/Form/components/DateOfBirth/DateOfBirth.test.tsx
@@ -0,0 +1,7 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describeStories } from '../../../test-helper.js';
+import meta, * as stories from './DateOfBirth.stories.js';
+
+describeStories(meta, stories);
diff --git a/packages/design/src/Form/components/DateOfBirth/DateOfBirth.tsx b/packages/design/src/Form/components/DateOfBirth/DateOfBirth.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import { type DateOfBirthProps } from '@atj/forms';
+import { type PatternComponent } from '../../index.js';
+
+const months = [
+  { value: '01', label: 'January' },
+  { value: '02', label: 'February' },
+  { value: '03', label: 'March' },
+  { value: '04', label: 'April' },
+  { value: '05', label: 'May' },
+  { value: '06', label: 'June' },
+  { value: '07', label: 'July' },
+  { value: '08', label: 'August' },
+  { value: '09', label: 'September' },
+  { value: '10', label: 'October' },
+  { value: '11', label: 'November' },
+  { value: '12', label: 'December' },
+];
+
+export const DateOfBirthPattern: PatternComponent<DateOfBirthProps> = ({
+  monthId,
+  dayId,
+  yearId,
+  label,
+  hint,
+  required,
+  error,
+}) => {
+  const { register } = useFormContext();
+
+  return (
+    <fieldset className="usa-fieldset">
+      <legend className="usa-legend">
+        {label}
+        {required && <span className="required-indicator">*</span>}
+      </legend>
+      {hint && (
+        <span className="usa-hint" id="mdHint">
+          {hint}
+        </span>
+      )}
+      <div className="usa-memorable-date">
+        <div className="usa-form-group usa-form-group--month usa-form-group--select">
+          <label className="usa-label" htmlFor={monthId}>
+            Month
+          </label>
+          <select
+            className="usa-select"
+            id={monthId}
+            {...register(monthId)}
+            aria-describedby="mdHint"
+          >
+            <option key="default" value="">
+              - Select -
+            </option>
+            {months.map((option, index) => (
+              <option key={index} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="usa-form-group usa-form-group--day">
+          <label className="usa-label" htmlFor={dayId}>
+            Day
+          </label>
+          <input
+            className="usa-input"
+            aria-describedby="mdHint"
+            id={dayId}
+            {...register(dayId)}
+            minLength={2}
+            maxLength={2}
+            pattern="[0-9]*"
+            inputMode="numeric"
+          />
+        </div>
+        <div className="usa-form-group usa-form-group--year">
+          <label className="usa-label" htmlFor={yearId}>
+            Year
+          </label>
+          <input
+            className="usa-input"
+            aria-describedby="mdHint"
+            id={yearId}
+            {...register(yearId)}
+            minLength={4}
+            maxLength={4}
+            pattern="[0-9]*"
+            inputMode="numeric"
+          />
+        </div>
+      </div>
+      {error && (
+        <span className="error-message" style={{ color: 'red' }}>
+          {error.message}
+        </span>
+      )}
+    </fieldset>
+  );
+};
diff --git a/packages/design/src/Form/components/DateOfBirth/index.tsx b/packages/design/src/Form/components/DateOfBirth/index.tsx
@@ -0,0 +1,3 @@
+import { DateOfBirthPattern } from './DateOfBirth.js';
+
+export default DateOfBirthPattern;
diff --git a/packages/design/src/Form/components/SelectDropdown/SelectDropdown.tsx b/packages/design/src/Form/components/SelectDropdown/SelectDropdown.tsx
@@ -14,27 +14,25 @@ export const SelectDropdownPattern: PatternComponent<SelectDropdownProps> = ({
   const { register } = useFormContext();
   return (
     <div className="usa-fieldset padding-top-2">
-      <form className="usa-form">
-        <label className="usa-label" htmlFor={selectId}>
-          {label}
-          {required && <span className="required-indicator">*</span>}
-        </label>
-        <select className="usa-select" id={selectId} {...register(selectId)}>
-          <option key="default" value="">
-            - Select -
+      <label className="usa-label" htmlFor={selectId}>
+        {label}
+        {required && <span className="required-indicator">*</span>}
+      </label>
+      <select className="usa-select" id={selectId} {...register(selectId)}>
+        <option key="default" value="">
+          - Select -
+        </option>
+        {options.map((option, index) => (
+          <option key={index} value={option.value}>
+            {option.label}
           </option>
-          {options.map((option, index) => (
-            <option key={index} value={option.value}>
-              {option.label}
-            </option>
-          ))}
-        </select>
-        {error && (
-          <span className="error-message" style={{ color: 'red' }}>
-            {error.message}
-          </span>
-        )}
-      </form>
+        ))}
+      </select>
+      {error && (
+        <span className="error-message" style={{ color: 'red' }}>
+          {error.message}
+        </span>
+      )}
     </div>
   );
 };
diff --git a/packages/design/src/Form/components/index.tsx b/packages/design/src/Form/components/index.tsx
@@ -12,6 +12,7 @@ import RadioGroup from './RadioGroup/index.js';
 import RichText from './RichText/index.js';
 import Sequence from './Sequence/index.js';
 import SelectDropdown from './SelectDropdown/index.js';
+import DateOfBirth from './DateOfBirth/index.js';
 import SubmissionConfirmation from './SubmissionConfirmation/index.js';
 import TextInput from './TextInput/index.js';
 
@@ -28,6 +29,7 @@ export const defaultPatternComponents: ComponentForPattern = {
   'radio-group': RadioGroup as PatternComponent,
   'rich-text': RichText as PatternComponent,
   'select-dropdown': SelectDropdown as PatternComponent,
+  'date-of-birth': DateOfBirth as PatternComponent,
   sequence: Sequence as PatternComponent,
   'submission-confirmation': SubmissionConfirmation as PatternComponent,
 };
diff --git a/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx b/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx
@@ -22,7 +22,7 @@ import classNames from 'classnames';
 const icons: Record<string, string | any> = {
   'block-icon.svg': blockIcon,
   'checkbox-icon.svg': checkboxIcon,
-  'date-icon.svg.svg': dateIcon,
+  'date-icon.svg': dateIcon,
   'dropdown-icon.svg': dropDownIcon,
   'dropdownoption-icon.svg': dropDownOptionIcon,
   'richtext-icon.svg': richTextIcon,
@@ -96,6 +96,7 @@ const sidebarPatterns: DropdownPattern[] = [
   ['radio-group', defaultFormConfig.patterns['radio-group']],
   ['package-download', defaultFormConfig.patterns['package-download']],
   ['select-dropdown', defaultFormConfig.patterns['select-dropdown']],
+  ['date-of-birth', defaultFormConfig.patterns['date-of-birth']],
 ] as const;
 export const fieldsetPatterns: DropdownPattern[] = [
   ['form-summary', defaultFormConfig.patterns['form-summary']],
@@ -106,6 +107,7 @@ export const fieldsetPatterns: DropdownPattern[] = [
   ['radio-group', defaultFormConfig.patterns['radio-group']],
   ['package-download', defaultFormConfig.patterns['package-download']],
   ['select-dropdown', defaultFormConfig.patterns['select-dropdown']],
+  ['date-of-birth', defaultFormConfig.patterns['date-of-birth']],
 ] as const;
 
 export const SidebarAddPatternMenuItem = ({
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { DateOfBirthPattern } from './DateOfBirth.js';

		export default DateOfBirthPattern;