Use PatternProps at the point of component prop definition, rather th…

…an where comsumed.
GSA-TTS · Mar 27, 2024 · 6520618 · 6520618
1 parent 923a47f
commit 6520618
Show file tree

Hide file tree

Showing 15 changed files with 41 additions and 58 deletions.
diff --git a/packages/design/src/FormManager/FormEdit/Preview.tsx b/packages/design/src/FormManager/FormEdit/Preview.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { type PatternProps, createFormSession } from '@atj/forms';
+import { createFormSession } from '@atj/forms';
 
 import Form, {
   type ComponentForPattern,

diff --git a/packages/design/src/config/view/Fieldset/index.tsx b/packages/design/src/config/view/Fieldset/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { type FieldsetProps, type PatternProps } from '@atj/forms';
+import { type FieldsetProps } from '@atj/forms';
 
 import { type PatternComponent } from '../../../Form';
 
-const FormSummary: PatternComponent<PatternProps<FieldsetProps>> = ({
+const FormSummary: PatternComponent<FieldsetProps> = ({
   pattern,
   children,
 }) => {

diff --git a/packages/design/src/config/view/FormSummary/FormSummary.stories.tsx b/packages/design/src/config/view/FormSummary/FormSummary.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import FormSummary from '.';
-import { type PatternProps, type FormSummaryProps } from '@atj/forms';
+import { type FormSummaryProps } from '@atj/forms';
 
 export default {
   title: 'patterns/FormSummary',
@@ -17,7 +17,7 @@ export const FormSummaryWithLongDescription = {
       title: 'Form title',
       description:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-    } as PatternProps<FormSummaryProps>,
+    } as FormSummaryProps,
   },
 } satisfies StoryObj<typeof FormSummary>;
 
@@ -28,6 +28,6 @@ export const FormSummaryWithShortDescription = {
       type: 'form-summary',
       title: 'Title 2',
       description: 'Short description',
-    } as PatternProps<FormSummaryProps>,
+    } as FormSummaryProps,
   },
 } satisfies StoryObj<typeof FormSummary>;
diff --git a/packages/design/src/config/view/FormSummary/index.tsx b/packages/design/src/config/view/FormSummary/index.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
 
-import { type PatternProps, type FormSummaryProps } from '@atj/forms';
+import { type FormSummaryProps } from '@atj/forms';
 import { type PatternComponent } from '../../../Form';
 
