Stories refactoring, i18n <Text /> with separator

.commitlintrc.js

@@ -15,6 +15,7 @@ module.exports = {
         'tools',
         'diary',
         'utils',
+        'i18n',
       ],
     ],
     'scope-empty': [2, 'never'],

.gitignore

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

.storybook/.babelrc

@@ -1,11 +1,12 @@
 {
-  "presets": ["next/babel", "stage-0"],
+  "presets": ["next/babel"],
   "plugins": [
     [
       "module-resolver",
       {
         "root": ["./"]
       }
     ],
+    "@babel/plugin-proposal-export-default-from"
   ]
 }

.storybook/config.js

@@ -1,11 +1,38 @@
-import { configure, setAddon } from '@storybook/react';
-import infoAddon from '@storybook/addon-info';
+import { configure, addDecorator } from '@storybook/react';
+import { withInfo, setDefaults } from '@storybook/addon-info';
+import { withKnobs } from '@storybook/addon-knobs';
 
-const req = require.context('../components', true, /\.stories\.js$/);
+import StoriesDecorator from 'stories/utils/StoriesDecorator';
+
+const req = require.context('../stories', true, /.js$/);
 
 function loadStories() {
   req.keys().forEach(req);
 }
 
-setAddon(infoAddon);
+addDecorator(withInfo);
+addDecorator(withKnobs);
+addDecorator(StoriesDecorator);
+setDefaults({
+  inline: true,
+  styles: {
+    header: {
+      h1: {
+        margin: 0,
+        padding: 0,
+        fontSize: '25px',
+        color: '#1a9582',
+      },
+      h2: {
+        margin: 0,
+        padding: 0,
+        fontSize: '16px',
+      },
+      body: {
+        padding: 0,
+        margin: 0,
+      },
+    },
+  },
+});
 configure(loadStories, module);

.storybook/webpack.config.js

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

.travis.yml

@@ -4,12 +4,10 @@ node_js:
 script:
   - npm run lint
   - npm run build
+  - npm run storybook:deploy
   - 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

@@ -6,23 +6,36 @@ import LocaleContext from 'components/common/LocaleContext';
 import { DEFAULT_LOCALE } from 'constants';
 import dict from 'data/i18n.json';
 
+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>{lang => render(localize(id, lang))}</LocaleContext.Consumer>
+  <LocaleContext.Consumer>
+    {lang => render(...localize(id, lang).split(SEPARATOR))}
+  </LocaleContext.Consumer>
 );
 
 Text.propTypes = {
+  /** translation key in our i18n dict */
   id: PropTypes.string.isRequired,
+  // eslint-disable-next-line react/require-default-props
   render: PropTypes.func,
   children: PropTypes.func,
 };
 
 Text.defaultProps = {
-  render: defaultRender,
   children: defaultRender,
 };
 

lint-staged.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   '**/*.js': ['npm run prettier', 'eslint --fix', 'git add'],
+  '**/*.md': ['npm run prettier', 'git add'],
 };

next.config.js

@@ -2,27 +2,17 @@
 const withBundleAnalyzer = require('@zeit/next-bundle-analyzer');
 const webpack = require('webpack');
 
-const packageJson = require('./package.json');
+const { definePlugin } = require('./utils/webpack-plugins');
 const { LOCALES } = require('./constants');
 
 const langs = Object.keys(LOCALES).join('|');
 
-const ENV = process.env.WIR_ENV || process.env.NODE_ENV || 'not-set';
-
 module.exports = withBundleAnalyzer({
   webpack(config) {
     config.plugins.push(
       ...[
         new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, new RegExp(langs)),
-        new webpack.DefinePlugin({
-          __ENV__: ENV,
-          __VERSION__: JSON.stringify(packageJson.version),
-          __PROD__: ENV === 'production',
-          __STAGING__: ENV === 'staging',
-          __DEV__: ENV === 'development',
-          __TESTING__: ENV === 'testing',
-          __DEBUG_STYLES__: process.env.DEBUG_STYLES === 'true',
-        }),
+        definePlugin,
       ]
     );
     return config;