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);

.travis.yml

@@ -8,9 +8,6 @@ script:
  - npm run bundlesize
 after_success:
  - npm run travis-deploy-once "npm run semantic-release"
-cache:
- directories:
- - node_modules
 notifications:
  slack:
  rooms:

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,18 +24,19 @@
  "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",
  "bundlesize": "bundlesize",
  "size": "npm run reset-cache && npm run build && npm run bundlesize"
  },
  "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.1",
+ "@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",
@@ -105,6 +106,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",

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',