create-next-mui 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/next-mui-template-ts/.vscode/settings.json +7 -0
- package/next-mui-template-ts/.vscode/typescript.code-snippets +10 -0
- package/next-mui-template-ts/esling.config.mjs +97 -0
- package/next-mui-template-ts/next.config.ts +7 -0
- package/next-mui-template-ts/package-lock.json +6689 -0
- package/next-mui-template-ts/package.json +31 -0
- package/next-mui-template-ts/public/next.svg +1 -0
- package/next-mui-template-ts/public/vercel.svg +1 -0
- package/next-mui-template-ts/src/app/favicon.ico +0 -0
- package/next-mui-template-ts/src/app/globals.css +28 -0
- package/next-mui-template-ts/src/app/layout.tsx +42 -0
- package/next-mui-template-ts/src/app/page.tsx +7 -0
- package/next-mui-template-ts/src/lib/router-link/index.ts +5 -0
- package/next-mui-template-ts/src/sections/home/view.tsx +49 -0
- package/next-mui-template-ts/src/theme/core/colors.json +46 -0
- package/next-mui-template-ts/src/theme/core/components/button.ts +35 -0
- package/next-mui-template-ts/src/theme/core/components/card.ts +17 -0
- package/next-mui-template-ts/src/theme/core/components/index.ts +9 -0
- package/next-mui-template-ts/src/theme/core/palette.ts +34 -0
- package/next-mui-template-ts/src/theme/core/typography.ts +51 -0
- package/next-mui-template-ts/src/theme/create-theme.ts +24 -0
- package/next-mui-template-ts/src/theme/theme-provider.tsx +19 -0
- package/next-mui-template-ts/tsconfig.json +34 -0
- package/package.json +38 -0
- package/src/index.js +88 -0
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "next-mui-template",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"private": true,
|
|
5
|
+
"scripts": {
|
|
6
|
+
"dev": "next dev",
|
|
7
|
+
"build": "next build",
|
|
8
|
+
"start": "next start",
|
|
9
|
+
"lint": "eslint ./src --fix "
|
|
10
|
+
},
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"@emotion/react": "^11.14.0",
|
|
13
|
+
"@emotion/styled": "^11.14.1",
|
|
14
|
+
"@mui/icons-material": "^9.0.0",
|
|
15
|
+
"@mui/material": "^9.0.0",
|
|
16
|
+
"@mui/material-nextjs": "^9.0.1",
|
|
17
|
+
"next": "16.2.4",
|
|
18
|
+
"react": "19.2.4",
|
|
19
|
+
"react-dom": "19.2.4"
|
|
20
|
+
},
|
|
21
|
+
"devDependencies": {
|
|
22
|
+
"@types/node": "^20",
|
|
23
|
+
"@types/react": "^19",
|
|
24
|
+
"@types/react-dom": "^19",
|
|
25
|
+
"eslint": "^9",
|
|
26
|
+
"eslint-config-next": "16.2.4",
|
|
27
|
+
"eslint-plugin-perfectionist": "^4.15.1",
|
|
28
|
+
"eslint-plugin-unused-imports": "^4.3.0",
|
|
29
|
+
"typescript": "^5"
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
|
Binary file
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
html {
|
|
2
|
+
height: 100%;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
html,
|
|
6
|
+
body {
|
|
7
|
+
max-width: 100vw;
|
|
8
|
+
overflow-x: hidden;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
body {
|
|
12
|
+
min-height: 100%;
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-direction: column;
|
|
15
|
+
-webkit-font-smoothing: antialiased;
|
|
16
|
+
-moz-osx-font-smoothing: grayscale;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
* {
|
|
20
|
+
margin: 0;
|
|
21
|
+
padding: 0;
|
|
22
|
+
box-sizing: border-box;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
a {
|
|
26
|
+
color: inherit;
|
|
27
|
+
text-decoration: none;
|
|
28
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import "./globals.css";
|
|
2
|
+
|
|
3
|
+
import { Geist, Geist_Mono } from "next/font/google";
|
|
4
|
+
|
|
5
|
+
import type { Metadata } from "next";
|
|
6
|
+
|
|
7
|
+
import { ThemeProvider } from "@/theme/theme-provider";
|
|
8
|
+
|
|
9
|
+
// ---------------------------------------------------------------
|
|
10
|
+
|
|
11
|
+
const geistSans = Geist({
|
|
12
|
+
variable: "--font-geist-sans",
|
|
13
|
+
subsets: ["latin"],
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
const geistMono = Geist_Mono({
|
|
17
|
+
variable: "--font-geist-mono",
|
|
18
|
+
subsets: ["latin"],
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
export const metadata: Metadata = {
|
|
22
|
+
title: "create-next-mui",
|
|
23
|
+
description: "create your nextjs project with mui setup",
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export default function RootLayout({
|
|
27
|
+
children,
|
|
28
|
+
}: Readonly<{
|
|
29
|
+
children: React.ReactNode;
|
|
30
|
+
}>) {
|
|
31
|
+
return (
|
|
32
|
+
<html
|
|
33
|
+
lang="en"
|
|
34
|
+
suppressHydrationWarning
|
|
35
|
+
className={`${geistSans.variable} ${geistMono.variable}`}
|
|
36
|
+
>
|
|
37
|
+
<body>
|
|
38
|
+
<ThemeProvider> {children} </ThemeProvider>
|
|
39
|
+
</body>
|
|
40
|
+
</html>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import Box from "@mui/material/Box";
|
|
4
|
+
import Stack from "@mui/material/Stack";
|
|
5
|
+
import Button from "@mui/material/Button";
|
|
6
|
+
import Container from "@mui/material/Container";
|
|
7
|
+
import Typography from "@mui/material/Typography";
|
|
8
|
+
import { RouterLink } from "@/lib/router-link";
|
|
9
|
+
|
|
10
|
+
// ---------------------------------------------------------------
|
|
11
|
+
|
|
12
|
+
export function HomeView() {
|
|
13
|
+
return (
|
|
14
|
+
<Container maxWidth="md">
|
|
15
|
+
<Box
|
|
16
|
+
sx={{
|
|
17
|
+
minHeight: "100vh",
|
|
18
|
+
display: "flex",
|
|
19
|
+
alignItems: "center",
|
|
20
|
+
justifyContent: "center",
|
|
21
|
+
}}
|
|
22
|
+
>
|
|
23
|
+
<Stack spacing={3} sx={{ alignItems: "center", textAlign: "center" }}>
|
|
24
|
+
<Typography variant="h2" component="h1">
|
|
25
|
+
Workspace Scaffolded Successfully!
|
|
26
|
+
</Typography>
|
|
27
|
+
<Typography variant="h6" color="text.secondary">
|
|
28
|
+
Next.js App Router + Modular MUI Theming System + Perfectionist
|
|
29
|
+
Linting Rules are locked and loaded.
|
|
30
|
+
</Typography>
|
|
31
|
+
<Stack direction="row" spacing={2}>
|
|
32
|
+
<Button variant="contained" color="primary" size="large">
|
|
33
|
+
Explore Theme Configuration
|
|
34
|
+
</Button>
|
|
35
|
+
<Button
|
|
36
|
+
size="large"
|
|
37
|
+
color="secondary"
|
|
38
|
+
variant="outlined"
|
|
39
|
+
LinkComponent={RouterLink}
|
|
40
|
+
href="/"
|
|
41
|
+
>
|
|
42
|
+
Read Documentation
|
|
43
|
+
</Button>
|
|
44
|
+
</Stack>
|
|
45
|
+
</Stack>
|
|
46
|
+
</Box>
|
|
47
|
+
</Container>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
{
|
|
2
|
+
"error": {
|
|
3
|
+
"light": "#FF6183",
|
|
4
|
+
"main": "#DC103C",
|
|
5
|
+
"dark": "#AD1032",
|
|
6
|
+
"contrastText": "#FFFFFF"
|
|
7
|
+
},
|
|
8
|
+
"info": {
|
|
9
|
+
"light": "#4FB0E1",
|
|
10
|
+
"main": "#008BD1",
|
|
11
|
+
"dark": "#005D8B",
|
|
12
|
+
"contrastText": "#FFFFFF"
|
|
13
|
+
},
|
|
14
|
+
"success": {
|
|
15
|
+
"light": "#34FA91",
|
|
16
|
+
"main": "#0CC663",
|
|
17
|
+
"dark": "#0A974C",
|
|
18
|
+
"contrastText": "#FFFFFF"
|
|
19
|
+
},
|
|
20
|
+
"warning": {
|
|
21
|
+
"light": "#E4A942",
|
|
22
|
+
"main": "#E79200",
|
|
23
|
+
"dark": "#AC7312",
|
|
24
|
+
"contrastText": "#FFFFFF"
|
|
25
|
+
},
|
|
26
|
+
"purple": {
|
|
27
|
+
"light": "#A463E5",
|
|
28
|
+
"main": "#9437F1",
|
|
29
|
+
"dark": "#6C0CCB",
|
|
30
|
+
"contrastText": "#FFFFFF"
|
|
31
|
+
},
|
|
32
|
+
|
|
33
|
+
"grey": {
|
|
34
|
+
"50": "#FFFFFF",
|
|
35
|
+
"100": "#FFF5F5",
|
|
36
|
+
"200": "#F4F4F4",
|
|
37
|
+
"300": "#F2F2F2",
|
|
38
|
+
"400": "#D8D3D3",
|
|
39
|
+
"500": "#D2D2D2",
|
|
40
|
+
"600": "#C2C2C2",
|
|
41
|
+
"700": "#959595",
|
|
42
|
+
"800": "#3E3E3E",
|
|
43
|
+
"900": "#141615",
|
|
44
|
+
"950": "#000000"
|
|
45
|
+
}
|
|
46
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { Theme, Components } from "@mui/material";
|
|
2
|
+
|
|
3
|
+
import type {} from "@mui/material/themeCssVarsAugmentation";
|
|
4
|
+
|
|
5
|
+
// ---------------------------------------------------------------
|
|
6
|
+
|
|
7
|
+
const MuiButton: Components<Theme>["MuiButton"] = {
|
|
8
|
+
styleOverrides: {
|
|
9
|
+
root: ({ theme }) => ({
|
|
10
|
+
textTransform: "unset",
|
|
11
|
+
borderRadius: theme.spacing(1.5),
|
|
12
|
+
color: theme.vars.palette.common.black,
|
|
13
|
+
variants: [
|
|
14
|
+
{
|
|
15
|
+
props: { variant: "contained" },
|
|
16
|
+
style: {
|
|
17
|
+
borderRadius: theme.spacing(1.5),
|
|
18
|
+
color: theme.vars.palette.common.white,
|
|
19
|
+
backgroundColor: theme.vars.palette.grey[900],
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
props: { variant: "outlined" },
|
|
24
|
+
style: {
|
|
25
|
+
borderRadius: theme.spacing(1.5),
|
|
26
|
+
color: theme.vars.palette.common.black,
|
|
27
|
+
borderColor: theme.vars.palette.common.black,
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
],
|
|
31
|
+
}),
|
|
32
|
+
},
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
export { MuiButton };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { Theme, Components } from "@mui/material";
|
|
2
|
+
|
|
3
|
+
import type {} from "@mui/material/themeCssVarsAugmentation";
|
|
4
|
+
|
|
5
|
+
// ---------------------------------------------------------------
|
|
6
|
+
|
|
7
|
+
const MuiCard: Components<Theme>["MuiCard"] = {
|
|
8
|
+
styleOverrides: {
|
|
9
|
+
root: ({ theme }) => ({
|
|
10
|
+
borderRadius: theme.spacing(2.5),
|
|
11
|
+
boxShadow: `-4px -4px 24px 4px rgba(20, 22, 21, 0.04),
|
|
12
|
+
4px 12px 12px 4px rgba(20, 22, 21, 0.04)`,
|
|
13
|
+
}),
|
|
14
|
+
},
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export { MuiCard };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import COLORS from "./colors.json";
|
|
2
|
+
|
|
3
|
+
// ---------------------------------------------------------------
|
|
4
|
+
|
|
5
|
+
const GREY = COLORS.grey;
|
|
6
|
+
|
|
7
|
+
const INFO = COLORS.info;
|
|
8
|
+
const ERROR = COLORS.error;
|
|
9
|
+
const SUCCESS = COLORS.success;
|
|
10
|
+
const WARNING = COLORS.warning;
|
|
11
|
+
|
|
12
|
+
const PURPLE = COLORS.purple;
|
|
13
|
+
|
|
14
|
+
// ---------------------------------------------------------------
|
|
15
|
+
|
|
16
|
+
export const palette = {
|
|
17
|
+
grey: GREY,
|
|
18
|
+
info: INFO,
|
|
19
|
+
error: ERROR,
|
|
20
|
+
purple: PURPLE,
|
|
21
|
+
success: SUCCESS,
|
|
22
|
+
warning: WARNING,
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
// ---------------------------------------------------------------
|
|
26
|
+
|
|
27
|
+
declare module "@mui/material/styles" {
|
|
28
|
+
interface Palette {
|
|
29
|
+
purple: Palette["primary"];
|
|
30
|
+
}
|
|
31
|
+
interface PaletteOptions {
|
|
32
|
+
purple?: PaletteOptions["primary"];
|
|
33
|
+
}
|
|
34
|
+
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
// ---------------------------------------------------------------
|
|
2
|
+
|
|
3
|
+
export const typography = {
|
|
4
|
+
h1: {
|
|
5
|
+
fontSize: "56px",
|
|
6
|
+
lineHeight: "64px",
|
|
7
|
+
fontWeight: 700,
|
|
8
|
+
},
|
|
9
|
+
h2: {
|
|
10
|
+
fontSize: "44px",
|
|
11
|
+
lineHeight: "56px",
|
|
12
|
+
fontWeight: 700,
|
|
13
|
+
},
|
|
14
|
+
h3: {
|
|
15
|
+
fontSize: "36px",
|
|
16
|
+
lineHeight: "44px",
|
|
17
|
+
fontWeight: 700,
|
|
18
|
+
},
|
|
19
|
+
h4: {
|
|
20
|
+
fontSize: "32px",
|
|
21
|
+
lineHeight: "40px",
|
|
22
|
+
fontWeight: 600,
|
|
23
|
+
},
|
|
24
|
+
h5: {
|
|
25
|
+
fontSize: "20px",
|
|
26
|
+
lineHeight: "28px",
|
|
27
|
+
fontWeight: 600,
|
|
28
|
+
},
|
|
29
|
+
h6: {
|
|
30
|
+
fontSize: "16px",
|
|
31
|
+
lineHeight: "20px",
|
|
32
|
+
fontWeight: 600,
|
|
33
|
+
},
|
|
34
|
+
body1: {
|
|
35
|
+
fontSize: "16px",
|
|
36
|
+
lineHeight: "20px",
|
|
37
|
+
},
|
|
38
|
+
body2: {
|
|
39
|
+
fontSize: "14px",
|
|
40
|
+
lineHeight: "18px",
|
|
41
|
+
},
|
|
42
|
+
caption: {
|
|
43
|
+
fontSize: "12px",
|
|
44
|
+
lineHeight: "16px",
|
|
45
|
+
fontWeight: 500,
|
|
46
|
+
},
|
|
47
|
+
button: {
|
|
48
|
+
fontWeight: 500,
|
|
49
|
+
lineHeight: "16px",
|
|
50
|
+
},
|
|
51
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { createTheme } from "@mui/material";
|
|
2
|
+
|
|
3
|
+
import { palette } from "./core/palette";
|
|
4
|
+
import { typography } from "./core/typography";
|
|
5
|
+
import { components } from "./core/components";
|
|
6
|
+
|
|
7
|
+
// ---------------------------------------------------------------
|
|
8
|
+
|
|
9
|
+
const defaultFont = "var(--font-geist-sans), Arial, sans-serif";
|
|
10
|
+
|
|
11
|
+
export const theme = createTheme({
|
|
12
|
+
cssVariables: true,
|
|
13
|
+
|
|
14
|
+
palette: { mode: "light", ...palette },
|
|
15
|
+
|
|
16
|
+
typography: {
|
|
17
|
+
fontFamily: defaultFont,
|
|
18
|
+
...typography,
|
|
19
|
+
},
|
|
20
|
+
|
|
21
|
+
spacing: "8px",
|
|
22
|
+
|
|
23
|
+
components,
|
|
24
|
+
});
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { AppRouterCacheProvider } from "@mui/material-nextjs/v16-appRouter";
|
|
4
|
+
import { CssBaseline, ThemeProvider as MuiThemeProvider } from "@mui/material";
|
|
5
|
+
|
|
6
|
+
import { theme } from "./create-theme";
|
|
7
|
+
|
|
8
|
+
// ---------------------------------------------------------------
|
|
9
|
+
|
|
10
|
+
export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
|
11
|
+
return (
|
|
12
|
+
<AppRouterCacheProvider>
|
|
13
|
+
<MuiThemeProvider theme={theme}>
|
|
14
|
+
<CssBaseline />
|
|
15
|
+
{children}
|
|
16
|
+
</MuiThemeProvider>
|
|
17
|
+
</AppRouterCacheProvider>
|
|
18
|
+
);
|
|
19
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2017",
|
|
4
|
+
"lib": ["dom", "dom.iterable", "esnext"],
|
|
5
|
+
"allowJs": true,
|
|
6
|
+
"skipLibCheck": true,
|
|
7
|
+
"strict": true,
|
|
8
|
+
"noEmit": true,
|
|
9
|
+
"esModuleInterop": true,
|
|
10
|
+
"module": "esnext",
|
|
11
|
+
"moduleResolution": "bundler",
|
|
12
|
+
"resolveJsonModule": true,
|
|
13
|
+
"isolatedModules": true,
|
|
14
|
+
"jsx": "react-jsx",
|
|
15
|
+
"incremental": true,
|
|
16
|
+
"plugins": [
|
|
17
|
+
{
|
|
18
|
+
"name": "next"
|
|
19
|
+
}
|
|
20
|
+
],
|
|
21
|
+
"paths": {
|
|
22
|
+
"@/*": ["./src/*"]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
"include": [
|
|
26
|
+
"next-env.d.ts",
|
|
27
|
+
"**/*.ts",
|
|
28
|
+
"**/*.tsx",
|
|
29
|
+
".next/types/**/*.ts",
|
|
30
|
+
".next/dev/types/**/*.ts",
|
|
31
|
+
"**/*.mts"
|
|
32
|
+
],
|
|
33
|
+
"exclude": ["node_modules"]
|
|
34
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "create-next-mui",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "spin up your nextjs project with mui setup",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"nextjs",
|
|
7
|
+
"mui",
|
|
8
|
+
"create-next-mui"
|
|
9
|
+
],
|
|
10
|
+
"homepage": "https://github.com/thatonevikash/create-next-mui#readme",
|
|
11
|
+
"bugs": {
|
|
12
|
+
"url": "https://github.com/thatonevikash/create-next-mui/issues"
|
|
13
|
+
},
|
|
14
|
+
"repository": {
|
|
15
|
+
"type": "git",
|
|
16
|
+
"url": "git+https://github.com/thatonevikash/create-next-mui.git"
|
|
17
|
+
},
|
|
18
|
+
"license": "MIT",
|
|
19
|
+
"author": "thatonevikash",
|
|
20
|
+
"type": "module",
|
|
21
|
+
"bin": {
|
|
22
|
+
"create-next-mui": "./src/index.js"
|
|
23
|
+
},
|
|
24
|
+
"files": [
|
|
25
|
+
"src",
|
|
26
|
+
"next-mui-template-ts",
|
|
27
|
+
"next-mui-template-js"
|
|
28
|
+
],
|
|
29
|
+
"main": "index.js",
|
|
30
|
+
"scripts": {
|
|
31
|
+
"start": "node ./src/index.js"
|
|
32
|
+
},
|
|
33
|
+
"dependencies": {
|
|
34
|
+
"@clack/prompts": "^1.5.0",
|
|
35
|
+
"degit": "^3.3.2",
|
|
36
|
+
"picocolors": "^1.1.1"
|
|
37
|
+
}
|
|
38
|
+
}
|
package/src/index.js
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
import * as p from "@clack/prompts";
|
|
4
|
+
import color from "picocolors";
|
|
5
|
+
import fs from "node:fs/promises";
|
|
6
|
+
import path from "node:path";
|
|
7
|
+
import { fileURLToPath } from "node:url";
|
|
8
|
+
|
|
9
|
+
// Resolve the directory where this CLI package actually lives on the user's system
|
|
10
|
+
const __filename = fileURLToPath(import.meta.url);
|
|
11
|
+
const __dirname = path.dirname(__filename);
|
|
12
|
+
|
|
13
|
+
async function main() {
|
|
14
|
+
console.clear();
|
|
15
|
+
p.intro(color.bgBlue(color.white(" create-next-mui ")));
|
|
16
|
+
|
|
17
|
+
const project = await p.group(
|
|
18
|
+
{
|
|
19
|
+
name: () =>
|
|
20
|
+
p.text({
|
|
21
|
+
message: "What is your project name?",
|
|
22
|
+
placeholder: "my-next-mui-app",
|
|
23
|
+
validate(value) {
|
|
24
|
+
if (value.length === 0) return "Project name is required!";
|
|
25
|
+
if (value.match(/[^a-zA-Z0-9-_]/g))
|
|
26
|
+
return "Keep it URL safe (no spaces or special chars)";
|
|
27
|
+
},
|
|
28
|
+
}),
|
|
29
|
+
language: () =>
|
|
30
|
+
p.select({
|
|
31
|
+
message: "Choose your language flavor:",
|
|
32
|
+
options: [
|
|
33
|
+
{
|
|
34
|
+
value: "ts",
|
|
35
|
+
label: "TypeScript (Recommended)",
|
|
36
|
+
hint: "Strict typings, clean architecture",
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
value: "js",
|
|
40
|
+
label: "JavaScript",
|
|
41
|
+
hint: "Vanilla JS configuration",
|
|
42
|
+
},
|
|
43
|
+
],
|
|
44
|
+
}),
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
onCancel: () => {
|
|
48
|
+
p.cancel("Scaffolding cancelled. See you next time!");
|
|
49
|
+
process.exit(0);
|
|
50
|
+
},
|
|
51
|
+
},
|
|
52
|
+
);
|
|
53
|
+
|
|
54
|
+
// Define local source paths (inside this CLI package folder)
|
|
55
|
+
const templateFolderName =
|
|
56
|
+
project.language === "ts" ? "next-mui-template-ts" : "next-mui-template-js";
|
|
57
|
+
const sourceTemplateDir = path.resolve(__dirname, "..", templateFolderName);
|
|
58
|
+
|
|
59
|
+
// Define destination paths (where the user is running the command)
|
|
60
|
+
const targetProjectDir = path.resolve(process.cwd(), project.name);
|
|
61
|
+
|
|
62
|
+
const s = p.spinner();
|
|
63
|
+
s.start("Unboxing your Next.js + MUI foundation locally...");
|
|
64
|
+
|
|
65
|
+
try {
|
|
66
|
+
// Native high-speed recursive copy
|
|
67
|
+
await fs.cp(sourceTemplateDir, targetProjectDir, {
|
|
68
|
+
recursive: true,
|
|
69
|
+
filter: (src) => !src.includes("node_modules") && !src.includes(".next"),
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
s.stop(color.green("Workspace scaffolded successfully!"));
|
|
73
|
+
} catch (error) {
|
|
74
|
+
s.stop(color.red("Failed to build workspace structure."));
|
|
75
|
+
p.note(color.yellow(`Error details: ${error.message}`), "Troubleshooting:");
|
|
76
|
+
process.exit(1);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// Clear instructions for the developer
|
|
80
|
+
p.note(
|
|
81
|
+
`${color.cyan(`cd ${project.name}`)}\n${color.cyan("npm install")}\n${color.cyan("npm run dev")}`,
|
|
82
|
+
"Next Steps to Get Started:",
|
|
83
|
+
);
|
|
84
|
+
|
|
85
|
+
p.outro(`✨ Code cleanly, sort perfectly. Built with create-next-mui!`);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
main().catch(console.error);
|