CoreUI-React initial commit v2.0.0-alpha.1

.babelrc

@@ -1,6 +0,0 @@
-{
-  "presets": [
-    ["react"], ["env"]
-  ],
-  "plugins": ["transform-object-rest-spread"]
-}

.gitignore

@@ -1,19 +1,22 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
+# See https://help.github.com/ignore-files/ for more about ignoring files.
 
 # dependencies
-node_modules
+/node_modules
-package-lock.json
 
 # testing
-coverage
+/coverage
 
 # production
-build
+/build
 
 # misc
 .DS_Store
-Thumbs.db
-.env
 .idea
-npm-debug.log
+.env.local
-compilation-stats.json
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

CHANGELOG.md

@@ -1,5 +1,11 @@
 ## [react](./REACT.md) version `changelog`
 
+##### `v2.0.0-alpha.1`
+- refactor: separation of concerns - (CoreUI template vs CoreUI components) prepare to use CoreUI as dependency
+- refactor: project structure change
+- refactor: moved to [Create-React-App](CRA.md)
+- chore: moved to [Semantic Versioning](https://semver.org/)
+
 ##### `v1.0.10`
 - refactor: `<InputGroupAddon addonType="prepend">`
 - refactor: `<InputGroupAddon addonType="append">`

REACT.md

@@ -1,29 +1,31 @@
-# React version
+# CoreUI React version
 
 ## Intro 
-It uses Sass (with .scss). The style is loaded at the component level.
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app)
 
-Dependencies can be handled by **npm**.
+It uses Sass (with .scss). The styles are loaded at the template level
+
+Dependencies are handled by **npm**.
 
 ## Directories
 ```
-React_Full_Project/
+CoreUI-React#v2.0.0
-├── src/         (js|jsx source)
-├── scss/        (scss source)
 ├── public/      (html template)
-    ├── img/     (images)
+    ├── assets/  (static assets)
+├── src/             (project root)
+    ├── containers/  (container source)
+    ├── scss/        (scss/css source)
+    ├── views/       (views source)
 ```
 
 ## Usage
-**npm i** - to install dependencies
+`npm i` - to install dependencies
 
 ## Sctipts 
-**npm start** for developing (it runs webpack-dev-server)  
+`npm start` for developing (it runs webpack-dev-server)  
-**npm run build** to run a dev build  
+`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  
 
 ## See also
-
+[Create-React-App](CRA.md)
 [Changelog](./CHANGELOG.md)  
 [Readme](./README.md)

README.md

@@ -1,69 +0,0 @@
-# CoreUI React - Free Bootstrap Admin Template [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%20React%20Admin%20Template%20&url=http://coreui.io/react/&hashtags=bootstrap,admin,template,dashboard,panel,free,angular,react,vue)
-
-### Check out our React Admin Templates and support CoreUI Development
-
-[![Bootstrap Admin Templates Bundle](https://genesisui.com/img/bundle2.png)](https://genesisui.com/bundle.html?support=1)
-
-[Check out React Admin Templates Bundle](https://genesisui.com/bundle.html?support=1)
-
-This is React.js version of our Bootstrap 4 admin template [CoreUI](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template).
-
-Please help us on [Product Hunt](https://www.producthunt.com/posts/coreui-open-source-bootstrap-4-admin-template-with-angular-2-react-js-vue-js-support) & [Designer News](https://www.designernews.co/stories/81127). Thanks in advance!
-
-Why I decided to create CoreUI? Please read this article: [Jack of all trades, master of none. Why Boostrap Admin Templates suck.](https://medium.com/@lukaszholeczek/jack-of-all-trades-master-of-none-5ea53ef8a1f#.7eqx1bcd8)
-
-CoreUI is an Open Source React & Bootstrap Admin Template. But CoreUI is not just another Admin Template. It goes way beyond hitherto admin templates thanks to transparent code and file structure. And if that's not enough, let’s just add that CoreUI consists bunch of unique features and over 1000 high quality icons.
-
-CoreUI is based on Bootstrap 4 and offers 6 versions: [HTML5 AJAX](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template), [HTML5 Static](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template), [AngularJS](https://github.com/mrholek/CoreUI-AngularJS), [Angular 2+](https://github.com/mrholek/CoreUI-Angular), [React.js](https://github.com/mrholek/CoreUI-React) & [Vue.js](https://github.com/mrholek/CoreUI-Vue).
-
-CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer ultimate user experience. This means mobile devices also, where the navigation is just as easy and intuitive as on a desktop or laptop. The CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web or WebApp – CoreUI covers them all!
-
-[![CoreUI React Free Bootstrap Admin Template](http://coreui.io/assets/img/coreui.png "CoreUI React Free Bootstrap Admin Template")](http://coreui.io)
-
-**NOTE:** Please remember to **STAR** this project and **FOLLOW** [my Github](https://github.com/mrholek) to keep you update with this template.
-
-## Demo
-
-A fully functional demo is available at [CoreUI](http://coreui.io/)
-
-## What's included
-
-Within the download you'll find the following directories and files, You'll see something like this:
-
-```
-CoreUI-React/
-├── React_Full_Project/
-├── React_Starter/
-
-```
-
-## Other Versions
-
-CoreUI includes 6 Version for Angular 4, AngularJS, React.js, Vue.js, Static HTML5 and AJAX HTML5.
-
-* [Angular Version (Angular 2+)](https://github.com/mrholek/CoreUI-Angular).
-* [AngularJS Version](https://github.com/mrholek/CoreUI-AngularJS).
-* [HTML5 AJAX Version](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template).
-* [HTML5 Static Version](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template).
-* [React.js Version](https://github.com/mrholek/CoreUI-React).
-* [Vue.js Version](https://github.com/mrholek/CoreUI-Vue).
-
-## Bugs and feature requests
-
-Have a bug or a feature request? [Please open a new issue](https://github.com/mrholek/CoreUI-React/issues/new).
-
-## Documentation
-
-CoreUI's documentation, is hosted on our website [CoreUI](http://coreui.io/)
-
-
-## Copyright and license
-
-copyright 2017 creativeLabs Łukasz Holeczek. Code released under [the MIT license](https://github.com/mrholek/CoreUI-React/blob/master/LICENSE).
-creativeLabs Łukasz Holeczek reserves the right to change the license of future releases. You can’t re-distribute the CoreUI as stock. You can’t do this if you modify the CoreUI.
-
-## Support CoreUI Development
-
-CoreUI is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by donating on [PayPal](https://www.paypal.me/holeczek) or buying one of our [premium bootstrap 4 admin templates](https://genesisui.com/?support=1).
-
-As of now I am exploring the possibility of working on CoreUI fulltime - if you are a business that is building core products using CoreUI, I am also open to conversations regarding custom sponsorship / consulting arrangements. Get in touch on [Twitter](https://twitter.com/lukaszholeczek).

package.json

@@ -1,57 +1,49 @@
 {
-  "name": "@coreui/react",
+  "name": "CoreUI-React",
-  "version": "1.0.10",
+  "version": "2.0.0-alpha.1",
-  "description": "Open Source Bootstrap Admin Template",
+  "description": "CoreUI React Open Source Bootstrap 4 Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "http://coreui.io",
   "copyright": "Copyright 2018 creativeLabs Łukasz Holeczek",
   "license": "MIT",
   "private": true,
-  "devDependencies": {
+  "repository": {
-    "babel-core": "6.26.0",
+    "type": "git",
-    "babel-loader": "7.1.2",
+    "url": "git@github.com:mrholek/CoreUI-React.git"
-    "babel-plugin-transform-object-rest-spread": "6.26.0",
-    "babel-preset-env": "1.6.1",
-    "babel-preset-react": "6.24.1",
-    "copy-webpack-plugin": "4.3.1",
-    "css-hot-loader": "1.3.6",
-    "css-loader": "0.28.9",
-    "extract-text-webpack-plugin": "3.0.2",
-    "file-loader": "1.1.6",
-    "html-loader": "0.5.5",
-    "html-webpack-plugin": "2.30.1",
-    "node-sass": "4.7.2",
-    "rimraf": "2.6.2",
-    "sass-loader": "6.0.6",
-    "source-list-map": "2.0.0",
-    "style-loader": "0.20.1",
-    "uglify-js": "3.3.9",
-    "url-loader": "0.6.2",
-    "webpack": "3.10.0",
-    "webpack-dev-server": "2.11.1"
   },
   "dependencies": {
+    "@coreui/styles": "git://github.com/coreui/styles.git",
+    "@coreui/react-dev": "git://github.com/coreui/react.git",
     "bootstrap": "4.0.0",
-    "chart.js": "2.7.1",
+    "chart.js": "2.7.2",
-    "flag-icon-css": "2.9.0",
+    "classnames": "^2.2.3",
-    "font-awesome": "4.7.0",
+    "flag-icon-css": "3.0.0",
-    "history": "4.7.2",
+    "font-awesome": "^4.7.0",
-    "react": "16.2.0",
+    "node-sass-chokidar": "^1.1.0",
+    "prop-types": "^15.5.8",
+    "react": "^16.2.0",
     "react-chartjs-2": "2.7.0",
-    "react-dom": "16.2.0",
+    "react-dom": "^16.2.0",
-    "react-router-dom": "4.2.2",
+    "react-router-config": "^1.0.0-beta.4",
-    "react-transition-group": "2.2.1",
+    "react-router-dom": "^4.2.2",
+    "react-scripts": "1.1.1",
     "reactstrap": "5.0.0-beta",
-    "simple-line-icons": "2.4.1"
+    "simple-line-icons": "^2.4.1"
+  },
+  "devDependencies": {
+    "npm-run-all": "^4.1.2"
   },
   "scripts": {
-    "dev": "webpack -d --progress --watch --profile --json > compilation-stats.json --env.dev",
+    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
-    "start": "webpack-dev-server --progress --color --inline --env.dev",
+    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
-    "build": "webpack -p --progress --env.prod",
+    "start-js": "react-scripts start",
-    "clean": "rimraf ./build"
+    "start": "npm-run-all -p watch-css start-js",
+    "build-js": "react-scripts build",
+    "build": "npm-run-all build-css build-js",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
   },
-  "engines": {
+  "bugs": {
-    "node": ">= 8.9.4",
+    "url": "https://github.com/mrholek/CoreUI-React/issues"
-    "npm": ">= 5.6.0"
   }
 }

public/index.html

@@ -1,14 +1,28 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
+    <meta name="description" content="%THEMENAME% - %THEMEDESC%">
     <meta name="author" content="Łukasz Holeczek">
-    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,AngularJS,Angular,Angular2,Angular 2,Angular4,Angular 4,jQuery,CSS,HTML,RWD,Dashboard,React,React.js,Vue,Vue.js">
+    <meta name="keyword" content="%THEMEKEYWORDS%">
-    <link rel="shortcut icon" href="img/favicon.png">
+    <title>%THEMENAME% - %THEMEDESC%</title>
-    <title>CoreUI - Open Source Bootstrap Admin Template</title>
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
   </head>
 
   <!-- BODY options, add following classes to body to change options
@@ -39,7 +53,10 @@
 
   -->
 
-  <body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden">
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
     <div id="root"></div>
     <!--
       This HTML file is a template.
@@ -48,8 +65,8 @@
       You can add webfonts, meta tags, or analytics to this file.
       The build step will place the bundled scripts into the <body> tag.
 
-      To begin the development, run `npm start`.
+      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build`.
+      To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
 </html>

