chore(i18n): add warning logging for missed keys [#40]

.gitignore

@@ -1,5 +1,6 @@
 .idea/
 .next/
+.cache/
 node_modules/
 reports/
 static/

.storybook/config.js

@@ -1,5 +1,5 @@
 import { configure, addDecorator } from '@storybook/react';
-import { setDefaults } from '@storybook/addon-info';
+import { withInfo, setDefaults } from '@storybook/addon-info';
 import { withKnobs } from '@storybook/addon-knobs';
 
 import StoriesDecorator from 'stories/utils/StoriesDecorator';
@@ -10,6 +10,7 @@ function loadStories() {
   req.keys().forEach(req);
 }
 
+addDecorator(withInfo);
 addDecorator(withKnobs);
 addDecorator(StoriesDecorator);
 setDefaults({

.storybook/webpack.config.js

@@ -1,4 +1,4 @@
-const { definePlugin } = require('../webpack-plugins');
+const { definePlugin } = require('../utils/webpack-plugins');
 
 module.exports = function(storybookBaseConfig, env, defaultConfig) {
   defaultConfig.plugins.push(definePlugin);

components/common/Text.js

@@ -10,8 +10,16 @@ const SEPARATOR = '||';
 
 const defaultRender = text => <>{text}</>;
 
+const extract = key => {
+  const translation = get(dict, key, '');
+  if (!translation && !__PROD__) {
+    console.warn('[i18n]: No translation for ', key);
+  }
+  return translation;
+};
+
 export const localize = (id, lang) =>
-  get(dict, `${id}.${lang}`) || get(dict, `${id}.${DEFAULT_LOCALE}`) || '';
+  extract(`${id}.${lang}`) || extract(`${id}.${DEFAULT_LOCALE}`);
 
 const Text = ({ id, children, render = children }) => (
   <LocaleContext.Consumer>

next.config.js

@@ -2,7 +2,7 @@
 const withBundleAnalyzer = require('@zeit/next-bundle-analyzer');
 const webpack = require('webpack');
 
-const { definePlugin } = require('./webpack-plugins');
+const { definePlugin } = require('./utils/webpack-plugins');
 const { LOCALES } = require('./constants');
 
 const langs = Object.keys(LOCALES).join('|');

package.json

@@ -24,16 +24,17 @@
     "analyze": "BUNDLE_ANALYZE=both npm run build",
     "analyze:server": "BUNDLE_ANALYZE=server npm run build",
     "analyze:client": "BUNDLE_ANALYZE=browser npm run build",
-    "postinstall": "npm run copy-static && npm run update-dict && npm run update-team",
+    "fetch-data": "npm run copy-static && npm run update-dict && npm run update-team",
+    "postinstall": "patch-package && npm run fetch-data",
     "semantic-release": "semantic-release",
     "travis-deploy-once": "travis-deploy-once"
   },
   "dependencies": {
-    "@storybook/addon-actions": "^4.0.0-alpha.25",
-    "@storybook/addon-info": "^4.0.0-alpha.25",
-    "@storybook/addon-knobs": "^4.0.0-alpha.25",
-    "@storybook/addon-links": "^4.0.0-alpha.25",
-    "@storybook/react": "^4.0.0-alpha.25",
+    "@storybook/addon-actions": "^4.0.0",
+    "@storybook/addon-info": "^4.0.0",
+    "@storybook/addon-knobs": "^4.0.0",
+    "@storybook/addon-links": "^4.0.0",
+    "@storybook/react": "^4.0.0",
     "Dante2": "git+https://github.com/babajka/dante2.git",
     "babajka-markup": "^1.0.4",
     "classnames": "^2.2.5",
@@ -102,6 +103,7 @@
     "glob": "^7.1.2",
     "husky": "^1.1.1",
     "lint-staged": "^7.3.0",
+    "patch-package": "^5.1.1",
     "prettier": "^1.14.3",
     "semantic-release": "^15.9.17",
     "travis-deploy-once": "^5.0.9",

patches/@storybook/addon-knobs+4.0.0.patch

@@ -0,0 +1,12 @@
+patch-package
+--- a/node_modules/@storybook/addon-knobs/dist/components/types/Select.js
++++ b/node_modules/@storybook/addon-knobs/dist/components/types/Select.js
+@@ -21,7 +21,7 @@ var SelectType = function SelectType(_ref) {
+   var options = knob.options;
+   var entries = Array.isArray(options) ? options.reduce(function (acc, k) {
+     return Object.assign(acc, {
+-      k: k
++      [k]: k
+     });
+   }, {}) : options;
+   var selectedKey = Object.keys(entries).find(function (k) {

server.js

@@ -8,13 +8,11 @@ const routes = require('./routes');
 const { BACKEND_URL, MARKUP_URL } = require('./constants/server');
 const { DEFAULT_LOCALE } = require('./constants');
 const getArgs = require('./utils/args');
+const ENV = require('./utils/env');
 
 const ARGS = getArgs();
 const port = ARGS.port || 3000;
 
-// This is a workaround as __ENV__ defined in next.config.js is not visible here.
-const ENV = process.env.WIR_ENV || process.env.NODE_ENV || 'not-set';
-
 const dev = ENV !== 'production' && ENV !== 'staging';
 const app = next({ dev });
 

stories/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { withInfo } from '@storybook/addon-info';
 import { text, boolean, select, object } from '@storybook/addon-knobs';
 
 import Icon from 'components/common/Icon';
@@ -11,53 +10,50 @@ import Select from 'components/common/Select';
 import LocaleContext from 'components/common/LocaleContext';
 import CoreLayout from 'components/common/layout/CoreLayout';
 
-import SourceDecorator from './utils/SourceDecorator';
+import { infoSource } from './utils/params';
 
 const PREFIX = 'Common';
 const stories = storiesOf(PREFIX, module);
 
 stories.add(
   'CoreLayout',
-  withInfo(`
-      This is the root component
-      that wraps provided components
-      and import babajka styles,
-      add page title and etc.
-  `)(() => {
+  () => {
     const SomePage = () => null;
     return (
       <CoreLayout title="Awesome page">
         <SomePage />
       </CoreLayout>
     );
-  })
+  },
+  {
+    info: `
+      This is the root component
+      that wraps provided components
+      and import babajka styles,
+      add page title and etc.
+    `,
+  }
 );
 
-stories.add(
-  'Icon',
-  withInfo()(() => (
-    <Icon
-      name={text('fa name', 'github-alt')}
-      size={select('fa size', ['', 'lg', '2x', '3x', '4x', '5x'], '5x')}
-    />
-  ))
-);
+stories.add('Icon', () => (
+  <Icon
+    name={text('fa name', 'github-alt')}
+    size={select('fa size', ['', 'lg', '2x', '3x', '4x', '5x'], '5x')}
+  />
+));
 
 storiesOf(`${PREFIX}/Button`, module)
-  .add(
-    'default',
-    withInfo()(() => (
-      <Button
-        className={text('className', 'button is-primary')}
-        onClick={action('onClick')}
-        disabled={boolean('disabled', false)}
-        pending={boolean('pending', false)}
-      >
-        {text('children', 'Hello Button')}
-      </Button>
-    ))
-  )
-  .addDecorator(SourceDecorator)
+  .add('default', () => (
+    <Button
+      className={text('className', 'button is-primary')}
+      onClick={action('onClick')}
+      disabled={boolean('disabled', false)}
+      pending={boolean('pending', false)}
+    >
+      {text('children', 'Hello Button')}
+    </Button>
+  ))
+  .addParameters(infoSource)
   .add('colors', () => {
     const colors = ['', 'primary', 'link', 'info', 'success', 'warning', 'danger'];
     return (
@@ -74,10 +70,7 @@ storiesOf(`${PREFIX}/Button`, module)
 storiesOf(`${PREFIX}/Select`)
   .add(
     'default',
-    withInfo(`
-      Our custom select component
-      built with awesome [Downshift](https://github.com/paypal/downshift)!
-    `)(() => (
+    () => (
       <Select
         valueWholeObject={boolean('valueWholeObject', false)}
         options={object('options', [
@@ -92,9 +85,15 @@ storiesOf(`${PREFIX}/Select`)
         size={select('size', ['xs', 's', 'm', 'l'], 's')}
         onChange={action('Select')}
       />
-    ))
+    ),
+    {
+      info: `
+        Our custom select component
+        built with awesome [Downshift](https://github.com/paypal/downshift)!
+      `,
+    }
   )
-  .addDecorator(SourceDecorator)
+  .addParameters(infoSource)
   .add('dropdown', () => (
     <Select
       placeholder="Locale"
@@ -133,14 +132,13 @@ storiesOf(`${PREFIX}/Text`, module)
     const lang = select('locale', ['be', 'ru', 'en'], 'be');
     return <LocaleContext.Provider value={lang}>{story()}</LocaleContext.Provider>;
   })
-  .add(
-    'default',
-    withInfo(`
+  .add('default', () => <Text id={text('dict key', 'about.goal')} />, {
+    info: `
       Our internationalization helper,
       that use translations from [Google Sheet](https://docs.google.com/spreadsheets/d/1b3Or9-t_pDZq6GOL4MRUbFhoXuteVxCrRHTM17DLALg/edit?usp=sharing)
-    `)(() => <Text id={text('dict key', 'about.goal')} />)
-  )
-  .addDecorator(SourceDecorator)
+    `,
+  })
+  .addParameters(infoSource)
   .add('custom render', () => <Text id="about.join-us" render={t => t.toUpperCase()} />)
   .add('with separator', () => (
     <ol>

stories/utils/params.js

@@ -0,0 +1,22 @@
+export const infoSource = {
+  info: {
+    propTables: false,
+    styles: {
+      header: {
+        h1: {
+          display: 'none',
+          margin: 0,
+          padding: 0,
+        },
+        h2: {
+          margin: 0,
+          padding: 0,
+          fontSize: '25px',
+          color: '#1a9582',
+        },
+      },
+    },
+  },
+};
+
+export const a = 1;

utils/env.js

@@ -0,0 +1 @@
+module.exports = process.env.WIR_ENV || process.env.NODE_ENV || 'develop';

webpack-plugins.js → utils/webpack-plugins.js

@@ -1,11 +1,11 @@
 /* eslint-disable import/no-extraneous-dependencies */
 const webpack = require('webpack');
 
-const packageJson = require('./package.json');
+const ENV = require('./env');
+const packageJson = require('../package.json');
 
-const ENV = process.env.WIR_ENV || process.env.NODE_ENV || 'not-set';
 const definePlugin = new webpack.DefinePlugin({
-  __ENV__: ENV,
+  __ENV__: JSON.stringify(ENV),
   __VERSION__: JSON.stringify(packageJson.version),
   __PROD__: ENV === 'production',
   __STAGING__: ENV === 'staging',