Migrate to App Router, add TypeScript, update styles

Author: acomanescu

.editorconfig

@@ -0,0 +1,76 @@
+const { resolve } = require('node:path');
+
+const project = resolve(__dirname, 'tsconfig.json');
+
+module.exports = {
+  root: true,
+  extends: [
+    require.resolve('@vercel/style-guide/eslint/node'),
+    require.resolve('@vercel/style-guide/eslint/typescript'),
+    require.resolve('@vercel/style-guide/eslint/browser'),
+    require.resolve('@vercel/style-guide/eslint/react'),
+    require.resolve('@vercel/style-guide/eslint/next'),
+  ],
+  parserOptions: {
+    project,
+  },
+  settings: {
+    'import/resolver': {
+      typescript: {
+        project,
+      },
+    },
+  },
+  rules: {
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        ignoreRestSiblings: true,
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+      },
+    ],
+    '@typescript-eslint/no-empty-interface': [
+      'error',
+      {
+        allowSingleExtends: true,
+      },
+    ],
+    '@typescript-eslint/no-shadow': [
+      'error',
+      {
+        ignoreOnInitialization: true,
+      },
+    ],
+    'import/newline-after-import': 'error',
+    'react/jsx-uses-react': 'error',
+    'react/react-in-jsx-scope': 'error',
+    'unicorn/filename-case': [
+      'error',
+      {
+        cases: {
+          kebabCase: true, // personal style
+          pascalCase: true,
+        },
+      },
+    ],
+
+    // Deactivated
+    '@typescript-eslint/dot-notation': 'off', // paths are used with a dot notation
+    '@typescript-eslint/no-misused-promises': 'off', // onClick with async fails
+    '@typescript-eslint/no-non-null-assertion': 'off', // sometimes compiler is unable to detect
+    '@typescript-eslint/no-unnecessary-condition': 'off', // remove when no static data is used
+    '@typescript-eslint/require-await': 'off', // Server Actions require async flag always
+    '@typescript-eslint/prefer-nullish-coalescing': 'off', // personal style
+    'import/no-default-export': 'off', // Next.js components must be exported as default
+    'import/no-extraneous-dependencies': 'off', // conflict with sort-imports plugin
+    'import/order': 'off', // using custom sort plugin
+    'no-nested-ternary': 'off', // personal style
+    'no-redeclare': 'off', // conflict with TypeScript function overloads
+    'react/jsx-fragments': 'off', // personal style
+    'react/prop-types': 'off', // TypeScript is used for type checking
+
+    '@next/next/no-img-element': 'off', // Temporary disabled
+  },
+};

.eslintrc.js

@@ -1,11 +1,29 @@
-## v3.0.0
+# Changelog
 
-###### Feb 24, 2023
+## v4.0.0
+
+###### Mar 8, 2024
 
+- Add `TypeScript`
+- Refactor code
+- Replace `date-fns` with `dayjs`
+- Replace `Formik` with `React Hook Form`
+- Replace `Hero Icons` with `Phosphor Icons`
+- Replace `pages` router with `app router`
+- Replace `Yup` with `Zod`
+- Update `eslint` rules
+- Update auth implementation
 - Update dependencies
 - Update design system
+
+## v3.0.0
+
+###### Feb 24, 2023
+
 - Refactor components
 - Replace authentication
+- Update dependencies
+- Update design system
 
 ## v2.1.0
 
@@ -31,8 +49,8 @@
 - Add `Feather Icons`
 - Add `Formik` for login/register pages
 - Implement `react-router` v6 routing method
-- Remove extra views
 - Remove `node-sass` dependency
+- Remove extra views
 - Update all components to match the PRO version style
 - Update dependencies
 - Update folder structure to remove folder depth

.eslintrc.json