-const FormSummary: PatternComponent<PatternProps<FormSummaryProps>> = ({
-  pattern,
-}) => {
+const FormSummary: PatternComponent<FormSummaryProps> = ({ pattern }) => {
   return (
     <>
       <div className="usa-legend-wrapper">

diff --git a/packages/design/src/config/view/Paragraph/index.tsx b/packages/design/src/config/view/Paragraph/index.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
 
-import { type ParagraphProps, type PatternProps } from '@atj/forms';
+import { type ParagraphProps } from '@atj/forms';
 
 import { type PatternComponent } from '../../../Form';
 
-const FormSummary: PatternComponent<PatternProps<ParagraphProps>> = ({
-  pattern,
-}) => {
+const FormSummary: PatternComponent<ParagraphProps> = ({ pattern }) => {
   if (pattern.style === 'heading') {
     return (
       <>

diff --git a/packages/design/src/config/view/Sequence/index.tsx b/packages/design/src/config/view/Sequence/index.tsx
@@ -1,13 +1,8 @@
 import React from 'react';
 
-import { type PatternProps } from '@atj/forms';
-import { type SequenceElement } from '@atj/forms/src/patterns/sequence';
-
 import { type PatternComponent } from '../../../Form';
 
-const Sequence: PatternComponent<PatternProps<SequenceElement>> = ({
-  children,
-}) => {
+const Sequence: PatternComponent = ({ children }) => {
   return <>{children}</>;
 };
 

diff --git a/packages/design/src/config/view/SubmissionConfirmation/SubmissionConfirmation.stories.tsx b/packages/design/src/config/view/SubmissionConfirmation/SubmissionConfirmation.stories.tsx
@@ -1,10 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import SubmissionConfirmation from '.';
-import {
-  type PatternProps,
-  type SubmissionConfirmationProps,
-} from '@atj/forms';
+import { type SubmissionConfirmationProps } from '@atj/forms';
 
 export default {
   title: 'patterns/SubmissionConfirmation',
@@ -22,6 +19,6 @@ export const SubmissionConfirmationExample = {
         { label: 'Field 3', value: 'Value 3' },
         { label: 'Field 4', value: 'Value 4' },
       ],
-    } as PatternProps<SubmissionConfirmationProps>,
+    } as SubmissionConfirmationProps,
   },
 } satisfies StoryObj<typeof SubmissionConfirmation>;
diff --git a/packages/design/src/config/view/SubmissionConfirmation/index.tsx b/packages/design/src/config/view/SubmissionConfirmation/index.tsx
@@ -1,14 +1,11 @@
 import React from 'react';
 
-import {
-  type PatternProps,
-  type SubmissionConfirmationProps,
-} from '@atj/forms';
+import { type SubmissionConfirmationProps } from '@atj/forms';
 import { type PatternComponent } from '../../../Form';
 
-const SubmissionConfirmation: PatternComponent<
-  PatternProps<SubmissionConfirmationProps>
-> = ({ pattern }) => {
+const SubmissionConfirmation: PatternComponent<SubmissionConfirmationProps> = ({
+  pattern,
+}) => {
   return (
     <>
       <legend className="usa-legend usa-legend--large">

diff --git a/packages/design/src/config/view/TextInput/TestInput.stories.tsx b/packages/design/src/config/view/TextInput/TestInput.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { type PatternProps, type TextInputProps } from '@atj/forms';
+import { type TextInputProps } from '@atj/forms';
 import TextInput from '.';
 
 export default {
@@ -33,7 +33,7 @@ export const Required = {
       value: '',
       label: 'Please enter your first name.',
       required: true,
-    } as PatternProps<TextInputProps>,
+    } as TextInputProps,
   },
 } satisfies StoryObj<typeof TextInput>;
 
@@ -46,6 +46,6 @@ export const NotRequired = {
       value: '',
       label: 'Please enter your first name.',
       required: false,
-    } as PatternProps<TextInputProps>,
+    } as TextInputProps,
   },
 } satisfies StoryObj<typeof TextInput>;
diff --git a/packages/design/src/config/view/TextInput/index.tsx b/packages/design/src/config/view/TextInput/index.tsx
@@ -2,12 +2,10 @@ import classNames from 'classnames';
 import React from 'react';
 import { useFormContext } from 'react-hook-form';
 
-import { PatternProps, type TextInputProps } from '@atj/forms';
+import { type TextInputProps } from '@atj/forms';
 import { type PatternComponent } from '../../../Form';
 
-const TextInput: PatternComponent<PatternProps<TextInputProps>> = ({
-  pattern,
-}) => {
+const TextInput: PatternComponent<TextInputProps> = ({ pattern }) => {
   const { register } = useFormContext();
   return (
     <div className="usa-form-group-wrapper" key={pattern.inputId}>

diff --git a/packages/forms/src/components.ts b/packages/forms/src/components.ts
@@ -7,36 +7,36 @@ import {
 import { getPatternConfig } from './element';
 import { type FormSession, nullSession, sessionIsComplete } from './session';
 
-export type TextInputProps = {
+export type TextInputProps = PatternProps<{
   type: 'input';
   inputId: string;
   value: string;
   label: string;
   required: boolean;
   error?: string;
-};
+}>;
 
-export type FormSummaryProps = {
+export type FormSummaryProps = PatternProps<{
   type: 'form-summary';
   title: string;
   description: string;
-};
+}>;
 
-export type SubmissionConfirmationProps = {
+export type SubmissionConfirmationProps = PatternProps<{
   type: 'submission-confirmation';
   table: { label: string; value: string }[];
-};
+}>;
 
-export type ParagraphProps = {
+export type ParagraphProps = PatternProps<{
   type: 'paragraph';
   text: string;
   style: 'indent' | 'normal' | 'heading' | 'subheading';
-};
+}>;
 
-export type FieldsetProps = {
+export type FieldsetProps = PatternProps<{
   type: 'fieldset';
   legend: string;
-};
+}>;
 
 export type PatternProps<T = {}> = {
   _elementId: PatternId;
@@ -87,7 +87,7 @@ export const createPrompt = (
                   value: value,
                 };
               }),
-          } as PatternProps<SubmissionConfirmationProps>,
+          } as SubmissionConfirmationProps,
           children: [],
         },
       ],
@@ -100,7 +100,7 @@ export const createPrompt = (
         type: 'form-summary',
         title: session.form.summary.title,
         description: session.form.summary.description,
-      } as PatternProps<FormSummaryProps>,
+      } as FormSummaryProps,
       children: [],
     },
   ];

