refactor: IE polyfills and import utilities from @coreui/coreui

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-react-admin-template",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.3",
   "description": "CoreUI React Open Source Bootstrap 4 Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "https://coreui.io",
@@ -27,6 +27,7 @@
     "react-router-config": "^1.0.0-beta.4",
     "react-router-dom": "^4.2.2",
     "reactstrap": "^5.0.0",
+    "reflect.ownkeys": "^0.2.0",
     "simple-line-icons": "^2.4.1"
   },
   "devDependencies": {

src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
+import './polyfill'
 
 ReactDOM.render(<App />, document.getElementById('root'));
 registerServiceWorker();

src/polyfill.js

@@ -0,0 +1,42 @@
+// IE11 polyfills
+
+import ownKeys from 'reflect.ownkeys'
+
+const reduce = Function.bind.call(Function.call, Array.prototype.reduce);
+const isEnumerable = Function.bind.call(Function.call, Object.prototype.propertyIsEnumerable);
+const concat = Function.bind.call(Function.call, Array.prototype.concat);
+
+if (!Object.values) {
+  Object.values = function values(O) {
+    return reduce(ownKeys(O), (v, k) => concat(v, typeof k === 'string' && isEnumerable(O, k) ? [O[k]] : []), []);
+  };
+}
+
+if (!Object.entries) {
+  Object.entries = function entries(O) {
+    return reduce(ownKeys(O), (e, k) => concat(e, typeof k === 'string' && isEnumerable(O, k) ? [[k, O[k]]] : []), []);
+  };
+}
+
+if (!Array.prototype.find) {
+  Array.prototype.find = function(predicate) {
+    if (this == null) {
+      throw new TypeError('Array.prototype.find called on null or undefined');
+    }
+    if (typeof predicate !== 'function') {
+      throw new TypeError('predicate must be a function');
+    }
+    const list = Object(this);
+    const length = list.length >>> 0;
+    const thisArg = arguments[1];
+    let value;
+
+    for (let i = 0; i < length; i++) {
+      value = list[i];
+      if (predicate.call(thisArg, value, i, list)) {
+        return value;
+      }
+    }
+    return undefined;
+  };
+}

src/scss/style.css

@@ -6588,21 +6588,26 @@ a.text-dark:hover, a.text-dark:focus {
     margin: -0.375rem -0.75rem;
     line-height: 2.0625rem;
     text-align: center;
-    background-color: rgba(0, 0, 0, 0.2); }
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 0.25rem; }
   .btn-brand i + span {
     margin-left: 1.5rem; }
   .btn-brand.btn-lg i, .btn-group-lg > .btn-brand.btn i {
     width: 2.64063rem;
     margin: -0.5rem -1rem;
-    line-height: 2.64063rem; }
+    line-height: 2.64063rem;
+    border-radius: 0.3rem; }
   .btn-brand.btn-lg i + span, .btn-group-lg > .btn-brand.btn i + span {
     margin-left: 2rem; }
   .btn-brand.btn-sm i, .btn-group-sm > .btn-brand.btn i {
     width: 1.64844rem;
     margin: -0.25rem -0.5rem;
-    line-height: 1.64844rem; }
+    line-height: 1.64844rem;
+    border-radius: 0.2rem; }
   .btn-brand.btn-sm i + span, .btn-group-sm > .btn-brand.btn i + span {
     margin-left: 1rem; }
