webpack config handles exports better

.babelrc

@@ -7,5 +7,14 @@
     }],
     "babel-preset-react"
   ],
-  "plugins": ["transform-object-rest-spread"]
+  "plugins": [
+    "transform-object-rest-spread",
+    ["babel-plugin-react-css-modules", {
+      "webpackHotModuleReloading": true,
+      "filetypes": {
+        ".scss": "postcss-scss"
+      },
+      "generateScopedName": '[name]__[local]___[hash:base64:5]'
+    }]
+  ]
 }

.storybook/webpack.config.js

-// you can use this file to add your custom webpack plugins, loaders and anything you like.
-// This is just the basic way to add addional webpack configurations.
-// For more information refer the docs: https://getstorybook.io/docs/configurations/custom-webpack-config
-
-// IMPORTANT
-// When you add this file, we won't add the default configurations which is similar
-// to "React Create App". This only has babel loader to load JavaScript.
 const path = require('path');
 
 module.exports = {
   module: {
-    rules: [{
-      test: /\.scss$/,
-      use: [
-        {loader: 'style-loader'},
-        {loader: 'css-loader'},
-        {
-          loader: 'sass-loader',
-          options: {
-            data: '@import "variables"; @import "mixins";',
-            includePaths: [
-              path.join(__dirname, '../'),
-            ],
+    rules: [
+      {
+        test: /\.scss$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+              localIdentName: '[name]__[local]___[hash:base64:5]',
+            },
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              data: '@import "variables"; @import "mixins";',
+              includePaths: [
+                path.join(__dirname, '../node_modules/bootstrap/scss'),
+              ],
+            },
           },
-        },
-      ],
-    }],
+        ],
+      },
+    ],
   },
 };

package.json

@@ -2,7 +2,7 @@
   "name": "paragon",
   "version": "0.0.1",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
