@sbc-connect/nuxt-forms 0.0.0-test-ld-20260520212549

package/app/utils/zod-schemas/addresses.ts

@@ -0,0 +1,159 @@
+import { z } from 'zod'
+
+/**
+ * Canadian postal code regex (eg, accepts A1A 1A1 or A1A1A1).
+ * Ref: https://en.wikipedia.org/wiki/Postal_codes_in_Canada
+ */
+const CanadaPostalCodeRegex = /^[ABCEGHJ-NPRSTVXY][0-9][ABCEGHJ-NPRSTV-Z][ ]?[0-9][ABCEGHJ-NPRSTV-Z][0-9]$/i
+const CanadaPostalCodeFormatOnlyRegex = /^[A-Z][0-9][A-Z][ ]?[0-9][A-Z][0-9]$/i
+
+/**
+ * US ZIP code regex (eg, accepts 12345 or 12345-6789).
+ * Ref: https://faq.usps.com/s/article/ZIP-Code-The-Basics
+*/
+const USZipCodeRegex = /^\d{5}(?:-\d{4})?$/
+
+export function getRequiredAddressSchema() {
+  const t = useNuxtApp().$i18n.t
+
+  return z.object({
+    street: z
+      .string()
+      .min(1, t('connect.validation.fieldRequired'))
+      .max(50, t('connect.validation.maxChars', { count: 50 })),
+    streetAdditional: z
+      .string()
+      .max(105, t('connect.validation.maxChars', { count: 105 }))
+      .optional(),
+    city: z
+      .string()
+      .min(1, t('connect.validation.fieldRequired'))
+      .max(40, t('connect.validation.maxChars', { count: 40 })),
+    region: z
+      .string()
+      .optional(),
+    postalCode: z
+      .string()
+      .max(15, t('connect.validation.maxChars', { count: 15 }))
+      .optional(),
+    country: z
+      .string()
+      .min(1, t('connect.validation.fieldRequired')),
+    locationDescription: z
+      .string()
+      .max(80, t('connect.validation.maxChars', { count: 80 }))
+      .optional()
+  }).superRefine((data, ctx) => {
+    const { country, region, postalCode } = data
+
+    if (region && region.length > 2) {
+      ctx.addIssue({
+        code: 'custom',
+        message: t('connect.validation.maxChars', { count: 2 }),
+        path: ['region']
+      })
+    }
+
+    const isRequiredRegion = country === 'US' || country === 'CA'
+    const isRequiredPostalCode = !!country && !isNoPostalCodeCountry(country)
+
+    if (isRequiredRegion) {
+      if (!region) {
+        ctx.addIssue({
+          code: 'custom',
+          message: t('connect.validation.fieldRequired'),
+          path: ['region']
+        })
+      }
+    }
+
+    if (isRequiredPostalCode && !postalCode) {
+      ctx.addIssue({
+        code: 'custom',
+        message: t('connect.validation.fieldRequired'),
+        path: ['postalCode']
+      })
+    }
+
+    if (!postalCode) {
+      return
+    }
+
+    if (country === 'CA') {
+      if (!CanadaPostalCodeFormatOnlyRegex.test(postalCode)) {
+        ctx.addIssue({
+          code: 'custom',
+          message: t('connect.validation.invalidPostalCodeFormat'),
+          path: ['postalCode']
+        })
+      } else if (!CanadaPostalCodeRegex.test(postalCode)) {
+        ctx.addIssue({
+          code: 'custom',
+          message: t('connect.validation.invalidPostalCode'),
+          path: ['postalCode']
+        })
+      }
+    } else if (country === 'US') {
+      if (!USZipCodeRegex.test(postalCode)) {
+        ctx.addIssue({
+          code: 'custom',
+          message: t('connect.validation.invalidZipCodeFormat'),
+          path: ['postalCode']
+        })
+      }
+    }
+  })
+}
+
+export function getNonRequiredAddressSchema() {
+  const t = useNuxtApp().$i18n.t
+
+  return z.object({
+    street: z
+      .string()
+      .min(1, t('connect.validation.fieldRequired'))
+      .max(50, t('connect.validation.maxChars', { count: 50 }))
+      .optional()
+      .or(z.literal('')),
+    streetAdditional: z
+      .string()
+      .max(50, t('connect.validation.maxChars', { count: 50 }))
+      .optional(),
+    city: z
+      .string()
+      .min(1, t('connect.validation.fieldRequired'))
+      .max(40, t('connect.validation.maxChars', { count: 40 }))
+      .optional()
+      .or(z.literal('')),
+    region: z
+      .string()
+      .optional(),
+    postalCode: z
+      .string()
+      .max(15, t('connect.validation.maxChars', { count: 15 }))
+      .optional(),
+    country: z
+      .string()
+      .min(1, t('connect.validation.fieldRequired'))
+      .optional()
+      .or(z.literal('')),
+    locationDescription: z
+      .string()
+      .max(80, t('connect.validation.maxChars', { count: 80 }))
+      .optional()
+  }).superRefine((data, ctx) => {
+    // validate region based on country
+    // required if country is US or CA
+    // optional and max 2 characters if not US or CA
+    // const country = data.country
+    const region = data.region
+
+    if (region && region.length > 2) {
+      ctx.addIssue({
+        code: 'custom',
+        message: t('connect.validation.maxChars', { count: 2 }),
+        path: ['region']
+      })
+    }
+  })
+}

package/app/utils/zod-schemas/index.ts

@@ -0,0 +1 @@
+export * from './addresses'

