[examples] Add material-ui-pigment-css for Next.js and Vite

examples/material-ui-pigment-css-nextjs-ts/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/material-ui-pigment-css-nextjs-ts/.gitignore

@@ -0,0 +1,36 @@
+# 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*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+# next-env.d.ts

examples/material-ui-pigment-css-nextjs-ts/README.md

@@ -0,0 +1,45 @@
+# Material UI x Pigment CSS - Next.js App Router example in TypeScript
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped using [`create-next-app`](https://github.com/vercel/next.js/tree/HEAD/packages/create-next-app) with Material UI installed.
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/mui/material-ui):
+
+<!-- #default-branch-switch -->
+
+```bash
+curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2  material-ui-next/examples/material-ui-pigment-css-nextjs-ts
+cd material-ui-pigment-css-nextjs-ts
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+or:
+
+<!-- #default-branch-switch -->
+
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/material-ui-pigment-css-nextjs-ts)
+
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/material-ui-pigment-css-nextjs-ts)
+
+## Learn more
+
+To learn more about this example:
+
+- [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Customizing Material UI](https://mui.com/material-ui/customization/how-to-customize/) - approaches to customizing Material UI.
+
+## What's next?
+
+<!-- #default-branch-switch -->
+
+You now have a working example project.
+You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/material-ui/getting-started/templates/) section.

examples/material-ui-pigment-css-nextjs-ts/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/material-ui-pigment-css-nextjs-ts/next.config.mjs

@@ -0,0 +1,14 @@
+import { withPigment } from '@pigment-css/nextjs-plugin';
+import { extendTheme } from '@mui/material';
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default withPigment(nextConfig, {
+  theme: extendTheme({
+    typography: {
+      fontFamily: 'var(--font-family)',
+    },
+  }),
+  transformLibraries: ['@mui/material'],
+});

examples/material-ui-pigment-css-nextjs-ts/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "material-ui-pigment-css-nextjs-ts",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@mui/material": "next",
+    "@mui/material-pigment-css": "next",
+    "next": "latest",
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "devDependencies": {
+    "@pigment-css/nextjs-plugin": "latest",
+    "@types/node": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "eslint": "latest",
+    "eslint-config-next": "latest",
+    "typescript": "latest"
+  }
+}

examples/material-ui-pigment-css-nextjs-ts/src/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from 'next';
+import { Roboto } from 'next/font/google';
+import '@mui/material-pigment-css/styles.css';
+
+const roboto = Roboto({ subsets: ['latin'], weight: ['400', '500', '700'] });
+
+export const metadata: Metadata = {
+  title: 'Material UI x Pigment CSS',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body style={{ '--font-family': roboto.style.fontFamily } as any}>{children}</body>
+    </html>
+  );
+}

examples/material-ui-pigment-css-nextjs-ts/src/app/page.tsx

@@ -0,0 +1,111 @@
+import CssBaseline from '@mui/material/CssBaseline';
+import Container from '@mui/material-pigment-css/Container';
+import Grid from '@mui/material-pigment-css/Grid';
+import Typography from '@mui/material/Typography';
+import Chip from '@mui/material/Chip';
+
+export default function Home() {
+  return (
+    <main sx={{ minHeight: '100lvh', display: 'grid', placeItems: 'center' }}>
+      <CssBaseline />
+      <Container>
+        <Grid container spacing={{ xs: 2, sm: 3, md: 4 }}>
+          <Grid size={{ xs: 12, md: 6 }}>
+            <Chip
+              label="Available in v6"
+              color="primary"
+              sx={(theme) => ({
+                mb: 2,
+                fontWeight: 600,
+                bgcolor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`,
+                color: 'primary.dark',
+              })}
+            />
+            <Typography
+              variant="h1"
+              sx={{
+                fontWeight: 500,
+                fontSize: 'clamp(3rem, 2.354rem + 2.7562vw, 5rem)',
+                textWrap: 'balance',
+                letterSpacing: '-0.025em',
+              }}
+            >
+              <span
+                sx={(theme) => ({
+                  display: 'block',
+                  background: `linear-gradient(145deg, ${
+                    (theme.vars || theme).palette.primary.light
+                  } 5%, ${(theme.vars || theme).palette.primary.dark} 90%)`,
+                  // `Webkit` has to come later
+                  WebkitBackgroundClip: 'text',
+                  WebkitTextFillColor: 'transparent',
+                })}
+              >
+                Material UI
+              </span>
+              Pigment CSS
+            </Typography>
+          </Grid>
+          <Grid size={{ xs: 12, md: 6 }}>
+            <ul
+              sx={{
+                m: 0,
+                pl: 3,
+                color: 'text.secondary',
+                '& li': {
+                  pl: 2,
+                  fontSize: '1.5rem',
+                  fontWeight: 500,
+                  '&:not(:first-child)': {
+                    marginTop: 2,
+                  },
+                  '&::marker': {
+                    color: 'text.primary',
+                  },
+                  '& > div': {
+                    color: 'text.primary',
+                    fontSize: '1.5rem',
+                    lineHeight: 1.7,
+                  },
+                },
+              }}
+            >
+              <li
+                sx={{
+                  '&::marker': { content: '"⚡️"' },
+                }}
+              >
+                <Typography component="div">Build-time CSS Extraction</Typography>
+                <Typography>
+                  Pigment CSS will look through Material UI components used in the project and
+                  extract the styles into plain CSS.
+                </Typography>
+              </li>
+              <li
+                sx={{
+                  '&::marker': { content: '"🚀"' },
+                }}
+              >
+                <Typography component="div">React Server Components</Typography>
+                <Typography>
+                  Material UI provides a separate set of layout components that integrated with
+                  Pigment CSS to support React Server Components.
+                </Typography>
+              </li>
+              <li
+                sx={{
+                  '&::marker': { content: '"📦"' },
+                }}
+              >
+                <Typography component="div" variant="subtitle1">
+                  Emotionless
+                </Typography>
+                <Typography>Emotion will be removed from the final bundle, saved ~15kB.</Typography>
+              </li>
+            </ul>
+          </Grid>
+        </Grid>
+      </Container>
+    </main>
+  );
+}

