Add support for translations

[esezen]

Pull Request Checklist

Before you submit a pull request, please make sure you have to following:

• I have added or updated TypeScript types for my changes, ensuring they are compatible with the existing codebase.
• I have added JSDoc comments to my TypeScript definitions for improved documentation.
• I have added tests that prove my fix is effective or that my feature works.
• I have added any necessary documentation (if appropriate).
• I have made sure my PR is up-to-date with the main branch.

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no API changes)
• Documentation content changes
• TypeScript type definitions update
• Other... Please describe:

[Copilot]

Pull request overview

This PR adds internationalization (i18n) support by introducing a translations feature that allows customization of UI text strings throughout the component library.

Changes:

• Added a Translations type and translate helper function to support optional translation overrides with English fallbacks
• Integrated translations into all user-facing UI components including filters, sort controls, product cards, and zero results displays
• Created comprehensive test coverage and Storybook documentation demonstrating Spanish translations

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
src/types.ts	Defines the Translations type with all translatable UI string keys and adds translations prop to context/provider interfaces
src/utils/helpers.ts	Implements the translate function that handles translation lookups with fallback to English defaults
src/utils/index.ts	Exports the new helpers module
src/hooks/useCioPlpProvider.ts	Integrates translations into the provider context
src/components/Sort/Sort.tsx	Applies translations to sort-related UI strings
src/components/ProductCard/ProductCard.tsx	Translates "Add to Cart" button text
src/components/Groups/Groups.tsx	Applies translations to category-related strings
src/components/Filters/FilterRangeSlider.tsx	Translates range filter labels ("from"/"to")
src/components/Filters/FilterOptionsList.tsx	Translates "Show All"/"Show Less" buttons
src/components/CioPlpGrid/ZeroResults/ZeroResults.tsx	Applies translations to all zero results messaging
src/components/CioPlpGrid/CioPlpGrid.tsx	Translates results count and filter button text
src/stories/components/CioPlp/Translations.stories.tsx	Provides Spanish translation example in Storybook
src/stories/components/CioPlp/Translations Code Examples.mdx	Documents translation feature usage and available keys
src/constants.ts	Adds documentation constant for translations feature
spec/utils/helpers.test.ts	Comprehensive unit tests for the translate function
cspell.json	Adds Spanish and French words to spell checker dictionary

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Corrected spelling of 'Categorias' to 'Categorías' (missing accent).

Suggested change

	Categories: 'Categorias',
	Categories: 'Categorías',

[Copilot]

Corrected spelling of 'Categorias' to 'Categorías' (missing accent).

Suggested change

	Categories: 'Categorias',
	Categories: 'Categorías',

[Copilot]

Corrected spelling of 'tipograficos' to 'tipográficos' (missing accent).

Suggested change

	'Check for typos': 'Revisa errores tipograficos',
	'Check for typos': 'Revisa errores tipográficos',

[Copilot]

Corrected spelling of 'terminos' to 'términos' (missing accent).

Suggested change

	'Broaden your search terms': 'Amplia tus terminos de busqueda',
	'Broaden your search terms': 'Amplia tus términos de busqueda',

[Copilot]

Corrected spelling of 'busqueda' to 'búsqueda' (missing accent).

Suggested change

	'Broaden your search terms': 'Amplia tus terminos de busqueda',
	'Broaden your search terms': 'Amplia tus terminos de búsqueda',

[Copilot]

Corrected spelling of 'Categorias' to 'Categorías' (missing accent).

Suggested change

	Categories: 'Categorias',
	Categories: 'Categorías',

[Copilot]

Corrected spelling of 'tipograficos' to 'tipográficos' (missing accent).

Suggested change

	'Check for typos': 'Revisa errores tipograficos',
	'Check for typos': 'Revisa errores tipográficos',

[Copilot]

Corrected spelling of 'terminos' to 'términos' (missing accent).

Suggested change

	'Broaden your search terms': 'Amplia tus terminos de busqueda',
	'Broaden your search terms': 'Amplia tus términos de busqueda',

[Copilot]

Corrected spelling of 'busqueda' to 'búsqueda' (missing accent).

Suggested change

	'Broaden your search terms': 'Amplia tus terminos de busqueda',
	'Broaden your search terms': 'Amplia tus terminos de búsqueda',

[constructor-claude-bedrock]

Code Review Results

✅ Strengths

Well-structured translation feature with comprehensive test coverage, clean implementation, and excellent documentation including Storybook examples.

🚨 Critical Issues

None found.

⚠️ Important Issues

• [File: src/utils/helpers.ts Line: L14-L39] The translate function creates a new localTranslations object on every invocation, which is inefficient. This object should be defined as a constant outside the function to avoid unnecessary memory allocations on each call. Move the DEFAULT_TRANSLATIONS object outside the function scope for better performance.

• [File: src/utils/helpers.ts Line: L12] Missing translation keys in the default translations object. The function should include all keys defined in the Translations type for consistency. Missing keys: "from", "to", "Add to Cart". These keys are defined in the Translations type (src/types.ts:L84-L88) but not in the default translations, which could cause unexpected fallbacks to the raw key string.

💡 Suggestions

• [File: src/utils/helpers.ts Line: L42-L43] The type casting as keyof Translations and as string could be avoided with better typing. Consider using a stricter type guard or a type-safe lookup approach to eliminate the need for assertions.

• [File: src/constants.ts Line: L7-L46] The translationsDescription constant appears unused in the codebase (based on the diff). If this is intended for documentation purposes, consider adding a JSDoc comment explaining where it should be used, or remove it if not needed.

• [File: spec/utils/helpers.test.ts Line: L87-L94] Good edge case test for undefined values. Consider adding a similar test for empty string values (results: empty string) to ensure the behavior is well-defined when a translation is explicitly set to an empty string.

• [General] The translations are passed through context and retrieved in each component. For components that use multiple translation keys (like CioPlpGrid), consider memoizing the context value to prevent unnecessary re-renders when unrelated context values change.

• [File: src/stories/components/CioPlp/Translations.stories.tsx Line: L40-L42] The gridKey increment logic has a potential issue - it references gridKey in the dependency array which is intentionally omitted, making the increment unreliable. Consider using a functional state update: setGridKey(prev => prev + 1).

Overall Assessment: ✅ Pass

The translation feature is well-implemented with strong test coverage and good documentation. The important issues identified are primarily performance optimizations and consistency improvements that should be addressed to ensure optimal performance at scale. The code is production-ready once the missing default translations are added.