create-next-mui 0.1.4 → 0.2.0

package/next-mui-features/zustand/ts/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "create-next-mui",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint ./src",
+    "lint:fix": "eslint ./src --fix"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/material": "^9.0.0",
+    "@mui/material-nextjs": "^9.0.1",
+    "next": "16.2.4",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "zustand": "^5.0.14"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.4",
+    "eslint-plugin-perfectionist": "^4.15.1",
+    "eslint-plugin-unused-imports": "^4.3.0",
+    "typescript": "^5"
+  }
+}

package/next-mui-features/zustand/ts/public/mui.svg

@@ -0,0 +1,11 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.16602 20.8334L29.166 37.5V120.833L4.16602 104.167V20.8334Z" fill="#29B6F6"/>
+<path d="M195.834 83.3333L170.834 100V154.167L195.834 137.5V83.3333Z" fill="#0288D1"/>
+<path d="M195.834 25L170.834 41.6667V70.8333L195.834 54.1667V25Z" fill="#0288D1"/>
+<path d="M145.834 20.8334L120.834 37.5V120.833L145.834 104.167V20.8334Z" fill="#0288D1"/>
+<path d="M4.16602 50L74.9993 95.8334V66.6667L4.16602 20.8334V50Z" fill="#29B6F6"/>
+<path d="M145.833 50L75 95.8334V66.6667L145.833 20.8334V50Z" fill="#0288D1"/>
+<path d="M145.833 108.333L75 154.167V125L145.833 79.1666V108.333Z" fill="#0288D1"/>
+<path d="M195.833 141.667L125 187.5V158.333L195.833 112.5V141.667Z" fill="#0288D1"/>
+<path d="M125 157.354L75 125V154.167L125 186.521V157.354Z" fill="#29B6F6"/>
+</svg>

package/next-mui-features/zustand/ts/public/next.svg

