diff --git a/packages/design/src/FormManager/DocumentImporter/index.tsx b/packages/design/src/FormManager/DocumentImporter/index.tsx index ed61a5d0..3a300059 100644 --- 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 index 63b4f84b..b3b8bcc8 100644 --- 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> => { - 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, + ], + } + ); 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 new file mode 100644 index 00000000..1092e298 --- /dev/null +++ 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 = ({ + element, +}) => { + const { register } = useFormContext(); + return ( +
+
+ +
+
+ +
+
+ ); +}; + +export default FormSummaryEdit; diff --git a/packages/design/src/config/edit/SubmissionConfirmationEdit.tsx b/packages/design/src/config/edit/SubmissionConfirmationEdit.tsx new file mode 100644 index 00000000..db5ec764 --- /dev/null +++ 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 = ({ + element, +}) => { + const { register } = useFormContext(); + return ( +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + +
+
+
+ ); +}; + +export default InputElementEdit; diff --git a/packages/design/src/config/edit/index.ts b/packages/design/src/config/edit/index.ts index 4dba3e26..8f66bdbc 100644 --- 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 = Record>; 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 new file mode 100644 index 00000000..4056510a --- /dev/null +++ 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>; + +export const formSummaryConfig: FormElementConfig = { + 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 index 67db658f..83756dec 100644 --- 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>; +export type InputElement = FormElement>; const createSchema = (data: InputElement['data']) => z.string().max(data.maxLength);