Merge pull request #612 from RockefellerArchiveCenter/development

Supports translation of interface via lingui

Dockerfile

@@ -4,6 +4,7 @@ ENV PATH /app/node_modules/.bin:$PATH
 COPY package.json yarn.lock ./
 RUN yarn install --silent
 COPY . ./
+RUN yarn run compile
 RUN yarn run build
 
 FROM nginx:1.17.4-alpine

README.md

@@ -27,6 +27,10 @@ The repository includes [BackstopJS](https://github.com/garris/BackstopJS) to te
 
 To add or update reference images, edit the scenarios in `backstop.json` and run `yarn backstop-reference`.
 
+### Translation Development
+
+The repository includes [linguijs](https://lingui.dev/) which is an [Open-source](https://github.com/lingui/js-lingui) Internationalization Framework.  This allows you to do translation work on the UI.
+
 ## License
 
 This code is released under an [MIT License](LICENSE).

lingui.config.js

@@ -0,0 +1,11 @@
+/** @type {import('@lingui/conf').LinguiConfig} */
+module.exports = {
+	locales: ["en"],
+	sourceLocale: "en",
+	catalogs: [{
+		path: "src/locales/{locale}/messages",
+		include: ["src"],
+		exclude: ["**/node_modules/**", "src/styles/**", "src/locales**"]
+	}],
+	format: "po"
+ }

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@lingui/macro": "^4.2.1",
+    "@lingui/react": "^4.2.1",
     "@reecelucas/react-datepicker": "^2.0.0",
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^12.1.3",
@@ -31,7 +33,11 @@
     "url": "^0.11.0"
   },
   "devDependencies": {
-    "backstopjs": "^6.2.1"
+    "@babel/core": "^7.22.5",
+    "@blueprintjs/core": "^4.17.6",
+    "@blueprintjs/icons": "^4.14.3",
+    "@lingui/cli": "^4.2.1",
+    "babel-plugin-macros": "^3.1.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -40,7 +46,9 @@
     "eject": "react-scripts eject",
     "backstop-reference": "backstop reference --docker",
     "backstop-test": "backstop test --docker",
-    "backstop-approve": "backstop approve"
+    "backstop-approve": "backstop approve",
+    "extract": "lingui extract",
+    "compile": "lingui compile"
   },
   "eslintConfig": {
     "extends": "react-app"

src/components/Accordion/__tests__/Accordion.test.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { render, unmountComponentAtNode } from 'react-dom'
 import { act } from 'react-dom/test-utils'
+import { I18nApp } from '../../i18n'
 import {
     Accordion,
     AccordionItem,
@@ -23,27 +24,27 @@ afterEach(() => {
 })
 
 it('renders without crashing', () => {
-  render(<Accordion />, container)
+  render(<I18nApp ReactComponent={<Accordion />} />, container)
 })
 
 it('renders without crashing', () => {
-  render(<AccordionItem preExpanded={[]} />, container)
+  render(<I18nApp ReactComponent={<AccordionItem preExpanded={[]} />} />, container)
 })
 
 it('renders without crashing', () => {
-  render(<AccordionItemHeading />, container)
+  render(<I18nApp ReactComponent={<AccordionItemHeading />} />, container)
 })
 
 it('renders without crashing', () => {
-  render(<AccordionItemButton />, container)
+  render(<I18nApp ReactComponent={<AccordionItemButton />} />, container)
 })
 
 it('handles clicks', () => {
   const onClick = jest.fn()
   const setIsExpanded = jest.fn()
 
   act(() => {
-    render(<AccordionItemButton setIsExpanded={setIsExpanded} onClick={onClick} />, container)
+    render(<I18nApp ReactComponent={<AccordionItemButton setIsExpanded={setIsExpanded} onClick={onClick} />} />, container)
   })
 
   const button = document.querySelector('[data-accordion-component=AccordionItemButton]')
@@ -65,7 +66,7 @@ it('handles keyboard events', () => {
   focus.focusNextSiblingOf = jest.fn()
 
   act(() => {
-    render(<AccordionItemButton setIsExpanded={setIsExpanded} onClick={onClick} />, container)
+    render(<I18nApp ReactComponent={<AccordionItemButton setIsExpanded={setIsExpanded} onClick={onClick} />} />, container)
   })
 
   const button = document.querySelector('[data-accordion-component=AccordionItemButton]')
@@ -135,5 +136,5 @@ it('handles keyboard events', () => {
 
 it('renders without crashing', () => {
   const div = document.createElement('div')
-  render(<AccordionItemPanel />, container)
+  render(<I18nApp ReactComponent={<AccordionItemPanel />} />, container)
 })

src/components/AgentAttribute/__tests__/AgentAttribute.test.js

@@ -1,10 +1,11 @@
 import React from 'react'
 import { render } from 'react-dom'
+import { I18nApp } from '../../i18n'
 import AgentAttributeList from '..'
 
 const items = {'Positions Held': 'foo', 'Date of Birth': 'bar', 'Date of Dath': 'baz'}
 
 it('renders without crashing', () => {
   const div = document.createElement('div')
-  render(<AgentAttributeList items={items} />, div)
+  render(<I18nApp ReactComponent={<AgentAttributeList items={items} />} />, div)
 })

src/components/Badge/__tests__/Badge.test.js

@@ -1,13 +1,14 @@
 import React from 'react'
 import { render } from 'react-dom'
 import { act } from 'react-dom/test-utils'
+import { I18nApp } from '../../i18n'
 import { Badge } from '..'
 
 it('renders without errors', () => {
   const div = document.createElement('div')
   document.body.appendChild(div)
 
   act(() => {
-    render(<Badge text={"foobar"} />, div)
+    render(<I18nApp ReactComponent={<Badge text={"foobar"} />} />, div)
   })
 })

src/components/Button/__tests__/Button.test.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { render } from 'react-dom'
 import { act, Simulate } from 'react-dom/test-utils'
+import { I18nApp } from '../../i18n'
 import Button from '..'
 
 it('renders props correctly', () => {
@@ -9,11 +10,11 @@ it('renders props correctly', () => {
   const handleClick = jest.fn()
 
   act(() => {
-    render(<Button
+    render(<I18nApp ReactComponent={<Button
       type='submit'
       label='foo'
       className='bar'
-      handleClick={handleClick} />, div)
+      handleClick={handleClick} />} />, div)
   })
 
   const button = document.querySelector('button')

src/components/Captcha/__tests__/Captcha.test.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { render } from 'react-dom'
 import { act } from 'react-dom/test-utils'
+import { I18nApp } from '../../i18n'
 import Captcha from '..'
 
 it('renders props correctly', () => {
@@ -9,10 +10,10 @@ it('renders props correctly', () => {
   const onChange = jest.fn()
 
   act(() => {
-    render(<Captcha
+    render(<I18nApp ReactComponent={<Captcha
       className='foo'
       form={{}}
-      handleCaptchaChange={onChange} />, div)
+      handleCaptchaChange={onChange} />} />, div)
   })
 
   const captcha = document.querySelector('[name=recaptcha]')

src/components/ContextSwitcher/__tests__/ContextSwitcher.test.js

@@ -1,28 +1,36 @@
 import React from 'react'
 import { render } from 'react-dom'
 import { act } from 'react-dom/test-utils'
+import { I18nApp } from '../../i18n'
+import { t } from '@lingui/macro'
 import ContextSwitcher from '..'
 
 it('renders props correctly', () => {
   const div = document.createElement('div')
   document.body.appendChild(div)
 
   act(() => {
-    render(<ContextSwitcher
+    render(<I18nApp ReactComponent={<ContextSwitcher
       isContentShown={false}
-      toggleIsContentShown={jest.fn()} />, div)
+      toggleIsContentShown={jest.fn()} />} />, div)
   })
 
   const switcher = document.querySelector('.toggle-wrapper > button')
   expect(switcher.className).toBe('btn toggle-context')
-  expect(switcher.textContent).toContain('Collection Content')
+  expect(switcher.textContent).toContain(t({
+    comment: 'switcher label text content',
+    message: 'Collection Content'
+  }))
 
   act(() => {
-    render(<ContextSwitcher
+    render(<I18nApp ReactComponent={<ContextSwitcher
       isContentShown
-      toggleIsContentShown={jest.fn()} />, div)
+      toggleIsContentShown={jest.fn()} />} />, div)
   })
 
   expect(switcher.className).toBe('btn toggle-context')
-  expect(switcher.textContent).toContain('Collection Details')
+  expect(switcher.textContent).toContain(t({
+    comment: 'switcher label text content',
+    message: 'Collection Details'
+  }))
 })

src/components/ContextSwitcher/index.js

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Button from '../Button'
 import classnames from 'classnames'
+import { t, select } from '@lingui/macro'
 import './styles.scss'
 
 const ContextSwitcher = ({isContentShown, toggleIsContentShown}) => (
@@ -10,7 +11,13 @@ const ContextSwitcher = ({isContentShown, toggleIsContentShown}) => (
       className={classnames('toggle-context')}
       iconBefore={isContentShown ? 'west' : null}
       iconAfter={isContentShown ? null : 'east'}
-      label={isContentShown ? 'Collection Details' : 'Collection Content'}
+      label={t({
+        comment: 'Label for Context Switcher',
+        message: select(isContentShown, {
+          true: 'Collection Details',
+          other: 'Collection Content'
+        })
+      })}
       handleClick={toggleIsContentShown} />
   </div>
 )

src/components/Dropdown/__tests__/Dropdown.test.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { render, unmountComponentAtNode } from 'react-dom'
 import { act } from 'react-dom/test-utils'
+import { I18nApp } from '../../i18n'
 import { MyListDropdown, NavDropdown } from '..'
 
 let container = null
@@ -17,12 +18,12 @@ afterEach(() => {
 
 it('renders props correctly', () => {
   act(() => {
-    render(<MyListDropdown
+    render(<I18nApp ReactComponent={<MyListDropdown
       downloadCsv={jest.fn()}
       duplicationRequest={jest.fn()}
       emailList={jest.fn()}
       readingRoomRequest={jest.fn()}
-      removeAllItems={jest.fn()} />, container)
+      removeAllItems={jest.fn()} />} />, container)
   })
 
   const dropdown = document.querySelector('.dropdown')
@@ -35,7 +36,7 @@ it('renders props correctly', () => {
 
 it('renders without crashing', () => {
   act(() => {
-    render(<NavDropdown />, container)
+    render(<I18nApp ReactComponent={<NavDropdown />} />, container)
   })
 
   const dropdown = document.querySelector('.dropdown')