From 91a62f7f2e5ef52712a8ced369c840a0e08494aa Mon Sep 17 00:00:00 2001 From: Daniel Naab Date: Wed, 3 Apr 2024 12:56:42 -0500 Subject: [PATCH] Address pattern hashed out more; to ease testing, add a button to create a new empty blueprint. --- .../FormManager/DocumentImporter/index.tsx | 6 +- .../src/FormManager/FormEdit/AddPattern.tsx | 4 +- .../PDFFileSelect.stories.tsx | 10 +- .../PDFFileSelect.test.tsx | 2 +- .../file-input.test.ts | 0 .../file-input.ts | 0 .../{PDFFileSelect => CreateNew}/hooks.ts | 11 ++ .../{PDFFileSelect => CreateNew}/index.tsx | 8 +- .../design/src/FormManager/FormList/index.tsx | 29 +++- .../config/view/Address/Address.stories.tsx | 0 .../src/config/view/Address/Address.test.tsx | 0 .../design/src/config/view/Address/index.tsx | 147 ++++++++++++++++ .../design/src/config/view/ZipCode/index.tsx | 24 +++ packages/design/src/config/view/index.tsx | 2 + packages/forms/src/components.ts | 7 +- packages/forms/src/patterns/address/index.ts | 161 ++++++++++++++---- .../src/patterns/address/jurisdictions.ts | 7 +- packages/forms/src/patterns/fieldset.ts | 1 - packages/forms/src/patterns/sequence.ts | 1 - 19 files changed, 357 insertions(+), 63 deletions(-) rename packages/design/src/FormManager/FormList/{PDFFileSelect => CreateNew}/PDFFileSelect.stories.tsx (61%) rename packages/design/src/FormManager/FormList/{PDFFileSelect => CreateNew}/PDFFileSelect.test.tsx (69%) rename packages/design/src/FormManager/FormList/{PDFFileSelect => CreateNew}/file-input.test.ts (100%) rename packages/design/src/FormManager/FormList/{PDFFileSelect => CreateNew}/file-input.ts (100%) rename packages/design/src/FormManager/FormList/{PDFFileSelect => CreateNew}/hooks.ts (79%) rename packages/design/src/FormManager/FormList/{PDFFileSelect => CreateNew}/index.tsx (91%) create mode 100644 packages/design/src/config/view/Address/Address.stories.tsx create mode 100644 packages/design/src/config/view/Address/Address.test.tsx create mode 100644 packages/design/src/config/view/Address/index.tsx create mode 100644 packages/design/src/config/view/ZipCode/index.tsx diff --git a/packages/design/src/FormManager/DocumentImporter/index.tsx b/packages/design/src/FormManager/DocumentImporter/index.tsx index a969dc83..e1ccc5fd 100644 --- a/packages/design/src/FormManager/DocumentImporter/index.tsx +++ b/packages/design/src/FormManager/DocumentImporter/index.tsx @@ -12,7 +12,7 @@ import { import { type FormService } from '@atj/form-service'; import Form, { FormUIContext } from '../../Form'; -import { onFileInputChangeGetFile } from '../FormList/PDFFileSelect/file-input'; +import { onFileInputChangeGetFile } from '../FormList/CreateNew/file-input'; const DocumentImporter = ({ baseUrl, @@ -69,7 +69,7 @@ const DocumentImporter = ({ } }; - const PDFFileSelect = () => { + const CreateNew = () => { return (
- {state.page === 1 && } + {state.page === 1 && } {state.page === 2 && } {state.page === 3 && } diff --git a/packages/design/src/FormManager/FormEdit/AddPattern.tsx b/packages/design/src/FormManager/FormEdit/AddPattern.tsx index 9b80fee0..b2d04e21 100644 --- a/packages/design/src/FormManager/FormEdit/AddPattern.tsx +++ b/packages/design/src/FormManager/FormEdit/AddPattern.tsx @@ -10,7 +10,7 @@ export const AddPattern = () => { return (
+ ); +}; +export default Address; diff --git a/packages/design/src/config/view/ZipCode/index.tsx b/packages/design/src/config/view/ZipCode/index.tsx new file mode 100644 index 00000000..9c1f8238 --- /dev/null +++ b/packages/design/src/config/view/ZipCode/index.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { useFormContext } from 'react-hook-form'; + +import { type ZipcodeProps } from '@atj/forms'; + +export const ZipCode = (props: ZipcodeProps) => { + const { register } = useFormContext(); + return ( + <> + + + + ); +}; diff --git a/packages/design/src/config/view/index.tsx b/packages/design/src/config/view/index.tsx index 0066eb4e..43aa1064 100644 --- a/packages/design/src/config/view/index.tsx +++ b/packages/design/src/config/view/index.tsx @@ -1,3 +1,4 @@ +import Address from './Address'; import Fieldset from './Fieldset'; import FormSummary from './FormSummary'; import Paragraph from './Paragraph'; @@ -7,6 +8,7 @@ import TextInput from './TextInput'; import { type ComponentForPattern } from '../../Form'; export const defaultPatternComponents: ComponentForPattern = { + address: Address, fieldset: Fieldset, 'form-summary': FormSummary, input: TextInput, diff --git a/packages/forms/src/components.ts b/packages/forms/src/components.ts index f67e6309..c3bdfb3c 100644 --- a/packages/forms/src/components.ts +++ b/packages/forms/src/components.ts @@ -38,9 +38,14 @@ export type FieldsetProps = PatternProps<{ legend?: string; }>; +export type ZipcodeProps = PatternProps<{ + type: 'zipcode'; + inputId: string; + value: string; +}>; + export type PatternProps = { _patternId: PatternId; - _children: PromptPart[]; type: string; } & T; diff --git a/packages/forms/src/patterns/address/index.ts b/packages/forms/src/patterns/address/index.ts index a52d2537..14cb71f3 100644 --- a/packages/forms/src/patterns/address/index.ts +++ b/packages/forms/src/patterns/address/index.ts @@ -5,17 +5,64 @@ import { type Pattern, type PatternConfig, } from '../../pattern'; -import { - type FieldsetProps, - createPromptForPattern, - TextInputProps, -} from '../../components'; +import { PatternProps } from '../../components'; import { safeZodParse } from '../../util/zod'; -import { stateTerritoryOrMilitaryPostAbbreviations } from './jurisdictions'; +import { + stateTerritoryOrMilitaryPostAbbreviations, + stateTerritoryOrMilitaryPostList, +} from './jurisdictions'; import { getFormSessionValue } from '../../session'; export type AddressPattern = Pattern<{}>; +export type AddressComponentProps = PatternProps<{ + childProps: { + streetAddress: { + inputId: string; + value: string; + label: string; + required: boolean; + error?: string; + }; + streetAddress2: { + inputId: string; + value: string; + label: string; + required: boolean; + error?: string; + }; + city: { + inputId: string; + value: string; + label: string; + required: boolean; + error?: string; + }; + stateTerritoryOrMilitaryPost: { + inputId: string; + value: string; + label: string; + required: boolean; + options: typeof stateTerritoryOrMilitaryPostList; + error?: string; + }; + zipCode: { + inputId: string; + value: string; + label: string; + required: boolean; + error?: string; + }; + urbanizationCode: { + inputId: string; + value: string; + label: string; + required: boolean; + error?: string; + }; + }; +}>; + const AddressSchema = z.object({ steetAddress: z.string().max(128), steetAddress2: z.string().max(128).optional(), @@ -46,39 +93,83 @@ export const addressConfig: PatternConfig< return []; }, createPrompt(config, session, pattern, options) { - const extraAttributes: Record = {}; const sessionValue = getFormSessionValue(session, pattern.id); - if (options.validate) { - const isValidResult = validatePattern( - addressConfig, - pattern, - sessionValue - ); - if (!isValidResult.success) { - extraAttributes['error'] = isValidResult.error; - } - } - const children = [ - { - pattern: { - _patternId: pattern.id, - type: 'input', - inputId: pattern.id, - value: sessionValue, - label: 'pattern.data.label', - required: true, - ...extraAttributes, - } as TextInputProps, - children: [], - }, - ]; + const result = options.validate + ? AddressSchema.safeParse(sessionValue) + : null; return { pattern: { - _children: children, _patternId: pattern.id, - type: 'sequence', - }, - children, + type: 'address', + childProps: { + streetAddress: { + inputId: `${pattern.id}.streetAddress`, + value: sessionValue?.streetAddress, + label: 'Street address', + required: true, + error: + !result || result?.success + ? undefined + : result.error.formErrors.fieldErrors.steetAddress?.join(', '), + }, + streetAddress2: { + inputId: `${pattern.id}.streetAddress2`, + value: sessionValue?.streetAddress2, + label: 'Street address line 2', + required: false, + error: + !result || result?.success + ? undefined + : result.error.formErrors.fieldErrors.steetAddress2?.join(', '), + }, + city: { + inputId: `${pattern.id}.city`, + value: sessionValue?.city, + label: 'City', + required: true, + error: + !result || result?.success + ? undefined + : result.error.formErrors.fieldErrors.city?.join(', '), + }, + stateTerritoryOrMilitaryPost: { + inputId: `${pattern.id}.city`, + value: sessionValue?.stateTerritoryOrMilitaryPost, + label: 'State, territory, or military post', + required: true, + options: stateTerritoryOrMilitaryPostList, + error: + !result || result?.success + ? undefined + : result.error.formErrors.fieldErrors.stateTerritoryOrMilitaryPost?.join( + ', ' + ), + }, + zipCode: { + inputId: `${pattern.id}.zipCode`, + value: sessionValue?.zipCode, + label: 'ZIP code', + required: true, + error: + !result || result?.success + ? undefined + : result.error.formErrors.fieldErrors.zipCode?.join(', '), + }, + urbanizationCode: { + inputId: `${pattern.id}.urbanizationCode`, + value: sessionValue?.urbanizationCode, + label: 'Urbanization (Puerto Rico only)', + required: false, + error: + !result || result?.success + ? undefined + : result.error.formErrors.fieldErrors.urbanizationCode?.join( + ', ' + ), + }, + }, + } satisfies AddressComponentProps, + children: [], }; }, }; diff --git a/packages/forms/src/patterns/address/jurisdictions.ts b/packages/forms/src/patterns/address/jurisdictions.ts index ab08fe0d..bbc97ea1 100644 --- a/packages/forms/src/patterns/address/jurisdictions.ts +++ b/packages/forms/src/patterns/address/jurisdictions.ts @@ -126,14 +126,13 @@ export const stateTerritoryOrMilitaryPostAbbreviations = z.union([ z.literal('WY'), z.literal('AA'), z.literal('AE'), - z.literal('AE'), - z.literal('AE'), - z.literal('AE'), z.literal('AP'), ]); +/* type JurisdictionAbbr = (typeof stateTerritoryOrMilitaryPostList)[number]['abbr']; -export const getJurisdictionAbbreviations = (): JurisdictionAbbr[] => +const getJurisdictionAbbreviations = (): JurisdictionAbbr[] => stateTerritoryOrMilitaryPostList.map(j => j.abbr); +*/ diff --git a/packages/forms/src/patterns/fieldset.ts b/packages/forms/src/patterns/fieldset.ts index 9d452144..a6b3cfdd 100644 --- a/packages/forms/src/patterns/fieldset.ts +++ b/packages/forms/src/patterns/fieldset.ts @@ -37,7 +37,6 @@ export const fieldsetConfig: PatternConfig = { }); return { pattern: { - _children: children, _patternId: pattern.id, type: 'fieldset', legend: pattern.data.legend, diff --git a/packages/forms/src/patterns/sequence.ts b/packages/forms/src/patterns/sequence.ts index b09d5ad1..e9245634 100644 --- a/packages/forms/src/patterns/sequence.ts +++ b/packages/forms/src/patterns/sequence.ts @@ -35,7 +35,6 @@ export const sequenceConfig: PatternConfig = { }); return { pattern: { - _children: children, _patternId: pattern.id, type: 'sequence', },