Merge branch 'master' of https://github.com/drolsen/Unslated into dev

build/assets.jsx

@@ -7,10 +7,3 @@
 
 import '@src/styles';
 import '@src/scripts';
-
-// Icon bundling
-const requireAll = (r) => r.keys().map(r);
-requireAll(require.context('@atoms/Icon/assets', false, /\.(svg)$/));
-
-// Image bundling
-requireAll(require.context('@atoms/Image/assets', false, /\.(svg|jpg|png|gif)$/));

build/configs/build.config.js

@@ -8,12 +8,13 @@ const fs = require('fs');
 const path = require('path');
 const Package = require('../../package.json');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 // build configuration files
 const js = require('./js/js.config.js');                // all js file related build configurations
 const css = require('./css/css.config.js');             // all css file related build configurations
 const img = require('./img/img.config.js');             // all img/svg related build configurations
+const html = require('./html/html.config.js');          // all html related build configurations
 const font = require('./font/font.config.js');          // all font related build configurations
 const alias = require('./webpack/alias.config.js');     // all file path alias helper configurations
 const stats = require('./webpack/stats.config.js');     // all terminal stats configurations
@@ -34,15 +35,26 @@ const config = {
       ...css.config,  // see build/config/css/css.config.js
       ...js.config,   // see build/config/js/js.config.js
       ...img.config,  // see build/config/img/img.config.js
+      ...html.config, // see build/config/html/html.config.js
       ...font.config  // see build/config/font/font.config.js
     ]
   },
   plugins: [
     ...css.plugins,   // see build/config/css/css.config.js
     ...js.plugins,    // see build/config/js/js.config.js
     ...img.plugins,   // see build/config/img/img.config.js
+    ...html.plugins,  // see build/config/html/html.config.js
     ...font.plugins,  // see build/config/font/font.config.js
-    ...alias.plugins  // see build/config/alias.config.js
+    ...alias.plugins, // see build/config/alias.config.js
+    new CopyWebpackPlugin([ // react-routes rewrite files for hosting guide on remote a web server.
+      {
+        from: path.resolve(
+          __dirname,
+          `../scaffolding/${(Package.remote.type !== 'IIS') ? '.htaccess' : 'web.config'}`
+        ), // for IIS servers
+        to: path.resolve(__dirname, `../../${Package.directories.dest}`)
+      }
+    ])
   ],
   ...stats.config,    // see build/configs/webpack/stats.config.js
   resolve: {
@@ -66,12 +78,7 @@ const config = {
 module.exports = (env, argv) => {
   if (fs.existsSync(path.resolve(__dirname, `../../${Package.directories.dest}`))) {
     config.plugins.push(
-      new CleanWebpackPlugin(
-        [`${config.output.path}`], // reuse config output path from above
-        {
-          'root': path.resolve(config.output.path, '../') // focus plugins root out of build/config/
-        }
-      )
+      new CleanWebpackPlugin()
     );
   }
 

build/configs/css/css.postcss.plugins.js

@@ -154,7 +154,16 @@ const extend = postcss.plugin('postcss-extend', (options) => {
           while (i--) {
             let j = toSelectors.length;
             while (j--) {
-              newSelector += `${fromSelectors[i].replace(new RegExp(`${atRule.params.trim()}(.*?)`, 'g'), ` ${toSelectors[j]}$1`)},`;
+              newSelector += `${fromSelectors[i]
+                .replace(
+                  new RegExp(`${
+                    atRule.params
+                      .replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&').trim()
+                    }(.*?)`,
+                    'g'
+                  ),
+                ` ${toSelectors[j]}$1`)
+              },`;
             }
           }
 

build/configs/dev.config.js

@@ -8,11 +8,11 @@ const path = require('path');
 const Package = require('../../package.json');
 
 // build configuration files
-const js = require('./js/js.config.js');        // all js file related build configurations
-const css = require('./css/css.config.js');     // all css file related build configurations
-const img = require('./img/img.config.js');     // all img/svg related build configurations
-const html = require('./html/html.config.js');  // all html related build configurations
-const font = require('./font/font.config.js');  // all font related build configurations
+const js = require('./js/js.config.js');                // all js file related build configurations
+const css = require('./css/css.config.js');             // all css file related build configurations
+const img = require('./img/img.config.js');             // all img/svg related build configurations
+const html = require('./html/html.config.js');          // all html related build configurations
+const font = require('./font/font.config.js');          // all font related build configurations
 const alias = require('./webpack/alias.config.js');     // all file path alias helper configurations
 const stats = require('./webpack/stats.config.js');     // all terminal stats configurations
 const server = require('./webpack/server.config.js');   // all webpack-dev-server configurations

build/configs/guide.config.js

@@ -6,9 +6,10 @@
 // devDependencies
 const fs = require('fs');
 const path = require('path');
+const exec = require('child_process').exec;
 const Package = require('../../package.json');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 // build configuration files
 const js = require('./js/js.config.js');        // all js file related build configurations
@@ -50,11 +51,15 @@ const config = {
     ...stats.plugins, // see build/configs/stats.config.js
     new CopyWebpackPlugin([ // react-routes rewrite files for hosting guide on remote a web server.
       {
-        from: path.resolve(
+        from: path.resolve(__dirname, `../../${Package.directories.dest}`),
+        to: path.resolve(__dirname, `../../dist`)
+      },
+      {
+        'from': path.resolve(
           __dirname,
           `../scaffolding/${(Package.remote.type !== 'IIS') ? '.htaccess' : 'web.config'}`
-        ), // for IIS servers
-        to: path.resolve(__dirname, `../../${Package.directories.dest}`)
+        ),
+        'to': path.resolve(__dirname, `../../${Package.directories.dest}`)
       }
     ])
   ],
@@ -75,13 +80,12 @@ const config = {
 module.exports = (env, argv) => {
   if (fs.existsSync(path.resolve(__dirname, `../../${Package.directories.dest}`))) {
     config.plugins.push(
-      new CleanWebpackPlugin(
-        [`${config.output.path}`], // reuse config output path from above
-        {
-          'root': path.resolve(config.output.path, '../') // focus plugins root out of build/config/
-        }
-      )
+      new CleanWebpackPlugin({
+        cleanStaleWebpackAssets: false                 // resolve conflict with `CopyWebpackPlugin`
+      })
     );
+  } else {
+    exec('npm run build');                             // when missing a required "first time build"
   }
 
   return config;

build/configs/img/img.config.js

@@ -9,7 +9,7 @@ const WebpackSvgSpritely = require('webpack-svg-spritely');
 // all image types get ran through these process
 module.exports = {
   config: [{
-    'test': /\.(jpe?g|png|gif|svg)$/i,
+    'test': /\.(jpe?g|png|gif|svg|ico)$/i,
     'exclude': /node_modules/,
     'include': [
       path.resolve(__dirname, '../../../src'),

build/configs/webpack/alias.config.js

@@ -16,12 +16,17 @@ module.exports = {
     '@guide': path.resolve(__dirname, '../../../build/guide/'),
     '@atoms': path.resolve(__dirname, '../../../src/elements/atoms/'),
     '@pages': path.resolve(__dirname, '../../../src/pages/'),
-    '@tools': path.resolve(__dirname, '../../../build/guide/tools/'),
     '@elements': path.resolve(__dirname, '../../../src/elements/'),
     '@molecules': path.resolve(__dirname, '../../../src/elements/molecules/'),
     '@organisms': path.resolve(__dirname, '../../../src/elements/organisms/'),
     '@modifiers': path.resolve(__dirname, '../../../src/elements/modifiers/'),
     '@templates': path.resolve(__dirname, '../../../src/elements/templates/'),
+    '@tools': path.resolve(__dirname, '../../guide/src/tools/'),
+    '@guideAtoms': path.resolve(__dirname, '../../guide/src/elements/atoms/'),
+    '@guideAssets': path.resolve(__dirname, '../../guide/assets/'),
+    '@guideMolecules': path.resolve(__dirname, '../../guide/src/elements/molecules/'),
+    '@guideModifiers': path.resolve(__dirname, '../../guide/src/elements/modifiers/'),
+    '@guideOrganisms': path.resolve(__dirname, '../../guide/src/elements/organisms/'),
     '@sly': path.resolve(__dirname, '../../../src/elements/modifiers/Sly/Sly'),
     Utils: path.resolve(__dirname, '../../../src/utilities.jsx'),
     GuideUtils: path.resolve(__dirname, '../../guide/guide.utilities.jsx')

build/guide.jsx

@@ -8,4 +8,14 @@ import '@guide/guide.parts';
 import '@guide/styles'; // see ./build/guide/styles.css
 import '@guide/scripts'; // see ./guide/guide/scripts.jsx
 
+const requireAll = (context) => context.keys().map(context);
+
+requireAll(
+  require.context(
+    '@guide/src/elements/',
+    true,
+    /^(?!.*Root).*\/(?!.*RichText).*\/(?!.*font-face).*\.css$/
+  )
+);
+
 require('es6-object-assign').polyfill();

build/guide/guide.parts.jsx

@@ -15,7 +15,7 @@ const readDirectory = (context) => {
 
 const getJSXDocs = (name) => {
   const allJSXDocs = require.context(
-    '!!./plugins/webpack.jsxdocgen.loader!../../src/elements/',
+    '!!../configs/webpack/webpack.jsxdocgen.loader!../../src/elements/',
     true,
     /^((?!test|example).)*jsx$/
   );
@@ -32,7 +32,7 @@ const getJSXDocs = (name) => {
 
 const getJSDocs = (name) => {
   const allJSDocs = require.context(
-    '!!./plugins/webpack.jsdocgen.loader?htmlDescription!../../src/elements/',
+    '!!../configs/webpack/webpack.jsdocgen.loader?htmlDescription!../../src/elements/',
     true,
     /^.*\.(js)$/
   );

build/guide/guide.router.jsx

@@ -1,7 +1,8 @@
-import Nav from '@guide/partials/nav/guide__nav';
-import Welcome from '@guide/partials/welcome/guide__welcome';
-import Examples from '@guide/partials/examples/guide__examples';
-import { Guide__pages, BadAddress } from '@guide/partials/pages/guide__pages';
+import Nav from '@guideMolecules/Nav/Nav';
+import Examples from '@guideMolecules/Examples/Examples';
+
+import Dashboard from '@guideOrganisms/Dashboard/Dashboard';
+import { Pages, BadAddress } from '@guideOrganisms/Pages/Pages';
 
 export const Guide = (props) => {
   const {
@@ -21,11 +22,11 @@ export const Guide = (props) => {
       <ReactRouterDOM.BrowserRouter>
         <div className="guide__main">
           <ReactRouterDOM.Switch>
-            <ReactRouterDOM.Route exact path="/" component={Welcome} />
-            <ReactRouterDOM.Route exact path="/examples" component={Welcome} />
+            <ReactRouterDOM.Route exact path="/" component={Dashboard} />
+            <ReactRouterDOM.Route exact path="/examples" component={Dashboard} />
             <ReactRouterDOM.Route path="/examples/:category/:element" component={Examples} />
-            <ReactRouterDOM.Route path="/pages/:page" component={Guide__pages} />
-            <ReactRouterDOM.Route path="/tools/:tool" component={Guide__pages} />
+            <ReactRouterDOM.Route path="/pages/:page" component={Pages} />
+            <ReactRouterDOM.Route path="/tools/:tool" component={Pages} />
             <ReactRouterDOM.Route component={BadAddress} />
           </ReactRouterDOM.Switch>
           <Nav />

build/guide/scripts.jsx

@@ -9,15 +9,22 @@
 import Sly from '@modifiers/Sly/Sly.container';
 import Guide from '@guide/guide.router';
 import Package from '@root/package.json';
-import GuideNav from '@guide/partials/nav/guide__nav.container';
-import GuideIcons from '@guide/partials/icons/guide__icons.container';
-import GuideColors from '@guide/partials/colors/guide__colors.container';
-import GuideReadme from '@guide/partials/readme/guide__readme.container';
-import GuideWelcome from '@guide/partials/welcome/guide__welcome.container';
-import GuideMetrics from '@guide/partials/metrics/guide__metrics.container';
-import GuideStylist from '@guide/partials/stylist/guide__stylist.container';
-import GuideExamples from '@guide/partials/examples/guide__examples.container';
-import GuideTypography from '@guide/partials/typography/guide__typography.container';
+
+import GuideNav from '@guideMolecules/Nav/Nav.Container';
+import GuideReadme from '@guideMolecules/Readme/Readme.Container';
+import GuideStylist from '@guideMolecules/Stylist/Stylist.Container';
+import GuideExamples from '@guideMolecules/Examples/Examples.Container';
+
+import GuideIcons from '@guideOrganisms/Icons/Icons.Container';
+import GuideColors from '@guideOrganisms/Colors/Colors.Container';
+import GuideMetrics from '@guideOrganisms/Metrics/Metrics.Container';
+import GuideDashboard from '@guideOrganisms/Dashboard/Dashboard.Container';
+import GuideTypography from '@guideOrganisms/Typography/Typography.Container';
+
+import GuideForm from '@guideAtoms/Form/Form.Container.js';
+import GuideInput from '@guideAtoms/Input/Input.Container.js';
+import GuideSelect from '@guideAtoms/Select/Select.Container.js';
+import GuideTextarea from '@guideAtoms/Textarea/Textarea.Container.js';
 
 // Set page title based on package config
 document.head.querySelector('title').innerText = `${Package.name} ${Package.version}`;
@@ -28,13 +35,18 @@ ReactDOM.render(<Guide />, document.querySelector('#index'), () => {
   document.addEventListener('DOMContentLoaded', () => {
     Utils.initComponent('Sly', 'sly', Sly);
     Utils.initComponent('GuideNav', '.guide__nav', GuideNav);
-    Utils.initComponent('GuideExamples', '.guide__examples', GuideExamples);
     Utils.initComponent('GuideIcons', '.guide__icons', GuideIcons);
     Utils.initComponent('GuideColors', '.guide__colors', GuideColors);
-    Utils.initComponent('GuideStylist', '.guide__stylist', GuideStylist);
     Utils.initComponent('GuideReadme', '.guide__readme', GuideReadme);
-    Utils.initComponent('GuideWelcome', '.guide__welcome', GuideWelcome);
+    Utils.initComponent('GuideStylist', '.guide__stylist', GuideStylist);
     Utils.initComponent('GuideMetrics', '.guide__metrics', GuideMetrics);
+    Utils.initComponent('GuideExamples', '.guide__examples', GuideExamples);
+    Utils.initComponent('GuideDashboard', '.guide__dashboard', GuideDashboard);
     Utils.initComponent('GuideTypography', '.guide__typography', GuideTypography);
+
+    Utils.initComponent('GuideForm', '.guide__form', GuideForm);
+    Utils.initComponent('GuideInput', '.guide__input', GuideInput);
+    Utils.initComponent('GuideSelect', '.guide__select', GuideSelect);
+    Utils.initComponent('GuideTextarea', '.guide__textarea', GuideTextarea);
   }, false);
 });

build/guide/src/elements/atoms/Button/Button.css

@@ -0,0 +1,49 @@
+.button {
+  cursor: pointer;
+  display: inline-block;
+  line-height: normal;
+  padding: rem(16px) rem(24px);
+
+  & + .button {
+    margin-left: rem(16px);
+  }
+
+  /* variants */
+  &--default {
+    background-color: var(--color-white);
+    border: 2px solid var(--color-black);
+    color: var(--color-black);
+
+    &:--enter {
+      background-color: var(--color-black);
+      color: var(--color-white);
+      fill: var(--color-white);
+    }
+  }
+
+  &--cta {
+    background-color: var(--color-white);
+    border: 2px solid red;
+    color: red;
+
+    &:--enter {
+      background-color: var(--color-red);
+      color: var(--color-white);
+    }
+  }
+
+  &--link {
+    text-decoration: none;
+  }
+
+  /* sizes */
+  &--auto {
+    display: inline-block;
+    width: auto;
+  }
+
+  &--full {
+    display: block;
+    width: 100%;
+  }
+}