Skip to content

Commit 068becc

Browse files
nishkohli96nishkohli96
committed
upgrade to mui v6 in next-client
1 parent 68bae35 commit 068becc

File tree

19 files changed

+230
-128
lines changed

19 files changed

+230
-128
lines changed

‎README.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,9 @@ You can clone the full repo and keep only the packages you need in your monorepo
99
- [Turborepo](https://turborepo.org/)
1010
- [React](https://reactjs.org/), [NestJs](https://nestjs.com/), [ExpressJS](https://expressjs.com/), [NestJS](https://nestjs.com/)
1111
- 100% [Typescript](https://www.typescriptlang.org/)
12-
- [Prettier](https://prettier.io/) and Eslint setup alongside `pre-commit` hook.
13-
- [Mui](https://mui.com/) and [Redux](https://redux.js.org/) preconfigured.
12+
- [Prettier](https://prettier.io/) and [Eslint](https://eslint.org/) setup alongside `pre-commit` hook.
13+
- [Mui v6](https://mui.com/) alongside theme change preconfigured.
1414
- [Dockerize](https://docs.docker.com/) images
15-
- Easy to customise
1615
- Github Actions to build apps and publish their docker images
1716

1817
## Get Started

‎apps/express-server/README.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,3 @@ yarn prod
2020
- Handled loading of environment variables
2121
- Styled logging using [chalk](https://www.npmjs.com/package/chalk)
2222
- Preconfigured logger middleware - [winston](https://www.npmjs.com/package/winston) for logging request details and errors
23-
- Producion Dockerfile

‎apps/nestjs-server/README.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22
<a href="http://nestjs.com/" target="blank"><img src="https://nestjs.com/img/logo-small.svg" width="200" alt="Nest Logo" /></a>
33
</p>
44

5+
6+
### Features
7+
- Routes directory
8+
- Code snippet to switch to `platform-express` or `platform-fastify` (remove the unused platform from package.json)
9+
510
## Running the app
611

712
```bash
@@ -24,8 +29,3 @@ $ yarn run test:e2e
2429
# test coverage
2530
$ yarn run test:cov
2631
```
27-
28-
### Features
29-
30-
- Routes directory
31-
- Dockerfile

‎apps/next-client/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@
22

33
### Features
44

5-
- Integrated Mui with theme
6-
- Dockerfile
5+
- [Mui v6](https://mui.com/material-ui/)
6+
- Button to toggle light and dark mode by changing MUI theme.

‎apps/next-client/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@
1414
"@emotion/cache": "^11.11.0",
1515
"@emotion/react": "^11.11.4",
1616
"@emotion/styled": "^11.11.5",
17-
"@mui/icons-material": "^5.15.21",
18-
"@mui/material": "^5.15.21",
19-
"@mui/material-nextjs": "^5.15.11",
17+
"@mui/icons-material": "^6.1.2",
18+
"@mui/material": "^6.1.2",
19+
"@mui/material-nextjs": "^6.1.2",
2020
"next": "14.2.14",
2121
"react": "^18.3.1",
2222
"react-dom": "^18.3.1"

‎apps/next-client/src/app/layout.tsx

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,33 @@
11
import type { Metadata } from 'next';
22
import { Inter } from 'next/font/google';
33
import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
4-
import { ThemeProvider } from '@mui/material/styles';
5-
import theme from '@/assets/styles/theme';
4+
import { AppThemeProvider } from '@/theme';
5+
import { LayoutProps } from '@/types';
66
import './globals.css';
77

88
const inter = Inter({ subsets: ['latin'] });
9+
const defaultTitle = 'NextJs App';
910

1011
export const metadata: Metadata = {
11-
title: 'Create Next App',
12-
description: 'Generated by create next app'
12+
title: {
13+
template: `%s | ${defaultTitle}`,
14+
default: defaultTitle,
15+
},
16+
description: 'NextJS Template App'
1317
};
1418

15-
export default function RootLayout({ children }: {
16-
children: React.ReactNode;
17-
}) {
19+
const RootLayout = ({ children }: LayoutProps) => {
1820
return (
1921
<html lang="en">
2022
<body className={inter.className}>
2123
<AppRouterCacheProvider options={{ key: 'mui' }}>
22-
<ThemeProvider theme={theme}>
24+
<AppThemeProvider>
2325
{children}
24-
</ThemeProvider>
26+
</AppThemeProvider>
2527
</AppRouterCacheProvider>
2628
</body>
2729
</html>
2830
);
29-
}
31+
};
32+
33+
export default RootLayout;

‎apps/next-client/src/app/not-found.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* Stylize this page to handle the routes not existing inside your application.
3+
* Delete this file, if you want to render the default 404 Page for NextJS.
4+
*/
5+
6+
const Page404 = () => {
7+
return (
8+
<p>not found</p>
9+
);
10+
};
11+
12+
export default Page404;

‎apps/next-client/src/app/page.tsx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import Image from 'next/image';
2-
import Button from '@mui/material/Button';
3-
import Paper from '@mui/material/Paper';
2+
import Typography from '@mui/material/Typography';
3+
import ThemeChangeButton from '@/components/theme-change-button';
44
import styles from './page.module.css';
55

6-
export default function Home() {
6+
const HomePage = () => {
77
return (
88
<main className={styles.main}>
9-
<Paper sx={{ padding: '10px' }}>
10-
<Button color="primary" variant="contained">
11-
Mui Button
12-
</Button>
13-
</Paper>
149
<div className={styles.description}>
1510
<p>
1611
Get started by editing&nbsp;
1712
<code className={styles.code}>src/app/page.tsx</code>
1813
</p>
14+
<Typography sx={{ color: 'primary' }}>
15+
Change Theme By clicking this button -&gt;
16+
{' '}
17+
<ThemeChangeButton />
18+
</Typography>
1919
<div>
2020
<a
2121
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() {
108108
</div>
109109
</main>
110110
);
111-
}
111+
};
112+
113+
export default HomePage;

‎apps/next-client/src/app/pokemon/[id]/page.tsx

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎apps/next-client/src/app/pokemon/layout.tsx

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎apps/next-client/src/app/pokemon/page.tsx

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎apps/next-client/src/app/sw/page.tsx

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎apps/next-client/src/components/theme-change-button/index.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
'use client';
2+
3+
import IconButton from '@mui/material/IconButton';
4+
import Tooltip from '@mui/material/Tooltip';
5+
import DarkModeIcon from '@mui/icons-material/DarkMode';
6+
import LightModeIcon from '@mui/icons-material/LightMode';
7+
import { useThemeContext } from '@/theme';
8+
9+
const ThemeChangeButton = () => {
10+
const { currentTheme, toggleTheme } = useThemeContext();
11+
const isDarkTheme = currentTheme === 'dark';
12+
const toolTip = `Switch to ${isDarkTheme ? 'light' : 'dark'} theme`;
13+
14+
return (
15+
<Tooltip title={toolTip}>
16+
<IconButton onClick={toggleTheme}>
17+
{isDarkTheme ? <DarkModeIcon /> : <LightModeIcon color="warning" />}
18+
</IconButton>
19+
</Tooltip>
20+
);
21+
};
22+
23+
export default ThemeChangeButton;

‎apps/next-client/src/theme/index.tsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
'use client';
2+
3+
import { createContext, useContext, useEffect, useMemo, useState } from 'react';
4+
import { PaletteMode, ThemeProvider, createTheme } from '@mui/material/styles';
5+
import useMediaQuery from '@mui/material/useMediaQuery';
6+
import CssBaseline from '@mui/material/CssBaseline';
7+
import { LayoutProps } from '@/types';
8+
import { getTheme } from './theme';
9+
10+
interface ThemeContextProps {
11+
currentTheme: PaletteMode;
12+
toggleTheme: () => void;
13+
}
14+
15+
const ThemeContext = createContext<ThemeContextProps>({
16+
currentTheme: 'light',
17+
toggleTheme: () => {}
18+
});
19+
20+
export const useThemeContext = () => useContext(ThemeContext);
21+
22+
export const AppThemeProvider = ({ children }: LayoutProps ) => {
23+
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
24+
const [currentTheme, setCurrentTheme] = useState<PaletteMode>('dark');
25+
26+
useEffect(() => {
27+
const savedTheme = localStorage.getItem('theme');
28+
if (savedTheme) {
29+
setCurrentTheme(savedTheme as PaletteMode);
30+
} else {
31+
setCurrentTheme(prefersDarkMode ? 'dark' : 'light');
32+
}
33+
}, [prefersDarkMode]);
34+
35+
const toggleTheme = () => {
36+
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
37+
setCurrentTheme(newTheme);
38+
localStorage.setItem('theme', newTheme);
39+
};
40+
41+
const theme = useMemo(
42+
() => createTheme(getTheme(currentTheme)),
43+
[currentTheme]
44+
);
45+
46+
return (
47+
<ThemeContext.Provider value={{ currentTheme, toggleTheme }}>
48+
<ThemeProvider theme={theme}>
49+
<CssBaseline />
50+
{children}
51+
</ThemeProvider>
52+
</ThemeContext.Provider>
53+
);
54+
};

‎apps/next-client/src/assets/styles/palette.ts renamed to ‎apps/next-client/src/theme/palette.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
/**
2-
* Dark mode with MUI.
3-
* https://mui.com/material-ui/customization/dark-mode/
2+
* Check out these resources for building theme -
3+
*
4+
* https://zenoo.github.io/mui-theme-creator/
5+
* https://m2.material.io/inline-tools/color/
46
*/
57

68
export const LightThemePalette = {

‎apps/next-client/src/assets/styles/theme.ts renamed to ‎apps/next-client/src/theme/theme.ts

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
2+
23
import { Roboto } from 'next/font/google';
3-
import { PaletteMode } from '@mui/material';
4-
import { createTheme } from '@mui/material/styles';
4+
import { PaletteMode } from '@mui/material/styles';
55
import { LightThemePalette, DarkThemePalette } from './palette';
66

77
const roboto = Roboto({
@@ -15,27 +15,25 @@ const roboto = Roboto({
1515
display: 'swap'
1616
});
1717

18-
const AppTheme = (mode: PaletteMode) => ({
18+
export const getTheme = (mode: PaletteMode) => ({
1919
palette: {
2020
mode,
2121
common: {
2222
black: '#000',
23-
white: '#fff'
23+
white: '#fff',
2424
},
25-
...(mode === 'light' ? LightThemePalette : DarkThemePalette)
25+
...(mode === 'light' ? LightThemePalette : DarkThemePalette),
2626
},
2727
breakpoints: {
2828
values: {
2929
xs: 0,
3030
sm: 350,
3131
md: 768,
3232
lg: 1024,
33-
xl: 1400
34-
}
33+
xl: 1400,
34+
},
35+
},
36+
typography: {
37+
fontFamily: roboto.style.fontFamily,
3538
},
36-
typography: { fontFamily: roboto.style.fontFamily }
3739
});
38-
39-
const theme = createTheme(AppTheme('dark'));
40-
41-
export default theme;

‎apps/next-client/src/types/common.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export interface LayoutProps {
2+
children: React.ReactNode;
3+
}

‎apps/next-client/src/types/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './common';

0 commit comments

Comments
 (0)