[CDX-303] 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:

[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.

[constructor-claude-bedrock]

Code Review

This PR adds i18n/translations support to the PLP component library, introducing a Translations type, a translate() helper, and wiring the new translations prop through the context to all UI strings.

Inline comments: 6 discussions added

Overall Assessment: ⚠️ Needs Work