Merge pull request #122 from coreui/dev-vnext

v2.0.13

CHANGELOG.md

@@ -1,5 +1,17 @@
 ## [CoreUI](https://coreui.io/) for [react](./REACT.md) changelog
 
+##### `v2.0.13` 
+- refactor: migration to [Create React App 2.0](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html) cleanup 
+  - cleanup `package.json` scripts
+  - remove `babel-jest` dependency
+  - remove `node-sass-chokidar` dependency
+  - remove `npm-run-all` dependency
+  - move `App.js` import styles to `App.scss` 
+  - replace imports from `node_modules/` with `~` prefix
+- chore: remove unused `src/scss/vendors/charts.js/` directory
+- chore: update `@coreui/coreui` to `^2.0.15`
+- chore: update `@coreui/react` to `^2.0.9`
+
 ##### `v2.0.12` 
 fixes some issues with `rtl`, `ie11`, `sidebar-minimized` behaviour and `aside` responsiveness
 - fix(DefaultAside): `ListGroup` with `tag="div"` works better with `rtl` 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-react-admin-template",
-  "version": "2.0.12",
+  "version": "2.0.13",
   "description": "CoreUI React Open Source Bootstrap 4 Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "https://coreui.io",
@@ -12,10 +12,10 @@
     "url": "git@github.com:coreui/coreui-free-react-admin-template.git"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.0.14",
+    "@coreui/coreui": "^2.0.15",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
     "@coreui/icons": "0.3.0",
-    "@coreui/react": "^2.0.8",
+    "@coreui/react": "^2.0.9",
     "bootstrap": "^4.1.3",
     "chart.js": "^2.7.2",
     "classnames": "^2.2.6",
@@ -38,18 +38,11 @@
     "simple-line-icons": "^2.4.1"
   },
   "devDependencies": {
-    "babel-jest": "^23.6.0",
-    "node-sass-chokidar": "^1.3.3",
-    "npm-run-all": "^4.1.3",
     "react-scripts": "^2.0.4"
   },
   "scripts": {
-    "build-css": "node-sass-chokidar --include-path ./node_modules ./src/scss -o ./src/scss",
+    "start": "react-scripts start",
-    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./node_modules ./src/scss -o ./src/scss --watch --recursive",
+    "build": "react-scripts build",
-    "start-js": "react-scripts start",
-    "start": "npm-run-all -p watch-css start-js",
-    "build-js": "react-scripts build",
-    "build": "npm-run-all build-css build-js",
     "test": "react-scripts test",
     "test:debug": "react-scripts --inspect-brk test --runInBand",
     "eject": "react-scripts eject"

src/App.css

@@ -1 +0,0 @@
-

src/App.js

@@ -1,17 +1,6 @@
 import React, { Component } from 'react';
 import { HashRouter, Route, Switch } from 'react-router-dom';
-import './App.css';
+import './App.scss';
-// Styles
-// CoreUI Icons Set
-import '@coreui/icons/css/coreui-icons.min.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.css'
 
 // Containers
 import { DefaultLayout } from './containers';

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/scss/style.scss

@@ -2,9 +2,10 @@
 @import "variables";
 
 // Import styles
-@import "@coreui/coreui/scss/coreui.scss";
+@import "~@coreui/coreui/scss/coreui.scss";
+
 // Temp fix for reactstrap
-@import '@coreui/coreui/scss/_dropdown-menu-right.scss';
+@import '~@coreui/coreui/scss/_dropdown-menu-right.scss';
 
 // If you want to add something do it here
 @import "custom";

src/scss/vendors/_variables.scss

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

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

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

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

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