+  .btn-brand.btn-square i {
+    border-radius: 0; }
 
 .btn-facebook {
   color: #fff;
@@ -7724,6 +7729,92 @@ canvas {
 .main .container-fluid {
   padding: 0 30px; }
 
+.app-header {
+  position: relative;
+  flex-direction: row;
+  height: 55px;
+  padding: 0;
+  margin: 0;
+  background-color: #fff;
+  border-bottom: 1px solid #c8ced3; }
+  .app-header .navbar-brand {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 155px;
+    height: 55px;
+    padding: 0;
+    margin-right: 0;
+    background-color: transparent; }
+    .app-header .navbar-brand .navbar-brand-minimized {
+      display: none; }
+  .app-header .navbar-toggler {
+    min-width: 50px;
+    padding: 0.25rem 0; }
+    .app-header .navbar-toggler:hover .navbar-toggler-icon {
+      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%232f353a' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
+  .app-header .navbar-toggler-icon {
+    height: 23px;
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%2373818f' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
+  .app-header .navbar-nav {
+    flex-direction: row;
+    align-items: center; }
+  .app-header .nav-item {
+    position: relative;
+    min-width: 50px;
+    margin: 0;
+    text-align: center; }
+    .app-header .nav-item button {
+      margin: 0 auto; }
+    .app-header .nav-item .nav-link {
+      padding-top: 0;
+      padding-bottom: 0;
+      background: 0;
+      border: 0; }
+      .app-header .nav-item .nav-link .badge {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-top: -16px;
+        margin-left: 0; }
+      .app-header .nav-item .nav-link > .img-avatar, .app-header .nav-item .avatar.nav-link > img {
+        height: 35px;
+        margin: 0 10px; }
+  .app-header .dropdown-menu {
+    padding-bottom: 0;
+    line-height: 1.5; }
+  .app-header .dropdown-item {
+    min-width: 180px; }
+
+.navbar-nav .nav-link {
+  color: #73818f; }
+  .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
+    color: #2f353a; }
+
+.navbar-nav .open > .nav-link, .navbar-nav .open > .nav-link:hover, .navbar-nav .open > .nav-link:focus,
+.navbar-nav .active > .nav-link,
+.navbar-nav .active > .nav-link:hover,
+.navbar-nav .active > .nav-link:focus,
+.navbar-nav .nav-link.open,
+.navbar-nav .nav-link.open:hover,
+.navbar-nav .nav-link.open:focus,
+.navbar-nav .nav-link.active,
+.navbar-nav .nav-link.active:hover,
+.navbar-nav .nav-link.active:focus {
+  color: #2f353a; }
+
+.navbar-divider {
+  background-color: rgba(0, 0, 0, 0.075); }
+
+@media (min-width: 992px) {
+  .brand-minimized .app-header .navbar-brand {
+    width: 50px;
+    background-color: transparent; }
+    .brand-minimized .app-header .navbar-brand .navbar-brand-full {
+      display: none; }
+    .brand-minimized .app-header .navbar-brand .navbar-brand-minimized {
+      display: block; } }
+
 .input-group-prepend,
 .input-group-append {
   white-space: nowrap;
@@ -7871,92 +7962,6 @@ canvas {
 *[dir="rtl"] .nav {
   padding-right: 0; }
 
-.app-header {
-  position: relative;
-  flex-direction: row;
-  height: 55px;
-  padding: 0;
-  margin: 0;
-  background-color: #fff;
-  border-bottom: 1px solid #c8ced3; }
-  .app-header .navbar-brand {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 155px;
-    height: 55px;
-    padding: 0;
-    margin-right: 0;
-    background-color: transparent; }
-    .app-header .navbar-brand .navbar-brand-minimized {
-      display: none; }
-  .app-header .navbar-toggler {
-    min-width: 50px;
-    padding: 0.25rem 0; }
-    .app-header .navbar-toggler:hover .navbar-toggler-icon {
-      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%232f353a' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
-  .app-header .navbar-toggler-icon {
-    height: 23px;
-    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%2373818f' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
-  .app-header .navbar-nav {
-    flex-direction: row;
-    align-items: center; }
-  .app-header .nav-item {
-    position: relative;
-    min-width: 50px;
-    margin: 0;
-    text-align: center; }
-    .app-header .nav-item button {
-      margin: 0 auto; }
-    .app-header .nav-item .nav-link {
-      padding-top: 0;
-      padding-bottom: 0;
-      background: 0;
-      border: 0; }
-      .app-header .nav-item .nav-link .badge {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        margin-top: -16px;
-        margin-left: 0; }
-      .app-header .nav-item .nav-link > .img-avatar, .app-header .nav-item .avatar.nav-link > img {
-        height: 35px;
-        margin: 0 10px; }
-  .app-header .dropdown-menu {
-    padding-bottom: 0;
-    line-height: 1.5; }
-  .app-header .dropdown-item {
-    min-width: 180px; }
-
-.navbar-nav .nav-link {
-  color: #73818f; }
-  .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
-    color: #2f353a; }
-
-.navbar-nav .open > .nav-link, .navbar-nav .open > .nav-link:hover, .navbar-nav .open > .nav-link:focus,
-.navbar-nav .active > .nav-link,
-.navbar-nav .active > .nav-link:hover,
-.navbar-nav .active > .nav-link:focus,
-.navbar-nav .nav-link.open,
-.navbar-nav .nav-link.open:hover,
-.navbar-nav .nav-link.open:focus,
-.navbar-nav .nav-link.active,
-.navbar-nav .nav-link.active:hover,
-.navbar-nav .nav-link.active:focus {
-  color: #2f353a; }
-
-.navbar-divider {
-  background-color: rgba(0, 0, 0, 0.075); }
-
-@media (min-width: 992px) {
-  .brand-minimized .app-header .navbar-brand {
-    width: 50px;
-    background-color: transparent; }
-    .brand-minimized .app-header .navbar-brand .navbar-brand-full {
-      display: none; }
-    .brand-minimized .app-header .navbar-brand .navbar-brand-minimized {
-      display: block; } }
-
 .progress-xs {
   height: 4px; }
 
@@ -9874,5 +9879,43 @@ body {
       right: auto;
       left: 10px; }
 
+.ie-custom-properties {
+  blue: #20a8d8;
+  indigo: #6610f2;
+  purple: #6f42c1;
+  pink: #e83e8c;
+  red: #f86c6b;
+  orange: #f8cb00;
+  yellow: #ffc107;
+  green: #4dbd74;
+  teal: #20c997;
+  cyan: #17a2b8;
+  white: #fff;
+  gray: #73818f;
+  gray-dark: #2f353a;
+  light-blue: #63c2de;
+  gray-100: #f0f3f5;
+  gray-200: #e4e7ea;
+  gray-300: #c8ced3;
+  gray-400: #acb4bc;
+  gray-500: #8f9ba6;
+  gray-600: #73818f;
+  gray-700: #5c6873;
+  gray-800: #2f353a;
+  gray-900: #23282c;
+  primary: #20a8d8;
+  secondary: #c8ced3;
+  success: #4dbd74;
+  info: #63c2de;
+  warning: #ffc107;
+  danger: #f86c6b;
+  light: #f0f3f5;
+  dark: #2f353a;
+  breakpoint-xs: 0;
+  breakpoint-sm: 576px;
+  breakpoint-md: 768px;
+  breakpoint-lg: 992px;
+  breakpoint-xl: 1200px; }
+
 .app-header .navbar-nav .dropdown-menu-right {
   right: auto; }

src/views/Dashboard/Dashboard.js

@@ -22,12 +22,13 @@ import {
 } from 'reactstrap';
 import Widget03 from '../../views/Widgets/Widget03'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips';
+import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/utilities'
 
-const brandPrimary = '#20a8d8';
+const brandPrimary = getStyle('--primary')
-const brandSuccess = '#4dbd74';
+const brandSuccess = getStyle('--success')
-const brandInfo = '#63c2de';
+const brandInfo = getStyle('--info')
-const brandWarning = '#f8cb00';
+const brandWarning = getStyle('--warning')
-const brandDanger = '#f86c6b';
+const brandDanger = getStyle('--danger')
 
 // Card Chart 1
 const cardChartData1 = {
@@ -359,17 +360,6 @@ const sparklineChartOpts = {
 
 // Main Chart
 
-// convert Hex to RGBA
-function convertHex(hex, opacity) {
-  hex = hex.replace('#', '');
-  const r = parseInt(hex.substring(0, 2), 16);
-  var g = parseInt(hex.substring(2, 4), 16);
-  var b = parseInt(hex.substring(4, 6), 16);
-
-  var result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')';
-  return result;
-}
-
 //Random Numbers
 function random(min, max) {
   return Math.floor(Math.random() * (max - min + 1) + min);
@@ -391,7 +381,7 @@ const mainChart = {
   datasets: [
     {
       label: 'My First dataset',
-      backgroundColor: convertHex(brandInfo, 10),
+      backgroundColor: hexToRgba(brandInfo, 10),
       borderColor: brandInfo,
       pointHoverBackgroundColor: '#fff',
       borderWidth: 2,

src/views/Theme/Colors/Colors.js

@@ -2,19 +2,7 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import { Row, Col } from 'reactstrap'
-// import { rgbToHex } from '@coreui/coreui/js/src/utilities/'
+import { rgbToHex } from '@coreui/coreui/dist/js/utilities'
-
-const rgbToHex = (color) => {
-  const rgb = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i)
-  if (rgb) {
-    const r = `0${parseInt(rgb[1], 10).toString(16)}`
-    const g = `0${parseInt(rgb[2], 10).toString(16)}`
-    const b = `0${parseInt(rgb[3], 10).toString(16)}`
-
-    return rgb ? `#${r.slice(-2)}${g.slice(-2)}${b.slice(-2)}` : ''
-  }
-  return ''
-}
 
 class ThemeView extends Component {
   constructor(props) {