build(bundler): introduced rollup to do an ES6 modules build

enriched/package.json

@@ -1,7 +1,8 @@
 {
   "name": "telus-thorium-enriched",
   "version": "0.18.1",
-  "main": "lib/index.js",
+  "main": "dist/tds.cjs.js",
+  "module": "dist/tds.es.js",
   "scripts": {
     "start": "npm run deploy && npm run dev",
     "clean": "rimraf lib && rimraf dist && mkdirp lib && mkdirp dist",
@@ -14,7 +15,8 @@
     "build:umd:min": "webpack -p --config webpack.config.umd.min.js",
     "build": "npm run clean && npm run build:lib && npm run build:umd && npm run build:umd:min",
     "test": "jest",
-    "test:watch": "npm run test -- --watch"
+    "test:watch": "npm run test -- --watch",
+    "rollup": "rollup -c"
   },
   "dependencies": {
     "@telusdigital/redux-contentful": "^2.2.1",
@@ -33,6 +35,7 @@
     "babel-core": "^6.17.0",
     "babel-jest": "^16.0.0",
     "babel-loader": "^6.2.5",
+    "babel-plugin-external-helpers": "^6.22.0",
     "babel-preset-es2015": "^6.16.0",
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-2": "^6.17.0",
@@ -67,6 +70,11 @@
     "react-dom": "^15.3.2",
     "react-test-renderer": "^15.3.2",
     "rimraf": "^2.5.4",
+    "rollup": "^0.45.2",
+    "rollup-plugin-babel": "^2.7.1",
+    "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-sass": "^0.5.3",
     "sass-loader": "^3.1.1",
     "sinon": "^2.3.6",
     "style-loader": "^0.12.3",
@@ -96,4 +104,4 @@
     },
     "setupTestFrameworkScriptFile": "<rootDir>/../node_modules/jest-enzyme/lib/index.js"
   }
-}
+}

enriched/rollup.config.js

@@ -0,0 +1,38 @@
+import path from 'path';
+
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import babel from 'rollup-plugin-babel';
+import sass from 'rollup-plugin-sass';
+
+export default {
+  entry: path.resolve('./src/rollup-main.js'),
+  targets: [
+    { format: 'cjs', dest: path.resolve('./dist/tds.cjs.js') },
+    { format: 'es', dest: path.resolve('./dist/tds.es.js') }
+  ],
+  sourceMap: true,
+
+  external: ['react', 'prop-types'],
+  plugins: [
+    resolve({
+      extensions: ['.js', '.jsx']
+    }),
+    commonjs({
+      include: 'node_modules/**'
+    }),
+    sass({
+      output: path.resolve('./dist/tds.css')
+    }),
+    babel({
+      babelrc: false,
+      presets: [
+        ['es2015', { modules: false }],
+        'react',
+        'stage-2'
+      ],
+      plugins: ['external-helpers'],
+      exclude: 'node_modules/**'
+    })
+  ]
+};

enriched/src/components/Card/Card.jsx

@@ -5,9 +5,7 @@ import classNames from 'classnames';
 
 import { warn } from '../../deprecate';
 
-if (process.env.BROWSER) {
-  require('./Card.scss');
-}
+import './Card.scss';
 
 const Card = ({ className, children, ...rest }) => {
   if (className) {

enriched/src/components/Card/Card.scss

@@ -1,4 +1,4 @@
-@import '~telus-thorium-core/scss/settings/variables';
+@import '../../../../core/scss/settings/variables';
 
 .card {
   border: 0;

enriched/src/components/ExpandCollapse/Panel.jsx

@@ -2,9 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-if (process.env.BROWSER) {
-  require('./Panel.scss');
-}
+import './Panel.scss';
 
 class Panel extends Component {
 

enriched/src/components/ExpandCollapse/Panel.scss

@@ -1,5 +1,5 @@
-@import '~telus-thorium-core/scss/settings/variables';
-@import '~telus-thorium-core/scss/utility/mixins';
+@import '../../../../core/scss/settings/variables';
+@import '../../../../core/scss/utility/mixins';
 
 
 .icon-core-caret-up {

enriched/src/components/ExpandCollapse/__tests__/ExpandCollapse.spec.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import ExpandCollapse from '../';
+import ExpandCollapse from '../ExpandCollapse';
 
 const { Group, Panel } = ExpandCollapse;
 
-describe('<ExpandCollaps e/>', () => {
+describe('<ExpandCollapse/>', () => {
   it('handles disabled panels', () => {
     const wrapper = mount(
       <Group disabledKeys={['p1']}>

enriched/src/index.js

@@ -1,7 +1,7 @@
 import SelectorCounter from './components/SelectorCounter';
 import Icon from './components/Icon';
 import * as Grid from './components/Grid';
-import ExpandCollapse from './components/ExpandCollapse';
+import ExpandCollapse from './components/ExpandCollapse/ExpandCollapse';
 import Card from './components/Card/Card';
 import Notification from './components/Notification/Notification';
 import Steps from './components/Steps';

enriched/src/rollup-main.js

@@ -0,0 +1,2 @@
+export { default as Card } from './components/Card/Card';
+export { default as ExpandCollapse } from './components/ExpandCollapse/ExpandCollapse';