Merge pull request #12 from creativetimofficial/dev-master

Feature: update dependencies

CHANGELOG.md

@@ -1,5 +1,48 @@
 # Change Log
 
+## [1.1.0] 2020-05-08
+### Bug fixing
+- `https://github.com/creativetimofficial/nextjs-material-kit/issues/10` (changed the `title`, from simple `string` to `node`, so now, you can pass a title like so `title={<Link href="/"><a>Free Chat</a></Link>}` if you want to have link functionality - NOTE: the `node` that you pass to the `InfoArea` component will have to be styled)
+- `https://github.com/creativetimofficial/nextjs-material-kit/issues/6` (check `https://github.com/creativetimofficial/nextjs-material-kit/pull/7` for more info)
+- `https://github.com/creativetimofficial/nextjs-material-kit/issues/5`
+- `https://github.com/creativetimofficial/nextjs-material-kit/issues/4`
+- `https://github.com/creativetimofficial/nextjs-material-kit/issues/2`
+### Major style changes
+- `assets/jss/nextjs-material-kit.js`
+- `assets/jss/nextjs-material-kit/components/buttonStyle.js`
+- `assets/jss/nextjs-material-kit/components/headerStyle.js`
+- `assets/jss/nextjs-material-kit/components/navPillsStyle.js`
+- `assets/jss/nextjs-material-kit/components/paginationStyle.js`
+- `assets/jss/nextjs-material-kit/components/paginationStyle.js`
+### Deleted components
+### Added components
+### Deleted dependencies
+### Added dependencies
+### Updated dependencies
+```
+@material-ui/core        4.3.2   →    4.9.13
+@material-ui/icons       4.2.1   →     4.9.1
+moment                  2.24.0   →    2.25.3
+next                     9.0.5   →     9.3.6
+next-images              1.1.2   →     1.3.1
+nextjs-redirect          1.0.2   →     2.0.2
+node-sass               4.12.0   →    4.14.1
+nouislider              14.0.2   →    14.4.0
+react                   16.9.0   →   16.13.1
+react-dom               16.9.0   →   16.13.1
+react-swipeable-views   0.13.3   →    0.13.9
+styled-components        4.3.2   →     5.1.0
+webpack                 4.39.3   →    4.43.0
+```
+### Warning
+_The following warnings come from some of our dependencies, however they do not affect the UI or the functionality of the product - if the issues will persist and will change into errors in the next version of React (v17), we will drop their usage and replace with other dependencies:_
+```
+npm WARN deprecated [email protected]: Popper changed home, find its new releases at @popperjs/core
+npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
+npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
+```
+_The following dependencies raise warnings (of deprecation or renamed) in development mode: DateTime, ReactSwipableView. If the warnings will persist, and will become errors in React 17, we will drop their usage and replace them with other plugins._
+
 ## [1.0.0] 2019-09-13
 ### Original Release
 - Started project with NextJS

Documentation/assets/css/material-dashboard.css

@@ -5,7 +5,7 @@
  =========================================================
 
  * Product Page: https://www.creative-tim.com/product/material-dashboard-react
