Merge pull request #26 from creativetimofficial/dev-main

Dev main

.gitignore

@@ -26,3 +26,4 @@ yarn-error.log*
 # package
 /dist
 /.next
+pnpm-lock.yaml

CHANGELOG.md

@@ -1,20 +1,35 @@
 # Change Log
 
+## [1.2.1] 2022-08-15
+
+- Fixed the issues
+- Updated dependencies
+- Migration to React 18
+- Migration to sass from node-sass
+
 ## [1.2.0] 2021-05-14
+
 ### Bug fixing
+
 - Moved all images inside `public` folder (i.e. moved from `assets/img` to `public/img`)
+
 ### Major style changes
+
 - Moved all of the styles inside `styles` folder (i.e. moved from `assets/scss`, `assets/css`, `assets/jss` to `styles/scss`, `styles/css` and `styles/jss`)
+
 ### Deleted components
 
 ### Added components
 
 ### Deleted dependencies
+
 - `@zeit/next-sass` (SCSS will not be imported with the built-in support of NextJS)
 - `react-swipeable-views` (not event Material-UI use it anymore)
+
 ### Added dependencies
 
 ### Updated dependencies
+
 ```
 @material-ui/core       4.9.13   →   4.11.4
 @material-ui/icons       4.9.1   →   4.11.2
@@ -33,32 +48,45 @@ react-slick             0.25.2   →   0.28.1
 styled-components        5.1.0   →    5.3.0
 webpack                 4.43.0   →   4.46.0
 ```
+
 ### Warning
+
 _We could not update webpack past version 4 and node-sass past version 5 due to some warnings from NextJS._
 _The following warnings come from some of our dependencies, however they do not affect the UI or the functionality of the product - we are thinking of dropping their usage and replace with other dependencies:_
+
 ```
 npm WARN [email protected] requires a peer of react@^16.5.0 but none is installed. You must install peer dependencies yourself.
 ```
 
 ## [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
@@ -74,17 +102,23 @@ 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
 - Added Material-UI as base framework
 - Added design from Material Kit by Creative Tim

LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Creative Tim
+Copyright (c) 2022 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

components/Badge/Badge.js

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 // @material-ui/core components
 import { makeStyles } from "@material-ui/core/styles";
 
-import styles from "styles/jss/nextjs-material-kit/components/badgeStyle.js";
+import styles from "/styles/jss/nextjs-material-kit/components/badgeStyle.js";
 
 const useStyles = makeStyles(styles);
 
@@ -18,7 +18,7 @@ export default function Badge(props) {
 }
 
 Badge.defaultProps = {
-  color: "gray",
+  color: "gray"
 };
 
 Badge.propTypes = {
@@ -29,7 +29,7 @@ Badge.propTypes = {
     "success",
     "info",
     "rose",
-    "gray",
+    "gray"
   ]),
-  children: PropTypes.node,
+  children: PropTypes.node
 };

components/Card/Card.js

@@ -8,7 +8,7 @@ import { makeStyles } from "@material-ui/core/styles";
 // @material-ui/icons
 
 // core components
-import styles from "styles/jss/nextjs-material-kit/components/cardStyle.js";
+import styles from "/styles/jss/nextjs-material-kit/components/cardStyle.js";
 
 const useStyles = makeStyles(styles);
 