@@ -0,0 +1,23 @@
+<svg width="212" height="212" viewBox="0 0 212 212" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M106 193.158C154.137 193.158 193.159 154.136 193.159 106C193.159 57.8637 154.137 18.8415 106 18.8415C57.864 18.8415 18.8418 57.8637 18.8418 106C18.8418 154.136 57.864 193.158 106 193.158Z" fill="url(#paint0_linear_694_4)"/>
+<path d="M83.9824 70.7859H70.6309V141.435H83.9824V70.7859Z" fill="white"/>
+<path d="M141.281 70.4767H128.238V134.916H141.281V70.4767Z" fill="url(#paint1_linear_694_4)"/>
+<path d="M162.449 168.248L150.908 172.647L70.6309 70.7859H86.1599L162.449 168.248Z" fill="url(#paint2_linear_694_4)"/>
+<defs>
+<linearGradient id="paint0_linear_694_4" x1="106" y1="193.158" x2="106" y2="18.8415" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0A070A"/>
+<stop offset="0.465" stop-color="#2B2B2B"/>
+<stop offset="1" stop-color="#4B4B4B"/>
+</linearGradient>
+<linearGradient id="paint1_linear_694_4" x1="134.762" y1="145.843" x2="134.762" y2="81.4036" gradientUnits="userSpaceOnUse">
+<stop offset="0.377" stop-color="white" stop-opacity="0"/>
+<stop offset="0.666" stop-color="white" stop-opacity="0.3"/>
+<stop offset="0.988" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint2_linear_694_4" x1="97.6167" y1="94.7065" x2="161.919" y2="179.003" gradientUnits="userSpaceOnUse">
+<stop offset="0.296" stop-color="white"/>
+<stop offset="0.521" stop-color="white" stop-opacity="0.5"/>
+<stop offset="0.838" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

package/next-mui-features/zustand/ts/public/vercel.svg

@@ -0,0 +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-features/zustand/ts/src/app/globals.css

@@ -0,0 +1,28 @@
+html {
+  height: 100%;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}

package/next-mui-features/zustand/ts/src/app/layout.tsx

@@ -0,0 +1,42 @@
+import "./globals.css";
+
+import { Geist, Geist_Mono } from "next/font/google";
+
+import type { Metadata } from "next";
+
+import { ThemeProvider } from "@/theme/theme-provider";
+
+// ---------------------------------------------------------------
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "create-next-mui",
+  description: "The fastest way to scaffold Nextjs + MUI",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      suppressHydrationWarning
+      className={`${geistSans.variable} ${geistMono.variable}`}
+    >
+      <body>
+        <ThemeProvider> {children} </ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/next-mui-features/zustand/ts/src/app/page.tsx

@@ -0,0 +1,7 @@
+import { HomeView } from "@/sections/home/view";
+
+// ---------------------------------------------------------------
+
+export default function Page() {
+  return <HomeView />;
+}

package/next-mui-features/zustand/ts/src/config-global.ts

@@ -0,0 +1,7 @@
+interface GlobalConfig {
+  defaultMode: "light" | "dark";
+}
+
+export const CONFIG: GlobalConfig = {
+  defaultMode: "dark",
+};

package/next-mui-features/zustand/ts/src/lib/router-link/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+import Link, { type LinkProps } from "next/link";
+
+export { Link as RouterLink, LinkProps as RouterLinkProps };

package/next-mui-features/zustand/ts/src/sections/home/view.tsx

@@ -0,0 +1,218 @@
+"use client";
+
+import Image from "next/image";
+
+import Box from "@mui/material/Box";
+import Link from "@mui/material/Link";
+import Paper from "@mui/material/Paper";
+import Stack from "@mui/material/Stack";
+import Button from "@mui/material/Button";
+import SvgIcon from "@mui/material/SvgIcon";
+import Container from "@mui/material/Container";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
+import { alpha as hexAlpha } from "@mui/material/styles";
+
+import { RouterLink } from "@/lib/router-link";
+
+import { useCounterStore } from "@/stores/counter-store";
+
+// ---------------------------------------------------------------
+
+export function HomeView() {
+  const count = useCounterStore((state) => state.count);
+  const increment = useCounterStore((state) => state.increment);
+  const decrement = useCounterStore((state) => state.decrement);
+
+  return (
+    <Box>
+      <Container maxWidth="md">
+        <Stack
+          sx={{
+            minHeight: "100vh",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+          spacing={8}
+        >
+          <Stack direction="row" sx={{ alignItems: "center" }} spacing={8}>
+            <Box>
+              <Image
+                width={180}
+                height={180}
+                alt="nextjs"
+                src="/next.svg"
+                loading="eager"
+              />
+            </Box>
+
+            <Box>
+              <SvgIcon
+                fill="none"
+                stroke="#fff"
+                strokeWidth="2"
+                viewBox="0 0 24 24"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                sx={{ width: 80, height: 80 }}
+                className="lucide lucide-plus-icon lucide-plus"
+              >
+                <path d="M5 12h14" />
+                <path d="M12 5v14" />
+              </SvgIcon>
+            </Box>
+
+            <Box>
+              <Image
+                width={150}
+                height={150}
+                alt="nextjs"
+                src="/mui.svg"
+                loading="eager"
+              />
+            </Box>
+          </Stack>
+
+          <Stack spacing={4} sx={{ alignItems: "center" }}>
+            <Stack direction="row" spacing={2}>
+              <Button
+                variant="outlined"
+                LinkComponent={RouterLink}
+                href="https://github.com/thatonevikash/create-next-mui/"
+                target="_blank"
+                sx={(theme) => ({
+                  px: 1.5,
+                  borderRadius: 4,
+                  border: `1px solid ${theme.palette.divider}`,
+                })}
+              >
+                <SvgIcon
+                  fill="none"
+                  viewBox="0 0 200 200"
+                  sx={{ width: 44, height: 44 }}
+                >
+                  <path
+                    fill="white"
+                    d="M100 20C55.82 20 20 55.82 20 100C20 137.487 45.8133 168.853 80.6133 177.533C80.24 176.453 80 175.2 80 173.647V159.973C76.7533 159.973 71.3133 159.973 69.9467 159.973C64.4733 159.973 59.6067 157.62 57.2467 153.247C54.6267 148.387 54.1733 140.953 47.68 136.407C45.7533 134.893 47.22 133.167 49.44 133.4C53.54 134.56 56.94 137.373 60.14 141.547C63.3267 145.727 64.8267 146.673 70.78 146.673C73.6667 146.673 77.9867 146.507 82.0533 145.867C84.24 140.313 88.02 135.2 92.64 132.787C66 130.047 53.2867 116.793 53.2867 98.8C53.2867 91.0534 56.5867 83.56 62.1933 77.2467C60.3533 70.98 58.04 58.2 62.9 53.3333C74.8867 53.3333 82.1333 61.1067 83.8733 63.2067C89.8467 61.16 96.4067 60 103.3 60C110.207 60 116.793 61.16 122.78 63.22C124.5 61.1334 131.753 53.3333 143.767 53.3333C148.647 58.2067 146.307 71.04 144.447 77.2934C150.02 83.5934 153.3 91.0667 153.3 98.8C153.3 116.78 140.607 130.027 114.007 132.78C121.327 136.6 126.667 147.333 126.667 155.42V173.647C126.667 174.34 126.513 174.84 126.433 175.433C157.607 164.507 180 134.907 180 100C180 55.82 144.18 20 100 20Z"
+                  />
+                </SvgIcon>
+              </Button>
+              <Paper variant="outlined" sx={{ px: 4, py: 2, borderRadius: 4 }}>
+                <Typography
+                  variant="h5"
+                  sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1.2,
+                  }}
+                >
+                  <Box component="span" sx={{ color: "text.secondary" }}>
+                    npx
+                  </Box>
+
+                  <Box component="span">create-next-mui</Box>
+
+                  <Box
+                    sx={(theme) => ({
+                      p: 1,
+                      ml: 1,
+                      borderRadius: 2,
+                      cursor: "pointer",
+                      bgcolor: hexAlpha(theme.palette.grey["800"], 0.2),
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                    })}
+                  >
+                    <SvgIcon
+                      strokeWidth="2"
+                      stroke="#dadada"
+                      viewBox="0 0 24 24"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      sx={{ fill: "transparent" }}
+                      className="lucide lucide-copy-icon lucide-copy"
+                    >
+                      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+                      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+                    </SvgIcon>
+                  </Box>
+                </Typography>
+              </Paper>
+            </Stack>
+
+            <Typography variant="caption" sx={{ color: "text.disabled" }}>
+              The fastest way to scaffold&nbsp;
+              <Link
+                component={RouterLink}
+                href="https://nextjs.org/"
+                target="_blank"
+              >
+                Nextjs
+              </Link>
+              &nbsp;+&nbsp;
+              <Link
+                component={RouterLink}
+                href="https://mui.com/"
+                target="_blank"
+              >
+                MUI
+              </Link>
+            </Typography>
+
+            <Stack direction="row" sx={{ mt: 4, alignItems: "center", gap: 2 }}>
+              <IconButton
+                disableTouchRipple
+                onClick={decrement}
+                sx={{ borderRadius: 1 }}
+              >
+                <SvgIcon
+                  fill="none"
+                  stroke="#fff"
+                  strokeWidth="2"
+                  viewBox="0 0 24 24"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  sx={{ width: 16, height: 16 }}
+                  className="lucide lucide-plus-icon lucide-plus"
+                >
+                  <path d="M5 12h14" />
+                  {/* <path d="M12 5v14" /> */}
+                </SvgIcon>
+              </IconButton>
+              <Box
+                sx={(theme) => ({
+                  px: 2,
+                  py: 0.5,
+                  borderRadius: 1,
+                  border: `1px solid ${theme.palette.divider}`,
+                })}
+              >
+                {count}
+              </Box>
+              <IconButton
+                disableTouchRipple
+                onClick={increment}
+                sx={{ borderRadius: 1 }}
+              >
+                <SvgIcon
+                  fill="none"
+                  stroke="#fff"
+                  strokeWidth="2"
+                  viewBox="0 0 24 24"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  sx={{ width: 16, height: 16 }}
+                  className="lucide lucide-plus-icon lucide-plus"
+                >
+                  <path d="M5 12h14" />
+                  <path d="M12 5v14" />
+                </SvgIcon>
+              </IconButton>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+    </Box>
+  );
+}

package/next-mui-features/zustand/ts/src/stores/counter-store.tsx

@@ -0,0 +1,17 @@
+import { create } from "zustand";
+
+// ---------------------------------------------------------------
+
+interface CounterStore {
+  count: number;
+  increment(): void;
+  decrement(): void;
+  reset(): void;
+}
+
+export const useCounterStore = create<CounterStore>((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+  decrement: () => set((state) => ({ count: state.count - 1 })),
+  reset: () => set({ count: 0 }),
+}));

