Add lingui js and translate pages

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Set main content to use `main` tag.
 - Disable autocomplete on search bar.
 - Update mentions popup to use the typeahead component.
+- Translated all pages to portuguese.
 
 ### Fixed
 - Drawer items not tabbable.

packages/app/.babelrc

@@ -0,0 +1,11 @@
+{
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "macros"
+  ],
+  "presets": [
+    ["@babel/preset-env", {"targets": {"node": "current"}}],
+    "react-app",
+    "@babel/preset-typescript"
+  ]
+}

packages/app/.eslintignore

@@ -0,0 +1,2 @@
+src/locales/_build/
+src/locales/**/*.js

packages/app/.gitignore

@@ -0,0 +1,2 @@
+src/locales/_build/
+src/locales/**/*.js

packages/app/.linguirc

@@ -0,0 +1,6 @@
+{
+  "localeDir": "src/locales/",
+  "srcPathDirs": ["src/"],
+  "format": "po",
+  "sourceLocale": "en"
+}

packages/app/jest.config.js

@@ -9,7 +9,7 @@ module.exports = {
   testEnvironment: 'jsdom',
   testURL: 'http://localhost',
   transform: {
-    '^.+\\.(ts|tsx)$': 'ts-jest',
+    '^.+\\.(ts|tsx)$': 'babel-jest',
     '^.+\\.(gql|graphql)$': 'jest-transform-graphql',
     '^.+\\.css$': '<rootDir>/jest/cssTransform.js',
     '^(?!.*\\.(js|jsx|css|json)$)': '<rootDir>/jest/fileTransform.js',
@@ -20,7 +20,7 @@ module.exports = {
   ],
   moduleNameMapper: {
     '^react-native$': 'react-native-web',
-    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+    '^.+\\.global\\.(css|sass|scss)$': 'identity-obj-proxy',
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'jsx', 'node'],
 }

packages/app/package.json

@@ -5,15 +5,21 @@
   "scripts": {
     "dev": "cks dev",
     "start": "cks start",
+    "prebuild": "yarn compile --strict",
     "build": "cks build",
+    "postinstall": "yarn compile",
     "prettier": "prettier --write 'src/**/*.ts' 'src/**/*.tsx'",
     "test": "jest -c jest.config.js",
     "lint": "eslint --ext ts,tsx src && tsc --noEmit",
     "schema-download": "apollo service:download --endpoint=http://localhost:5000/graphql -k",
-    "gen-types": "apollo client:codegen __generated__ --target=typescript --localSchemaFile=schema.json --includes='src/**/*.gql,src/schema.graphql'"
+    "gen-types": "apollo client:codegen __generated__ --target=typescript --localSchemaFile=schema.json --includes='src/**/*.gql,src/schema.graphql'",
+    "add-locale": "lingui add-locale",
+    "extract": "lingui extract",
+    "compile": "lingui compile"
   },
   "dependencies": {
     "@cramkle/app-server": "^0.2.2",
+    "@lingui/react": "^2.7.4",
     "@material/react-button": "^0.12.0",
     "@material/react-card": "^0.12.0",
     "@material/react-checkbox": "^0.12.0",
@@ -58,13 +64,22 @@
     "yup": "^0.27.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.4.4",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/preset-env": "^7.4.4",
+    "@babel/preset-typescript": "^7.3.3",
     "@hot-loader/react-dom": "^16.8.3",
+    "@lingui/cli": "^2.7.4",
+    "@lingui/macro": "^2.7.4",
     "@lucasecdb/eslint-config": "^0.3.6",
     "@types/classnames": "^2.2.7",
     "@types/draft-js": "^0.10.30",
     "@types/exenv": "^1.2.0",
     "@types/graphql": "^14.0.7",
     "@types/jest": "^24.0.9",
+    "@types/lingui__core": "^2.7.0",
+    "@types/lingui__macro": "^2.7.3",
+    "@types/lingui__react": "^2.5.2",
     "@types/ramda": "types/npm-ramda#dist",
     "@types/react": "^16.8.5",
     "@types/react-dom": "^16.8.2",
@@ -73,6 +88,10 @@
     "@types/react-router-dom": "^4.3.1",
     "@types/yup": "^0.26.10",
     "apollo": "^2.9.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^24.8.0",
+    "babel-plugin-macros": "^2.5.1",
+    "babel-preset-react-app": "^8.0.0",
     "eslint": "^5.16.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "^24.1.0",
@@ -86,7 +105,6 @@
     "stylelint": "^9.10.1",
     "stylelint-config-recommended-scss": "^3.2.0",
     "stylelint-scss": "^3.5.3",
-    "ts-jest": "^24.0.0",
     "typescript": "^3.4.5"
   },
   "browserslist": [

packages/app/src/App.tsx

@@ -1,3 +1,4 @@
+import { I18nProvider } from '@lingui/react'
 import React, { lazy } from 'react'
 import { Helmet } from 'react-helmet'
 import { Route, Switch, withRouter } from 'react-router'
@@ -12,6 +13,8 @@ import NotFoundPage from './components/pages/NotFoundPage'
 import ShellRoute from './components/routes/ShellRoute'
 import { UserRoute, GuestRoute } from './components/routes/AuthRoute'
 import { MobileProvider } from './components/MobileContext'
+import en from './locales/en/messages'
+import pt from './locales/pt/messages'
 import client from './utils/apolloClient'
 
 import './theme.global.scss'
@@ -25,77 +28,79 @@ const StatisticsPage = lazy(() => import('./components/pages/StatisticsPage'))
 const AddModelPage = lazy(() => import('./components/pages/AddModelPage'))
 
 const App: React.FunctionComponent<{}> = () => (
-  <ApolloProvider client={client}>
-    <MobileProvider>
-      <Helmet
-        defaultTitle="Cramkle"
-        titleTemplate="%s - Cramkle"
-        meta={[
-          {
-            name: 'application-name',
-            content: 'Cramkle',
-          },
-          {
-            name: 'description',
-            content: 'Make sure your knowledge will last',
-          },
-          {
-            name: 'keywords',
-            content: 'flashcards,anki,srs,spaced repetition',
-          },
-        ]}
-      />
-      <Switch>
-        <GuestRoute component={LandingPage} path="/" exact />
-        <ShellRoute
-          component={HomePage}
-          RouteComponent={UserRoute}
-          path={['/home', '/decks', '/models']}
-          exact
+  <I18nProvider language="en" catalogs={{ en, pt }}>
+    <ApolloProvider client={client}>
+      <MobileProvider>
+        <Helmet
+          defaultTitle="Cramkle"
+          titleTemplate="%s - Cramkle"
+          meta={[
+            {
+              name: 'application-name',
+              content: 'Cramkle',
+            },
+            {
+              name: 'description',
+              content: 'Make sure your knowledge will last',
+            },
+            {
+              name: 'keywords',
+              content: 'flashcards,anki,srs,spaced repetition',
+            },
+          ]}
         />
-        <ShellRoute
-          component={DeckPage}
-          RouteComponent={UserRoute}
-          path="/d/:slug"
-          exact
-        />
-        <ShellRoute
-          component={ModelPage}
-          RouteComponent={UserRoute}
-          path="/m/:id"
-          exact
-        />
-        <ShellRoute
-          component={AddModelPage}
-          RouteComponent={UserRoute}
-          path="/models/create"
-          exact
-        />
-        <ShellRoute
-          component={MarketplacePage}
-          RouteComponent={UserRoute}
-          path="/marketplace"
-          exact
-        />
-        <ShellRoute
-          component={StatisticsPage}
-          RouteComponent={UserRoute}
-          path="/statistics"
-          exact
-        />
-        <ShellRoute
-          component={SettingsPage}
-          RouteComponent={UserRoute}
-          path="/settings"
-          exact
-        />
-        <GuestRoute component={RegisterPage} path="/register" exact />
-        <GuestRoute component={LoginPage} path="/login" exact />
-        <Route component={AboutPage} path="/about" exact />
-        <Route component={NotFoundPage} />
-      </Switch>
-    </MobileProvider>
-  </ApolloProvider>
+        <Switch>
+          <GuestRoute component={LandingPage} path="/" exact />
+          <ShellRoute
+            component={HomePage}
+            RouteComponent={UserRoute}
+            path={['/home', '/decks', '/models']}
+            exact
+          />
+          <ShellRoute
+            component={DeckPage}
+            RouteComponent={UserRoute}
+            path="/d/:slug"
+            exact
+          />
+          <ShellRoute
+            component={ModelPage}
+            RouteComponent={UserRoute}
+            path="/m/:id"
+            exact
+          />
+          <ShellRoute
+            component={AddModelPage}
+            RouteComponent={UserRoute}
+            path="/models/create"
+            exact
+          />
+          <ShellRoute
+            component={MarketplacePage}
+            RouteComponent={UserRoute}
+            path="/marketplace"
+            exact
+          />
+          <ShellRoute
+            component={StatisticsPage}
+            RouteComponent={UserRoute}
+            path="/statistics"
+            exact
+          />
+          <ShellRoute
+            component={SettingsPage}
+            RouteComponent={UserRoute}
+            path="/settings"
+            exact
+          />
+          <GuestRoute component={RegisterPage} path="/register" exact />
+          <GuestRoute component={LoginPage} path="/login" exact />
+          <Route component={AboutPage} path="/about" exact />
+          <Route component={NotFoundPage} />
+        </Switch>
+      </MobileProvider>
+    </ApolloProvider>
+  </I18nProvider>
 )
 
 export default hot(withRouter(App))

packages/app/src/components/AppDrawer.tsx

@@ -1,3 +1,5 @@
+import { t } from '@lingui/macro'
+import { I18n } from '@lingui/react'
 import Drawer, {
   DrawerHeader,
   DrawerTitle,
@@ -69,30 +71,34 @@ const AppDrawer: React.FunctionComponent<ChildDataProps<Props, Data>> = ({
   }, [history])
 
   const drawerItems = (
-    <List dense singleSelection>
-      <ListItem onClick={handleHomeClick}>
-        <ListItemGraphic graphic={<MaterialIcon icon="home" />} />
-        <ListItemText primaryText="Home" />
-      </ListItem>
-      <ListItem onClick={handleMarketplaceClick}>
-        <ListItemGraphic
-          graphic={<MaterialIcon icon="store_mall_directory" />}
-        />
-        <ListItemText primaryText="Marketplace" />
-      </ListItem>
-      <ListItem onClick={handleStatisticsClick}>
-        <ListItemGraphic graphic={<MaterialIcon icon="bar_chart" />} />
-        <ListItemText primaryText="Statistics" />
-      </ListItem>
-      <ListItem onClick={handleSettingsClick}>
-        <ListItemGraphic graphic={<MaterialIcon icon="settings" />} />
-        <ListItemText primaryText="Settings" />
-      </ListItem>
-      <ListItem onClick={handleLogout}>
-        <ListItemGraphic graphic={<MaterialIcon icon="exit_to_app" />} />
-        <ListItemText primaryText="Logout" />
-      </ListItem>
-    </List>
+    <I18n>
+      {({ i18n }) => (
+        <List dense singleSelection>
+          <ListItem onClick={handleHomeClick}>
+            <ListItemGraphic graphic={<MaterialIcon icon="home" />} />
+            <ListItemText primaryText={i18n._(t`Home`)} />
+          </ListItem>
+          <ListItem onClick={handleMarketplaceClick}>
+            <ListItemGraphic
+              graphic={<MaterialIcon icon="store_mall_directory" />}
+            />
+            <ListItemText primaryText={i18n._(t`Marketplace`)} />
+          </ListItem>
+          <ListItem onClick={handleStatisticsClick}>
+            <ListItemGraphic graphic={<MaterialIcon icon="bar_chart" />} />
+            <ListItemText primaryText={i18n._(t`Statistics`)} />
+          </ListItem>
+          <ListItem onClick={handleSettingsClick}>
+            <ListItemGraphic graphic={<MaterialIcon icon="settings" />} />
+            <ListItemText primaryText={i18n._(t`Settings`)} />
+          </ListItem>
+          <ListItem onClick={handleLogout}>
+            <ListItemGraphic graphic={<MaterialIcon icon="exit_to_app" />} />
+            <ListItemText primaryText={i18n._(t`Logout`)} />
+          </ListItem>
+        </List>
+      )}
+    </I18n>
   )
 
   const header = (

packages/app/src/components/BackButton.tsx

@@ -1,5 +1,6 @@
 import Button from '@material/react-button'
 import Icon from '@material/react-material-icon'
+import { Trans } from '@lingui/macro'
 import React, { useCallback } from 'react'
 import { withRouter, RouteComponentProps } from 'react-router'
 
@@ -13,11 +14,11 @@ const BackButton: React.FunctionComponent<RouteComponentProps> = ({
   return (
     <Button
       className="mv2"
-      icon={<Icon icon="arrow_back" />}
+      icon={<Icon icon="arrow_back" aria-hidden="true" />}
       onClick={handleClick}
       dense
     >
-      Go back
+      <Trans>Go back</Trans>
     </Button>
   )
 }

packages/app/src/components/DeckList.tsx

@@ -1,7 +1,8 @@
+import { Trans } from '@lingui/macro'
+import { Grid, Row, Cell } from '@material/react-layout-grid'
+import { Body1 } from '@material/react-typography'
 import React, { useEffect } from 'react'
 import { compose, graphql, ChildProps } from 'react-apollo'
-import { Body1 } from '@material/react-typography'
-import { Grid, Row, Cell } from '@material/react-layout-grid'
 
 import DeckCard from './DeckCard'
 import decksQuery from '../graphql/decksQuery.gql'
@@ -23,7 +24,9 @@ const DeckList: React.FunctionComponent<ChildProps<{}, DecksQuery>> = ({
   if (decks.length === 0) {
     return (
       <div className="flex flex-column items-center">
-        <Body1 className="mt4">The decks you create will appear here.</Body1>
+        <Body1 className="mt4">
+          <Trans>The decks you create will appear here.</Trans>
+        </Body1>
       </div>
     )
   }