@@ -19,7 +19,7 @@ export default function Card(props) {
     [classes.card]: true,
     [classes.cardPlain]: plain,
     [classes.cardCarousel]: carousel,
-    [className]: className !== undefined,
+    [className]: className !== undefined
   });
   return (
     <div className={cardClasses} {...rest}>
@@ -32,5 +32,5 @@ Card.propTypes = {
   className: PropTypes.string,
   plain: PropTypes.bool,
   carousel: PropTypes.bool,
-  children: PropTypes.node,
+  children: PropTypes.node
 };

components/Card/CardBody.js

@@ -8,7 +8,7 @@ import { makeStyles } from "@material-ui/core/styles";
 // @material-ui/icons
 
 // core components
-import styles from "styles/jss/nextjs-material-kit/components/cardBodyStyle.js";
+import styles from "/styles/jss/nextjs-material-kit/components/cardBodyStyle.js";
 
 const useStyles = makeStyles(styles);
 
@@ -17,7 +17,7 @@ export default function CardBody(props) {
   const { className, children, ...rest } = props;
   const cardBodyClasses = classNames({
     [classes.cardBody]: true,
-    [className]: className !== undefined,
+    [className]: className !== undefined
   });
   return (
     <div className={cardBodyClasses} {...rest}>
@@ -28,5 +28,5 @@ export default function CardBody(props) {
 
 CardBody.propTypes = {
   className: PropTypes.string,
-  children: PropTypes.node,
+  children: PropTypes.node
 };

components/Card/CardFooter.js

@@ -8,7 +8,7 @@ import { makeStyles } from "@material-ui/core/styles";
 // @material-ui/icons
 
 // core components
-import styles from "styles/jss/nextjs-material-kit/components/cardFooterStyle.js";
+import styles from "/styles/jss/nextjs-material-kit/components/cardFooterStyle.js";
 
 const useStyles = makeStyles(styles);
 
@@ -17,7 +17,7 @@ export default function CardFooter(props) {
   const { className, children, ...rest } = props;
   const cardFooterClasses = classNames({
     [classes.cardFooter]: true,
-    [className]: className !== undefined,
+    [className]: className !== undefined
   });
   return (
     <div className={cardFooterClasses} {...rest}>
@@ -28,5 +28,5 @@ export default function CardFooter(props) {
 
 CardFooter.propTypes = {
   className: PropTypes.string,
-  children: PropTypes.node,
+  children: PropTypes.node
 };

components/Card/CardHeader.js

@@ -8,7 +8,7 @@ import { makeStyles } from "@material-ui/core/styles";
 // @material-ui/icons
 
 // core components
-import styles from "styles/jss/nextjs-material-kit/components/cardHeaderStyle.js";
+import styles from "/styles/jss/nextjs-material-kit/components/cardHeaderStyle.js";
 
 const useStyles = makeStyles(styles);
 
@@ -19,7 +19,7 @@ export default function CardHeader(props) {
     [classes.cardHeader]: true,
     [classes[color + "CardHeader"]]: color,
     [classes.cardHeaderPlain]: plain,
-    [className]: className !== undefined,
+    [className]: className !== undefined
   });
   return (
     <div className={cardHeaderClasses} {...rest}>
@@ -32,5 +32,5 @@ CardHeader.propTypes = {
   className: PropTypes.string,
   color: PropTypes.oneOf(["warning", "success", "danger", "info", "primary"]),
   plain: PropTypes.bool,
-  children: PropTypes.node,
+  children: PropTypes.node
 };

components/CustomButtons/Button.js

@@ -10,10 +10,10 @@ import Button from "@material-ui/core/Button";
 
 // core components
 
-import buttonStyle from "styles/jss/nextjs-material-kit/components/buttonStyle.js";
+import buttonStyle from "/styles/jss/nextjs-material-kit/components/buttonStyle.js";
 
 const makeComponentStyles = makeStyles(() => ({
-  ...buttonStyle,
+  ...buttonStyle
 }));
 
 const RegularButton = React.forwardRef((props, ref) => {
@@ -45,7 +45,7 @@ const RegularButton = React.forwardRef((props, ref) => {
     [classes.block]: block,
     [classes.link]: link,
     [classes.justIcon]: justIcon,
-    [className]: className,
+    [className]: className
   });
   return (
     <Button {...rest} ref={ref} classes={{ root: btnClasses }}>
@@ -67,7 +67,7 @@ RegularButton.propTypes = {
     "twitter",
     "google",
     "github",
-    "transparent",
+    "transparent"
   ]),
   size: PropTypes.oneOf(["sm", "lg"]),
   simple: PropTypes.bool,
@@ -78,7 +78,7 @@ RegularButton.propTypes = {
   link: PropTypes.bool,
   justIcon: PropTypes.bool,
   children: PropTypes.node,
-  className: PropTypes.string,
+  className: PropTypes.string
 };
 
 export default RegularButton;

components/CustomDropdown/CustomDropdown.js

@@ -16,9 +16,9 @@ import Icon from "@material-ui/core/Icon";
 import Popper from "@material-ui/core/Popper";
 
 // core components
-import Button from "components/CustomButtons/Button.js";
+import Button from "/components/CustomButtons/Button.js";
 
-import styles from "styles/jss/nextjs-material-kit/components/customDropdownStyle.js";
+import styles from "/styles/jss/nextjs-material-kit/components/customDropdownStyle.js";
 
 const useStyles = makeStyles(styles);
 
@@ -56,18 +56,18 @@ export default function CustomDropdown(props) {
     left,
     rtlActive,
     noLiPadding,
-    navDropdown,
+    navDropdown
   } = props;
   const caretClasses = classNames({
     [classes.caret]: true,
     [classes.caretActive]: Boolean(anchorEl),
-    [classes.caretRTL]: rtlActive,
+    [classes.caretRTL]: rtlActive
   });
   const dropdownItem = classNames({
     [classes.dropdownItem]: true,
     [classes[hoverColor + "Hover"]]: true,
     [classes.noLiPadding]: noLiPadding,
-    [classes.dropdownItemRTL]: rtlActive,
+    [classes.dropdownItemRTL]: rtlActive
   });
   let icon = null;
   switch (typeof buttonIcon) {
@@ -113,7 +113,7 @@ export default function CustomDropdown(props) {
         className={classNames({
           [classes.popperClose]: !anchorEl,
           [classes.popperResponsive]: true,
-          [classes.pooperNav]: Boolean(anchorEl) && navDropdown,
+          [classes.pooperNav]: Boolean(anchorEl) && navDropdown
         })}
       >
         {() => (
@@ -169,7 +169,7 @@ export default function CustomDropdown(props) {
 
 CustomDropdown.defaultProps = {
   caret: true,
-  hoverColor: "primary",
+  hoverColor: "primary"
 };
 
 CustomDropdown.propTypes = {
@@ -180,7 +180,7 @@ CustomDropdown.propTypes = {
     "success",
     "warning",
     "danger",
-    "rose",
+    "rose"
   ]),
   buttonText: PropTypes.node,
   buttonIcon: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
@@ -194,5 +194,5 @@ CustomDropdown.propTypes = {
   noLiPadding: PropTypes.bool,
   navDropdown: PropTypes.bool,
   // function that retuns the selected item
-  onClick: PropTypes.func,
+  onClick: PropTypes.func
 };