frontend: integrate storybook with i18n & cleanup

.github/workflows/translations-download.yaml

@@ -19,7 +19,7 @@ jobs:
         uses: localazy/download@v1.1.0
 
       - name: "Fix the owner of the downloaded files"
-        run: "sudo chown runner:docker translations/*.json"
+        run: "sudo chown runner:docker translations/*.json frontend/locales/*.json"
 
       - name: Create Pull Request
         id: cpr
@@ -29,6 +29,7 @@ jobs:
           branch: actions/localazy-download
           delete-branch: true
           title: Localazy Download
+          commit-message: Translations updates
 
       - name: Enable automerge
         run: gh pr merge --merge --auto "$PR_NUMBER"

frontend/.storybook/main.ts

@@ -38,6 +38,9 @@ const config: StorybookConfig = {
 
     // Theme switch toolbar
     "@storybook/addon-toolbars",
+
+    // i18next integration
+    "storybook-react-i18next",
   ],
 
   framework: "@storybook/react-vite",

frontend/.storybook/preview.tsx

@@ -12,9 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { ArgTypes, Decorator, Parameters } from "@storybook/react";
+import { ArgTypes, Decorator, Parameters, Preview } from "@storybook/react";
 import { useLayoutEffect } from "react";
+
 import "../src/main.css";
+import i18n from "../src/i18n";
 
 export const parameters: Parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -74,3 +76,18 @@ const withThemeProvider: Decorator = (Story, context) => {
 };
 
 export const decorators: Decorator[] = [withThemeProvider];
+
+const preview: Preview = {
+  globals: {
+    locale: "en",
+    locales: {
+      en: "English",
+      fr: "Français",
+    },
+  },
+  parameters: {
+    i18n,
+  },
+};
+
+export default preview;

frontend/locales/en.json

@@ -1,5 +1,6 @@
 {
   "action": {
+    "back": "Back",
     "cancel": "Cancel",
     "continue": "Continue",
     "save": "Save"
@@ -131,9 +132,11 @@
     },
     "verify_email": {
       "code_field_label": "6-digit code",
-      "enter_code_prompt": "Enter the 6-digit code sent to <1>{{email}</1>",
+      "enter_code_prompt": "Enter the 6-digit code sent to <2>{{email}}</2>",
       "heading": "Verify your email",
       "invalid_code_alert": "Invalid code",
+      "resend_email": "Resend email",
+      "sent": "Sent!",
       "unknown_email": "Unknown email"
     }
   }

frontend/package.json

@@ -72,6 +72,7 @@
     "react-test-renderer": "^18.2.0",
     "rimraf": "^5.0.5",
     "storybook": "^7.5.0",
+    "storybook-react-i18next": "^2.0.9",
     "tailwindcss": "^3.3.3",
     "typescript": "5.2.2",
     "vite": "^4.4.11",

frontend/src/components/VerifyEmail/VerifyEmail.tsx

@@ -113,6 +113,7 @@ const BackButton: React.FC = () => {
   const { onClick, href, pending } = useNavigationLink({
     type: "profile",
   });
+  const { t } = useTranslation();
 
   return (
     <Button
@@ -122,7 +123,7 @@ const BackButton: React.FC = () => {
       Icon={IconArrowLeft}
       kind="tertiary"
     >
-      {pending ? "Loading..." : "Back"}
+      {pending ? t("common.loading") : t("action.back")}
     </Button>
   );
 };
@@ -187,7 +188,7 @@ const VerifyEmail: React.FC<{
           <Trans i18nKey="frontend.verify_email.enter_code_prompt">
             Enter the 6-digit code sent to{" "}
             <Text as="span" size="lg" weight="semibold">
-              {{ codeEmail }}
+              {{ email: codeEmail }}
             </Text>
           </Trans>
         </Text>
@@ -222,7 +223,9 @@ const VerifyEmail: React.FC<{
           disabled={pending || emailSent}
           onClick={onResendClick}
         >
-          {emailSent ? "Sent!" : "Resend email"}
+          {emailSent
+            ? t("frontend.verify_email.sent")
+            : t("frontend.verify_email.resend_email")}
         </Button>
         <BackButton />
       </Form>