@@ -1,23 +1,21 @@
-## [Material Kit - React](https://material-kit-react.devias.io/) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?text=%F0%9F%9A%A8Devias%20Freebie%20Alert%20-%20An%20awesome%20ready-to-use%20register%20page%20made%20with%20%23material%20%23react%0D%0Ahttps%3A%2F%2Fdevias.io%20%23createreactapp%20%23devias%20%23material%20%23freebie%20%40devias-io)
+## [Devias Kit - React](https://material-kit-react.devias.io/)
 
 ![license](https://img.shields.io/badge/license-MIT-blue.svg)
 
-[![Material Kit - React](https://github.com/devias-io/material-kit-react/blob/main/public/assets/thumbnail.png)](https://material-kit-react.devias.io/)
+[![Devias Kit - React](https://github.com/devias-io/material-kit-react/blob/main/public/assets/thumbnail.png)](https://material-kit-react.devias.io/)
 
-> Free React Admin Dashboard made with [MUI's](https://mui.com/?ref=devias-io)
-> components, [React](https://reactjs.org/?ref=devias-io) and of
-> course [Next.js](https://github.com/vercel/next.js/?ref=devias-io) to boost your app development
-> process!
+> Free React Admin Dashboard made with [MUI's](https://mui.com) components, [React](https://reactjs.org) and of course [Next.js](https://github.com/vercel/next.js) to boost your app development process!
 
-## Demo
+## Pages 
 
-- [Dashboard Page](https://material-kit-react.devias.io)
-- [Companies Page](https://material-kit-react.devias.io/companies)
-- [Customers Page](https://material-kit-react.devias.io/customers)
-- [Account Page](https://material-kit-react.devias.io/account)
-- [Settings Page](https://material-kit-react.devias.io/settings)
-- [Login Page](https://material-kit-react.devias.io/auth/login)
-- [Register Page](https://material-kit-react.devias.io/auth/register)
+- [Dashboard](https://material-kit-react.devias.io)
+- [Customers](https://material-kit-react.devias.io/dashboard/customers)
+- [Integrations](https://material-kit-react.devias.io/dashboard/integrations)
+- [Settings](https://material-kit-react.devias.io/dashboard/settings)
+- [Account](https://material-kit-react.devias.io/dashboard/account)
+- [Sign In](https://material-kit-react.devias.io/auth/sign-in)
+- [Sign Up](https://material-kit-react.devias.io/auth/sign-up)
+- [Reset Password](https://material-kit-react.devias.io/auth/reset-password)
 
 ## Free Figma Community File
 
@@ -28,81 +26,64 @@
 We also have a pro version of this product which bundles even more pages and components if you want
 to save more time and design efforts :)
 
-| Free Version (this one) | [Material Kit Pro - React](https://mui.com/store/items/devias-kit-pro/)  |
-|-------------------------|:-------------------------------------------------------------------------|
-| **9** Demo Pages        | **40+** demo pages                                                       
-| ✔ Mocked Authentication | ✔ Authentication with **Amplify**, **Auth0**, **JWT** and **Firebase**   
-| -                       | ✔ Dark & light mode                                                      
-| -                       | ✔ CRA version                                                            
-| -                       | ✔ TypeScript version - for Standard Plus and Extended license            
-| -                       | ✔ Design files (sketch & figma) - for Standard Plus and Extended license 
-| -                       | ✔ Complete users flows                                                   
+| Free Version (this one)  | [Devias Kit Pro](https://mui.com/store/items/devias-kit-pro/)                |
+| ------------------------ | :--------------------------------------------------------------------------- |
+| **8** Pages              | **80+** Pages                                                                |
+| ✔ Custom Authentication  | ✔ Authentication with **Amplify**, **Auth0**, **Firebase** and **Supabase**  |
+| -                        | ✔ Vite Version                                                               |
+| -                        | ✔ Dark Mode Support                                                          |
+| -                        | ✔ Complete Users Flows                                                       |
+| -                        | ✔ Premium Technical Support                                                  |
 
 ## Quick start
 
-- [Download from Github](https://github.com/devias-io/material-kit-react/archive/master.zip)
-  or [Download from Devias](https://devias.io/products/material-kit-react) or clone the
-  repo: `git clone https://github.com/devias-io/material-kit-react.git`
-
-- Make sure your Node.js and npm versions are up to date for `React 18`
-
+- Clone the repo: `git clone https://github.com/devias-io/material-kit-react.git`
+- Make sure your Node.js and npm versions are up to date
 - Install dependencies: `npm install` or `yarn`
-
 - Start the server: `npm run dev` or `yarn dev`
-
-- Views are on: `localhost:3000`
+- Open browser: `http://localhost:3000`
 
 ## File Structure
 
 Within the download you'll find the following directories and files:
 
 ```
-material-kit-react
-
-┌── .eslintrc.json
+┌── .editorconfig
+├── .eslintrc.js
 ├── .gitignore
 ├── CHANGELOG.md
 ├── LICENSE.md
+├── next-env.d.ts
 ├── next.config.js
 ├── package.json
 ├── README.md
+├── tsconfig.json
 ├── public
 └── src
 	├── components
 	├── contexts
-	├── guards
-	├── hocs
 	├── hooks
-	├── layouts
-	├── sections
-	├── theme
-	├── utils
-	└── pages
-		├── 404.js
-		├── _app.js
-		├── _document.js
-		├── account.js
-		├── companies.js
-		├── customers.js
-		├── index.js
-		├── products.js
-		└── settings.js
-		└──  auth
-			├── login.js
-			└── register.js
+	├── lib
+	├── styles
+	├── types
+	└── app
+		├── layout.tsx
+		├── page.tsx
+		├── auth
+		└── dashboard
 ```
 
 ## Resources
 
-- More freebies like this one: <https://devias.io>
+- More freebies like this one: https://devias.io
 
 ## Reporting Issues:
 
-- [Github Issues Page](https://github.com/devias-io/react-material-dashboard/issues?ref=devias-io)
+- [Github Issues Page](https://github.com/devias-io/material-kit-react/issues)
 
 ## License
 
-- Licensed under MIT (https://github.com/devias-io/react-material-dashboard/blob/master/LICENSE.md)
+- Licensed under [MIT](https://github.com/devias-io/material-kit-react/blob/main/LICENSE.md)
 
 ## Contact Us
 

CHANGELOG.md

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

README.md

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const config = {};
+
+export default config;