upgrade to mui v6 in next-client

nishkohli96 · nishkohli96 · commit 068beccca958 · 2024-10-06T20:45:47.000+05:30
diff --git a/README.md b/README.md
@@ -9,10 +9,9 @@ You can clone the full repo and keep only the packages you need in your monorepo
 - [Turborepo](https://turborepo.org/)
 - [React](https://reactjs.org/), [NestJs](https://nestjs.com/), [ExpressJS](https://expressjs.com/), [NestJS](https://nestjs.com/)
 - 100% [Typescript](https://www.typescriptlang.org/)
-- [Prettier](https://prettier.io/) and Eslint setup alongside `pre-commit` hook.
-- [Mui](https://mui.com/) and [Redux](https://redux.js.org/) preconfigured.
+- [Prettier](https://prettier.io/) and [Eslint](https://eslint.org/) setup alongside `pre-commit` hook.
+- [Mui v6](https://mui.com/) alongside theme change preconfigured.
 - [Dockerize](https://docs.docker.com/) images
-- Easy to customise
 - Github Actions to build apps and publish their docker images
 
 ## Get Started
diff --git a/apps/express-server/README.md b/apps/express-server/README.md
@@ -20,4 +20,3 @@ yarn prod
 - Handled loading of environment variables
 - Styled logging using [chalk](https://www.npmjs.com/package/chalk)
 - Preconfigured logger middleware - [winston](https://www.npmjs.com/package/winston) for logging request details and errors 
-- Producion Dockerfile
diff --git a/apps/nestjs-server/README.md b/apps/nestjs-server/README.md
@@ -2,6 +2,11 @@
   <a href="http://nestjs.com/" target="blank"><img src="https://nestjs.com/img/logo-small.svg" width="200" alt="Nest Logo" /></a>
 </p>
 
+
+### Features
+- Routes directory
+- Code snippet to switch to `platform-express` or `platform-fastify` (remove the unused platform from package.json)
+
 ## Running the app
 
 ```bash
@@ -24,8 +29,3 @@ $ yarn run test:e2e
 # test coverage
 $ yarn run test:cov
 ```
-
-### Features
-
-- Routes directory
-- Dockerfile
diff --git a/apps/next-client/README.md b/apps/next-client/README.md
@@ -2,5 +2,5 @@
 
 ### Features
 
-- Integrated Mui with theme
-- Dockerfile
+- [Mui v6](https://mui.com/material-ui/)
+- Button to toggle light and dark mode by changing MUI theme.
diff --git a/apps/next-client/package.json b/apps/next-client/package.json
@@ -14,9 +14,9 @@
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^5.15.21",
-    "@mui/material": "^5.15.21",
-    "@mui/material-nextjs": "^5.15.11",
+    "@mui/icons-material": "^6.1.2",
+    "@mui/material": "^6.1.2",
+    "@mui/material-nextjs": "^6.1.2",
     "next": "14.2.14",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
diff --git a/apps/next-client/src/app/layout.tsx b/apps/next-client/src/app/layout.tsx
@@ -1,29 +1,33 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
-import { ThemeProvider } from '@mui/material/styles';
-import theme from '@/assets/styles/theme';
+import { AppThemeProvider } from '@/theme';
+import { LayoutProps } from '@/types';
 import './globals.css';
 
 const inter = Inter({ subsets: ['latin'] });
+const defaultTitle = 'NextJs App';
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app'
+  title: {
+    template: `%s | ${defaultTitle}`,
+    default: defaultTitle,
+  },
+  description: 'NextJS Template App'
 };
 
-export default function RootLayout({ children }: {
-  children: React.ReactNode;
-}) {
+const RootLayout = ({ children }: LayoutProps) => {
   return (
     <html lang="en">
       <body className={inter.className}>
         <AppRouterCacheProvider options={{ key: 'mui' }}>
-          <ThemeProvider theme={theme}>
+          <AppThemeProvider>
             {children}
-          </ThemeProvider>
+          </AppThemeProvider>
         </AppRouterCacheProvider>
       </body>
     </html>
   );
-}
+};
+
+export default RootLayout;
diff --git a/apps/next-client/src/app/not-found.tsx b/apps/next-client/src/app/not-found.tsx
@@ -0,0 +1,12 @@
+/**
+ * Stylize this page to handle the routes not existing inside your application.
+ * Delete this file, if you want to render the default 404 Page for NextJS.
+ */
+
+const Page404 = () => {
+  return (
+    <p>not found</p>
+  );
+};
+
+export default Page404;
diff --git a/apps/next-client/src/app/page.tsx b/apps/next-client/src/app/page.tsx
@@ -1,21 +1,21 @@
 import Image from 'next/image';
-import Button from '@mui/material/Button';
-import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import ThemeChangeButton from '@/components/theme-change-button';
 import styles from './page.module.css';
 
-export default function Home() {
+const HomePage = () => {
   return (
     <main className={styles.main}>
-      <Paper sx={{ padding: '10px' }}>
-        <Button color="primary" variant="contained">
-          Mui Button
-        </Button>
-      </Paper>
       <div className={styles.description}>
         <p>
           Get started by editing&nbsp;
           <code className={styles.code}>src/app/page.tsx</code>
         </p>
+        <Typography sx={{ color: 'primary' }}>
+          Change Theme By clicking this button -&gt;
+          {' '}
+          <ThemeChangeButton />
+        </Typography>
         <div>
           <a
             href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
@@ -108,4 +108,6 @@ export default function Home() {
       </div>
     </main>
   );
-}
+};
+
+export default HomePage;
diff --git a/apps/next-client/src/app/pokemon/[id]/page.tsx b/apps/next-client/src/app/pokemon/[id]/page.tsx
diff --git a/apps/next-client/src/app/pokemon/layout.tsx b/apps/next-client/src/app/pokemon/layout.tsx
diff --git a/apps/next-client/src/app/pokemon/page.tsx b/apps/next-client/src/app/pokemon/page.tsx
diff --git a/apps/next-client/src/app/sw/page.tsx b/apps/next-client/src/app/sw/page.tsx
diff --git a/apps/next-client/src/components/theme-change-button/index.tsx b/apps/next-client/src/components/theme-change-button/index.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import { useThemeContext } from '@/theme';
+
+const ThemeChangeButton = () => {
+  const { currentTheme, toggleTheme } = useThemeContext();
+  const isDarkTheme = currentTheme === 'dark';
+  const toolTip = `Switch to ${isDarkTheme ? 'light' : 'dark'} theme`;
+
+  return (
+    <Tooltip title={toolTip}>
+      <IconButton onClick={toggleTheme}>
+        {isDarkTheme ? <DarkModeIcon /> : <LightModeIcon color="warning" />}
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+export default ThemeChangeButton;
diff --git a/apps/next-client/src/theme/index.tsx b/apps/next-client/src/theme/index.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { PaletteMode, ThemeProvider, createTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import CssBaseline from '@mui/material/CssBaseline';
+import { LayoutProps } from '@/types';
+import { getTheme } from './theme';
+
+interface ThemeContextProps {
+  currentTheme: PaletteMode;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextProps>({
+  currentTheme: 'light',
+  toggleTheme: () => {}
+});
+
+export const useThemeContext = () => useContext(ThemeContext);
+
+export const AppThemeProvider = ({ children }: LayoutProps ) => {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const [currentTheme, setCurrentTheme] = useState<PaletteMode>('dark');
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme) {
+      setCurrentTheme(savedTheme as PaletteMode);
+    } else {
+      setCurrentTheme(prefersDarkMode ? 'dark' : 'light');
+    }
+  }, [prefersDarkMode]);
+
+  const toggleTheme = () => {
+    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+    setCurrentTheme(newTheme);
+    localStorage.setItem('theme', newTheme);
+  };
+
+  const theme = useMemo(
+    () => createTheme(getTheme(currentTheme)),
+    [currentTheme]
+  );
+
+  return (
+    <ThemeContext.Provider value={{ currentTheme, toggleTheme }}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </ThemeContext.Provider>
+  );
+};
diff --git a/apps/next-client/src/theme/palette.ts b/apps/next-client/src/theme/palette.ts
@@ -1,6 +1,8 @@
 /**
- *	Dark mode with MUI.
- *  https://mui.com/material-ui/customization/dark-mode/
+ * Check out these resources for building theme -
+ *
+ * https://zenoo.github.io/mui-theme-creator/
+ * https://m2.material.io/inline-tools/color/
  */
 
 export const LightThemePalette = {
diff --git a/apps/next-client/src/theme/theme.ts b/apps/next-client/src/theme/theme.ts
@@ -1,7 +1,7 @@
 'use client';
+
 import { Roboto } from 'next/font/google';
-import { PaletteMode } from '@mui/material';
-import { createTheme } from '@mui/material/styles';
+import { PaletteMode } from '@mui/material/styles';
 import { LightThemePalette, DarkThemePalette } from './palette';
 
 const roboto = Roboto({
@@ -15,27 +15,25 @@ const roboto = Roboto({
   display: 'swap'
 });
 
-const AppTheme = (mode: PaletteMode) => ({
+export const getTheme = (mode: PaletteMode) => ({
   palette: {
     mode,
     common: {
       black: '#000',
-      white: '#fff'
+      white: '#fff',
     },
-    ...(mode === 'light' ? LightThemePalette : DarkThemePalette)
+    ...(mode === 'light' ? LightThemePalette : DarkThemePalette),
   },
   breakpoints: {
     values: {
       xs: 0,
       sm: 350,
       md: 768,
       lg: 1024,
-      xl: 1400
-    }
+      xl: 1400,
+    },
+  },
+  typography: {
+    fontFamily: roboto.style.fontFamily,
   },
-  typography: { fontFamily: roboto.style.fontFamily }
 });
-
-const theme = createTheme(AppTheme('dark'));
-
-export default theme;
diff --git a/apps/next-client/src/types/common.ts b/apps/next-client/src/types/common.ts
@@ -0,0 +1,3 @@
+export interface LayoutProps {
+  children: React.ReactNode;
+}
diff --git a/apps/next-client/src/types/index.ts b/apps/next-client/src/types/index.ts
@@ -0,0 +1 @@
+export * from './common';
diff --git a/yarn.lock b/yarn.lock