package/next-mui-features/zustand/ts/src/theme/core/colors.json

@@ -0,0 +1,46 @@
+{
+  "error": {
+    "light": "#FF6183",
+    "main": "#DC103C",
+    "dark": "#AD1032",
+    "contrastText": "#FFFFFF"
+  },
+  "info": {
+    "light": "#4FB0E1",
+    "main": "#008BD1",
+    "dark": "#005D8B",
+    "contrastText": "#FFFFFF"
+  },
+  "success": {
+    "light": "#34FA91",
+    "main": "#0CC663",
+    "dark": "#0A974C",
+    "contrastText": "#FFFFFF"
+  },
+  "warning": {
+    "light": "#E4A942",
+    "main": "#E79200",
+    "dark": "#AC7312",
+    "contrastText": "#FFFFFF"
+  },
+  "purple": {
+    "light": "#A463E5",
+    "main": "#9437F1",
+    "dark": "#6C0CCB",
+    "contrastText": "#FFFFFF"
+  },
+
+  "grey": {
+    "50": "#FFFFFF",
+    "100": "#FFF5F5",
+    "200": "#F4F4F4",
+    "300": "#F2F2F2",
+    "400": "#D8D3D3",
+    "500": "#D2D2D2",
+    "600": "#C2C2C2",
+    "700": "#959595",
+    "800": "#3E3E3E",
+    "900": "#141615",
+    "950": "#000000"
+  }
+}

