form-components v1.7.0

var path = require('path');
var atImport = require("postcss-import")

var brand = process.env.BRAND || 'catho';
var language = process.env.TRANSLATIONS || 'catho_pt';
var translations = path.resolve(__dirname, 'node_modules/form-components/translations/', language + '.json');
var theme = path.resolve(__dirname, 'node_modules/form-components/theme/', brand);

exports.modifyWebpackConfig = function(config, stage) {
  config.merge({
      babel: {
        plugins: [ ["module-resolver", { "alias": {
                "translations": translations
            }
        }] ]
      },
      resolve: {
          alias: {translations$: translations}
      },
      postcss: [atImport({path: [theme]})]
  });
  config.loader('form-components-js', function(cfg) {
    cfg.test = /node_modules\/form-components\/(.)+\.js$/
    cfg.loader = 'babel'
    return cfg
  })
  return config
};

In this script, a few things happen:

• We add an extra loader for the uncompiled files in form-components. If we were to precompile those, we would have to do it for every reasonable combination of BRAND and TRANSLATIONS. Doing this might simplify the setup, so open to suggestions.
• We define the theme for postcss. This will resolve '@import \'theme\'' in the imported components.
• We use babel with the module-resolver plugin and webpack to define which translation file to load. Only the babel one should be required however I have noticed a rendering issue when not using the webpack one as well.

• set up storybook globally
• run the command in the form-components project as follows: BRAND=seek TRANSLATIONS=seek_en npm run storybook