feat: add translation support (decaporg#2870)

* feat: add translation support

* test(cypress): fix locale import

* docs: add locale documentation

* feat: add german translation (decaporg#2877)

* fix: locales package version, register all locales in netlify-cms

babel.config.js

@@ -37,6 +37,7 @@ const defaultPlugins = [
             Lib: './src/lib',
             MediaLibrary: './src/components/MediaLibrary',
             Reducers: './src/reducers',
+            Selectors: './src/selectors',
             ReduxStore: './src/redux',
             Routing: './src/routing',
             UI: './src/components/UI',
@@ -56,6 +57,7 @@ const defaultPlugins = [
             Integrations: path.join(__dirname, 'packages/netlify-cms-core/src/integrations/'),
             Lib: path.join(__dirname, 'packages/netlify-cms-core/src/lib/'),
             Reducers: path.join(__dirname, 'packages/netlify-cms-core/src/reducers/'),
+            Selectors: path.join(__dirname, 'packages/netlify-cms-core/src/selectors/'),
             ReduxStore: path.join(__dirname, 'packages/netlify-cms-core/src/redux/'),
             Routing: path.join(__dirname, 'packages/netlify-cms-core/src/routing/'),
             ValueObjects: path.join(__dirname, 'packages/netlify-cms-core/src/valueObjects/'),

cypress/utils/dismiss-local-backup.js

@@ -1,12 +1,12 @@
-import { getPhrases } from 'Constants/defaultPhrases';
+import { en } from '../../packages/netlify-cms-locales/src';
 
 // Prevents unsaved changes in dev local storage from being used
 Cypress.on('window:confirm', message => {
   const {
     editor: {
       editor: { confirmLoadBackup },
     },
-  } = getPhrases();
+  } = en;
 
   switch (message) {
     case confirmLoadBackup:

packages/netlify-cms-app/package.json

@@ -34,6 +34,7 @@
     "netlify-cms-editor-component-image": "^2.4.3",
     "netlify-cms-lib-auth": "^2.2.4",
     "netlify-cms-lib-util": "^2.4.0-beta.4",
+    "netlify-cms-locales": "^1.0.0",
     "netlify-cms-ui-default": "^2.7.0-beta.1",
     "netlify-cms-widget-boolean": "^2.2.3",
     "netlify-cms-widget-date": "^2.3.5",

packages/netlify-cms-app/src/index.js

@@ -2,6 +2,7 @@ import { NetlifyCmsCore as CMS } from 'netlify-cms-core';
 import './backends';
 import './widgets';
 import './editor-components';
+import './locales';
 
 if (typeof window !== 'undefined') {
   /**

packages/netlify-cms-app/src/locales.js

@@ -0,0 +1,4 @@
+import { NetlifyCmsCore as CMS } from 'netlify-cms-core';
+import { en } from 'netlify-cms-locales';
+
+CMS.registerLocale('en', en);

packages/netlify-cms-core/src/bootstrap.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import { render } from 'react-dom';
-import { Provider } from 'react-redux';
+import { Provider, connect } from 'react-redux';
 import { Route } from 'react-router-dom';
 import { ConnectedRouter } from 'react-router-redux';
 import history from 'Routing/history';
 import store from 'ReduxStore';
 import { mergeConfig } from 'Actions/config';
-import { getPhrases } from 'Constants/defaultPhrases';
+import { getPhrases } from 'Lib/phrases';
+import { selectLocale } from 'Selectors/config';
 import { I18n } from 'react-polyglot';
 import { GlobalStyles } from 'netlify-cms-ui-default';
 import { ErrorBoundary } from 'UI';
@@ -17,6 +18,24 @@ import 'what-input';
 
 const ROOT_ID = 'nc-root';
 
+const TranslatedApp = ({ locale }) => {
+  return (
+    <I18n locale={locale} messages={getPhrases(locale)}>
+      <ErrorBoundary showBackup>
+        <ConnectedRouter history={history}>
+          <Route component={App} />
+        </ConnectedRouter>
+      </ErrorBoundary>
+    </I18n>
+  );
+};
+
+const mapDispatchToProps = state => {
+  return { locale: selectLocale(state.config) };
+};
+
+const ConnectedTranslatedApp = connect(mapDispatchToProps)(TranslatedApp);
+
 function bootstrap(opts = {}) {
   const { config } = opts;
 
@@ -63,15 +82,9 @@ function bootstrap(opts = {}) {
   const Root = () => (
     <>
       <GlobalStyles />
-      <I18n locale={'en'} messages={getPhrases()}>
-        <ErrorBoundary showBackup>
-          <Provider store={store}>
-            <ConnectedRouter history={history}>
-              <Route component={App} />
-            </ConnectedRouter>
-          </Provider>
-        </ErrorBoundary>
-      </I18n>
+      <Provider store={store}>
+        <ConnectedTranslatedApp />
+      </Provider>
     </>
   );
 

packages/netlify-cms-core/src/constants/configSchema.js

@@ -42,6 +42,7 @@ const getConfigSchema = () => ({
       },
       required: ['name'],
     },
+    locale: { type: 'string', examples: ['en', 'fr', 'de'] },
     site_url: { type: 'string', examples: ['https://example.com'] },
     display_url: { type: 'string', examples: ['https://example.com'] },
     logo_url: { type: 'string', examples: ['https://example.com/images/logo.svg'] },