Fix enrollment checker build: resolve TypeScript errors and Vite config

The enrollment checker failed to build (SSG) and failed to run tests due to several issues:
- generate-fonts.js crashed when the output directory didn't exist (ENOENT
- exactOptionalPropertyTypes violations across enrollment feature components
- Vitest couldn't resolve @sebt/design-system subpath exports due to a hard alias that bypassed the package's exports field
- Dockerfile.ssg didn't exclude SSR-only API proxy routes from static export

Author: spokenbird

packages/design-system/design/scripts/generate-fonts.js

@@ -16,7 +16,7 @@
  */
 
 import './load-env.js'
-import { readFileSync, writeFileSync, existsSync } from 'fs'
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs'
 import { join, dirname, relative } from 'path'
 import { fileURLToPath } from 'url'
 
@@ -170,6 +170,7 @@ function main() {
     console.log(`✅ Found ${fonts.size} font(s): ${Array.from(fonts).join(', ')}`)
 
     const fontsTs = generateFontsTs(fonts, state)
+    mkdirSync(dirname(outputPath), { recursive: true })
     writeFileSync(outputPath, fontsTs, 'utf8')
 
     console.log(`✅ Generated fonts.ts for ${state.toUpperCase()}`)

src/SEBT.EnrollmentChecker.Web/.gitignore

@@ -60,6 +60,9 @@ test-results/
 # Pa11y Accessibility Test Screenshots
 pa11y-screenshots/
 
+# Generated Design Tokens (auto-generated from design/states/*.json)
+design/fonts.ts
+
 # Generated i18n Locale Files
 content/locales/
 !content/locales/**/common.json

src/SEBT.EnrollmentChecker.Web/Dockerfile.ssg

@@ -18,6 +18,9 @@ ENV STATE=$STATE \
     NEXT_PUBLIC_PORTAL_URL=$NEXT_PUBLIC_PORTAL_URL \
     NEXT_PUBLIC_APPLICATION_URL=$NEXT_PUBLIC_APPLICATION_URL
 
+# API routes are SSR-only proxies — remove them before static export
+RUN rm -rf src/SEBT.EnrollmentChecker.Web/src/app/api
+
 RUN BUILD_STATIC=true pnpm --filter @sebt/enrollment-checker build
 # Output is in src/SEBT.EnrollmentChecker.Web/out/
 # Upload to S3: aws s3 sync src/SEBT.EnrollmentChecker.Web/out/ s3://your-bucket/

src/SEBT.EnrollmentChecker.Web/src/features/enrollment/api/checkEnrollment.test.ts

@@ -1,5 +1,5 @@
 import { http, HttpResponse } from 'msw'
-import { beforeEach, describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { server } from '../../../mocks/server'
 import type { Child } from '../context/EnrollmentContext'
 import { enrollmentCheckRequestSchema } from '../schemas/enrollmentSchema'

src/SEBT.EnrollmentChecker.Web/src/features/enrollment/components/ChildForm.tsx

@@ -77,7 +77,7 @@ export function ChildForm({
         label={tCommon('labelFirstName')}
         value={values.firstName ?? ''}
         onChange={e => set('firstName', e.target.value)}
-        error={errors.firstName}
+        {...(errors.firstName && { error: errors.firstName })}
         isRequired
         hint={nameHint}
       />
@@ -91,7 +91,7 @@ export function ChildForm({
         label={tCommon('labelLastName')}
         value={values.lastName ?? ''}
         onChange={e => set('lastName', e.target.value)}
-        error={errors.lastName}
+        {...(errors.lastName && { error: errors.lastName })}
         isRequired
         hint={nameHint}
       />

src/SEBT.EnrollmentChecker.Web/src/features/enrollment/components/ChildFormPage.tsx

@@ -67,7 +67,7 @@ export function ChildFormPage({ showSchoolField, apiBaseUrl }: ChildFormPageProp
         <p className="usa-prose">{t('body')}</p>
         <p className="usa-hint">{t('requiredFields', { ns: 'common' })}</p>
         <ChildForm
-          initialValues={editingChild}
+          {...(editingChild && { initialValues: editingChild })}
           onSubmit={handleSubmit}
           onCancel={handleCancel}
           showSchoolField={showSchoolField}

src/SEBT.EnrollmentChecker.Web/src/features/enrollment/components/ChildReviewCard.tsx

@@ -10,8 +10,8 @@ interface ChildReviewCardProps {
 
 /** Format ISO date (YYYY-MM-DD) as a locale-aware date string (e.g., "April 12, 2015"). */
 function formatBirthdate(dateOfBirth: string, locale: string): string {
-  const [year, month, day] = dateOfBirth.split('-').map(Number)
-  const date = new Date(year, month - 1, day)
+  const parts = dateOfBirth.split('-').map(Number)
+  const date = new Date(parts[0]!, parts[1]! - 1, parts[2]!)
   return date.toLocaleDateString(locale, { year: 'numeric', month: 'long', day: 'numeric' })
 }
 

src/SEBT.EnrollmentChecker.Web/src/features/enrollment/components/ResultsPage.tsx

@@ -43,7 +43,7 @@ export function ResultsPage({ results, applicationUrl }: ResultsPageProps) {
                 firstName={child.firstName}
                 lastName={child.lastName}
                 displayStatus="error"
-                errorMessage={child.statusMessage}
+                {...(child.statusMessage !== undefined && { errorMessage: child.statusMessage })}
               />
             ))}
           </section>

src/SEBT.EnrollmentChecker.Web/src/features/enrollment/context/EnrollmentContext.tsx

@@ -76,7 +76,22 @@ function loadFromStorage(): EnrollmentState {
     if (!raw) return initialState
     const parsed: unknown = JSON.parse(raw)
     const result = enrollmentStorageSchema.safeParse(parsed)
-    return result.success ? result.data : initialState
+    if (!result.success) return initialState
+    return {
+      editingChildId: result.data.editingChildId,
+      children: result.data.children.map(parsedChild => {
+        const child: Child = {
+          id: parsedChild.id,
+          firstName: parsedChild.firstName,
+          lastName: parsedChild.lastName,
+          dateOfBirth: parsedChild.dateOfBirth,
+          ...(parsedChild.middleName && { middleName: parsedChild.middleName }),
+          ...(parsedChild.schoolName && { schoolName: parsedChild.schoolName }),
+          ...(parsedChild.schoolCode && { schoolCode: parsedChild.schoolCode })
+        }
+        return child
+      })
+    }
   } catch {
     return initialState
   }
@@ -106,33 +121,36 @@ export function EnrollmentProvider({ children }: { children: ReactNode }) {
   const actions: EnrollmentActions = {
     addChild: (values) => update(s => {
       if (s.children.length >= MAX_CHILDREN) return s
-      return {
-      ...s,
-      children: [...s.children, {
+      const child: Child = {
         id: uuidv4(),
         firstName: values.firstName,
-        middleName: values.middleName,
         lastName: values.lastName,
         dateOfBirth: toDateOfBirth(values),
-        schoolName: values.schoolName,
-        schoolCode: values.schoolCode
-      }]
-    }}),
+        ...(values.middleName && { middleName: values.middleName }),
+        ...(values.schoolName && { schoolName: values.schoolName }),
+        ...(values.schoolCode && { schoolCode: values.schoolCode })
+      }
+      return { ...s, children: [...s.children, child] }
+    }),
     updateChild: (id, values) => update(s => ({
       ...s,
-      children: s.children.map(c => c.id === id ? {
-        id,
-        firstName: values.firstName,
-        middleName: values.middleName,
-        lastName: values.lastName,
-        dateOfBirth: toDateOfBirth(values),
-        schoolName: values.schoolName,
-        schoolCode: values.schoolCode
-      } : c)
+      children: s.children.map(child => {
+        if (child.id !== id) return child
+        const updated: Child = {
+          id,
+          firstName: values.firstName,
+          lastName: values.lastName,
+          dateOfBirth: toDateOfBirth(values),
+          ...(values.middleName && { middleName: values.middleName }),
+          ...(values.schoolName && { schoolName: values.schoolName }),
+          ...(values.schoolCode && { schoolCode: values.schoolCode })
+        }
+        return updated
+      })
     })),
     removeChild: (id) => update(s => ({
       ...s,
-      children: s.children.filter(c => c.id !== id)
+      children: s.children.filter(child => child.id !== id)
     })),
     setEditingChildId: (id) => update(s => ({ ...s, editingChildId: id })),
     clearState: () => {

src/SEBT.EnrollmentChecker.Web/src/features/enrollment/schemas/childSchema.ts

@@ -28,11 +28,11 @@ export function toDateOfBirth(values: Pick<ChildFormValues, 'month' | 'day' | 'y
 
 /** Decompose an ISO date string into month/day/year for form population. */
 export function fromDateOfBirth(dateOfBirth: string): { month: string; day: string; year: string } {
-  const [year, month, day] = dateOfBirth.split('-')
+  const parts = dateOfBirth.split('-')
   // Strip leading zeros for natural display (e.g., "04" -> "4")
   return {
-    month: String(parseInt(month, 10)),
-    day: String(parseInt(day, 10)),
-    year
+    month: String(parseInt(parts[1]!, 10)),
+    day: String(parseInt(parts[2]!, 10)),
+    year: parts[0]!
   }
 }