diff --git a/packages/forms/src/patterns/fieldset.ts b/packages/forms/src/patterns/fieldset.ts
@@ -50,7 +50,7 @@ export const fieldsetConfig: PatternConfig<FieldsetElement> = {
         _elementId: element.id,
         type: 'fieldset',
         legend: element.data.legend,
-      } satisfies PatternProps<FieldsetProps>,
+      } satisfies FieldsetProps,
       children,
     };
   },

diff --git a/packages/forms/src/patterns/form-summary.ts b/packages/forms/src/patterns/form-summary.ts
@@ -1,7 +1,7 @@
 import * as z from 'zod';
 
 import { type Pattern, type PatternConfig } from '../element';
-import { type PatternProps, type FormSummaryProps } from '../components';
+import { type FormSummaryProps } from '../components';
 import { safeZodParse } from '../util/zod';
 
 const configSchema = z.object({
@@ -30,7 +30,7 @@ export const formSummaryConfig: PatternConfig<FormSummary> = {
         type: 'form-summary',
         title: element.data.title,
         description: element.data.description,
-      } as PatternProps<FormSummaryProps>,
+      } as FormSummaryProps,
       children: [],
     };
   },

diff --git a/packages/forms/src/patterns/input.ts b/packages/forms/src/patterns/input.ts
@@ -1,7 +1,7 @@
 import * as z from 'zod';
 
 import { type Pattern, type PatternConfig, validateElement } from '../element';
-import { type PatternProps, type TextInputProps } from '../components';
+import { type TextInputProps } from '../components';
 import { getFormSessionValue } from '../session';
 import { safeZodParse } from '../util/zod';
 
@@ -47,7 +47,7 @@ export const inputConfig: PatternConfig<InputElement> = {
         label: element.data.label,
         required: element.data.required,
         ...extraAttributes,
-      } as PatternProps<TextInputProps>,
+      } as TextInputProps,
       children: [],
     };
   },

diff --git a/packages/forms/src/patterns/paragraph.ts b/packages/forms/src/patterns/paragraph.ts
@@ -1,7 +1,7 @@
 import * as z from 'zod';
 
 import { type Pattern, type PatternConfig } from '../element';
-import { type PatternProps, type ParagraphProps } from '../components';
+import { type ParagraphProps } from '../components';
 import { safeZodParse } from '../util/zod';
 
 const configSchema = z.object({
@@ -31,7 +31,7 @@ export const paragraphConfig: PatternConfig<ParagraphElement> = {
         type: 'paragraph' as const,
         text: element.data.text,
         style: element.data.style,
-      } as PatternProps<ParagraphProps>,
+      } as ParagraphProps,
       children: [],
     };
   },