package/next-mui-features/zustand/ts/src/theme/core/components/button.ts

@@ -0,0 +1,43 @@
+import { Theme, Components } from "@mui/material";
+
+import type {} from "@mui/material/themeCssVarsAugmentation";
+
+// ---------------------------------------------------------------
+
+const MuiButton: Components<Theme>["MuiButton"] = {
+  styleOverrides: {
+    root: ({ theme }) => ({
+      textTransform: "unset",
+      borderRadius: theme.spacing(1.5),
+      color: theme.vars.palette.common.black,
+      variants: [
+        {
+          props: { variant: "contained" },
+          style: {
+            borderRadius: theme.spacing(1.5),
+            color: theme.vars.palette.common.white,
+            backgroundColor: theme.vars.palette.grey[900],
+            ...theme.applyStyles("dark", {
+              color: theme.vars.palette.common.black,
+              backgroundColor: theme.vars.palette.grey[100],
+            }),
+          },
+        },
+        {
+          props: { variant: "outlined" },
+          style: {
+            borderRadius: theme.spacing(1.5),
+            color: theme.vars.palette.common.black,
+            borderColor: theme.vars.palette.grey[900],
+            ...theme.applyStyles("dark", {
+              color: theme.vars.palette.common.white,
+              borderColor: theme.vars.palette.grey[100],
+            }),
+          },
+        },
+      ],
+    }),
+  },
+};
+
+export { MuiButton };

package/next-mui-features/zustand/ts/src/theme/core/components/card.ts

@@ -0,0 +1,17 @@
+import { Theme, Components } from "@mui/material";
+
+import type {} from "@mui/material/themeCssVarsAugmentation";
+
+// ---------------------------------------------------------------
+
+const MuiCard: Components<Theme>["MuiCard"] = {
+  styleOverrides: {
+    root: ({ theme }) => ({
+      borderRadius: theme.spacing(2.5),
+      boxShadow: `-4px -4px 24px 4px rgba(20, 22, 21, 0.04),
+                4px 12px 12px 4px rgba(20, 22, 21, 0.04)`,
+    }),
+  },
+};
+
+export { MuiCard };

