Create custom Translation component for better i18n handling (#4431)

* Initial plan * Implement Translation component with Storybook stories Co-authored-by: gabek <414923+gabek@users.noreply.github.com> * Add Jest test for Translation component and demonstrate ?lang=de functionality Co-authored-by: gabek <414923+gabek@users.noreply.github.com> * Javascript formatting autofixes * Create centralized type-safe localization system Co-authored-by: gabek <414923+gabek@users.noreply.github.com> * Add @testing-library/react to Translation component tests Co-authored-by: gabek <414923+gabek@users.noreply.github.com> * Fix code formatting errors with prettier and eslint Co-authored-by: gabek <414923+gabek@users.noreply.github.com> * Revert "Fix code formatting errors with prettier and eslint" Co-authored-by: gabek <414923+gabek@users.noreply.github.com> * fix(js): eslinter errors * fix(js): unused code warnings * fix(js): fix additional warnings * Update Emoji admin page to use new Translation component Co-authored-by: gabek <414923+gabek@users.noreply.github.com> * Organize localization keys by logical sections (Frontend, Admin, Common, Testing) Co-authored-by: gabek <414923+gabek@users.noreply.github.com> * Organize localization keys by TypeScript namespaces Co-authored-by: gabek <414923+gabek@users.noreply.github.com> * Javascript formatting autofixes * feat(js): add support for default translated text * chore: add default lang translations on commit * fix(js): unused code warnings * Update OfflineBanner component to use new Translation component Co-authored-by: gabek <414923+gabek@users.noreply.github.com> * fix(js): fix localization extraction job * chore(js): remove ts-node cli * fix(css): fix css warning * feat(js): add some additional translation strings via component * chore: update extracted translations * test: add tests for Translation component defaultText and fallback behavior Co-authored-by: gabek <414923+gabek@users.noreply.github.com> * chore: update extracted translations * Javascript formatting autofixes * chore: call out new Translation component * fix: linter warning * chore: updated instructions --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: gabek <414923+gabek@users.noreply.github.com> Co-authored-by: Owncast <owncast@owncast.online> Co-authored-by: Gabe Kangas <gabek@real-ity.com>
2025-07-13 02:21:46 -07:00
parent 7b181aa0a6
commit 29b5100114
23 changed files with 2287 additions and 325 deletions
@@ -0,0 +1,38 @@
+/* eslint-disable react/no-danger */
+import React, { FC } from 'react';
+import { useTranslation } from 'next-export-i18n';
+import { LocalizationKey } from '../../../types/localization';
+
+export interface TranslationProps {
+  translationKey: LocalizationKey;
+  vars?: Record<string, any>;
+  className?: string;
+  defaultText?: string;
+}
+
+export const Translation: FC<TranslationProps> = ({
+  translationKey,
+  vars,
+  className,
+  defaultText,
+}) => {
+  const { t } = useTranslation();
+
+  let translatedText = t(translationKey, vars);
+
+  // Use fallback if translation is missing (returns the key itself)
+  if (translatedText === translationKey && defaultText) {
+    translatedText = defaultText;
+
+    // Interpolate variables manually into defaultText
+    // eslint-disable-next-line no-restricted-syntax
+    for (const [k, v] of Object.entries(vars || {})) {
+      const regex = new RegExp(`{{\\s*${k}\\s*}}`, 'g');
+      translatedText = translatedText.replace(regex, String(v));
+    }
+  }
+
+  return <span className={className} dangerouslySetInnerHTML={{ __html: translatedText }} />;
+};
+
+export default Translation;