Add i18n to CRA starter template (#73)

* Add i18n to CRA starter template * Comment out deliver until blueprint is ready * Add versions to packages * Template also requires @emotion/styled

Author: redbugz

packages/react-scripts/scripts/utils/frontierInit.js

@@ -43,7 +43,7 @@ function installFrontierDependencies(appPath, appName, answers, ownPath) {
  const usePolymer = additionalFeatures.includes('polymer');
  const useHF = true;
 
- configureEF(appPath, ownPath);
+ configureEF(appPath, ownPath, appName);
  configureHF(appPath, ownPath);
  // we always call this handle function. If usePolymer is false, it will remove the comments that we manually placed in the index file
  handlePolymerCodeAndComments(appPath, usePolymer, useHF);
@@ -58,13 +58,17 @@ function installFrontierDependencies(appPath, appName, answers, ownPath) {
  'fs-webdev/exo',
  'http-proxy-middleware@0.19.1',
  '@emotion/core@10.0.9',
+ '@emotion/styled@10.0.9',
+ 'i18next@15.0.7',
+ 'react-i18next@10.5.1',
  ]
  );
  devDepsToInstall.push(
  ...[
  '@fs/eslint-config-frontier-react',
  '@fs/testing-library',
  'eslint@5.12.0',
+ 'i18next-scanner@2.10.0',
  'react-styleguidist@9.0.4',
  'webpack@4.28.3',
  'jest-dom@3.1.3',
@@ -74,6 +78,7 @@ function installFrontierDependencies(appPath, appName, answers, ownPath) {
  alterPackageJsonFile(appPath, appPackage => {
  const packageJson = { ...appPackage };
  const additionalScripts = {
+ 'locales:sync': `i18next-scanner --output src/locales 'src/**/*.js'`,
  styleguide: 'styleguidist server --open',
  'styleguide:build': 'styleguidist build',
  lint: 'eslint src/',
@@ -90,6 +95,8 @@ function installFrontierDependencies(appPath, appName, answers, ownPath) {
  installModulesSync(depsToInstall);
  installModulesSync(devDepsToInstall, true);
 
+ syncLocales()
+
  replaceStringInFile(appPath, './README.md', /\{GITHUB_ORG\}\/\{GITHUB_REPO\}/g, `fs-webdev/${appName}`)
 }
 
@@ -124,14 +131,15 @@ function replaceStringInFile(appPath, fileToInjectIntoPath, stringToReplace, str
  fs.writeFileSync(indexPath, indexCode);
 }
 
-function configureEF(appPath, ownPath) {
+function configureEF(appPath, ownPath, appName) {
  // TODO - modify package.json to make sure name is correct for blueprint
  // TODO - use blueprint.yml as a template
 
  const templatePath = path.join(ownPath, 'template-ef');
  fs.copySync(templatePath, appPath, { overwrite: true });
 
  depsToInstall.push(...['express@4.16.4']);
+ replaceStringInFile(appPath, './blueprint.yml', /\{\{APP_NAME\}\}/g, appName)
 }
 
 function configureHF(appPath, ownPath) {
@@ -168,6 +176,10 @@ function createLocalEnvFile() {
  osUtils.runExternalCommandSync('npx', ['@fs/fr-cli', 'env', 'local']);
 }
 
+function syncLocales() {
+ osUtils.runExternalCommandSync('npm', ['run', 'locales:sync']);
+}
+
 function sortScripts(scripts) {
  const sortedScripts = {};
  Object.keys(scripts)

packages/react-scripts/template-ef/blueprint.yml

@@ -49,16 +49,16 @@ deploy:
  bindings:
  <<: *BINDING_DEFAULTS
 
-deliver:
- deploy_order:
- - name: integration
- type: coupled
- systems: int
+#deliver:
+# deploy_order:
+# - name: integration
+# type: coupled
+# systems: int
 
- - name: beta
- type: coupled
- systems: beta
+# - name: beta
+# type: coupled
+# systems: beta
 
- - name: production
- type: coupled
- systems: prod
+# - name: production
+# type: coupled
+# systems: prod

packages/react-scripts/template/i18next-scanner.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+ options: {
+ debug: true,
+ sort: true,
+ defaultLng: 'en',
+ func: {
+ list: ['i18next.t', 'i18n.t', 't', '$t'],
+ },
+ lngs: ['en'],
+ resource: {
+ loadPath: 'src/locales/{{lng}}/{{ns}}.json',
+ savePath: '{{lng}}/{{ns}}.json',
+ },
+ keySeparator: false, // keeps dotted key paths flat instead of nested
+ },
+};

packages/react-scripts/template/src/components/App.js

@@ -1,14 +1,15 @@
 import React from 'react'
 import { Router, Link, NotFound, RequiresAuth } from '@fs/router'
+import { Trans } from 'react-i18next'
 import Home from './home/Home'
 import UserInfo from './user/UserInfo'
 
 function App() {
  return (
  <>
  <nav>
- <Link to="/">Home</Link>
- <Link to="user">User Info</Link>
+ <Link to="/"><Trans i18nkey="nav.home">Home</Trans></Link>
+ <Link to="user"><Trans i18nkey="nav.userInfo">User Info</Trans></Link>
  </nav>
 
  <Router>

packages/react-scripts/template/src/components/home/Home.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { css } from '@emotion/core'
+import { Trans } from 'react-i18next'
 
 import Logo from './Logo'
 import HomeHeader from './HomeHeader'
@@ -9,24 +10,24 @@ const Home = () => (
  css={css`
  text-align: center;
  `}
- >
- <HomeHeader>
- <Logo />
- <p>
- Edit <code>src/components/App.js</code> and save to reload.
- </p>
- <a
- css={css`
+  >
+  <HomeHeader>
+  <Logo />
+  <p>
+  <Trans i18nkey="update.instructions">Edit <code>src/components/App.js</code> and save to reload.</Trans>
+  </p>
+  <a
+  css={css`
  color: #61dafb;
  `}
- href="https://www.familysearch.org/frontier/docs/#/"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn Frontier
- </a>
- </HomeHeader>
- </div>
-)
+  href="https://www.familysearch.org/frontier/docs/#/"
+  target="_blank"
+  rel="noopener noreferrer"
+  >
+  <Trans i18nkey="learn.frontier">Learn Frontier</Trans>
+  </a>
+  </HomeHeader>
+  </div>
+ )
 
 export default Home

packages/react-scripts/template/src/components/home/Logo.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { css } from '@emotion/core'
+import { i18n } from '@fs/locale'
 import logo from './Logo.svg'
 
 const styles = css`
@@ -16,6 +17,6 @@ const styles = css`
  }
 `
 
-const Logo = () => <img src={logo} css={styles} alt="logo" />
+const Logo = () => <img src={logo} css={styles} alt={i18n.t('logo', 'Spinning Frontier Logo')} />
 
 export default Logo

packages/react-scripts/template/src/components/user/UserInfo.js

@@ -1,7 +1,9 @@
 import React from 'react'
 import { useUser } from '@fs/user'
+import { useTranslation } from 'react-i18next'
 
 export default function UserInfo() {
  const user = useUser()
- return <div>Hello, {user.displayName}!</div>
+ const { t } = useTranslation()
+ return <div>{t('user.greeting', 'Hello, {{user.displayName}}!')}</div>
 }

packages/react-scripts/template/src/index.js

@@ -2,15 +2,21 @@ import React, { Suspense } from 'react'
 import ReactDOM from 'react-dom'
 import { UserProvider } from '@fs/user'
 import RootErrorBoundary from '@fs/error-boundary'
+import { I18nProvider, addTranslations } from '@fs/locale'
 import App from './components/App'
 import * as serviceWorker from './serviceWorker'
+import translations from './locales'
+
+addTranslations(translations)
 
 const FrontierRoot = () => (
  <RootErrorBoundary>
- <Suspense>
- <UserProvider>
- <App />
- </UserProvider>
+ <Suspense fallback="Loading ...">
+ <I18nProvider>
+ <UserProvider>
+ <App />
+ </UserProvider>
+ </I18nProvider>
  </Suspense>
  </RootErrorBoundary>
 )