From 45fab6700c40b05b3bb86de53ecad7e7ce9410ab Mon Sep 17 00:00:00 2001 From: Daniel Naab Date: Wed, 28 Feb 2024 21:45:59 -0600 Subject: [PATCH] Fieldset legends --- .../src/FormManager/FormEdit/Preview.tsx | 5 ++- .../design/src/FormManager/FormEdit/index.tsx | 8 ++--- .../design/src/config/view/Fieldset/index.tsx | 13 +++---- packages/design/src/config/view/index.tsx | 3 +- packages/documents/src/pdf/mock-api.ts | 18 +++++----- packages/forms/src/config/config.ts | 2 ++ .../forms/src/config/elements/fieldset.ts | 35 ++++++++++++++----- packages/forms/src/pattern.ts | 5 +++ 8 files changed, 56 insertions(+), 33 deletions(-) diff --git a/packages/design/src/FormManager/FormEdit/Preview.tsx b/packages/design/src/FormManager/FormEdit/Preview.tsx index 3c609a21..e0b597a0 100644 --- a/packages/design/src/FormManager/FormEdit/Preview.tsx +++ b/packages/design/src/FormManager/FormEdit/Preview.tsx @@ -41,7 +41,7 @@ const createPreviewComponents = ( const previewComponents: ComponentForPattern = {}; // TODO: Create a configurable way to to define preview components. for (const [patternType, Component] of Object.entries(components)) { - if (patternType === 'sequence') { + if (patternType === 'sequence' || patternType === 'fieldset') { previewComponents[patternType] = Component; /* previewComponents[patternType] = createSequencePatternPreviewComponent( @@ -50,10 +50,9 @@ const createPreviewComponents = ( ); */ } else if (patternType === 'form-summary') { - console.log('skipping form-summary...'); previewComponents[patternType] = Component; } else { - previewComponents[patternType] = Component; + //previewComponents[patternType] = Component; previewComponents[patternType] = createPatternPreviewComponent( Component, uswdsRoot diff --git a/packages/design/src/FormManager/FormEdit/index.tsx b/packages/design/src/FormManager/FormEdit/index.tsx index c3894ace..eaa9973e 100644 --- a/packages/design/src/FormManager/FormEdit/index.tsx +++ b/packages/design/src/FormManager/FormEdit/index.tsx @@ -24,12 +24,8 @@ export default function FormEdit({ const form = result.data; return (
-

Form Editor Portal

-

- Welcome to the Form Editor Portal, where you can effortlessly - personalize your form by modifying labels, attributes, and other - settings to better suit your needs. -

+

Edit form

+

Your form has been imported for web delivery.

> = ({ +const FormSummary: FormElementComponent> = ({ pattern, + children, }) => { return ( - <> -

{pattern.data.text}

- +
+ {pattern.legend} + {children} +
); }; export default FormSummary; diff --git a/packages/design/src/config/view/index.tsx b/packages/design/src/config/view/index.tsx index 5b7593b3..1e704d5e 100644 --- a/packages/design/src/config/view/index.tsx +++ b/packages/design/src/config/view/index.tsx @@ -1,12 +1,13 @@ +import Fieldset from './Fieldset'; import FormSummary from './FormSummary'; import Paragraph from './Paragraph'; import Sequence from './Sequence'; import SubmissionConfirmation from './SubmissionConfirmation'; import TextInput from './TextInput'; - import { type ComponentForPattern } from '../../Form'; export const defaultFormElementComponents: ComponentForPattern = { + fieldset: Fieldset, 'form-summary': FormSummary, input: TextInput, paragraph: Paragraph, diff --git a/packages/documents/src/pdf/mock-api.ts b/packages/documents/src/pdf/mock-api.ts index a947431d..c4c64459 100644 --- a/packages/documents/src/pdf/mock-api.ts +++ b/packages/documents/src/pdf/mock-api.ts @@ -9,6 +9,7 @@ import { import { type InputElement } from '@atj/forms/src/config/elements/input'; import json from './al_name_change.json' assert { type: 'json' }; +import { FieldsetElement } from '@atj/forms/src/config/elements/fieldset'; const TxInput = z.object({ input_type: z.literal('Tx'), @@ -103,11 +104,11 @@ export const parseAlabamaNameChangeForm = (): ParsedPdf => { }; const rootSequence: FormElementId[] = []; for (const element of extracted.elements) { - const sequenceElements: FormElementId[] = []; + const fieldsetElements: FormElementId[] = []; for (const input of element.inputs) { if (input.input_type === 'Tx') { const id = input.input_params.output_id.toLowerCase(); - sequenceElements.push(id); + fieldsetElements.push(id); parsedPdf.elements[id] = { type: 'input', id, @@ -127,20 +128,21 @@ export const parseAlabamaNameChangeForm = (): ParsedPdf => { }; } } - if (sequenceElements.length === 1) { - rootSequence.push(sequenceElements[0]); - } else if (sequenceElements.length > 1) { + if (fieldsetElements.length === 1) { + rootSequence.push(fieldsetElements[0]); + } else if (fieldsetElements.length > 1) { parsedPdf.elements[element.id] = { id: element.id, - type: 'sequence', + type: 'fieldset', data: { - elements: sequenceElements, + legend: element.element_params.text, + elements: fieldsetElements, }, default: { elements: [], }, required: true, - }; + } as FieldsetElement; rootSequence.push(element.id); } } diff --git a/packages/forms/src/config/config.ts b/packages/forms/src/config/config.ts index 04b0a491..f3d19ed8 100644 --- a/packages/forms/src/config/config.ts +++ b/packages/forms/src/config/config.ts @@ -1,4 +1,5 @@ import { type FormConfig } from '.'; +import { fieldsetConfig } from './elements/fieldset'; import { inputConfig } from './elements/input'; import { paragraphConfig } from './elements/paragraph'; import { sequenceConfig } from './elements/sequence'; @@ -8,6 +9,7 @@ import { sequenceConfig } from './elements/sequence'; // understand the usage scenarios better. export const defaultFormConfig: FormConfig = { elements: { + fieldset: fieldsetConfig, input: inputConfig, paragraph: paragraphConfig, sequence: sequenceConfig, diff --git a/packages/forms/src/config/elements/fieldset.ts b/packages/forms/src/config/elements/fieldset.ts index e95139b4..6fa993ab 100644 --- a/packages/forms/src/config/elements/fieldset.ts +++ b/packages/forms/src/config/elements/fieldset.ts @@ -2,16 +2,23 @@ import * as z from 'zod'; import { type FormElementConfig } from '..'; import { type FormElement, type FormElementId } from '../../element'; -import { type Pattern, createPromptForElement } from '../../pattern'; +import { + type FieldsetPattern, + type Pattern, + createPromptForElement, +} from '../../pattern'; import { safeZodParse } from '../../util/zod'; +import { getFormElement } from '../..'; export type FieldsetElement = FormElement<{ - legend: string; - elements: FormElementId; + legend?: string; + elements: FormElementId[]; }>; -const fieldsetSchema = z.object({ - legend: z.string(), +const FieldsetSchema = z.array(z.string()); + +const configSchema = z.object({ + legend: z.string().optional(), elements: z.array(z.string()), }); @@ -21,17 +28,27 @@ export const fieldsetConfig: FormElementConfig = { elements: [], }, parseData: (_, obj) => { - return safeZodParse(fieldsetSchema, obj); + return safeZodParse(FieldsetSchema, obj); }, + parseConfigData: obj => safeZodParse(configSchema, obj), getChildren(element, elements) { return element.data.elements.map( (elementId: string) => elements[elementId] ); }, - createPrompt(config, session, element, options): Pattern[] { - return element.data.elements.map((elementId: string) => { - const element = session.form.elements[elementId]; + createPrompt(config, session, element, options) { + const children = element.data.elements.map((elementId: string) => { + const element = getFormElement(session.form, elementId); return createPromptForElement(config, session, element, options); }); + return { + pattern: { + _children: children, + _elementId: element.id, + type: 'fieldset', + legend: element.data.legend, + } satisfies Pattern, + children, + }; }, }; diff --git a/packages/forms/src/pattern.ts b/packages/forms/src/pattern.ts index 900d9a94..695fc386 100644 --- a/packages/forms/src/pattern.ts +++ b/packages/forms/src/pattern.ts @@ -39,6 +39,11 @@ export type ParagraphPattern = { text: string; }; +export type FieldsetPattern = { + type: 'fieldset'; + legend: string; +}; + export type Pattern = { _elementId: FormElementId; _children: PromptPart[];