public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "CoreUI-React",
+  "name": "CoreUI-React sample",
+  "icons": [
+    {
+      "src": "./assets/favicon.png",
+      "sizes": "100x100",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

src/App.css

@@ -0,0 +1 @@
+

src/App.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import { HashRouter, Route, Switch } from 'react-router-dom';
+import './App.css';
+// Styles
+// Import Flag Icons Set
+import 'flag-icon-css/css/flag-icon.min.css';
+// Import Font Awesome Icons Set
+import 'font-awesome/css/font-awesome.min.css';
+// Import Simple Line Icons Set
+import 'simple-line-icons/css/simple-line-icons.css';
+// Import Main styles for this application
+import './scss/style.css'
+// import '../node_modules/@coreui/styles/scss/_dropdown-menu-right.scss';
+
+// Containers
+import { Full } from './containers';
+// Pages
+import { Login, Page404, Page500, Register } from './views/Pages';
+
+// import { renderRoutes } from 'react-router-config';
+
+class App extends Component {
+  render() {
+    return (
+      <HashRouter>
+        <Switch>
+          <Route exact path="/login" name="Login Page" component={Login} />
+          <Route exact path="/register" name="Register Page" component={Register} />
+          <Route exact path="/404" name="Page 404" component={Page404} />
+          <Route exact path="/500" name="Page 500" component={Page500} />
+          <Route path="/" name="Home" component={Full} />
+        </Switch>
+      </HashRouter>
+    );
+  }
+}
+
+export default App;

src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/_nav.js

@@ -6,8 +6,8 @@ export default {
       icon: 'icon-speedometer',
       badge: {
         variant: 'info',
-        text: 'NEW'
+        text: 'NEW',
-      }
+      },
     },
     {
       title: true,
@@ -33,7 +33,7 @@ export default {
       name: 'Components',
       wrapper: {
         element: '',
-        attributes: {}
+        attributes: {},
       },
     },
     {
@@ -44,84 +44,84 @@ export default {
         {
           name: 'Breadcrumbs',
           url: '/base/breadcrumbs',
-          icon: 'icon-puzzle'
+          icon: 'icon-puzzle',
         },
         {
           name: 'Cards',
           url: '/base/cards',
-          icon: 'icon-puzzle'
+          icon: 'icon-puzzle',
         },
         {
           name: 'Carousels',
           url: '/base/carousels',
-          icon: 'icon-puzzle'
+          icon: 'icon-puzzle',
         },
         {
           name: 'Collapses',
           url: '/base/collapses',
-          icon: 'icon-puzzle'
+          icon: 'icon-puzzle',
         },
         {
           name: 'Dropdowns',
           url: '/base/dropdowns',
-          icon: 'icon-puzzle'
+          icon: 'icon-puzzle',
         },
         {
           name: 'Forms',
           url: '/base/forms',
-          icon: 'icon-puzzle'
+          icon: 'icon-puzzle',
         },
         {
           name: 'Jumbotrons',
           url: '/base/jumbotrons',
-          icon: 'icon-puzzle'
+          icon: 'icon-puzzle',
         },
         {
           name: 'List groups',
           url: '/base/list-groups',
-          icon: 'icon-puzzle'
+          icon: 'icon-puzzle',
         },
         {
           name: 'Navs',
           url: '/base/navs',
-          icon: 'icon-puzzle'
+          icon: 'icon-puzzle',
         },
         {
           name: 'Paginations',
           url: '/base/paginations',
-          icon: 'icon-puzzle'
+          icon: 'icon-puzzle',
         },
         {
           name: 'Popovers',
           url: '/base/popovers',
-          icon: 'icon-puzzle'
+          icon: 'icon-puzzle',
         },
         {
           name: 'Progress Bar',
           url: '/base/progress-bar',
-          icon: 'icon-puzzle'
+          icon: 'icon-puzzle',
         },
         {
           name: 'Switches',
           url: '/base/switches',
-          icon: 'icon-puzzle'
+          icon: 'icon-puzzle',
         },
         {
           name: 'Tables',
           url: '/base/tables',
-          icon: 'icon-puzzle'
+          icon: 'icon-puzzle',
         },
         {
           name: 'Tabs',
           url: '/base/tabs',
-          icon: 'icon-puzzle'
+          icon: 'icon-puzzle',
         },
         {
           name: 'Tooltips',
           url: '/base/tooltips',
-          icon: 'icon-puzzle'
+          icon: 'icon-puzzle',
-        }
+        },
-      ]
+      ],
     },
     {
       name: 'Buttons',
@@ -131,29 +131,29 @@ export default {
         {
           name: 'Buttons',
           url: '/buttons/buttons',
-          icon: 'icon-cursor'
+          icon: 'icon-cursor',
         },
         {
           name: 'Button dropdowns',
           url: '/buttons/button-dropdowns',
-          icon: 'icon-cursor'
+          icon: 'icon-cursor',
         },
         {
           name: 'Button groups',
           url: '/buttons/button-groups',
-          icon: 'icon-cursor'
+          icon: 'icon-cursor',
         },
         {
           name: 'Social Buttons',
           url: '/buttons/social-buttons',
-          icon: 'icon-cursor'
+          icon: 'icon-cursor',
-        }
+        },
-      ]
+      ],
     },
     {
       name: 'Charts',
       url: '/charts',
-      icon: 'icon-pie-chart'
+      icon: 'icon-pie-chart',
     },
     {
       name: 'Icons',
@@ -166,8 +166,8 @@ export default {
           icon: 'icon-star',
           badge: {
             variant: 'success',
-            text: 'NEW'
+            text: 'NEW',
-          }
+          },
         },
         {
           name: 'Font Awesome',
@@ -175,15 +175,15 @@ export default {
           icon: 'icon-star',
           badge: {
             variant: 'secondary',
-            text: '4.7'
+            text: '4.7',
-          }
+          },
         },
         {
           name: 'Simple Line Icons',
           url: '/icons/simple-line-icons',
-          icon: 'icon-star'
+          icon: 'icon-star',
-        }
+        },
-      ]
+      ],
     },
     {
       name: 'Notifications',
@@ -193,19 +193,19 @@ export default {
         {
           name: 'Alerts',
           url: '/notifications/alerts',
-          icon: 'icon-bell'
+          icon: 'icon-bell',
         },
         {
           name: 'Badges',
           url: '/notifications/badges',
-          icon: 'icon-bell'
+          icon: 'icon-bell',
         },
         {
           name: 'Modals',
           url: '/notifications/modals',
-          icon: 'icon-bell'
+          icon: 'icon-bell',
         },
-      ]
+      ],
     },
     {
       name: 'Widgets',
@@ -213,15 +213,15 @@ export default {
       icon: 'icon-calculator',
       badge: {
         variant: 'info',
-        text: 'NEW'
+        text: 'NEW',
-      }
+      },
     },
     {
-      divider: true
+      divider: true,
     },
     {
       title: true,
-      name: 'Extras'
+      name: 'Extras',
     },
     {
       name: 'Pages',
@@ -231,37 +231,37 @@ export default {
         {
           name: 'Login',
           url: '/login',
-          icon: 'icon-star'
+          icon: 'icon-star',
         },
         {
           name: 'Register',
           url: '/register',
-          icon: 'icon-star'
+          icon: 'icon-star',
         },
         {
           name: 'Error 404',
           url: '/404',
-          icon: 'icon-star'
+          icon: 'icon-star',
         },
         {
           name: 'Error 500',
           url: '/500',
-          icon: 'icon-star'
+          icon: 'icon-star',
-        }
+        },
-      ]
+      ],
     },
     {
       name: 'Download CoreUI',
       url: 'http://coreui.io/react/',
       icon: 'icon-cloud-download',
       class: 'mt-auto',
-      variant: 'success'
+      variant: 'success',
     },
     {
       name: 'Try CoreUI PRO',
       url: 'http://coreui.io/pro/react/',
       icon: 'icon-layers',
-      variant: 'danger'
+      variant: 'danger',
-    }
+    },
-  ]
+  ],
 };

src/components/Aside/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "Aside",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Aside.js"
-}

src/components/Breadcrumb/Breadcrumb.js

@@ -1,55 +0,0 @@
-import React from 'react';
-import {Route, Link} from 'react-router-dom';
-import {Breadcrumb, BreadcrumbItem} from 'reactstrap';
-import routes from '../../routes';
-
-const findRouteName = url => routes[url];
-
-const getPaths = (pathname) => {
-  const paths = ['/'];
-
-  if (pathname === '/') return paths;
-
-  pathname.split('/').reduce((prev, curr, index) => {
-    const currPath = `${prev}/${curr}`;
-    paths.push(currPath);
-    return currPath;
-  });
-  return paths;
-};
-
-const BreadcrumbsItem = ({...rest, match}) => {
-  const routeName = findRouteName(match.url);
-  if (routeName) {
-    return (
-      match.isExact ?
-        (
-          <BreadcrumbItem active>{routeName}</BreadcrumbItem>
-        ) :
-        (
-          <BreadcrumbItem>
-            <Link to={match.url || ''}>
-              {routeName}
-            </Link>
-          </BreadcrumbItem>
-        )
-    );
-  }
-  return null;
-};
-
-const Breadcrumbs = ({...rest, location : {pathname}, match}) => {
-  const paths = getPaths(pathname);
-  const items = paths.map((path, i) => <Route key={i++} path={path} component={BreadcrumbsItem}/>);
-  return (
-    <Breadcrumb>
-      {items}
-    </Breadcrumb>
-  );
-};
-
-export default props => (
-  <div>
-    <Route path="/:path" component={Breadcrumbs} {...props} />
-  </div>
-);

src/components/Breadcrumb/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "Breadcrumb",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Breadcrumb.js"
-}

src/components/Footer/Footer.js

@@ -1,14 +0,0 @@
-import React, {Component} from 'react';
-
-class Footer extends Component {
-  render() {
-    return (
-      <footer className="app-footer">
-        <span><a href="http://coreui.io">CoreUI</a> &copy; 2018 creativeLabs.</span>
-        <span className="ml-auto">Powered by <a href="http://coreui.io">CoreUI</a></span>
-      </footer>
-    )
-  }
-}
-
-export default Footer;

src/components/Footer/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "Footer",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Footer.js"
-}

src/components/Header/Header.js

@@ -1,80 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import {
-  Nav,
-  NavbarBrand,
-  NavbarToggler,
-  NavItem,
-  NavLink,
-  Badge
-} from 'reactstrap';
-import HeaderDropdown from './HeaderDropdown';
-
-class Header extends Component {
-
-  constructor(props) {
-    super(props);
-  }
-
-  sidebarToggle(e) {
-    e.preventDefault();
-    document.body.classList.toggle('sidebar-hidden');
-  }
-
-  sidebarMinimize(e) {
-    e.preventDefault();
-    document.body.classList.toggle('sidebar-minimized');
-  }
-
-  mobileSidebarToggle(e) {
-    e.preventDefault();
-    document.body.classList.toggle('sidebar-mobile-show');
-  }
-
-  asideToggle(e) {
-    e.preventDefault();
-    document.body.classList.toggle('aside-menu-hidden');
-  }
-
-  render() {
-    return (
-      <header className="app-header navbar">
-        <NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>
-          <span className="navbar-toggler-icon"></span>
-        </NavbarToggler>
-        <NavbarBrand href="#"></NavbarBrand>
-        <NavbarToggler className="d-md-down-none" onClick={this.sidebarToggle}>
-          <span className="navbar-toggler-icon"></span>
-        </NavbarToggler>
-        <Nav className="d-md-down-none" navbar>
-          <NavItem className="px-3">
-            <NavLink href="#">Dashboard</NavLink>
-          </NavItem>
-          <NavItem className="px-3">
-            <NavLink href="#">Users</NavLink>
-          </NavItem>
-          <NavItem className="px-3">
-            <NavLink href="#">Settings</NavLink>
-          </NavItem>
-        </Nav>
-        <Nav className="ml-auto" navbar>
-          <NavItem className="d-md-down-none">
-            <NavLink href="#"><i className="icon-bell"></i><Badge pill color="danger">5</Badge></NavLink>
-          </NavItem>
-          <NavItem className="d-md-down-none">
-            <NavLink href="#"><i className="icon-list"></i></NavLink>
-          </NavItem>
-          <NavItem className="d-md-down-none">
-            <NavLink href="#"><i className="icon-location-pin"></i></NavLink>
-          </NavItem>
-          <HeaderDropdown/>
-        </Nav>
-        <NavbarToggler className="d-md-down-none" onClick={this.asideToggle}>
-          <span className="navbar-toggler-icon"></span>
-        </NavbarToggler>
-      </header>
-    );
-  }
-}
-
-export default Header;

src/components/Header/HeaderDropdown.js

@@ -1,60 +0,0 @@
-import React, {Component} from 'react';
-import {
-  Badge,
-  DropdownItem,
-  DropdownMenu,
-  DropdownToggle,
-  Dropdown
-} from 'reactstrap';
-
-class HeaderDropdown extends Component {
-
-  constructor(props) {
-    super(props);
-
-    this.toggle = this.toggle.bind(this);
-    this.state = {
-      dropdownOpen: false
-    };
-  }
-
-  toggle() {
-    this.setState({
-      dropdownOpen: !this.state.dropdownOpen
-    });
-  }
-
-  dropAccnt() {
-    return (
-      <Dropdown nav isOpen={this.state.dropdownOpen} toggle={this.toggle}>
-        <DropdownToggle nav>
-          <img src={'img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
-        </DropdownToggle>
-        <DropdownMenu right>
-          <DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>
-          <DropdownItem><i className="fa fa-bell-o"></i> Updates<Badge color="info">42</Badge></DropdownItem>
-          <DropdownItem><i className="fa fa-envelope-o"></i> Messages<Badge color="success">42</Badge></DropdownItem>
-          <DropdownItem><i className="fa fa-tasks"></i> Tasks<Badge color="danger">42</Badge></DropdownItem>
-          <DropdownItem><i className="fa fa-comments"></i> Comments<Badge color="warning">42</Badge></DropdownItem>
-          <DropdownItem header tag="div" className="text-center"><strong>Settings</strong></DropdownItem>
-          <DropdownItem><i className="fa fa-user"></i> Profile</DropdownItem>
-          <DropdownItem><i className="fa fa-wrench"></i> Settings</DropdownItem>
-          <DropdownItem><i className="fa fa-usd"></i> Payments<Badge color="secondary">42</Badge></DropdownItem>
-          <DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
-          <DropdownItem divider/>
-          <DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
-          <DropdownItem><i className="fa fa-lock"></i> Logout</DropdownItem>
-        </DropdownMenu>
-      </Dropdown>
-    );
-  }
-
-  render() {
-    const {...attributes} = this.props;
-    return (
-      this.dropAccnt()
-    );
-  }
-}
-
-export default HeaderDropdown;

src/components/Header/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "Header",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Header.js"
-}

src/components/Sidebar/Sidebar.js

@@ -1,164 +0,0 @@
-import React, {Component} from 'react';
-import {NavLink} from 'react-router-dom';
-import {Badge, Nav, NavItem, NavLink as RsNavLink} from 'reactstrap';
-import classNames from 'classnames';
-import nav from './_nav';
-import SidebarFooter from './../SidebarFooter';
-import SidebarForm from './../SidebarForm';
-import SidebarHeader from './../SidebarHeader';
-import SidebarMinimizer from './../SidebarMinimizer';
-
-class Sidebar extends Component {
-
-  constructor(props) {
-    super(props);
-
-    this.handleClick = this.handleClick.bind(this);
-    this.activeRoute = this.activeRoute.bind(this);
-    this.hideMobile = this.hideMobile.bind(this);
-  }
-
-
-  handleClick(e) {
-    e.preventDefault();
-    e.target.parentElement.classList.toggle('open');
-  }
-
-  activeRoute(routeName, props) {
-    // return this.props.location.pathname.indexOf(routeName) > -1 ? 'nav-item nav-dropdown open' : 'nav-item nav-dropdown';
-    return props.location.pathname.indexOf(routeName) > -1 ? 'nav-item nav-dropdown open' : 'nav-item nav-dropdown';
-
-  }
-
-  hideMobile() {
-    if (document.body.classList.contains('sidebar-mobile-show')) {
-      document.body.classList.toggle('sidebar-mobile-show')
-    }
-  }
-
-  // todo Sidebar nav secondLevel
-  // secondLevelActive(routeName) {
-  //   return this.props.location.pathname.indexOf(routeName) > -1 ? "nav nav-second-level collapse in" : "nav nav-second-level collapse";
-  // }
-
-
-  render() {
-
-    const props = this.props;
-
-    // badge addon to NavItem
-    const badge = (badge) => {
-      if (badge) {
-        const classes = classNames( badge.class );
-        return (<Badge className={ classes } color={ badge.variant }>{ badge.text }</Badge>)
-      }
-    };
-
-    // simple wrapper for nav-title item
-    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) => {
-      const classes = classNames( 'nav-title', title.class);
-      return (<li key={key} className={ classes }>{wrapper(title)} </li>);
-    };
-
-    // nav list divider
-    const divider = (divider, key) => {
-      const classes = classNames( 'divider', divider.class);
-      return (<li key={key} className={ classes }></li>);
-    };
-
-    // nav label with nav link
-    const navLabel = (item, key) => {
-      const classes = {
-        item: classNames( 'hidden-cn', item.class ),
-        link: classNames( 'nav-label', item.class ? item.class : ''),
-        icon: classNames(
-          !item.icon ? 'fa fa-circle' : item.icon ,
-          item.label.variant ? `text-${item.label.variant}` : '',
-          item.label.class ?  item.label.class : ''
-        )
-      };
-      return (
-        navLink(item, key, classes)
-      );
-    };
-
-    // nav item with nav link
-    const navItem = (item, key) => {
-      const classes = {
-        item: classNames( item.class) ,
-        link: classNames( 'nav-link', item.variant ? `nav-link-${item.variant}` : ''),
-        icon: classNames( item.icon )
-      };
-      return (
-        navLink(item, key, classes)
-      )
-    };
-
-    // nav link
-    const navLink = (item, key, classes) => {
-      const url = item.url ? item.url : '';
-      return (
-        <NavItem key={key} className={classes.item}>
-          { isExternal(url) ?
-            <RsNavLink href={url} className={classes.link} active>
-              <i className={classes.icon}></i>{item.name}{badge(item.badge)}
-            </RsNavLink>
-            :
-            <NavLink to={url} className={classes.link} activeClassName="active" onClick={this.hideMobile}>
-              <i className={classes.icon}></i>{item.name}{badge(item.badge)}
-            </NavLink>
-          }
-        </NavItem>
-      )
-    };
-
-    // nav dropdown
-    const navDropdown = (item, key) => {
-      return (
-        <li key={key} className={this.activeRoute(item.url, props)}>
-          <a className="nav-link nav-dropdown-toggle" href="#" onClick={this.handleClick}><i className={item.icon}></i>{item.name}</a>
-          <ul className="nav-dropdown-items">
-            {navList(item.children)}
-          </ul>
-        </li>)
-    };
-
-    // nav type
-    const navType = (item, idx) =>
-      item.title ? title(item, idx) :
-      item.divider ? divider(item, idx) :
-      item.label ? navLabel(item, idx) :
-      item.children ? navDropdown(item, idx)
-                    : navItem(item, idx) ;
-
-    // nav list
-    const navList = (items) => {
-      return items.map( (item, index) => navType(item, index) );
-    };
-
-    const isExternal = (url) => {
-      const link = url ? url.substring(0, 4) : '';
-      return link === 'http';
-    };
-
-    // sidebar-nav root
-    return (
-      <div className="sidebar">
-        <SidebarHeader/>
-        <SidebarForm/>
-        <nav className="sidebar-nav">
-          <Nav>
-            {navList(nav.items)}
-          </Nav>
-        </nav>
-        <SidebarFooter/>
-        <SidebarMinimizer/>
-      </div>
-    )
-  }
-}
-
-export default Sidebar;

