Merge pull request #4 from xidedix/master-dist

minor fixes

.gitignore

@@ -0,0 +1,18 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+Thumbs.db
+.env
+.idea
+npm-debug.log
+compilation-stats.json

CHANGELOG.md

@@ -1,4 +1,9 @@
-## Changelog CoreUI react 
+## Changelog [react](./REACT.md) version
+
+### 2017.08.24
+- webpack.config env.prod
+- Dashboard .dropdown-menu-right temp.scss hotfix (full)
+- callout.scss .chart-wrapper hotfix (full)
 
 ### 2017.08.11
 - Bootstrap 4 beta

REACT.md

@@ -1,4 +1,4 @@
-# CoreUI React version
+# React version
 
 ## Intro 
 
@@ -27,4 +27,10 @@ public/img (images)
 
 **npm run clean** to clean build dir
 
-**npm run dev** to run a dev build with watching filesystem for changes 
+**npm run dev** to run a dev build with watching filesystem for changes 
+
+
+## See also
+
+[Changelog](./CHANGELOG.md)
+[Readme](./README.md)

React_Full_Project/.gitignore

@@ -11,6 +11,8 @@ build
 
 # misc
 .DS_Store
+Thumbs.db
 .env
 .idea
 npm-debug.log
+compilation-stats.json

React_Full_Project/package.json

@@ -9,14 +9,14 @@
   "private": true,
   "homepage": ".",
   "devDependencies": {
-    "babel-core": "^6.25.0",
-    "babel-loader": "^7.1.1",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "copy-webpack-plugin": "^4.0.1",
     "css-hot-loader": "^1.3.0",
-    "css-loader": "^0.28.4",
+    "css-loader": "^0.28.5",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^0.11.2",
     "html-loader": "^0.5.1",
@@ -26,29 +26,29 @@
     "sass-loader": "^6.0.6",
     "source-list-map": "^2.0.0",
     "style-loader": "^0.18.2",
-    "uglify-js": "^3.0.27",
+    "uglify-js": "^3.0.28",
     "url-loader": "^0.5.9",
-    "webpack": "^3.5.3",
+    "webpack": "^3.5.5",
     "webpack-dev-server": "^2.7.1"
   },
   "dependencies": {
     "bootstrap": "^4.0.0-beta",
     "chart.js": "2.6.0",
     "font-awesome": "^4.7.0",
-    "history": "4.6.3",
+    "history": "4.7.2",
     "react": "^15.6.1",
     "react-addons-css-transition-group": "^15.6.0",
     "react-addons-transition-group": "^15.6.0",
-    "react-chartjs-2": "2.5.6",
+    "react-chartjs-2": "2.6.1",
     "react-dom": "^15.6.1",
-    "react-router-dom": "4.1.2",
+    "react-router-dom": "4.2.0",
     "reactstrap": "^4.8.0",
     "simple-line-icons": "^2.4.1"
   },
   "scripts": {
-    "dev": "webpack -d --progress --watch",
-    "start": "webpack-dev-server --env.dev --open --hot --progress --colors --inline",
-    "build": "webpack -p --progress",
+    "dev": "webpack -d --progress --watch --profile --json > compilation-stats.json --env.dev",
+    "start": "webpack-dev-server --progress --colors --inline --env.dev",
+    "build": "webpack -p --progress --env.prod",
     "clean": "rimraf ./build"
   },
   "engines": {

React_Full_Project/scss/core/_callout.scss

@@ -12,9 +12,9 @@
   .chart-wrapper {
     position: absolute;
     top: 18px;
-    left: 45%;
+    left: 50%;
     float: right;
-    width: 100px;
+    width: 60%;
   }
 }
 

React_Full_Project/scss/core/_temp.scss

@@ -12,7 +12,7 @@
   border-radius: 1rem !important;
 }
 
