Add a FormConfig type to define injectable form field definitions. Th…

…is is an overly large commit, but includes most of the refactoring necessary for this purpose. In the design package, we could use a better type and/or constructor for configuring the UI side of the form field configuration.

.gitignore

@@ -8,3 +8,4 @@ coverage/
 html/
 node_modules/
 NOTES.md
+tsconfig.tsbuildinfo

apps/spotlight/src/components/AppFormManager.tsx

@@ -5,5 +5,11 @@ import { getAppContext } from '../context';
 
 export default function () {
   const ctx = getAppContext();
-  return <FormManager formService={ctx.formService} baseUrl={ctx.baseUrl} />;
+  return (
+    <FormManager
+      config={ctx.formConfig}
+      formService={ctx.formService}
+      baseUrl={ctx.baseUrl}
+    />
+  );
 }

apps/spotlight/src/components/AppFormRouter.tsx

@@ -5,5 +5,5 @@ import { getAppContext } from '../context';
 
 export default function AppFormRouter() {
   const ctx = getAppContext();
-  return <FormRouter formService={ctx.formService} />;
+  return <FormRouter config={ctx.formConfig} formService={ctx.formService} />;
 }

apps/spotlight/src/components/Footer.astro

@@ -18,25 +18,14 @@ const { github } = Astro.props;
         <nav class="usa-footer__nav" aria-label="Footer navigation,">
           <ul class="grid-row grid-gap">
             <li
-              class="
-            mobile-lg:grid-col-6
-            desktop:grid-col-auto
-            usa-footer__primary-content
-          "
+              class="mobile-lg:grid-col-6 desktop:grid-col-auto usa-footer__primary-content"
             >
-              <a
-                class="usa-footer__primary-link"
-                href="https://10x.gsa.gov/"
-              >
+              <a class="usa-footer__primary-link" href="https://10x.gsa.gov/">
                 10x
               </a>
             </li>
             <li
-              class="
-            mobile-lg:grid-col-6
-            desktop:grid-col-auto
-            usa-footer__primary-content
-          "
+              class="mobile-lg:grid-col-6 desktop:grid-col-auto usa-footer__primary-content"
             >
               <a
                 class="usa-footer__primary-link"

apps/spotlight/src/context.ts

@@ -1,13 +1,17 @@
+import { FormConfig } from '@atj/forms';
+import { defaultFormConfig } from '@atj/forms';
 import {
   type FormService,
   createBrowserFormService,
   createTestFormService,
 } from '@atj/form-service';
+
 import { type GithubRepository } from './lib/github';
 
 export type AppContext = {
   baseUrl: `${string}/`;
   github: GithubRepository;
+  formConfig: FormConfig;
   formService: FormService;
 };
 
@@ -24,6 +28,7 @@ const createAppContext = (env: any) => {
   return {
     github: env.GITHUB,
     baseUrl: env.BASE_URL,
+    formConfig: defaultFormConfig,
     formService: createAppFormService(),
   };
 };

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

@@ -2,13 +2,14 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import Form from '.';
-import { createTestForm } from '../test-form';
+import { createTestForm, createTestFormConfig } from '../test-form';
 
 export default {
   title: 'Form',
   component: Form,
   decorators: [(Story, args) => <Story {...args} />],
   args: {
+    config: createTestFormConfig(),
     form: createTestForm(),
   },
   tags: ['autodocs'],

packages/design/src/Form/index.tsx

@@ -4,21 +4,24 @@ import { FormProvider, useForm } from 'react-hook-form';
 import {
   createFormSession,
   createPrompt,
+  type FormConfig,
   type FormDefinition,
 } from '@atj/forms';
 
 import PromptSegment from './PromptSegment';
 import ActionBar from './ActionBar';
 
 export default function Form({
+  config,
   form,
   onSubmit,
 }: {
+  config: FormConfig;
   form: FormDefinition;
   onSubmit?: (data: Record<string, string>) => void;
 }) {
   const session = createFormSession(form);
-  const prompt = createPrompt(session);
+  const prompt = createPrompt(config, session);
 
   const formMethods = useForm<Record<string, string>>({});
   return (

packages/design/src/FormManager/DocumentImporter/index.tsx

@@ -3,19 +3,25 @@ import { useNavigate } from 'react-router-dom';
 
 import { addDocument, addDocumentFieldsToForm } from '@atj/documents';
 import { type FormService } from '@atj/form-service';
-import { type DocumentFieldMap, type FormDefinition } from '@atj/forms';
+import {
+  type FormConfig,
+  type DocumentFieldMap,
+  type FormDefinition,
+} from '@atj/forms';
 
 import { onFileInputChangeGetFile } from '../FormList/PDFFileSelect/file-input';
 import Form from '../../Form';
 
 const DocumentImporter = ({
   baseUrl,
   formId,
+  config,
   form,
   formService,
 }: {
   baseUrl: string;
   formId: string;
+  config: FormConfig;
   form: FormDefinition;
   formService: FormService;
 }) => {
@@ -146,6 +152,7 @@ const DocumentImporter = ({
     return (
       <>
         <Form
+          config={config}
           form={previewForm}
           onSubmit={data => {
             //handleFormSubmission(formId, data);

packages/design/src/FormManager/FormEdit/FormEdit.stories.tsx

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { createTestFormService } from '@atj/form-service';
 
 import FormEdit from '.';
-import { createTestForm } from '../../test-form';
+import { createTestForm, createTestFormConfig } from '../../test-form';
 
 export default {
   title: 'FormManager/FormEdit',
@@ -18,6 +18,7 @@ export default {
     ),
   ],
   args: {
+    config: createTestFormConfig(),
     formId: 'test-form',
     formService: createTestFormService({
       'test-form': createTestForm(),