Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue 545/lingui translation wrappings #600

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
85 commits
Select commit Hold shift + click to select a range
f731faa
Adding Lingui
Tyl13 Mar 27, 2023
647892e
Lingui config
Tyl13 Mar 27, 2023
867bd78
Locales added
Tyl13 Mar 27, 2023
8e78a33
i18n component needed for Lingui
Tyl13 Mar 27, 2023
3da579c
Changes to Footer to allow for translation
Tyl13 Mar 27, 2023
555adac
Changes to allow for translation and pluralization
Tyl13 Mar 27, 2023
d0e0c5f
Quick but easy Language Selector Component
Tyl13 Mar 27, 2023
db31802
Language Selector Component added to use
Tyl13 Mar 27, 2023
62409a6
Propagation of variables for Language Selector
Tyl13 Mar 27, 2023
728fea3
More propagation, and changes to allow dynamic LS
Tyl13 Mar 27, 2023
b86f32c
Merge branch 'base' of github.com:RockefellerArchiveCenter/dimes into…
Tyl13 Mar 27, 2023
7d6e0a9
Slight changes, and more tests
Tyl13 Mar 28, 2023
4f33d75
Dependencies added for lingui
Tyl13 Apr 10, 2023
2c25c27
Added translation wrappings
Tyl13 Apr 10, 2023
82d2f6b
Changes to styling of translations
Tyl13 Apr 11, 2023
f936b91
Change to DockerFile to compile .po to .js
Tyl13 Apr 11, 2023
6357d56
.po files updated
Tyl13 Apr 11, 2023
c72815e
Removed Language Selector
Tyl13 Apr 24, 2023
e14ce7a
Merge branch 'base' of github.com:RockefellerArchiveCenter/dimes into…
Tyl13 Apr 24, 2023
87d8c0f
Merge branch 'base' of github.com:RockefellerArchiveCenter/dimes into…
Tyl13 May 8, 2023
eccb727
Yarn lock changes from lingui
Tyl13 May 8, 2023
84c27bd
More Wrappings
Tyl13 May 8, 2023
e56c109
Fix missing select
Tyl13 May 8, 2023
be7c486
Updated messages
Tyl13 May 8, 2023
fec0232
Fix missing function causing build failure
Tyl13 May 10, 2023
16303b0
Apparently another missing function
Tyl13 May 10, 2023
4e38cd1
Missing I18nProvider because of Dynamic activate
Tyl13 May 11, 2023
6f6b377
Change to lingui.config to exclude unneeded areas
Tyl13 May 19, 2023
1eed040
Merge pull request #602 from RockefellerArchiveCenter/development
HaSistrunk May 23, 2023
052f4b3
All Wrappings for Components done, only tests left
Tyl13 May 24, 2023
9e0b533
Tests working, yet to test other languages
Tyl13 May 24, 2023
9b667dc
Merge pull request #604 from RockefellerArchiveCenter/development
helrond Jun 1, 2023
d0c3044
Testing of Wrapping Testing String Works
Tyl13 Jun 5, 2023
eac5581
Merge pull request #606 from RockefellerArchiveCenter/development
helrond Jun 5, 2023
2fba286
Additional Wrappings
Tyl13 Jun 5, 2023
1b1aa2a
Test Translation Wrappings
Tyl13 Jun 5, 2023
571efe0
Merge pull request #610 from RockefellerArchiveCenter/development
HaSistrunk Jun 8, 2023
4081894
Adding Lingui
Tyl13 Mar 27, 2023
d26bcab
Lingui config
Tyl13 Mar 27, 2023
5805741
Locales added
Tyl13 Mar 27, 2023
b703c72
i18n component needed for Lingui
Tyl13 Mar 27, 2023
1ce4f52
Changes to Footer to allow for translation
Tyl13 Mar 27, 2023
e242edd
Changes to allow for translation and pluralization
Tyl13 Mar 27, 2023
a72e0d9
Quick but easy Language Selector Component
Tyl13 Mar 27, 2023
6ed88c6
Language Selector Component added to use
Tyl13 Mar 27, 2023
138a473
Propagation of variables for Language Selector
Tyl13 Mar 27, 2023
576057c
More propagation, and changes to allow dynamic LS
Tyl13 Mar 27, 2023
61bc649
Slight changes, and more tests
Tyl13 Mar 28, 2023
5ff7e9b
Dependencies added for lingui
Tyl13 Apr 10, 2023
87eb7ad
Added translation wrappings
Tyl13 Apr 10, 2023
2307415
Changes to styling of translations
Tyl13 Apr 11, 2023
0498d8b
Change to DockerFile to compile .po to .js
Tyl13 Apr 11, 2023
17bb2c7
.po files updated
Tyl13 Apr 11, 2023
352f8be
Removed Language Selector
Tyl13 Apr 24, 2023
a3cd2a3
Yarn lock changes from lingui
Tyl13 May 8, 2023
c371e45
More Wrappings
Tyl13 May 8, 2023
802a478
Fix missing select
Tyl13 May 8, 2023
08ee35b
Updated messages
Tyl13 May 8, 2023
409e8d4
Fix missing function causing build failure
Tyl13 May 10, 2023
9aca158
Apparently another missing function
Tyl13 May 10, 2023
ec8dd74
Missing I18nProvider because of Dynamic activate
Tyl13 May 11, 2023
49c3fd9
Change to lingui.config to exclude unneeded areas
Tyl13 May 19, 2023
289f0c7
All Wrappings for Components done, only tests left
Tyl13 May 24, 2023
b23b4a1
Tests working, yet to test other languages
Tyl13 May 24, 2023
f0ee332
Testing of Wrapping Testing String Works
Tyl13 Jun 5, 2023
4511edc
Additional Wrappings
Tyl13 Jun 5, 2023
c87e088
Test Translation Wrappings
Tyl13 Jun 5, 2023
ba79e91
Removed plurals config because it not needed
Tyl13 Jun 9, 2023
25602be
Updates to message files
Tyl13 Jun 9, 2023
04700a6
Missing select fixed
Tyl13 Jun 9, 2023
09103d0
Yarn.lock fix to include lingui along
Tyl13 Jun 9, 2023
44a62d2
Fixed to include lingui and commands
Tyl13 Jun 9, 2023
a68db24
Fix since Viewer messes with propagation
Tyl13 Jun 9, 2023
43e9659
Merge branch 'issue-545/lingui-translation-wrappings' of https://gith…
Tyl13 Jun 9, 2023
2849c92
Removed french mocked translations
Tyl13 Jun 12, 2023
133ec1a
Apply suggestions from code review
Tyl13 Jun 13, 2023
5325370
PrimaryLink added.
Tyl13 Jun 13, 2023
27d559a
Merge branch 'issue-545/lingui-translation-wrappings' of https://gith…
Tyl13 Jun 13, 2023
58be903
Primary Link Test and Messages done
Tyl13 Jun 14, 2023
2a2a54d
Slight change to PropTypes for Primary
Tyl13 Jun 14, 2023
633409f
SecondaryLinks created
Tyl13 Jun 14, 2023
7f6e843
Replaced with SecondaryLink component
Tyl13 Jun 14, 2023
ee759c6
Added test for SecondaryLinks
Tyl13 Jun 14, 2023
f392683
Messages updated with SecondaryLink
Tyl13 Jun 14, 2023
c69b22f
Simple Lingui Doc added, can easily be changed
Tyl13 Jun 14, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 4 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).
11 changes: 11 additions & 0 deletions lingui.config.js
HaSistrunk marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/** @type {import('@lingui/conf').LinguiConfig} */
module.exports = {
locales: ["en"],
sourceLocale: "en",
HaSistrunk marked this conversation as resolved.
Show resolved Hide resolved
catalogs: [{
path: "src/locales/{locale}/messages",
include: ["src"],
exclude: ["**/node_modules/**", "src/styles/**", "src/locales**"]
}],
format: "po"
HaSistrunk marked this conversation as resolved.
Show resolved Hide resolved
}
12 changes: 10 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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"
Expand Down
15 changes: 8 additions & 7 deletions src/components/Accordion/__tests__/Accordion.test.js
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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]')
Expand All @@ -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]')
Expand Down Expand Up @@ -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)
})
Original file line number Diff line number Diff line change
@@ -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)
})
3 changes: 2 additions & 1 deletion src/components/Badge/__tests__/Badge.test.js
Original file line number Diff line number Diff line change
@@ -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)
})
})
5 changes: 3 additions & 2 deletions src/components/Button/__tests__/Button.test.js
Original file line number Diff line number Diff line change
@@ -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', () => {
Expand All @@ -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')
Expand Down
5 changes: 3 additions & 2 deletions src/components/Captcha/__tests__/Captcha.test.js
Original file line number Diff line number Diff line change
@@ -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', () => {
Expand All @@ -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]')
Expand Down
20 changes: 14 additions & 6 deletions src/components/ContextSwitcher/__tests__/ContextSwitcher.test.js
Original file line number Diff line number Diff line change
@@ -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'
}))
})
9 changes: 8 additions & 1 deletion src/components/ContextSwitcher/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}) => (
Expand All @@ -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>
)
Expand Down
7 changes: 4 additions & 3 deletions src/components/Dropdown/__tests__/Dropdown.test.js
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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')
Expand All @@ -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')
Expand Down
Loading