-// temp fix for Vue-Strap
+// temp fix for Vue & React
 
 // Open state for the dropdown
 .open, .show {
@@ -20,7 +20,10 @@
   > .dropdown-menu {
     display: block;
   }
-
+  > .dropdown-menu-right {
+    right: 0;
+    left: auto; // Reset the default from `.dropdown-menu`
+  }
   // Remove the outline when :focus is triggered
   > a {
     outline: 0;

React_Full_Project/src/components/Breadcrumb/Breadcrumb.js

@@ -15,7 +15,6 @@ const getPaths = (pathname) => {
     paths.push(currPath);
     return currPath;
   });
-  console.log(paths);
   return paths;
 };
 
@@ -41,7 +40,6 @@ const BreadcrumbsItem = ({...rest, match}) => {
 
 const Breadcrumbs = ({...rest, location : {pathname}, match}) => {
   const paths = getPaths(pathname);
-  // const i = 0;
   const items = paths.map((path, i) => <Route key={i++} path={path} component={BreadcrumbsItem}/>);
   return (
     <Breadcrumb>

React_Full_Project/src/components/Sidebar/Sidebar.js

@@ -38,7 +38,7 @@ class Sidebar extends Component {
     };
 
     // simple wrapper for nav-title item
-    const wrapper = item => { return (!item.wrapper ? item.name : (React.createElement(item.wrapper.element, item.wrapper.attributes, item.name))) };
+    const wrapper = item => { return (item.wrapper && item.wrapper.element ? (React.createElement(item.wrapper.element, item.wrapper.attributes, item.name)): item.name ) };
 
     // nav list section title
     const title =  (title, key) => {

React_Full_Project/src/components/Sidebar/_nav.js

@@ -13,10 +13,10 @@ export default {
       title: true,
       name: 'UI elements',
       wrapper: {            // optional wrapper object
-        element: "span",      // required valid HTML5 element tag
+        element: '',        // required valid HTML5 element tag
         attributes: {}        // optional valid JS object with JS API naming ex: { className: "my-class", style: { fontFamily: "Verdana" }, id: "my-id"}
       },
-      class: ""             // optional class names space delimited list for title item ex: "text-center"
+      class: ''             // optional class names space delimited list for title item ex: "text-center"
     },
     {
       name: 'Components',

React_Full_Project/src/containers/Full/Full.js

@@ -9,6 +9,8 @@ import Footer from '../../components/Footer/';
 import Dashboard from '../../views/Dashboard/';
 import Charts from '../../views/Charts/';
 import Widgets from '../../views/Widgets/';
+
+// Components
 import Buttons from '../../views/Components/Buttons/';
 import Cards from '../../views/Components/Cards/';
 import Forms from '../../views/Components/Forms/';
@@ -17,6 +19,8 @@ import SocialButtons from '../../views/Components/SocialButtons/';
 import Switches from '../../views/Components/Switches/';
 import Tables from '../../views/Components/Tables/';
 import Tabs from '../../views/Components/Tabs/';
+
+// Icons
 import FontAwesome from '../../views/Icons/FontAwesome/';
 import SimpleLineIcons from '../../views/Icons/SimpleLineIcons/';
 

React_Full_Project/src/index.js

@@ -32,4 +32,4 @@ ReactDOM.render((
       <Route path="/" name="Home" component={Full}/>
     </Switch>
   </HashRouter>
-), document.getElementById('root'));
+), document.getElementById('root'));

React_Full_Project/webpack.config.js

@@ -13,98 +13,100 @@ const SRC_DIR = path.resolve(__dirname, 'src');
 console.log('BUILD_DIR', BUILD_DIR);
 console.log('SRC_DIR', SRC_DIR);
 
-module.exports = {
-  entry: {
-    index: [SRC_DIR + '/index.js']
-	},
-  output: {
-    path: BUILD_DIR,
-    filename: '[name].bundle.js'
-  },
-  watch: true,
-  devServer: {
-    contentBase: BUILD_DIR,
-    //   port: 9001,
-    compress: true,
-    hot: true,
-    open: true
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            cacheDirectory: true,
-            presets: ['react', 'env']
+module.exports = (env = {}) => {
+  return {
+    entry: {
+      index: [SRC_DIR + '/index.js']
+    },
+    output: {
+      path: BUILD_DIR,
+      filename: '[name].bundle.js'
+    },
+    // watch: true,
+    devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
+    devServer: {
+      contentBase: BUILD_DIR,
+      //   port: 9001,
+      compress: true,
+      hot: true,
+      open: true
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(js|jsx)$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              cacheDirectory: true,
+              presets: ['react', 'env']
+            }
           }
-        }
-      },
-      {
-        test: /\.html$/,
-        loader: 'html-loader'
-      },
-      {
-        test: /\.(scss)$/,
-        use: ['css-hot-loader'].concat(extractSCSS.extract({
-          fallback: 'style-loader',
+        },
+        {
+          test: /\.html$/,
+          loader: 'html-loader'
+        },
+        {
+          test: /\.(scss)$/,
+          use: ['css-hot-loader'].concat(extractSCSS.extract({
+            fallback: 'style-loader',
+            use: [
+              {
+                loader: 'css-loader',
+                options: {alias: {'../img': '../public/img'}}
+              },
+              {
+                loader: 'sass-loader'
+              }
+            ]
+          }))
+        },
+        {
+          test: /\.css$/,
+          use: extractCSS.extract({
+            fallback: 'style-loader',
+            use: 'css-loader'
+          })
+        },
+        {
+          test: /\.(png|jpg|jpeg|gif|ico)$/,
           use: [
             {
-              loader: 'css-loader',
-              options: { alias: { '../img': '../public/img' } }
-            },
-            {
-              loader: 'sass-loader'
+              // loader: 'url-loader'
+              loader: 'file-loader',
+              options: {
+                name: './img/[name].[hash].[ext]'
+              }
             }
           ]
-        }))
-      },
-      {
-        test: /\.css$/,
-        use: extractCSS.extract({
-          fallback: 'style-loader',
-          use: 'css-loader'
-        })
-      },
-      {
-        test: /\.(png|jpg|jpeg|gif|ico)$/,
-        use: [
-          {
-            // loader: 'url-loader'
-            loader: 'file-loader',
-            options: {
-              name: './img/[name].[hash].[ext]'
-            }
+        },
+        {
+          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+          loader: 'file-loader',
+          options: {
+            name: './fonts/[name].[hash].[ext]'
           }
-        ]
-      },
-      {
-        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'file-loader',
-        options: {
-          name: './fonts/[name].[hash].[ext]'
+        }]
+    },
+    plugins: [
+      new webpack.HotModuleReplacementPlugin(),
+      new webpack.optimize.UglifyJsPlugin({sourceMap: true}),
+      new webpack.NamedModulesPlugin(),
+      extractCSS,
+      extractSCSS,
+      new HtmlWebpackPlugin(
+        {
+          inject: true,
+          template: './public/index.html'
         }
-      }]
-  },
-  plugins: [
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.optimize.UglifyJsPlugin(),
-    new webpack.NamedModulesPlugin(),
-    extractCSS,
-    extractSCSS,
-    new HtmlWebpackPlugin(
-      {
-        inject: true,
-        template: './public/index.html'
-      }
-    ),
-    new CopyWebpackPlugin([
-        {from: './public/img', to: 'img'}
-      ],
-      {copyUnmodified: false}
-    )
-  ]
-}
-;
+      ),
+      new CopyWebpackPlugin([
+          {from: './public/img', to: 'img'}
+        ],
+        {copyUnmodified: false}
+      )
+    ]
+  }
+};