-  "main": "dist/paragon.min.js",
+  "main": "src/index.js",
   "author": "arizzitano",
   "license": "MIT",
   "scripts": {
@@ -32,6 +32,7 @@
     "babel-cli": "^6.24.1",
     "babel-jest": "^20.0.3",
     "babel-loader": "^7.0.0",
+    "babel-plugin-react-css-modules": "^2.7.1",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
     "babel-preset-babili": "^0.0.12",
     "babel-preset-env": "^1.4.0",
@@ -39,6 +40,7 @@
     "babel-preset-react": "^6.24.1",
     "coveralls": "^2.13.1",
     "enzyme": "^2.8.2",
+    "babili-webpack-plugin": "^0.1.1",
     "css-loader": "^0.28.4",
     "eslint": "^3.19.0",
     "eslint-config-airbnb": "^14.1.0",
@@ -49,6 +51,7 @@
     "husky": "^0.13.4",
     "jest": "^20.0.4",
     "node-sass": "^4.5.3",
+    "postcss-scss": "^1.0.1",
     "react-router-dom": "^4.1.1",
     "react-test-renderer": "^15.6.1",
     "sass-loader": "^6.0.5",

src/Button.jsx

+/* eslint-disable no-unused-vars */
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import borders from 'bootstrap/scss/utilities/_borders.scss';
+import buttons from 'bootstrap/scss/_buttons.scss';
+
+function Button(props) {
+  const styles = [
+    ...props.classNames,
+    'buttons.btn',
+  ];
+
+  if (props.buttonType) {
+    styles.push(`buttons.btn-${props.buttonType}`);
+  }
+
+  return (
+    <button
+      onBlur={props.onBlur}
+      onClick={props.onClick}
+      onKeyDown={props.onKeyDown}
+      styleName={classNames(styles)}
+      type={props.type}
+    >
+      {props.display}
+    </button>
+  );
+}
+
+Button.propTypes = {
+  buttonType: PropTypes.string,
+  classNames: PropTypes.arrayOf(PropTypes.string),
+  display: PropTypes.string.isRequired,
+  onBlur: PropTypes.function,
+  onClick: PropTypes.function,
+  onKeyDown: PropTypes.function,
+  type: PropTypes.string,
+};
+
+Button.defaultProps = {
+  buttonType: undefined,
+  classNames: [],
+  onBlur: () => {},
+  onClick: () => {},
+  onKeyDown: () => {},
+  type: 'button',
+};
+
+export default Button;

src/Dropdown.jsx

 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-
 import 'bootstrap/scss/_dropdown.scss';
 
+import Button from './Button';
+
 const triggerKeys = {
   OPEN_MENU: ['ArrowDown', 'Space'],
   CLOSE_MENU: ['Escape'],
@@ -96,7 +97,7 @@ class Dropdown extends React.Component {
 
   generateMenuItems(menuItems) {
     return menuItems.map((menuItem, i) => (
-      <li className={this.props.classes.menuItem} key={i}>
+      <li styleName='dropdown-item' key={i}>
         <a
           role="menuitem"
           href={menuItem.href}
@@ -114,34 +115,29 @@ class Dropdown extends React.Component {
 
   render() {
     const menuItems = this.generateMenuItems(this.props.menuItems);
-    const classes = this.props.classes;
 
     return (
       <div
-        className={classNames([
-          classes.dropdown,
-        { [classes.show]: this.state.open },
+        styleName={classNames([
+          'dropdown',
+        { show: this.state.open },
         ])}
         ref={(container) => { this.container = container; }}
       >
-        <button
+        <Button
           aria-expanded={this.state.open}
           aria-haspopup="true"
-          className={classNames([
-            classes.toggle,
-            { [classes.active]: this.state.open },
-          ])}
+          display={this.props.title}
+          className="dropdown-toggle"
           onClick={this.toggle}
           onKeyDown={this.handleToggleKeyDown}
           type="button"
           ref={(toggleElem) => { this.toggleElem = toggleElem; }}
-        >
-          {this.props.title}
-        </button>
+        />
         <ul
           aria-label={this.props.title}
           aria-hidden={!this.state.open}
-          className={classes.menu}
+          styleName='dropdown-menu'
           role="menu"
         >
           {menuItems}
@@ -157,21 +153,6 @@ Dropdown.propTypes = {
     label: PropTypes.string,
     href: PropTypes.string,
   })).isRequired,
-  classes: PropTypes.shape,
-};
-
-Dropdown.defaultProps = {
-  classes: {
-    dropdown: 'dropdown',
-    active: 'active',
-    toggle: 'btn btn-secondary dropdown-toggle',
-    screenreader: 'sr-only',
-    show: 'show',
-    menu: 'dropdown-menu',
-    menuActive: null,
-    menuItem: 'dropdown-item',
-    menuWrapper: null,
-  },
 };
 
 export default Dropdown;

src/InputSelect/InputSelect.stories.jsx

@@ -113,7 +113,7 @@ storiesOf('Dropdown', module)
       classes={{
         dropdown: 'dropdown',
         active: 'active',
-        toggle: 'btn btn-secondary border-0 dropdown-toggle',
+        toggle: 'dropdown-toggle',
         screenreader: 'sr-only',
         show: 'show',
         menu: 'dropdown-menu',

webpack.config.js

 const path = require('path');
+const BabiliPlugin = require('babili-webpack-plugin');
 
 const env = process.env.NODE_ENV || 'dev';
 
@@ -15,6 +16,9 @@ const base = {
   resolve: {
     extensions: ['.js', '.jsx'],
   },
+  plugins: [
+    new BabiliPlugin(),
+  ],
   module: {
     rules: [
       {
@@ -30,41 +34,43 @@ const base = {
           { loader: 'source-map-loader' },
         ],
       },
+      {
+        test: /\.scss$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+              localIdentName: '[name]__[local]___[hash:base64:5]',
+            },
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              data: '@import "variables"; @import "mixins";',
+              includePaths: [
+                path.join(__dirname, './node_modules/bootstrap/scss'),
+              ],
+            },
+          },
+        ],
+      },
     ],
   },
 };
 
 const additionalConfig = {
-  // dev runs the doc site locally.
-  dev: {
-    devServer: {
-      contentBase: path.resolve('./docs'),
-      historyApiFallback: true,
-      stats: {
-        chunks: false,
-      },
-    },
-    node: {
-      fs: 'empty',
-    },
-    module: {
-      loaders: [
-        {
-          test: /\.(js|jsx)$/,
-          exclude: /node_modules/,
-          loaders: [
-            'babel-loader?cacheDirectory',
-          ],
-        },
-      ],
-    },
-  },
   // production builds the library for external consumption
   production: {
-    entry: path.resolve('./src/index.js'),
+    entry: {
+      Dropdown: path.resolve('./src/Dropdown.jsx'),
+    },
     output: {
       path: path.resolve('./dist'),
-      filename: 'paragon.min.js',
+      filename: '[name].js',
       library: 'paragon',
       libraryTarget: 'umd',
     },