[zero][next] Setup nextjs plugin package (#38852)

apps/zero-runtime-next-app/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  }
+}

apps/zero-runtime-next-app/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/zero-runtime-next-app/README.md

@@ -0,0 +1,26 @@
+# Next App
+
+A sample vite application to test the working of zero runtime library.
+This project is not part of the workspace yet.
+
+## How to run
+
+You can either `yarn build` command to build all the packages, or you need to build, the the minimum -
+
+1. `@mui/zero-runtime`
+2. `@mui/zero-tag-processor`
+3. `@mui/zero-next-plugin`
+
+Make sure you have also run `yarn build` at least once because we also use `@mui/material` and `@mui/system` packages. On subsequent runs, you can only build the above packages using -
+
+```bash
+yarn build
+```
+
+After building, you can run the project by changing into the directory and then
+
+1. Install dependencies using `yarn install`
+2. Start the dev server using `yarn dev`
+3. Build the code using `yarn build`
+
+Optionally, before running the dev server, you can run `yarn vite optimize --force` if it logged some error during `yarn vite`.

apps/zero-runtime-next-app/next.config.js

@@ -0,0 +1,38 @@
+const { createTheme } = require('@mui/material/styles');
+const withZero = require('@mui/zero-next-plugin').default;
+
+const theme = createTheme({
+  typography: {
+    fontFamilyCode: 'Menlo,Consolas,"Droid Sans Mono",monospace',
+  },
+});
+// @TODO - Make this part of the main package
+// @ts-ignore
+theme.applyDarkStyles = function applyDarkStyles(obj) {
+  return {
+    // @TODO - Use custom stylis plugin as in docs/src/createEmotionCache.ts
+    // so that we don't need to use *
+    '* :where([data-mui-color-scheme="dark"]) &': obj,
+  };
+};
+
+/** @type {import('@mui/zero-webpack-plugin').ZeroPluginOptions} */
+const zeroPluginConfig = {
+  theme,
+  cssVariablesPrefix: 'app',
+  displayName: true,
+  // sourceMap: true,
+};
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // linaria: zeroPluginConfig,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+};
+
+module.exports = withZero(nextConfig, zeroPluginConfig);

apps/zero-runtime-next-app/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@app/zero-runtime-next-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@mui/base": "file:../../packages/mui-base/build",
+    "@mui/material": "file:../../packages/mui-material/build",
+    "@mui/utils": "file:../../packages/mui-utils/build",
+    "@mui/zero-runtime": "file:../../packages/zero-runtime/build",
+    "next": "13.4.19",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@mui/zero-tag-processor": "file:../../packages/zero-tag-processor/build",
+    "@mui/zero-next-plugin": "file:../../packages/zero-next-plugin/build",
+    "@types/node": "20.5.7",
+    "@types/react": "18.2.21",
+    "@types/react-dom": "18.2.7",
+    "typescript": "5.1.6"
+  },
+  "resolutions": {
+    "@mui/zero-tag-processor": "file:../../packages/zero-tag-processor/build"
+  }
+}

apps/zero-runtime-next-app/src/app/globals.css

@@ -0,0 +1,102 @@
+@import '~@mui/zero-runtime/styles.css';
+
+:root {
+  --max-width: 1100px;
+  --border-radius: 12px;
+  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono',
+    'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono',
+    'Courier New', monospace;
+
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+
+  --primary-glow: conic-gradient(
+    from 180deg at 50% 50%,
+    #16abff33 0deg,
+    #0885ff33 55deg,
+    #54d6ff33 120deg,
+    #0071ff33 160deg,
+    transparent 360deg
+  );
+  --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+
+  --tile-start-rgb: 239, 245, 249;
+  --tile-end-rgb: 228, 232, 233;
+  --tile-border: conic-gradient(
+    #00000080,
+    #00000040,
+    #00000030,
+    #00000020,
+    #00000010,
+    #00000010,
+    #00000080
+  );
+
+  --callout-rgb: 238, 240, 241;
+  --callout-border-rgb: 172, 175, 176;
+  --card-rgb: 180, 185, 188;
+  --card-border-rgb: 131, 134, 135;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+
+    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+    --secondary-glow: linear-gradient(
+      to bottom right,
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0.3)
+    );
+
+    --tile-start-rgb: 2, 13, 46;
+    --tile-end-rgb: 2, 5, 19;
+    --tile-border: conic-gradient(
+      #ffffff80,
+      #ffffff40,
+      #ffffff30,
+      #ffffff20,
+      #ffffff10,
+      #ffffff10,
+      #ffffff80
+    );
+
+    --callout-rgb: 20, 20, 20;
+    --callout-border-rgb: 108, 108, 108;
+    --card-rgb: 100, 100, 100;
+    --card-border-rgb: 200, 200, 200;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb)))
+    rgb(var(--background-start-rgb));
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}

apps/zero-runtime-next-app/src/app/layout.tsx

@@ -0,0 +1,18 @@
+import './globals.css';
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

apps/zero-runtime-next-app/src/app/page.module.css

@@ -0,0 +1,22 @@
+.logo {
+  position: relative;
+}
+
+@media (prefers-color-scheme: dark) {
+  .vercelLogo {
+    filter: invert(1);
+  }
+
+  .logo {
+    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}