Merge pull request #918 from appnexus/webpack-4-build-clean

Build upgrade (Webpack 4 & more)

.babelrc

@@ -1,13 +1,20 @@
 {
 	"env": {
 		"test": {
-			"plugins": []
+			"plugins": [
+				["babel-plugin-transform-require-ignore", {
+					"extensions": [".less", ".css"]
+				}],
+			]
 		},
 		"development": {
 			"plugins": ["lodash"]
 		},
 		"production": {
 			"plugins": [
+				["babel-plugin-transform-require-ignore", {
+					"extensions": [".less", ".css"]
+				}],
 				["react-peek/babel", {
 					"minifyStatics": true
 				}],

.storybook/lucid-docs-addon/ChildComponents.js

@@ -3,7 +3,7 @@ import ReactDOMServer from 'react-dom/server';
 import _ from 'lodash';
 import marksy from 'marksy/components';
 import PropTypes from './PropTypes';
-import { stripIndent } from '../../src/docs/util';
+import { stripIndent } from './util';
 
 import SyntaxHighlighter, {
 	registerLanguage,

.storybook/lucid-docs-addon/PropTypes.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import _ from 'lodash';
 import marksy from 'marksy/components';
-import { stripIndent } from '../../src/docs/util';
+import { stripIndent } from './util';
 
 import SyntaxHighlighter, {
 	registerLanguage,

.storybook/lucid-docs-addon/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 import addons from '@storybook/addons';
-import { stripIndent } from '../../src/docs/util';
+import { stripIndent } from './util';
 import marksy from 'marksy';
 import Hoverable from './Hoverable';
 

.storybook/lucid-docs-addon/util.js

@@ -0,0 +1,16 @@
+export const stripIndent = text => {
+	if (!text) {
+		return '';
+	}
+
+	const sigLines = text.split(/\n/).filter(line => !/^\s*$/.test(line));
+	const leadingWhitespaces = sigLines.map(line => /^(\s*)/g.exec(line)[1]);
+	const minimumLeadingWhitespace = leadingWhitespaces.reduce(
+		(min, line) => (line.length < min.length ? line : min),
+		leadingWhitespaces[0]
+	);
+	return text
+		.split(/\n/)
+		.map(line => line.replace(minimumLeadingWhitespace, ''))
+		.join('\n');
+};

.storybook/manager-head.html

@@ -8,4 +8,5 @@
     font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
   }
 </style>
-<link rel="icon" type="image/png" href="/lucid/lucid-icon.png" />
+<link rel="icon" type="image/png" href="//appnexus.github.io/lucid/lucid-icon.png" />
+<link rel="icon" type="image/png" href="/lucid-icon.png" />

src/docs/containers/color-palette.jsx → docs/color-palette.jsx

@@ -3,7 +3,8 @@ import classNames from 'classnames';
 import React from 'react';
 import createClass from 'create-react-class';
 
-import { lucidClassNames } from '../../util/style-helpers';
+import { lucidClassNames } from '../src/util/style-helpers';
+import './color-palette.less';
 
 const cx = lucidClassNames.bind('ColorPalette');
 

src/docs/containers/color-palette.less → docs/color-palette.less

@@ -1,3 +1,5 @@
+@import '../src/styles/variables.less';
+
 .ColorPalette {
 	padding: 15px;
 

docs/hybrid-components.md

@@ -62,7 +62,7 @@ StatelessExpander.reducers = {
   })
 }
 
-const HybridExpander = buildHybridComponent(Expander);
+const HybridExpander = buildHybridComponent(StatelessExpander);
 export default HybridExpander;
 ```
 Now you have the flexibility to either let the component handle it's own state:

docs/index.stories.js

@@ -18,6 +18,7 @@ import SyntaxHighlighter, {
 import jsx from 'react-syntax-highlighter/languages/prism/jsx';
 import okaidia from 'react-syntax-highlighter/styles/prism/okaidia';
 import '../src/index.less';
+import ColorPalette from './color-palette';
 
 registerLanguage('jsx', jsx);
 
@@ -155,6 +156,11 @@ storiesOf('Lucid UI', module)
 	))
 	.add('Computed Props', () => (
 		<ArticlePage>{compile(computedPropsText).tree}</ArticlePage>
+	))
+	.add('Color Palette', () => (
+		<ArticlePage>
+			<ColorPalette />
+		</ArticlePage>
 	));
 
 const loadedComponents = require('./load-components');