WIP feat(DatePicker): Add DatePicker component

package.json

@@ -30,6 +30,8 @@
   },
   "optionalDependencies": {
     "lodash.orderby": "^4.6.0",
+    "react-widgets": "^4.1.3",
+    "react-widgets-moment": "^4.0.6",
     "sortabular": "^1.5.1",
     "table-resolver": "^3.2.0"
   },
@@ -70,6 +72,7 @@
     "jest": "^22.0.4",
     "jest-cli": "^22.0.4",
     "node-sass": "^4.7.2",
+    "node-sass-tilde-importer": "^1.0.1",
     "prettier": "^1.9.2",
     "prop-types": "^15.6.0",
     "raf": "^3.4.0",
@@ -82,6 +85,7 @@
     "travis-deploy-once": "^4.3.0"
   },
   "peerDependencies": {
+    "moment": "^2.20.1",
     "prop-types": "^15.6.0",
     "react": "^15.6.2 || ^16.2.0",
     "react-dom": "^15.6.2 || ^16.2.0"
@@ -97,7 +101,7 @@
     "build": "npm run build:scripts && npm run build:sass && npm run build:less",
     "build:scripts": "babel src --out-dir dist/js --ignore test*.js,__mocks__",
     "build:less": "mkdir -p dist/less && cp -r less/* dist/less",
-    "build:sass": "mkdir -p dist/sass && cp -r sass/patternfly-react/* dist/sass && node-sass --output-style compressed --include-path sass $npm_package_sassIncludes_patternfly $npm_package_sassIncludes_bootstrap $npm_package_sassIncludes_fontAwesome -o dist/css sass/patternfly-react.scss",
+    "build:sass": "mkdir -p dist/sass && cp -r sass/patternfly-react/* dist/sass && node-sass --output-style compressed --importer sass-loader.js --include-path sass -o dist/css sass/patternfly-react.scss",
     "lint": "eslint --max-warnings 0 src storybook",
     "prettier": "prettier --write --single-quote --trailing-comma=none '{src,storybook}/**/*.js'",
     "prepare": "npm run build",

sass-loader.js

@@ -0,0 +1,33 @@
+/*
+ * Custom loader for node-sass to allow paths in the sass files to
+ * be prefixed with '@' for a custom mapping (contained in this file)
+ * of to be prefixed with '~' for a mapping to a node_modules package.
+ */
+const path = require('path');
+const findParentDir = require('find-parent-dir');
+const nodeSassTildeImporter = require('node-sass-tilde-importer');
+
+const mappings = {
+  '@patternfly': 'node_modules/patternfly/dist/sass',
+  '@bootstrap': 'node_modules/patternfly/node_modules/bootstrap-sass/assets/stylesheets',
+  '@fontAwesome': 'node_modules/patternfly/node_modules/font-awesome-sass/assets/stylesheets'
+};
+
+module.exports = function importer(url, prev, done) {
+  const url__ = url;
+
+  if (url[0] === '@') {
+    const packageRoot = findParentDir.sync(prev, 'node_modules');
+    if (!packageRoot) return null;
+
+    const mapTarget = url.substr(0, url.indexOf('/'));
+    if (mappings[mapTarget]) {
+      url = path.resolve(packageRoot, mappings[mapTarget], url.substr(1));
+    }
+  } else if (url[0] === '~') {
+    return nodeSassTildeImporter(url, prev, done);
+  }
+
+  // console.log(`url "${url__}" ==> "${url}"`);
+  return { file: url };
+};

sass/patternfly-react.scss

@@ -2,22 +2,23 @@
   Third Party / Dependency imports here
 */
 $font-path:      '~patternfly/dist/fonts/';
-$img-path:        '~patternfly/dist/img/';
+$img-path:       '~patternfly/dist/img/';
 $icon-font-path: '~patternfly/dist/fonts/';
 
-
 // Bootstrap Core variables and mixins
-@import "bootstrap/variables";
-@import "bootstrap/mixins";
+@import "@bootstrap/variables";
+@import "@bootstrap/mixins";
 
 // Patternfly Core variables and mixins
-@import 'patternfly/variables';
-@import 'patternfly/fonts';
-@import 'patternfly/bootstrap-mixin-overrides';
-@import 'patternfly/mixins';
+@import '@patternfly/variables';
+@import '@patternfly/fonts';
+@import '@patternfly/bootstrap-mixin-overrides';
+@import '@patternfly/mixins';
 
 /**
   Patternfly React Specific Extensions
 */
-
 @import 'patternfly-react/patternfly-react';
+
+// React Wigets DateTimePicker imports
+@import 'patternfly-react/react-widgets';

sass/patternfly-react/_react-widgets.scss

@@ -0,0 +1,4 @@
+$font-path: '~react-widgets/lib/fonts';
+$img-path:  '~react-widgets/lib/img';
+
+@import '~react-widgets/lib/scss/react-widgets';

src/components/DatePicker/DatePicker.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+  compose,
+  setPropTypes,
+  withProps,
+  defaultProps,
+  renameProp
+} from 'recompose';
+import { DateTimePicker } from 'react-widgets';
+
+// Setup localizer for the DatePicker via moment - default to English (en)
+import momentLocalizer from 'react-widgets-moment';
+momentLocalizer();
+
+const enhance = compose(
+  // RwDateTimePicker uses 'culture' instead of the more common 'locale' or
+  // the 'language' used by bootstrap-datepicker
+  renameProp('locale', 'culture'),
+
+  setPropTypes({
+    ...DateTimePicker.propTypes
+  }),
+  defaultProps({
+    format: 'MM/DD/YYYY' // moment.js format patterns
+  }),
+  withProps({
+    date: true,
+    time: false
+  })
+);
+
+/*
+  Reference Markup on Bootstrap Datepicker...
+    autoclose: true,
+    todayBtn: "linked",
+    todayHighlight: true
+
+  How to...
+    remove the inline open popup button?
+    change the popup button icon?
+
+ */
+
+const DatePicker = enhance(({ className, ...props }) => (
+  <DateTimePicker className={className} {...props} />
+));
+
+export default DatePicker;