- * Copyright 2019 Creative Tim (https://www.creative-tim.com)
+ * Copyright 2020 Creative Tim (https://www.creative-tim.com)
  * Licensed under MIT (https://github.com/creativetimofficial/material-dashboard-react/blob/master/LICENSE.md)
 
  =========================================================

Documentation/tutorial-components.html

@@ -97,7 +97,7 @@
           <div class="col-md-8 col-md-offset-2 text-center">
             <h1 class="title ">NextJS Material Kit</h1>
             <h4 class="title">Tutorial and Components</h4>
-            <h5 class="description">v1.0.0</h5>
+            <h5 class="description">v1.1.0</h5>
             <a
               href="https://demos.creative-tim.com/nextjs-material-kit/documentation/tutorial?ref=njsmk-static-docs"
               class="btn btn-rose btn-fill btn-round"

LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Creative Tim
+Copyright (c) 2020 Creative Tim
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,7 +1,7 @@
 # [NextJS Material Kit](https://demos.creative-tim.com/nextjs-material-kit?ref=njsmk-readme) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/share?url=https%3A%2F%2Fdemos.creative-tim.com%2Fnextjs-material-kit%2Fcomponents&text=NextJS%20Material%20Kit&via=Creative%20Tim&hashtags=nextjs%20%23creativetim%20%23materialdesign)
 
 
- ![version](https://img.shields.io/badge/version-1.0.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/nextjs-material-kit.svg?maxAge=2592000)](https://github.com/creativetimofficial/nextjs-material-kit/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/nextjs-material-kit.svg?maxAge=2592000)](https://github.com/creativetimofficial/nextjs-material-kit/issues?q=is%3Aissue+is%3Aclosed) [![Join the chat at https://gitter.im/NIT-dgp/General](https://badges.gitter.im/NIT-dgp/General.svg)](https://gitter.im/creative-tim-general/Lobby) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/E4aHAQy)
+ ![version](https://img.shields.io/badge/version-1.1.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/nextjs-material-kit.svg?maxAge=2592000)](https://github.com/creativetimofficial/nextjs-material-kit/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/nextjs-material-kit.svg?maxAge=2592000)](https://github.com/creativetimofficial/nextjs-material-kit/issues?q=is%3Aissue+is%3Aclosed) [![Join the chat at https://gitter.im/NIT-dgp/General](https://badges.gitter.im/NIT-dgp/General.svg)](https://gitter.im/creative-tim-general/Lobby) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/E4aHAQy)
 
 
 ![Product Presentation Image](https://raw.githubusercontent.com/creativetimofficial/public-assets/master/nextjs-material-kit/nextjs-material-kit.jpg)
@@ -217,7 +217,7 @@ We use GitHub Issues as the official bug tracker for the NextJS Material Kit. He
 
 ## Licensing
 
-- Copyright 2019 Creative Tim (https://www.creative-tim.com/?ref=njsmk-readme)
+- Copyright 2020 Creative Tim (https://www.creative-tim.com/?ref=njsmk-readme)
 
 - Licensed under MIT (https://github.com/creativetimofficial/nextjs-material-kit/blob/master/LICENSE.md)
 

assets/jss/nextjs-material-kit.js

@@ -1,11 +1,11 @@
 /*!
 
  =========================================================
- * NextJS Material Kit - v1.0.0 based on Material Kit - v2.0.2 and Material Kit React - v1.8.0
+ * NextJS Material Kit - v1.1.0 based on Material Kit - v2.0.2 and Material Kit React - v1.8.0
  =========================================================
 
  * Product Page: https://www.creative-tim.com/product/nextjs-material-kit
- * Copyright 2019 Creative Tim (https://www.creative-tim.com)
+ * Copyright 2020 Creative Tim (https://www.creative-tim.com)
  * Licensed under MIT (https://github.com/creativetimofficial/nextjs-material-kit/blob/master/LICENSE.md)
 
  =========================================================
@@ -18,6 +18,27 @@
 // // // Variables - Styles that are used on more than one component
 // #############################
 
+const hexColorToRGB = function(hexColor) {
+  let detectShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; // #000 vs #000000
+  hexColor = hexColor.replace(detectShorthand, function(m, r, g, b) {
+    return r + r + g + g + b + b;
+  });
+
+  const hex_array = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexColor); // #000000 to #ffffff
+  return hex_array
+    ? {
+        r: parseInt(hex_array[1], 16), // 0-255
+        g: parseInt(hex_array[2], 16), // 0-255
+        b: parseInt(hex_array[3], 16) // 0-255
+      }
+    : null;
+};
+
+const hexToRGBAlpha = function(hexColor, alpha) {
+  let rgb = hexColorToRGB(hexColor);
+  return `rgba(${rgb.r},${rgb.g},${rgb.b},${alpha})`;
+};
+
 const drawerWidth = 260;
 
 const transition = {
@@ -78,28 +99,55 @@ const roseColor = "#e91e63";
 const grayColor = "#999999";
 
 const primaryBoxShadow = {
-  boxShadow:
-    "0 12px 20px -10px rgba(156, 39, 176, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(156, 39, 176, 0.2)"
+  boxShadow: `0 12px 20px -10px ${hexToRGBAlpha(
+    primaryColor,
+    0.28
+  )}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha(
+    primaryColor,
+    0.2
+  )}`
 };
 const infoBoxShadow = {
-  boxShadow:
-    "0 12px 20px -10px rgba(0, 188, 212, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(0, 188, 212, 0.2)"
+  boxShadow: `0 12px 20px -10px ${hexToRGBAlpha(
+    infoColor,
+    0.28
+  )}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha(
+    infoColor,
+    0.2
+  )}`
 };
 const successBoxShadow = {
-  boxShadow:
-    "0 12px 20px -10px rgba(76, 175, 80, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(76, 175, 80, 0.2)"
+  boxShadow: `0 12px 20px -10px ${hexToRGBAlpha(
+    successColor,
+    0.28
+  )}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha(
+    successColor,
+    0.2
+  )}`
 };
 const warningBoxShadow = {
-  boxShadow:
-    "0 12px 20px -10px rgba(255, 152, 0, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(255, 152, 0, 0.2)"
+  boxShadow: `0 12px 20px -10px ${hexToRGBAlpha(
+    warningColor,
+    0.28
+  )}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha(
+    warningColor,
+    0.2
+  )}`
 };
 const dangerBoxShadow = {
-  boxShadow:
-    "0 12px 20px -10px rgba(244, 67, 54, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(244, 67, 54, 0.2)"
+  boxShadow: `0 12px 20px -10px ${hexToRGBAlpha(
+    dangerColor,
+    0.28
+  )}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha(
+    dangerColor,
+    0.2
+  )}`
 };
 const roseBoxShadow = {
-  boxShadow:
-    "0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4)"
+  boxShadow: `0 4px 20px 0px ${hexToRGBAlpha(
+    "#000",
+    0.14
+  )}, 0 7px 10px -5px ${hexToRGBAlpha(roseColor, 0.4)}`
 };
 
 const warningCardHeader = {
@@ -180,6 +228,7 @@ const cardSubtitle = {
 };
 
 export {
+  hexToRGBAlpha,
   //variables
   drawerWidth,
   transition,

assets/jss/nextjs-material-kit/components/buttonStyle.js

@@ -1,4 +1,5 @@
 import {
+  hexToRGBAlpha,
   grayColor,
   roseColor,
   primaryColor,
@@ -76,62 +77,122 @@ const buttonStyle = {
   },
   primary: {
     backgroundColor: primaryColor,
-    boxShadow:
-      "0 2px 2px 0 rgba(156, 39, 176, 0.14), 0 3px 1px -2px rgba(156, 39, 176, 0.2), 0 1px 5px 0 rgba(156, 39, 176, 0.12)",
+    boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(
+      primaryColor,
+      0.14
+    )}, 0 3px 1px -2px ${hexToRGBAlpha(
+      primaryColor,
+      0.2
+    )}, 0 1px 5px 0 ${hexToRGBAlpha(primaryColor, 0.12)}`,
     "&:hover,&:focus": {
       backgroundColor: primaryColor,
-      boxShadow:
-        "0 14px 26px -12px rgba(156, 39, 176, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(156, 39, 176, 0.2)"
+      boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(
+        primaryColor,
+        0.42
+      )}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(
+        primaryColor,
+        0.2
+      )}`
     }
   },
   info: {
     backgroundColor: infoColor,
-    boxShadow:
-      "0 2px 2px 0 rgba(0, 188, 212, 0.14), 0 3px 1px -2px rgba(0, 188, 212, 0.2), 0 1px 5px 0 rgba(0, 188, 212, 0.12)",
+    boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(
+      infoColor,
+      0.14
+    )}, 0 3px 1px -2px ${hexToRGBAlpha(
+      infoColor,
+      0.2
+    )}, 0 1px 5px 0 ${hexToRGBAlpha(infoColor, 0.12)}`,
     "&:hover,&:focus": {
       backgroundColor: infoColor,
-      boxShadow:
-        "0 14px 26px -12px rgba(0, 188, 212, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 188, 212, 0.2)"
+      boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(
+        infoColor,
+        0.42
+      )}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(
+        infoColor,
+        0.2
+      )}`
     }
   },
   success: {
     backgroundColor: successColor,
-    boxShadow:
-      "0 2px 2px 0 rgba(76, 175, 80, 0.14), 0 3px 1px -2px rgba(76, 175, 80, 0.2), 0 1px 5px 0 rgba(76, 175, 80, 0.12)",
+    boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(
+      successColor,
+      0.14
+    )}, 0 3px 1px -2px ${hexToRGBAlpha(
+      successColor,
+      0.2
+    )}, 0 1px 5px 0 ${hexToRGBAlpha(successColor, 0.12)}`,
     "&:hover,&:focus": {
       backgroundColor: successColor,
-      boxShadow:
-        "0 14px 26px -12px rgba(76, 175, 80, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(76, 175, 80, 0.2)"
+      boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(
+        successColor,
+        0.42
+      )}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(
+        successColor,
+        0.2
+      )}`
     }
   },
   warning: {
     backgroundColor: warningColor,
-    boxShadow:
-      "0 2px 2px 0 rgba(255, 152, 0, 0.14), 0 3px 1px -2px rgba(255, 152, 0, 0.2), 0 1px 5px 0 rgba(255, 152, 0, 0.12)",
+    boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(
+      warningColor,
+      0.14
+    )}, 0 3px 1px -2px ${hexToRGBAlpha(
+      warningColor,
+      0.2
+    )}, 0 1px 5px 0 ${hexToRGBAlpha(warningColor, 0.12)}`,
     "&:hover,&:focus": {
       backgroundColor: warningColor,
-      boxShadow:
-        "0 14px 26px -12px rgba(255, 152, 0, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(255, 152, 0, 0.2)"
+      boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(
+        warningColor,
+        0.42
+      )}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(
+        warningColor,
+        0.2
+      )}`
     }
   },
   danger: {
     backgroundColor: dangerColor,
-    boxShadow:
-      "0 2px 2px 0 rgba(244, 67, 54, 0.14), 0 3px 1px -2px rgba(244, 67, 54, 0.2), 0 1px 5px 0 rgba(244, 67, 54, 0.12)",
+    boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(
+      dangerColor,
+      0.14
+    )}, 0 3px 1px -2px ${hexToRGBAlpha(
+      dangerColor,
+      0.2
+    )}, 0 1px 5px 0 ${hexToRGBAlpha(dangerColor, 0.12)}`,
     "&:hover,&:focus": {
       backgroundColor: dangerColor,
-      boxShadow:
-        "0 14px 26px -12px rgba(244, 67, 54, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(244, 67, 54, 0.2)"
+      boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(
+        dangerColor,
+        0.42
+      )}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(
+        dangerColor,
+        0.2
+      )}`
     }
   },
   rose: {
     backgroundColor: roseColor,
-    boxShadow:
-      "0 2px 2px 0 rgba(233, 30, 99, 0.14), 0 3px 1px -2px rgba(233, 30, 99, 0.2), 0 1px 5px 0 rgba(233, 30, 99, 0.12)",
+    boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(
+      primaryColor,
+      0.14
+    )}, 0 3px 1px -2px ${hexToRGBAlpha(
+      primaryColor,
+      0.2
+    )}, 0 1px 5px 0 ${hexToRGBAlpha(primaryColor, 0.12)}`,
     "&:hover,&:focus": {
       backgroundColor: roseColor,
-      boxShadow:
-        "0 14px 26px -12px rgba(233, 30, 99, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(233, 30, 99, 0.2)"
+      boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(
+        primaryColor,
+        0.42
+      )}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(
+        primaryColor,
+        0.2
+      )}`
     }
   },
   white: {