feat(v2): add react-i18next and associated boilerplate for interface … (

#3823) * feat(v2): add react-i18next and associated boilerplate for interface i18n * remove http backend * address comments from karrui * fix typo in types
opengovsg · May 5, 2022 · 9640d77 · 9640d77
1 parent d481a78
commit 9640d77
Show file tree

Hide file tree

Showing 11 changed files with 216 additions and 3 deletions.
diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js
@@ -16,6 +16,7 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-a11y',
     'storybook-preset-craco',
+    'storybook-react-i18next',
     {
       name: 'storybook-addon-turbo-build',
       options: {

diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx
@@ -10,6 +10,7 @@ import { initialize, mswDecorator } from 'msw-storybook-addon'
 import { AuthProvider } from '~contexts/AuthContext'
 import * as dayjsUtils from '~utils/dayjs'
 
+import i18n from '../src/i18n/i18n'
 import { theme } from '../src/theme'
 
 import { StorybookTheme } from './themes'
@@ -41,6 +42,11 @@ const withHelmet: DecoratorFn = (storyFn) => (
 export const decorators = [withReactQuery, withChakra, withHelmet, mswDecorator]
 
 export const parameters = {
+  i18n,
+  locale: 'en-SG',
+  locales: {
+    'en-SG': 'English',
+  },
   docs: {
     theme: StorybookTheme.docs,
     inlineStories: true,

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -22,7 +22,11 @@
     "file-saver": "^2.0.5",
     "focus-visible": "^5.2.0",
     "framer-motion": "^5.4.5",
+    "i18next": "^21.6.16",
+    "i18next-browser-languagedetector": "^6.1.4",
+    "i18next-icu": "^2.0.3",
     "immer": "^9.0.6",
+    "intl-messageformat": "^9.13.0",
     "jszip": "^3.7.1",
     "libphonenumber-js": "^1.9.44",
     "lodash": "^4.17.21",
@@ -36,6 +40,7 @@
     "react-helmet-async": "^1.2.3",
     "react-highlight-words": "^0.17.0",
     "react-hook-form": "^7.28.0",
+    "react-i18next": "^11.16.7",
     "react-icons": "^4.3.1",
     "react-markdown": "^7.1.1",
     "react-query": "^3.34.2",
@@ -158,6 +163,7 @@
     "rimraf": "^3.0.2",
     "storybook-addon-turbo-build": "^1.1.0",
     "storybook-preset-craco": "0.0.6",
+    "storybook-react-i18next": "^1.0.20",
     "ts-jest": "^27.1.1",
     "worker-loader": "^3.0.8"
   },

diff --git a/frontend/src/features/login/LoginPage.tsx b/frontend/src/features/login/LoginPage.tsx
@@ -1,4 +1,5 @@
 import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Link as ReactLink } from 'react-router-dom'
 import {
   Box,
@@ -134,6 +135,7 @@ const NonMobileSidebarGridArea: FC = ({ children }) => (
 export const LoginPage = (): JSX.Element => {
   const [, setIsAuthenticated] = useLocalStorage<boolean>(LOGGED_IN_KEY)
   const [email, setEmail] = useState<string>()
+  const { t } = useTranslation()
 
   const currentYear = new Date().getFullYear()
   // `xs` breakpoint needs to be explicitly set, suspect ChakraUI bug where xs
@@ -183,7 +185,7 @@ export const LoginPage = (): JSX.Element => {
               color="white"
               mb="2.5rem"
             >
-              Build secure government forms in minutes
+              {t('general.slogan')}
             </Text>
             <LoginImage aria-hidden />
           </NonMobileSidebarGridArea>

diff --git a/frontend/src/i18n/i18n.ts b/frontend/src/i18n/i18n.ts
@@ -0,0 +1,20 @@
+import { initReactI18next } from 'react-i18next'
+import i18n from 'i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+import ICU from 'i18next-icu'
+
+import { locales } from './locales'
+
+i18n
+  .use(ICU)
+  .use(LanguageDetector)
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources: locales,
+    fallbackLng: 'en-SG',
+    debug: true,
+    interpolation: {
+      escapeValue: false, // react already safes from xss
+    },
+  })
+export default i18n
diff --git a/frontend/src/i18n/locales/en-sg.ts b/frontend/src/i18n/locales/en-sg.ts
@@ -0,0 +1,9 @@
+import Translation from './types'
+
+export const enSG: Translation = {
+  translation: {
+    general: {
+      slogan: 'Build secure government forms in minutes',
+    },
+  },
+}
diff --git a/frontend/src/i18n/locales/index.ts b/frontend/src/i18n/locales/index.ts
@@ -0,0 +1,7 @@
+import { ResourceLanguage } from 'i18next'
+
+import { enSG } from './en-sg'
+
+export const locales = {
+  'en-SG': enSG as unknown as ResourceLanguage,
+}
diff --git a/frontend/src/i18n/locales/types.ts b/frontend/src/i18n/locales/types.ts
@@ -0,0 +1,9 @@
+interface Translation {
+  translation: {
+    general: {
+      slogan: string
+    }
+  }
+}
+
+export default Translation
diff --git a/frontend/src/i18n/react-i18next.d.ts b/frontend/src/i18n/react-i18next.d.ts
@@ -0,0 +1,9 @@
+import 'react-i18next'
+
+import { enSG } from './locales/en-sg'
+
+declare module 'react-i18next' {
+  interface CustomTypeOptions {
+    resources: typeof enSG
+  }
+}
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -1,5 +1,6 @@
 import 'focus-visible/dist/focus-visible.min.js'
 import './assets/fonts/inter.css'
+import './i18n/i18n'
 
 import * as React from 'react'
 import ReactDOM from 'react-dom'