package/i18n/locales/en-CA.ts

@@ -0,0 +1,49 @@
+export default {
+  /* Ordering should be alphabetical unless otherwise specified */
+  connect: {
+    label: {
+      address: 'Address',
+      addressResidential: 'Residential Address',
+      city: 'City',
+      code: 'Code',
+      country: 'Country',
+      countryCode: 'Country Code',
+      deliveryAddress: 'Delivery Address',
+      deliveryInstructions: 'Delivery Instructions',
+      deliveryInstructionsOpt: 'Delivery Instructions (Optional)',
+      line1: 'Address Line 1',
+      line2: 'Address Line 2 (Optional)',
+      locationDescription: 'Location Description',
+      locationDescriptionOpt: 'Location Description (Optional)',
+      mailingAddress: 'Mailing Address',
+      postalCode: 'Postal Code',
+      postalCodeOpt: 'Postal Code (Optional)',
+      province: 'Province',
+      region: 'Region',
+      regionOpt: 'Region (Optional)',
+      sameAsMailAddress: 'Same as Mailing Address',
+      sameAsDeliveryAddress: 'Same as Delivery Address',
+      state: 'State',
+      street: 'Street Address',
+      streetAdditional: 'Additional Street Address (Optional)',
+      streetName: 'Street Name',
+      streetNumber: 'Street Number',
+      unitNumber: 'Unit Number',
+      unitNumberOpt: 'Unit Number (Optional)',
+      zipCode: 'Zip Code'
+    },
+    text: {
+      addressCanBePOBox: 'Street address, PO box, rural route, or general delivery address.',
+      addressCannotBePOBox: 'Address cannot be a PO Box.'
+    },
+    validation: {
+      fieldRequired: 'This field is required',
+      maxChars: 'Maximum 0 characters | Maximum 1 character | Maximum {count} characters', // 0/1 most likely will never be used but required for pluralization
+      minChars: 'Minimum 0 characters | Minimum 1 character | Minimum {count} characters', // 0/1 most likely will never be used but required for pluralization
+      required: 'Required',
+      invalidPostalCode: 'Enter a valid postal code',
+      invalidPostalCodeFormat: 'Format must be A1A 1A1',
+      invalidZipCodeFormat: 'Format must be 12345 or 12345-6789'
+    }
+  }
+}

package/i18n/locales/fr-CA.ts

@@ -0,0 +1,3 @@
+export default {
+  /* Ordering should be alphabetical unless otherwise specified */
+}

package/nuxt.config.ts

@@ -0,0 +1,58 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+import { createResolver } from 'nuxt/kit'
+
+const { resolve } = createResolver(import.meta.url)
+
+export default defineNuxtConfig({
+  ssr: false,
+
+  devtools: { enabled: false },
+
+  compatibilityDate: '2025-07-10',
+
+  imports: {
+    dirs: ['enums', 'interfaces', 'types']
+  },
+
+  extends: ['@sbc-connect/nuxt-base'],
+
+  alias: {
+    '#forms': resolve('./')
+  },
+
+  app: {
+    head: {
+      link: [
+        { rel: 'stylesheet', href: '/css/addresscomplete-2.50.min.css' }
+      ],
+      script: [
+        { src: '/js/addresscomplete-2.50.min.js', type: 'text/javascript', defer: true }
+      ]
+    }
+  },
+
+  i18n: {
+    locales: [
+      {
+        name: 'English',
+        code: 'en-CA',
+        language: 'en-CA',
+        dir: 'ltr',
+        file: 'en-CA.ts'
+      },
+      {
+        name: 'Français',
+        code: 'fr-CA',
+        language: 'fr-CA',
+        dir: 'ltr',
+        file: 'fr-CA.ts'
+      }
+    ]
+  },
+
+  runtimeConfig: {
+    public: {
+      addressCompleteKey: ''
+    }
+  }
+})

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@sbc-connect/nuxt-forms",
+  "type": "module",
+  "version": "0.0.0-test-ld-20260520212549",
+  "repository": "github:bcgov/connect-nuxt",
+  "license": "BSD-3-Clause",
+  "main": "./nuxt.config.ts",
+  "devDependencies": {
+    "@axe-core/playwright": "4.11.1",
+    "dotenv": "17.3.1",
+    "nuxt": "4.2.2",
+    "typescript": "5.9.3",
+    "vue-tsc": "3.2.5",
+    "@sbc-connect/vitest-config": "0.1.1",
+    "@sbc-connect/eslint-config": "0.0.8",
+    "@sbc-connect/playwright-config": "0.1.1"
+  },
+  "dependencies": {
+    "country-codes-list": "2.0.0",
+    "vue-country-flag-next": "2.3.2",
+    "@sbc-connect/nuxt-base": "0.0.0-test-ld-20260520212549"
+  },
+  "scripts": {
+    "preinstall": "npx only-allow pnpm",
+    "dev": "nuxi dev .playground --dotenv ../.env",
+    "build": "nuxt build .playground",
+    "build:test": "pnpm generate && npx serve .playground/.output/public",
+    "generate": "nuxt generate .playground --dotenv ../.env",
+    "preview": "npx serve .playground/.output/public",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "test": "pnpm run test:unit; pnpm run test:e2e",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:unit:watch": "vitest",
+    "test:unit:cov": "vitest --dir tests/unit --coverage",
+    "test:e2e": "npx playwright test",
+    "test:e2e:ui": "npx playwright test --ui",
+    "typecheck": "npx nuxt typecheck"
+  }
+}