Upgrade to Next.js 14 with App Router and Mantine 7

.changeset/big-lamps-attack.md

@@ -0,0 +1,5 @@
+---
+'analytics-dashboard': patch
+---
+
+added logic for active link styles

.changeset/curvy-walls-unite.md

@@ -0,0 +1,5 @@
+---
+'analytics-dashboard': patch
+---
+
+added mantine sliders, dates, buttons stories

.changeset/cyan-parents-cough.md

@@ -0,0 +1,5 @@
+---
+'analytics-dashboard': minor
+---
+
+added and setup prettier, husky and lint-staged

.changeset/dull-glasses-fold.md

@@ -0,0 +1,5 @@
+---
+'analytics-dashboard': patch
+---
+
+added usefetchdata hook for all mock data replacing the previous data imports

.changeset/four-cougars-battle.md

@@ -0,0 +1,5 @@
+---
+'analytics-dashboard': minor
+---
+
+updated side nav background color

.changeset/large-deers-remember.md

@@ -0,0 +1,40 @@
+---
+"analytics-dashboard": major
+---
+
+Upgrade to Next.js 14 with App Router and Mantine 7
+
+# Summary
+
+This major release marks a significant upgrade to the website, transitioning from Next.js 13 to 14 with App Router and from Mantine 6 to 7. This upgrade brings about substantial enhancements in performance, accessibility, user experience, and overall development practices.
+
+# Next.js
+
+- Project Structure: Aligned the project structure with the recommended guidelines for Next.js and App Router, enhancing organization and maintainability.
+- Pages and Layouts: Optimized the pages and layouts structure to align with Next.js and App Router best practices, ensuring a more structured and efficient codebase.
+- Pages Metadata: Updated each page's metadata content to provide more accurate and informative descriptions for search engines.
+- Error Pages: Deprecated the individual 403, 404, and 500 error pages and adopted a unified "not-found" page for 404 errors and a generic error page for other server-side errors.
+- Navigation Progress Bar: Discontinued the navigation progress bar for in-page transitions and implemented a centralized loading.tsx file to handle all in-page loading animations.
+
+# Mantine
+
+- CreateStyles: Adopted CSS Modules as the preferred method for styling components, replacing the deprecated createStyles function.
+- Sx Prop: Replaced the deprecated sx prop with className or style prop for styling components in Mantine 7.0.
+- Theme and ColorScheme: Refactored the theme and colour scheme usage across the codebase to align with Mantine 7.0 conventions.
+- Dynamic Multicolor Theme: Deprecated the dynamic multicolour theme change feature and centralized theme configuration in the theme/index.tsx file.
+
+# New Features
+
+- Collapsible Side Navigation: Introduced a collapsible side navigation panel for enhanced user interface and navigation experience.
+- Active Link Styles: Implemented logic to dynamically apply active link styles to the side navigation menu, providing clear visual cues for the currently selected page.
+- Dark/Light Theme Switch: Integrated a dark/light theme toggle switch on the navigation header, enabling users to personalize their viewing experience.
+- Loading Animations: Added loading animations to components rendering mock data, providing visual feedback during data fetching and processing.
+- Custom useFetch Hook: Developed a custom useFetch hook to streamline data fetching across the application. This hook encapsulates data fetching logic, returning data, loading, and error states, and utilizes the native JavaScript fetch API.
+- Code Formatting: Implemented Prettier, Husky, and lint-staged to enforce consistent code formatting and maintain a high level of code quality.
+- Clerk Integration: Integrated Clerk (https://clerk.com/) to extend user authentication and management capabilities, providing a seamless user experience.
+- NextAuth with Auth0: Implemented NextAuth with Auth0 (https://auth0.com/) for user authentication, leveraging NextAuth's flexibility and Auth0's robust identity management platform.
+- Component Documentation Stories: Created component documentation stories using Storybook to provide clear and interactive documentation for each component.
+
+# Bug Fixes
+
+- General Bug Fixes: Addressed a variety of bugs and issues to enhance overall stability and performance.

.changeset/moody-peaches-train.md

@@ -0,0 +1,5 @@
+---
+'analytics-dashboard': minor
+---
+
+updated pages metadata bug removed head tags in pages added color mode switch moved color mode switch to header removed theme drawer because no logic for color switching yet

.changeset/odd-mails-invent.md

@@ -0,0 +1,5 @@
+---
+'analytics-dashboard': patch
+---
+
+added chats loading animation, updated chats data to fetch using fetch data hook

.changeset/plenty-seas-push.md

@@ -0,0 +1,5 @@
+---
+'analytics-dashboard': minor
+---
+
+updated all pages metatadata

.changeset/polite-adults-laugh.md

@@ -0,0 +1,5 @@
+---
+'analytics-dashboard': patch
+---
+
+removed 403 page because of build time errors

.changeset/polite-apples-guess.md

@@ -0,0 +1,5 @@
+---
+'analytics-dashboard': major
+---
+
+upgraded to next 14 and mantine 7

.changeset/seven-timers-flash.md

@@ -0,0 +1,5 @@
+---
+'analytics-dashboard': minor
+---
+
+refactored layouts to match recommended layouts file structure by next docs 13

.changeset/smooth-llamas-thank.md

@@ -0,0 +1,5 @@
+---
+'analytics-dashboard': minor
+---
+
+Added storybook component stories

.changeset/soft-wolves-push.md

@@ -0,0 +1,5 @@
+---
+'analytics-dashboard': patch
+---
+
+refactored 404 and 500 pages because they are ootb & designated special pages by nextjs

.changeset/tender-timers-shop.md

@@ -0,0 +1,5 @@
+---
+'analytics-dashboard': patch
+---
+
+finished app layout migrations

.changeset/yellow-radios-destroy.md

@@ -0,0 +1,5 @@
+---
+'analytics-dashboard': minor
+---
+
+setup next-auth & added auth0 provicder

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,14 +4,14 @@ about: Create a report to help us improve
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,7 +4,6 @@ about: Suggest an idea for this project
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Is your feature request related to a problem? Please describe.**

.github/workflows/chromatic.yml

@@ -0,0 +1,25 @@
+# Workflow name
+name: 'Chromatic Deployment'
+
+# Event for the workflow
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+# List of jobs
+jobs:
+  test:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v3
+      - run: yarn
+        #👇 Adds Chromatic as a step in the workflow
+      - uses: chromaui/action@v1
+        # Options required for Chromatic's GitHub Action
+        with:
+          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/en/deploy/ to obtain it
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/release.yml

@@ -26,4 +26,4 @@ jobs:
       - name: Create Release Pull Request
         uses: changesets/action@v1
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -35,3 +35,28 @@ yarn-error.log*
 next-env.d.ts
 
 .idea
+
+### StorybookJs ###
+# gitignore template for the Storybook, UI guide for front apps
+# website: https://storybook.js.org/
+
+storybook-static/
+
+### yarn ###
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+
+.yarn/*
+!.yarn/releases
+!.yarn/patches
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+
+# if you are NOT using Zero-installs, then:
+# comment the following lines
+!.yarn/cache
+
+# and uncomment the following lines
+# .pnp.*
+
+# End of https://www.toptal.com/developers/gitignore/api/yarn

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm test

.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": true,
+  "singleQuote": true
+}

.storybook/main.ts

@@ -0,0 +1,41 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+import { resolve } from 'node:path';
+import path from 'path';
+
+const config: StorybookConfig = {
+  stories: [
+    '../stories/**/*.mdx',
+    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../components/**/*.stories.mdx',
+    '../components/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+    '@storybook/addon-styling-webpack',
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {
+      nextConfigPath: resolve(__dirname, '../../next.config.js'),
+    },
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  webpackFinal: async (config, { configType }) => {
+    if (!config.resolve) {
+      return config;
+    }
+
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@': path.resolve(__dirname, '..'),
+    };
+
+    return config;
+  },
+};
+export default config;

