lib-user: Setup react-i18next for Contributors components

packages/lib-user/package.json

@@ -35,7 +35,9 @@
     "@zooniverse/async-states": "~0.0.1",
     "@zooniverse/panoptes-js": "~0.5.0",
     "dayjs": "~1.11.11",
+    "i18next": "~24.0.2",
     "panoptes-client": "~5.6.0",
+    "react-i18next": "~14.1.3",
     "swr": "~2.2.4",
     "uuid": "~11.0.3"
   },

packages/lib-user/src/components/Contributors/Contributors.js

@@ -2,6 +2,7 @@ import { Loader, SpacedText } from '@zooniverse/react-components'
 import { Box, Layer } from 'grommet'
 import { arrayOf, bool, shape, string } from 'prop-types'
 import { useState } from 'react'
+import { useTranslation } from '../../translations/i18n.js'
 
 import { fetchPanoptesUsers } from '../../utils'
 
@@ -30,10 +31,11 @@ function Contributors({
   group,
   membership
 }) {
+  const { t } = useTranslation()
   const [exportLoading, setExportLoading] = useState(false)
   const [page, setPage] = useState(1)
 
-  const showContributors = adminMode 
+  const showContributors = adminMode
     || membership?.roles.includes('group_admin')
     || (membership?.roles.includes('group_member') && group?.stats_visibility === 'private_show_agg_and_ind')
     || (membership?.roles.includes('group_member') && group?.stats_visibility === 'public_agg_show_ind_if_member')
@@ -43,7 +45,7 @@ function Contributors({
   const statsQuery = {
     individual_stats_breakdown: true,
   }
-  
+
   const {
     data: stats,
     error: statsError,
@@ -68,7 +70,7 @@ function Contributors({
     error: usersError,
     isLoading: usersLoading
   } = usePanoptesUsers(usersQuery)
-  
+
   // fetch projects
   const arrayOfProjectContributionArrays = stats?.group_member_stats_breakdown?.map(member => member.project_contributions)
   const flattenedProjectContributionArray = arrayOfProjectContributionArrays?.flat()
@@ -96,7 +98,7 @@ function Contributors({
     })
   }
 
-  const loadingExportMessage = 'Generating stats export...'
+  const loadingExportMessage = t('Contributors.generating')
 
   async function handleGenerateExport() {
     setExportLoading(true)
@@ -114,7 +116,7 @@ function Contributors({
       stats,
       users: allUsers
     })
-    
+
     // Create an anchor element and trigger download
     const link = document.createElement('a')
     link.href = dataExportUrl
@@ -159,24 +161,24 @@ function Contributors({
         primaryHeaderItem={
           <HeaderLink
             href={`/groups/${group.id}`}
-            label='back'
+            label={t('common.back')}
             primaryItem={true}
           />
         }
       >
         <ContentBox
-          linkLabel='Export all stats'
+          linkLabel={t('Contributors.exportLink')}
           linkProps={{
             as: 'button',
             disabled: disableStatsExport,
             onClick: handleGenerateExport
           }}
-          title='Full Group Stats'
+          title={t('Contributors.title')}
         >
           {!showContributors ? (
             <Box align='center' justify='center' fill pad='medium'>
               <SpacedText uppercase={false}>
-                You do not have permission to view this group&apos;s contributors.
+                {t('Contributors.noPermission')}
               </SpacedText>
             </Box>
           ) : loading ? (
@@ -186,7 +188,7 @@ function Contributors({
           ) : error ? (
             <Box align='center' justify='center' fill pad='medium'>
               <SpacedText uppercase={false}>
-                There was an error.
+                {t('Contributors.error')}
               </SpacedText>
               <SpacedText uppercase={false}>
                 {error?.message}
@@ -200,7 +202,7 @@ function Contributors({
           ) : (
             <Box align='center' justify='center' fill pad='medium'>
               <SpacedText uppercase={false}>
-                There are no contributors to this group.
+                {t('Contributors.none')}
               </SpacedText>
             </Box>
           )}

packages/lib-user/src/components/Contributors/components/ContributorsList/ContributorsList.js

@@ -1,5 +1,6 @@
 import { Box } from 'grommet'
 import { arrayOf, number, shape, string } from 'prop-types'
+import { useTranslation } from '../../../../translations/i18n.js'
 
 import { convertStatsSecondsToHours } from '@utils'
 
@@ -10,6 +11,8 @@ function ContributorsList({
   contributors = [],
   projects = []
 }) {
+  const { t } = useTranslation()
+
   let privateProjectIndex = 1
   contributors.sort((a, b) => b.count - a.count)
 
@@ -24,11 +27,11 @@ function ContributorsList({
         return (
           <Box
             key={contributor.id}
-            a11yTitle={`${contributor.display_name} member stats`}
+            a11yTitle={t('Contributors.ContributorsList.a11y', { name: contributor.display_name })}
             as='li'
-            background={index % 2 === 0 ? 
+            background={index % 2 === 0 ?
               { dark: 'dark-3', light: 'neutral-6' }
-              : 
+              :
               { dark: 'dark-1', light: 'light-1' }
             }
             border={{ color: 'light-5', size: '0.5px' }}
@@ -56,7 +59,7 @@ function ContributorsList({
             >
               {contributor.project_contributions.map(statsProject => {
                 const project = projects.find(project => project.id === statsProject.project_id.toString())
-                const projectDisplayName = project?.display_name || `Private Project ${privateProjectIndex++}`
+                const projectDisplayName = project?.display_name || t('Contributors.ContributorsList.privateProject', { index: privateProjectIndex })
                 const projectHoursSpent = convertStatsSecondsToHours(statsProject.session_time)
 
                 return (

packages/lib-user/src/components/Contributors/components/MemberStats/MemberStats.js

@@ -2,6 +2,7 @@ import { SpacedText } from '@zooniverse/react-components'
 import { Box } from 'grommet'
 import { number, string } from 'prop-types'
 import styled from 'styled-components'
+import { useTranslation } from '../../../../translations/i18n.js'
 
 const StyledBox = styled(Box)`
   box-shadow: 8px 0px 6px -6px rgba(0, 0, 0, 0.25);
@@ -16,6 +17,7 @@ function MemberStats({
   hours = 0,
   login = ''
 }) {
+  const { t } = useTranslation()
   return (
     <StyledBox
       align='center'
@@ -31,7 +33,7 @@ function MemberStats({
         gap='xsmall'
       >
         <Avatar
-          alt={`${login} avatar`}
+          alt={t('common.avatarAlt', { login })}
           src={avatar || 'https://static.zooniverse.org/fem-assets/simple-avatar.jpg'}
         />
         <Box
@@ -60,7 +62,7 @@ function MemberStats({
             color={{ dark: 'neutral-6', light: 'neutral-7' }}
             uppercase={false}
           >
-            Classifications
+            {t('common.classifications')}
           </SpacedText>
           <SpacedText
             color={{ light: 'neutral-1', dark: 'accent-1' }}
@@ -77,7 +79,7 @@ function MemberStats({
             color={{ dark: 'neutral-6', light: 'neutral-7' }}
             uppercase={false}
           >
-            Hours
+            {t('common.hours')}
           </SpacedText>
           <SpacedText
             color={{ light: 'neutral-1', dark: 'accent-1' }}

packages/lib-user/src/components/Contributors/components/ProjectStats/ProjectStats.js

@@ -1,15 +1,17 @@
 import { SpacedText } from '@zooniverse/react-components'
 import { Box } from 'grommet'
 import { string, number } from 'prop-types'
+import { useTranslation } from '../../../../translations/i18n.js'
 
 function ProjectStats({
   classifications = 0,
   hours = 0,
   projectDisplayName = ''
 }) {
+  const { t } = useTranslation()
   return (
     <Box
-      a11yTitle={`${projectDisplayName} member stats`}
+      a11yTitle={t('Contributors.ProjectStats.a11y', { project: projectDisplayName })}
       align='center'
       as='li'
       border={{ color: 'light-5', side: 'vertical', size: '0.5px' }}
@@ -30,13 +32,13 @@ function ProjectStats({
         textAlign='center'
         uppercase={false}
       >
-        {`${classifications.toLocaleString()} Classifications`}
+        {classifications.toLocaleString()} {t('common.classifications')}
       </SpacedText>
       <SpacedText
         textAlign='center'
         uppercase={false}
       >
-        {`${hours.toLocaleString()} Hours`}
+        {hours.toLocaleString()} {t('common.hours')}
       </SpacedText>
     </Box>
   )

packages/lib-user/src/translations/README.md

@@ -0,0 +1,34 @@
+# react-i18next for Translations
+
+The `/translations` folder contains json dictionary files for translatable strings in lib-content. There's an i18n instance for each library in FEM.
+
+
+## Adding New Dictionary Keys
+
+`en.json` contains the primary dictionary for translated strings in this app. Dictionaries in this folder are the only ones that should be edited manually in a local dev environment. An example of how to translate a component can be found below.
+
+
+## Translating a Component
+
+Import `useTranslation()` hook. Use `.` to indicate nested object keys. Alternatively, [react-i18next docs](https://react.i18next.com/latest/withtranslation-hoc) show how to translate a class component.
+
+```js
+import { useTranslation } from 'react-i18next'
+const MyComponent = () => {
+  const { t } = useTranslation()
+  return (
+    <p>{t('Path.To.Translation.Key')}</p>
+  )
+}
+```
+
+
+## Adding a Language
+
+FEM is integrated with [Lokalise](https://app.lokalise.com) for translations management. Any dictionary other than `en.json` should be managed through the Lokalise Dashboard. Instructions on how to import and export dictionary files can be found in the how-to-zooniverse [Translations](https://github.com/zooniverse/how-to-zooniverse/tree/master/Translations) folder.
+
+New languages must be added into the `supportedLngs` array in i18n.js.
+
+```js
+const supportedLngs = ['en', 'fr']
+```

packages/lib-user/src/translations/en.json

@@ -0,0 +1,23 @@
+{
+  "common": {
+    "avatarAlt": "{{login}} avatar",
+    "back": "Back",
+    "classifications": "Classifications",
+    "hours": "Hours"
+  },
+  "Contributors": {
+    "error": "There was an error",
+    "exportLink": "Export all stats",
+    "generating": "Generating stats export...",
+    "none": "There are no contributors to this group.",
+    "noPermission": "You do not have permission to view this group's contributors.",
+    "title": "Full Group Stats",
+    "ContributorsList": {
+      "a11y": "{{name}} member stats",
+      "privateProject": "Private Project {{index}}"
+    },
+    "ProjectStats": {
+      "a11y": "{{project}} member stats"
+    }
+  }
+}

packages/lib-user/src/translations/i18n.js

@@ -0,0 +1,39 @@
+import i18n from 'i18next'
+import {
+  initReactI18next,
+  Trans as BaseTrans,
+  useTranslation as useBaseTranslation
+} from 'react-i18next'
+
+const libI18n = i18n.createInstance()
+libI18n.use(initReactI18next).init({
+  fallbackLng: 'en',
+  interpolation: {
+    escapeValue: false // not needed for react as it escapes by default
+  },
+  react: {
+    useSuspense: false
+  }
+})
+
+libI18n.addResourceBundle('en', 'translation', require('./en.json'))
+
+/* In FEM there's an i18n instance for each library, and each instance has its own functions.*/
+export function useTranslation(ns) {
+  return useBaseTranslation(ns, { i18n: libI18n })
+}
+
+export function withTranslation(ns) {
+  return Component => {
+    return function TranslatedComponent(props) {
+      const { t } = useTranslation(ns)
+      return <Component i18n={libI18n} t={t} {...props} />
+    }
+  }
+}
+
+export function Trans(props) {
+  return <BaseTrans {...props} i18n={libI18n}/>
+}
+
+export default i18n