React v16, Reactstrap v5

Author: xidedix

CHANGELOG.md

@@ -1,24 +1,44 @@
-## Changelog [react](./REACT.md) version
+## [react](./REACT.md) version `changelog`
 
-##### 2017.08.24
+###### `v1.0.1`
+- moved to react: `^16.0.0`
+- moved to reactstrap: `^5.0.0-alpha.3`
+- moved to react-text-mask-hoc: `^0.10.4`
+- moved from deprecated CardBlock to `CardBody` reactstrap component
+- moved to `NavDropdown` in `Header` component
+- fix for app-header navbar-nav dropdown-menu-right
+- fix typo in Tables component PaginationItem
+
+###### `v1.0.0`
+- Sidebar component:
+	- item with optional class (_nav.js)
+	- nav link with optional variant (_nav.js)
+	- external urls allowed (_nav.js)
+	- optional SidebarFooter, SidebarHeader, SidebarForm components
+- SidebarMinimizer component
+- .brand-minimized
+- .sidebar-minimized,
+- Header component - sidebarMinimize
+- react-transition-group downgrade to v1 : (modals and alerts reactstrap:v4.8 issue)
+
+###### `2017.08.24`
 - webpack.config env.prod
 - Dashboard .dropdown-menu-right temp.scss hotfix (full)
 - callout.scss .chart-wrapper hotfix (full)
 
-##### 2017.08.11
+###### `2017.08.11`
 - Bootstrap 4 beta
 - Dashboard component (full):
 	- line chart for social box
 	- sparkline chart for callout
 
-##### 2017.08.01
+###### `2017.08.01`
 - Sidebar component: 
 	- title item with optional wrapper and class (_nav.js)
 	- nav link item with optional badge
 	- code refactoring
 
-##### 2017.07.31
+###### `2017.07.31`
 - moved to [reactstrap](https://reactstrap.github.io/)
 - moved to [webpack](https://webpack.js.org/) (dropping gulp)
 - data driven Sidebar component (_nav.js)
-

React_Full_Project/.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 node_modules
+package-lock.json
 
 # testing
 coverage

React_Full_Project/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "author": "Łukasz Holeczek <[email protected]>",
   "url": "http://coreui.io",
@@ -14,35 +14,35 @@
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
-    "copy-webpack-plugin": "^4.0.1",
-    "css-hot-loader": "^1.3.1",
+    "copy-webpack-plugin": "^4.1.1",
+    "css-hot-loader": "^1.3.2",
     "css-loader": "^0.28.7",
-    "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "^0.11.2",
+    "extract-text-webpack-plugin": "^3.0.1",
+    "file-loader": "^1.1.5",
     "html-loader": "^0.5.1",
     "html-webpack-plugin": "^2.30.1",
     "node-sass": "^4.5.3",
     "rimraf": "^2.6.2",
     "sass-loader": "^6.0.6",
     "source-list-map": "^2.0.0",
-    "style-loader": "^0.18.2",
-    "uglify-js": "^3.1.1",
-    "url-loader": "^0.5.9",
+    "style-loader": "^0.19.0",
+    "uglify-js": "^3.1.3",
+    "url-loader": "^0.6.2",
     "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.8.2"
+    "webpack-dev-server": "^2.9.1"
   },
   "dependencies": {
     "bootstrap": "^4.0.0-beta",
     "chart.js": "2.7.0",
     "font-awesome": "^4.7.0",
     "history": "4.7.2",
     "is-url-external": "^1.0.3",
-    "react": "^15.6.1",
-    "react-chartjs-2": "2.6.2",
-    "react-dom": "^15.6.1",
-    "react-router-dom": "4.2.2",
-    "react-transition-group": "^1.2.0",
-    "reactstrap": "^4.8.0",
+    "react": "^16.0.0",
+    "react-chartjs-2": "2.6.4",
+    "react-dom": "^16.0.0",
+    "react-router-dom": "^4.2.2",
+    "react-transition-group": "^2.2.1",
+    "reactstrap": "^5.0.0-alpha.3",
     "simple-line-icons": "^2.4.1"
   },
   "scripts": {

React_Full_Project/REACT.md

@@ -1,7 +1,8 @@
 // Temp fix for reactstrap
-.show {
-  > .dropdown-menu-right {
-    right: 0;
-    left: auto; // Reset the default from `.dropdown-menu`
+.app-header {
+  .navbar-nav {
+    .dropdown-menu-right {
+      right: auto;
+    }
   }
-}
+}

React_Full_Project/package.json

@@ -1,8 +1,9 @@
 .app-footer {
-  min-height: $footer-height;
+  display: flex;
   padding: 0 $spacer;
-  line-height: $footer-height;
   color: $footer-color;
   background: $footer-bg;
+  flex-wrap: wrap;
+  align-items: center;
   @include borders($footer-borders);
 }

React_Full_Project/scss/core/_dropdown-menu-right.scss

@@ -11,8 +11,8 @@
 app-dashboard,
 app-root {
   display: flex;
-  flex-direction: column;
   min-height: 100vh;
+  flex-direction: column;
 }
 
 .app-header {
@@ -26,12 +26,12 @@ app-root {
 .app-body {
   display: flex;
   flex-direction: row;
-  flex-grow: 1;
   overflow-x: hidden;
+  flex-grow: 1;
 
   .main {
-    flex: 1;
     min-width: 0;
+    flex: 1;
   }
 
   .sidebar {
@@ -328,7 +328,8 @@ app-root {
     margin-top: $navbar-height;
   }
 
-  .sidebar {
+  .sidebar,
+  .sidebar-fixed .sidebar {
     position: fixed;
     z-index: $zindex-sticky - 1;
     width: $mobile-sidebar-width;

React_Full_Project/scss/core/_footer.scss

@@ -1,7 +1,7 @@
 .app-header.navbar {
   position: relative;
-  flex-direction: row;
   height: $navbar-height;
+  flex-direction: row;
   padding: 0;
   margin: 0;
   background-color: $navbar-bg;
@@ -102,13 +102,16 @@
   background-color: rgba(0,0,0,.075);
 }
 
-.brand-minimized {
-  .app-header.navbar {
-    .navbar-brand {
-      width: $navbar-brand-minimized-width;
-      background-color: $navbar-brand-minimized-bg;
-      background-image: $navbar-brand-minimized-logo;
-      background-size: $navbar-brand-minimized-logo-size;
+@include media-breakpoint-up(lg) {
+  .brand-minimized {
+    .app-header.navbar {
+      .navbar-brand {
+        width: $navbar-brand-minimized-width;
+        background-color: $navbar-brand-minimized-bg;
+        background-image: $navbar-brand-minimized-logo;
+        background-size: $navbar-brand-minimized-logo-size;
+        @include borders($navbar-brand-minimized-border);
+      }
     }
   }
 }

React_Full_Project/scss/core/_layout.scss

@@ -78,8 +78,8 @@
 
   .nav {
     @include sidebar-width($sidebar-borders, $sidebar-width);
-    flex-direction: column;
     min-height: 100%;
+    flex-direction: column;
   }
 
   .nav-title {
@@ -254,13 +254,15 @@
     flex: 0 0 $sidebar-footer-height;
     padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
     background: $sidebar-footer-bg;
+    @include borders($sidebar-footer-borders);
   }
 
   .sidebar-minimizer {
     position: relative;
     flex: 0 0 $sidebar-minimizer-height;
     background-color: $sidebar-minimizer-bg;
     border: 0;
+    @include borders($sidebar-minimizer-borders);
 
     &::before {
       position: absolute;