React_Starter/.gitignore

@@ -11,6 +11,8 @@ build
 
 # misc
 .DS_Store
+Thumbs.db
 .env
 .idea
 npm-debug.log
+compilation-stats.json

React_Starter/CHANGELOG.md

@@ -1,13 +0,0 @@
-## Changelog CoreUI react 
-
-### 2017.08.01
-- Sidebar component: 
-	- title item with optional wrapper and class (_nav.js)
-	- nav link item with optional badge
-	- code refactoring
-
-### 2017.07.31
-- moved to [reactstrap](https://reactstrap.github.io/)
-- moved to [webpack](https://webpack.js.org/) (dropping gulp)
-- data driven Sidebar component (_nav.js)
-

React_Starter/CORE_REACT.md

@@ -1,30 +0,0 @@
-# CoreUI React version
-
-## Intro 
-
-It uses Sass (with .scss). The style is loaded at the component level.
-
-Dependencies can be handled by **npm**.
-
-## Directories
-
-```
-src (js|jsx source)
-scss (scss source)
-public (html template)
-public/img (images)
-```
-
-## Usage
-
-**npm i** - to install dependencies
-
-## Sctipts
-
-**npm start** for developing (it runs webpack-dev-server)
-
-**npm run build** to run a dev build
-
-**npm run clean** to clean build dir
-
-**npm run dev** to run a dev build with watching filesystem for changes 

React_Starter/package.json

@@ -9,14 +9,14 @@
   "private": true,
   "homepage": ".",
   "devDependencies": {
-    "babel-core": "^6.25.0",
-    "babel-loader": "^7.1.1",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "copy-webpack-plugin": "^4.0.1",
     "css-hot-loader": "^1.3.0",
-    "css-loader": "^0.28.4",
+    "css-loader": "^0.28.5",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^0.11.2",
     "html-loader": "^0.5.1",
@@ -26,29 +26,29 @@
     "sass-loader": "^6.0.6",
     "source-list-map": "^2.0.0",
     "style-loader": "^0.18.2",
-    "uglify-js": "^3.0.27",
+    "uglify-js": "^3.0.28",
     "url-loader": "^0.5.9",
-    "webpack": "^3.5.3",
+    "webpack": "^3.5.5",
     "webpack-dev-server": "^2.7.1"
   },
   "dependencies": {
     "bootstrap": "^4.0.0-beta",
     "chart.js": "2.6.0",
     "font-awesome": "^4.7.0",
-    "history": "4.6.3",
+    "history": "4.7.2",
     "react": "^15.6.1",
     "react-addons-css-transition-group": "^15.6.0",
     "react-addons-transition-group": "^15.6.0",
-    "react-chartjs-2": "2.5.6",
+    "react-chartjs-2": "2.6.1",
     "react-dom": "^15.6.1",
-    "react-router-dom": "4.1.2",
+    "react-router-dom": "4.2.0",
     "reactstrap": "^4.8.0",
     "simple-line-icons": "^2.4.1"
   },
   "scripts": {
-    "dev": "webpack -d --progress --watch",
-    "start": "webpack-dev-server --env.dev --open --hot --progress --colors --inline",
-    "build": "webpack -p --progress",
+    "dev": "webpack -d --progress --watch --profile --json > compilation-stats.json --env.dev",
+    "start": "webpack-dev-server --progress --colors --inline --env.dev",
+    "build": "webpack -p --progress --env.prod",
     "clean": "rimraf ./build"
   },
   "engines": {

React_Starter/scss/core/_callout.scss

@@ -12,9 +12,9 @@
   .chart-wrapper {
     position: absolute;
     top: 18px;
-    left: 45%;
+    left: 50%;
     float: right;
-    width: 100px;
+    width: 60%;
   }
 }
 

React_Starter/scss/core/_temp.scss

@@ -12,7 +12,7 @@
   border-radius: 1rem !important;
 }
 
-// temp fix for Vue-Strap
+// temp fix for Vue & React
 
 // Open state for the dropdown
 .open, .show {
@@ -20,7 +20,10 @@
   > .dropdown-menu {
     display: block;
   }
-
+  > .dropdown-menu-right {
+    right: 0;
+    left: auto; // Reset the default from `.dropdown-menu`
+  }
   // Remove the outline when :focus is triggered
   > a {
     outline: 0;

React_Starter/webpack.config.js

@@ -13,98 +13,100 @@ const SRC_DIR = path.resolve(__dirname, 'src');
 console.log('BUILD_DIR', BUILD_DIR);
 console.log('SRC_DIR', SRC_DIR);
 
-module.exports = {
-  entry: {
-    index: [SRC_DIR + '/index.js']
-	},
-  output: {
-    path: BUILD_DIR,
-    filename: '[name].bundle.js'
-  },
-  watch: true,
-  devServer: {
-    contentBase: BUILD_DIR,
-    //   port: 9001,
-    compress: true,
-    hot: true,
-    open: true
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            cacheDirectory: true,
-            presets: ['react', 'env']
+module.exports = (env = {}) => {
+  return {
+    entry: {
+      index: [SRC_DIR + '/index.js']
+    },
+    output: {
+      path: BUILD_DIR,
+      filename: '[name].bundle.js'
+    },
+    // watch: true,
+    devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
+    devServer: {
+      contentBase: BUILD_DIR,
+      //   port: 9001,
+      compress: true,
+      hot: true,
+      open: true
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(js|jsx)$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              cacheDirectory: true,
+              presets: ['react', 'env']
+            }
           }
-        }
-      },
-      {
-        test: /\.html$/,
-        loader: 'html-loader'
-      },
-      {
-        test: /\.(scss)$/,
-        use: ['css-hot-loader'].concat(extractSCSS.extract({
-          fallback: 'style-loader',
+        },
+        {
+          test: /\.html$/,
+          loader: 'html-loader'
+        },
+        {
+          test: /\.(scss)$/,
+          use: ['css-hot-loader'].concat(extractSCSS.extract({
+            fallback: 'style-loader',
+            use: [
+              {
+                loader: 'css-loader',
+                options: {alias: {'../img': '../public/img'}}
+              },
+              {
+                loader: 'sass-loader'
+              }
+            ]
+          }))
+        },
+        {
+          test: /\.css$/,
+          use: extractCSS.extract({
+            fallback: 'style-loader',
+            use: 'css-loader'
+          })
+        },
+        {
+          test: /\.(png|jpg|jpeg|gif|ico)$/,
           use: [
             {
-              loader: 'css-loader',
-              options: { alias: { '../img': '../public/img' } }
-            },
-            {
-              loader: 'sass-loader'
+              // loader: 'url-loader'
+              loader: 'file-loader',
+              options: {
+                name: './img/[name].[hash].[ext]'
+              }
             }
           ]
-        }))
-      },
-      {
-        test: /\.css$/,
-        use: extractCSS.extract({
-          fallback: 'style-loader',
-          use: 'css-loader'
-        })
-      },
-      {
-        test: /\.(png|jpg|jpeg|gif|ico)$/,
-        use: [
-          {
-            // loader: 'url-loader'
-            loader: 'file-loader',
-            options: {
-              name: './img/[name].[hash].[ext]'
-            }
+        },
+        {
+          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+          loader: 'file-loader',
+          options: {
+            name: './fonts/[name].[hash].[ext]'
           }
-        ]
-      },
-      {
-        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'file-loader',
-        options: {
-          name: './fonts/[name].[hash].[ext]'
+        }]
+    },
+    plugins: [
+      new webpack.HotModuleReplacementPlugin(),
+      new webpack.optimize.UglifyJsPlugin({sourceMap: true}),
+      new webpack.NamedModulesPlugin(),
+      extractCSS,
+      extractSCSS,
+      new HtmlWebpackPlugin(
+        {
+          inject: true,
+          template: './public/index.html'
         }
-      }]
-  },
-  plugins: [
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.optimize.UglifyJsPlugin(),
-    new webpack.NamedModulesPlugin(),
-    extractCSS,
-    extractSCSS,
-    new HtmlWebpackPlugin(
-      {
-        inject: true,
-        template: './public/index.html'
-      }
-    ),
-    new CopyWebpackPlugin([
-        {from: './public/img', to: 'img'}
-      ],
-      {copyUnmodified: false}
-    )
-  ]
-}
-;
+      ),
+      new CopyWebpackPlugin([
+          {from: './public/img', to: 'img'}
+        ],
+        {copyUnmodified: false}
+      )
+    ]
+  }
+};