src/components/Sidebar/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "Sidebar",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./Sidebar.js"
-}

src/components/SidebarFooter/SidebarFooter.js

@@ -1,14 +0,0 @@
-import React, {Component} from 'react';
-
-class SidebarFooter extends Component {
-
-  render() {
-    return null
-    // Uncomment following code lines to add Sidebar Footer
-    // return (
-    //   <div className="sidebar-footer"></div>
-    // )
-  }
-}
-
-export default SidebarFooter;

src/components/SidebarFooter/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "SidebarFooter",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./SidebarFooter.js"
-}

src/components/SidebarForm/SidebarForm.js

@@ -1,14 +0,0 @@
-import React, {Component} from 'react';
-
-class SidebarForm extends Component {
-
-  render() {
-    return null
-    // Uncomment following code lines to add Sidebar Form
-    // return (
-    //   <div className="sidebar-form"></div>
-    // )
-  }
-}
-
-export default SidebarForm;

src/components/SidebarForm/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "SidebarForm",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./SidebarForm.js"
-}

src/components/SidebarHeader/SidebarHeader.js

@@ -1,14 +0,0 @@
-import React, {Component} from 'react';
-
-class SidebarHeader extends Component {
-
-  render() {
-    return null
-    // Uncomment following code lines to add Sidebar Header
-    // return (
-    //   <div className="sidebar-header"></div>
-    // )
-  }
-}
-
-export default SidebarHeader;

src/components/SidebarHeader/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "SidebarHeader",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./SidebarHeader.js"
-}

src/components/SidebarMinimizer/SidebarMinimizer.js

@@ -1,20 +0,0 @@
-import React, {Component} from 'react';
-
-class SidebarMinimizer extends Component {
-
-  sidebarMinimize() {
-    document.body.classList.toggle('sidebar-minimized');
-  }
-
-  brandMinimize() {
-    document.body.classList.toggle('brand-minimized');
-  }
-
-  render() {
-    return (
-      <button className="sidebar-minimizer" type="button" onClick={(event) => { this.sidebarMinimize(); this.brandMinimize() }}></button>
-    )
-  }
-}
-
-export default SidebarMinimizer;

src/components/SidebarMinimizer/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "SidebarMinimizer",
-  "version": "0.0.0",
-  "private": true,
-  "main": "./SidebarMinimizer.js"
-}

src/containers/Full/Full.js

@@ -1,105 +1,72 @@
 import React, { Component } from 'react';
-import {Switch, Route, Redirect} from 'react-router-dom';
+import { Redirect, Route, Switch } from 'react-router-dom';
 import { Container } from 'reactstrap';
-import Header from '../../components/Header/';
-import Sidebar from '../../components/Sidebar/';
-import Breadcrumb from '../../components/Breadcrumb/';
-import Aside from '../../components/Aside/';
-import Footer from '../../components/Footer/';
 
