In-progress

GSA-TTS · Feb 27, 2024 · f80fb76 · f80fb76
1 parent 8f12d38
commit f80fb76
Show file tree

Hide file tree

Showing 7 changed files with 175 additions and 10 deletions.
diff --git a/packages/design/src/FormManager/DocumentImporter/index.tsx b/packages/design/src/FormManager/DocumentImporter/index.tsx
@@ -9,9 +9,8 @@ import {
   createFormSession,
 } from '@atj/forms';
 
+import Form, { FormUIContext } from '../../Form';
 import { onFileInputChangeGetFile } from '../FormList/PDFFileSelect/file-input';
-import Form from '../../Form';
-import { FormUIContext } from 'config';
 
 const DocumentImporter = ({
   baseUrl,

diff --git a/packages/design/src/FormManager/FormList/PDFFileSelect/hooks.ts b/packages/design/src/FormManager/FormList/PDFFileSelect/hooks.ts
@@ -2,8 +2,9 @@ import { useNavigate } from 'react-router-dom';
 
 import { type Result } from '@atj/common';
 import { addDocument } from '@atj/documents';
-import { createForm } from '@atj/forms';
+import { FormElement, createForm } from '@atj/forms';
 import { type FormService } from '@atj/form-service';
+import { FormSummary } from '@atj/forms/src/config/elements/form-summary';
 
 export const useDocumentImporter = (
   formService: FormService,
@@ -65,10 +66,25 @@ export const stepOneSelectPdfByUpload = async (
     data: Uint8Array;
   }
 ): Promise<Result<string>> => {
-  const emptyForm = createForm({
-    title: fileDetails.name,
-    description: '',
-  });
+  const emptyForm = createForm(
+    {
+      title: fileDetails.name,
+      description: '',
+    },
+    {
+      root: 'root',
+      elements: [
+        {
+          type: 'form-summary',
+          id: 'form-summary',
+          data: {
+            title: fileDetails.name,
+            description: '',
+          },
+        } as FormElement<FormSummary>,
+      ],
+    }
+  );
   const { updatedForm } = await addDocument(emptyForm, fileDetails);
   return ctx.formService.addForm(updatedForm);
 };
diff --git a/packages/design/src/config/edit/FormSummaryEdit.tsx b/packages/design/src/config/edit/FormSummaryEdit.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { type FormSummary } from '@atj/forms/src/config/elements/form-summary';
+
+import { FormElementEditComponent } from '..';
+
+const FormSummaryEdit: FormElementEditComponent<FormSummary> = ({
+  element,
+}) => {
+  const { register } = useFormContext();
+  return (
+    <div className="grid-row grid-gap">
+      <div className="grid-col grid-col-4">
+        <label className="usa-label">
+          Title
+          <input
+            className="usa-input"
+            {...register(`${element.id}.data.title`)}
+            type="text"
+          ></input>
+        </label>
+      </div>
+      <div className="grid-col grid-col-2">
+        <label className="usa-label">
+          Description
+          <textarea
+            className="usa-textarea"
+            {...register(`${element.id}.data.description`)}
+          ></textarea>
+        </label>
+      </div>
+    </div>
+  );
+};
+
+export default FormSummaryEdit;
diff --git a/packages/design/src/config/edit/SubmissionConfirmationEdit.tsx b/packages/design/src/config/edit/SubmissionConfirmationEdit.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { type InputElement } from '@atj/forms/src/config/elements/input';
+
+import { FormElementEditComponent } from '..';
+
+const InputElementEdit: FormElementEditComponent<InputElement> = ({
+  element,
+}) => {
+  const { register } = useFormContext();
+  return (
+    <div className="grid-row grid-gap">
+      <div className="grid-col grid-col-4">
+        <label className="usa-label">
+          Field label
+          <input
+            className="usa-input"
+            {...register(`${element.id}.data.text`)}
+            type="text"
+          ></input>
+        </label>
+      </div>
+      <div className="grid-col grid-col-2">
+        <label className="usa-label">
+          Default field value
+          <input
+            className="usa-input"
+            type="text"
+            {...register(`${element.id}.data.initial`)}
+          ></input>
+        </label>
+      </div>
+      <div className="grid-col grid-col-2">
+        <label className="usa-label">
+          Maximum length
+          <input
+            className="usa-input"
+            type="text"
+            {...register(`${element.id}.data.maxLength`)}
+          ></input>
+        </label>
+      </div>
+      <div className="grid-col grid-col-2">
+        <label className="usa-label">
+          Field type
+          <select className="usa-select" {...register(`${element.id}.type`)}>
+            <option value={'input'}>Input</option>
+          </select>
+        </label>
+      </div>
+      <div className="grid-col grid-col-2">
+        <div className="usa-checkbox">
+          <input
+            className="usa-checkbox__input"
+            type="checkbox"
+            id={`${element.id}.required`}
+            {...register(`${element.id}.data.required`)}
+          />
+          <label
+            className="usa-checkbox__label"
+            htmlFor={`${element.id}.data.required`}
+          >
+            Required
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InputElementEdit;
diff --git a/packages/design/src/config/edit/index.ts b/packages/design/src/config/edit/index.ts
@@ -6,9 +6,11 @@ import {
   type FormElement,
 } from '@atj/forms';
 
+import { ComponentForPattern } from '../../Form';
+
 import InputElementEdit from './InputElementEdit';
 import SequenceElementEdit from './SequenceElementEdit';
-import { ComponentForPattern } from '../../Form';
+import SubmissionConfirmationEdit from './SubmissionConfirmationEdit';
 
 export type FormEditUIContext = {
   config: FormConfig;
@@ -27,6 +29,7 @@ export type EditComponentForFormElement<T extends FormElement = FormElement> =
   Record<string, FormElementEditComponent<T>>;
 
 export const defaultFormElementEditComponents: EditComponentForFormElement = {
-  sequence: SequenceElementEdit,
   input: InputElementEdit,
+  sequence: SequenceElementEdit,
+  'submission-confirmation': SubmissionConfirmationEdit,
 };
diff --git a/packages/forms/src/config/elements/form-summary.ts b/packages/forms/src/config/elements/form-summary.ts
@@ -0,0 +1,38 @@
+import * as z from 'zod';
+
+import { type FormElementConfig } from '..';
+import { type FormElement } from '../../element';
+import { FormSummaryPattern, type Pattern } from '../../pattern';
+import { safeZodParse } from '../../util/zod';
+
+const configSchema = z.object({
+  title: z.string().max(128),
+  summary: z.string().max(2024),
+});
+export type FormSummary = FormElement<z.infer<typeof configSchema>>;
+
+export const formSummaryConfig: FormElementConfig<FormSummary> = {
+  acceptsInput: false,
+  initial: {
+    text: '',
+    initial: '',
+    required: true,
+    maxLength: 128,
+  },
+  parseData: obj => safeZodParse(configSchema, obj), // make this optional?
+  parseConfigData: obj => safeZodParse(configSchema, obj),
+  getChildren() {
+    return [];
+  },
+  createPrompt(_, session, element, options) {
+    return {
+      pattern: {
+        _elementId: element.id,
+        type: 'form-summary',
+        title: element.data.title,
+        description: element.data.description,
+      } as FormSummaryPattern,
+      children: [],
+    };
+  },
+};
diff --git a/packages/forms/src/config/elements/input.ts b/packages/forms/src/config/elements/input.ts
@@ -12,7 +12,7 @@ const configSchema = z.object({
   required: z.boolean(),
   maxLength: z.coerce.number(),
 });
-type InputElement = FormElement<z.infer<typeof configSchema>>;
+export type InputElement = FormElement<z.infer<typeof configSchema>>;
 
 const createSchema = (data: InputElement['data']) =>
   z.string().max(data.maxLength);