src/components/DatePicker/DatePicker.stories.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { inlineTemplate } from '../../../storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL as DOC_URL } from '../../../storybook/constants';
+import { DatePicker } from './index';
+
+// Setup the default localization to English (en)
+import Moment from 'moment';
+Moment.locale('en');
+
+const stories = storiesOf('DatePicker', module);
+
+stories.addWithInfo('DatePicker', '', () => {
+  let story = (
+    <div>
+      <DatePicker onChange={action('onChange')} />
+    </div>
+  );
+  return inlineTemplate({
+    title: 'DatePicker',
+    documentationLink: `${DOC_URL.PATTERNFLY_ORG_WIDGETS}#bootstrap-datepicker`,
+    description: '',
+    story
+  });
+});

src/components/DatePicker/index.js

@@ -0,0 +1 @@
+export { default as DatePicker } from './DatePicker';

storybook/sass/base.scss

@@ -2,13 +2,13 @@
   PatternFly React Storybook Included Stylesheets
 */
 $font-path:      '~patternfly/dist/fonts/';
-$img-path:        '~patternfly/dist/img/';
+$img-path:       '~patternfly/dist/img/';
 $icon-font-path: '~patternfly/dist/fonts/';
 
 @import 'patternfly';
 
 /**
-  Third Party / Dependency LESS imports here
+  Third Party / Dependency imports here
 */
 @import 'show-grid';
 

storybook/webpack.config.js

@@ -9,7 +9,8 @@ module.exports = {
         loaders: ['style-loader', 'css-loader'],
         include: [
           path.resolve(__dirname, '../src'),
-          path.resolve(__dirname, './')
+          path.resolve(__dirname, './'),
+          path.resolve(__dirname, '../node_modules')
         ]
       },
       // Sass
@@ -21,8 +22,9 @@ module.exports = {
           {
             loader: 'sass-loader',
             options: {
+              importer: require('../sass-loader.js'),
               includePaths: [
-                path.resolve(__dirname, '../sass/patternfly-react'),
+                path.resolve(__dirname, '../sass'),
                 path.resolve(__dirname, '../node_modules/patternfly/dist/sass'),
                 path.resolve(
                   __dirname,