.storybook/manager.ts

@@ -0,0 +1,8 @@
+// .storybook/manager.js
+
+import { addons } from '@storybook/manager-api';
+import myTheme from './theme';
+
+addons.setConfig({
+  theme: myTheme,
+});

.storybook/preview.tsx

@@ -0,0 +1,55 @@
+// Import styles of packages that you've installed.
+// All packages except `@mantine/hooks` require styles imports
+import '@mantine/core/styles.css';
+import '@mantine/dates/styles.css';
+import '@mantine/tiptap/styles.css';
+import '@mantine/carousel/styles.css';
+import '@mantine/notifications/styles.css';
+import 'mantine-datatable/styles.layer.css';
+
+import React, { useEffect } from 'react';
+import { addons } from '@storybook/preview-api';
+import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
+import { MantineProvider, useMantineColorScheme } from '@mantine/core';
+import { themes } from '@storybook/theming';
+import { Preview } from '@storybook/react';
+// @ts-ignore
+import { myTheme } from '../theme';
+
+// theme.ts file from previous step
+
+const channel = addons.getChannel();
+
+function ColorSchemeWrapper({ children }: { children: React.ReactNode }) {
+  const { setColorScheme } = useMantineColorScheme();
+  const handleColorScheme = (value: boolean) =>
+    setColorScheme(value ? 'dark' : 'light');
+
+  useEffect(() => {
+    channel.on(DARK_MODE_EVENT_NAME, handleColorScheme);
+    return () => channel.off(DARK_MODE_EVENT_NAME, handleColorScheme);
+  }, [channel]);
+
+  return <>{children}</>;
+}
+
+export const decorators = [
+  (renderStory: any) => (
+    <ColorSchemeWrapper>{renderStory()}</ColorSchemeWrapper>
+  ),
+  (renderStory: any) => (
+    <MantineProvider theme={myTheme}>{renderStory()}</MantineProvider>
+  ),
+];
+
+const preview: Preview = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+    docs: {
+      theme: themes.normal,
+    },
+  },
+  decorators: decorators,
+};

.storybook/theme.ts

@@ -0,0 +1,13 @@
+// .storybook/YourTheme.js
+
+import { create } from '@storybook/theming/create';
+
+export default create({
+  base: 'light',
+  brandTitle: 'Mantine analytics dashboard',
+  brandUrl: 'https://mantine-analytics-dashboard.netlify.app/',
+  brandTarget: '_blank',
+
+  //
+  colorPrimary: '#2378c3',
+});