-import Dashboard from '../../views/Dashboard/';
+import {
-
+  AppAside,
-import Colors from '../../views/Theme/Colors/';
+  AppBreadcrumb,
-import Typography from '../../views/Theme/Typography/';
+  AppFooter,
-
+  AppHeader,
-import Charts from '../../views/Charts/';
+  AppSidebar,
-import Widgets from '../../views/Widgets/';
+  AppSidebarFooter,
-
+  AppSidebarForm,
-// Base
+  AppSidebarHeader,
-import Cards from '../../views/Base/Cards/';
+  AppSidebarMinimizer,
-import Forms from '../../views/Base/Forms/';
+  AppSidebarNav,
-import Switches from '../../views/Base/Switches/';
+} from '@coreui/react-dev';
-import Tables from '../../views/Base/Tables/';
+// sidebar nav config
-import Tabs from '../../views/Base/Tabs/';
+import navigation from '../../_nav';
-import Breadcrumbs from '../../views/Base/Breadcrumbs/';
+// routes config
-import Carousels from '../../views/Base/Carousels/';
+import routes from '../../routes';
-import Collapses from '../../views/Base/Collapses/';
+import FullAside from './FullAside';
-import Dropdowns from '../../views/Base/Dropdowns/';
+import FullFooter from './FullFooter';
-import Jumbotrons from '../../views/Base/Jumbotrons/';
+import FullHeader from './FullHeader';
-import ListGroups from '../../views/Base/ListGroups/';
-import Navbars from '../../views/Base/Navbars/';
-import Navs from '../../views/Base/Navs/';
-import Paginations from '../../views/Base/Paginations/';
-import Popovers from '../../views/Base/Popovers/';
-import ProgressBar from '../../views/Base/ProgressBar/';
-import Tooltips from '../../views/Base/Tooltips/';
-
-// Buttons
-import Buttons from '../../views/Buttons/Buttons/';
-import ButtonDropdowns from '../../views/Buttons/ButtonDropdowns/';
-import ButtonGroups from '../../views/Buttons/ButtonGroups/';
-import SocialButtons from '../../views/Buttons/SocialButtons/';
-
-// Icons
-import Flags from '../../views/Icons/Flags/';
-import FontAwesome from '../../views/Icons/FontAwesome/';
-import SimpleLineIcons from '../../views/Icons/SimpleLineIcons/';
-
-// Notifications
-import Alerts from '../../views/Notifications/Alerts/';
-import Badges from '../../views/Notifications/Badges/';
-import Modals from '../../views/Notifications/Modals/';
 
 class Full extends Component {
   render() {
     return (
       <div className="app">
-        <Header/>
+        <AppHeader fixed>
+          <FullHeader />
+        </AppHeader>
         <div className="app-body">
-          <Sidebar {...this.props}/>
+          <AppSidebar fixed display="lg">
+            <AppSidebarHeader />
+            <AppSidebarForm />
+            <AppSidebarNav navConfig={navigation} {...this.props} />
+            <AppSidebarFooter />
+            <AppSidebarMinimizer />
+          </AppSidebar>
           <main className="main">
-            <Breadcrumb/>
+            <AppBreadcrumb appRoutes={routes}>
+              <li class="breadcrumb-menu d-md-down-none">
+                <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
+                  <a class="btn" href="#"><i class="icon-speech"></i></a>
+                  <a class="btn" href="/dashboard"><i class="icon-graph"></i> &nbsp;Dashboard</a>
+                  <a class="btn" href="#"><i class="icon-settings"></i> &nbsp;Settings</a>
+                </div>
+              </li>
+            </AppBreadcrumb>
             <Container fluid>
               <Switch>
-                <Route path="/dashboard" name="Dashboard" component={Dashboard}/>
+                {routes.map((route, idx) => {
-                <Route path="/theme/colors" name="Colors" component={Colors}/>
+                    return route.component ? (<Route key={idx} path={route.path} exact={route.exact} name={route.name} render={props => (
-                <Route path="/theme/typography" name="Typography" component={Typography}/>
+                        <route.component {...props} />
-                <Route path="/base/cards" name="Cards" component={Cards}/>
+                      )} />)
-                <Route path="/base/forms" name="Forms" component={Forms}/>
+                      : (null);
-                <Route path="/base/switches" name="Swithces" component={Switches}/>
+                  },
-                <Route path="/base/tables" name="Tables" component={Tables}/>
+                )}
-                <Route path="/base/tabs" name="Tabs" component={Tabs}/>
-                <Route path="/base/breadcrumbs" name="Breadcrumbs" component={Breadcrumbs}/>
-                <Route path="/base/carousels" name="Carousels" component={Carousels}/>
-                <Route path="/base/collapses" name="Collapses" component={Collapses}/>
-                <Route path="/base/dropdowns" name="Dropdowns" component={Dropdowns}/>
-                <Route path="/base/jumbotrons" name="Jumbotrons" component={Jumbotrons}/>
-                <Route path="/base/list-groups" name="ListGroups" component={ListGroups}/>
-                <Route path="/base/navbars" name="Navbars" component={Navbars}/>
-                <Route path="/base/navs" name="Navs" component={Navs}/>
-                <Route path="/base/paginations" name="Paginations" component={Paginations}/>
-                <Route path="/base/popovers" name="Popovers" component={Popovers}/>
-                <Route path="/base/progress-bar" name="Progress Bar" component={ProgressBar}/>
-                <Route path="/base/tooltips" name="Tooltips" component={Tooltips}/>
-                <Route path="/buttons/buttons" name="Buttons" component={Buttons}/>
-                <Route path="/buttons/button-dropdowns" name="ButtonDropdowns" component={ButtonDropdowns}/>
-                <Route path="/buttons/button-groups" name="ButtonGroups" component={ButtonGroups}/>
-                <Route path="/buttons/social-buttons" name="Social Buttons" component={SocialButtons}/>
-                <Route path="/icons/flags" name="Flags" component={Flags}/>
-                <Route path="/icons/font-awesome" name="Font Awesome" component={FontAwesome}/>
-                <Route path="/icons/simple-line-icons" name="Simple Line Icons" component={SimpleLineIcons}/>
-                <Route path="/notifications/alerts" name="Alerts" component={Alerts}/>
-                <Route path="/notifications/badges" name="Badges" component={Badges}/>
-                <Route path="/notifications/modals" name="Modals" component={Modals}/>
-                <Route path="/widgets" name="Widgets" component={Widgets}/>
-                <Route path="/charts" name="Charts" component={Charts}/>
                 <Redirect from="/" to="/dashboard" />
               </Switch>
             </Container>
           </main>
-          <Aside/>
+          <AppAside fixed hidden display="lg">
+            <FullAside />
+          </AppAside>
         </div>
-        <Footer/>
+        <AppFooter fixed>
+          <FullFooter />
+        </AppFooter>
       </div>
     );
   }

src/containers/Full/FullAside.js

@@ -1,44 +1,61 @@
 import React, { Component } from 'react';
-import {TabContent, TabPane, Nav, NavItem, NavLink, Progress, Label, Input} from 'reactstrap';
+import { Input, Label, Nav, NavItem, NavLink, Progress, TabContent, TabPane } from 'reactstrap';
-import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const propTypes = {
+  children: PropTypes.node,
+};
+
+const defaultProps = {};
+
+class FullAside extends Component {
 
-class Aside extends Component {
   constructor(props) {
     super(props);
 
     this.toggle = this.toggle.bind(this);
     this.state = {
-      activeTab: '1'
+      activeTab: '1',
     };
   }
 
   toggle(tab) {
     if (this.state.activeTab !== tab) {
       this.setState({
-        activeTab: tab
+        activeTab: tab,
       });
     }
   }
 
   render() {
+
+    const { children, ...attributes } = this.props;
+
     return (
-      <aside className="aside-menu">
+      <React.Fragment>
         <Nav tabs>
           <NavItem>
-            <NavLink className={classnames({ active: this.state.activeTab === '1' })}
+            <NavLink className={classNames({ active: this.state.activeTab === '1' })}
-                     onClick={() => { this.toggle('1'); }}>
+                     onClick={() => {
+                       this.toggle('1');
+                     }}>
               <i className="icon-list"></i>
             </NavLink>
           </NavItem>
           <NavItem>
-            <NavLink className={classnames({ active: this.state.activeTab === '2' })}
+            <NavLink className={classNames({ active: this.state.activeTab === '2' })}
-                     onClick={() => { this.toggle('2'); }}>
+                     onClick={() => {
+                       this.toggle('2');
+                     }}>
               <i className="icon-speech"></i>
             </NavLink>
           </NavItem>
           <NavItem>
-            <NavLink className={classnames({ active: this.state.activeTab === '3' })}
+            <NavLink className={classNames({ active: this.state.activeTab === '3' })}
-                     onClick={() => { this.toggle('3'); }}>
+                     onClick={() => {
+                       this.toggle('3');
+                     }}>
               <i className="icon-settings"></i>
             </NavLink>
           </NavItem>
@@ -51,7 +68,7 @@ class Aside extends Component {
             <hr className="transparent mx-3 my-0" />
             <div className="callout callout-warning m-0 py-3">
               <div className="avatar float-right">
-                <img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
+                <img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
               </div>
               <div>Meeting with <strong>Lucas</strong></div>
               <small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 1 - 3pm</small>
@@ -60,7 +77,7 @@ class Aside extends Component {
             <hr className="mx-3 my-0" />
             <div className="callout callout-info m-0 py-3">
               <div className="avatar float-right">
-                <img src={'img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
+                <img src={'assets/img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
               </div>
               <div>Skype with <strong>Megan</strong></div>
               <small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 4 - 5pm</small>
@@ -77,19 +94,19 @@ class Aside extends Component {
               <small className="text-muted"><i className="icon-home"></i>&nbsp; creativeLabs HQ</small>
               <div className="avatars-stack mt-2">
                 <div className="avatar avatar-xs">
-                  <img src={'img/avatars/2.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
+                  <img src={'assets/img/avatars/2.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
                 </div>
                 <div className="avatar avatar-xs">
-                  <img src={'img/avatars/3.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
+                  <img src={'assets/img/avatars/3.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
                 </div>
                 <div className="avatar avatar-xs">
-                  <img src={'img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
+                  <img src={'assets/img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
                 </div>
                 <div className="avatar avatar-xs">
-                  <img src={'img/avatars/5.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
+                  <img src={'assets/img/avatars/5.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
                 </div>
                 <div className="avatar avatar-xs">
-                  <img src={'img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
+                  <img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
                 </div>
               </div>
             </div>
@@ -106,25 +123,25 @@ class Aside extends Component {
               <small className="text-muted"><i className="icon-home"></i>&nbsp; creativeLabs HQ</small>
               <div className="avatars-stack mt-2">
                 <div className="avatar avatar-xs">
-                  <img src={'img/avatars/2.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
+                  <img src={'assets/img/avatars/2.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
                 </div>
                 <div className="avatar avatar-xs">
-                  <img src={'img/avatars/3.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
+                  <img src={'assets/img/avatars/3.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
                 </div>
                 <div className="avatar avatar-xs">
-                  <img src={'img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
+                  <img src={'assets/img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
                 </div>
                 <div className="avatar avatar-xs">
-                  <img src={'img/avatars/5.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
+                  <img src={'assets/img/avatars/5.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
                 </div>
                 <div className="avatar avatar-xs">
-                  <img src={'img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
+                  <img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
                 </div>
                 <div className="avatar avatar-xs">
-                  <img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
+                  <img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
                 </div>
                 <div className="avatar avatar-xs">
-                  <img src={'img/avatars/8.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
+                  <img src={'assets/img/avatars/8.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
                 </div>
               </div>
             </div>
@@ -134,7 +151,7 @@ class Aside extends Component {
             <div className="message">
               <div className="py-3 pb-5 mr-3 float-left">
                 <div className="avatar">
-                  <img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
+                  <img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
                   <span className="avatar-status badge-success"></span>
                 </div>
               </div>
@@ -151,7 +168,7 @@ class Aside extends Component {
             <div className="message">
               <div className="py-3 pb-5 mr-3 float-left">
                 <div className="avatar">
-                  <img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
+                  <img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
                   <span className="avatar-status badge-success"></span>
                 </div>
               </div>
@@ -168,7 +185,7 @@ class Aside extends Component {
             <div className="message">
               <div className="py-3 pb-5 mr-3 float-left">
                 <div className="avatar">
-                  <img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
+                  <img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
                   <span className="avatar-status badge-success"></span>
                 </div>
               </div>
@@ -185,7 +202,7 @@ class Aside extends Component {
             <div className="message">
               <div className="py-3 pb-5 mr-3 float-left">
                 <div className="avatar">
-                  <img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
+                  <img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
                   <span className="avatar-status badge-success"></span>
                 </div>
               </div>
@@ -202,7 +219,7 @@ class Aside extends Component {
             <div className="message">
               <div className="py-3 pb-5 mr-3 float-left">
                 <div className="avatar">
-                  <img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
+                  <img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
                   <span className="avatar-status badge-success"></span>
                 </div>
               </div>
@@ -301,9 +318,12 @@ class Aside extends Component {
             <small className="text-muted">25GB/256GB</small>
           </TabPane>
         </TabContent>
-      </aside>
+      </React.Fragment>
-    )
+    );
   }
 }
 
-export default Aside;
+FullAside.propTypes = propTypes;
+FullAside.defaultProps = defaultProps;
+
+export default FullAside;

src/containers/Full/FullFooter.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  children: PropTypes.node,
+};
+
+const defaultProps = {};
+
+class FullFooter extends Component {
+  render() {
+
+    const { children, ...attributes } = this.props;
+
+    return (
+      <React.Fragment>
+        <span><a href="https://coreui.io">CoreUI</a> &copy; 2018 creativeLabs.</span>
+        <span className="ml-auto">Powered by <a href="https://coreui.io/react">CoreUI for React</a></span>
+      </React.Fragment>
+    );
+  }
+}
+
+FullFooter.propTypes = propTypes;
+FullFooter.defaultProps = defaultProps;
+
+export default FullFooter;

src/containers/Full/FullHeader.js

@@ -0,0 +1,79 @@
+import React, { Component } from 'react';
+import { Badge, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink } from 'reactstrap';
+import PropTypes from 'prop-types';
+
+import { AppAsideToggler, AppHeaderDropdown, AppNavbarBrand, AppSidebarToggler } from '@coreui/react-dev';
+
+const propTypes = {
+  children: PropTypes.node,
+};
+
+const defaultProps = {};
+
+class FullHeader extends Component {
+  render() {
+
+    const { children, ...attributes } = this.props;
+
+    return (
+      <React.Fragment>
+        <AppSidebarToggler className="d-lg-none" display="md" mobile />
+        <AppNavbarBrand
+          full={{ src: process.env.PUBLIC_URL + 'assets/img/brand/logo.svg', width: 89, height: 25, alt: 'CoreUI Logo' }}
+          minimized={{ src: process.env.PUBLIC_URL + 'assets/img/brand/sygnet.svg', width: 30, height: 30, alt: 'CoreUI Logo' }}
+        />
+        <AppSidebarToggler className="d-md-down-none" display="lg" />
+
+        <Nav className="d-md-down-none" navbar>
+          <NavItem className="px-3">
+            <NavLink href="/">Dashboard</NavLink>
+          </NavItem>
+          <NavItem className="px-3">
+            <NavLink href="#">Users</NavLink>
+          </NavItem>
+          <NavItem className="px-3">
+            <NavLink href="#">Settings</NavLink>
+          </NavItem>
+        </Nav>
+        <Nav className="ml-auto" navbar>
+          <NavItem className="d-md-down-none">
+            <NavLink href="#"><i className="icon-bell"></i><Badge pill color="danger">5</Badge></NavLink>
+          </NavItem>
+          <NavItem className="d-md-down-none">
+            <NavLink href="#"><i className="icon-list"></i></NavLink>
+          </NavItem>
+          <NavItem className="d-md-down-none">
+            <NavLink href="#"><i className="icon-location-pin"></i></NavLink>
+          </NavItem>
+          <AppHeaderDropdown>
+            <DropdownToggle nav>
+              <img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
+            </DropdownToggle>
+            <DropdownMenu right style={{ right: 'auto' }}>
+              <DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>
+              <DropdownItem><i className="fa fa-bell-o"></i> Updates<Badge color="info">42</Badge></DropdownItem>
+              <DropdownItem><i className="fa fa-envelope-o"></i> Messages<Badge color="success">42</Badge></DropdownItem>
+              <DropdownItem><i className="fa fa-tasks"></i> Tasks<Badge color="danger">42</Badge></DropdownItem>
+              <DropdownItem><i className="fa fa-comments"></i> Comments<Badge color="warning">42</Badge></DropdownItem>
+              <DropdownItem header tag="div" className="text-center"><strong>Settings</strong></DropdownItem>
+              <DropdownItem><i className="fa fa-user"></i> Profile</DropdownItem>
+              <DropdownItem><i className="fa fa-wrench"></i> Settings</DropdownItem>
+              <DropdownItem><i className="fa fa-usd"></i> Payments<Badge color="secondary">42</Badge></DropdownItem>
+              <DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
+              <DropdownItem divider />
+              <DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
+              <DropdownItem><i className="fa fa-lock"></i> Logout</DropdownItem>
+            </DropdownMenu>
+          </AppHeaderDropdown>
+        </Nav>
+        <AppAsideToggler className="d-md-down-none" />
+        <AppAsideToggler className="d-lg-none" mobile />
+      </React.Fragment>
+    );
+  }
+}
+
+FullHeader.propTypes = propTypes;
+FullHeader.defaultProps = defaultProps;
+
+export default FullHeader;

src/containers/index.js

@@ -0,0 +1,3 @@
+import Full from './Full';
+
+export { Full };

src/index.css

@@ -0,0 +1 @@
+

src/index.js

@@ -1,36 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {HashRouter, Route, Switch} from 'react-router-dom';
+import './index.css';
+import App from './App';
+import registerServiceWorker from './registerServiceWorker';
 
-// Styles
+ReactDOM.render(<App />, document.getElementById('root'));
-// Import Flag Icons Set
+registerServiceWorker();
-import 'flag-icon-css/css/flag-icon.min.css';
-// Import Font Awesome Icons Set
-import 'font-awesome/css/font-awesome.min.css';
-// Import Simple Line Icons Set
-import 'simple-line-icons/css/simple-line-icons.css';
-// Import Main styles for this application
-import '../scss/style.scss'
-// Temp fix for reactstrap
-import '../scss/core/_dropdown-menu-right.scss'
-
-// Containers
-import Full from './containers/Full/'
-
-// Views
-import Login from './views/Pages/Login/'
-import Register from './views/Pages/Register/'
-import Page404 from './views/Pages/Page404/'
-import Page500 from './views/Pages/Page500/'
-
-ReactDOM.render((
-  <HashRouter>
-    <Switch>
-      <Route exact path="/login" name="Login Page" component={Login}/>
-      <Route exact path="/register" name="Register Page" component={Register}/>
-      <Route exact path="/404" name="Page 404" component={Page404}/>
-      <Route exact path="/500" name="Page 500" component={Page500}/>
-      <Route path="/" name="Home" component={Full}/>
-    </Switch>
-  </HashRouter>
-), document.getElementById('root'));

src/registerServiceWorker.js

@@ -0,0 +1,117 @@
+// In production, we register a service worker to serve assets from local cache.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on the "N+1" visit to a page, since previously
+// cached resources are updated in the background.
+
+// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
+// This link also includes instructions on opting out of this behavior.
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export default function register() {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Lets check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://goo.gl/SC7cgQ'
+          );
+        });
+      } else {
+        // Is not local host. Just register service worker
+        registerValidSW(swUrl);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the old content will have been purged and
+              // the fresh content will have been added to the cache.
+              // It's the perfect time to display a "New content is
+              // available; please refresh." message in your web app.
+              console.log('New content is available; please refresh.');
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      if (
+        response.status === 404 ||
+        response.headers.get('content-type').indexOf('javascript') === -1
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}

src/routes.js

@@ -1,40 +1,79 @@
-const routes = {
+import {
-  '/': 'Home',
+  Alerts,
-  '/base': 'Base',
+  Badges,
-  '/base/cards': 'Cards',
+  Breadcrumbs,
-  '/base/forms': 'Forms',
+  ButtonDropdowns,
-  '/base/switches': 'Switches',
+  ButtonGroups,
-  '/base/tables': 'Tables',
+  Buttons,
-  '/base/tabs': 'Tabs',
+  Cards,
-  '/base/breadcrumbs': 'Breadcrumbs',
+  Carousels,
-  '/base/carousels': 'Carousels',
+  Charts,
-  '/base/collapses': 'Collapses',
+  Collapses,
-  '/base/jumbotrons': 'Jumbotrons',
+  Colors,
-  '/base/list-groups': 'List Groups',
+  Dashboard,
-  '/base/navbars': 'Navbars',
+  Dropdowns,
-  '/base/navs': 'Navs',
+  Flags,
-  '/base/paginations': 'Paginations',
+  FontAwesome,
-  '/base/popovers': 'Popovers',
+  Forms,
-  '/base/progress-bar': 'Progress Bar',
+  Jumbotrons,
-  '/base/tooltips': 'Tooltips',
+  ListGroups,
-  '/buttons': 'Buttons',
+  Modals,
-  '/buttons/buttons': 'Buttons',
+  Navbars,
-  '/buttons/social-buttons': 'Social Buttons',
+  Navs,
-  '/buttons/button-dropdowns': 'Button Dropdowns',
+  Paginations,
-  '/buttons/button-groups': 'Button Groups',
+  Popovers,
-  '/charts': 'Charts',
+  ProgressBar,
-  '/dashboard': 'Dashboard',
+  SimpleLineIcons,
-  '/icons': 'Icons',
+  SocialButtons,
-  '/icons/flags': 'Flags',
+  Switches,
-  '/icons/font-awesome': 'Font Awesome',
+  Tables,
-  '/icons/simple-line-icons': 'Simple Line Icons',
+  Tabs,
-  '/notifications': 'Notifications',
+  Tooltips,
-  '/notifications/alerts': 'Alerts',
+  Typography,
-  '/notifications/badges': 'Badges',
+  Widgets,
-  '/notifications/modals': 'Modals',
+} from './views';
-  '/theme': 'Theme',
+import Full from './containers/Full';
-  '/theme/colors': 'Colors',
+
-  '/theme/typography': 'Typography',
+// https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
-  '/widgets': 'Widgets'
+const routes = [
-};
+  { path: '/', exact: true, name: 'Home', component: Full },
+  { path: '/dashboard', name: 'Dashboard', component: Dashboard },
+  { path: '/theme', exact: true, name: 'Theme', component: Colors },
+  { path: '/theme/colors', name: 'Colors', component: Colors },
+  { path: '/theme/typography', name: 'Typography', component: Typography },
+  { path: '/base', exact: true, name: 'Base', component: Cards },
+  { path: '/base/cards', name: 'Cards', component: Cards },
+  { path: '/base/forms', name: 'Forms', component: Forms },
+  { path: '/base/switches', name: 'Swithces', component: Switches },
+  { path: '/base/tables', name: 'Tables', component: Tables },
+  { path: '/base/tabs', name: 'Tabs', component: Tabs },
+  { path: '/base/breadcrumbs', name: 'Breadcrumbs', component: Breadcrumbs },
+  { path: '/base/carousels', name: 'Carousels', component: Carousels },
+  { path: '/base/collapses', name: 'Collapses', component: Collapses },
+  { path: '/base/dropdowns', name: 'Dropdowns', component: Dropdowns },
+  { path: '/base/jumbotrons', name: 'Jumbotrons', component: Jumbotrons },
+  { path: '/base/list-groups', name: 'ListGroups', component: ListGroups },
+  { path: '/base/navbars', name: 'Navbars', component: Navbars },
+  { path: '/base/navs', name: 'Navs', component: Navs },
+  { path: '/base/paginations', name: 'Paginations', component: Paginations },
+  { path: '/base/popovers', name: 'Popovers', component: Popovers },
+  { path: '/base/progress-bar', name: 'Progress Bar', component: ProgressBar },
+  { path: '/base/tooltips', name: 'Tooltips', component: Tooltips },
+  { path: '/buttons', exact: true, name: 'Buttons', component: Buttons },
+  { path: '/buttons/buttons', name: 'Buttons', component: Buttons },
+  { path: '/buttons/button-dropdowns', name: 'ButtonDropdowns', component: ButtonDropdowns },
+  { path: '/buttons/button-groups', name: 'ButtonGroups', component: ButtonGroups },
+  { path: '/buttons/social-buttons', name: 'Social Buttons', component: SocialButtons },
+  { path: '/icons', exact: true, name: 'Icons', component: Flags },
+  { path: '/icons/flags', name: 'Flags', component: Flags },
+  { path: '/icons/font-awesome', name: 'Font Awesome', component: FontAwesome },
+  { path: '/icons/simple-line-icons', name: 'Simple Line Icons', component: SimpleLineIcons },
+  { path: '/notifications', exact: true, name: 'Notifications', component: Alerts },
+  { path: '/notifications/alerts', name: 'Alerts', component: Alerts },
+  { path: '/notifications/badges', name: 'Badges', component: Badges },
+  { path: '/notifications/modals', name: 'Modals', component: Modals },
+  { path: '/widgets', name: 'Widgets', component: Widgets },
+  { path: '/charts', name: 'Charts', component: Charts },
+];
+
 export default routes;

src/scss/style.scss

@@ -3,6 +3,8 @@
 
 // Import styles
 @import "node_modules/@coreui/styles/scss/coreui";
+// Temp fix for reactstrap
+@import 'node_modules/@coreui/styles/scss/_dropdown-menu-right.scss';
 
 // If you want to add something do it here
 @import "custom";

src/scss/vendors/chart.js/chart.css

@@ -0,0 +1,42 @@
+.chart-legend,
+.bar-legend,
+.line-legend,
+.pie-legend,
+.radar-legend,
+.polararea-legend,
+.doughnut-legend {
+  list-style-type: none;
+  margin-top: 5px;
+  text-align: center;
+  -webkit-padding-start: 0;
+  -moz-padding-start: 0;
+  padding-left: 0; }
+
+.chart-legend li,
+.bar-legend li,
+.line-legend li,
+.pie-legend li,
+.radar-legend li,
+.polararea-legend li,
+.doughnut-legend li {
+  display: inline-block;
+  white-space: nowrap;
+  position: relative;
+  margin-bottom: 4px;
+  padding: 2px 8px 2px 28px;
+  font-size: smaller;
+  cursor: default; }
+
+.chart-legend li span,
+.bar-legend li span,
+.line-legend li span,
+.pie-legend li span,
+.radar-legend li span,
+.polararea-legend li span,
+.doughnut-legend li span {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 20px;
+  height: 20px; }

src/scss/vendors/chart.js/chart.scss

@@ -0,0 +1,48 @@
+// Import variables
+@import '../variables';
+
+.chart-legend,
+.bar-legend,
+.line-legend,
+.pie-legend,
+.radar-legend,
+.polararea-legend,
+.doughnut-legend {
+  list-style-type: none;
+  margin-top: 5px;
+  text-align: center;
+  -webkit-padding-start: 0;
+  -moz-padding-start: 0;
+  padding-left: 0;
+}
+.chart-legend li,
+.bar-legend li,
+.line-legend li,
+.pie-legend li,
+.radar-legend li,
+.polararea-legend li,
+.doughnut-legend li {
+  display: inline-block;
+  white-space: nowrap;
+  position: relative;
+  margin-bottom: 4px;
+  @include border-radius($border-radius);
+  padding: 2px 8px 2px 28px;
+  font-size: smaller;
+  cursor: default;
+}
+.chart-legend li span,
+.bar-legend li span,
+.line-legend li span,
+.pie-legend li span,
+.radar-legend li span,
+.polararea-legend li span,
+.doughnut-legend li span {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 20px;
+  height: 20px;
+  @include border-radius($border-radius);
+}

src/views/Base/Breadcrumbs/Breadcrumbs.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import {Row, Col, Card, CardHeader, CardBody, CardFooter, Breadcrumb, BreadcrumbItem } from 'reactstrap';
+import { Breadcrumb, BreadcrumbItem, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
 
 class Breadcrumbs extends Component {
   render() {
@@ -10,8 +10,8 @@ class Breadcrumbs extends Component {
             <Card>
               <CardHeader>
                 <i className="fa fa-align-justify"></i><strong>Breadcrumbs</strong>
-                <div className="card-actions">
+                <div className="card-header-actions">
-                  <a href="https://reactstrap.github.io/components/breadcrumbs/" target="_blank">
+                  <a href="https://reactstrap.github.io/components/breadcrumbs/" rel="noreferrer noopener" target="_blank">
                     <small className="text-muted">docs</small>
                   </a>
                 </div>
@@ -40,7 +40,7 @@ class Breadcrumbs extends Component {
           </Col>
         </Row>
       </div>
-    )
+    );
   }
 }
 

src/views/Base/Cards/Cards.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import {Badge, Row, Col, Card, CardHeader, CardFooter, CardBody, Label, Input} from 'reactstrap';
+import { Badge, Card, CardBody, CardFooter, CardHeader, Col, Input, Label, Row } from 'reactstrap';
 
 class Cards extends Component {
   render() {
@@ -359,7 +359,7 @@ class Cards extends Component {
         </Row>
       </div>
 
-    )
+    );
   }
 }
 

src/views/Base/Carousels/Carousels.js

@@ -1,36 +1,24 @@
 import React, { Component } from 'react';
-import {
+import { Card, CardBody, CardHeader, Carousel, CarouselCaption, CarouselControl, CarouselIndicators, CarouselItem, Col, Row } from 'reactstrap';
-  Row,
-  Col,
-  Card,
-  CardHeader,
-  CardBody,
-  Carousel,
-  CarouselItem,
-  CarouselControl,
-  CarouselIndicators,
-  CarouselCaption
-} from 'reactstrap';
 
 const items = [
   {
     src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
     altText: 'Slide 1',
-    caption: 'Slide 1'
+    caption: 'Slide 1',
   },
   {
     src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
     altText: 'Slide 2',
-    caption: 'Slide 2'
+    caption: 'Slide 2',
   },
   {
     src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
     altText: 'Slide 3',
-    caption: 'Slide 3'
+    caption: 'Slide 3',
-  }
+  },
 ];
 
-
 class Carousels extends Component {
 
   constructor(props) {
@@ -73,11 +61,7 @@ class Carousels extends Component {
 
     const slides = items.map((item) => {
       return (
-        <CarouselItem
+        <CarouselItem onExiting={this.onExiting} onExited={this.onExited} key={item.src}>
-          onExiting={this.onExiting}
-          onExited={this.onExited}
-          key={item.src}
-        >
           <img className="d-block w-100" src={item.src} alt={item.altText} />
         </CarouselItem>
       );
@@ -103,8 +87,8 @@ class Carousels extends Component {
             <Card>
               <CardHeader>
                 <i className="fa fa-align-justify"></i><strong>Carousel</strong>
-                <div className="card-actions">
+                <div className="card-header-actions">
-                  <a href="https://reactstrap.github.io/components/carousel/" target="_blank">
+                  <a href="https://reactstrap.github.io/components/carousel/" rel="noreferrer noopener" target="_blank">
                     <small className="text-muted">docs</small>
                   </a>
                 </div>

src/views/Base/Collapses/Collapses.js

@@ -1,13 +1,5 @@
 import React, { Component } from 'react';
-import {
+import { Button, Card, CardBody, CardFooter, CardHeader, Collapse, Fade } from 'reactstrap';
-  Row,
-  Col,
-  Card,
-  CardHeader,
-  CardBody,
-  CardFooter,
-  Collapse, Button, Fade
-} from 'reactstrap';
 
 class Collapses extends Component {
 
@@ -23,7 +15,7 @@ class Collapses extends Component {
       collapse: false,
       status: 'Closed',
       fadeIn: true,
-      timeout: 300
+      timeout: 300,
     };
   }
 
@@ -57,8 +49,8 @@ class Collapses extends Component {
         <Card>
           <CardHeader>
             <i className="fa fa-align-justify"></i><strong>Collapse</strong>
-            <div className="card-actions">
+            <div className="card-header-actions">
-              <a href="https://reactstrap.github.io/components/collapse/" target="_blank">
+              <a href="https://reactstrap.github.io/components/collapse/" rel="noreferrer noopener" target="_blank">
                 <small className="text-muted">docs</small>
               </a>
             </div>
@@ -98,8 +90,8 @@ class Collapses extends Component {
         <Card>
           <CardHeader>
             <i className="fa fa-align-justify"></i><strong>Fade</strong>
-            <div className="card-actions">
+            <div className="card-header-actions">
-              <a href="https://reactstrap.github.io/components/fade/" target="_blank">
+              <a href="https://reactstrap.github.io/components/fade/" rel="noreferrer noopener" target="_blank">
                 <small className="text-muted">docs</small>
               </a>
             </div>

src/views/Base/Dropdowns/Dropdowns.js

@@ -1,9 +1,5 @@
 import React, { Component } from 'react';
-import {
+import { Card, CardBody, CardHeader, Col, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Row, UncontrolledDropdown } from 'reactstrap';
-  Row, Col,
-  Card, CardHeader, CardBody, CardFooter,
-  Dropdown, DropdownToggle, DropdownMenu, DropdownItem, UncontrolledDropdown
-} from 'reactstrap';
 
 class Dropdowns extends Component {
   constructor(props) {
@@ -11,8 +7,8 @@ class Dropdowns extends Component {
 
     this.toggle = this.toggle.bind(this);
     this.state = {
-      dropdownOpen: new Array(6).fill(false)
+      dropdownOpen: new Array(6).fill(false),
-    }
+    };
   }
 
   toggle(i) {
@@ -20,7 +16,7 @@ class Dropdowns extends Component {
       return (index === i ? !element : false);
     });
     this.setState({
-      dropdownOpen: newArray
+      dropdownOpen: newArray,
     });
   }
 
@@ -32,8 +28,8 @@ class Dropdowns extends Component {
             <Card>
               <CardHeader>
                 <i className="fa fa-align-justify"></i><strong>Dropdowns</strong>
-                <div className="card-actions">
+                <div className="card-header-actions">
-                  <a href="https://reactstrap.github.io/components/dropdowns/" target="_blank">
+                  <a href="https://reactstrap.github.io/components/dropdowns/" rel="noreferrer noopener" target="_blank">
                     <small className="text-muted">docs</small>
                   </a>
                 </div>
@@ -124,21 +120,21 @@ class Dropdowns extends Component {
                 <i className="fa fa-align-justify"></i><strong>Custom Dropdowns</strong>
               </CardHeader>
               <CardBody>
-                <Dropdown isOpen={this.state.dropdownOpen[5]} toggle={() => {this.toggle(5)}}>
+                <Dropdown isOpen={this.state.dropdownOpen[5]} toggle={() => {this.toggle(5);}}>
                   <DropdownToggle
                     tag="span"
-                    onClick={() => {this.toggle(5)}}
+                    onClick={() => {this.toggle(5);}}
                     data-toggle="dropdown"
                     aria-expanded={this.state.dropdownOpen[5]}
                   >
                     Custom Dropdown Content <strong> * </strong>
                   </DropdownToggle>
                   <DropdownMenu right>
-                    <div onClick={() => {this.toggle(5)}}>Custom dropdown item 1 </div>
+                    <div onClick={() => {this.toggle(5);}}>Custom dropdown item 1</div>
-                    <div onClick={() => {this.toggle(5)}}>Custom dropdown item 2 </div>
+                    <div onClick={() => {this.toggle(5);}}>Custom dropdown item 2</div>
-                    <div onClick={() => {this.toggle(5)}}>Custom dropdown item 3 </div>
+                    <div onClick={() => {this.toggle(5);}}>Custom dropdown item 3</div>
                     <hr className="my-0" />
-                    <div onClick={() => {this.toggle(5)}}>Custom dropdown item 4 </div>
+                    <div onClick={() => {this.toggle(5);}}>Custom dropdown item 4</div>
                   </DropdownMenu>
                 </Dropdown>
               </CardBody>

src/views/Base/Forms/Forms.js

@@ -1,25 +1,25 @@
 import React, { Component } from 'react';
 import {
-  Row,
-  Col,
   Button,
   ButtonDropdown,
-  DropdownToggle,
-  DropdownMenu,
-  DropdownItem,
   Card,
-  CardHeader,
-  CardFooter,
   CardBody,
+  CardFooter,
+  CardHeader,
+  Col,
   Collapse,
+  DropdownItem,
+  DropdownMenu,
+  DropdownToggle,
   Form,
   FormGroup,
   FormText,
-  Label,
   Input,
   InputGroup,
   InputGroupAddon,
-  InputGroupText
+  InputGroupText,
+  Label,
+  Row,
 } from 'reactstrap';
 
 class Forms extends Component {
@@ -720,7 +720,7 @@ class Forms extends Component {
                             <DropdownToggle caret color="primary">
                               Dropdown
                             </DropdownToggle>
-                            <DropdownMenu className={this.state.first ? "show" : ""}>
+                            <DropdownMenu className={this.state.first ? 'show' : ''}>
                               <DropdownItem>Action</DropdownItem>
                               <DropdownItem>Another Action</DropdownItem>
                               <DropdownItem>Something else here</DropdownItem>
@@ -743,7 +743,7 @@ class Forms extends Component {
                             <DropdownToggle caret color="primary">
                               Dropdown
                             </DropdownToggle>
-                            <DropdownMenu className={this.state.second ? "show" : ""}>
+                            <DropdownMenu className={this.state.second ? 'show' : ''}>
                               <DropdownItem>Action</DropdownItem>
                               <DropdownItem>Another Action</DropdownItem>
                               <DropdownItem>Something else here</DropdownItem>
@@ -763,7 +763,7 @@ class Forms extends Component {
                                           toggle={() => { this.setState({ third: !this.state.third }); }}>
                             {/*<Button id="caret" color="primary">Action</Button>*/}
                             <DropdownToggle caret color="primary">Action</DropdownToggle>
-                            <DropdownMenu className={this.state.third ? "show" : ""}>
+                            <DropdownMenu className={this.state.third ? 'show' : ''}>
                               <DropdownItem>Action</DropdownItem>
                               <DropdownItem>Another Action</DropdownItem>
                               <DropdownItem>Something else here</DropdownItem>
@@ -779,7 +779,7 @@ class Forms extends Component {
                             <DropdownToggle caret color="primary">
                               Dropdown
                             </DropdownToggle>
-                            <DropdownMenu className={this.state.fourth ? "show" : ""}>
+                            <DropdownMenu className={this.state.fourth ? 'show' : ''}>
                               <DropdownItem>Action</DropdownItem>
                               <DropdownItem>Another Action</DropdownItem>
                               <DropdownItem>Something else here</DropdownItem>
@@ -1050,7 +1050,7 @@ class Forms extends Component {
             <Card>
               <CardHeader>
                 <i className="fa fa-edit"></i>Form Elements
-                <div className="card-actions">
+                <div className="card-header-actions">
                   <a href="#" className="btn-setting"><i className="icon-settings"></i></a>
                   <Button className="btn btn-minimize" data-target="#collapseExample" onClick={this.toggle}><i className="icon-arrow-up"></i></Button>
                   <a href="#" className="btn-close"><i className="icon-close"></i></a>
@@ -1131,7 +1131,7 @@ class Forms extends Component {
           </Col>
         </Row>
       </div>
-    )
+    );
   }
 }
 

src/views/Base/Jumbotrons/Jumbotrons.js

@@ -1,13 +1,5 @@
 import React, { Component } from 'react';
-import {
+import { Button, Card, CardBody, CardHeader, Container, Jumbotron } from 'reactstrap';
-  Row,
-  Col,
-  Card,
-  CardHeader,
-  CardBody,
-  CardFooter,
-  Jumbotron, Button, Container
-} from 'reactstrap';
 
 class Jumbotrons extends Component {
 
@@ -17,8 +9,8 @@ class Jumbotrons extends Component {
         <Card>
           <CardHeader>
             <i className="fa fa-align-justify"></i><strong>Jumbotron</strong>
-            <div className="card-actions">
+            <div className="card-header-actions">
-              <a href="https://reactstrap.github.io/components/jumbotron/" target="_blank">
+              <a href="https://reactstrap.github.io/components/jumbotron/" rel="noreferrer noopener" target="_blank">
                 <small className="text-muted">docs</small>
               </a>
             </div>
@@ -38,7 +30,8 @@ class Jumbotrons extends Component {
         </Card>
         <Card>
           <CardHeader>
-            <i className="fa fa-align-justify"></i><strong>Jumbotron</strong><small> fluid</small>
+            <i className="fa fa-align-justify"></i><strong>Jumbotron</strong>
+            <small> fluid</small>
           </CardHeader>
           <CardBody>
             <Jumbotron fluid>

src/views/Base/ListGroups/ListGroups.js

@@ -1,14 +1,5 @@
 import React, { Component } from 'react';
-import {
+import { Badge, Card, CardBody, CardHeader, Col, ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText, Row } from 'reactstrap';
-  Row,
-  Col,
-  Card,
-  CardHeader,
-  CardBody,
-  CardFooter,
-  ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText,
-  Badge
-} from 'reactstrap';
 
 class ListGroups extends Component {
 
@@ -20,8 +11,8 @@ class ListGroups extends Component {
             <Card>
               <CardHeader>
                 <i className="fa fa-align-justify"></i><strong>List Group</strong>
-                <div className="card-actions">
+                <div className="card-header-actions">
-                  <a href="https://reactstrap.github.io/components/listgroup/" target="_blank">
+                  <a href="https://reactstrap.github.io/components/listgroup/" rel="noreferrer noopener" target="_blank">
                     <small className="text-muted">docs</small>
                   </a>
                 </div>
@@ -47,7 +38,8 @@ class ListGroups extends Component {
                 <ListGroup>
                   <ListGroupItem className="justify-content-between">Cras justo odio <Badge className="float-right" pill>14</Badge></ListGroupItem>
                   <ListGroupItem className="justify-content-between">Dapibus ac facilisis in <Badge className="float-right" pill>2</Badge></ListGroupItem>
-                  <ListGroupItem className="justify-content-between">Morbi leo risus <Badge className="float-right" pill color="warning">1</Badge></ListGroupItem>
+                  <ListGroupItem className="justify-content-between">Morbi leo risus <Badge className="float-right" pill
+                                                                                            color="warning">1</Badge></ListGroupItem>
                 </ListGroup>
               </CardBody>
             </Card>

src/views/Base/Navbars/Navbars.js

@@ -1,21 +1,19 @@
 import React, { Component } from 'react';
 import {
-  Row,
-  Col,
   Card,
-  CardHeader,
   CardBody,
+  CardHeader,
   Collapse,
-  Navbar,
+  DropdownItem,
-  NavbarToggler,
+  DropdownMenu,
-  NavbarBrand,
+  DropdownToggle,
   Nav,
+  Navbar,
+  NavbarBrand,
+  NavbarToggler,
   NavItem,
   NavLink,
   UncontrolledDropdown,
-  DropdownToggle,
-  DropdownMenu,
-  DropdownItem
 } from 'reactstrap';
 
 class Navbars extends Component {
@@ -27,19 +25,19 @@ class Navbars extends Component {
     this.toggleNavbar = this.toggleNavbar.bind(this);
     this.state = {
       isOpen: false,
-      collapsed: true
+      collapsed: true,
     };
   }
 
   toggle() {
     this.setState({
-      isOpen: !this.state.isOpen
+      isOpen: !this.state.isOpen,
     });
   }
 
   toggleNavbar() {
     this.setState({
-      collapsed: !this.state.collapsed
+      collapsed: !this.state.collapsed,
     });
   }
 
@@ -49,8 +47,8 @@ class Navbars extends Component {
         <Card>
           <CardHeader>
             <i className="fa fa-align-justify"></i><strong>Navbar</strong>
-            <div className="card-actions">
+            <div className="card-header-actions">
-              <a href="https://reactstrap.github.io/components/navbar/" target="_blank">
+              <a href="https://reactstrap.github.io/components/navbar/" rel="noreferrer noopener" target="_blank">
                 <small className="text-muted">docs</small>
               </a>
             </div>

src/views/Base/Navs/Navs.js

@@ -1,13 +1,5 @@
 import React, { Component } from 'react';
-import {
+import { Card, CardBody, CardHeader, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink } from 'reactstrap';
-  Row,
-  Col,
-  Card,
-  CardHeader,
-  CardBody,
-  Nav, NavItem, NavLink,
-  Dropdown, DropdownToggle, DropdownMenu, DropdownItem
-} from 'reactstrap';
 
 class Navs extends Component {
 
@@ -16,7 +8,7 @@ class Navs extends Component {
 
     this.toggle = this.toggle.bind(this);
     this.state = {
-      dropdownOpen: [false, false]
+      dropdownOpen: [false, false],
     };
   }
 
@@ -25,7 +17,7 @@ class Navs extends Component {
       return (index === i ? !element : false);
     });
     this.setState({
-      dropdownOpen: newArray
+      dropdownOpen: newArray,
     });
   }
 
@@ -35,8 +27,8 @@ class Navs extends Component {
         <Card>
           <CardHeader>
             <i className="fa fa-align-justify"></i><strong>Navs</strong>
-            <div className="card-actions">
+            <div className="card-header-actions">
-              <a href="https://reactstrap.github.io/components/navs/" target="_blank">
+              <a href="https://reactstrap.github.io/components/navs/" rel="noreferrer noopener" target="_blank">
                 <small className="text-muted">docs</small>
               </a>
             </div>
@@ -60,7 +52,8 @@ class Navs extends Component {
             <hr />
             <p>Link Based</p>
             <Nav>
-              <NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled Link</NavLink>
+              <NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled
+              Link</NavLink>
             </Nav>
           </CardBody>
         </Card>
@@ -73,7 +66,7 @@ class Navs extends Component {
               <NavItem>
                 <NavLink href="#" active>Link</NavLink>
               </NavItem>
-              <Dropdown nav isOpen={this.state.dropdownOpen[0]} toggle={() => {this.toggle(0)}}>
+              <Dropdown nav isOpen={this.state.dropdownOpen[0]} toggle={() => {this.toggle(0);}}>
                 <DropdownToggle nav caret>
                   Dropdown
                 </DropdownToggle>
@@ -106,7 +99,7 @@ class Navs extends Component {
               <NavItem>
                 <NavLink href="#" active>Link</NavLink>
               </NavItem>
-              <Dropdown nav isOpen={this.state.dropdownOpen[1]} toggle={() => {this.toggle(1)}}>
+              <Dropdown nav isOpen={this.state.dropdownOpen[1]} toggle={() => {this.toggle(1);}}>
                 <DropdownToggle nav caret>
                   Dropdown
                 </DropdownToggle>
@@ -153,7 +146,8 @@ class Navs extends Component {
             <hr />
             <p>Link based</p>
             <Nav vertical>
-              <NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled Link</NavLink>
+              <NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled
+              Link</NavLink>
             </Nav>
           </CardBody>
         </Card>

src/views/Base/Paginations/Pagnations.js

@@ -1,12 +1,5 @@
 import React, { Component } from 'react';
-import {
+import { Card, CardBody, CardHeader, Pagination, PaginationItem, PaginationLink } from 'reactstrap';
-  Row,
-  Col,
-  Card,
-  CardHeader,
-  CardBody,
-  Pagination, PaginationItem, PaginationLink
-} from 'reactstrap';
 
 class Paginations extends Component {
 
@@ -16,8 +9,8 @@ class Paginations extends Component {
         <Card>
           <CardHeader>
             <i className="fa fa-align-justify"></i><strong>Pagination</strong>
-            <div className="card-actions">
+            <div className="card-header-actions">
-              <a href="https://reactstrap.github.io/components/pagination/" target="_blank">
+              <a href="https://reactstrap.github.io/components/pagination/" rel="noreferrer noopener" target="_blank">
                 <small className="text-muted">docs</small>
               </a>
             </div>
@@ -60,7 +53,8 @@ class Paginations extends Component {
         </Card>
         <Card>
           <CardHeader>
-            <i className="fa fa-align-justify"></i><strong>Pagination</strong><small> disabled and active states</small>
+            <i className="fa fa-align-justify"></i><strong>Pagination</strong>
+            <small> disabled and active states</small>
           </CardHeader>
           <CardBody>
             <Pagination>
@@ -100,7 +94,8 @@ class Paginations extends Component {
         </Card>
         <Card>
           <CardHeader>
-            <i className="fa fa-align-justify"></i><strong>Pagination</strong><small> sizing</small>
+            <i className="fa fa-align-justify"></i><strong>Pagination</strong>
+            <small> sizing</small>
           </CardHeader>
           <CardBody>
             <Pagination size="lg">

src/views/Base/Popovers/Popovers.js

@@ -1,12 +1,5 @@
 import React, { Component } from 'react';
-import {
+import { Button, Card, CardBody, CardHeader, Popover, PopoverBody, PopoverHeader } from 'reactstrap';
-  Row,
-  Col,
-  Card,
-  CardHeader,
-  CardBody,
-  Button, Popover, PopoverHeader, PopoverBody
-} from 'reactstrap';
 
 class PopoverItem extends Component {
   constructor(props) {
@@ -14,13 +7,13 @@ class PopoverItem extends Component {
 
     this.toggle = this.toggle.bind(this);
     this.state = {
-      popoverOpen: false
+      popoverOpen: false,
     };
   }
 
   toggle() {
     this.setState({
-      popoverOpen: !this.state.popoverOpen
+      popoverOpen: !this.state.popoverOpen,
     });
   }
 
@@ -50,27 +43,27 @@ class Popovers extends Component {
       popovers: [
         {
           placement: 'top',
-          text: 'Top'
+          text: 'Top',
         },
         {
           placement: 'bottom',
-          text: 'Bottom'
+          text: 'Bottom',
         },
         {
           placement: 'left',
-          text: 'Left'
+          text: 'Left',
         },
         {
           placement: 'right',
-          text: 'Right'
+          text: 'Right',
-        }
+        },
-      ]
+      ],
     };
   }
 
   toggle() {
     this.setState({
-      popoverOpen: !this.state.popoverOpen
+      popoverOpen: !this.state.popoverOpen,
     });
   }
 
@@ -80,8 +73,8 @@ class Popovers extends Component {
         <Card>
           <CardHeader>
             <i className="fa fa-align-justify"></i><strong>Popovers</strong>
-            <div className="card-actions">
+            <div className="card-header-actions">
-              <a href="https://reactstrap.github.io/components/popovers/" target="_blank">
+              <a href="https://reactstrap.github.io/components/popovers/" rel="noreferrer noopener" target="_blank">
                 <small className="text-muted">docs</small>
               </a>
             </div>

src/views/Base/ProgressBar/ProgressBar.js

@@ -1,10 +1,5 @@
 import React, { Component } from 'react';
-import {
+import { Card, CardBody, CardHeader, Progress } from 'reactstrap';
-  Card,
-  CardHeader,
-  CardBody,
-  Progress
-} from 'reactstrap';
 
 class ProgressBar extends Component {
 
@@ -14,8 +9,8 @@ class ProgressBar extends Component {
         <Card>
           <CardHeader>
             <i className="fa fa-align-justify"></i><strong>Progress</strong>
-            <div className="card-actions">
+            <div className="card-header-actions">
-              <a href="https://reactstrap.github.io/components/progress/" target="_blank">
+              <a href="https://reactstrap.github.io/components/progress/" rel="noreferrer noopener" target="_blank">
                 <small className="text-muted">docs</small>
               </a>
             </div>

src/views/Base/Switches/Switches.js

@@ -1,5 +1,5 @@
-import React, {Component} from "react";
+import React, { Component } from 'react';
-import {Row, Col, Card, CardHeader, CardBody, Label, Input, Table} from 'reactstrap';
+import { Card, CardBody, CardHeader, Col, Input, Label, Row, Table } from 'reactstrap';
 
 class Switches extends Component {
   render() {
@@ -948,8 +948,7 @@ class Switches extends Component {
         </Row>
       </div>
 
-
+    );
-    )
   }
 }
 

src/views/Base/Tables/Tables.js

@@ -1,17 +1,5 @@
 import React, { Component } from 'react';
-import {
+import { Badge, Card, CardBody, CardHeader, Col, Pagination, PaginationItem, PaginationLink, Row, Table } from 'reactstrap';
-  Badge,
-  Row,
-  Col,
-  Card,
-  CardHeader,
-  CardBody,
-  Table,
-  Pagination,
-  PaginationItem,
-  PaginationLink
-} from 'reactstrap';
-
 
 class Tables extends Component {
   render() {
@@ -398,7 +386,7 @@ class Tables extends Component {
         </Row>
       </div>
 
-    )
+    );
   }
 }
 

src/views/Base/Tabs/Tabs.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import {Badge, Row, Col, TabContent, TabPane, Nav, NavItem, NavLink} from 'reactstrap';
+import { Badge, Col, Nav, NavItem, NavLink, Row, TabContent, TabPane } from 'reactstrap';
 import classnames from 'classnames';
 
 class Tabs extends Component {
@@ -9,14 +9,14 @@ class Tabs extends Component {
 
     this.toggle = this.toggle.bind(this);
     this.state = {
-      activeTab: '1'
+      activeTab: '1',
     };
   }
 
   toggle(tab) {
     if (this.state.activeTab !== tab) {
       this.setState({
-        activeTab: tab
+        activeTab: tab,
       });
     }
   }
@@ -134,7 +134,7 @@ class Tabs extends Component {
                   className={classnames({ active: this.state.activeTab === '1' })}
                   onClick={() => { this.toggle('1'); }}
                 >
-                  <i className="icon-calculator"></i> <span className={ this.state.activeTab === '1' ? "" : "d-none"}> Calculator</span>
+                  <i className="icon-calculator"></i> <span className={this.state.activeTab === '1' ? '' : 'd-none'}> Calculator</span>
                 </NavLink>
               </NavItem>
               <NavItem>
@@ -143,7 +143,7 @@ class Tabs extends Component {
                   onClick={() => { this.toggle('2'); }}
                 >
                   <i className="icon-basket-loaded"></i> <span
-                  className={ this.state.activeTab === '2' ? "" : "d-none"}> Shopping cart</span>
+                  className={this.state.activeTab === '2' ? '' : 'd-none'}> Shopping cart</span>
                 </NavLink>
               </NavItem>
               <NavItem>
@@ -151,7 +151,7 @@ class Tabs extends Component {
                   className={classnames({ active: this.state.activeTab === '3' })}
                   onClick={() => { this.toggle('3'); }}
                 >
-                  <i className="icon-pie-chart"></i> <span className={ this.state.activeTab === '3' ? "" : "d-none"}> Charts</span>
+                  <i className="icon-pie-chart"></i> <span className={this.state.activeTab === '3' ? '' : 'd-none'}> Charts</span>
                 </NavLink>
               </NavItem>
             </Nav>
@@ -186,7 +186,7 @@ class Tabs extends Component {
                   className={classnames({ active: this.state.activeTab === '1' })}
                   onClick={() => { this.toggle('1'); }}
                 >
-                  <i className="icon-calculator"></i> <span className={ this.state.activeTab === '1' ? "" : "d-none"}> Calculator </span>{'\u00A0'}<Badge
+                  <i className="icon-calculator"></i> <span className={this.state.activeTab === '1' ? '' : 'd-none'}> Calculator </span>{'\u00A0'}<Badge
                   color="success">New</Badge>
                 </NavLink>
               </NavItem>
@@ -196,7 +196,7 @@ class Tabs extends Component {
                   onClick={() => { this.toggle('2'); }}
                 >
                   <i className="icon-basket-loaded"></i> <span
-                  className={ this.state.activeTab === '2' ? "" : "d-none"}> Shopping cart </span>{'\u00A0'}<Badge pill color="danger">29</Badge>
+                  className={this.state.activeTab === '2' ? '' : 'd-none'}> Shopping cart </span>{'\u00A0'}<Badge pill color="danger">29</Badge>
                 </NavLink>
               </NavItem>
               <NavItem>
@@ -204,7 +204,7 @@ class Tabs extends Component {
                   className={classnames({ active: this.state.activeTab === '3' })}
                   onClick={() => { this.toggle('3'); }}
                 >
-                  <i className="icon-pie-chart"></i> <span className={ this.state.activeTab === '3' ? "" : "d-none"}> Charts</span>
+                  <i className="icon-pie-chart"></i> <span className={this.state.activeTab === '3' ? '' : 'd-none'}> Charts</span>
                 </NavLink>
               </NavItem>
             </Nav>
@@ -234,7 +234,7 @@ class Tabs extends Component {
           </Col>
         </Row>
       </div>
-    )
+    );
   }
 }
 

src/views/Base/Tooltips/Tooltips.js

@@ -1,11 +1,5 @@
 import React, { Component } from 'react';
-import {
+import { Button, Card, CardBody, CardHeader, Tooltip, UncontrolledTooltip } from 'reactstrap';
-  Card,
-  CardHeader,
-  CardBody,
-  Tooltip, UncontrolledTooltip,
-  Button
-} from 'reactstrap';
 
 class TooltipItem extends React.Component {
   constructor(props) {
@@ -13,13 +7,13 @@ class TooltipItem extends React.Component {
 
     this.toggle = this.toggle.bind(this);
     this.state = {
-      tooltipOpen: false
+      tooltipOpen: false,
     };
   }
 
   toggle() {
     this.setState({
-      tooltipOpen: !this.state.tooltipOpen
+      tooltipOpen: !this.state.tooltipOpen,
     });
   }
 
@@ -48,21 +42,21 @@ class Tooltips extends Component {
       tooltips: [
         {
           placement: 'top',
-          text: 'Top'
+          text: 'Top',
         },
         {
           placement: 'bottom',
-          text: 'Bottom'
+          text: 'Bottom',
         },
         {
           placement: 'left',
-          text: 'Left'
+          text: 'Left',
         },
         {
           placement: 'right',
-          text: 'Right'
+          text: 'Right',
-        }
+        },
-      ]
+      ],
     };
   }
 
@@ -71,7 +65,7 @@ class Tooltips extends Component {
       return (index === i ? !element : false);
     });
     this.setState({
-      tooltipOpen: newArray
+      tooltipOpen: newArray,
     });
   }
 
@@ -81,33 +75,35 @@ class Tooltips extends Component {
         <Card>
           <CardHeader>
             <i className="fa fa-align-justify"></i><strong>Tooltips</strong>
-            <div className="card-actions">
+            <div className="card-header-actions">
-              <a href="https://reactstrap.github.io/components/tooltips/" target="_blank">
+              <a href="https://reactstrap.github.io/components/tooltips/" rel="noreferrer noopener" target="_blank">
                 <small className="text-muted">docs</small>
               </a>
             </div>
           </CardHeader>
           <CardBody>
             <p>Somewhere in here is a <a href="#" id="TooltipExample">tooltip</a>.</p>
-            <Tooltip placement="right" isOpen={this.state.tooltipOpen[0]} target="TooltipExample" toggle={() => {this.toggle(0)}}>
+            <Tooltip placement="right" isOpen={this.state.tooltipOpen[0]} target="TooltipExample" toggle={() => {this.toggle(0);}}>
               Hello world!
             </Tooltip>
           </CardBody>
         </Card>
         <Card>
           <CardHeader>
-            <i className="fa fa-align-justify"></i><strong>Tooltip</strong><small> disable autohide</small>
+            <i className="fa fa-align-justify"></i><strong>Tooltip</strong>
+            <small> disable autohide</small>
           </CardHeader>
           <CardBody>
             <p>Sometimes you need to allow users to select text within a <a href="#" id="DisabledAutoHideExample">tooltip</a>.</p>
-            <Tooltip placement="top" isOpen={this.state.tooltipOpen[1]} autohide={false} target="DisabledAutoHideExample" toggle={() => {this.toggle(1)}}>
+            <Tooltip placement="top" isOpen={this.state.tooltipOpen[1]} autohide={false} target="DisabledAutoHideExample" toggle={() => {this.toggle(1);}}>
               Try to select this text!
             </Tooltip>
           </CardBody>
         </Card>
         <Card>
           <CardHeader>
-            <i className="fa fa-align-justify"></i><strong>Tooltip</strong><small> list</small>
+            <i className="fa fa-align-justify"></i><strong>Tooltip</strong>
+            <small> list</small>
           </CardHeader>
           <CardBody>
             {this.state.tooltips.map((tooltip, i) => {
@@ -117,7 +113,8 @@ class Tooltips extends Component {
         </Card>
         <Card>
           <CardHeader>
-            <i className="fa fa-align-justify"></i><strong>Tooltip</strong><small> uncontrolled</small>
+            <i className="fa fa-align-justify"></i><strong>Tooltip</strong>
+            <small> uncontrolled</small>
           </CardHeader>
           <CardBody>
             <p>Somewhere in here is a <a href="#" id="UncontrolledTooltipExample">tooltip</a>.</p>

src/views/Base/index.js

@@ -0,0 +1,22 @@
+import Breadcrumbs from './Breadcrumbs';
+import Cards from './Cards';
+import Carousels from './Carousels';
+import Collapses from './Collapses';
+import Dropdowns from './Dropdowns';
+import Forms from './Forms';
+import Jumbotrons from './Jumbotrons';
+import ListGroups from './ListGroups';
+import Navbars from './Navbars';
+import Navs from './Navs';
+import Popovers from './Popovers';
+import Paginations from './Paginations';
+import ProgressBar from './ProgressBar';
+import Switches from './Switches';
+import Tables from './Tables';
+import Tabs from './Tabs';
+import Tooltips from './Tooltips';
+
+export {
+  Breadcrumbs, Cards, Carousels, Collapses, Dropdowns, Forms, Jumbotrons, ListGroups, Navbars, Navs, Popovers, ProgressBar, Switches, Tables, Tabs, Tooltips, Paginations
+};
+

src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import {Row, Col, Card, CardHeader, CardBody, CardFooter,  ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem, Button } from 'reactstrap';
+import { Button, ButtonDropdown, Card, CardBody, CardHeader, Col, DropdownItem, DropdownMenu, DropdownToggle, Row } from 'reactstrap';
 
 class ButtonDropdowns extends Component {
 
@@ -8,14 +8,14 @@ class ButtonDropdowns extends Component {
 
     this.toggle = this.toggle.bind(this);
     this.state = {
-      dropdownOpen: new Array(16).fill(false)
+      dropdownOpen: new Array(16).fill(false),
     };
   }
 
   toggle(i) {
     const newArray = this.state.dropdownOpen.map((element, index) => { return (index === i ? !element : false); });
     this.setState({
-      dropdownOpen: newArray
+      dropdownOpen: newArray,
     });
   }
 
@@ -27,8 +27,8 @@ class ButtonDropdowns extends Component {
             <Card>
               <CardHeader>
                 <i className="fa fa-align-justify"></i><strong>Button Dropdown</strong>
-                <div className="card-actions">
+                <div className="card-header-actions">
-                  <a href="https://reactstrap.github.io/components/button-dropdown/" target="_blank">
+                  <a href="https://reactstrap.github.io/components/button-dropdown/" rel="noreferrer noopener" target="_blank">
                     <small className="text-muted">docs</small>
                   </a>
                 </div>
@@ -235,7 +235,7 @@ class ButtonDropdowns extends Component {
               </CardHeader>
               <CardBody>
                 <ButtonDropdown dropup className="mr-1" isOpen={this.state.dropdownOpen[15]} toggle={() => { this.toggle(15); }}>
-                  <DropdownToggle caret caret size="lg">
+                  <DropdownToggle caret size="lg">
                     Dropup
                   </DropdownToggle>
                   <DropdownMenu>
@@ -250,7 +250,7 @@ class ButtonDropdowns extends Component {
           </Col>
         </Row>
       </div>
-    )
+    );
   }
 }
 

src/views/Buttons/ButtonGroups/ButtonGroups.js

@@ -1,5 +1,22 @@
 import React, { Component } from 'react';
-import {Row, Col, Card, CardHeader, CardBody, ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem, Button, ButtonGroup, ButtonToolbar, Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
+import {
+  Button,
+  ButtonDropdown,
+  ButtonGroup,
+  ButtonToolbar,
+  Card,
+  CardBody,
+  CardHeader,
+  Col,
+  DropdownItem,
+  DropdownMenu,
+  DropdownToggle,
+  Input,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupText,
+  Row,
+} from 'reactstrap';
 
 class ButtonGroups extends Component {
 
@@ -8,14 +25,14 @@ class ButtonGroups extends Component {
 
     this.toggle = this.toggle.bind(this);
     this.state = {
-      dropdownOpen: new Array(2).fill(false)
+      dropdownOpen: new Array(2).fill(false),
     };
   }
 
   toggle(i) {
     const newArray = this.state.dropdownOpen.map((element, index) => { return (index === i ? !element : false); });
     this.setState({
-      dropdownOpen: newArray
+      dropdownOpen: newArray,
     });
   }
 
@@ -27,8 +44,8 @@ class ButtonGroups extends Component {
             <Card>
               <CardHeader>
                 <i className="fa fa-align-justify"></i><strong>Button Group</strong>
-                <div className="card-actions">
+                <div className="card-header-actions">
-                  <a href="https://reactstrap.github.io/components/button-group/" target="_blank">
+                  <a href="https://reactstrap.github.io/components/button-group/" rel="noreferrer noopener" target="_blank">
                     <small className="text-muted">docs</small>
                   </a>
                 </div>
@@ -66,7 +83,8 @@ class ButtonGroups extends Component {
             </Card>
             <Card>
               <CardHeader>
-                <i className="fa fa-align-justify"></i><strong>Button Toolbar</strong> <small>mix with input groups</small>
+                <i className="fa fa-align-justify"></i><strong>Button Toolbar</strong>
+                <small>mix with input groups</small>
               </CardHeader>
               <CardBody>
                 <ButtonToolbar className="mb-3">
@@ -162,7 +180,7 @@ class ButtonGroups extends Component {
           </Col>
         </Row>
       </div>
-    )
+    );
   }
 }
 

src/views/Buttons/Buttons/Buttons.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import {Row, Col, Card, CardHeader, CardBody, Button} from 'reactstrap';
+import { Button, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
 
 class Buttons extends Component {
   render() {
@@ -207,7 +207,7 @@ class Buttons extends Component {
           </Col>
         </Row>
       </div>
-    )
+    );
   }
 }
 

src/views/Buttons/SocialButtons/SocialButtons.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import {Row, Col, Card, CardHeader, CardBody, Button} from 'reactstrap';
+import { Button, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
 
 class SocialButtons extends Component {
   render() {
@@ -311,7 +311,7 @@ class SocialButtons extends Component {
         </Row>
       </div>
 
-    )
+    );
   }
 }
 

src/views/Buttons/index.js

@@ -0,0 +1,8 @@
+import ButtonDropdowns from './ButtonDropdowns';
+import ButtonGroups from './ButtonGroups';
+import Buttons from './Buttons';
+import SocialButtons from './SocialButtons';
+
+export { 
+  ButtonDropdowns, ButtonGroups, Buttons, SocialButtons 
+}

src/views/Charts/Charts.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Bar, Doughnut, Line, Pie, Polar, Radar } from 'react-chartjs-2';
-import {CardColumns, Card, CardHeader, CardBody} from 'reactstrap';
+import { Card, CardBody, CardColumns, CardHeader } from 'reactstrap';
 
 const line = {
   labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
@@ -24,9 +24,9 @@ const line = {
       pointHoverBorderWidth: 2,
       pointRadius: 1,
       pointHitRadius: 10,
-      data: [65, 59, 80, 81, 56, 55, 40]
+      data: [65, 59, 80, 81, 56, 55, 40],
-    }
+    },
-  ]
+  ],
 };
 
 const bar = {
@@ -39,30 +39,31 @@ const bar = {
       borderWidth: 1,
       hoverBackgroundColor: 'rgba(255,99,132,0.4)',
       hoverBorderColor: 'rgba(255,99,132,1)',
-      data: [65, 59, 80, 81, 56, 55, 40]
+      data: [65, 59, 80, 81, 56, 55, 40],
-    }
+    },
-  ]
+  ],
 };
 
 const doughnut = {
   labels: [
     'Red',
     'Green',
-    'Yellow'
+    'Yellow',
   ],
-  datasets: [{
+  datasets: [
+    {
       data: [300, 50, 100],
       backgroundColor: [
         '#FF6384',
         '#36A2EB',
-      '#FFCE56'
+        '#FFCE56',
       ],
       hoverBackgroundColor: [
         '#FF6384',
         '#36A2EB',
-      '#FFCE56'
+        '#FFCE56',
-    ]
+      ],
-  }]
+    }],
 };
 
 const radar = {
@@ -76,7 +77,7 @@ const radar = {
       pointBorderColor: '#fff',
       pointHoverBackgroundColor: '#fff',
       pointHoverBorderColor: 'rgba(179,181,198,1)',
-      data: [65, 59, 90, 81, 56, 55, 40]
+      data: [65, 59, 90, 81, 56, 55, 40],
     },
     {
       label: 'My Second dataset',
@@ -86,47 +87,49 @@ const radar = {
       pointBorderColor: '#fff',
       pointHoverBackgroundColor: '#fff',
       pointHoverBorderColor: 'rgba(255,99,132,1)',
-      data: [28, 48, 40, 19, 96, 27, 100]
+      data: [28, 48, 40, 19, 96, 27, 100],
-    }
+    },
-  ]
+  ],
 };
 
 const pie = {
   labels: [
     'Red',
     'Green',
-    'Yellow'
+    'Yellow',
   ],
-  datasets: [{
+  datasets: [
+    {
       data: [300, 50, 100],
       backgroundColor: [
         '#FF6384',
         '#36A2EB',
-      '#FFCE56'
+        '#FFCE56',
       ],
       hoverBackgroundColor: [
         '#FF6384',
         '#36A2EB',
-      '#FFCE56'
+        '#FFCE56',
-    ]
+      ],
-  }]
+    }],
 };
 
 const polar = {
-  datasets: [{
+  datasets: [
+    {
       data: [
         11,
         16,
         7,
         3,
-      14
+        14,
       ],
       backgroundColor: [
         '#FF6384',
         '#4BC0C0',
         '#FFCE56',
         '#E7E9ED',
-      '#36A2EB'
+        '#36A2EB',
       ],
       label: 'My dataset' // for legend
     }],
@@ -135,8 +138,8 @@ const polar = {
     'Green',
     'Yellow',
     'Grey',
-    'Blue'
+    'Blue',
-  ]
+  ],
 };
 
 class Charts extends Component {
@@ -147,7 +150,7 @@ class Charts extends Component {
           <Card>
             <CardHeader>
               Line Chart
-              <div className="card-actions">
+              <div className="card-header-actions">
                 <a href="http://www.chartjs.org">
                   <small className="text-muted">docs</small>
                 </a>
@@ -155,18 +158,14 @@ class Charts extends Component {
             </CardHeader>
             <CardBody>
               <div className="chart-wrapper">
-                <Line data={line}
+                <Line data={line} options={{ maintainAspectRatio: false, }} />
-                      options={{
-                    maintainAspectRatio: false
-                  }}
-                />
               </div>
             </CardBody>
           </Card>
           <Card>
             <CardHeader>
               Bar Chart
-              <div className="card-actions">
+              <div className="card-header-actions">
                 <a href="http://www.chartjs.org">
                   <small className="text-muted">docs</small>
                 </a>
@@ -174,18 +173,14 @@ class Charts extends Component {
             </CardHeader>
             <CardBody>
               <div className="chart-wrapper">
-                <Bar data={bar}
+                <Bar data={bar} options={{ maintainAspectRatio: false, }} />
-                     options={{
-                  maintainAspectRatio: false
-                }}
-                />
               </div>
             </CardBody>
           </Card>
           <Card>
             <CardHeader>
               Doughnut Chart
-              <div className="card-actions">
+              <div className="card-header-actions">
                 <a href="http://www.chartjs.org">
                   <small className="text-muted">docs</small>
                 </a>
@@ -200,7 +195,7 @@ class Charts extends Component {
           <Card>
             <CardHeader>
               Radar Chart
-              <div className="card-actions">
+              <div className="card-header-actions">
                 <a href="http://www.chartjs.org">
                   <small className="text-muted">docs</small>
                 </a>
@@ -215,7 +210,7 @@ class Charts extends Component {
           <Card>
             <CardHeader>
               Pie Chart
-              <div className="card-actions">
+              <div className="card-header-actions">
                 <a href="http://www.chartjs.org">
                   <small className="text-muted">docs</small>
                 </a>
@@ -230,7 +225,7 @@ class Charts extends Component {
           <Card>
             <CardHeader>
               Polar Area Chart
-              <div className="card-actions">
+              <div className="card-header-actions">
                 <a href="http://www.chartjs.org">
                   <small className="text-muted">docs</small>
                 </a>
@@ -244,7 +239,7 @@ class Charts extends Component {
           </Card>
         </CardColumns>
       </div>
-    )
+    );
   }
 }
 

src/views/Icons/Flags/Flags.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
-import {Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
+import { Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
-
 
 class Flags extends Component {
   render() {
@@ -13,7 +12,8 @@ class Flags extends Component {
           <CardBody>
             <Row className="text-center">
               <Col className="mb-5 text-left" xs="12">
-                For using the flags inline with text add the classes <code>.flag-icon</code> and <code>.flag-icon-xx</code> (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty span. If you want to have a squared version flag then add the class flag-icon-squared as well.
+                For using the flags inline with text add the classes <code>.flag-icon</code> and <code>.flag-icon-xx</code> (where xx is the ISO 3166-1-alpha-2
+                code of a country) to an empty span. If you want to have a squared version flag then add the class flag-icon-squared as well.
               </Col>
               <Col className="mb-5" xs="3" sm="2">
                 <i className="flag-icon flag-icon-ad h1" title="ad" id="ad"></i>
@@ -1015,7 +1015,7 @@ class Flags extends Component {
           </CardBody>
         </Card>
       </div>
-    )
+    );
   }
 }
 

src/views/Icons/FontAwesome/FontAwesome.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
-import {Alert, Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
+import { Alert, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
-
 
 class FontAwesome extends Component {
   render() {
@@ -3696,7 +3695,7 @@ class FontAwesome extends Component {
         </Card>
       </div>
 
-    )
+    );
   }
 }
 

src/views/Icons/SimpleLineIcons/SimpleLineIcons.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import {Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
+import { Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
 
 class SimpleLineIcons extends Component {
   render() {
@@ -748,7 +748,7 @@ class SimpleLineIcons extends Component {
           </CardBody>
         </Card>
       </div>
-    )
+    );
   }
 }
 

src/views/Icons/index.js

@@ -0,0 +1,7 @@
+import Flags from './Flags';
+import FontAwesome from './FontAwesome';
+import SimpleLineIcons from './SimpleLineIcons';
+
+export {
+  Flags, FontAwesome, SimpleLineIcons
+};

src/views/Notifications/Alerts/Alerts.js

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
-import {Row, Col, Card, CardHeader, CardBody, Alert} from 'reactstrap';
+import { Alert, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
 
 class Alerts extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      visible: true
+      visible: true,
     };
 
     this.onDismiss = this.onDismiss.bind(this);
@@ -24,8 +24,8 @@ class Alerts extends Component {
             <Card>
               <CardHeader>
                 <i className="fa fa-align-justify"></i><strong>Alerts</strong>
-                <div className="card-actions">
+                <div className="card-header-actions">
-                  <a href="https://reactstrap.github.io/components/alerts/" target="_blank">
+                  <a href="https://reactstrap.github.io/components/alerts/" rel="noreferrer noopener" target="_blank">
                     <small className="text-muted">docs</small>
                   </a>
                 </div>
@@ -61,7 +61,8 @@ class Alerts extends Component {
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
-                <i className="fa fa-align-justify"></i><strong>Alerts</strong><small> use <code>.alert-link</code> to provide links</small>
+                <i className="fa fa-align-justify"></i><strong>Alerts</strong>
+                <small> use <code>.alert-link</code> to provide links</small>
               </CardHeader>
               <CardBody>
                 <Alert color="primary">
@@ -96,7 +97,8 @@ class Alerts extends Component {
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
-                <i className="fa fa-align-justify"></i><strong>Alerts</strong> <small>additional content</small>
+                <i className="fa fa-align-justify"></i><strong>Alerts</strong>
+                <small>additional content</small>
               </CardHeader>
               <CardBody>
                 <Alert color="success">
@@ -117,7 +119,8 @@ class Alerts extends Component {
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
-                <i className="fa fa-align-justify"></i><strong>Alerts</strong> <small>dismissing</small>
+                <i className="fa fa-align-justify"></i><strong>Alerts</strong>
+                <small>dismissing</small>
               </CardHeader>
               <CardBody>
                 <Alert color="info" isOpen={this.state.visible} toggle={this.onDismiss}>
@@ -128,7 +131,7 @@ class Alerts extends Component {
           </Col>
         </Row>
       </div>
-    )
+    );
   }
 }
 

src/views/Notifications/Badges/Badges.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import {Row, Col, Card, CardHeader, CardBody, CardFooter, Badge, Button} from 'reactstrap';
+import { Badge, Button, Card, CardBody, CardFooter, CardHeader, Col, Row } from 'reactstrap';
 
 class Badges extends Component {
   render() {
@@ -10,8 +10,8 @@ class Badges extends Component {
             <Card>
               <CardHeader>
                 <i className="fa fa-align-justify"></i><strong>Badges</strong>
-                <div className="card-actions">
+                <div className="card-header-actions">
-                  <a href="https://reactstrap.github.io/components/badge/" target="_blank">
+                  <a href="https://reactstrap.github.io/components/badge/" rel="noreferrer noopener" target="_blank">
                     <small className="text-muted">docs</small>
                   </a>
                 </div>
@@ -34,7 +34,8 @@ class Badges extends Component {
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
-                <i className="fa fa-align-justify"></i><strong>Badges</strong> <small>contextual variations</small>
+                <i className="fa fa-align-justify"></i><strong>Badges</strong>
+                <small>contextual variations</small>
               </CardHeader>
               <CardBody>
                 <Badge className="mr-1" color="primary">Primary</Badge>
@@ -49,7 +50,8 @@ class Badges extends Component {
             </Card>
             <Card>
               <CardHeader>
-                <i className="fa fa-align-justify"></i><strong>Badges</strong> <small>pill badges</small>
+                <i className="fa fa-align-justify"></i><strong>Badges</strong>
+                <small>pill badges</small>
               </CardHeader>
               <CardBody>
                 <Badge className="mr-1" color="primary" pill>Primary</Badge>
@@ -64,7 +66,8 @@ class Badges extends Component {
             </Card>
             <Card>
               <CardHeader>
-                <i className="fa fa-align-justify"></i><strong>Badges</strong> <small>links</small>
+                <i className="fa fa-align-justify"></i><strong>Badges</strong>
+                <small>links</small>
               </CardHeader>
               <CardBody>
                 <Badge className="mr-1" href="#" color="primary">Primary</Badge>
@@ -80,7 +83,7 @@ class Badges extends Component {
           </Col>
         </Row>
       </div>
-    )
+    );
   }
 }
 

src/views/Notifications/Modals/Modals.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
-import {Row, Col, Button, Modal, ModalHeader, ModalBody, ModalFooter, Card, CardHeader, CardBody} from 'reactstrap';
+import { Button, Card, CardBody, CardHeader, Col, Modal, ModalBody, ModalFooter, ModalHeader, Row } from 'reactstrap';
-
 
 class Modals extends Component {
 
@@ -14,7 +13,7 @@ class Modals extends Component {
       success: false,
       warning: false,
       danger: false,
-      info: false
+      info: false,
     };
 
     this.toggle = this.toggle.bind(this);
@@ -29,49 +28,49 @@ class Modals extends Component {
 
   toggle() {
     this.setState({
-      modal: !this.state.modal
+      modal: !this.state.modal,
     });
   }
 
   toggleLarge() {
     this.setState({
-      large: !this.state.large
+      large: !this.state.large,
     });
   }
 
   toggleSmall() {
     this.setState({
-      small: !this.state.small
+      small: !this.state.small,
     });
   }
 
   togglePrimary() {
     this.setState({
-      primary: !this.state.primary
+      primary: !this.state.primary,
     });
   }
 
   toggleSuccess() {
     this.setState({
-      success: !this.state.success
+      success: !this.state.success,
     });
   }
 
   toggleWarning() {
     this.setState({
-      warning: !this.state.warning
+      warning: !this.state.warning,
     });
   }
 
   toggleDanger() {
     this.setState({
-      danger: !this.state.danger
+      danger: !this.state.danger,
     });
   }
 
   toggleInfo() {
     this.setState({
-      info: !this.state.info
+      info: !this.state.info,
     });
   }
 
@@ -227,7 +226,7 @@ class Modals extends Component {
           </Col>
         </Row>
       </div>
-    )
+    );
   }
 }
 

src/views/Notifications/index.js

@@ -0,0 +1,7 @@
+import Alerts from './Alerts';
+import Badges from './Badges';
+import Modals from './Modals';
+
+export {
+  Alerts, Badges, Modals
+};

src/views/Pages/Login/Login.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
-import {Container, Row, Col, CardGroup, Card, CardBody, Button, Input, InputGroup, InputGroupAddon, InputGroupText} from 'reactstrap';
+import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
-
 
 class Login extends Component {
   render() {

src/views/Pages/Page404/Page404.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import {Container, Row, Col, Button, Input, InputGroupAddon, InputGroup, InputGroupText} from 'reactstrap';
+import { Button, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
 
 class Page404 extends Component {
   render() {

src/views/Pages/Page500/Page500.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import {Container, Row, Col, Button, Input, InputGroup, InputGroupAddon, InputGroupText} from 'reactstrap';
+import { Button, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
 
 class Page500 extends Component {
   render() {

src/views/Pages/Register/Register.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import {Container, Row, Col, Card, CardBody, CardFooter, Button, Input, InputGroup, InputGroupAddon, InputGroupText} from 'reactstrap';
+import { Button, Card, CardBody, CardFooter, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
 
 class Register extends Component {
   render() {

src/views/Pages/index.js

@@ -0,0 +1,8 @@
+import Login from './Login';
+import Page404 from './Page404';
+import Page500 from './Page500';
+import Register from './Register';
+
+export {
+  Login, Page404, Page500, Register
+};

src/views/Theme/Colors/Colors.js

@@ -97,7 +97,7 @@ class Colors extends Component {
           </div>
         </div>
       </div>
-    )
+    );
   }
 }
 

src/views/Theme/Typography/Typography.js

@@ -63,7 +63,8 @@ class Typography extends Component {
             Headings
           </div>
           <div className="card-body">
-            <p><code className="highlighter-rouge">.h1</code> through <code className="highlighter-rouge">.h6</code> classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.</p>
+            <p><code className="highlighter-rouge">.h1</code> through <code className="highlighter-rouge">.h6</code> classes are also available, for when you
+              want to match the font styling of a heading but cannot use the associated HTML element.</p>
             <div className="bd-example">
               <p className="h1">h1. Bootstrap heading</p>
               <p className="h2">h2. Bootstrap heading</p>
@@ -79,7 +80,8 @@ class Typography extends Component {
             Display headings
           </div>
           <div className="card-body">
-            <p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
+            <p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using
+              a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
             <div className="bd-example bd-example-type">
               <table className="table">
                 <tbody>
@@ -105,14 +107,21 @@ class Typography extends Component {
             Inline text elements
           </div>
           <div className="card-body">
-            <p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
+            <p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using
+              a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
             <div className="bd-example">
               <p>You can use the mark tag to <mark>highlight</mark> text.</p>
-              <p><del>This line of text is meant to be treated as deleted text.</del></p>
+              <p>
+                <del>This line of text is meant to be treated as deleted text.</del>
+              </p>
               <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
-              <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
+              <p>
+                <ins>This line of text is meant to be treated as an addition to the document.</ins>
+              </p>
               <p><u>This line of text will render as underlined</u></p>
-              <p><small>This line of text is meant to be treated as fine print.</small></p>
+              <p>
+                <small>This line of text is meant to be treated as fine print.</small>
+              </p>
               <p><strong>This line rendered as bold text.</strong></p>
               <p><em>This line rendered as italicized text.</em></p>
             </div>
@@ -123,7 +132,8 @@ class Typography extends Component {
             Description list alignment
           </div>
           <div className="card-body">
-            <p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a <code className="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis.</p>
+            <p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can
+              optionally add a <code className="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis.</p>
             <div className="bd-example">
               <dl className="row">
                 <dt className="col-sm-3">Description lists</dt>
@@ -153,7 +163,7 @@ class Typography extends Component {
           </div>
         </div>
       </div>
-    )
+    );
   }
 }
 

src/views/Theme/index.js

@@ -0,0 +1,6 @@
+import Colors from './Colors';
+import Typography from './Typography';
+
+export {
+  Colors, Typography,
+};