Merge pull request #10 from creativetimofficial/dev-main

Feature: update to v1.1.0

.gitignore

@@ -24,3 +24,5 @@ yarn-error.log*
 
 .next/
 out/
+
+commit.sh

CHANGELOG.md

@@ -1,5 +1,80 @@
 # Change Log
 
+## [1.1.0] 2021-03-19
+### Bug fixing
+- Rename `master` branch to `main`
+- To make a lot of our changes, we've followed the instructions from here (minus the `colors` and `font-sizes`): https://tailwindcss.com/docs/upgrading-to-v2
+  - For the colors, the only change that we made, is the fact that we've added all Tailwind CSS colors to our `tailwind.config.js` files, and inside our product, all `{type}-gray-{number}` classes were renamed to `{type}-blueGray-{number}`
+  - After that, we've changed `{type}-blueGray-{number}` to `{type}-blueGray-{lower-number}`, i.e. (`100` became `50`, `200` became `100`, ..., `900` became `800`)
+    - You can achieve this, by search in your whole project for `blueGray-100` and replace it with `blueGray-50`
+    - Then, you search in your whole project for `blueGray-200` and replace it with `blueGray-100`
+    - Then, you search in your whole project for `blueGray-300` and replace it with `blueGray-200`
+    - Then, you search in your whole project for `blueGray-400` and replace it with `blueGray-300`
+    - Then, you search in your whole project for `blueGray-500` and replace it with `blueGray-400`
+    - Then, you search in your whole project for `blueGray-600` and replace it with `blueGray-500`
+    - Then, you search in your whole project for `blueGray-700` and replace it with `blueGray-600`
+    - Then, you search in your whole project for `blueGray-800` and replace it with `blueGray-700`
+    - Then, you search in your whole project for `blueGray-900` and replace it with `blueGray-800`
+  - For the colors, the only change that we made, is the fact that we've added all Tailwind CSS colors to our `tailwind.config.js` files, and inside our product, all `{type}-blue-{number}` classes were renamed to `{type}-lightBlue-{number}`
+  - For the colors, the only change that we made, is the fact that we've added all Tailwind CSS colors to our `tailwind.config.js` files, and inside our product, all `{type}-green-{number}` classes were renamed to `{type}-emerald-{number}`
+- `lg:bg-transparent` is not working anymore, so we've changed it with `lg:bg-opacity-0`
+- Since we've dropped the usage of custom CSS, and reverted to `Built-In CSS Support` from `NextJS`, we had to move our images inside the `public` folder, and our styles inside the `styles` folder
+  - All the `require` images have been replaced by simple `/img/` strings
+- https://github.com/creativetimofficial/notus-angular/issues/4
+- https://github.com/creativetimofficial/notus-js/issues/4
+- https://github.com/creativetimofficial/notus-js/pull/5
+- https://github.com/creativetimofficial/notus-js/pull/6
+- https://github.com/creativetimofficial/notus-nextjs/issues/6
+- https://github.com/creativetimofficial/notus-nextjs/issues/7
+- https://github.com/creativetimofficial/notus-nextjs/issues/8
+- https://github.com/creativetimofficial/notus-react/issues/3
+- https://github.com/creativetimofficial/notus-svelte/issues/3
+- https://github.com/creativetimofficial/notus-svelte/issues/6
+- https://github.com/creativetimofficial/vue-notus/pull/4/
+### Major style changes
+- The upgrade of Tailwind CSS from version 1 to version 2, will cause multiple style changes, check them out on the official Tailwind CSS websites:
+  - https://blog.tailwindcss.com/tailwindcss-v2
+  - https://tailwindcss.com/
+  - https://tailwindcss.com/docs/upgrading-to-v2
+### Deleted components
+- `next.config.js` (we do not need it anymore since we now use `Built-In CSS Support` from `NextJS`)
+  - for the absolute imports, we've used the `jsconfig.json` file
+### Added components
+- `jsconfig.json` (to keep our absolute imports)
+### Deleted dependencies
+- `@tailwindcss/custom-forms`
+- `react-google-maps` (replaced by simple Google Maps API)
+- `@types/googlemaps` (dependencies of `react-google-maps`)
+- `@types/markerclustererplus` (dependencies of `react-google-maps`)
+- `@types/react` (dependencies of `react-google-maps`)
+- `@zeit/next-css` (we'll use the default `Built-In CSS Support` from `NextJS`)
+- `@zeit/next-sass` (we'll use the default `Built-In CSS Support` from `NextJS`)
+- `node-sass` (we'll use the default `Built-In CSS Support` from `NextJS`)
+- `next-images` (we'll use the default `Built-In CSS Support` from `NextJS`)
+- `next-fonts` (we'll use the default `Built-In CSS Support` from `NextJS`)
+- `next-compose-plugins` (we'll use the default `Built-In CSS Support` from `NextJS`)
+- `path` (we'll use the default `Built-In CSS Support` from `NextJS`)
+- `webpack` (we'll use the default `Built-In CSS Support` from `NextJS`)
+### Added dependencies
+- `@tailwindcss/forms` (replaces `@tailwindcss/custom-forms`)
+- `autoprefixer`
+- `postcss`
+### Updated dependencies
+```
+@fortawesome/fontawesome-free    5.14.0   →   5.15.3
+@popperjs/core                    2.5.1   →    2.9.1
+chart.js                          2.9.3   →    2.9.4
+next                              9.5.3   →   10.0.9
+react                           16.13.1   →   17.0.1
+@types/react                    16.9.49   →   17.0.3
+react-dom                       16.13.1   →   17.0.1
+react-scripts                     3.4.3   →    4.0.3
+tailwindcss                      1.8.10   →    2.0.4
+typescript                        4.0.3   →    4.2.3
+```
+### Warning
+_On a clean install there may be some warnings from request, chokidar, fsevents - they come from node_modules, and they do not affect the product at all._
+
 ## [1.0.0] 2020-09-29
 ### Original Release
 - Started project from [Tailwind Starter Kit by Creative Tim](https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation?ref=nnjs-changelog)

LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Creative Tim (https://www.creative-tim.com?ref=nnjs-license)
+Copyright (c) 2021 Creative Tim (https://www.creative-tim.com?ref=nnjs-license)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -1,6 +1,6 @@
 # Notus NextJS <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-nextjs%2F&text=Start%20your%20development%20with%20a%20Free%20Tailwind%20CSS%20and%20NextJS%20UI%20Kit%20and%20Admin.%20Let%20Notus%20NextJS%20amaze%20you%20with%20its%20cool%20features%20and%20build%20tools%20and%20get%20your%20project%20to%20a%20whole%20new%20level." target="_blank">![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)</a>
 
-![version](https://img.shields.io/badge/version-1.0.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) <a href="https://github.com/creativetimofficial/notus-nextjs/issues?q=is%3Aopen+is%3Aissue" target="_blank">![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/notus-nextjs.svg)</a> <a href="https://github.com/creativetimofficial/notus-nextjs/issues?q=is%3Aissue+is%3Aclosed" target="_blank">![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/notus-nextjs.svg)</a> <a href="https://gitter.im/creative-tim-general/Lobby" target="_blank">![Join the chat at https://gitter.im/NIT-dgp/General](https://badges.gitter.im/NIT-dgp/General.svg)</a> <a href="https://discord.gg/E4aHAQy" target="_blank">![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)</a>
+![version](https://img.shields.io/badge/version-1.1.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) <a href="https://github.com/creativetimofficial/notus-nextjs/issues?q=is%3Aopen+is%3Aissue" target="_blank">![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/notus-nextjs.svg)</a> <a href="https://github.com/creativetimofficial/notus-nextjs/issues?q=is%3Aissue+is%3Aclosed" target="_blank">![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/notus-nextjs.svg)</a> <a href="https://gitter.im/creative-tim-general/Lobby" target="_blank">![Join the chat at https://gitter.im/NIT-dgp/General](https://badges.gitter.im/NIT-dgp/General.svg)</a> <a href="https://discord.gg/E4aHAQy" target="_blank">![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)</a>
 
 ![Notus NextJS](https://github.com/creativetimofficial/public-assets/blob/master/notus-nextjs/notus-nextjs.jpg?raw=true)
 
@@ -201,9 +201,9 @@ We use GitHub Issues as the official bug tracker for the Notus NextJS. Here are
 
 ## Licensing
 
-- Copyright 2020 <a href="https://www.creative-tim.com/?ref=nnjs-readme" target="_blank">Creative Tim</a>
+- Copyright 2021 <a href="https://www.creative-tim.com/?ref=nnjs-readme" target="_blank">Creative Tim</a>
 
-- Licensed under <a href="https://github.com/creativetimofficial/notus-nextjs/blob/master/LICENSE.md" target="_blank">MIT</a>
+- Licensed under <a href="https://github.com/creativetimofficial/notus-nextjs/blob/main/LICENSE.md" target="_blank">MIT</a>
 
 ## Useful Links
 

components/Cards/CardBarChart.js

@@ -104,10 +104,10 @@ export default function CardBarChart() {
         <div className="rounded-t mb-0 px-4 py-3 bg-transparent">
           <div className="flex flex-wrap items-center">
             <div className="relative w-full max-w-full flex-grow flex-1">
-              <h6 className="uppercase text-gray-500 mb-1 text-xs font-semibold">
+              <h6 className="uppercase text-blueGray-400 mb-1 text-xs font-semibold">
                 Performance
               </h6>
-              <h2 className="text-gray-800 text-xl font-semibold">
+              <h2 className="text-blueGray-700 text-xl font-semibold">
                 Total orders
               </h2>
             </div>

components/Cards/CardLineChart.js

@@ -108,11 +108,11 @@ export default function CardLineChart() {
   }, []);
   return (
     <>
-      <div className="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-gray-800">
+      <div className="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-blueGray-700">
         <div className="rounded-t mb-0 px-4 py-3 bg-transparent">
           <div className="flex flex-wrap items-center">
             <div className="relative w-full max-w-full flex-grow flex-1">
-              <h6 className="uppercase text-gray-200 mb-1 text-xs font-semibold">
+              <h6 className="uppercase text-blueGray-100 mb-1 text-xs font-semibold">
                 Overview
               </h6>
               <h2 className="text-white text-xl font-semibold">Sales value</h2>

components/Cards/CardPageVisits.js

@@ -9,7 +9,7 @@ export default function CardPageVisits() {
         <div className="rounded-t mb-0 px-4 py-3 border-0">
           <div className="flex flex-wrap items-center">
             <div className="relative w-full px-4 max-w-full flex-grow flex-1">
-              <h3 className="font-semibold text-base text-gray-800">
+              <h3 className="font-semibold text-base text-blueGray-700">
                 Page visits
               </h3>
             </div>
@@ -28,92 +28,92 @@ export default function CardPageVisits() {
           <table className="items-center w-full bg-transparent border-collapse">
             <thead>
               <tr>
-                <th className="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left">
+                <th className="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
                   Page name
                 </th>
-                <th className="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left">
+                <th className="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
                   Visitors
                 </th>
-                <th className="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left">
+                <th className="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
                   Unique users
                 </th>
-                <th className="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left">
+                <th className="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
                   Bounce rate
                 </th>
               </tr>
             </thead>
             <tbody>
               <tr>
-                <th className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left">
+                <th className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
                   /argon/
                 </th>
-                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
+                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                   4,569
                 </td>
-                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
+                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                   340
                 </td>
-                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
-                  <i className="fas fa-arrow-up text-green-500 mr-4"></i>
+                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
+                  <i className="fas fa-arrow-up text-emerald-500 mr-4"></i>
                   46,53%
                 </td>
               </tr>
               <tr>
-                <th className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left">
+                <th className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
                   /argon/index.html
                 </th>
-                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
+                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                   3,985
                 </td>
-                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
+                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                   319
                 </td>
-                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
+                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                   <i className="fas fa-arrow-down text-orange-500 mr-4"></i>
                   46,53%
                 </td>
               </tr>
               <tr>
-                <th className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left">
+                <th className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
                   /argon/charts.html
                 </th>
-                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
+                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                   3,513
                 </td>
-                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
+                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                   294
                 </td>
-                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
+                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                   <i className="fas fa-arrow-down text-orange-500 mr-4"></i>
                   36,49%
                 </td>
               </tr>
               <tr>
-                <th className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left">
+                <th className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
                   /argon/tables.html
                 </th>
-                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
+                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                   2,050
                 </td>
-                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
+                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                   147
                 </td>
-                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
-                  <i className="fas fa-arrow-up text-green-500 mr-4"></i>
+                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
+                  <i className="fas fa-arrow-up text-emerald-500 mr-4"></i>
                   50,87%
                 </td>
               </tr>
               <tr>
-                <th className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left">
+                <th className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
                   /argon/profile.html
                 </th>
-                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
+                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                   1,795
                 </td>
-                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
+                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                   190
                 </td>
-                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
+                <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                   <i className="fas fa-arrow-down text-red-500 mr-4"></i>
                   46,53%
                 </td>