examples/material-ui-pigment-css-nextjs-ts/src/augment.d.ts

@@ -0,0 +1,16 @@
+import { Theme, SxProps } from '@mui/material/styles';
+import {} from '@mui/material/themeCssVarsAugmentation';
+
+declare module '@mui/material-pigment-css/theme' {
+  interface ThemeArgs {
+    theme: Theme;
+  }
+}
+
+declare global {
+  namespace React {
+    interface HTMLAttributes<T> {
+      sx?: SxProps<Theme>;
+    }
+  }
+}

examples/material-ui-pigment-css-nextjs-ts/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

examples/material-ui-pigment-css-vite-ts/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

examples/material-ui-pigment-css-vite-ts/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/material-ui-pigment-css-vite-ts/README.md

@@ -0,0 +1,39 @@
+# Material UI x Pigment CSS - Vite.js example
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/mui/material-ui):
+
+<!-- #default-branch-switch -->
+
+```bash
+curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/material-ui-pigment-css-vite-ts
+cd material-ui-pigment-css-vite-ts
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+or:
+
+<!-- #default-branch-switch -->
+
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/material-ui-pigment-css-vite-ts)
+
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/material-ui-pigment-css-vite-ts)
+
+## The idea behind the example
+
+This example uses [Vite.js](https://github.com/vitejs/vite).
+It includes `@mui/material` and [Pigment CSS](https://github.com/mui/pigment-css) as the style engine.
+
+## What's next?
+
+<!-- #default-branch-switch -->
+
+You now have a working example project.
+You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/material-ui/getting-started/templates/) section.