create-next-mui 0.0.2 → 0.0.4

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.
Files changed (47) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +108 -0
  3. package/next-mui-template-js/.vscode/settings.json +7 -0
  4. package/next-mui-template-js/.vscode/typescript.code-snippets +10 -0
  5. package/next-mui-template-js/esling.config.mjs +90 -0
  6. package/next-mui-template-js/next.config.ts +7 -0
  7. package/next-mui-template-js/package-lock.json +6689 -0
  8. package/next-mui-template-js/package.json +31 -0
  9. package/next-mui-template-js/public/next.svg +1 -0
  10. package/next-mui-template-js/public/vercel.svg +1 -0
  11. package/next-mui-template-js/src/app/favicon.ico +0 -0
  12. package/next-mui-template-js/src/app/globals.css +28 -0
  13. package/next-mui-template-js/src/app/layout.tsx +42 -0
  14. package/next-mui-template-js/src/app/page.tsx +7 -0
  15. package/next-mui-template-js/src/lib/router-link/index.ts +5 -0
  16. package/next-mui-template-js/src/sections/home/view.tsx +49 -0
  17. package/next-mui-template-js/src/theme/core/colors.json +46 -0
  18. package/next-mui-template-js/src/theme/core/components/button.ts +35 -0
  19. package/next-mui-template-js/src/theme/core/components/card.ts +17 -0
  20. package/next-mui-template-js/src/theme/core/components/index.ts +9 -0
  21. package/next-mui-template-js/src/theme/core/palette.ts +34 -0
  22. package/next-mui-template-js/src/theme/core/typography.ts +51 -0
  23. package/next-mui-template-js/src/theme/create-theme.ts +24 -0
  24. package/next-mui-template-js/src/theme/theme-provider.tsx +19 -0
  25. package/next-mui-template-js/tsconfig.json +34 -0
  26. package/next-mui-template-ts/.vscode/settings.json +7 -7
  27. package/next-mui-template-ts/.vscode/typescript.code-snippets +10 -10
  28. package/next-mui-template-ts/esling.config.mjs +90 -97
  29. package/next-mui-template-ts/next.config.ts +7 -7
  30. package/next-mui-template-ts/package-lock.json +6689 -6689
  31. package/next-mui-template-ts/package.json +31 -31
  32. package/next-mui-template-ts/src/app/globals.css +28 -28
  33. package/next-mui-template-ts/src/app/layout.tsx +42 -42
  34. package/next-mui-template-ts/src/app/page.tsx +7 -7
  35. package/next-mui-template-ts/src/lib/router-link/index.ts +5 -5
  36. package/next-mui-template-ts/src/sections/home/view.tsx +49 -49
  37. package/next-mui-template-ts/src/theme/core/colors.json +46 -46
  38. package/next-mui-template-ts/src/theme/core/components/button.ts +35 -35
  39. package/next-mui-template-ts/src/theme/core/components/card.ts +17 -17
  40. package/next-mui-template-ts/src/theme/core/components/index.ts +9 -9
  41. package/next-mui-template-ts/src/theme/core/palette.ts +34 -34
  42. package/next-mui-template-ts/src/theme/core/typography.ts +51 -51
  43. package/next-mui-template-ts/src/theme/create-theme.ts +24 -24
  44. package/next-mui-template-ts/src/theme/theme-provider.tsx +19 -19
  45. package/next-mui-template-ts/tsconfig.json +34 -34
  46. package/package.json +1 -1
  47. package/src/index.js +88 -88
package/next-mui-template-js/package.json ADDED
@@ -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
+ }
package/next-mui-template-js/public/next.svg ADDED
@@ -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>
package/next-mui-template-js/public/vercel.svg ADDED
@@ -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>
package/next-mui-template-js/src/app/globals.css ADDED
@@ -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
+ }
package/next-mui-template-js/src/app/layout.tsx ADDED
@@ -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
+ }
package/next-mui-template-js/src/app/page.tsx ADDED
@@ -0,0 +1,7 @@
1
+ import { HomeView } from "@/sections/home/view";
2
+
3
+ // ---------------------------------------------------------------
4
+
5
+ export default function Page() {
6
+ return <HomeView />;
7
+ }
package/next-mui-template-js/src/lib/router-link/index.ts ADDED
@@ -0,0 +1,5 @@
1
+ "use client";
2
+
3
+ import Link, { type LinkProps } from "next/link";
4
+
5
+ export { Link as RouterLink, LinkProps as RouterLinkProps };
package/next-mui-template-js/src/sections/home/view.tsx ADDED
@@ -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
+ }
package/next-mui-template-js/src/theme/core/colors.json ADDED
@@ -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
+ }
package/next-mui-template-js/src/theme/core/components/button.ts ADDED
@@ -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 };
package/next-mui-template-js/src/theme/core/components/card.ts ADDED
@@ -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 };
package/next-mui-template-js/src/theme/core/components/index.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { MuiCard } from "./card";
2
+ import { MuiButton } from "./button";
3
+
4
+ // ---------------------------------------------------------------
5
+
6
+ export const components = {
7
+ MuiCard,
8
+ MuiButton,
9
+ };
package/next-mui-template-js/src/theme/core/palette.ts ADDED
@@ -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
+ }
package/next-mui-template-js/src/theme/core/typography.ts ADDED
@@ -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
+ };
package/next-mui-template-js/src/theme/create-theme.ts ADDED
@@ -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
+ });
package/next-mui-template-js/src/theme/theme-provider.tsx ADDED
@@ -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
+ }
package/next-mui-template-js/tsconfig.json ADDED
@@ -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/next-mui-template-ts/.vscode/settings.json CHANGED
@@ -1,7 +1,7 @@
1
- {
2
- "editor.quickSuggestions": {
3
- "other": false,
4
- "comments": false,
5
- "strings": false
6
- }
7
- }
1
+ {
2
+ "editor.quickSuggestions": {
3
+ "other": false,
4
+ "comments": false,
5
+ "strings": false
6
+ }
7
+ }
package/next-mui-template-ts/.vscode/typescript.code-snippets CHANGED
@@ -1,10 +1,10 @@
1
- {
2
- "divider": {
3
- "scope": "typescript,typescriptreact",
4
- "prefix": "---",
5
- "body": [
6
- "// ---------------------------------------------------------------",
7
- ],
8
- "description": "insert a divider",
9
- },
10
- }
1
+ {
2
+ "divider": {
3
+ "scope": "typescript,typescriptreact",
4
+ "prefix": "---",
5
+ "body": [
6
+ "// ---------------------------------------------------------------",
7
+ ],
8
+ "description": "insert a divider",
9
+ },
10
+ }