package/next-mui-features/zustand/ts/src/theme/core/components/index.ts

@@ -0,0 +1,9 @@
+import { MuiCard } from "./card";
+import { MuiButton } from "./button";
+
+// ---------------------------------------------------------------
+
+export const components = {
+  MuiCard,
+  MuiButton,
+};

package/next-mui-features/zustand/ts/src/theme/core/palette.ts

@@ -0,0 +1,34 @@
+import COLORS from "./colors.json";
+
+// ---------------------------------------------------------------
+
+const GREY = COLORS.grey;
+
+const INFO = COLORS.info;
+const ERROR = COLORS.error;
+const SUCCESS = COLORS.success;
+const WARNING = COLORS.warning;
+
+const PURPLE = COLORS.purple;
+
+// ---------------------------------------------------------------
+
+export const palette = {
+  grey: GREY,
+  info: INFO,
+  error: ERROR,
+  purple: PURPLE,
+  success: SUCCESS,
+  warning: WARNING,
+};
+
+// ---------------------------------------------------------------
+
+declare module "@mui/material/styles" {
+  interface Palette {
+    purple: Palette["primary"];
+  }
+  interface PaletteOptions {
+    purple?: PaletteOptions["primary"];
+  }
+}

package/next-mui-features/zustand/ts/src/theme/core/typography.ts

@@ -0,0 +1,51 @@
+// ---------------------------------------------------------------
+
+export const typography = {
+  h1: {
+    fontSize: "56px",
+    lineHeight: "64px",
+    fontWeight: 700,
+  },
+  h2: {
+    fontSize: "44px",
+    lineHeight: "56px",
+    fontWeight: 700,
+  },
+  h3: {
+    fontSize: "36px",
+    lineHeight: "44px",
+    fontWeight: 700,
+  },
+  h4: {
+    fontSize: "32px",
+    lineHeight: "40px",
+    fontWeight: 600,
+  },
+  h5: {
+    fontSize: "20px",
+    lineHeight: "28px",
+    fontWeight: 600,
+  },
+  h6: {
+    fontSize: "16px",
+    lineHeight: "20px",
+    fontWeight: 600,
+  },
+  body1: {
+    fontSize: "16px",
+    lineHeight: "20px",
+  },
+  body2: {
+    fontSize: "14px",
+    lineHeight: "18px",
+  },
+  caption: {
+    fontSize: "12px",
+    lineHeight: "16px",
+    fontWeight: 500,
+  },
+  button: {
+    fontWeight: 500,
+    lineHeight: "16px",
+  },
+};

package/next-mui-features/zustand/ts/src/theme/create-theme.ts

@@ -0,0 +1,28 @@
+import { createTheme } from "@mui/material";
+
+import { CONFIG } from "@/config-global";
+
+import { palette } from "./core/palette";
+import { components } from "./core/components";
+import { typography } from "./core/typography";
+
+// ---------------------------------------------------------------
+
+const { defaultMode } = CONFIG;
+
+const defaultFont = "var(--font-geist-sans), Arial, sans-serif";
+
+export const theme = createTheme({
+  cssVariables: true,
+
+  palette: { mode: defaultMode, ...palette },
+
+  typography: {
+    fontFamily: defaultFont,
+    ...typography,
+  },
+
+  spacing: "8px",
+
+  components,
+});

package/next-mui-features/zustand/ts/src/theme/theme-provider.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { AppRouterCacheProvider } from "@mui/material-nextjs/v16-appRouter";
+import { CssBaseline, ThemeProvider as MuiThemeProvider } from "@mui/material";
+
+import { theme } from "./create-theme";
+
+// ---------------------------------------------------------------
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <AppRouterCacheProvider>
+      <MuiThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </MuiThemeProvider>
+    </AppRouterCacheProvider>
+  );
+}