init

.editorconfig

@@ -0,0 +1,14 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.env

@@ -0,0 +1,2 @@
+PORT=3000
+CHOKIDAR_USEPOLLING=true

README.md

@@ -1,2 +1,177 @@
-# leaflet-react-map
- 
+[![@coreui coreui](https://img.shields.io/badge/@coreui%20-coreui-lightgrey.svg?style=flat-square)](https://github.com/coreui/coreui)
+[![npm package][npm-coreui-badge]][npm-coreui]
+[![NPM downloads][npm-coreui-download]][npm-coreui]  
+[![@coreui react](https://img.shields.io/badge/@coreui%20-react-lightgrey.svg?style=flat-square)](https://github.com/coreui/react)
+[![npm package][npm-coreui-react-badge]][npm-coreui-react]
+[![NPM downloads][npm-coreui-react-download]][npm-coreui-react]
+
+[npm-coreui]: https://www.npmjs.com/package/@coreui/coreui
+[npm-coreui-badge]: https://img.shields.io/npm/v/@coreui/coreui.png?style=flat-square
+[npm-coreui-download]: https://img.shields.io/npm/dm/@coreui/coreui.svg?style=flat-square
+[npm-coreui-react]: https://www.npmjs.com/package/@coreui/react
+[npm-coreui-react-badge]: https://img.shields.io/npm/v/@coreui/react.png?style=flat-square
+[npm-coreui-react-download]: https://img.shields.io/npm/dm/@coreui/react.svg?style=flat-square
+
+# CoreUI Free React Admin Template v2 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%20React%20Admin%20Template%20&url=https://coreui.io/react/&hashtags=bootstrap,admin,template,dashboard,panel,free,angular,react,vue)
+
+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) and [Designer News](https://www.designernews.co/stories/81127). Thanks in advance!
+
+Curious why I decided to create CoreUI? Please read this article: [Jack of all trades, master of none. Why Bootstrap Admin Templates suck.](https://medium.com/@lukaszholeczek/jack-of-all-trades-master-of-none-5ea53ef8a1f#.7eqx1bcd8)
+
+CoreUI is an Open Source 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/coreui/free-bootstrap-admin-template-ajax), [HTML5](https://github.com/coreui/free-angular-admin-template), [Angular 2+](https://github.com/coreui/free-angular-admin-template), [React.js](https://github.com/coreui/free-react-admin-template) & [Vue.js](https://github.com/coreui/free-vue-admin-template), [.NET Core 2](https://github.com/coreui/free-dotnet-admin-template).
+
+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!
+
+## Table of Contents
+
+* [Versions](#versions)
+* [CoreUI Pro](#coreui-pro)
+* [Admin Templates built on top of CoreUI Pro](#admin-templates-built-on-top-of-coreui-pro)
+* [Installation](#installation)
+* [Usage](#usage)
+* [What's included](#whats-included)
+* [Documentation](#documentation)
+* [Contributing](#contributing)
+* [Versioning](#versioning)
+* [Creators](#creators)
+* [Community](#community)
+* [Community Projects](#community-projects)
+* [License](#license)
+* [Support CoreUI Development](#support-coreui-development)
+
+## Versions
+
+* [CoreUI Free Bootstrap Admin Template](https://github.com/coreui/coreui-free-bootstrap-admin-template)
+* [CoreUI Free Bootstrap Admin Template (Ajax)](https://github.com/coreui/coreui-free-bootstrap-admin-template-ajax)
+* [CoreUI Free Angular 2+ Admin Template](https://github.com/coreui/coreui-free-angular-admin-template)
+* 🚧 CoreUI Free .NET Core 2 Admin Template (Available Soon)
+* [CoreUI Free React.js Admin Template](https://github.com/coreui/coreui-free-react-admin-template)
+* [CoreUI Free Vue.js Admin Template](https://github.com/coreui/coreui-free-vue-admin-template)
+
+## CoreUI Pro
+
+* 💪  [CoreUI Pro Bootstrap Admin Template](https://coreui.io/pro/)
+* 💪  [CoreUI Pro Bootstrap Admin Template (Ajax)](https://coreui.io/pro/)
+* 💪  [CoreUI Pro Angular Admin Template](https://coreui.io/pro/angular)
+* 💪  [CoreUI Pro React Admin Template](https://coreui.io/pro/react)
+* 💪  [CoreUI Pro Vue Admin Template](https://coreui.io/pro/vue)
+
+## Admin Templates built on top of CoreUI Pro
+
+| CoreUI Pro | Prime | Root | Alba | Leaf |
+| --- | --- | --- | --- | --- |
+| [![CoreUI Pro React Admin Template](https://coreui.io/assets/img/example-coureui.jpg)](https://coreui.io/pro/react/) | [![Prime React Admin Template](https://genesisui.com/assets/img/templates/prime1280.jpg)](https://genesisui.com/admin-templates/reactjs/prime/?support=1) | [![Root React Admin Template](https://genesisui.com/assets/img/templates/root1280.jpg)](https://genesisui.com/admin-templates/reactjs/root/?support=1) | [![Alba React Admin Template](https://genesisui.com/assets/img/templates/alba1280.jpg)](https://genesisui.com/admin-templates/reactjs/alba/?support=1) | [![Leaf React Admin Template](https://genesisui.com/assets/img/templates/leaf1280.jpg)](https://genesisui.com/admin-templates/reactjs/leaf/?support=1)
+
+## Installation
+
+``` bash
+# clone the repo
+$ git clone https://github.com/coreui/coreui-free-react-admin-template.git my-project
+
+# go into app's directory
+$ cd my-project
+
+# install app's dependencies
+$ npm install
+```
+
+## Create React App
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app)
+
+see also:
+[User Guide](CRA.md)
+
+### Basic usage
+
+``` bash
+# dev server  with hot reload at http://localhost:3000
+$ npm start
+```
+
+Navigate to [http://localhost:3000](http://localhost:3000). The app will automatically reload if you change any of the source files.
+
+### Build
+
+Run `build` to build the project. The build artifacts will be stored in the `build/` directory.
+
+```bash
+# build for production with minification
+$ npm run build
+```
+
+## What's included
+
+Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
+
+```
+CoreUI-React#v2.0.0
+├── public/          #static files
+│   ├── assets/      #assets
+│   └── index.html   #html template
+│
+├── src/             #project root
+│   ├── containers/  #container source
+│   ├── scss/        #user scss/css source
+│   ├── views/       #views source
+│   ├── App.js
+│   ├── App.test.js
+│   ├── index.js
+│   ├── _nav.js      #sidebar config
+│   └── routes.js    #routes config
+│
+└── package.json
+```
+
+## Documentation
+
+The documentation for the CoreUI  Admin Template is hosted at our website [CoreUI for React](https://coreui.io/react/)
+
+
+## Contributing
+
+Please read through our [contributing guidelines](https://github.com/coreui/coreui-free-react-admin-template/blob/master/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
+
+Editor preferences are available in the [editor config](https://github.com/coreui/coreui-free-react-admin-template/blob/master/.editorconfig) for easy use in common text editors. Read more and download plugins at <http://editorconfig.org>.
+
+## Versioning
+
+For transparency into our release cycle and in striving to maintain backward compatibility, CoreUI Free Admin Template is maintained under [the Semantic Versioning guidelines](http://semver.org/).
+
+See [the Releases section of our project](https://github.com/coreui/coreui-free-react-admin-template/releases) for changelogs for each release version.
+
+## Creators
+
+**Łukasz Holeczek**
+* <https://twitter.com/lukaszholeczek>
+* <https://github.com/mrholek>
+
+**Andrzej Kopański**
+* <https://github.com/xidedix>
+
+## Community
+
+Get updates on CoreUI's development and chat with the project maintainers and community members.
+
+- Follow [@core_ui on Twitter](https://twitter.com/core_ui).
+- Read and subscribe to [CoreUI Blog](https://coreui.ui/blog/).
+
+### Community Projects
+
+Some of projects created by community but not maintained by CoreUI team.
+
+* [NuxtJS + Vue CoreUI](https://github.com/muhibbudins/nuxt-coreui)
+* [Colmena](https://github.com/colmena/colmena)
+* [mvelosop/AspNetCore2CoreUI](https://github.com/mvelosop/AspNetCore2CoreUI)
+
+## Copyright and license
+
+copyright 2018 creativeLabs Łukasz Holeczek. Code released under [the MIT license](LICENSE).
+There is only one limitation you can't can’t re-distribute the CoreUI as stock. You can’t do this if you modify the CoreUI. In past we faced some problems with persons who tried to sell CoreUI based templates.
+
+## 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), buying [CoreUI Pro Version](https://coreui.io/pro) or buying one of our [premium 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

@@ -0,0 +1,75 @@
+{
+  "name": "@coreui/coreui-free-react-admin-template",
+  "version": "2.6.0",
+  "description": "CoreUI React Open Source Bootstrap 4 Admin Template",
+  "author": "Łukasz Holeczek",
+  "homepage": "https://coreui.io",
+  "copyright": "Copyright 2017-2019 creativeLabs Łukasz Holeczek",
+  "license": "MIT",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:coreui/coreui-free-react-admin-template.git"
+  },
+  "dependencies": {
+    "@coreui/coreui": "^2.1.16",
+    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
+    "@coreui/icons": "0.3.0",
+    "@coreui/react": "^2.5.7",
+    "bootstrap": "^4.4.1",
+    "chart.js": "^2.9.3",
+    "classnames": "^2.2.6",
+    "core-js": "^3.6.5",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "flag-icon-css": "^3.4.6",
+    "font-awesome": "^4.7.0",
+    "leaflet": "^1.6.0",
+    "node-sass": "^4.14.1",
+    "prop-types": "^15.7.2",
+    "react": "^16.13.1",
+    "react-app-polyfill": "^1.0.6",
+    "react-chartjs-2": "^2.9.0",
+    "react-dom": "^16.13.1",
+    "react-router-config": "^5.1.1",
+    "react-router-dom": "^5.2.0",
+    "react-test-renderer": "^16.13.1",
+    "reactstrap": "^8.4.1",
+    "simple-line-icons": "^2.4.1"
+  },
+  "devDependencies": {
+    "react-scripts": "^3.4.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "test:cov": "npm test -- --coverage --watchAll=false",
+    "test:debug": "react-scripts --inspect-brk test --runInBand",
+    "eject": "react-scripts eject"
+  },
+  "bugs": {
+    "url": "https://github.com/coreui/coreui-free-react-admin-template/issues"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 9",
+    "not op_mini all"
+  ],
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx}",
+      "!**/*index.js",
+      "!src/serviceWorker.js",
+      "!src/polyfill.js"
+    ]
+  },
+  "engines": {
+    "node": ">=8.10",
+    "npm": ">=6"
+  }
+}

public/index.html

@@ -0,0 +1,83 @@
+<!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 for React - Open Source Bootstrap Admin Template">
+    <meta name="author" content="Łukasz Holeczek">
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,CSS,SCSS,HTML,RWD,Dashboard,React">
+    <title>CoreUI for React</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`.
+    -->
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      // Shared ID
+      gtag('config', 'UA-118965717-3');
+      // React.js ID
+      gtag('config', 'UA-118965717-6');
+    </script>
+  </head>
+
+  <!-- BODY options, add following classes to body to change options
+
+  // Header options
+  1. '.header-fixed'					- Fixed Header
+
+  // Brand options
+  1. '.brand-minimized'       - Minimized brand (Only symbol)
+
+  // Sidebar options
+  1. '.sidebar-fixed'					- Fixed Sidebar
+  2. '.sidebar-hidden'				- Hidden Sidebar
+  3. '.sidebar-off-canvas'		- Off Canvas Sidebar
+  4. '.sidebar-minimized'			- Minimized Sidebar (Only icons)
+  5. '.sidebar-compact'			  - Compact Sidebar
+
+  // Aside options
+  1. '.aside-menu-fixed'			- Fixed Aside Menu
+  2. '.aside-menu-hidden'			- Hidden Aside Menu
+  3. '.aside-menu-off-canvas'	- Off Canvas Aside Menu
+
+  // Breadcrumb options
+  1. '.breadcrumb-fixed'			- Fixed Breadcrumb
+
+  // Footer options
+  1. '.footer-fixed'					- Fixed footer
+
+  -->
+
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      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` or `yarn start`.
+      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/img/favicon.png",
+      "sizes": "100x100",
+      "type": "image/png"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

src/App.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import { HashRouter, Route, Switch } from 'react-router-dom';
+// import { renderRoutes } from 'react-router-config';
+import './App.scss';
+
+const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>;
+
+// Containers
+const DefaultLayout = React.lazy(() => import('./containers/DefaultLayout'));
+
+// Pages
+const Login = React.lazy(() => import('./views/Pages/Login'));
+const Register = React.lazy(() => import('./views/Pages/Register'));
+const Page404 = React.lazy(() => import('./views/Pages/Page404'));
+const Page500 = React.lazy(() => import('./views/Pages/Page500'));
+
+class App extends Component {
+
+  render() {
+    return (
+      <HashRouter>
+          <React.Suspense fallback={loading()}>
+            <Switch>
+              <Route exact path="/login" name="Login Page" render={props => <Login {...props}/>} />
+              <Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} />
+              <Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>} />
+              <Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>} />
+              <Route path="/" name="Home" render={props => <DefaultLayout {...props}/>} />
+            </Switch>
+          </React.Suspense>
+      </HashRouter>
+    );
+  }
+}
+
+export default App;

src/App.scss

@@ -0,0 +1,11 @@
+// Styles
+// CoreUI Icons Set
+@import '~@coreui/icons/css/coreui-icons.css';
+// 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.scss';

src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import {shallow} from 'enzyme/build';
+import App from './App';
+
+
+it('mounts without crashing', () => {
+  const wrapper = shallow(<App />);
+  wrapper.unmount()
+});

src/_nav.js

@@ -0,0 +1,285 @@
+export default {
+  items: [
+    {
+      name: 'Dashboard',
+      url: '/dashboard',
+      icon: 'icon-speedometer',
+      badge: {
+        variant: 'info',
+        text: 'NEW',
+      },
+    },
+    {
+      title: true,
+      name: 'Theme',
+      wrapper: {            // optional wrapper object
+        element: '',        // required valid HTML5 element tag
+        attributes: {}        // optional valid JS object with JS API naming ex: { className: "my-class", style: { fontFamily: "Verdana" }, id: "my-id"}
+      },
+      class: ''             // optional class names space delimited list for title item ex: "text-center"
+    },
+    {
+      name: 'Colors',
+      url: '/theme/colors',
+      icon: 'icon-drop',
+    },
+    {
+      name: 'Typography',
+      url: '/theme/typography',
+      icon: 'icon-pencil',
+    },
+    {
+      title: true,
+      name: 'Components',
+      wrapper: {
+        element: '',
+        attributes: {},
+      },
+    },
+    {
+      name: 'Base',
+      url: '/base',
+      icon: 'icon-puzzle',
+      children: [
+        {
+          name: 'Breadcrumbs',
+          url: '/base/breadcrumbs',
+          icon: 'icon-puzzle',
+        },
+        {
+          name: 'Cards',
+          url: '/base/cards',
+          icon: 'icon-puzzle',
+        },
+        {
+          name: 'Carousels',
+          url: '/base/carousels',
+          icon: 'icon-puzzle',
+        },
+        {
+          name: 'Collapses',
+          url: '/base/collapses',
+          icon: 'icon-puzzle',
+        },
+        {
+          name: 'Dropdowns',
+          url: '/base/dropdowns',
+          icon: 'icon-puzzle',
+        },
+        {
+          name: 'Forms',
+          url: '/base/forms',
+          icon: 'icon-puzzle',
+        },
+        {
+          name: 'Jumbotrons',
+          url: '/base/jumbotrons',
+          icon: 'icon-puzzle',
+        },
+        {
+          name: 'List groups',
+          url: '/base/list-groups',
+          icon: 'icon-puzzle',
+        },
+        {
+          name: 'Navs',
+          url: '/base/navs',
+          icon: 'icon-puzzle',
+        },
+        {
+          name: 'Paginations',
+          url: '/base/paginations',
+          icon: 'icon-puzzle',
+        },
+        {
+          name: 'Popovers',
+          url: '/base/popovers',
+          icon: 'icon-puzzle',
+        },
+        {
+          name: 'Progress Bar',
+          url: '/base/progress-bar',
+          icon: 'icon-puzzle',
+        },
+        {
+          name: 'Switches',
+          url: '/base/switches',
+          icon: 'icon-puzzle',
+        },
+        {
+          name: 'Tables',
+          url: '/base/tables',
+          icon: 'icon-puzzle',
+        },
+        {
+          name: 'Tabs',
+          url: '/base/tabs',
+          icon: 'icon-puzzle',
+        },
+        {
+          name: 'Tooltips',
+          url: '/base/tooltips',
+          icon: 'icon-puzzle',
+        },
+      ],
+    },
+    {
+      name: 'Maps',
+      url: '/maps',
+      icon: 'icon-location-pin',
+    },
+    {
+      name: 'Buttons',
+      url: '/buttons',
+      icon: 'icon-cursor',
+      children: [
+        {
+          name: 'Buttons',
+          url: '/buttons/buttons',
+          icon: 'icon-cursor',
+        },
+        {
+          name: 'Button dropdowns',
+          url: '/buttons/button-dropdowns',
+          icon: 'icon-cursor',
+        },
+        {
+          name: 'Button groups',
+          url: '/buttons/button-groups',
+          icon: 'icon-cursor',
+        },
+        {
+          name: 'Brand Buttons',
+          url: '/buttons/brand-buttons',
+          icon: 'icon-cursor',
+        },
+      ],
+    },
+    {
+      name: 'Charts',
+      url: '/charts',
+      icon: 'icon-pie-chart',
+    },
+    {
+      name: 'Icons',
+      url: '/icons',
+      icon: 'icon-star',
+      children: [
+        {
+          name: 'CoreUI Icons',
+          url: '/icons/coreui-icons',
+          icon: 'icon-star',
+          badge: {
+            variant: 'info',
+            text: 'NEW',
+          },
+        },
+        {
+          name: 'Flags',
+          url: '/icons/flags',
+          icon: 'icon-star',
+        },
+        {
+          name: 'Font Awesome',
+          url: '/icons/font-awesome',
+          icon: 'icon-star',
+          badge: {
+            variant: 'secondary',
+            text: '4.7',
+          },
+        },
+        {
+          name: 'Simple Line Icons',
+          url: '/icons/simple-line-icons',
+          icon: 'icon-star',
+        },
+      ],
+    },
+    {
+      name: 'Notifications',
+      url: '/notifications',
+      icon: 'icon-bell',
+      children: [
+        {
+          name: 'Alerts',
+          url: '/notifications/alerts',
+          icon: 'icon-bell',
+        },
+        {
+          name: 'Badges',
+          url: '/notifications/badges',
+          icon: 'icon-bell',
+        },
+        {
+          name: 'Modals',
+          url: '/notifications/modals',
+          icon: 'icon-bell',
+        },
+      ],
+    },
+    {
+      name: 'Widgets',
+      url: '/widgets',
+      icon: 'icon-calculator',
+      badge: {
+        variant: 'info',
+        text: 'NEW',
+      },
+    },
+    {
+      divider: true,
+    },
+    {
+      title: true,
+      name: 'Extras',
+    },
+    {
+      name: 'Pages',
+      url: '/pages',
+      icon: 'icon-star',
+      children: [
+        {
+          name: 'Login',
+          url: '/login',
+          icon: 'icon-star',
+        },
+        {
+          name: 'Register',
+          url: '/register',
+          icon: 'icon-star',
+        },
+        {
+          name: 'Error 404',
+          url: '/404',
+          icon: 'icon-star',
+        },
+        {
+          name: 'Error 500',
+          url: '/500',
+          icon: 'icon-star',
+        },
+      ],
+    },
+    {
+      name: 'Disabled',
+      url: '/dashboard',
+      icon: 'icon-ban',
+      attributes: { disabled: true },
+    },
+    // {
+    //   name: 'Download CoreUI',
+    //   url: 'https://coreui.io/react/',
+    //   icon: 'icon-cloud-download',
+    //   class: 'mt-auto',
+    //   variant: 'success',
+    //   attributes: { target: '_blank', rel: "noopener" },
+    // },
+    // {
+    //   name: 'Try CoreUI PRO',
+    //   url: 'https://coreui.io/pro/react/',
+    //   icon: 'icon-layers',
+    //   variant: 'danger',
+    //   attributes: { target: '_blank', rel: "noopener" },
+    // },
+  ],
+};

src/assets/img/brand/logo.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="707.1px" height="200px" viewBox="0 0 707.1 200" enable-background="new 0 0 707.1 200" xml:space="preserve">
+<polygon fill="#61DAFB" points="0,150 0,50 86.6,0 173.2,50 173.2,150 86.6,200 "/>
+<polygon fill="#FFFFFF" points="86.6,133.3 57.7,116.7 57.7,83.3 86.6,66.7 115.5,83.3 144.3,66.7 86.6,33.3 28.9,66.7 28.9,133.3 
+	86.6,166.7 144.3,133.3 115.5,116.7 "/>
+<polygon opacity="0.04" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="0,50 86.6,100 86.6,0 "/>
+<polygon opacity="0.04" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="0,150 86.6,200 86.6,100 "/>
+<polygon opacity="0.08" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="86.6,100 173.2,150 173.2,50 
+	"/>
+<polygon fill-opacity="0" points="86.6,100 0,50 0,150 "/>
+<polygon opacity="0.08" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="173.2,150 86.6,100 86.6,200 
+	"/>
+<polygon opacity="0.08" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="173.2,50 86.6,0 86.6,100 "/>
+<g>
+	<path fill="#333333" d="M290.4,127.3c1,0,1.8,0.4,2.6,1.1l7.2,7.8c-4,4.9-8.8,8.7-14.6,11.3c-5.8,2.6-12.7,3.9-20.8,3.9
+		c-7.2,0-13.8-1.2-19.5-3.7c-5.8-2.5-10.7-5.9-14.8-10.3c-4.1-4.4-7.2-9.7-9.4-15.8c-2.2-6.1-3.3-12.8-3.3-20
+		c0-7.3,1.2-14.1,3.6-20.1c2.4-6.1,5.8-11.4,10.3-15.8c4.4-4.4,9.7-7.8,15.8-10.3s12.9-3.7,20.4-3.7c7.2,0,13.6,1.2,19,3.5
+		s10.1,5.4,13.9,9.2l-6.1,8.4c-0.4,0.5-0.8,1-1.4,1.4s-1.3,0.6-2.3,0.6s-2.1-0.4-3.2-1.2s-2.5-1.7-4.1-2.6c-1.7-0.9-3.8-1.8-6.3-2.6
+		c-2.5-0.8-5.8-1.2-9.7-1.2c-4.6,0-8.8,0.8-12.7,2.4c-3.8,1.6-7.2,3.9-9.9,6.9s-4.9,6.6-6.5,10.8c-1.6,4.3-2.3,9-2.3,14.3
+		c0,5.5,0.8,10.4,2.3,14.6c1.6,4.3,3.7,7.9,6.3,10.8c2.7,2.9,5.8,5.2,9.4,6.7c3.6,1.6,7.5,2.3,11.6,2.3c2.5,0,4.7-0.1,6.7-0.4
+		c2-0.3,3.8-0.7,5.5-1.3s3.3-1.3,4.8-2.3c1.5-0.9,3-2.1,4.5-3.4c0.4-0.4,0.9-0.7,1.4-1C289.3,127.4,289.9,127.3,290.4,127.3z"/>
+	<path fill="#333333" d="M407.5,101.5c0,7.2-1.2,13.8-3.6,19.9s-5.7,11.4-10.1,15.8c-4.3,4.5-9.5,7.9-15.6,10.4s-12.8,3.7-20.2,3.7
+		c-7.4,0-14.1-1.2-20.2-3.7s-11.3-6-15.7-10.4c-4.3-4.5-7.7-9.7-10.1-15.8c-2.4-6.1-3.6-12.7-3.6-19.9c0-7.2,1.2-13.8,3.6-19.9
+		s5.7-11.4,10.1-15.8c4.3-4.5,9.6-7.9,15.7-10.4s12.8-3.7,20.2-3.7c7.4,0,14.1,1.3,20.2,3.8s11.3,6,15.6,10.4
+		c4.3,4.4,7.7,9.7,10.1,15.8C406.3,87.7,407.5,94.3,407.5,101.5z M388.9,101.5c0-5.4-0.7-10.2-2.1-14.4c-1.4-4.3-3.5-7.9-6.1-10.8
+		c-2.7-3-5.9-5.2-9.7-6.8c-3.8-1.6-8.1-2.4-12.9-2.4s-9.1,0.8-12.9,2.4s-7.1,3.8-9.8,6.8c-2.7,3-4.7,6.6-6.2,10.8
+		c-1.4,4.3-2.2,9.1-2.2,14.4c0,5.4,0.7,10.2,2.2,14.4c1.4,4.3,3.5,7.9,6.2,10.8s5.9,5.2,9.8,6.8c3.8,1.6,8.1,2.4,12.9,2.4
+		s9.1-0.8,12.9-2.4c3.8-1.6,7-3.8,9.7-6.8c2.7-2.9,4.7-6.5,6.1-10.8C388.2,111.7,388.9,106.9,388.9,101.5z"/>
+	<path fill="#333333" d="M440.6,112.2v38.1h-18.2V52.7h29.8c6.7,0,12.4,0.7,17.1,2.1c4.7,1.4,8.6,3.3,11.7,5.8
+		c3,2.5,5.3,5.4,6.7,8.9c1.4,3.4,2.1,7.2,2.1,11.4c0,3.3-0.5,6.4-1.5,9.3s-2.4,5.6-4.2,8c-1.8,2.4-4.1,4.5-6.8,6.3
+		c-2.7,1.8-5.7,3.2-9.1,4.3c2.3,1.3,4.3,3.2,5.9,5.6l24.4,36h-16.3c-1.6,0-2.9-0.3-4-0.9c-1.1-0.6-2-1.5-2.8-2.7l-20.5-31.3
+		c-0.8-1.2-1.6-2-2.5-2.5s-2.3-0.7-4.1-0.7h-7.7V112.2z M440.6,99.1h11.3c3.4,0,6.4-0.4,8.9-1.3s4.6-2,6.3-3.5
+		c1.6-1.5,2.9-3.3,3.7-5.4c0.8-2.1,1.2-4.3,1.2-6.8c0-4.9-1.6-8.8-4.9-11.4c-3.3-2.7-8.2-4-15-4h-11.6v32.4H440.6z"/>
+	<path fill="#333333" d="M571.8,52.7v14.4h-43.3v27.1h34.1v14h-34.1v27.6h43.3v14.5h-61.6V52.7H571.8z"/>
+	<path fill="#61DAFB" d="M626.8,135.7c3.5,0,6.6-0.6,9.4-1.8c2.8-1.2,5.1-2.8,7-4.9c1.9-2.1,3.4-4.7,4.4-7.7s1.5-6.4,1.5-10.1V52.7
+		h18.2v58.5c0,5.8-0.9,11.2-2.8,16.1c-1.9,4.9-4.6,9.2-8.1,12.8c-3.5,3.6-7.8,6.4-12.8,8.4s-10.6,3-16.9,3s-11.9-1-16.9-3
+		s-9.2-4.8-12.7-8.4c-3.5-3.6-6.2-7.8-8-12.8c-1.9-4.9-2.8-10.3-2.8-16.1V52.7h18.2v58.4c0,3.7,0.5,7.1,1.5,10.1s2.5,5.6,4.4,7.7
+		s4.2,3.8,7,5C620.1,135.1,623.3,135.7,626.8,135.7z"/>
+	<path fill="#61DAFB" d="M706.2,150.3H688V52.7h18.2V150.3z"/>
+</g>
+</svg>

src/assets/img/brand/sygnet.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="173.2px" height="200px" viewBox="0 0 173.2 200" enable-background="new 0 0 173.2 200" xml:space="preserve">
+<polygon fill="#61DAFB" points="0,150 0,50 86.6,0 173.2,50 173.2,150 86.6,200 "/>
+<polygon fill="#FFFFFF" points="86.6,133.3 57.7,116.7 57.7,83.3 86.6,66.7 115.5,83.3 144.3,66.7 86.6,33.3 28.9,66.7 28.9,133.3 
+	86.6,166.7 144.3,133.3 115.5,116.7 "/>
+<polygon opacity="0.04" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="0,50 86.6,100 86.6,0 "/>
+<polygon opacity="0.04" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="0,150 86.6,200 86.6,100 "/>
+<polygon opacity="0.08" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="86.6,100 173.2,150 173.2,50 
+	"/>
+<polygon fill-opacity="0" points="86.6,100 0,50 0,150 "/>
+<polygon opacity="0.08" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="173.2,150 86.6,100 86.6,200 
+	"/>
+<polygon opacity="0.08" stroke="#FFFFFF" stroke-miterlimit="10" enable-background="new    " points="173.2,50 86.6,0 86.6,100 "/>
+</svg>

src/components/LeafletMap/index.js

@@ -0,0 +1,26 @@
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+
+export var MapTypes = {
+    _TRACKING_: 'TRACKING_MAP',
+    _POSITION_: 'POSITION_MAP',
+    _HEAT_: 'HEAT_MAP'
+}
+
+export class LMap {
+    constructor(id, options, type = MapTypes._TRACKING_){
+        this.map = L.map(id, options);
+        this.mapType = type;
+    }
+
+    setType(type = MapTypes._TRACKING_){
+        this.mapType = type;
+    }
+    getType(){
+        return this.mapType;
+    }
+
+    setTileLayer(templateUrl, options) {
+        L.tileLayer(templateUrl, options).addTo(this.map);
+    }
+}

src/containers/DefaultLayout/DefaultAside.js

@@ -0,0 +1,317 @@
+import React, { Component } from 'react';
+import { Nav, NavItem, NavLink, Progress, TabContent, TabPane, ListGroup, ListGroupItem } from 'reactstrap';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { AppSwitch } from '@coreui/react'
+
+const propTypes = {
+  children: PropTypes.node,
+};
+
+const defaultProps = {};
+
+class DefaultAside extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      activeTab: '1',
+    };
+  }
+
+  toggle(tab) {
+    if (this.state.activeTab !== tab) {
+      this.setState({
+        activeTab: tab,
+      });
+    }
+  }
+
+  render() {
+
+    // eslint-disable-next-line
+    const { children, ...attributes } = this.props;
+
+    return (
+      <React.Fragment>
+        <Nav tabs>
+          <NavItem>
+            <NavLink className={classNames({ active: this.state.activeTab === '1' })}
+                     onClick={() => {
+                       this.toggle('1');
+                     }}>
+              <i className="icon-list"></i>
+            </NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink className={classNames({ active: this.state.activeTab === '2' })}
+                     onClick={() => {
+                       this.toggle('2');
+                     }}>
+              <i className="icon-speech"></i>
+            </NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink className={classNames({ active: this.state.activeTab === '3' })}
+                     onClick={() => {
+                       this.toggle('3');
+                     }}>
+              <i className="icon-settings"></i>
+            </NavLink>
+          </NavItem>
+        </Nav>
+        <TabContent activeTab={this.state.activeTab}>
+          <TabPane tabId="1">
+            <ListGroup className="list-group-accent" tag={'div'}>
+              <ListGroupItem className="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Today</ListGroupItem>
+              <ListGroupItem action tag="a" href="#" className="list-group-item-accent-warning list-group-item-divider">
+                <div className="avatar float-right">
+                  <img className="img-avatar" src="assets/img/avatars/7.jpg" alt="admin@bootstrapmaster.com"></img>
+                </div>
+                <div>Meeting with <strong>Lucas</strong> </div>
+                <small className="text-muted mr-3">
+                  <i className="icon-calendar"></i>&nbsp; 1 - 3pm
+                </small>
+                <small className="text-muted">
+                  <i className="icon-location-pin"></i> Palo Alto, CA
+                </small>
+              </ListGroupItem>
+              <ListGroupItem action tag="a" href="#" className="list-group-item-accent-info list-group-item-divider">
+                <div className="avatar float-right">
+                  <img className="img-avatar" src="assets/img/avatars/4.jpg" alt="admin@bootstrapmaster.com"></img>
+                </div>
+                <div>Skype with <strong>Megan</strong></div>
+                <small className="text-muted mr-3">
+                  <i className="icon-calendar"></i>&nbsp; 4 - 5pm
+                </small>
+                <small className="text-muted">
+                  <i className="icon-social-skype"></i> On-line
+                </small>
+              </ListGroupItem>
+              <ListGroupItem className="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</ListGroupItem>
+              <ListGroupItem action tag="a" href="#" className="list-group-item-accent-danger list-group-item-divider">
+                <div>New UI Project - <strong>deadline</strong></div>
+                <small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 10 - 11pm</small>
+                <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={'assets/img/avatars/2.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
+                  </div>
+                  <div className="avatar avatar-xs">
+                    <img src={'assets/img/avatars/3.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
+                  </div>
+                  <div className="avatar avatar-xs">
+                    <img src={'assets/img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
+                  </div>
+                  <div className="avatar avatar-xs">
+                    <img src={'assets/img/avatars/5.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
+                  </div>
+                  <div className="avatar avatar-xs">
+                    <img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
+                  </div>
+                </div>
+              </ListGroupItem>
+              <ListGroupItem action tag="a" href="#" className="list-group-item-accent-success list-group-item-divider">
+                <div><strong>#10 Startups.Garden</strong> Meetup</div>
+                <small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 1 - 3pm</small>
+                <small className="text-muted"><i className="icon-location-pin"></i>&nbsp; Palo Alto, CA</small>
+              </ListGroupItem>
+              <ListGroupItem action tag="a" href="#" className="list-group-item-accent-primary list-group-item-divider">
+                <div><strong>Team meeting</strong></div>
+                <small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 4 - 6pm</small>
+                <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={'assets/img/avatars/2.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
+                  </div>
+                  <div className="avatar avatar-xs">
+                    <img src={'assets/img/avatars/3.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
+                  </div>
+                  <div className="avatar avatar-xs">
+                    <img src={'assets/img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
+                  </div>
+                  <div className="avatar avatar-xs">
+                    <img src={'assets/img/avatars/5.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
+                  </div>
+                  <div className="avatar avatar-xs">
+                    <img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
+                  </div>
+                  <div className="avatar avatar-xs">
+                    <img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
+                  </div>
+                  <div className="avatar avatar-xs">
+                    <img src={'assets/img/avatars/8.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
+                  </div>
+                </div>
+              </ListGroupItem>
+            </ListGroup>
+          </TabPane>
+          <TabPane tabId="2" className="p-3">
+            <div className="message">
+              <div className="py-3 pb-5 mr-3 float-left">
+                <div className="avatar">
+                  <img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
+                  <span className="avatar-status badge-success"></span>
+                </div>
+              </div>
+              <div>
+                <small className="text-muted">Lukasz Holeczek</small>
+                <small className="text-muted float-right mt-1">1:52 PM</small>
+              </div>
+              <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
+              <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                tempor incididunt...
+              </small>
+            </div>
+            <hr />
+            <div className="message">
+              <div className="py-3 pb-5 mr-3 float-left">
+                <div className="avatar">
+                  <img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
+                  <span className="avatar-status badge-success"></span>
+                </div>
+              </div>
+              <div>
+                <small className="text-muted">Lukasz Holeczek</small>
+                <small className="text-muted float-right mt-1">1:52 PM</small>
+              </div>
+              <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
+              <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                tempor incididunt...
+              </small>
+            </div>
+            <hr />
+            <div className="message">
+              <div className="py-3 pb-5 mr-3 float-left">
+                <div className="avatar">
+                  <img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
+                  <span className="avatar-status badge-success"></span>
+                </div>
+              </div>
+              <div>
+                <small className="text-muted">Lukasz Holeczek</small>
+                <small className="text-muted float-right mt-1">1:52 PM</small>
+              </div>
+              <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
+              <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                tempor incididunt...
+              </small>
+            </div>
+            <hr />
+            <div className="message">
+              <div className="py-3 pb-5 mr-3 float-left">
+                <div className="avatar">
+                  <img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
+                  <span className="avatar-status badge-success"></span>
+                </div>
+              </div>
+              <div>
+                <small className="text-muted">Lukasz Holeczek</small>
+                <small className="text-muted float-right mt-1">1:52 PM</small>
+              </div>
+              <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
+              <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                tempor incididunt...
+              </small>
+            </div>
+            <hr />
+            <div className="message">
+              <div className="py-3 pb-5 mr-3 float-left">
+                <div className="avatar">
+                  <img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
+                  <span className="avatar-status badge-success"></span>
+                </div>
+              </div>
+              <div>
+                <small className="text-muted">Lukasz Holeczek</small>
+                <small className="text-muted float-right mt-1">1:52 PM</small>
+              </div>
+              <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
+              <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                tempor incididunt...
+              </small>
+            </div>
+          </TabPane>
+          <TabPane tabId="3" className="p-3">
+            <h6>Settings</h6>
+
+            <div className="aside-options">
+              <div className="clearfix mt-4">
+                <small><b>Option 1</b></small>
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'}/>
+              </div>
+              <div>
+                <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                  tempor incididunt ut labore et dolore magna aliqua.
+                </small>
+              </div>
+            </div>
+
+            <div className="aside-options">
+              <div className="clearfix mt-3">
+                <small><b>Option 2</b></small>
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} size={'sm'}/>
+              </div>
+              <div>
+                <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                  tempor incididunt ut labore et dolore magna aliqua.
+                </small>
+              </div>
+            </div>
+
+            <div className="aside-options">
+              <div className="clearfix mt-3">
+                <small><b>Option 3</b></small>
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'} disabled/>
+                <div>
+                  <small className="text-muted">Option disabled.</small>
+                </div>
+              </div>
+            </div>
+
+            <div className="aside-options">
+              <div className="clearfix mt-3">
+                <small><b>Option 4</b></small>
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'} />
+              </div>
+            </div>
+
+            <hr />
+            <h6>System Utilization</h6>
+
+            <div className="text-uppercase mb-1 mt-4">
+              <small><b>CPU Usage</b></small>
+            </div>
+            <Progress className="progress-xs" color="info" value="25" />
+            <small className="text-muted">348 Processes. 1/4 Cores.</small>
+
+            <div className="text-uppercase mb-1 mt-2">
+              <small><b>Memory Usage</b></small>
+            </div>
+            <Progress className="progress-xs" color="warning" value="70" />
+            <small className="text-muted">11444GB/16384MB</small>
+
+            <div className="text-uppercase mb-1 mt-2">
+              <small><b>SSD 1 Usage</b></small>
+            </div>
+            <Progress className="progress-xs" color="danger" value="95" />
+            <small className="text-muted">243GB/256GB</small>
+
+            <div className="text-uppercase mb-1 mt-2">
+              <small><b>SSD 2 Usage</b></small>
+            </div>
+            <Progress className="progress-xs" color="success" value="10" />
+            <small className="text-muted">25GB/256GB</small>
+          </TabPane>
+        </TabContent>
+      </React.Fragment>
+    );
+  }
+}
+
+DefaultAside.propTypes = propTypes;
+DefaultAside.defaultProps = defaultProps;
+
+export default DefaultAside;

src/containers/DefaultLayout/DefaultFooter.js

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

src/containers/DefaultLayout/DefaultHeader.js

@@ -0,0 +1,83 @@
+import React, { Component } from 'react';
+import { Link, NavLink } from 'react-router-dom';
+import { Badge, UncontrolledDropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem } from 'reactstrap';
+import PropTypes from 'prop-types';
+
+import { AppAsideToggler, AppNavbarBrand, AppSidebarToggler } from '@coreui/react';
+import logo from '../../assets/img/brand/logo.svg'
+import sygnet from '../../assets/img/brand/sygnet.svg'
+
+const propTypes = {
+  children: PropTypes.node,
+};
+
+const defaultProps = {};
+
+class DefaultHeader extends Component {
+  render() {
+
+    // eslint-disable-next-line
+    const { children, ...attributes } = this.props;
+
+    return (
+      <React.Fragment>
+        <AppSidebarToggler className="d-lg-none" display="md" mobile />
+        <AppNavbarBrand
+          full={{ src: logo, width: 89, height: 25, alt: 'CoreUI Logo' }}
+          minimized={{ src: sygnet, 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 to="/dashboard" className="nav-link" >Dashboard</NavLink>
+          </NavItem>
+          <NavItem className="px-3">
+            <Link to="/users" className="nav-link">Users</Link>
+          </NavItem>
+          <NavItem className="px-3">
+            <NavLink to="#" className="nav-link">Settings</NavLink>
+          </NavItem>
+        </Nav>
+        <Nav className="ml-auto" navbar>
+          <NavItem className="d-md-down-none">
+            <NavLink to="#" className="nav-link"><i className="icon-bell"></i><Badge pill color="danger">5</Badge></NavLink>
+          </NavItem>
+          <NavItem className="d-md-down-none">
+            <NavLink to="#" className="nav-link"><i className="icon-list"></i></NavLink>
+          </NavItem>
+          <NavItem className="d-md-down-none">
+            <NavLink to="#" className="nav-link"><i className="icon-location-pin"></i></NavLink>
+          </NavItem>
+          <UncontrolledDropdown nav direction="down">
+            <DropdownToggle nav>
+              <img src={'../../assets/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 onClick={e => this.props.onLogout(e)}><i className="fa fa-lock"></i> Logout</DropdownItem>
+            </DropdownMenu>
+          </UncontrolledDropdown>
+        </Nav>
+        <AppAsideToggler className="d-md-down-none" />
+        {/*<AppAsideToggler className="d-lg-none" mobile />*/}
+      </React.Fragment>
+    );
+  }
+}
+
+DefaultHeader.propTypes = propTypes;
+DefaultHeader.defaultProps = defaultProps;
+
+export default DefaultHeader;

src/containers/DefaultLayout/DefaultLayout.js

@@ -0,0 +1,92 @@
+import React, { Component, Suspense } from 'react';
+import { Redirect, Route, Switch } from 'react-router-dom';
+import * as router from 'react-router-dom';
+import { Container } from 'reactstrap';
+
+import {
+  AppAside,
+  AppFooter,
+  AppHeader,
+  AppSidebar,
+  AppSidebarFooter,
+  AppSidebarForm,
+  AppSidebarHeader,
+  AppSidebarMinimizer,
+  AppBreadcrumb2 as AppBreadcrumb,
+  AppSidebarNav2 as AppSidebarNav,
+} from '@coreui/react';
+// sidebar nav config
+import navigation from '../../_nav';
+// routes config
+import routes from '../../routes';
+
+const DefaultAside = React.lazy(() => import('./DefaultAside'));
+const DefaultFooter = React.lazy(() => import('./DefaultFooter'));
+const DefaultHeader = React.lazy(() => import('./DefaultHeader'));
+
+class DefaultLayout extends Component {
+
+  loading = () => <div className="animated fadeIn pt-1 text-center">Loading...</div>
+
+  signOut(e) {
+    e.preventDefault()
+    this.props.history.push('/login')
+  }
+
+  render() {
+    return (
+      <div className="app">
+        <AppHeader fixed>
+          <Suspense  fallback={this.loading()}>
+            <DefaultHeader onLogout={e=>this.signOut(e)}/>
+          </Suspense>
+        </AppHeader>
+        <div className="app-body">
+          <AppSidebar fixed display="lg">
+            <AppSidebarHeader />
+            <AppSidebarForm />
+            <Suspense>
+            <AppSidebarNav navConfig={navigation} {...this.props} router={router}/>
+            </Suspense>
+            <AppSidebarFooter />
+            <AppSidebarMinimizer />
+          </AppSidebar>
+          <main className="main">
+            <AppBreadcrumb appRoutes={routes} router={router}/>
+            <Container fluid>
+              <Suspense fallback={this.loading()}>
+                <Switch>
+                  {routes.map((route, idx) => {
+                    return route.component ? (
+                      <Route
+                        key={idx}
+                        path={route.path}
+                        exact={route.exact}
+                        name={route.name}
+                        render={props => (
+                          <route.component {...props} />
+                        )} />
+                    ) : (null);
+                  })}
+                  <Redirect from="/" to="/dashboard" />
+                </Switch>
+              </Suspense>
+            </Container>
+          </main>
+          <AppAside fixed>
+            <Suspense fallback={this.loading()}>
+              <DefaultAside />
+            </Suspense>
+          </AppAside>
+        </div>
+        <AppFooter>
+          <Suspense fallback={this.loading()}>
+            <DefaultFooter />
+          </Suspense>
+        </AppFooter>
+      </div>
+    );
+  }
+}
+
+export default DefaultLayout;

src/containers/DefaultLayout/__tests__/DefaultAside.test.js

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

src/containers/DefaultLayout/__tests__/DefaultFooter.test.js

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

src/containers/DefaultLayout/__tests__/DefaultHeader.test.js

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

src/containers/DefaultLayout/__tests__/DefaultLayout.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {MemoryRouter, Route} from 'react-router-dom';
+import DefaultLayout from '../DefaultLayout';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<MemoryRouter><Route path="/" name="Home" component={DefaultLayout} /></MemoryRouter>, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/containers/DefaultLayout/index.js

@@ -0,0 +1,3 @@
+import DefaultLayout from './DefaultLayout';
+
+export default DefaultLayout;

src/containers/DefaultLayout/package.json

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

src/containers/index.js

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

src/index.css

@@ -0,0 +1 @@
+

src/index.js

@@ -0,0 +1,16 @@
+import 'react-app-polyfill/ie9'; // For IE 9-11 support
+import 'react-app-polyfill/stable';
+// import 'react-app-polyfill/ie11'; // For IE 11 support
+import './polyfill'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: http://bit.ly/CRA-PWA
+serviceWorker.unregister();

src/polyfill.js

@@ -0,0 +1,46 @@
+/*
+* required polyfills
+*/
+import "core-js";
+import 'core-js/features/set/map';
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol'
+// import 'core-js/es6/object'
+// import 'core-js/es6/function'
+// import 'core-js/es6/parse-int'
+// import 'core-js/es6/parse-float'
+// import 'core-js/es6/number'
+// import 'core-js/es6/math'
+// import 'core-js/es6/string'
+// import 'core-js/es6/date'
+// import 'core-js/es6/array'
+// import 'core-js/es6/regexp'
+// import 'core-js/es6/map'
+// import 'core-js/es6/weak-map'
+// import 'core-js/es6/set'
+// import 'core-js/es7/object'
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+// import 'core-js/es6/reflect'
+
+/** Evergreen browsers require these. **/
+// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+// import 'core-js/es7/reflect'
+
+// CustomEvent() constructor functionality in IE9, IE10, IE11
+(function () {
+
+  if ( typeof window.CustomEvent === "function" ) return false
+
+  function CustomEvent ( event, params ) {
+    params = params || { bubbles: false, cancelable: false, detail: undefined }
+    var evt = document.createEvent( 'CustomEvent' )
+    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail )
+    return evt
+  }
+
+  CustomEvent.prototype = window.Event.prototype
+
+  window.CustomEvent = CustomEvent
+})()

src/routes.js

@@ -0,0 +1,86 @@
+import React from 'react';
+
+const Breadcrumbs = React.lazy(() => import('./views/Base/Breadcrumbs'));
+const Cards = React.lazy(() => import('./views/Base/Cards'));
+const Carousels = React.lazy(() => import('./views/Base/Carousels'));
+const Collapses = React.lazy(() => import('./views/Base/Collapses'));
+const Dropdowns = React.lazy(() => import('./views/Base/Dropdowns'));
+const Forms = React.lazy(() => import('./views/Base/Forms'));
+const Jumbotrons = React.lazy(() => import('./views/Base/Jumbotrons'));
+const ListGroups = React.lazy(() => import('./views/Base/ListGroups'));
+const Navbars = React.lazy(() => import('./views/Base/Navbars'));
+const Navs = React.lazy(() => import('./views/Base/Navs'));
+const Paginations = React.lazy(() => import('./views/Base/Paginations'));
+const Popovers = React.lazy(() => import('./views/Base/Popovers'));
+const ProgressBar = React.lazy(() => import('./views/Base/ProgressBar'));
+const Switches = React.lazy(() => import('./views/Base/Switches'));
+const Tables = React.lazy(() => import('./views/Base/Tables'));
+const Tabs = React.lazy(() => import('./views/Base/Tabs'));
+const Tooltips = React.lazy(() => import('./views/Base/Tooltips'));
+const BrandButtons = React.lazy(() => import('./views/Buttons/BrandButtons'));
+const ButtonDropdowns = React.lazy(() => import('./views/Buttons/ButtonDropdowns'));
+const ButtonGroups = React.lazy(() => import('./views/Buttons/ButtonGroups'));
+const Buttons = React.lazy(() => import('./views/Buttons/Buttons'));
+const Charts = React.lazy(() => import('./views/Charts'));
+const Dashboard = React.lazy(() => import('./views/Dashboard'));
+const CoreUIIcons = React.lazy(() => import('./views/Icons/CoreUIIcons'));
+const Flags = React.lazy(() => import('./views/Icons/Flags'));
+const FontAwesome = React.lazy(() => import('./views/Icons/FontAwesome'));
+const SimpleLineIcons = React.lazy(() => import('./views/Icons/SimpleLineIcons'));
+const Alerts = React.lazy(() => import('./views/Notifications/Alerts'));
+const Badges = React.lazy(() => import('./views/Notifications/Badges'));
+const Modals = React.lazy(() => import('./views/Notifications/Modals'));
+const Colors = React.lazy(() => import('./views/Theme/Colors'));
+const Typography = React.lazy(() => import('./views/Theme/Typography'));
+const Widgets = React.lazy(() => import('./views/Widgets/Widgets'));
+const Users = React.lazy(() => import('./views/Users/Users'));
+const User = React.lazy(() => import('./views/Users/User'));
+const Maps = React.lazy(() => import('./views/Maps'));
+
+// https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
+const routes = [
+  { path: '/', exact: true, name: 'Home' },
+  { 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: 'Switches', 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: 'Carousel', component: Carousels },
+  { path: '/base/collapses', name: 'Collapse', component: Collapses },
+  { path: '/base/dropdowns', name: 'Dropdowns', component: Dropdowns },
+  { path: '/base/jumbotrons', name: 'Jumbotrons', component: Jumbotrons },
+  { path: '/base/list-groups', name: 'List Groups', 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: 'Button Dropdowns', component: ButtonDropdowns },
+  { path: '/buttons/button-groups', name: 'Button Groups', component: ButtonGroups },
+  { path: '/buttons/brand-buttons', name: 'Brand Buttons', component: BrandButtons },
+  { path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons },
+  { path: '/icons/coreui-icons', name: 'CoreUI Icons', component: CoreUIIcons },
+  { 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 },
+  { path: '/users', exact: true,  name: 'Users', component: Users },
+  { path: '/users/:id', exact: true, name: 'User Details', component: User },
+  { path: '/maps', exact: true, name: 'Maps', component: Maps },
+];
+
+export default routes;

src/scss/_custom.scss

@@ -0,0 +1 @@
+// Here you can add other styles

src/scss/_ie-fix.scss

@@ -0,0 +1,11 @@
+html body .app.flex-row.align-items-center {
+  height: 100vh;
+}
+
+// ie11 floating footer temp fix, react only
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  #root {
+    display: flex;
+    flex-direction: column;
+  }
+}

src/scss/_variables.scss

@@ -0,0 +1 @@
+// Variable overrides

src/scss/style.scss

@@ -0,0 +1,14 @@
+// If you want to override variables do it here
+@import "variables";
+
+// Import styles
+@import "~@coreui/coreui/scss/coreui.scss";
+
+// Temp fix for reactstrap
+@import '~@coreui/coreui/scss/_dropdown-menu-right.scss';
+
+// If you want to add something do it here
+@import "custom";
+
+// ie fixes
+@import "ie-fix";

src/scss/vendors/_variables.scss

@@ -0,0 +1,4 @@
+// Override Boostrap variables
+@import "../variables";
+@import "~bootstrap/scss/mixins";
+@import "~@coreui/coreui/scss/variables";

src/serviceWorker.js

@@ -0,0 +1,127 @@
+// 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 function register(config) {
+  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/facebook/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. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // 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, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  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.');
+
+              // Execute callback
+              if (config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } 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.');
+
+              // Execute callback
+              if (config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // 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, config);
+      }
+    })
+    .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/setupTests.js

@@ -0,0 +1,15 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
+
+if (global.document) {
+  document.createRange = () => ( {
+    setStart: () => {},
+    setEnd: () => {},
+    commonAncestorContainer: {
+      nodeName: 'BODY',
+      ownerDocument: document,
+    },
+  });
+}

src/views/Base/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import { Breadcrumb, BreadcrumbItem, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
+
+class Breadcrumbs extends Component {
+  render() {
+    return (
+      <div className="animated fadeIn">
+        <Row>
+          <Col xs="12">
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i><strong>Breadcrumbs</strong>
+                <div className="card-header-actions">
+                  <a href="https://reactstrap.github.io/components/breadcrumbs/" rel="noreferrer noopener" target="_blank" className="card-header-action">
+                    <small className="text-muted">docs</small>
+                  </a>
+                </div>
+              </CardHeader>
+              <CardBody>
+                <Breadcrumb>
+                  <BreadcrumbItem active>Home</BreadcrumbItem>
+                </Breadcrumb>
+                <Breadcrumb>
+                  {/*eslint-disable-next-line*/}
+                  <BreadcrumbItem><a href="#">Home</a></BreadcrumbItem>
+                  <BreadcrumbItem active>Library</BreadcrumbItem>
+                </Breadcrumb>
+                <Breadcrumb>
+                  {/*eslint-disable-next-line*/}
+                  <BreadcrumbItem><a href="#">Home</a></BreadcrumbItem>
+                  {/* eslint-disable-next-line*/}
+                  <BreadcrumbItem><a href="#">Library</a></BreadcrumbItem>
+                  <BreadcrumbItem active>Data</BreadcrumbItem>
+                </Breadcrumb>
+                <Breadcrumb tag="nav">
+                  <BreadcrumbItem tag="a" href="#">Home</BreadcrumbItem>
+                  <BreadcrumbItem tag="a" href="#">Library</BreadcrumbItem>
+                  <BreadcrumbItem tag="a" href="#">Data</BreadcrumbItem>
+                  <BreadcrumbItem active tag="span">Bootstrap</BreadcrumbItem>
+                </Breadcrumb>
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
+
+export default Breadcrumbs;

src/views/Base/Breadcrumbs/Breadcrumbs.test.js

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

src/views/Base/Breadcrumbs/package.json

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

src/views/Base/Cards/Cards.js

@@ -0,0 +1,416 @@
+import React, { Component } from 'react';
+import { Badge, Card, CardBody, CardFooter, CardHeader, Col, Row, Collapse, Fade } from 'reactstrap';
+import { AppSwitch } from '@coreui/react'
+
+class Cards extends Component {
+  constructor(props) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.toggleFade = this.toggleFade.bind(this);
+    this.state = {
+      collapse: true,
+      fadeIn: true,
+      timeout: 300
+    };
+  }
+
+  toggle() {
+    this.setState({ collapse: !this.state.collapse });
+  }
+
+  toggleFade() {
+    this.setState((prevState) => { return { fadeIn: !prevState }});
+  }
+
+  render() {
+    return (
+      <div className="animated fadeIn">
+        <Row>
+          <Col xs="12" sm="6" md="4">
+            <Card>
+              <CardHeader>
+                Card title
+              </CardHeader>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CardBody>
+              <CardFooter>Card footer</CardFooter>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card>
+              <CardHeader>
+                Card with icon
+                <div className="card-header-actions">
+                  <i className="fa fa-check float-right"></i>
+                </div>
+              </CardHeader>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card>
+              <CardHeader>
+                Card with switch
+                <div className="card-header-actions">
+                  <AppSwitch className={'float-right mb-0'} label color={'info'} defaultChecked size={'sm'}/>
+                </div>
+              </CardHeader>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card>
+              <CardHeader>
+                Card with label
+                <div className="card-header-actions">
+                  <Badge color="success" className="float-right">Success</Badge>
+                </div>
+              </CardHeader>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card>
+              <CardHeader>
+                Card with label
+                <div className="card-header-actions">
+                  <Badge pill color="danger" className="float-right">42</Badge>
+                </div>
+              </CardHeader>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+        <Row>
+          <Col xs="12" sm="6" md="4">
+            <Card className="border-primary">
+              <CardHeader>
+                Card outline primary
+              </CardHeader>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card className="border-secondary">
+              <CardHeader>
+                Card outline secondary
+              </CardHeader>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card className="border-success">
+              <CardHeader>
+                Card outline success
+              </CardHeader>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card className="border-info">
+              <CardHeader>
+                Card outline info
+              </CardHeader>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card className="border-warning">
+              <CardHeader>
+                Card outline warning
+              </CardHeader>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card className="border-danger">
+              <CardHeader>
+                Card outline danger
+              </CardHeader>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+
+        <Row>
+          <Col xs="12" sm="6" md="4">
+            <Card className="card-accent-primary">
+              <CardHeader>
+                Card with accent
+              </CardHeader>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card className="card-accent-secondary">
+              <CardHeader>
+                Card with accent
+              </CardHeader>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card className="card-accent-success">
+              <CardHeader>
+                Card with accent
+              </CardHeader>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card className="card-accent-info">
+              <CardHeader>
+                Card with accent
+              </CardHeader>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card className="card-accent-warning">
+              <CardHeader>
+                Card with accent
+              </CardHeader>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card className="card-accent-danger">
+              <CardHeader>
+                Card with accent
+              </CardHeader>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+        <Row>
+          <Col xs="12" sm="6" md="4">
+            <Card className="text-white bg-primary text-center">
+              <CardBody>
+                <blockquote className="card-bodyquote">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+                </blockquote>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card className="text-white bg-success text-center">
+              <CardBody>
+                <blockquote className="card-bodyquote">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+                </blockquote>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card className="text-white bg-info text-center">
+              <CardBody>
+                <blockquote className="card-bodyquote">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+                </blockquote>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card className="text-white bg-warning text-center">
+              <CardBody>
+                <blockquote className="card-bodyquote">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+                </blockquote>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card className="text-white bg-danger text-center">
+              <CardBody>
+                <blockquote className="card-bodyquote">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+                </blockquote>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card className="text-white bg-primary text-center">
+              <CardBody>
+                <blockquote className="card-bodyquote">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+                </blockquote>
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+        <Row>
+          <Col xs="12" sm="6" md="4">
+            <Card className="text-white bg-primary">
+              <CardHeader>
+                Card title
+              </CardHeader>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card className="text-white bg-success">
+              <CardHeader>
+                Card title
+              </CardHeader>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card className="text-white bg-info">
+              <CardHeader>
+                Card title
+              </CardHeader>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card className="text-white bg-warning">
+              <CardHeader>
+                Card title
+              </CardHeader>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Card className="text-white bg-danger">
+              <CardHeader>
+                Card title
+              </CardHeader>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6" md="4">
+            <Fade timeout={this.state.timeout} in={this.state.fadeIn}>
+              <Card>
+                <CardHeader>
+                  Card actions
+                  <div className="card-header-actions">
+                    {/*eslint-disable-next-line*/}
+                    <a href="#" className="card-header-action btn btn-setting"><i className="icon-settings"></i></a>
+                    {/*eslint-disable-next-line*/}
+                    <a className="card-header-action btn btn-minimize" data-target="#collapseExample" onClick={this.toggle}><i className="icon-arrow-up"></i></a>
+                    {/*eslint-disable-next-line*/}
+                    <a className="card-header-action btn btn-close" onClick={this.toggleFade}><i className="icon-close"></i></a>
+                  </div>
+                </CardHeader>
+                <Collapse isOpen={this.state.collapse} id="collapseExample">
+                  <CardBody>
+                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+                    laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+                    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+                  </CardBody>
+                </Collapse>
+              </Card>
+            </Fade>
+          </Col>
+
+        </Row>
+      </div>
+    );
+  }
+}
+
+export default Cards;

src/views/Base/Cards/Cards.test.js

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

src/views/Base/Cards/package.json

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

src/views/Base/Carousels/Carousels.js

@@ -0,0 +1,124 @@
+import React, { Component } from 'react';
+import { Card, CardBody, CardHeader, Carousel, CarouselCaption, CarouselControl, CarouselIndicators, CarouselItem, Col, Row } 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',
+  },
+  {
+    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',
+  },
+  {
+    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',
+  },
+];
+
+class Carousels extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = { activeIndex: 0 };
+    this.next = this.next.bind(this);
+    this.previous = this.previous.bind(this);
+    this.goToIndex = this.goToIndex.bind(this);
+    this.onExiting = this.onExiting.bind(this);
+    this.onExited = this.onExited.bind(this);
+  }
+
+  onExiting() {
+    this.animating = true;
+  }
+
+  onExited() {
+    this.animating = false;
+  }
+
+  next() {
+    if (this.animating) return;
+    const nextIndex = this.state.activeIndex === items.length - 1 ? 0 : this.state.activeIndex + 1;
+    this.setState({ activeIndex: nextIndex });
+  }
+
+  previous() {
+    if (this.animating) return;
+    const nextIndex = this.state.activeIndex === 0 ? items.length - 1 : this.state.activeIndex - 1;
+    this.setState({ activeIndex: nextIndex });
+  }
+
+  goToIndex(newIndex) {
+    if (this.animating) return;
+    this.setState({ activeIndex: newIndex });
+  }
+
+  render() {
+    const { activeIndex } = this.state;
+
+    const slides = items.map((item) => {
+      return (
+        <CarouselItem onExiting={this.onExiting} onExited={this.onExited} key={item.src}>
+          <img className="d-block w-100" src={item.src} alt={item.altText} />
+        </CarouselItem>
+      );
+    });
+
+    const slides2 = items.map((item) => {
+      return (
+        <CarouselItem
+          onExiting={this.onExiting}
+          onExited={this.onExited}
+          key={item.src}
+        >
+          <img className="d-block w-100" src={item.src} alt={item.altText} />
+          <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
+        </CarouselItem>
+      );
+    });
+
+    return (
+      <div className="animated fadeIn">
+        <Row>
+          <Col xs="12" xl="6">
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i><strong>Carousel</strong>
+                <div className="card-header-actions">
+                  <a href="https://reactstrap.github.io/components/carousel/" rel="noreferrer noopener" target="_blank" className="card-header-action">
+                    <small className="text-muted">docs</small>
+                  </a>
+                </div>
+              </CardHeader>
+              <CardBody>
+                <Carousel activeIndex={activeIndex} next={this.next} previous={this.previous} ride="carousel">
+                  {slides}
+                </Carousel>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" xl="6">
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i><strong>Carousel</strong>
+              </CardHeader>
+              <CardBody>
+                <Carousel activeIndex={activeIndex} next={this.next} previous={this.previous}>
+                  <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
+                  {slides2}
+                  <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
+                  <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
+                </Carousel>
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
+
+export default Carousels;

src/views/Base/Carousels/Carousels.test.js

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

src/views/Base/Carousels/package.json

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

src/views/Base/Collapses/Collapses.js

@@ -0,0 +1,233 @@
+import React, { Component } from 'react';
+import { Badge, Button, Card, CardBody, CardFooter, CardHeader, Col, Collapse, Fade, Row } from 'reactstrap';
+
+class Collapses extends Component {
+
+  constructor(props) {
+    super(props);
+    this.onEntering = this.onEntering.bind(this);
+    this.onEntered = this.onEntered.bind(this);
+    this.onExiting = this.onExiting.bind(this);
+    this.onExited = this.onExited.bind(this);
+    this.toggle = this.toggle.bind(this);
+    this.toggleAccordion = this.toggleAccordion.bind(this);
+    this.toggleCustom = this.toggleCustom.bind(this);
+    this.toggleFade = this.toggleFade.bind(this);
+    this.state = {
+      collapse: false,
+      accordion: [true, false, false],
+      custom: [true, false],
+      status: 'Closed',
+      fadeIn: true,
+      timeout: 300,
+    };
+  }
+
+  onEntering() {
+    this.setState({ status: 'Opening...' });
+  }
+
+  onEntered() {
+    this.setState({ status: 'Opened' });
+  }
+
+  onExiting() {
+    this.setState({ status: 'Closing...' });
+  }
+
+  onExited() {
+    this.setState({ status: 'Closed' });
+  }
+
+  toggle() {
+    this.setState({ collapse: !this.state.collapse });
+  }
+
+  toggleAccordion(tab) {
+
+    const prevState = this.state.accordion;
+    const state = prevState.map((x, index) => tab === index ? !x : false);
+
+    this.setState({
+      accordion: state,
+    });
+  }
+
+  toggleCustom(tab) {
+
+    const prevState = this.state.custom;
+    const state = prevState.map((x, index) => tab === index ? !x : false);
+
+    this.setState({
+      custom: state,
+    });
+  }
+
+  toggleFade() {
+    this.setState({ fadeIn: !this.state.fadeIn });
+  }
+
+  render() {
+    return (
+      <div className="animated fadeIn">
+        <Row>
+          <Col xl="6">
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i><strong>Collapse</strong>
+                <div className="card-header-actions">
+                  <a href="https://reactstrap.github.io/components/collapse/" rel="noreferrer noopener" target="_blank" className="card-header-action">
+                    <small className="text-muted">docs</small>
+                  </a>
+                </div>
+              </CardHeader>
+              <Collapse isOpen={this.state.collapse} onEntering={this.onEntering} onEntered={this.onEntered} onExiting={this.onExiting} onExited={this.onExited}>
+                <CardBody>
+                  <p>
+                    Anim pariatur cliche reprehenderit,
+                    enim eiusmod high life accusamus terry richardson ad squid. Nihil
+                    anim keffiyeh helvetica, craft beer labore wes anderson cred
+                    nesciunt sapiente ea proident.
+                  </p>
+                  <p>
+                    Donec molestie odio id nisi malesuada, mattis tincidunt velit egestas. Sed non pulvinar risus. Aenean
+                    elementum eleifend nunc, pellentesque dapibus arcu hendrerit fringilla. Aliquam in nibh massa. Cras
+                    ultricies lorem non enim volutpat, a eleifend urna placerat. Fusce id luctus urna. In sed leo tellus.
+                    Mauris tristique leo a nisl feugiat, eget vehicula leo venenatis. Quisque magna metus, luctus quis
+                    sollicitudin vel, vehicula nec ipsum. Donec rutrum commodo lacus ut condimentum. Integer vel turpis
+                    purus. Etiam vehicula, nulla non fringilla blandit, massa purus faucibus tellus, a luctus enim orci non
+                    augue. Aenean ullamcorper nisl urna, non feugiat tortor volutpat in. Vivamus lobortis massa dolor, eget
+                    faucibus ipsum varius eget. Pellentesque imperdiet, turpis sed sagittis lobortis, leo elit laoreet arcu,
+                    vehicula sagittis elit leo id nisi.
+                  </p>
+                </CardBody>
+              </Collapse>
+              <CardFooter>
+                <Button color="primary" onClick={this.toggle} className={'mb-1'} id="toggleCollapse1">Toggle</Button>
+                <hr/>
+                <h5>Current state: {this.state.status}</h5>
+              </CardFooter>
+            </Card>
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i><strong>Fade</strong>
+                <div className="card-header-actions">
+                  <a href="https://reactstrap.github.io/components/fade/" rel="noreferrer noopener" target="_blank" className="card-header-action">
+                    <small className="text-muted">docs</small>
+                  </a>
+                </div>
+              </CardHeader>
+              <CardBody>
+                <Fade timeout={this.state.timeout} in={this.state.fadeIn} tag="h5" className="mt-3">
+                  This content will fade in and out as the button is pressed...
+                </Fade>
+              </CardBody>
+              <CardFooter>
+                <Button color="primary" onClick={this.toggleFade} id="toggleFade1">Toggle Fade</Button>
+              </CardFooter>
+            </Card>
+          </Col>
+          <Col xl="6">
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i> Collapse <small>accordion</small>
+                <div className="card-header-actions">
+                  <Badge>NEW</Badge>
+                </div>
+              </CardHeader>
+              <CardBody>
+                <div id="accordion">
+                  <Card className="mb-0">
+                    <CardHeader id="headingOne">
+                      <Button block color="link" className="text-left m-0 p-0" onClick={() => this.toggleAccordion(0)} aria-expanded={this.state.accordion[0]} aria-controls="collapseOne">
+                        <h5 className="m-0 p-0">Collapsible Group Item #1</h5>
+                      </Button>
+                    </CardHeader>
+                    <Collapse isOpen={this.state.accordion[0]} data-parent="#accordion" id="collapseOne" aria-labelledby="headingOne">
+                      <CardBody>
+                        1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
+                        cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
+                        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
+                        nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
+                        beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+                      </CardBody>
+                    </Collapse>
+                  </Card>
+                  <Card className="mb-0">
+                    <CardHeader id="headingTwo">
+                      <Button block color="link" className="text-left m-0 p-0" onClick={() => this.toggleAccordion(1)} aria-expanded={this.state.accordion[1]} aria-controls="collapseTwo">
+                        <h5 className="m-0 p-0">Collapsible Group Item #2</h5>
+                      </Button>
+                    </CardHeader>
+                    <Collapse isOpen={this.state.accordion[1]} data-parent="#accordion" id="collapseTwo">
+                      <CardBody>
+                        2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
+                        cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
+                        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
+                        nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
+                        beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+                      </CardBody>
+                    </Collapse>
+                  </Card>
+                  <Card className="mb-0">
+                    <CardHeader id="headingThree">
+                      <Button block color="link" className="text-left m-0 p-0" onClick={() => this.toggleAccordion(2)} aria-expanded={this.state.accordion[2]} aria-controls="collapseThree">
+                        <h5 className="m-0 p-0">Collapsible Group Item #3</h5>
+                      </Button>
+                    </CardHeader>
+                    <Collapse isOpen={this.state.accordion[2]} data-parent="#accordion" id="collapseThree">
+                      <CardBody>
+                        3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
+                        cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
+                        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
+                        nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
+                        beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+                      </CardBody>
+                    </Collapse>
+                  </Card>
+                </div>
+              </CardBody>
+            </Card>
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i> Collapse <small>custom accordion</small>
+                <div className="card-header-actions">
+                  <Badge>NEW</Badge>
+                </div>
+              </CardHeader>
+              <CardBody>
+                <div id="exampleAccordion" data-children=".item">
+                  <div className="item">
+                    <Button className="m-0 p-0" color="link" onClick={() => this.toggleCustom(0)} aria-expanded={this.state.custom[0]} aria-controls="exampleAccordion1">
+                      Toggle item
+                    </Button>
+                    <Collapse isOpen={this.state.custom[0]} data-parent="#exampleAccordion" id="exampleAccordion1">
+                      <p className="mb-3">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget
+                        tristique massa. Aliquam lacinia rhoncus nibh quis ornare.
+                      </p>
+                    </Collapse>
+                  </div>
+                  <div className="item">
+                    <Button className="m-0 p-0" color="link" onClick={() => this.toggleCustom(1)} aria-expanded={this.state.custom[1]} aria-controls="exampleAccordion2">
+                      Toggle item 2
+                    </Button>
+                    <Collapse isOpen={this.state.custom[1]} data-parent="#exampleAccordion" id="exampleAccordion2">
+                      <p className="mb-3">
+                        Donec at ipsum dignissim, rutrum turpis scelerisque, tristique lectus. Pellentesque habitant morbi tristique senectus et netus et
+                        malesuada fames ac turpis egestas. Vivamus nec dui turpis. Orci varius natoque penatibus et magnis dis parturient montes,
+                        nascetur ridiculus mus.
+                      </p>
+                    </Collapse>
+                  </div>
+                </div>
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
+
+export default Collapses;

src/views/Base/Collapses/Collapses.test.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Collapses from './Collapses';
+import {mount} from 'enzyme/build';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Collapses />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+describe('toggle clicks', function() {
+  it('collapse without crashing', () => {
+    const wrapper = mount(<Collapses />);
+    let collapse = wrapper.find('#toggleCollapse1').at(0);
+    collapse.simulate('click');
+    expect(wrapper.state().collapse).toEqual(true);
+    collapse.simulate('click');
+    expect(wrapper.state().collapse).toEqual(false);
+    collapse.simulate('click');
+    expect(wrapper.state().collapse).toEqual(true);
+    wrapper.unmount()
+  });
+  it('fade without crashing', () => {
+    const wrapper = mount(<Collapses />);
+    let fade = wrapper.find('#toggleFade1').at(0);
+    fade.simulate('click');
+    expect(wrapper.state().fadeIn).toEqual(false);
+    fade.simulate('click');
+    expect(wrapper.state().fadeIn).toEqual(true);
+    wrapper.unmount()
+  });
+  it('accordion without crashing', () => {
+    const wrapper = mount(<Collapses />);
+    let accordion = wrapper.find('[aria-controls="collapseOne"]').at(0);
+    accordion.simulate('click');
+    expect(wrapper.state().accordion[0]).toEqual(false);
+    expect(wrapper.state().accordion[1]).toEqual(false);
+    expect(wrapper.state().accordion[2]).toEqual(false);
+    accordion = wrapper.find('[aria-controls="collapseTwo"]').at(0);
+    accordion.simulate('click');
+    expect(wrapper.state().accordion[0]).toEqual(false);
+    expect(wrapper.state().accordion[1]).toEqual(true);
+    expect(wrapper.state().accordion[2]).toEqual(false);
+    accordion = wrapper.find('[aria-controls="collapseThree"]').at(0);
+    accordion.simulate('click');
+    expect(wrapper.state().accordion[0]).toEqual(false);
+    expect(wrapper.state().accordion[1]).toEqual(false);
+    expect(wrapper.state().accordion[2]).toEqual(true);
+    accordion = wrapper.find('[aria-controls="collapseOne"]').at(0);
+    accordion.simulate('click');
+    expect(wrapper.state().accordion[0]).toEqual(true);
+    expect(wrapper.state().accordion[1]).toEqual(false);
+    expect(wrapper.state().accordion[2]).toEqual(false);
+    wrapper.unmount()
+  });
+  it('custom without crashing', () => {
+    const wrapper = mount(<Collapses />);
+    let accordion = wrapper.find('[aria-controls="exampleAccordion1"]').at(0);
+    accordion.simulate('click');
+    expect(wrapper.state().custom[0]).toEqual(false);
+    expect(wrapper.state().custom[1]).toEqual(false);
+    accordion = wrapper.find('[aria-controls="exampleAccordion1"]').at(0);
+    accordion.simulate('click');
+    expect(wrapper.state().custom[0]).toEqual(true);
+    expect(wrapper.state().custom[1]).toEqual(false);
+    accordion = wrapper.find('[aria-controls="exampleAccordion2"]').at(0);
+    accordion.simulate('click');
+    expect(wrapper.state().custom[0]).toEqual(false);
+    expect(wrapper.state().custom[1]).toEqual(true);
+    wrapper.unmount()
+  });
+});

src/views/Base/Collapses/package.json

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

src/views/Base/Dropdowns/Dropdowns.js

@@ -0,0 +1,168 @@
+import React, { Component } from 'react';
+import { Card, CardBody, CardHeader, Col, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Row, UncontrolledDropdown } from 'reactstrap';
+
+class Dropdowns extends Component {
+  constructor(props) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      dropdownOpen: new Array(6).fill(false),
+    };
+  }
+
+  toggle(i) {
+    const newArray = this.state.dropdownOpen.map((element, index) => {
+      return (index === i ? !element : false);
+    });
+    this.setState({
+      dropdownOpen: newArray,
+    });
+  }
+
+  render() {
+    return (
+      <div className="animated fadeIn">
+        <Row>
+          <Col xs="12">
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i><strong>Dropdowns</strong>
+                <div className="card-header-actions">
+                  <a href="https://reactstrap.github.io/components/dropdowns/" rel="noreferrer noopener" target="_blank" className="card-header-action">
+                    <small className="text-muted">docs</small>
+                  </a>
+                </div>
+              </CardHeader>
+              <CardBody>
+                <Dropdown isOpen={this.state.dropdownOpen[0]} toggle={() => {
+                  this.toggle(0);
+                }}>
+                  <DropdownToggle caret>
+                    Dropdown
+                  </DropdownToggle>
+                  <DropdownMenu>
+                    <DropdownItem header>Header</DropdownItem>
+                    <DropdownItem disabled>Action</DropdownItem>
+                    <DropdownItem>Another Action</DropdownItem>
+                    <DropdownItem divider />
+                    <DropdownItem>Another Action</DropdownItem>
+                  </DropdownMenu>
+                </Dropdown>
+              </CardBody>
+            </Card>
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i><strong>Dropdowns</strong>
+                <small> alignment</small>
+              </CardHeader>
+              <CardBody>
+                <Dropdown isOpen={this.state.dropdownOpen[1]} toggle={() => {this.toggle(1);}}>
+                  <DropdownToggle caret>
+                    This dropdown's menu is right-aligned
+                  </DropdownToggle>
+                  <DropdownMenu right style={{right: 'auto'}}>
+                    <DropdownItem header>Header</DropdownItem>
+                    <DropdownItem disabled>Action</DropdownItem>
+                    <DropdownItem>Another Action</DropdownItem>
+                    <DropdownItem divider />
+                    <DropdownItem>Another Action</DropdownItem>
+                  </DropdownMenu>
+                </Dropdown>
+              </CardBody>
+            </Card>
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i><strong>Dropdowns</strong>
+                <small> sizing</small>
+              </CardHeader>
+              <CardBody>
+                <Dropdown isOpen={this.state.dropdownOpen[2]} toggle={() => {this.toggle(2);}} size="lg" className="mb-3">
+                  <DropdownToggle caret>
+                    Large Dropdown
+                  </DropdownToggle>
+                  <DropdownMenu>
+                    <DropdownItem header>Header</DropdownItem>
+                    <DropdownItem disabled>Action</DropdownItem>
+                    <DropdownItem>Another Action</DropdownItem>
+                    <DropdownItem divider />
+                    <DropdownItem>Another Action</DropdownItem>
+                  </DropdownMenu>
+                </Dropdown>
+                <Dropdown isOpen={this.state.dropdownOpen[3]} toggle={() => {this.toggle(3);}} className="mb-3">
+                  <DropdownToggle caret>
+                    Normal Dropdown
+                  </DropdownToggle>
+                  <DropdownMenu>
+                    <DropdownItem header>Header</DropdownItem>
+                    <DropdownItem disabled>Action</DropdownItem>
+                    <DropdownItem>Another Action</DropdownItem>
+                    <DropdownItem divider />
+                    <DropdownItem>Another Action</DropdownItem>
+                  </DropdownMenu>
+                </Dropdown>
+                <Dropdown isOpen={this.state.dropdownOpen[4]} toggle={() => {this.toggle(4);}} size="sm">
+                  <DropdownToggle caret>
+                    Small Dropdown
+                  </DropdownToggle>
+                  <DropdownMenu>
+                    <DropdownItem header>Header</DropdownItem>
+                    <DropdownItem disabled>Action</DropdownItem>
+                    <DropdownItem>Another Action</DropdownItem>
+                    <DropdownItem divider />
+                    <DropdownItem>Another Action</DropdownItem>
+                  </DropdownMenu>
+                </Dropdown>
+              </CardBody>
+            </Card>
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i><strong>Custom Dropdowns</strong>
+              </CardHeader>
+              <CardBody>
+                <Dropdown isOpen={this.state.dropdownOpen[5]} toggle={() => {this.toggle(5);}}>
+                  <DropdownToggle
+                    tag="span"
+                    onClick={() => {this.toggle(5);}}
+                    data-toggle="dropdown"
+                    aria-expanded={this.state.dropdownOpen[5]}
+                  >
+                    Custom Dropdown Content <strong> * </strong>
+                  </DropdownToggle>
+                  <DropdownMenu>
+                    <div className="dropdown-item" onClick={() => {this.toggle(5);}}>Custom dropdown item 1</div>
+                    <div className="dropdown-item" onClick={() => {this.toggle(5);}}>Custom dropdown item 2</div>
+                    <div className="dropdown-item-text" onClick={() => {this.toggle(5);}}>Custom dropdown text 3</div>
+                    <hr className="my-0 dropdown-item-text" />
+                    <div onClick={() => {this.toggle(5);}}>Custom dropdown item 4</div>
+                  </DropdownMenu>
+                </Dropdown>
+              </CardBody>
+            </Card>
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i><strong>Uncontrolled Dropdown</strong>
+              </CardHeader>
+              <CardBody>
+                <UncontrolledDropdown>
+                  <DropdownToggle caret>
+                    Uncontrolled Dropdown
+                  </DropdownToggle>
+                  <DropdownMenu>
+                    <DropdownItem header>Header</DropdownItem>
+                    <DropdownItem disabled>Action</DropdownItem>
+                    <DropdownItem>Another Action</DropdownItem>
+                    <DropdownItem divider />
+                    <DropdownItem>Another Action</DropdownItem>
+                  </DropdownMenu>
+                </UncontrolledDropdown>
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
+
+export default Dropdowns;

src/views/Base/Dropdowns/Dropdowns.test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { mount } from 'enzyme'
+import Dropdowns from './Dropdowns';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Dropdowns />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
+it('toggle click without crashing', () => {
+  const wrapper = mount(<Dropdowns />);
+  for (let i=0; i<5; i++) {
+    let Dropdown = wrapper.find('button.dropdown-toggle').at(i);
+    Dropdown.simulate('click');
+    expect(wrapper.state().dropdownOpen[i]).toEqual(true);
+  }
+  for (let i=0; i<2; i++) {
+    let Dropdown = wrapper.find('[data-toggle="dropdown"]').at(0);
+    Dropdown.simulate('click');
+    expect(wrapper.state().dropdownOpen[5]).toEqual(true);
+    let DropdownItem = wrapper.find('div.dropdown-menu > .dropdown-item').at(i);
+    DropdownItem.simulate('click');
+    expect(wrapper.state().dropdownOpen[5]).toEqual(false);
+  }
+  wrapper.unmount()
+});

src/views/Base/Dropdowns/package.json

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

src/views/Base/Forms/Forms.js

@@ -0,0 +1,1161 @@
+import React, { Component } from 'react';
+import {
+  Badge,
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Col,
+  Collapse,
+  DropdownItem,
+  DropdownMenu,
+  DropdownToggle,
+  Fade,
+  Form,
+  FormGroup,
+  FormText,
+  FormFeedback,
+  Input,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButtonDropdown,
+  InputGroupText,
+  Label,
+  Row,
+} from 'reactstrap';
+
+class Forms extends Component {
+  constructor(props) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.toggleFade = this.toggleFade.bind(this);
+    this.state = {
+      collapse: true,
+      fadeIn: true,
+      timeout: 300
+    };
+  }
+
+  toggle() {
+    this.setState({ collapse: !this.state.collapse });
+  }
+
+  toggleFade() {
+    this.setState((prevState) => { return { fadeIn: !prevState }});
+  }
+
+  render() {
+    return (
+      <div className="animated fadeIn">
+        <Row>
+          <Col xs="12" sm="6">
+            <Card>
+              <CardHeader>
+                <strong>Credit Card</strong>
+                <small> Form</small>
+              </CardHeader>
+              <CardBody>
+                <Row>
+                  <Col xs="12">
+                    <FormGroup>
+                      <Label htmlFor="name">Name</Label>
+                      <Input type="text" id="name" placeholder="Enter your name" required />
+                    </FormGroup>
+                  </Col>
+                </Row>
+                <Row>
+                  <Col xs="12">
+                    <FormGroup>
+                      <Label htmlFor="ccnumber">Credit Card Number</Label>
+                      <Input type="text" id="ccnumber" placeholder="0000 0000 0000 0000" required />
+                    </FormGroup>
+                  </Col>
+                </Row>
+                <Row>
+                  <Col xs="4">
+                    <FormGroup>
+                      <Label htmlFor="ccmonth">Month</Label>
+                      <Input type="select" name="ccmonth" id="ccmonth">
+                        <option value="1">1</option>
+                        <option value="2">2</option>
+                        <option value="3">3</option>
+                        <option value="4">4</option>
+                        <option value="5">5</option>
+                        <option value="6">6</option>
+                        <option value="7">7</option>
+                        <option value="8">8</option>
+                        <option value="9">9</option>
+                        <option value="10">10</option>
+                        <option value="11">11</option>
+                        <option value="12">12</option>
+                      </Input>
+                    </FormGroup>
+                  </Col>
+                  <Col xs="4">
+                    <FormGroup>
+                      <Label htmlFor="ccyear">Year</Label>
+                      <Input type="select" name="ccyear" id="ccyear">
+                        <option>2017</option>
+                        <option>2018</option>
+                        <option>2019</option>
+                        <option>2020</option>
+                        <option>2021</option>
+                        <option>2022</option>
+                        <option>2023</option>
+                        <option>2024</option>
+                        <option>2025</option>
+                        <option>2026</option>
+                      </Input>
+                    </FormGroup>
+                  </Col>
+                  <Col xs="4">
+                    <FormGroup>
+                      <Label htmlFor="cvv">CVV/CVC</Label>
+                      <Input type="text" id="cvv" placeholder="123" required />
+                    </FormGroup>
+                  </Col>
+                </Row>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6">
+            <Card>
+              <CardHeader>
+                <strong>Company</strong>
+                <small> Form</small>
+              </CardHeader>
+              <CardBody>
+                <FormGroup>
+                  <Label htmlFor="company">Company</Label>
+                  <Input type="text" id="company" placeholder="Enter your company name" />
+                </FormGroup>
+                <FormGroup>
+                  <Label htmlFor="vat">VAT</Label>
+                  <Input type="text" id="vat" placeholder="DE1234567890" />
+                </FormGroup>
+                <FormGroup>
+                  <Label htmlFor="street">Street</Label>
+                  <Input type="text" id="street" placeholder="Enter street name" />
+                </FormGroup>
+                <FormGroup row className="my-0">
+                  <Col xs="8">
+                    <FormGroup>
+                      <Label htmlFor="city">City</Label>
+                      <Input type="text" id="city" placeholder="Enter your city" />
+                    </FormGroup>
+                  </Col>
+                  <Col xs="4">
+                    <FormGroup>
+                      <Label htmlFor="postal-code">Postal Code</Label>
+                      <Input type="text" id="postal-code" placeholder="Postal Code" />
+                    </FormGroup>
+                  </Col>
+                </FormGroup>
+                <FormGroup>
+                  <Label htmlFor="country">Country</Label>
+                  <Input type="text" id="country" placeholder="Country name" />
+                </FormGroup>
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+        <Row>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                <strong>Basic Form</strong> Elements
+              </CardHeader>
+              <CardBody>
+                <Form action="" method="post" encType="multipart/form-data" className="form-horizontal">
+                  <FormGroup row>
+                    <Col md="3">
+                      <Label>Static</Label>
+                    </Col>
+                    <Col xs="12" md="9">
+                      <p className="form-control-static">Username</p>
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="3">
+                      <Label htmlFor="text-input">Text Input</Label>
+                    </Col>
+                    <Col xs="12" md="9">
+                      <Input type="text" id="text-input" name="text-input" placeholder="Text" />
+                      <FormText color="muted">This is a help text</FormText>
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="3">
+                      <Label htmlFor="email-input">Email Input</Label>
+                    </Col>
+                    <Col xs="12" md="9">
+                      <Input type="email" id="email-input" name="email-input" placeholder="Enter Email" autoComplete="email"/>
+                      <FormText className="help-block">Please enter your email</FormText>
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="3">
+                      <Label htmlFor="password-input">Password</Label>
+                    </Col>
+                    <Col xs="12" md="9">
+                      <Input type="password" id="password-input" name="password-input" placeholder="Password" autoComplete="new-password" />
+                      <FormText className="help-block">Please enter a complex password</FormText>
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="3">
+                      <Label htmlFor="date-input">Date Input <Badge>NEW</Badge></Label>
+                    </Col>
+                    <Col xs="12" md="9">
+                      <Input type="date" id="date-input" name="date-input" placeholder="date" />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="3">
+                      <Label htmlFor="disabled-input">Disabled Input</Label>
+                    </Col>
+                    <Col xs="12" md="9">
+                      <Input type="text" id="disabled-input" name="disabled-input" placeholder="Disabled" disabled />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="3">
+                      <Label htmlFor="textarea-input">Textarea</Label>
+                    </Col>
+                    <Col xs="12" md="9">
+                      <Input type="textarea" name="textarea-input" id="textarea-input" rows="9"
+                             placeholder="Content..." />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="3">
+                      <Label htmlFor="select">Select</Label>
+                    </Col>
+                    <Col xs="12" md="9">
+                      <Input type="select" name="select" id="select">
+                        <option value="0">Please select</option>
+                        <option value="1">Option #1</option>
+                        <option value="2">Option #2</option>
+                        <option value="3">Option #3</option>
+                      </Input>
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="3">
+                      <Label htmlFor="selectLg">Select Large</Label>
+                    </Col>
+                    <Col xs="12" md="9" size="lg">
+                      <Input type="select" name="selectLg" id="selectLg" bsSize="lg">
+                        <option value="0">Please select</option>
+                        <option value="1">Option #1</option>
+                        <option value="2">Option #2</option>
+                        <option value="3">Option #3</option>
+                      </Input>
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="3">
+                      <Label htmlFor="selectSm">Select Small</Label>
+                    </Col>
+                    <Col xs="12" md="9">
+                      <Input type="select" name="selectSm" id="SelectLm" bsSize="sm">
+                        <option value="0">Please select</option>
+                        <option value="1">Option #1</option>
+                        <option value="2">Option #2</option>
+                        <option value="3">Option #3</option>
+                        <option value="4">Option #4</option>
+                        <option value="5">Option #5</option>
+                      </Input>
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="3">
+                      <Label htmlFor="disabledSelect">Disabled Select</Label>
+                    </Col>
+                    <Col xs="12" md="9">
+                      <Input type="select" name="disabledSelect" id="disabledSelect" disabled autoComplete="name">
+                        <option value="0">Please select</option>
+                        <option value="1">Option #1</option>
+                        <option value="2">Option #2</option>
+                        <option value="3">Option #3</option>
+                      </Input>
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="3">
+                      <Label htmlFor="multiple-select">Multiple select</Label>
+                    </Col>
+                    <Col md="9">
+                      <Input type="select" name="multiple-select" id="multiple-select" multiple>
+                        <option value="1">Option #1</option>
+                        <option value="2">Option #2</option>
+                        <option value="3">Option #3</option>
+                        <option value="4">Option #4</option>
+                        <option value="5">Option #5</option>
+                        <option value="6">Option #6</option>
+                        <option value="7">Option #7</option>
+                        <option value="8">Option #8</option>
+                        <option value="9">Option #9</option>
+                        <option value="10">Option #10</option>
+                      </Input>
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="3">
+                      <Label>Radios</Label>
+                    </Col>
+                    <Col md="9">
+                      <FormGroup check className="radio">
+                        <Input className="form-check-input" type="radio" id="radio1" name="radios" value="option1" />
+                        <Label check className="form-check-label" htmlFor="radio1">Option 1</Label>
+                      </FormGroup>
+                      <FormGroup check className="radio">
+                        <Input className="form-check-input" type="radio" id="radio2" name="radios" value="option2" />
+                        <Label check className="form-check-label" htmlFor="radio2">Option 2</Label>
+                      </FormGroup>
+                      <FormGroup check className="radio">
+                        <Input className="form-check-input" type="radio" id="radio3" name="radios" value="option3" />
+                        <Label check className="form-check-label" htmlFor="radio3">Option 3</Label>
+                      </FormGroup>
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="3">
+                      <Label>Inline Radios</Label>
+                    </Col>
+                    <Col md="9">
+                      <FormGroup check inline>
+                        <Input className="form-check-input" type="radio" id="inline-radio1" name="inline-radios" value="option1" />
+                        <Label className="form-check-label" check htmlFor="inline-radio1">One</Label>
+                      </FormGroup>
+                      <FormGroup check inline>
+                        <Input className="form-check-input" type="radio" id="inline-radio2" name="inline-radios" value="option2" />
+                        <Label className="form-check-label" check htmlFor="inline-radio2">Two</Label>
+                      </FormGroup>
+                      <FormGroup check inline>
+                        <Input className="form-check-input" type="radio" id="inline-radio3" name="inline-radios" value="option3" />
+                        <Label className="form-check-label" check htmlFor="inline-radio3">Three</Label>
+                      </FormGroup>
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="3"><Label>Checkboxes</Label></Col>
+                    <Col md="9">
+                      <FormGroup check className="checkbox">
+                        <Input className="form-check-input" type="checkbox" id="checkbox1" name="checkbox1" value="option1" />
+                        <Label check className="form-check-label" htmlFor="checkbox1">Option 1</Label>
+                      </FormGroup>
+                      <FormGroup check className="checkbox">
+                        <Input className="form-check-input" type="checkbox" id="checkbox2" name="checkbox2" value="option2" />
+                        <Label check className="form-check-label" htmlFor="checkbox2">Option 2</Label>
+                      </FormGroup>
+                      <FormGroup check className="checkbox">
+                        <Input className="form-check-input" type="checkbox" id="checkbox3" name="checkbox3" value="option3" />
+                        <Label check className="form-check-label" htmlFor="checkbox3">Option 3</Label>
+                      </FormGroup>
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="3">
+                      <Label>Inline Checkboxes</Label>
+                    </Col>
+                    <Col md="9">
+                      <FormGroup check inline>
+                        <Input className="form-check-input" type="checkbox" id="inline-checkbox1" name="inline-checkbox1" value="option1" />
+                        <Label className="form-check-label" check htmlFor="inline-checkbox1">One</Label>
+                      </FormGroup>
+                      <FormGroup check inline>
+                        <Input className="form-check-input" type="checkbox" id="inline-checkbox2" name="inline-checkbox2" value="option2" />
+                        <Label className="form-check-label" check htmlFor="inline-checkbox2">Two</Label>
+                      </FormGroup>
+                      <FormGroup check inline>
+                        <Input className="form-check-input" type="checkbox" id="inline-checkbox3" name="inline-checkbox3" value="option3" />
+                        <Label className="form-check-label" check htmlFor="inline-checkbox3">Three</Label>
+                      </FormGroup>
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="3">
+                      <Label htmlFor="file-input">File input</Label>
+                    </Col>
+                    <Col xs="12" md="9">
+                      <Input type="file" id="file-input" name="file-input" />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="3">
+                      <Label htmlFor="file-multiple-input">Multiple File input</Label>
+                    </Col>
+                    <Col xs="12" md="9">
+                      <Input type="file" id="file-multiple-input" name="file-multiple-input" multiple />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row hidden>
+                    <Col md="3">
+                      <Label className="custom-file" htmlFor="custom-file-input">Custom file input</Label>
+                    </Col>
+                    <Col xs="12" md="9">
+                      <Label className="custom-file">
+                        <Input className="custom-file" type="file" id="custom-file-input" name="file-input" />
+                        <span className="custom-file-control"></span>
+                      </Label>
+                    </Col>
+                  </FormGroup>
+                </Form>
+              </CardBody>
+              <CardFooter>
+                <Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
+                <Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
+              </CardFooter>
+            </Card>
+            <Card>
+              <CardHeader>
+                <strong>Inline</strong> Form
+              </CardHeader>
+              <CardBody>
+                <Form action="" method="post" inline>
+                  <FormGroup className="pr-1">
+                    <Label htmlFor="exampleInputName2" className="pr-1">Name</Label>
+                    <Input type="text" id="exampleInputName2" placeholder="Jane Doe" required />
+                  </FormGroup>
+                  <FormGroup className="pr-1">
+                    <Label htmlFor="exampleInputEmail2" className="pr-1">Email</Label>
+                    <Input type="email" id="exampleInputEmail2" placeholder="jane.doe@example.com" required />
+                  </FormGroup>
+                </Form>
+              </CardBody>
+              <CardFooter>
+                <Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
+                <Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
+              </CardFooter>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                <strong>Horizontal</strong> Form
+              </CardHeader>
+              <CardBody>
+                <Form action="" method="post" className="form-horizontal">
+                  <FormGroup row>
+                    <Col md="3">
+                      <Label htmlFor="hf-email">Email</Label>
+                    </Col>
+                    <Col xs="12" md="9">
+                      <Input type="email" id="hf-email" name="hf-email" placeholder="Enter Email..." autoComplete="email" />
+                      <FormText className="help-block">Please enter your email</FormText>
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="3">
+                      <Label htmlFor="hf-password">Password</Label>
+                    </Col>
+                    <Col xs="12" md="9">
+                      <Input type="password" id="hf-password" name="hf-password" placeholder="Enter Password..." autoComplete="current-password"/>
+                      <FormText className="help-block">Please enter your password</FormText>
+                    </Col>
+                  </FormGroup>
+                </Form>
+              </CardBody>
+              <CardFooter>
+                <Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
+                <Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
+              </CardFooter>
+            </Card>
+            <Card>
+              <CardHeader>
+                <strong>Normal</strong> Form
+              </CardHeader>
+              <CardBody>
+                <Form action="" method="post">
+                  <FormGroup>
+                    <Label htmlFor="nf-email">Email</Label>
+                    <Input type="email" id="nf-email" name="nf-email" placeholder="Enter Email.." autoComplete="email"/>
+                    <FormText className="help-block">Please enter your email</FormText>
+                  </FormGroup>
+                  <FormGroup>
+                    <Label htmlFor="nf-password">Password</Label>
+                    <Input type="password" id="nf-password" name="nf-password" placeholder="Enter Password.." autoComplete="current-password"/>
+                    <FormText className="help-block">Please enter your password</FormText>
+                  </FormGroup>
+                </Form>
+              </CardBody>
+              <CardFooter>
+                <Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
+                <Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
+              </CardFooter>
+            </Card>
+            <Card>
+              <CardHeader>
+                Input <strong>Grid</strong>
+              </CardHeader>
+              <CardBody>
+                <Form action="" method="post" className="form-horizontal">
+                  <FormGroup row>
+                    <Col sm="3">
+                      <Input type="text" placeholder=".col-sm-3" />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col sm="4">
+                      <Input type="text" placeholder=".col-sm-4" />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col sm="5">
+                      <Input type="text" placeholder=".col-sm-5" />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col sm="6">
+                      <Input type="text" placeholder=".col-sm-6" />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col sm="7">
+                      <Input type="text" placeholder=".col-sm-7" />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col sm="8">
+                      <Input type="text" placeholder=".col-sm-8" />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col sm="9">
+                      <Input type="text" placeholder=".col-sm-9" />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col sm="10">
+                      <Input type="text" placeholder=".col-sm-10" />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col sm="11">
+                      <Input type="text" placeholder=".col-sm-11" />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col sm="12">
+                      <Input type="text" placeholder=".col-sm-12" />
+                    </Col>
+                  </FormGroup>
+                </Form>
+              </CardBody>
+              <CardFooter>
+                <Button type="submit" size="sm" color="primary"><i className="fa fa-user"></i> Login</Button>
+                <Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
+              </CardFooter>
+            </Card>
+            <Card>
+              <CardHeader>
+                Input <strong>Sizes</strong>
+              </CardHeader>
+              <CardBody>
+                <Form action="" method="post" className="form-horizontal">
+                  <FormGroup row>
+                    <Label sm="5" size="sm" htmlFor="input-small">Small Input</Label>
+                    <Col sm="6">
+                      <Input bsSize="sm" type="text" id="input-small" name="input-small" className="input-sm" placeholder=".form-control-sm" />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Label sm="5" htmlFor="input-normal">Normal Input</Label>
+                    <Col sm="6">
+                      <Input type="text" id="input-normal" name="input-normal" placeholder="Normal" />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Label sm="5" size="lg" htmlFor="input-large">Large Input</Label>
+                    <Col sm="6">
+                      <Input bsSize="lg" type="text" id="input-large" name="input-large" className="input-lg" placeholder=".form-control-lg" />
+                    </Col>
+                  </FormGroup>
+                </Form>
+              </CardBody>
+              <CardFooter>
+                <Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
+                <Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
+              </CardFooter>
+            </Card>
+          </Col>
+        </Row>
+        <Row>
+          <Col xs="12" sm="6">
+            <Card>
+              <CardHeader>
+                <strong>Validation feedback</strong> Form
+              </CardHeader>
+              <CardBody>
+                <FormGroup>
+                  <Label htmlFor="inputIsValid">Input is valid</Label>
+                  <Input type="text" valid id="inputIsValid" />
+                  <FormFeedback valid>Cool! Input is valid</FormFeedback>
+                </FormGroup>
+                <FormGroup>
+                  <Label htmlFor="inputIsInvalid">Input is invalid</Label>
+                  <Input type="text" invalid id="inputIsInvalid" />
+                  <FormFeedback>Houston, we have a problem...</FormFeedback>
+                </FormGroup>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="6">
+            <Card>
+              <CardHeader>
+                <strong>Validation feedback</strong> Form
+              </CardHeader>
+              <CardBody>
+                <Form className="was-validated">
+                  <FormGroup>
+                    <Label htmlFor="inputSuccess2i">Non-required input</Label>
+                    <Input type="text" className="form-control-success" id="inputSuccess2i" />
+                    <FormFeedback valid>Non-required</FormFeedback>
+                  </FormGroup>
+                  <FormGroup>
+                    <Label htmlFor="inputWarning2i">Required input</Label>
+                    <Input type="text" className="form-control-warning" id="inputWarning2i" required />
+                    <FormFeedback className="help-block">Please provide a valid information</FormFeedback>
+                    <FormFeedback valid className="help-block">Input provided</FormFeedback>
+                  </FormGroup>
+                </Form>
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+        <Row>
+          <Col xs="12" md="4">
+            <Card>
+              <CardHeader>
+                <strong>Icon/Text</strong> Groups
+              </CardHeader>
+              <CardBody>
+                <Form action="" method="post" className="form-horizontal">
+                  <FormGroup row>
+                    <Col md="12">
+                      <InputGroup>
+                        <InputGroupAddon addonType="prepend">
+                          <InputGroupText>
+                            <i className="fa fa-user"></i>
+                          </InputGroupText>
+                        </InputGroupAddon>
+                        <Input type="text" id="input1-group1" name="input1-group1" placeholder="Username" />
+                      </InputGroup>
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="12">
+                      <InputGroup>
+                        <Input type="email" id="input2-group1" name="input2-group1" placeholder="Email" />
+                        <InputGroupAddon addonType="append">
+                          <InputGroupText>
+                            <i className="fa fa-envelope-o"></i>
+                          </InputGroupText>
+                        </InputGroupAddon>
+                      </InputGroup>
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="12">
+                      <InputGroup>
+                        <InputGroupAddon addonType="prepend">
+                          <InputGroupText>
+                            <i className="fa fa-euro"></i>
+                          </InputGroupText>
+                        </InputGroupAddon>
+                        <Input type="text" id="input3-group1" name="input3-group1" placeholder=".." />
+                        <InputGroupAddon addonType="append">
+                          <InputGroupText>.00</InputGroupText>
+                        </InputGroupAddon>
+                      </InputGroup>
+                    </Col>
+                  </FormGroup>
+                </Form>
+              </CardBody>
+              <CardFooter>
+                <Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
+                <Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
+              </CardFooter>
+            </Card>
+          </Col>
+          <Col xs="12" md="4">
+            <Card>
+              <CardHeader>
+                <strong>Button</strong> Groups
+              </CardHeader>
+              <CardBody>
+                <Form action="" method="post" className="form-horizontal">
+                  <FormGroup row>
+                    <Col md="12">
+                      <InputGroup>
+                        <InputGroupAddon addonType="prepend">
+                          <Button type="button" color="primary"><i className="fa fa-search"></i> Search</Button>
+                        </InputGroupAddon>
+                        <Input type="text" id="input1-group2" name="input1-group2" placeholder="Username" />
+                      </InputGroup>
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="12">
+                      <InputGroup>
+                        <Input type="email" id="input2-group2" name="input2-group2" placeholder="Email" />
+                        <InputGroupAddon addonType="append">
+                          <Button type="button" color="primary">Submit</Button>
+                        </InputGroupAddon>
+                      </InputGroup>
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="12">
+                      <InputGroup>
+                        <InputGroupAddon addonType="prepend">
+                          <Button type="button" color="primary"><i className="fa fa-facebook"></i></Button>
+                        </InputGroupAddon>
+                        <Input type="text" id="input3-group2" name="input3-group2" placeholder="Search" />
+                        <InputGroupAddon addonType="append">
+                          <Button type="button" color="primary"><i className="fa fa-twitter"></i></Button>
+                        </InputGroupAddon>
+                      </InputGroup>
+                    </Col>
+                  </FormGroup>
+                </Form>
+              </CardBody>
+              <CardFooter>
+                <Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
+                <Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
+              </CardFooter>
+            </Card>
+          </Col>
+          <Col xs="12" md="4">
+            <Card>
+              <CardHeader>
+                <strong>Dropdowns</strong> Groups
+              </CardHeader>
+              <CardBody>
+                <Form className="form-horizontal">
+                  <FormGroup row>
+                    <Col md="12">
+                      <InputGroup>
+                        <InputGroupButtonDropdown addonType="prepend"
+                                                  isOpen={this.state.first}
+                                                  toggle={() => { this.setState({ first: !this.state.first }); }}>
+                          <DropdownToggle caret color="primary">
+                            Dropdown
+                          </DropdownToggle>
+                          <DropdownMenu className={this.state.first ? 'show' : ''}>
+                            <DropdownItem>Action</DropdownItem>
+                            <DropdownItem>Another Action</DropdownItem>
+                            <DropdownItem>Something else here</DropdownItem>
+                            <DropdownItem divider />
+                            <DropdownItem>Separated link</DropdownItem>
+                          </DropdownMenu>
+                        </InputGroupButtonDropdown>
+                        <Input type="text" id="input1-group3" name="input1-group3" placeholder="Username" />
+                      </InputGroup>
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="12">
+                      <InputGroup>
+                        <Input type="email" id="input2-group3" name="input2-group3" placeholder="Email" />
+                        <InputGroupButtonDropdown addonType="append"
+                                                  isOpen={this.state.second}
+                                                  toggle={() => { this.setState({ second: !this.state.second }); }}>
+                          <DropdownToggle caret color="primary">
+                            Dropdown
+                          </DropdownToggle>
+                          <DropdownMenu className={this.state.second ? 'show' : ''}>
+                            <DropdownItem>Action</DropdownItem>
+                            <DropdownItem>Another Action</DropdownItem>
+                            <DropdownItem>Something else here</DropdownItem>
+                            <DropdownItem divider />
+                            <DropdownItem>Separated link</DropdownItem>
+                          </DropdownMenu>
+                        </InputGroupButtonDropdown>
+                      </InputGroup>
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="12">
+                      <InputGroup>
+                        <InputGroupButtonDropdown
+                          addonType="prepend"
+                          isOpen={this.state.third}
+                          toggle={() => { this.setState({ third: !this.state.third }); }}>
+                          <DropdownToggle caret color="primary">Action</DropdownToggle>
+                          <DropdownMenu className={this.state.third ? 'show' : ''}>
+                            <DropdownItem>Action</DropdownItem>
+                            <DropdownItem>Another Action</DropdownItem>
+                            <DropdownItem>Something else here</DropdownItem>
+                            <DropdownItem divider />
+                            <DropdownItem>Separated link</DropdownItem>
+                          </DropdownMenu>
+                        </InputGroupButtonDropdown>
+                        <Input type="text" id="input3-group3" name="input3-group3" placeholder=".." />
+                        <InputGroupButtonDropdown  addonType="append"
+                                                   isOpen={this.state.fourth}
+                                                   toggle={() => { this.setState({ fourth: !this.state.fourth }); }}>
+                          <DropdownToggle caret color="primary">
+                            Dropdown
+                          </DropdownToggle>
+                          <DropdownMenu className={this.state.fourth ? 'show' : ''}>
+                            <DropdownItem>Action</DropdownItem>
+                            <DropdownItem>Another Action</DropdownItem>
+                            <DropdownItem>Something else here</DropdownItem>
+                            <DropdownItem divider />
+                            <DropdownItem>Separated link</DropdownItem>
+                          </DropdownMenu>
+                        </InputGroupButtonDropdown>
+                      </InputGroup>
+                    </Col>
+                  </FormGroup>
+                </Form>
+              </CardBody>
+              <CardFooter>
+                <Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
+                <Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
+              </CardFooter>
+            </Card>
+          </Col>
+        </Row>
+        <Row>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Use the grid for big devices!
+                <small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
+              </CardHeader>
+              <CardBody>
+                <Form action="" method="post" className="form-horizontal">
+                  <FormGroup row>
+                    <Col md="8">
+                      <Input type="text" placeholder=".col-md-8" />
+                    </Col>
+                    <Col md="4">
+                      <Input type="text" placeholder=".col-md-4" />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="7">
+                      <Input type="text" placeholder=".col-md-7" />
+                    </Col>
+                    <Col md="5">
+                      <Input type="text" placeholder=".col-md-5" />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="6">
+                      <Input type="text" placeholder=".col-md-6" />
+                    </Col>
+                    <Col md="6">
+                      <Input type="text" placeholder=".col-md-6" />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="5">
+                      <Input type="text" placeholder=".col-md-5" />
+                    </Col>
+                    <Col md="7">
+                      <Input type="text" placeholder=".col-md-7" />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col md="4">
+                      <Input type="text" placeholder=".col-md-4" />
+                    </Col>
+                    <Col md="8">
+                      <Input type="text" placeholder=".col-md-8" />
+                    </Col>
+                  </FormGroup>
+                </Form>
+              </CardBody>
+              <CardFooter>
+                <Button type="submit" size="sm" color="primary">Action</Button>
+                <Button size="sm" color="danger">Action</Button>
+                <Button size="sm" color="warning">Action</Button>
+                <Button size="sm" color="info">Action</Button>
+                <Button size="sm" color="success">Action</Button>
+              </CardFooter>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Input Grid for small devices!
+                <small><code>.col-*</code></small>
+              </CardHeader>
+              <CardBody>
+                <Form action="" method="post" className="form-horizontal">
+                  <FormGroup row>
+                    <Col xs="4">
+                      <Input type="text" placeholder=".col-4" />
+                    </Col>
+                    <Col xs="8">
+                      <Input type="text" placeholder=".col-8" />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col xs="5">
+                      <Input type="text" placeholder=".col-5" />
+                    </Col>
+                    <Col xs="7">
+                      <Input type="text" placeholder=".col-7" />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col xs="6">
+                      <Input type="text" placeholder=".col-6" />
+                    </Col>
+                    <Col xs="6">
+                      <Input type="text" placeholder=".col-6" />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col xs="7">
+                      <Input type="text" placeholder=".col-5" />
+                    </Col>
+                    <Col xs="5">
+                      <Input type="text" placeholder=".col-5" />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col xs="8">
+                      <Input type="text" placeholder=".col-8" />
+                    </Col>
+                    <Col xs="4">
+                      <Input type="text" placeholder=".col-4" />
+                    </Col>
+                  </FormGroup>
+                </Form>
+              </CardBody>
+              <CardFooter>
+                <Button type="submit" size="sm" color="primary">Action</Button>
+                <Button size="sm" color="danger">Action</Button>
+                <Button size="sm" color="warning">Action</Button>
+                <Button size="sm" color="info">Action</Button>
+                <Button size="sm" color="success">Action</Button>
+              </CardFooter>
+            </Card>
+          </Col>
+        </Row>
+        <Row>
+          <Col xs="12" sm="4">
+            <Card>
+              <CardHeader>
+                Example Form
+              </CardHeader>
+              <CardBody>
+                <Form action="" method="post">
+                  <FormGroup>
+                    <InputGroup>
+                      <InputGroupAddon addonType="prepend">
+                        <InputGroupText>Username</InputGroupText>
+                      </InputGroupAddon>
+                      <Input type="email" id="username3" name="username3" autoComplete="name"/>
+                      <InputGroupAddon addonType="append">
+                        <InputGroupText><i className="fa fa-user"></i></InputGroupText>
+                      </InputGroupAddon>
+                    </InputGroup>
+                  </FormGroup>
+                  <FormGroup>
+                    <InputGroup>
+                      <InputGroupAddon addonType="prepend">
+                        <InputGroupText>Email</InputGroupText>
+                      </InputGroupAddon>
+                      <Input type="email" id="email3" name="email3" autoComplete="username"/>
+                      <InputGroupAddon addonType="append">
+                        <InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
+                      </InputGroupAddon>
+                    </InputGroup>
+                  </FormGroup>
+                  <FormGroup>
+                    <InputGroup>
+                      <InputGroupAddon addonType="prepend">
+                        <InputGroupText>Password</InputGroupText>
+                      </InputGroupAddon>
+                      <Input type="password" id="password3" name="password3" autoComplete="current-password"/>
+                      <InputGroupAddon addonType="append">
+                        <InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
+                      </InputGroupAddon>
+                    </InputGroup>
+                  </FormGroup>
+                  <FormGroup className="form-actions">
+                    <Button type="submit" size="sm" color="primary">Submit</Button>
+                  </FormGroup>
+                </Form>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="4">
+            <Card>
+              <CardHeader>
+                Example Form
+              </CardHeader>
+              <CardBody>
+                <Form action="" method="post">
+                  <FormGroup>
+                    <InputGroup>
+                      <Input type="text" id="username2" name="username2" placeholder="Username" autoComplete="name"/>
+                      <InputGroupAddon addonType="append">
+                        <InputGroupText><i className="fa fa-user"></i></InputGroupText>
+                      </InputGroupAddon>
+                    </InputGroup>
+                  </FormGroup>
+                  <FormGroup>
+                    <InputGroup>
+                      <Input type="email" id="email2" name="email2" placeholder="Email" autoComplete="username"/>
+                      <InputGroupAddon addonType="append">
+                        <InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
+                      </InputGroupAddon>
+                    </InputGroup>
+                  </FormGroup>
+                  <FormGroup>
+                    <InputGroup>
+                      <Input type="password" id="password2" name="password2" placeholder="Password" autoComplete="current-password"/>
+                      <InputGroupAddon addonType="append">
+                        <InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
+                      </InputGroupAddon>
+                    </InputGroup>
+                  </FormGroup>
+                  <FormGroup className="form-actions">
+                    <Button type="submit" size="sm" color="secondary">Submit</Button>
+                  </FormGroup>
+                </Form>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" sm="4">
+            <Card>
+              <CardHeader>
+                Example Form
+              </CardHeader>
+              <CardBody>
+                <Form action="" method="post">
+                  <FormGroup>
+                    <InputGroup>
+                      <InputGroupAddon addonType="prepend">
+                        <InputGroupText><i className="fa fa-user"></i></InputGroupText>
+                      </InputGroupAddon>
+                      <Input type="text" id="username1" name="username1" placeholder="Username" autoComplete="name"/>
+                    </InputGroup>
+                  </FormGroup>
+                  <FormGroup>
+                    <InputGroup>
+                      <InputGroupAddon addonType="prepend">
+                        <InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
+                      </InputGroupAddon>
+                      <Input type="email" id="email1" name="email1" placeholder="Email" autoComplete="username"/>
+                    </InputGroup>
+                  </FormGroup>
+                  <FormGroup>
+                    <InputGroup>
+                      <InputGroupAddon addonType="prepend">
+                        <InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
+                      </InputGroupAddon>
+                      <Input type="password" id="password1" name="password1" placeholder="Password" autoComplete="current-password"/>
+                    </InputGroup>
+                  </FormGroup>
+                  <FormGroup className="form-actions">
+                    <Button type="submit" size="sm" color="success">Submit</Button>
+                  </FormGroup>
+                </Form>
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+        <Row>
+          <Col xs="12">
+            <Fade timeout={this.state.timeout} in={this.state.fadeIn}>
+              <Card>
+                <CardHeader>
+                  <i className="fa fa-edit"></i>Form Elements
+                  <div className="card-header-actions">
+                    <Button color="link" className="card-header-action btn-setting"><i className="icon-settings"></i></Button>
+                    <Button color="link" className="card-header-action btn-minimize" data-target="#collapseExample" onClick={this.toggle}><i className="icon-arrow-up"></i></Button>
+                    <Button color="link" className="card-header-action btn-close" onClick={this.toggleFade}><i className="icon-close"></i></Button>
+                  </div>
+                </CardHeader>
+                <Collapse isOpen={this.state.collapse} id="collapseExample">
+                  <CardBody>
+                    <Form className="form-horizontal">
+                      <FormGroup>
+                        <Label htmlFor="prependedInput">Prepended text</Label>
+                        <div className="controls">
+                          <InputGroup className="input-prepend">
+                            <InputGroupAddon addonType="prepend">
+                              <InputGroupText>@</InputGroupText>
+                            </InputGroupAddon>
+                            <Input id="prependedInput" size="16" type="text" />
+                          </InputGroup>
+                          <p className="help-block">Here's some help text</p>
+                        </div>
+                      </FormGroup>
+                      <FormGroup>
+                        <Label htmlFor="appendedInput">Appended text</Label>
+                        <div className="controls">
+                          <InputGroup>
+                            <Input id="appendedInput" size="16" type="text" />
+                            <InputGroupAddon addonType="append">
+                              <InputGroupText>.00</InputGroupText>
+                            </InputGroupAddon>
+                          </InputGroup>
+                          <span className="help-block">Here's more help text</span>
+                        </div>
+                      </FormGroup>
+                      <FormGroup>
+                        <Label htmlFor="appendedPrependedInput">Append and prepend</Label>
+                        <div className="controls">
+                          <InputGroup className="input-prepend">
+                            <InputGroupAddon addonType="prepend">
+                              <InputGroupText>$</InputGroupText>
+                            </InputGroupAddon>
+                            <Input id="appendedPrependedInput" size="16" type="text" />
+                            <InputGroupAddon addonType="append">
+                              <InputGroupText>.00</InputGroupText>
+                            </InputGroupAddon>
+                          </InputGroup>
+                        </div>
+                      </FormGroup>
+                      <FormGroup>
+                        <Label htmlFor="appendedInputButton">Append with button</Label>
+                        <div className="controls">
+                          <InputGroup>
+                            <Input id="appendedInputButton" size="16" type="text" />
+                            <InputGroupAddon addonType="append">
+                              <Button color="secondary">Go!</Button>
+                            </InputGroupAddon>
+                          </InputGroup>
+                        </div>
+                      </FormGroup>
+                      <FormGroup>
+                        <Label htmlFor="appendedInputButtons">Two-button append</Label>
+                        <div className="controls">
+                          <InputGroup>
+                            <Input id="appendedInputButtons" size="16" type="text" />
+                            <InputGroupAddon addonType="append">
+                              <Button color="secondary">Search</Button>
+                              <Button color="secondary">Options</Button>
+                            </InputGroupAddon>
+                          </InputGroup>
+                        </div>
+                      </FormGroup>
+                      <div className="form-actions">
+                        <Button type="submit" color="primary">Save changes</Button>
+                        <Button color="secondary">Cancel</Button>
+                      </div>
+                    </Form>
+                  </CardBody>
+                </Collapse>
+              </Card>
+            </Fade>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
+
+export default Forms;

src/views/Base/Forms/Forms.test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Forms from './Forms';
+import {mount} from 'enzyme/build';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Forms />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+describe('toggle clicks', function() {
+  it('dropdowns without crashing', () => {
+    const wrapper = mount(<Forms />);
+    for (let i = 0; i < 4; i++) {
+      let count = i === 0 ? 'first' : i === 1 ? 'second' : i === 2 ? 'third' : 'fourth'
+      let Dropdown = wrapper.find('button.dropdown-toggle').at(i);
+      Dropdown.simulate('click');
+      expect(wrapper.state()[count]).toEqual(true);
+    }
+    wrapper.unmount()
+  });
+  it('collapse without crashing', () => {
+    const wrapper = mount(<Forms />);
+    let collapse = wrapper.find('button.btn-minimize').at(0);
+    collapse.simulate('click');
+    expect(wrapper.state().collapse).toEqual(false);
+    collapse.simulate('click');
+    expect(wrapper.state().collapse).toEqual(true);
+    wrapper.unmount()
+  });
+  it('fade without crashing', () => {
+    const wrapper = mount(<Forms />);
+    let fade = wrapper.find('button.btn-close').at(0);
+    fade.simulate('click');
+    expect(wrapper.state().fadeIn).toEqual(false);
+    wrapper.unmount()
+  });
+})

src/views/Base/Forms/package.json

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

src/views/Base/Jumbotrons/Jumbotrons.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import { Button, Card, CardBody, CardHeader, Col, Container, Jumbotron, Row } from 'reactstrap';
+
+class Jumbotrons extends Component {
+
+  render() {
+    return (
+      <div className="animated fadeIn">
+        <Row>
+          <Col>
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i><strong>Jumbotron</strong>
+                <div className="card-header-actions">
+                  <a href="https://reactstrap.github.io/components/jumbotron/" rel="noreferrer noopener" target="_blank" className="card-header-action">
+                    <small className="text-muted">docs</small>
+                  </a>
+                </div>
+              </CardHeader>
+              <CardBody>
+                <Jumbotron>
+                  <h1 className="display-3">Hello, world!</h1>
+                  <p className="lead">This is a simple hero unit, a simple Jumbotron-style component for calling extra
+                    attention to featured content or information.</p>
+                  <hr className="my-2" />
+                  <p>It uses utility classes for typgraphy and spacing to space content out within the larger container.</p>
+                  <p className="lead">
+                    <Button color="primary">Learn More</Button>
+                  </p>
+                </Jumbotron>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col>
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i><strong>Jumbotron</strong>
+                <small> fluid</small>
+              </CardHeader>
+              <CardBody>
+                <Jumbotron fluid>
+                  <Container fluid>
+                    <h1 className="display-3">Fluid jumbotron</h1>
+                    <p className="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
+                  </Container>
+                </Jumbotron>
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
+
+export default Jumbotrons;

src/views/Base/Jumbotrons/Jumbotrons.test.js

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

src/views/Base/Jumbotrons/package.json

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

src/views/Base/ListGroups/ListGroups.js

@@ -0,0 +1,229 @@
+import React, { Component } from 'react';
+import { Badge, Card, CardBody, CardHeader, Col, ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText, Row, TabContent, TabPane } from 'reactstrap';
+
+class ListGroups extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      activeTab: 1
+    };
+  }
+
+  toggle(tab) {
+    if (this.state.activeTab !== tab) {
+      this.setState({
+        activeTab: tab
+      });
+    }
+  }
+
+  render() {
+    return (
+      <div className="animated fadeIn">
+        <Row>
+          <Col sm="12" xl="6">
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i><strong>List Group</strong>
+                <div className="card-header-actions">
+                  <a href="https://reactstrap.github.io/components/listgroup/" rel="noreferrer noopener" target="_blank" className="card-header-action">
+                    <small className="text-muted">docs</small>
+                  </a>
+                </div>
+              </CardHeader>
+              <CardBody>
+                <ListGroup>
+                  <ListGroupItem>Cras justo odio</ListGroupItem>
+                  <ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
+                  <ListGroupItem>Morbi leo risus</ListGroupItem>
+                  <ListGroupItem>Porta ac consectetur ac</ListGroupItem>
+                  <ListGroupItem>Vestibulum at eros</ListGroupItem>
+                </ListGroup>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col sm="12" xl="6">
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i><strong>List Group</strong>
+                <small> tags</small>
+              </CardHeader>
+              <CardBody>
+                <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>
+                </ListGroup>
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+        <Row>
+          <Col sm="12" xl="6">
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i><strong>List Group</strong>
+                <small> disabled items</small>
+              </CardHeader>
+              <CardBody>
+                <ListGroup>
+                  <ListGroupItem disabled tag="a" href="#">Cras justo odio</ListGroupItem>
+                  <ListGroupItem tag="a" href="#">Dapibus ac facilisis in</ListGroupItem>
+                  <ListGroupItem disabled tag="a" href="#">Morbi leo risus</ListGroupItem>
+                  <ListGroupItem tag="a" href="#">Porta ac consectetur ac</ListGroupItem>
+                  <ListGroupItem tag="a" href="#">Vestibulum at eros</ListGroupItem>
+                </ListGroup>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col sm="12" xl="6">
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i><strong>List Group</strong>
+                <small> contextual classes</small>
+              </CardHeader>
+              <CardBody>
+                <ListGroup>
+                  <ListGroupItem action color="success">Cras justo odio</ListGroupItem>
+                  <ListGroupItem action color="info">Dapibus ac facilisis in</ListGroupItem>
+                  <ListGroupItem action color="warning">Morbi leo risus</ListGroupItem>
+                  <ListGroupItem action color="danger">Porta ac consectetur ac</ListGroupItem>
+                </ListGroup>
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+        <Row>
+          <Col sm="12" xl="6">
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i><strong>List Group</strong>
+                <small> anchors</small>
+              </CardHeader>
+              <CardBody>
+                <p>Be sure to <strong>not use the standard <code>.btn</code> classes here</strong>.</p>
+                <ListGroup>
+                  <ListGroupItem active tag="a" href="#" action>Cras justo odio</ListGroupItem>
+                  <ListGroupItem tag="a" href="#" action>Dapibus ac facilisis in</ListGroupItem>
+                  <ListGroupItem tag="a" href="#" action>Morbi leo risus</ListGroupItem>
+                  <ListGroupItem tag="a" href="#" action>Porta ac consectetur ac</ListGroupItem>
+                  <ListGroupItem disabled tag="a" href="#" action>Vestibulum at eros</ListGroupItem>
+                </ListGroup>
+                <p />
+              </CardBody>
+            </Card>
+          </Col>
+          <Col sm="12" xl="6">
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i><strong>List Group</strong>
+                <small> buttons</small>
+              </CardHeader>
+              <CardBody>
+                <ListGroup>
+                  <ListGroupItem active tag="button" action>Cras justo odio</ListGroupItem>
+                  <ListGroupItem tag="button" action>Dapibus ac facilisis in</ListGroupItem>
+                  <ListGroupItem tag="button" action>Morbi leo risus</ListGroupItem>
+                  <ListGroupItem tag="button" action>Porta ac consectetur ac</ListGroupItem>
+                  <ListGroupItem disabled tag="button" action>Vestibulum at eros</ListGroupItem>
+                </ListGroup>
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+        <Row>
+          <Col sm="12" xl="6">
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i><strong>List Group</strong>
+                <small> custom content</small>
+              </CardHeader>
+              <CardBody>
+                <ListGroup>
+                  <ListGroupItem active action>
+                    <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
+                    <ListGroupItemText>
+                      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
+                    </ListGroupItemText>
+                  </ListGroupItem>
+                  <ListGroupItem action>
+                    <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
+                    <ListGroupItemText>
+                      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
+                    </ListGroupItemText>
+                  </ListGroupItem>
+                  <ListGroupItem action>
+                    <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
+                    <ListGroupItemText>
+                      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
+                    </ListGroupItemText>
+                  </ListGroupItem>
+                </ListGroup>
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+        <Row>
+          <Col>
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i><strong>List Group</strong> <small>with TabPanes</small>
+                <div className="card-header-actions">
+                  <Badge>NEW</Badge>
+                </div>
+              </CardHeader>
+              <CardBody>
+                <Row>
+                  <Col xs="4">
+                    <ListGroup id="list-tab" role="tablist">
+                      <ListGroupItem onClick={() => this.toggle(0)} action active={this.state.activeTab === 0} >Home</ListGroupItem>
+                      <ListGroupItem onClick={() => this.toggle(1)} action active={this.state.activeTab === 1} >Profile</ListGroupItem>
+                      <ListGroupItem onClick={() => this.toggle(2)} action active={this.state.activeTab === 2} >Messages</ListGroupItem>
+                      <ListGroupItem onClick={() => this.toggle(3)} action active={this.state.activeTab === 3} >Settings</ListGroupItem>
+                    </ListGroup>
+                  </Col>
+                  <Col xs="8">
+                    <TabContent activeTab={this.state.activeTab}>
+                      <TabPane tabId={0} >
+                        <p>Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt
+                          nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim
+                          tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip
+                          eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.</p>
+                      </TabPane>
+                      <TabPane tabId={1}>
+                        <p>Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia
+                          dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt
+                          anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum
+                          reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.</p>
+                      </TabPane>
+                      <TabPane tabId={2}>
+                        <p>Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris
+                          nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur
+                          est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et
+                          deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla
+                          laborum elit adipisicing pariatur cillum.</p>
+                      </TabPane>
+                      <TabPane tabId={3}>
+                        <p>Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna
+                          sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore
+                          aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco
+                          nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor
+                          eiusmod eu pariatur culpa mollit in irure.</p>
+                      </TabPane>
+                    </TabContent>
+                  </Col>
+                </Row>
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
+
+export default ListGroups;

src/views/Base/ListGroups/ListGroups.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ListGroups from './ListGroups';
+import {mount} from 'enzyme/build';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<ListGroups />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
+it('toggle click without crashing', () => {
+  const wrapper = mount(<ListGroups />);
+  for (let i=0; i<4; i++) {
+    let ListGroup = wrapper.find('#list-tab .list-group-item-action.list-group-item').at(i);
+    ListGroup.simulate('click');
+    expect(wrapper.state().activeTab).toEqual(i);
+  }
+  wrapper.unmount()
+});

src/views/Base/ListGroups/package.json

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

src/views/Base/Navbars/Navbars.js

@@ -0,0 +1,118 @@
+import React, { Component } from 'react';
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  Collapse,
+  DropdownItem,
+  DropdownMenu,
+  DropdownToggle,
+  Nav,
+  Navbar,
+  NavbarBrand,
+  NavbarToggler,
+  NavItem,
+  NavLink,
+  UncontrolledDropdown,
+} from 'reactstrap';
+
+class Navbars extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.toggleNavbar = this.toggleNavbar.bind(this);
+    this.state = {
+      isOpen: false,
+      collapsed: true,
+    };
+  }
+
+  toggle() {
+    this.setState({
+      isOpen: !this.state.isOpen,
+    });
+  }
+
+  toggleNavbar() {
+    this.setState({
+      collapsed: !this.state.collapsed,
+    });
+  }
+
+  render() {
+    return (
+      <div className="animated fadeIn">
+        <Card>
+          <CardHeader>
+            <i className="fa fa-align-justify"></i><strong>Navbar</strong>
+            <div className="card-header-actions">
+              <a href="https://reactstrap.github.io/components/navbar/" rel="noreferrer noopener" target="_blank" className="card-header-action">
+                <small className="text-muted">docs</small>
+              </a>
+            </div>
+          </CardHeader>
+          <CardBody>
+            <Navbar color="info" light expand="md">
+              <NavbarBrand href="/">Bootstrap</NavbarBrand>
+              <NavbarToggler onClick={this.toggle} />
+              <Collapse isOpen={this.state.isOpen} navbar>
+                <Nav className="ml-auto" navbar>
+                  <NavItem>
+                    <NavLink href="#/components/navbars">Components</NavLink>
+                  </NavItem>
+                  <NavItem>
+                    <NavLink href="https://github.com/reactstrap/reactstrap" target="_blank">Github</NavLink>
+                  </NavItem>
+                  <UncontrolledDropdown nav inNavbar>
+                    {/*Warning: React does not recognize the `inNavbar` prop on a DOM element.*/}
+                    {/*waiting for reactstrap@5.0.0-alpha.5*/}
+                    <DropdownToggle nav caret>
+                      Options
+                    </DropdownToggle>
+                    <DropdownMenu>
+                      <DropdownItem>
+                        Option 1
+                      </DropdownItem>
+                      <DropdownItem>
+                        Option 2
+                      </DropdownItem>
+                      <DropdownItem divider />
+                      <DropdownItem>
+                        Reset
+                      </DropdownItem>
+                    </DropdownMenu>
+                  </UncontrolledDropdown>
+                </Nav>
+              </Collapse>
+            </Navbar>
+          </CardBody>
+        </Card>
+        <Card>
+          <CardHeader>
+            <i className="fa fa-align-justify"></i><strong>Navbar Toggler</strong>
+          </CardHeader>
+          <CardBody>
+            <Navbar color="success" light>
+              <NavbarBrand href="/" className="mr-auto">Bootstrap</NavbarBrand>
+              <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
+              <Collapse isOpen={!this.state.collapsed} navbar>
+                <Nav navbar>
+                  <NavItem>
+                    <NavLink href="#/components/navbars">Components</NavLink>
+                  </NavItem>
+                  <NavItem>
+                    <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
+                  </NavItem>
+                </Nav>
+              </Collapse>
+            </Navbar>
+          </CardBody>
+        </Card>
+      </div>
+    );
+  }
+}
+
+export default Navbars;

src/views/Base/Navbars/Navbars.test.js

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

src/views/Base/Navbars/package.json

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

src/views/Base/Navs/Navs.js

@@ -0,0 +1,159 @@
+import React, { Component } from 'react';
+import { Card, CardBody, CardHeader, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink } from 'reactstrap';
+
+class Navs extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      dropdownOpen: [false, false],
+    };
+  }
+
+  toggle(i) {
+    const newArray = this.state.dropdownOpen.map((element, index) => {
+      return (index === i ? !element : false);
+    });
+    this.setState({
+      dropdownOpen: newArray,
+    });
+  }
+
+  render() {
+    return (
+      <div className="animated fadeIn">
+        <Card>
+          <CardHeader>
+            <i className="fa fa-align-justify"></i><strong>Navs</strong>
+            <div className="card-header-actions">
+              <a href="https://reactstrap.github.io/components/navs/" rel="noreferrer noopener" target="_blank" className="card-header-action">
+                <small className="text-muted">docs</small>
+              </a>
+            </div>
+          </CardHeader>
+          <CardBody>
+            <p>List Based</p>
+            <Nav>
+              <NavItem>
+                <NavLink href="#">Link</NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink href="#">Link</NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink href="#">Another Link</NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink disabled href="#">Disabled Link</NavLink>
+              </NavItem>
+            </Nav>
+            <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>
+            </Nav>
+          </CardBody>
+        </Card>
+        <Card>
+          <CardHeader>
+            <i className="fa fa-align-justify"></i><strong>Navs Tabs</strong>
+          </CardHeader>
+          <CardBody>
+            <Nav tabs>
+              <NavItem>
+                <NavLink href="#" active>Link</NavLink>
+              </NavItem>
+              <Dropdown nav isOpen={this.state.dropdownOpen[0]} toggle={() => {this.toggle(0);}}>
+                <DropdownToggle nav caret>
+                  Dropdown
+                </DropdownToggle>
+                <DropdownMenu>
+                  <DropdownItem header>Header</DropdownItem>
+                  <DropdownItem disabled>Action</DropdownItem>
+                  <DropdownItem>Another Action</DropdownItem>
+                  <DropdownItem divider />
+                  <DropdownItem>Another Action</DropdownItem>
+                </DropdownMenu>
+              </Dropdown>
+              <NavItem>
+                <NavLink href="#">Link</NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink href="#">Another Link</NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink disabled href="#">Disabled Link</NavLink>
+              </NavItem>
+            </Nav>
+          </CardBody>
+        </Card>
+        <Card>
+          <CardHeader>
+            <i className="fa fa-align-justify"></i><strong>Navs Pills</strong>
+          </CardHeader>
+          <CardBody>
+            <Nav pills>
+              <NavItem>
+                <NavLink href="#" active>Link</NavLink>
+              </NavItem>
+              <Dropdown nav isOpen={this.state.dropdownOpen[1]} toggle={() => {this.toggle(1);}}>
+                <DropdownToggle nav caret>
+                  Dropdown
+                </DropdownToggle>
+                <DropdownMenu>
+                  <DropdownItem header>Header</DropdownItem>
+                  <DropdownItem disabled>Action</DropdownItem>
+                  <DropdownItem>Another Action</DropdownItem>
+                  <DropdownItem divider />
+                  <DropdownItem>Another Action</DropdownItem>
+                </DropdownMenu>
+              </Dropdown>
+              <NavItem>
+                <NavLink href="#">Link</NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink href="#">Another Link</NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink disabled href="#">Disabled Link</NavLink>
+              </NavItem>
+            </Nav>
+          </CardBody>
+        </Card>
+        <Card>
+          <CardHeader>
+            <i className="fa fa-align-justify"></i><strong>Navs Vertical</strong>
+          </CardHeader>
+          <CardBody>
+            <p>List Based</p>
+            <Nav vertical>
+              <NavItem>
+                <NavLink href="#">Link</NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink href="#">Link</NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink href="#">Another Link</NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink disabled href="#">Disabled Link</NavLink>
+              </NavItem>
+            </Nav>
+            <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>
+            </Nav>
+          </CardBody>
+        </Card>
+      </div>
+    );
+  }
+}
+
+export default Navs;

src/views/Base/Navs/Navs.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Navs from './Navs';
+import {mount} from 'enzyme/build';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Navs />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
+it('toggle click without crashing', () => {
+  const wrapper = mount(<Navs />);
+  for (let i=0; i<2; i++) {
+    let Nav = wrapper.find('a.dropdown-toggle').at(i);
+    Nav.simulate('click');
+    expect(wrapper.state().dropdownOpen[i]).toEqual(true);
+  }
+  wrapper.unmount()
+});

src/views/Base/Navs/package.json

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

src/views/Base/Paginations/Paginations.test.js

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

src/views/Base/Paginations/Pagnations.js

@@ -0,0 +1,177 @@
+import React, { Component } from 'react';
+import { Card, CardBody, CardHeader, Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+
+class Paginations extends Component {
+
+  render() {
+    return (
+      <div className="animated fadeIn">
+        <Card>
+          <CardHeader>
+            <i className="fa fa-align-justify"></i><strong>Pagination</strong>
+            <div className="card-header-actions">
+              <a href="https://reactstrap.github.io/components/pagination/" rel="noreferrer noopener" target="_blank" className="card-header-action">
+                <small className="text-muted">docs</small>
+              </a>
+            </div>
+          </CardHeader>
+          <CardBody>
+            <Pagination>
+              <PaginationItem>
+                <PaginationLink previous tag="button" />
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink tag="button">
+                  1
+                </PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink tag="button">
+                  2
+                </PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink tag="button">
+                  3
+                </PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink tag="button">
+                  4
+                </PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink tag="button">
+                  5
+                </PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink next tag="button" />
+              </PaginationItem>
+            </Pagination>
+          </CardBody>
+        </Card>
+        <Card>
+          <CardHeader>
+            <i className="fa fa-align-justify"></i><strong>Pagination</strong>
+            <small> disabled and active states</small>
+          </CardHeader>
+          <CardBody>
+            <Pagination>
+              <PaginationItem disabled>
+                <PaginationLink previous tag="button" />
+              </PaginationItem>
+              <PaginationItem active>
+                <PaginationLink tag="button">
+                  1
+                </PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink tag="button">
+                  2
+                </PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink tag="button">
+                  3
+                </PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink tag="button">
+                  4
+                </PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink tag="button">
+                  5
+                </PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink next tag="button" />
+              </PaginationItem>
+            </Pagination>
+          </CardBody>
+        </Card>
+        <Card>
+          <CardHeader>
+            <i className="fa fa-align-justify"></i><strong>Pagination</strong>
+            <small> sizing</small>
+          </CardHeader>
+          <CardBody>
+            <Pagination size="lg">
+              <PaginationItem>
+                <PaginationLink previous tag="button" />
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink tag="button">
+                  1
+                </PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink tag="button">
+                  2
+                </PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink tag="button">
+                  3
+                </PaginationLink>
+              </PaginationItem>
+              <PaginationItem className="d-none d-sm-block">
+                <PaginationLink next tag="button" />
+              </PaginationItem>
+            </Pagination>
+            <Pagination>
+              <PaginationItem>
+                <PaginationLink previous tag="button" />
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink tag="button">
+                  1
+                </PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink tag="button">
+                  2
+                </PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink tag="button">
+                  3
+                </PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink next tag="button" />
+              </PaginationItem>
+            </Pagination>
+            <Pagination size="sm">
+              <PaginationItem>
+                <PaginationLink previous tag="button" />
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink tag="button">
+                  1
+                </PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink tag="button">
+                  2
+                </PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink tag="button">
+                  3
+                </PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink next tag="button" />
+              </PaginationItem>
+            </Pagination>
+          </CardBody>
+        </Card>
+      </div>
+    );
+  }
+}
+
+export default Paginations;

src/views/Base/Paginations/package.json

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

src/views/Base/Popovers/Popovers.js

@@ -0,0 +1,108 @@
+import React, { Component } from 'react';
+import { Button, Card, CardBody, CardHeader, Popover, PopoverBody, PopoverHeader } from 'reactstrap';
+
+class PopoverItem extends Component {
+  constructor(props) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      popoverOpen: false,
+    };
+  }
+
+  toggle() {
+    this.setState({
+      popoverOpen: !this.state.popoverOpen,
+    });
+  }
+
+  render() {
+    return (
+      <span>
+        <Button className="mr-1" color="secondary" id={'Popover-' + this.props.id} onClick={this.toggle}>
+          {this.props.item.text}
+        </Button>
+        <Popover placement={this.props.item.placement} isOpen={this.state.popoverOpen} target={'Popover-' + this.props.id} toggle={this.toggle} trigger="legacy" delay={0}>
+          <PopoverHeader>Popover Title</PopoverHeader>
+          <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
+        </Popover>
+      </span>
+    );
+  }
+}
+
+class Popovers extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      popoverOpen: false,
+      popovers: [
+        {
+          placement: 'top',
+          text: 'Top',
+        },
+        {
+          placement: 'bottom',
+          text: 'Bottom',
+        },
+        {
+          placement: 'left',
+          text: 'Left',
+        },
+        {
+          placement: 'right',
+          text: 'Right',
+        },
+      ],
+    };
+  }
+
+  toggle() {
+    this.setState({
+      popoverOpen: !this.state.popoverOpen,
+    });
+  }
+
+  render() {
+    return (
+      <div className="animated fadeIn">
+        <Card>
+          <CardHeader>
+            <i className="fa fa-align-justify"></i><strong>Popovers</strong>
+            <div className="card-header-actions">
+              <a href="https://reactstrap.github.io/components/popovers/" rel="noreferrer noopener" target="_blank" className="card-header-action">
+                <small className="text-muted">docs</small>
+              </a>
+            </div>
+          </CardHeader>
+          <CardBody>
+            <Button id="Popover1" onClick={this.toggle}>
+              Launch Popover
+            </Button>
+            <Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle}>
+              <PopoverHeader>Popover Title</PopoverHeader>
+              <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
+            </Popover>
+          </CardBody>
+        </Card>
+        <Card>
+          <CardHeader>
+            <i className="fa fa-align-justify"></i><strong>Popovers</strong>
+            <small> list</small>
+          </CardHeader>
+          <CardBody>
+            {this.state.popovers.map((popover, i) => {
+              return <PopoverItem key={i} item={popover} id={i} />;
+            })}
+          </CardBody>
+        </Card>
+      </div>
+    );
+  }
+}
+
+export default Popovers;

src/views/Base/Popovers/Popovers.test.js

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

src/views/Base/Popovers/package.json

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

src/views/Base/ProgressBar/ProgressBar.js

@@ -0,0 +1,167 @@
+import React, { Component } from 'react';
+import { Card, CardBody, CardHeader, Progress } from 'reactstrap';
+
+class ProgressBar extends Component {
+
+  render() {
+    return (
+      <div className="animated fadeIn">
+        <Card>
+          <CardHeader>
+            <i className="fa fa-align-justify"></i><strong>Progress</strong>
+            <div className="card-header-actions">
+              <a href="https://reactstrap.github.io/components/progress/" rel="noreferrer noopener" target="_blank" className="card-header-action">
+                <small className="text-muted">docs</small>
+              </a>
+            </div>
+          </CardHeader>
+          <CardBody>
+            <div className="text-center">0%</div>
+            <Progress />
+            <div className="text-center">25%</div>
+            <Progress value="25" />
+            <div className="text-center">50%</div>
+            <Progress value={50} />
+            <div className="text-center">75%</div>
+            <Progress value={75} />
+            <div className="text-center">100%</div>
+            <Progress value="100" />
+            <div className="text-center">Multiple bars</div>
+            <Progress multi>
+              <Progress bar value="15" />
+              <Progress bar color="success" value="30" />
+              <Progress bar color="info" value="25" />
+              <Progress bar color="warning" value="20" />
+              <Progress bar color="danger" value="5" />
+            </Progress>
+          </CardBody>
+        </Card>
+        <Card>
+          <CardHeader>
+            <i className="fa fa-align-justify"></i><strong>Progress</strong>
+            <small> color variants</small>
+          </CardHeader>
+          <CardBody>
+            <Progress value={2 * 5} className="mb-3" />
+            <Progress color="success" value="25" className="mb-3" />
+            <Progress color="info" value={50} className="mb-3" />
+            <Progress color="warning" value={75} className="mb-3" />
+            <Progress color="danger" value="100" className="mb-3" />
+          </CardBody>
+        </Card>
+        <Card>
+          <CardHeader>
+            <i className="fa fa-align-justify"></i><strong>Progress</strong>
+            <small> labels</small>
+          </CardHeader>
+          <CardBody>
+            <Progress value="25" className="mb-3">25%</Progress>
+            <Progress value={50} className="mb-3">1/2</Progress>
+            <Progress value={75} className="mb-3">You're almost there!</Progress>
+            <Progress color="success" value="100" className="mb-3">You did it!</Progress>
+            <Progress multi className="mb-3">
+              <Progress bar value="15">Meh</Progress>
+              <Progress bar color="success" value="30">Wow!</Progress>
+              <Progress bar color="info" value="25">Cool</Progress>
+              <Progress bar color="warning" value="20">20%</Progress>
+              <Progress bar color="danger" value="5">!!</Progress>
+            </Progress>
+          </CardBody>
+        </Card>
+        <Card>
+          <CardHeader>
+            <i className="fa fa-align-justify"></i><strong>Progress</strong>
+            <small> striped</small>
+          </CardHeader>
+          <CardBody>
+            <Progress striped value={2 * 5} className="mb-3" />
+            <Progress striped color="success" value="25" className="mb-3" />
+            <Progress striped color="info" value={50} className="mb-3" />
+            <Progress striped color="warning" value={75} className="mb-3" />
+            <Progress striped color="danger" value="100" className="mb-3" />
+            <Progress multi className="mb-3">
+              <Progress striped bar value="10" />
+              <Progress striped bar color="success" value="30" />
+              <Progress striped bar color="warning" value="20" />
+              <Progress striped bar color="danger" value="20" />
+            </Progress>
+          </CardBody>
+        </Card>
+        <Card>
+          <CardHeader>
+            <i className="fa fa-align-justify"></i><strong>Progress</strong>
+            <small> animated</small>
+          </CardHeader>
+          <CardBody>
+            <Progress animated value={2 * 5} className="mb-3" />
+            <Progress animated color="success" value="25" className="mb-3" />
+            <Progress animated color="info" value={50} className="mb-3" />
+            <Progress animated color="warning" value={75} className="mb-3" />
+            <Progress animated color="danger" value="100" className="mb-3" />
+            <Progress multi>
+              <Progress animated bar value="10" />
+              <Progress animated bar color="success" value="30" />
+              <Progress animated bar color="warning" value="20" />
+              <Progress animated bar color="danger" value="20" />
+            </Progress>
+          </CardBody>
+        </Card>
+        <Card>
+          <CardHeader>
+            <i className="fa fa-align-justify"></i><strong>Progress</strong>
+            <small> multiple bars / stacked</small>
+          </CardHeader>
+          <CardBody>
+            <div className="text-center">Plain</div>
+            <Progress multi>
+              <Progress bar value="15" />
+              <Progress bar color="success" value="20" />
+              <Progress bar color="info" value="25" />
+              <Progress bar color="warning" value="20" />
+              <Progress bar color="danger" value="15" />
+            </Progress>
+            <div className="text-center">With Labels</div>
+            <Progress multi>
+              <Progress bar value="15">Meh</Progress>
+              <Progress bar color="success" value="35">Wow!</Progress>
+              <Progress bar color="warning" value="25">25%</Progress>
+              <Progress bar color="danger" value="25">LOOK OUT!!</Progress>
+            </Progress>
+            <div className="text-center">Stripes and Animations</div>
+            <Progress multi>
+              <Progress bar striped value="15">Stripes</Progress>
+              <Progress bar animated color="success" value="30">Animated Stripes</Progress>
+              <Progress bar color="info" value="25">Plain</Progress>
+            </Progress>
+          </CardBody>
+        </Card>
+        <Card>
+          <CardHeader>
+            <i className="fa fa-align-justify"></i><strong>Progress</strong>
+            <small> max value</small>
+          </CardHeader>
+          <CardBody>
+            <div className="text-center">1 of 5</div>
+            <Progress value="1" max="5" />
+            <div className="text-center">50 of 135</div>
+            <Progress value={50} max="135" />
+            <div className="text-center">75 of 111</div>
+            <Progress value={75} max={111} />
+            <div className="text-center">463 of 500</div>
+            <Progress value="463" max={500} />
+
+            <div className="text-center">Various (40) of 55</div>
+            <Progress multi>
+              <Progress bar value="5" max={55}>5</Progress>
+              <Progress bar color="success" value="15" max={55}>15</Progress>
+              <Progress bar color="warning" value="10" max={55}>10</Progress>
+              <Progress bar color="danger" value="10" max={55}>10</Progress>
+            </Progress>
+          </CardBody>
+        </Card>
+      </div>
+    );
+  }
+}
+
+export default ProgressBar;

src/views/Base/ProgressBar/ProgressBar.test.js

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

src/views/Base/ProgressBar/package.json

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

src/views/Base/Switches/Switches.js

@@ -0,0 +1,494 @@
+import React, { Component } from 'react';
+import { Card, CardBody, CardHeader, Col, Row, Table } from 'reactstrap';
+import { AppSwitch } from '@coreui/react'
+
+class Switches extends Component {
+  render() {
+    return (
+      <div className="animated fadeIn">
+
+        <Row>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch default
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} color={'primary'} checked />
+                <AppSwitch className={'mx-1'} color={'secondary'} checked />
+                <AppSwitch className={'mx-1'} color={'success'} checked />
+                <AppSwitch className={'mx-1'} color={'warning'} checked />
+                <AppSwitch className={'mx-1'} color={'info'} checked />
+                <AppSwitch className={'mx-1'} color={'danger'} checked />
+                <AppSwitch className={'mx-1'} color={'light'} checked />
+                <AppSwitch className={'mx-1'} color={'dark'} checked />
+                <AppSwitch className={'mx-1'} color={'primary'} disabled />
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch pills
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} disabled />
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                3d Switch
+                {' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'}  />
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                3d Switch <small><code>disabled</code></small>
+                {' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'success'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'info'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'light'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} disabled />
+              </CardBody>
+            </Card>
+          </Col>
+
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                3d Switch <small><code>outline="alt"</code></small>
+                {' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'success'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'info'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'light'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} outline={'alt'} disabled />
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                3d Switch <small><code>label</code></small>
+                {' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} label dataOn={'\u2713'} dataOff={'\u2715'}/>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                3d Switch <small><code>outline="alt" label</code></small>
+                {' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'secondary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'success'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'warning'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'info'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'danger'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'light'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'dark'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} label dataOn={'\u2713'} dataOff={'\u2715'}/>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                3d Switch <small><code>outline="alt" label</code></small>
+                {' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'secondary'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'success'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'warning'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'info'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'danger'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'light'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'dark'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} label />
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch outline
+                {' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} color={'primary'} outline checked />
+                <AppSwitch className={'mx-1'} color={'secondary'} outline checked />
+                <AppSwitch className={'mx-1'} color={'success'} outline checked />
+                <AppSwitch className={'mx-1'} color={'warning'} outline checked />
+                <AppSwitch className={'mx-1'} color={'info'} outline checked />
+                <AppSwitch className={'mx-1'} color={'danger'} outline checked />
+                <AppSwitch className={'mx-1'} color={'light'} outline checked />
+                <AppSwitch className={'mx-1'} color={'dark'} outline checked />
+                <AppSwitch className={'mx-1'} color={'primary'} outline disabled />
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch outline pills
+                {' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline disabled />
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch outline alternative
+                {' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'secondary'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'success'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'warning'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'info'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'danger'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'light'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'dark'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} disabled />
+              </CardBody>
+            </Card>
+          </Col>
+
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch outline alternative - pills
+                {' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} disabled />
+              </CardBody>
+            </Card>
+          </Col>
+
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch with text
+                {' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} color={'primary'} label checked />
+                <AppSwitch className={'mx-1'} color={'secondary'} label checked />
+                <AppSwitch className={'mx-1'} color={'success'} label checked />
+                <AppSwitch className={'mx-1'} color={'warning'} label checked />
+                <AppSwitch className={'mx-1'} color={'info'} label checked />
+                <AppSwitch className={'mx-1'} color={'danger'} label checked />
+                <AppSwitch className={'mx-1'} color={'light'} label checked />
+                <AppSwitch className={'mx-1'} color={'dark'} label checked />
+                <AppSwitch className={'mx-1'} color={'primary'} label disabled />
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch with text pills
+                {' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} label disabled />
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch with text outline
+                {' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} color={'primary'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'secondary'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'success'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'warning'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'info'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'danger'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'light'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'dark'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'primary'} outline label disabled />
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch with text outline pills
+                {' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline label disabled />
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch with text outline alternative pills
+                {' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'secondary'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'success'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'warning'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'info'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'danger'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'light'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'dark'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} label disabled />
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch with text outline alternative pills
+                {' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} label disabled />
+              </CardBody>
+            </Card>
+          </Col>
+
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch with text outline alternative
+                {' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} color={'primary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'secondary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'success'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'warning'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'info'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} color={'danger'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'light'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'dark'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'primary'} outline disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch with text outline alternative pills
+                {' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
+              </CardBody>
+            </Card>
+          </Col>
+
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch with text outline alternative
+                {' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'secondary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'success'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'warning'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'info'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} color={'danger'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'light'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'dark'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch with text outline alternative pills
+                {' '}<a href="https://coreui.io/pro/react/" className="badge badge-danger">CoreUI Pro</a>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
+              </CardBody>
+            </Card>
+          </Col>
+
+          <Col xs="12">
+            <Card>
+              <CardHeader>
+                Sizes
+              </CardHeader>
+              <CardBody className="p-0">
+                <Table hover striped className="table-align-middle mb-0">
+                  <thead>
+                  <tr>
+                    <th>Size</th>
+                    <th>Example</th>
+                    <th>Props</th>
+                  </tr>
+                  </thead>
+                  <tbody>
+                  <tr>
+                    <td>
+                      Large
+                    </td>
+                    <td>
+                      <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked size={'lg'} />
+                    </td>
+                    <td>
+                      Add <code>size={'lg'}</code>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      Normal
+                    </td>
+                    <td>
+                      <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked  />
+                    </td>
+                    <td>
+                      -
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      Small
+                    </td>
+                    <td>
+                      <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked size={'sm'} />
+                    </td>
+                    <td>
+                      Add <code>size={'sm'}</code>
+                    </td>
+                  </tr>
+                  </tbody>
+                </Table>
+              </CardBody>
+            </Card>
+          </Col>
+
+        </Row>
+      </div>
+
+    );
+  }
+}
+
+export default Switches;

src/views/Base/Switches/Switches.test.js

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

src/views/Base/Switches/package.json

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

src/views/Base/Tables/Tables.js

@@ -0,0 +1,393 @@
+import React, { Component } from 'react';
+import { Badge, Card, CardBody, CardHeader, Col, Pagination, PaginationItem, PaginationLink, Row, Table } from 'reactstrap';
+
+class Tables extends Component {
+  render() {
+    return (
+      <div className="animated fadeIn">
+        <Row>
+          <Col xs="12" lg="6">
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i> Simple Table
+              </CardHeader>
+              <CardBody>
+                <Table responsive>
+                  <thead>
+                  <tr>
+                    <th>Username</th>
+                    <th>Date registered</th>
+                    <th>Role</th>
+                    <th>Status</th>
+                  </tr>
+                  </thead>
+                  <tbody>
+                  <tr>
+                    <td>Samppa Nori</td>
+                    <td>2012/01/01</td>
+                    <td>Member</td>
+                    <td>
+                      <Badge color="success">Active</Badge>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Estavan Lykos</td>
+                    <td>2012/02/01</td>
+                    <td>Staff</td>
+                    <td>
+                      <Badge color="danger">Banned</Badge>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Chetan Mohamed</td>
+                    <td>2012/02/01</td>
+                    <td>Admin</td>
+                    <td>
+                      <Badge color="secondary">Inactive</Badge>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Derick Maximinus</td>
+                    <td>2012/03/01</td>
+                    <td>Member</td>
+                    <td>
+                      <Badge color="warning">Pending</Badge>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Friderik Dávid</td>
+                    <td>2012/01/21</td>
+                    <td>Staff</td>
+                    <td>
+                      <Badge color="success">Active</Badge>
+                    </td>
+                  </tr>
+                  </tbody>
+                </Table>
+                <Pagination>
+                  <PaginationItem>
+                    <PaginationLink previous tag="button"></PaginationLink>
+                  </PaginationItem>
+                  <PaginationItem active>
+                    <PaginationLink tag="button">1</PaginationLink>
+                  </PaginationItem>
+                  <PaginationItem>
+                    <PaginationLink tag="button">2</PaginationLink>
+                  </PaginationItem>
+                  <PaginationItem>
+                    <PaginationLink tag="button">3</PaginationLink>
+                  </PaginationItem>
+                  <PaginationItem>
+                    <PaginationLink tag="button">4</PaginationLink>
+                  </PaginationItem>
+                  <PaginationItem>
+                    <PaginationLink next tag="button"></PaginationLink>
+                  </PaginationItem>
+                </Pagination>
+              </CardBody>
+            </Card>
+          </Col>
+
+          <Col xs="12" lg="6">
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i> Striped Table
+              </CardHeader>
+              <CardBody>
+                <Table responsive striped>
+                  <thead>
+                  <tr>
+                    <th>Username</th>
+                    <th>Date registered</th>
+                    <th>Role</th>
+                    <th>Status</th>
+                  </tr>
+                  </thead>
+                  <tbody>
+                  <tr>
+                    <td>Yiorgos Avraamu</td>
+                    <td>2012/01/01</td>
+                    <td>Member</td>
+                    <td>
+                      <Badge color="success">Active</Badge>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Avram Tarasios</td>
+                    <td>2012/02/01</td>
+                    <td>Staff</td>
+                    <td>
+                      <Badge color="danger">Banned</Badge>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Quintin Ed</td>
+                    <td>2012/02/01</td>
+                    <td>Admin</td>
+                    <td>
+                      <Badge color="secondary">Inactive</Badge>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Enéas Kwadwo</td>
+                    <td>2012/03/01</td>
+                    <td>Member</td>
+                    <td>
+                      <Badge color="warning">Pending</Badge>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Agapetus Tadeáš</td>
+                    <td>2012/01/21</td>
+                    <td>Staff</td>
+                    <td>
+                      <Badge color="success">Active</Badge>
+                    </td>
+                  </tr>
+                  </tbody>
+                </Table>
+                <Pagination>
+                  <PaginationItem disabled><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem>
+                  <PaginationItem active>
+                    <PaginationLink tag="button">1</PaginationLink>
+                  </PaginationItem>
+                  <PaginationItem><PaginationLink tag="button">2</PaginationLink></PaginationItem>
+                  <PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem>
+                  <PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem>
+                  <PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem>
+                </Pagination>
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+
+        <Row>
+
+          <Col xs="12" lg="6">
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i> Condensed Table
+              </CardHeader>
+              <CardBody>
+                <Table responsive size="sm">
+                  <thead>
+                  <tr>
+                    <th>Username</th>
+                    <th>Date registered</th>
+                    <th>Role</th>
+                    <th>Status</th>
+                  </tr>
+                  </thead>
+                  <tbody>
+                  <tr>
+                    <td>Carwyn Fachtna</td>
+                    <td>2012/01/01</td>
+                    <td>Member</td>
+                    <td>
+                      <Badge color="success">Active</Badge>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Nehemiah Tatius</td>
+                    <td>2012/02/01</td>
+                    <td>Staff</td>
+                    <td>
+                      <Badge color="danger">Banned</Badge>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Ebbe Gemariah</td>
+                    <td>2012/02/01</td>
+                    <td>Admin</td>
+                    <td>
+                      <Badge color="secondary">Inactive</Badge>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Eustorgios Amulius</td>
+                    <td>2012/03/01</td>
+                    <td>Member</td>
+                    <td>
+                      <Badge color="warning">Pending</Badge>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Leopold Gáspár</td>
+                    <td>2012/01/21</td>
+                    <td>Staff</td>
+                    <td>
+                      <Badge color="success">Active</Badge>
+                    </td>
+                  </tr>
+                  </tbody>
+                </Table>
+                <Pagination>
+                  <PaginationItem><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem>
+                  <PaginationItem active>
+                    <PaginationLink tag="button">1</PaginationLink>
+                  </PaginationItem>
+                  <PaginationItem><PaginationLink tag="button">2</PaginationLink></PaginationItem>
+                  <PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem>
+                  <PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem>
+                  <PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem>
+                </Pagination>
+              </CardBody>
+            </Card>
+          </Col>
+
+          <Col xs="12" lg="6">
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i> Bordered Table
+              </CardHeader>
+              <CardBody>
+                <Table responsive bordered>
+                  <thead>
+                  <tr>
+                    <th>Username</th>
+                    <th>Date registered</th>
+                    <th>Role</th>
+                    <th>Status</th>
+                  </tr>
+                  </thead>
+                  <tbody>
+                  <tr>
+                    <td>Pompeius René</td>
+                    <td>2012/01/01</td>
+                    <td>Member</td>
+                    <td>
+                      <Badge color="success">Active</Badge>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Paĉjo Jadon</td>
+                    <td>2012/02/01</td>
+                    <td>Staff</td>
+                    <td>
+                      <Badge color="danger">Banned</Badge>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Micheal Mercurius</td>
+                    <td>2012/02/01</td>
+                    <td>Admin</td>
+                    <td>
+                      <Badge color="secondary">Inactive</Badge>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Ganesha Dubhghall</td>
+                    <td>2012/03/01</td>
+                    <td>Member</td>
+                    <td>
+                      <Badge color="warning">Pending</Badge>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Hiroto Šimun</td>
+                    <td>2012/01/21</td>
+                    <td>Staff</td>
+                    <td>
+                      <Badge color="success">Active</Badge>
+                    </td>
+                  </tr>
+                  </tbody>
+                </Table>
+                <Pagination>
+                  <PaginationItem><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem>
+                  <PaginationItem active>
+                    <PaginationLink tag="button">1</PaginationLink>
+                  </PaginationItem>
+                  <PaginationItem className="page-item"><PaginationLink tag="button">2</PaginationLink></PaginationItem>
+                  <PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem>
+                  <PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem>
+                  <PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem>
+                </Pagination>
+              </CardBody>
+            </Card>
+          </Col>
+
+        </Row>
+
+        <Row>
+          <Col>
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i> Combined All Table
+              </CardHeader>
+              <CardBody>
+                <Table hover bordered striped responsive size="sm">
+                  <thead>
+                  <tr>
+                    <th>Username</th>
+                    <th>Date registered</th>
+                    <th>Role</th>
+                    <th>Status</th>
+                  </tr>
+                  </thead>
+                  <tbody>
+                  <tr>
+                    <td>Vishnu Serghei</td>
+                    <td>2012/01/01</td>
+                    <td>Member</td>
+                    <td>
+                      <Badge color="success">Active</Badge>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Zbyněk Phoibos</td>
+                    <td>2012/02/01</td>
+                    <td>Staff</td>
+                    <td>
+                      <Badge color="danger">Banned</Badge>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Einar Randall</td>
+                    <td>2012/02/01</td>
+                    <td>Admin</td>
+                    <td>
+                      <Badge color="secondary">Inactive</Badge>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Félix Troels</td>
+                    <td>2012/03/01</td>
+                    <td>Member</td>
+                    <td>
+                      <Badge color="warning">Pending</Badge>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Aulus Agmundr</td>
+                    <td>2012/01/21</td>
+                    <td>Staff</td>
+                    <td>
+                      <Badge color="success">Active</Badge>
+                    </td>
+                  </tr>
+                  </tbody>
+                </Table>
+                <nav>
+                  <Pagination>
+                    <PaginationItem><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem>
+                    <PaginationItem active>
+                      <PaginationLink tag="button">1</PaginationLink>
+                    </PaginationItem>
+                    <PaginationItem><PaginationLink tag="button">2</PaginationLink></PaginationItem>
+                    <PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem>
+                    <PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem>
+                    <PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem>
+                  </Pagination>
+                </nav>
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+      </div>
+
+    );
+  }
+}
+
+export default Tables;

src/views/Base/Tables/Tables.test.js

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

src/views/Base/Tables/package.json

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

src/views/Base/Tabs/Tabs.js

@@ -0,0 +1,183 @@
+import React, {Component} from 'react';
+import {Badge, Col, Nav, NavItem, NavLink, Row, TabContent, TabPane} from 'reactstrap';
+import classnames from 'classnames';
+
+class Tabs extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      activeTab: new Array(4).fill('1'),
+    };
+  }
+
+  lorem() {
+    return 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.'
+  }
+
+  toggle(tabPane, tab) {
+    const newArray = this.state.activeTab.slice()
+    newArray[tabPane] = tab
+    this.setState({
+      activeTab: newArray,
+    });
+  }
+
+  tabPane() {
+    return (
+      <>
+        <TabPane tabId="1">
+          {`1. ${this.lorem()}`}
+        </TabPane>
+        <TabPane tabId="2">
+          {`2. ${this.lorem()}`}
+        </TabPane>
+        <TabPane tabId="3">
+          {`3. ${this.lorem()}`}
+        </TabPane>
+      </>
+    );
+  }
+
+  render() {
+    return (
+      <div className="animated fadeIn">
+        <Row>
+          <Col xs="12" md="6" className="mb-4">
+            <Nav tabs>
+              <NavItem>
+                <NavLink
+                  active={this.state.activeTab[0] === '1'}
+                  onClick={() => { this.toggle(0, '1'); }}
+                >
+                  Home
+                </NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink
+                  active={this.state.activeTab[0] === '2'}
+                  onClick={() => { this.toggle(0, '2'); }}
+                >
+                  Profile
+                </NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink
+                  active={this.state.activeTab[0] === '3'}
+                  onClick={() => { this.toggle(0, '3'); }}
+                >
+                  Messages
+                </NavLink>
+              </NavItem>
+            </Nav>
+            <TabContent activeTab={this.state.activeTab[0]}>
+              {this.tabPane()}
+            </TabContent>
+          </Col>
+          <Col xs="12" md="6" className="mb-4">
+            <Nav tabs>
+              <NavItem>
+                <NavLink
+                  active={this.state.activeTab[1] === '1'}
+                  onClick={() => { this.toggle(1, '1'); }}
+                >
+                  <i className="icon-calculator"></i>
+                </NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink
+                  active={this.state.activeTab[1] === '2'}
+                  onClick={() => { this.toggle(1, '2'); }}
+                >
+                  <i className="icon-basket-loaded"></i>
+                </NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink
+                  active={this.state.activeTab[1] === '3'}
+                  onClick={() => { this.toggle(1, '3'); }}
+                >
+                  <i className="icon-pie-chart"></i>
+                </NavLink>
+              </NavItem>
+            </Nav>
+            <TabContent activeTab={this.state.activeTab[1]}>
+              {this.tabPane()}
+              </TabContent>
+          </Col>
+          <Col xs="12" md="6" className="mb-4">
+            <Nav tabs>
+              <NavItem>
+                <NavLink
+                  active={this.state.activeTab[2] === '1'}
+                  onClick={() => { this.toggle(2, '1'); }}
+                >
+                  <i className="icon-calculator"></i> <span className={this.state.activeTab[2] === '1' ? '' : 'd-none'}> Calculator</span>
+                </NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink
+                  active={this.state.activeTab[2] === '2'}
+                  onClick={() => { this.toggle(2, '2'); }}
+                >
+                  <i className="icon-basket-loaded"></i> <span
+                  className={this.state.activeTab[2] === '2' ? '' : 'd-none'}> Shopping cart</span>
+                </NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink
+                  className={classnames({ active: this.state.activeTab[2] === '3' })}
+                  onClick={() => { this.toggle(2,'3'); }}
+                >
+                  <i className="icon-pie-chart"></i> <span className={this.state.activeTab[2] === '3' ? '' : 'd-none'}> Charts</span>
+                </NavLink>
+              </NavItem>
+            </Nav>
+            <TabContent activeTab={this.state.activeTab[2]}>
+              {this.tabPane()}
+            </TabContent>
+          </Col>
+          <Col xs="12" md="6" className="mb-4">
+            <Nav tabs>
+              <NavItem>
+                <NavLink
+                  active={this.state.activeTab[3] === '1'}
+                  onClick={() => { this.toggle(3, '1'); }}
+                >
+                  <i className="icon-calculator"></i>
+                  <span className={this.state.activeTab[3] === '1' ? '' : 'd-none'}> Calc</span>
+                  {'\u00A0'}<Badge color="success">New</Badge>
+                </NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink
+                  active={this.state.activeTab[3] === '2'}
+                  onClick={() => { this.toggle(3, '2'); }}
+                >
+                  <i className="icon-basket-loaded"></i>
+                  <span className={this.state.activeTab[3] === '2' ? '' : 'd-none'}> Cart</span>
+                  {'\u00A0'}<Badge pill color="danger">29</Badge>
+                </NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink
+                  active={this.state.activeTab[3] === '3'}
+                  onClick={() => { this.toggle(3, '3'); }} >
+                    <i className="icon-pie-chart"></i>
+                    <span className={this.state.activeTab[3] === '3' ? '' : 'd-none'}> Charts</span>
+                </NavLink>
+              </NavItem>
+            </Nav>
+            <TabContent activeTab={this.state.activeTab[3]}>
+              {this.tabPane()}
+            </TabContent>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}
+
+export default Tabs;

src/views/Base/Tabs/Tabs.test.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Tabs from './Tabs';
+import {mount} from 'enzyme/build';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Tabs />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
+it('toggle click without crashing', () => {
+  const wrapper = mount(<Tabs />);
+  for (let pane=0; pane<4; pane++) {
+    for( let tabId=1; tabId<4; tabId++) {
+      let Tab = wrapper.find('.nav-tabs .nav-item .nav-link').at((3*pane)+tabId-1);
+      Tab.simulate('click');
+      expect(wrapper.state().activeTab[pane]).toEqual((tabId).toString());
+    }
+  }
+  wrapper.unmount()
+});

src/views/Base/Tabs/package.json

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

src/views/Base/Tooltips/Tooltips.js

@@ -0,0 +1,134 @@
+import React, { Component } from 'react';
+import { Button, Card, CardBody, CardHeader, Tooltip, UncontrolledTooltip } from 'reactstrap';
+
+class TooltipItem extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      tooltipOpen: false,
+    };
+  }
+
+  toggle() {
+    this.setState({
+      tooltipOpen: !this.state.tooltipOpen,
+    });
+  }
+
+  render() {
+    return (
+      <span>
+        <Button className="mr-1" color="secondary" id={'Tooltip-' + this.props.id}>
+          {this.props.item.text}
+        </Button>
+        <Tooltip placement={this.props.item.placement} isOpen={this.state.tooltipOpen} target={'Tooltip-' + this.props.id} toggle={this.toggle}>
+          Tooltip Content!
+        </Tooltip>
+      </span>
+    );
+  }
+}
+
+class Tooltips extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      tooltipOpen: [false, false],
+      tooltips: [
+        {
+          placement: 'top',
+          text: 'Top',
+        },
+        {
+          placement: 'bottom',
+          text: 'Bottom',
+        },
+        {
+          placement: 'left',
+          text: 'Left',
+        },
+        {
+          placement: 'right',
+          text: 'Right',
+        },
+      ],
+    };
+  }
+
+  toggle(i) {
+    const newArray = this.state.tooltipOpen.map((element, index) => {
+      return (index === i ? !element : false);
+    });
+    this.setState({
+      tooltipOpen: newArray,
+    });
+  }
+
+  render() {
+    return (
+      <div className="animated fadeIn">
+        <Card>
+          <CardHeader>
+            <i className="fa fa-align-justify"></i><strong>Tooltips</strong>
+            <div className="card-header-actions">
+              <a href="https://reactstrap.github.io/components/tooltips/" rel="noreferrer noopener" target="_blank" className="card-header-action">
+                <small className="text-muted">docs</small>
+              </a>
+            </div>
+          </CardHeader>
+          <CardBody>
+            {/*eslint-disable-next-line*/}
+            <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);}}>
+              Hello world!
+            </Tooltip>
+          </CardBody>
+        </Card>
+        <Card>
+          <CardHeader>
+            <i className="fa fa-align-justify"></i><strong>Tooltip</strong>
+            <small> disable autohide</small>
+          </CardHeader>
+          <CardBody>
+            {/*eslint-disable-next-line*/}
+            <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);}}>
+              Try to select this text!
+            </Tooltip>
+          </CardBody>
+        </Card>
+        <Card>
+          <CardHeader>
+            <i className="fa fa-align-justify"></i><strong>Tooltip</strong>
+            <small> list</small>
+          </CardHeader>
+          <CardBody>
+            {this.state.tooltips.map((tooltip, i) => {
+              return <TooltipItem key={i} item={tooltip} id={i} />;
+            })}
+          </CardBody>
+        </Card>
+        <Card>
+          <CardHeader>
+            <i className="fa fa-align-justify"></i><strong>Tooltip</strong>
+            <small> uncontrolled</small>
+          </CardHeader>
+          <CardBody>
+            {/*eslint-disable-next-line*/}
+            <p>Somewhere in here is a <a href="#" id="UncontrolledTooltipExample">tooltip</a>.</p>
+            <UncontrolledTooltip placement="right" target="UncontrolledTooltipExample">
+              Hello world!
+            </UncontrolledTooltip>
+          </CardBody>
+        </Card>
+      </div>
+    );
+  }
+}
+
+export default Tooltips;

src/views/Base/Tooltips/Tooltips.test.js

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

src/views/Base/Tooltips/package.json

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

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/BrandButtons/BrandButtons.js

@@ -0,0 +1,324 @@
+import React, { Component } from 'react';
+import { Button, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
+
+class BrandButtons extends Component {
+  render() {
+    return (
+      <div className="animated fadeIn">
+        <Row>
+          <Col xs="12">
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i>
+                <strong>Brand Button</strong>
+                <small> Usage ex. </small>
+                <code>
+                  &lt;Button className="btn-facebook btn-brand"&gt;&lt;i className="fa fa-facebook"&gt;&lt;/i&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/Button&gt;
+                </code>
+              </CardHeader>
+              <CardBody>
+                <h6>Size Small
+                  <small> Add this class <code>.btn-sm</code></small>
+                </h6>
+                <p>
+                  <Button size="sm" className="btn-facebook btn-brand mr-1 mb-1"><i className="fa fa-facebook"></i><span>Facebook</span></Button>
+                  <Button size="sm" className="btn-twitter btn-brand mr-1 mb-1"><i className="fa fa-twitter"></i><span>Twitter</span></Button>
+                  <Button size="sm" className="btn-linkedin btn-brand mr-1 mb-1"><i className="fa fa-linkedin"></i><span>LinkedIn</span></Button>
+                  <Button size="sm" className="btn-flickr btn-brand mr-1 mb-1"><i className="fa fa-flickr"></i><span>Flickr</span></Button>
+                  <Button size="sm" className="btn-tumblr btn-brand mr-1 mb-1"><i className="fa fa-tumblr"></i><span>Tumblr</span></Button>
+                  <Button size="sm" className="btn-xing btn-brand mr-1 mb-1"><i className="fa fa-xing"></i><span>Xing</span></Button>
+                  <Button size="sm" className="btn-github btn-brand mr-1 mb-1"><i className="fa fa-github"></i><span>Github</span></Button>
+                  <Button size="sm" className="btn-html5 btn-brand mr-1 mb-1"><i className="fa fa-html5"></i><span>HTML5</span></Button>
+                  <Button size="sm" className="btn-openid btn-brand mr-1 mb-1"><i className="fa fa-openid"></i><span>OpenID</span></Button>
+                  <Button size="sm" className="btn-stack-overflow btn-brand mr-1 mb-1"><i className="fa fa-stack-overflow"></i><span>StackOverflow</span></Button>
+                  <Button size="sm" className="btn-css3 btn-brand mr-1 mb-1"><i className="fa fa-css3"></i><span>CSS3</span></Button>
+                  <Button size="sm" className="btn-youtube btn-brand mr-1 mb-1"><i className="fa fa-youtube"></i><span>YouTube</span></Button>
+                  <Button size="sm" className="btn-dribbble btn-brand mr-1 mb-1"><i className="fa fa-dribbble"></i><span>Dribbble</span></Button>
+                  <Button size="sm" className="btn-google-plus btn-brand mr-1 mb-1"><i className="fa fa-google-plus"></i><span>Google+</span></Button>
+                  <Button size="sm" className="btn-instagram btn-brand mr-1 mb-1"><i className="fa fa-instagram"></i><span>Instagram</span></Button>
+                  <Button size="sm" className="btn-pinterest btn-brand mr-1 mb-1"><i className="fa fa-pinterest"></i><span>Pinterest</span></Button>
+                  <Button size="sm" className="btn-vk btn-brand mr-1 mb-1"><i className="fa fa-vk"></i><span>VK</span></Button>
+                  <Button size="sm" className="btn-yahoo btn-brand mr-1 mb-1"><i className="fa fa-yahoo"></i><span>Yahoo</span></Button>
+                  <Button size="sm" className="btn-behance btn-brand mr-1 mb-1"><i className="fa fa-behance"></i><span>Behance</span></Button>
+                  <Button size="sm" className="btn-dropbox btn-brand mr-1 mb-1"><i className="fa fa-dropbox"></i><span>Dropbox</span></Button>
+                  <Button size="sm" className="btn-reddit btn-brand mr-1 mb-1"><i className="fa fa-reddit"></i><span>Reddit</span></Button>
+                  <Button size="sm" className="btn-spotify btn-brand mr-1 mb-1"><i className="fa fa-spotify"></i><span>Spotify</span></Button>
+                  <Button size="sm" className="btn-vine btn-brand mr-1 mb-1"><i className="fa fa-vine"></i><span>Vine</span></Button>
+                  <Button size="sm" className="btn-foursquare btn-brand mr-1 mb-1"><i className="fa fa-foursquare"></i><span>Forsquare</span></Button>
+                  <Button size="sm" className="btn-vimeo btn-brand mr-1 mb-1"><i className="fa fa-vimeo"></i><span>Vimeo</span></Button>
+                </p>
+                <h6>Size Normal</h6>
+                <p>
+                  <Button className="btn-facebook btn-brand mr-1 mb-1"><i className="fa fa-facebook"></i><span>Facebook</span></Button>
+                  <Button className="btn-twitter btn-brand mr-1 mb-1"><i className="fa fa-twitter"></i><span>Twitter</span></Button>
+                  <Button className="btn-linkedin btn-brand mr-1 mb-1"><i className="fa fa-linkedin"></i><span>LinkedIn</span></Button>
+                  <Button className="btn-flickr btn-brand mr-1 mb-1"><i className="fa fa-flickr"></i><span>Flickr</span></Button>
+                  <Button className="btn-tumblr btn-brand mr-1 mb-1"><i className="fa fa-tumblr"></i><span>Tumblr</span></Button>
+                  <Button className="btn-xing btn-brand mr-1 mb-1"><i className="fa fa-xing"></i><span>Xing</span></Button>
+                  <Button className="btn-github btn-brand mr-1 mb-1"><i className="fa fa-github"></i><span>Github</span></Button>
+                  <Button className="btn-html5 btn-brand mr-1 mb-1"><i className="fa fa-html5"></i><span>HTML5</span></Button>
+                  <Button className="btn-openid btn-brand mr-1 mb-1"><i className="fa fa-openid"></i><span>OpenID</span></Button>
+                  <Button className="btn-stack-overflow btn-brand mr-1 mb-1"><i className="fa fa-stack-overflow"></i><span>StackOverflow</span></Button>
+                  <Button className="btn-css3 btn-brand mr-1 mb-1"><i className="fa fa-css3"></i><span>CSS3</span></Button>
+                  <Button className="btn-youtube btn-brand mr-1 mb-1"><i className="fa fa-youtube"></i><span>YouTube</span></Button>
+                  <Button className="btn-dribbble btn-brand mr-1 mb-1"><i className="fa fa-dribbble"></i><span>Dribbble</span></Button>
+                  <Button className="btn-google-plus btn-brand mr-1 mb-1"><i className="fa fa-google-plus"></i><span>Google+</span></Button>
+                  <Button className="btn-instagram btn-brand mr-1 mb-1"><i className="fa fa-instagram"></i><span>Instagram</span></Button>
+                  <Button className="btn-pinterest btn-brand mr-1 mb-1"><i className="fa fa-pinterest"></i><span>Pinterest</span></Button>
+                  <Button className="btn-vk btn-brand mr-1 mb-1"><i className="fa fa-vk"></i><span>VK</span></Button>
+                  <Button className="btn-yahoo btn-brand mr-1 mb-1"><i className="fa fa-yahoo"></i><span>Yahoo</span></Button>
+                  <Button className="btn-behance btn-brand mr-1 mb-1"><i className="fa fa-behance"></i><span>Behance</span></Button>
+                  <Button className="btn-dropbox btn-brand mr-1 mb-1"><i className="fa fa-dropbox"></i><span>Dropbox</span></Button>
+                  <Button className="btn-reddit btn-brand mr-1 mb-1"><i className="fa fa-reddit"></i><span>Reddit</span></Button>
+                  <Button className="btn-spotify btn-brand mr-1 mb-1"><i className="fa fa-spotify"></i><span>Spotify</span></Button>
+                  <Button className="btn-vine btn-brand mr-1 mb-1"><i className="fa fa-vine"></i><span>Vine</span></Button>
+                  <Button className="btn-foursquare btn-brand mr-1 mb-1"><i className="fa fa-foursquare"></i><span>Forsquare</span></Button>
+                  <Button className="btn-vimeo btn-brand mr-1 mb-1"><i className="fa fa-vimeo"></i><span>Vimeo</span></Button>
+                </p>
+                <h6>Size Large
+                  <small> Add this class <code>.btn-lg</code></small>
+                </h6>
+                <p>
+                  <Button size="lg" className="btn-facebook btn-brand mr-1 mb-1"><i className="fa fa-facebook"></i><span>Facebook</span></Button>
+                  <Button size="lg" className="btn-twitter btn-brand mr-1 mb-1"><i className="fa fa-twitter"></i><span>Twitter</span></Button>
+                  <Button size="lg" className="btn-linkedin btn-brand mr-1 mb-1"><i className="fa fa-linkedin"></i><span>LinkedIn</span></Button>
+                  <Button size="lg" className="btn-flickr btn-brand mr-1 mb-1"><i className="fa fa-flickr"></i><span>Flickr</span></Button>
+                  <Button size="lg" className="btn-tumblr btn-brand mr-1 mb-1"><i className="fa fa-tumblr"></i><span>Tumblr</span></Button>
+                  <Button size="lg" className="btn-xing btn-brand mr-1 mb-1"><i className="fa fa-xing"></i><span>Xing</span></Button>
+                  <Button size="lg" className="btn-github btn-brand mr-1 mb-1"><i className="fa fa-github"></i><span>Github</span></Button>
+                  <Button size="lg" className="btn-html5 btn-brand mr-1 mb-1"><i className="fa fa-html5"></i><span>HTML5</span></Button>
+                  <Button size="lg" className="btn-openid btn-brand mr-1 mb-1"><i className="fa fa-openid"></i><span>OpenID</span></Button>
+                  <Button size="lg" className="btn-stack-overflow btn-brand mr-1 mb-1"><i className="fa fa-stack-overflow"></i><span>StackOverflow</span></Button>
+                  <Button size="lg" className="btn-css3 btn-brand mr-1 mb-1"><i className="fa fa-css3"></i><span>CSS3</span></Button>
+                  <Button size="lg" className="btn-youtube btn-brand mr-1 mb-1"><i className="fa fa-youtube"></i><span>YouTube</span></Button>
+                  <Button size="lg" className="btn-dribbble btn-brand mr-1 mb-1"><i className="fa fa-dribbble"></i><span>Dribbble</span></Button>
+                  <Button size="lg" className="btn-google-plus btn-brand mr-1 mb-1"><i className="fa fa-google-plus"></i><span>Google+</span></Button>
+                  <Button size="lg" className="btn-instagram btn-brand mr-1 mb-1"><i className="fa fa-instagram"></i><span>Instagram</span></Button>
+                  <Button size="lg" className="btn-pinterest btn-brand mr-1 mb-1"><i className="fa fa-pinterest"></i><span>Pinterest</span></Button>
+                  <Button size="lg" className="btn-vk btn-brand mr-1 mb-1"><i className="fa fa-vk"></i><span>VK</span></Button>
+                  <Button size="lg" className="btn-yahoo btn-brand mr-1 mb-1"><i className="fa fa-yahoo"></i><span>Yahoo</span></Button>
+                  <Button size="lg" className="btn-behance btn-brand mr-1 mb-1"><i className="fa fa-behance"></i><span>Behance</span></Button>
+                  <Button size="lg" className="btn-dropbox btn-brand mr-1 mb-1"><i className="fa fa-dropbox"></i><span>Dropbox</span></Button>
+                  <Button size="lg" className="btn-reddit btn-brand mr-1 mb-1"><i className="fa fa-reddit"></i><span>Reddit</span></Button>
+                  <Button size="lg" className="btn-spotify btn-brand mr-1 mb-1"><i className="fa fa-spotify"></i><span>Spotify</span></Button>
+                  <Button size="lg" className="btn-vine btn-brand mr-1 mb-1"><i className="fa fa-vine"></i><span>Vine</span></Button>
+                  <Button size="lg" className="btn-foursquare btn-brand mr-1 mb-1"><i className="fa fa-foursquare"></i><span>Forsquare</span></Button>
+                  <Button size="lg" className="btn-vimeo btn-brand mr-1 mb-1"><i className="fa fa-vimeo"></i><span>Vimeo</span></Button>
+                </p>
+              </CardBody>
+            </Card>
+          </Col>
+
+          <Col xs="12">
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i>
+                <strong>Brand Button</strong>
+                <small> Icons only. Usage ex. </small>
+                <code>
+                  &lt;Button className="btn-facebook btn-brand icon"&gt;&lt;i className="fa fa-facebook"&gt;&lt;/i&gt;&lt;/Button&gt;
+                </code>
+              </CardHeader>
+              <CardBody>
+                <h6>Size Small
+                  <small> Add this class <code>.btn-sm</code></small>
+                </h6>
+                <p>
+                  <Button size="sm" className="btn-facebook btn-brand icon mr-1 mb-1"><i className="fa fa-facebook"></i></Button>
+                  <Button size="sm" className="btn-twitter btn-brand icon mr-1 mb-1"><i className="fa fa-twitter"></i></Button>
+                  <Button size="sm" className="btn-linkedin btn-brand icon mr-1 mb-1"><i className="fa fa-linkedin"></i></Button>
+                  <Button size="sm" className="btn-flickr btn-brand icon mr-1 mb-1"><i className="fa fa-flickr"></i></Button>
+                  <Button size="sm" className="btn-tumblr btn-brand icon mr-1 mb-1"><i className="fa fa-tumblr"></i></Button>
+                  <Button size="sm" className="btn-xing btn-brand icon mr-1 mb-1"><i className="fa fa-xing"></i></Button>
+                  <Button size="sm" className="btn-github btn-brand icon mr-1 mb-1"><i className="fa fa-github"></i></Button>
+                  <Button size="sm" className="btn-html5 btn-brand icon mr-1 mb-1"><i className="fa fa-html5"></i></Button>
+                  <Button size="sm" className="btn-openid btn-brand icon mr-1 mb-1"><i className="fa fa-openid"></i></Button>
+                  <Button size="sm" className="btn-stack-overflow btn-brand icon mr-1 mb-1"><i className="fa fa-stack-overflow"></i></Button>
+                  <Button size="sm" className="btn-css3 btn-brand icon mr-1 mb-1"><i className="fa fa-css3"></i></Button>
+                  <Button size="sm" className="btn-youtube btn-brand icon mr-1 mb-1"><i className="fa fa-youtube"></i></Button>
+                  <Button size="sm" className="btn-dribbble btn-brand icon mr-1 mb-1"><i className="fa fa-dribbble"></i></Button>
+                  <Button size="sm" className="btn-google-plus btn-brand icon mr-1 mb-1"><i className="fa fa-google-plus"></i></Button>
+                  <Button size="sm" className="btn-instagram btn-brand icon mr-1 mb-1"><i className="fa fa-instagram"></i></Button>
+                  <Button size="sm" className="btn-pinterest btn-brand icon mr-1 mb-1"><i className="fa fa-pinterest"></i></Button>
+                  <Button size="sm" className="btn-vk btn-brand icon mr-1 mb-1"><i className="fa fa-vk"></i></Button>
+                  <Button size="sm" className="btn-yahoo btn-brand icon mr-1 mb-1"><i className="fa fa-yahoo"></i></Button>
+                  <Button size="sm" className="btn-behance btn-brand icon mr-1 mb-1"><i className="fa fa-behance"></i></Button>
+                  <Button size="sm" className="btn-dropbox btn-brand icon mr-1 mb-1"><i className="fa fa-dropbox"></i></Button>
+                  <Button size="sm" className="btn-reddit btn-brand icon mr-1 mb-1"><i className="fa fa-reddit"></i></Button>
+                  <Button size="sm" className="btn-spotify btn-brand icon mr-1 mb-1"><i className="fa fa-spotify"></i></Button>
+                  <Button size="sm" className="btn-vine btn-brand icon mr-1 mb-1"><i className="fa fa-vine"></i></Button>
+                  <Button size="sm" className="btn-foursquare btn-brand icon mr-1 mb-1"><i className="fa fa-foursquare"></i></Button>
+                  <Button size="sm" className="btn-vimeo btn-brand icon mr-1 mb-1"><i className="fa fa-vimeo"></i></Button>
+                </p>
+                <h6>Size Normal</h6>
+                <p>
+                  <Button className="btn-facebook btn-brand icon mr-1 mb-1"><i className="fa fa-facebook"></i></Button>
+                  <Button className="btn-twitter btn-brand icon mr-1 mb-1"><i className="fa fa-twitter"></i></Button>
+                  <Button className="btn-linkedin btn-brand icon mr-1 mb-1"><i className="fa fa-linkedin"></i></Button>
+                  <Button className="btn-flickr btn-brand icon mr-1 mb-1"><i className="fa fa-flickr"></i></Button>
+                  <Button className="btn-tumblr btn-brand icon mr-1 mb-1"><i className="fa fa-tumblr"></i></Button>
+                  <Button className="btn-xing btn-brand icon mr-1 mb-1"><i className="fa fa-xing"></i></Button>
+                  <Button className="btn-github btn-brand icon mr-1 mb-1"><i className="fa fa-github"></i></Button>
+                  <Button className="btn-html5 btn-brand icon mr-1 mb-1"><i className="fa fa-html5"></i></Button>
+                  <Button className="btn-openid btn-brand icon mr-1 mb-1"><i className="fa fa-openid"></i></Button>
+                  <Button className="btn-stack-overflow btn-brand icon mr-1 mb-1"><i className="fa fa-stack-overflow"></i></Button>
+                  <Button className="btn-css3 btn-brand icon mr-1 mb-1"><i className="fa fa-css3"></i></Button>
+                  <Button className="btn-youtube btn-brand icon mr-1 mb-1"><i className="fa fa-youtube"></i></Button>
+                  <Button className="btn-dribbble btn-brand icon mr-1 mb-1"><i className="fa fa-dribbble"></i></Button>
+                  <Button className="btn-google-plus btn-brand icon mr-1 mb-1"><i className="fa fa-google-plus"></i></Button>
+                  <Button className="btn-instagram btn-brand icon mr-1 mb-1"><i className="fa fa-instagram"></i></Button>
+                  <Button className="btn-pinterest btn-brand icon mr-1 mb-1"><i className="fa fa-pinterest"></i></Button>
+                  <Button className="btn-vk btn-brand icon mr-1 mb-1"><i className="fa fa-vk"></i></Button>
+                  <Button className="btn-yahoo btn-brand icon mr-1 mb-1"><i className="fa fa-yahoo"></i></Button>
+                  <Button className="btn-behance btn-brand icon mr-1 mb-1"><i className="fa fa-behance"></i></Button>
+                  <Button className="btn-dropbox btn-brand icon mr-1 mb-1"><i className="fa fa-dropbox"></i></Button>
+                  <Button className="btn-reddit btn-brand icon mr-1 mb-1"><i className="fa fa-reddit"></i></Button>
+                  <Button className="btn-spotify btn-brand icon mr-1 mb-1"><i className="fa fa-spotify"></i></Button>
+                  <Button className="btn-vine btn-brand icon mr-1 mb-1"><i className="fa fa-vine"></i></Button>
+                  <Button className="btn-foursquare btn-brand icon mr-1 mb-1"><i className="fa fa-foursquare"></i></Button>
+                  <Button className="btn-vimeo btn-brand icon mr-1 mb-1"><i className="fa fa-vimeo"></i></Button>
+                </p>
+                <h6>Size Large
+                  <small> Add this class <code>.btn-lg</code></small>
+                </h6>
+                <p>
+                  <Button size="lg" className="btn-facebook btn-brand icon mr-1 mb-1"><i className="fa fa-facebook"></i></Button>
+                  <Button size="lg" className="btn-twitter btn-brand icon mr-1 mb-1"><i className="fa fa-twitter"></i></Button>
+                  <Button size="lg" className="btn-linkedin btn-brand icon mr-1 mb-1"><i className="fa fa-linkedin"></i></Button>
+                  <Button size="lg" className="btn-flickr btn-brand icon mr-1 mb-1"><i className="fa fa-flickr"></i></Button>
+                  <Button size="lg" className="btn-tumblr btn-brand icon mr-1 mb-1"><i className="fa fa-tumblr"></i></Button>
+                  <Button size="lg" className="btn-xing btn-brand icon mr-1 mb-1"><i className="fa fa-xing"></i></Button>
+                  <Button size="lg" className="btn-github btn-brand icon mr-1 mb-1"><i className="fa fa-github"></i></Button>
+                  <Button size="lg" className="btn-html5 btn-brand icon mr-1 mb-1"><i className="fa fa-html5"></i></Button>
+                  <Button size="lg" className="btn-openid btn-brand icon mr-1 mb-1"><i className="fa fa-openid"></i></Button>
+                  <Button size="lg" className="btn-stack-overflow btn-brand icon mr-1 mb-1"><i className="fa fa-stack-overflow"></i></Button>
+                  <Button size="lg" className="btn-css3 btn-brand icon mr-1 mb-1"><i className="fa fa-css3"></i></Button>
+                  <Button size="lg" className="btn-youtube btn-brand icon mr-1 mb-1"><i className="fa fa-youtube"></i></Button>
+                  <Button size="lg" className="btn-dribbble btn-brand icon mr-1 mb-1"><i className="fa fa-dribbble"></i></Button>
+                  <Button size="lg" className="btn-google-plus btn-brand icon mr-1 mb-1"><i className="fa fa-google-plus"></i></Button>
+                  <Button size="lg" className="btn-instagram btn-brand icon mr-1 mb-1"><i className="fa fa-instagram"></i></Button>
+                  <Button size="lg" className="btn-pinterest btn-brand icon mr-1 mb-1"><i className="fa fa-pinterest"></i></Button>
+                  <Button size="lg" className="btn-vk btn-brand icon mr-1 mb-1"><i className="fa fa-vk"></i></Button>
+                  <Button size="lg" className="btn-yahoo btn-brand icon mr-1 mb-1"><i className="fa fa-yahoo"></i></Button>
+                  <Button size="lg" className="btn-behance btn-brand icon mr-1 mb-1"><i className="fa fa-behance"></i></Button>
+                  <Button size="lg" className="btn-dropbox btn-brand icon mr-1 mb-1"><i className="fa fa-dropbox"></i></Button>
+                  <Button size="lg" className="btn-reddit btn-brand icon mr-1 mb-1"><i className="fa fa-reddit"></i></Button>
+                  <Button size="lg" className="btn-spotify btn-brand icon mr-1 mb-1"><i className="fa fa-spotify"></i></Button>
+                  <Button size="lg" className="btn-vine btn-brand icon mr-1 mb-1"><i className="fa fa-vine"></i></Button>
+                  <Button size="lg" className="btn-foursquare btn-brand icon mr-1 mb-1"><i className="fa fa-foursquare"></i></Button>
+                  <Button size="lg" className="btn-vimeo btn-brand icon mr-1 mb-1"><i className="fa fa-vimeo"></i></Button>
+                </p>
+              </CardBody>
+            </Card>
+          </Col>
+
+          <Col xs="12">
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i>
+                <strong>Brand Button</strong>
+                <small> Text only. Usage ex. </small>
+                <code>
+                  &lt;Button className="btn-facebook btn-brand text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/Button&gt;
+                </code>
+              </CardHeader>
+              <CardBody>
+                <h6>Size Small
+                  <small> Add this class <code>.btn-sm</code></small>
+                </h6>
+                <p>
+                  <Button size="sm" className="btn-facebook btn-brand text mr-1 mb-1"><span>Facebook</span></Button>
+                  <Button size="sm" className="btn-twitter btn-brand text mr-1 mb-1"><span>Twitter</span></Button>
+                  <Button size="sm" className="btn-linkedin btn-brand text mr-1 mb-1"><span>LinkedIn</span></Button>
+                  <Button size="sm" className="btn-flickr btn-brand text mr-1 mb-1"><span>Flickr</span></Button>
+                  <Button size="sm" className="btn-tumblr btn-brand text mr-1 mb-1"><span>Tumblr</span></Button>
+                  <Button size="sm" className="btn-xing btn-brand text mr-1 mb-1"><span>Xing</span></Button>
+                  <Button size="sm" className="btn-github btn-brand text mr-1 mb-1"><span>Github</span></Button>
+                  <Button size="sm" className="btn-html5 btn-brand text mr-1 mb-1"><span>HTML5</span></Button>
+                  <Button size="sm" className="btn-openid btn-brand text mr-1 mb-1"><span>OpenID</span></Button>
+                  <Button size="sm" className="btn-stack-overflow btn-brand text mr-1 mb-1"><span>StackOverflow</span></Button>
+                  <Button size="sm" className="btn-css3 btn-brand text mr-1 mb-1"><span>CSS3</span></Button>
+                  <Button size="sm" className="btn-youtube btn-brand text mr-1 mb-1"><span>YouTube</span></Button>
+                  <Button size="sm" className="btn-dribbble btn-brand text mr-1 mb-1"><span>Dribbble</span></Button>
+                  <Button size="sm" className="btn-google-plus btn-brand text mr-1 mb-1"><span>Google+</span></Button>
+                  <Button size="sm" className="btn-instagram btn-brand text mr-1 mb-1"><span>Instagram</span></Button>
+                  <Button size="sm" className="btn-pinterest btn-brand text mr-1 mb-1"><span>Pinterest</span></Button>
+                  <Button size="sm" className="btn-vk btn-brand text mr-1 mb-1"><span>VK</span></Button>
+                  <Button size="sm" className="btn-yahoo btn-brand text mr-1 mb-1"><span>Yahoo</span></Button>
+                  <Button size="sm" className="btn-behance btn-brand text mr-1 mb-1"><span>Behance</span></Button>
+                  <Button size="sm" className="btn-dropbox btn-brand text mr-1 mb-1"><span>Dropbox</span></Button>
+                  <Button size="sm" className="btn-reddit btn-brand text mr-1 mb-1"><span>Reddit</span></Button>
+                  <Button size="sm" className="btn-spotify btn-brand text mr-1 mb-1"><span>Spotify</span></Button>
+                  <Button size="sm" className="btn-vine btn-brand text mr-1 mb-1"><span>Vine</span></Button>
+                  <Button size="sm" className="btn-foursquare btn-brand text mr-1 mb-1"><span>Forsquare</span></Button>
+                  <Button size="sm" className="btn-vimeo btn-brand text mr-1 mb-1"><span>Vimeo</span></Button>
+                </p>
+                <h6>Size Normal</h6>
+                <p>
+                  <Button className="btn-facebook btn-brand text mr-1 mb-1"><span>Facebook</span></Button>
+                  <Button className="btn-twitter btn-brand text mr-1 mb-1"><span>Twitter</span></Button>
+                  <Button className="btn-linkedin btn-brand text mr-1 mb-1"><span>LinkedIn</span></Button>
+                  <Button className="btn-flickr btn-brand text mr-1 mb-1"><span>Flickr</span></Button>
+                  <Button className="btn-tumblr btn-brand text mr-1 mb-1"><span>Tumblr</span></Button>
+                  <Button className="btn-xing btn-brand text mr-1 mb-1"><span>Xing</span></Button>
+                  <Button className="btn-github btn-brand text mr-1 mb-1"><span>Github</span></Button>
+                  <Button className="btn-html5 btn-brand text mr-1 mb-1"><span>HTML5</span></Button>
+                  <Button className="btn-openid btn-brand text mr-1 mb-1"><span>OpenID</span></Button>
+                  <Button className="btn-stack-overflow btn-brand text mr-1 mb-1"><span>StackOverflow</span></Button>
+                  <Button className="btn-css3 btn-brand text mr-1 mb-1"><span>CSS3</span></Button>
+                  <Button className="btn-youtube btn-brand text mr-1 mb-1"><span>YouTube</span></Button>
+                  <Button className="btn-dribbble btn-brand text mr-1 mb-1"><span>Dribbble</span></Button>
+                  <Button className="btn-google-plus btn-brand text mr-1 mb-1"><span>Google+</span></Button>
+                  <Button className="btn-instagram btn-brand text mr-1 mb-1"><span>Instagram</span></Button>
+                  <Button className="btn-pinterest btn-brand text mr-1 mb-1"><span>Pinterest</span></Button>
+                  <Button className="btn-vk btn-brand text mr-1 mb-1"><span>VK</span></Button>
+                  <Button className="btn-yahoo btn-brand text mr-1 mb-1"><span>Yahoo</span></Button>
+                  <Button className="btn-behance btn-brand text mr-1 mb-1"><span>Behance</span></Button>
+                  <Button className="btn-dropbox btn-brand text mr-1 mb-1"><span>Dropbox</span></Button>
+                  <Button className="btn-reddit btn-brand text mr-1 mb-1"><span>Reddit</span></Button>
+                  <Button className="btn-spotify btn-brand text mr-1 mb-1"><span>Spotify</span></Button>
+                  <Button className="btn-vine btn-brand text mr-1 mb-1"><span>Vine</span></Button>
+                  <Button className="btn-foursquare btn-brand text mr-1 mb-1"><span>Forsquare</span></Button>
+                  <Button className="btn-vimeo btn-brand text mr-1 mb-1"><span>Vimeo</span></Button>
+                </p>
+                <h6>Size Large
+                  <small> Add this class <code>.btn-lg</code></small>
+                </h6>
+                <p>
+                  <Button size="lg" className="btn-facebook btn-brand text mr-1 mb-1"><span>Facebook</span></Button>
+                  <Button size="lg" className="btn-twitter btn-brand text mr-1 mb-1"><span>Twitter</span></Button>
+                  <Button size="lg" className="btn-linkedin btn-brand text mr-1 mb-1"><span>LinkedIn</span></Button>
+                  <Button size="lg" className="btn-flickr btn-brand text mr-1 mb-1"><span>Flickr</span></Button>
+                  <Button size="lg" className="btn-tumblr btn-brand text mr-1 mb-1"><span>Tumblr</span></Button>
+                  <Button size="lg" className="btn-xing btn-brand text mr-1 mb-1"><span>Xing</span></Button>
+                  <Button size="lg" className="btn-github btn-brand text mr-1 mb-1"><span>Github</span></Button>
+                  <Button size="lg" className="btn-html5 btn-brand text mr-1 mb-1"><span>HTML5</span></Button>
+                  <Button size="lg" className="btn-openid btn-brand text mr-1 mb-1"><span>OpenID</span></Button>
+                  <Button size="lg" className="btn-stack-overflow btn-brand text mr-1 mb-1"><span>StackOverflow</span></Button>
+                  <Button size="lg" className="btn-css3 btn-brand text mr-1 mb-1"><span>CSS3</span></Button>
+                  <Button size="lg" className="btn-youtube btn-brand text mr-1 mb-1"><span>YouTube</span></Button>
+                  <Button size="lg" className="btn-dribbble btn-brand text mr-1 mb-1"><span>Dribbble</span></Button>
+                  <Button size="lg" className="btn-google-plus btn-brand text mr-1 mb-1"><span>Google+</span></Button>
+                  <Button size="lg" className="btn-instagram btn-brand text mr-1 mb-1"><span>Instagram</span></Button>
+                  <Button size="lg" className="btn-pinterest btn-brand text mr-1 mb-1"><span>Pinterest</span></Button>
+                  <Button size="lg" className="btn-vk btn-brand text mr-1 mb-1"><span>VK</span></Button>
+                  <Button size="lg" className="btn-yahoo btn-brand text mr-1 mb-1"><span>Yahoo</span></Button>
+                  <Button size="lg" className="btn-behance btn-brand text mr-1 mb-1"><span>Behance</span></Button>
+                  <Button size="lg" className="btn-dropbox btn-brand text mr-1 mb-1"><span>Dropbox</span></Button>
+                  <Button size="lg" className="btn-reddit btn-brand text mr-1 mb-1"><span>Reddit</span></Button>
+                  <Button size="lg" className="btn-spotify btn-brand text mr-1 mb-1"><span>Spotify</span></Button>
+                  <Button size="lg" className="btn-vine btn-brand text mr-1 mb-1"><span>Vine</span></Button>
+                  <Button size="lg" className="btn-foursquare btn-brand text mr-1 mb-1"><span>Forsquare</span></Button>
+                  <Button size="lg" className="btn-vimeo btn-brand text mr-1 mb-1"><span>Vimeo</span></Button>
+                </p>
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+      </div>
+
+    );
+  }
+}
+
+export default BrandButtons;