Skip to content

feat(address): Add i18n support for postal code and phone helper texts #229

Open

Description

@BleedingDev

Summary

Add prebuild, tree-shakeable i18n modules to @techsio/address for localized helper texts in postal code and phone number inputs.

Problem

Currently, FormPostalInput and FormPhoneInput components require consumers to provide their own translated helpText and errorText props. This leads to:

  • Duplicated translation effort across consumers
  • Inconsistent messaging
  • No centralized source of truth for format hints

Proposed Solution

Create separate i18n modules per language that can be imported individually (tree-shakeable):

libs/address/src/
  i18n/
    types.ts         # Shared types
    cs.ts            # Czech translations
    en.ts            # English translations  
    de.ts            # German translations
    index.ts         # Re-exports all (optional)

API Design

import { getPostalHelpText, getPostalErrorText, getPhoneHelpText } from "@techsio/address/i18n/cs"

<FormPostalInput
  countryCode="CZ"
  helpText={getPostalHelpText("CZ")}    // "Formát: XXX XX"
  errorText={getPostalErrorText("CZ")}  // "Neplatné PSČ"
/>

<FormPhoneInput
  helpText={getPhoneHelpText("CZ")}     // "Formát: 777 888 999"
/>

Helper Text Types

Type Example (CS) Example (EN)
Postal format hint "Formát: XXX XX" "Format: XXX XX"
Postal error "Neplatné PSČ" "Invalid postal code"
Phone format hint "Formát: 777 888 999" "Format: 777 888 999"
Phone error "Neplatné telefonní číslo" "Invalid phone number"

Benefits

  • Tree-shakeable: Only imported language gets bundled
  • Type-safe: Functions are typed, countryCode is validated
  • Prebuild: Resolved at build time, no runtime fetching
  • Centralized: Single source of truth for all consumers

Countries to Support

Initial: CZ, SK, DE, AT, PL, GB (EU-typical)

Languages to Support

Initial: cs, en, de (expand as needed)

Tasks

  • Create libs/address/src/i18n/types.ts with shared types
  • Create libs/address/src/i18n/cs.ts with Czech translations
  • Create libs/address/src/i18n/en.ts with English translations
  • Create libs/address/src/i18n/de.ts with German translations
  • Add exports to libs/address/package.json
  • Update FormPostalInput and FormPhoneInput stories to demonstrate usage
  • Add documentation

🤖 Generated with Claude Code

Activity

  1. coderabbitai commented on Dec 17, 2025

    @coderabbitai
    Contributor

    📝 CodeRabbit Plan Mode

    Generate an implementation plan and prompts that you can use with your favorite coding agent.

    • Create Plan
    Examples
    You can configure auto-planning by selecting labels in the issue_enrichment configuration.

    🔗 Similar Issues

    Related Issues

    👤 Suggested Assignees


    🧪 Issue enrichment is currently in open beta.

    To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

    issue_enrichment:
      auto_enrich:
        enabled: false

    💬 Have feedback or questions? Drop into our discord or schedule a call!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions