[examples] Add pigment-css-nextjs-ts starter project (mui#41105)

examples/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/pigment-css-nextjs-ts/README.md

@@ -0,0 +1,38 @@
+# Pigment CSS - Next.js App Router with TypeScript example project
+
+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 TypeScript and MUI's zero-runtime CSS-in-JS 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/master | tar -xz --strip=2  material-ui-master/examples/pigment-css-nextjs-ts
+cd 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/master/examples/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/master/examples/pigment-css-nextjs-ts)
+
+## Learn more
+
+To learn more about this example:
+
+- [Pigment CSS documentation](https://github.com/mui/material-ui/blob/master/packages/pigment-react/README.md) - learn more about Pigment CSS features and APIs.
+- [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and APIs.

examples/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/pigment-css-nextjs-ts/next.config.js

@@ -0,0 +1,28 @@
+const { withPigment, extendTheme } = require('@pigment-css/nextjs-plugin');
+
+// To learn more about theming, visit https://github.com/mui/material-ui/blob/master/packages/zero-runtime/README.md#theming
+const theme = extendTheme({
+  colorSchemes: {
+    light: {
+      palette: {
+        background: '0 0% 100%',
+        foreground: '240 10% 3.9%',
+        primary: '240 5.9% 10%',
+        border: '240 5.9% 90%',
+      },
+    },
+    dark: {
+      palette: {
+        background: '240 10% 3.9%',
+        foreground: '0 0% 80%',
+        primary: '0 0% 98%',
+        border: '240 3.7% 15.9%',
+      },
+    },
+  },
+});
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+module.exports = withPigment(nextConfig, { theme });

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

@@ -0,0 +1,27 @@
+{
+  "name": "pigment-css-nextjs-ts",
+  "version": "5.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "post-update": "echo \"codesandbox preview only, need an update\" && pnpm update --latest"
+  },
+  "dependencies": {
+    "@pigment-css/react": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "next": "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/pigment-css-nextjs-ts/src/app/globals.css

@@ -0,0 +1,10 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import type { Metadata } from 'next';
+import '@pigment-css/react/styles.css';
+import { css } from '@pigment-css/react';
+
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout(props: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body
+        className={css(({ theme }) => ({
+          color: 'hsl(var(--palette-foreground))',
+          backgroundColor: 'hsl(var(--palette-background))',
+          fontFamily:
+            "system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+          ...theme.applyStyles('dark', {
+            colorScheme: 'dark',
+          }),
+        }))}
+      >
+        {props.children}
+      </body>
+    </html>
+  );
+}

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

@@ -0,0 +1,204 @@
+import * as React from 'react';
+import { Kalnia, Josefin_Sans } from 'next/font/google';
+import { styled, css, keyframes } from '@pigment-css/react';
+
+const kalnia = Kalnia({ subsets: ['latin'] });
+const josefin = Josefin_Sans({ subsets: ['latin'] });
+
+const scale = keyframes({
+  to: { scale: 'var(--s2)' },
+});
+
+const Link = styled('a', { shouldForwardProp: (prop) => prop !== 'outlined' })<{
+  outlined?: boolean;
+}>(({ theme }) => ({
+  fontSize: '1rem',
+  background: 'rgba(0 0 0 / 0.04)',
+  padding: '0.5rem 1rem',
+  letterSpacing: '1px',
+  borderRadius: '4px',
+  textAlign: 'center',
+  ...theme.applyStyles('dark', {
+    background: 'rgba(255 255 255 / 0.1)',
+  }),
+  variants: [
+    {
+      props: { outlined: true },
+      style: {
+        background: 'transparent',
+        color: `hsl(${theme.vars.palette.primary})`,
+        border: `1px solid hsl(${theme.vars.palette.border})`,
+      },
+    },
+  ],
+}));
+
+const Bubble = styled('span')({
+  height: 'var(--size, 100%)',
+  aspectRatio: '1',
+  background: 'radial-gradient(hsl(var(--h) 100% 70%) 25%, transparent 50%)',
+  position: 'absolute',
+  display: 'inline-block',
+  left: 'var(--x, 0)',
+  top: 'var(--y, 0)',
+  scale: '0',
+  translate: '-50% -50%',
+  mixBlendMode: 'multiply',
+  filter: 'blur(2px)',
+  animation: `${scale} var(--s, 2s) var(--d, 0s) infinite alternate`,
+});
+
+function randomBetween(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
+function generateBubbleVars() {
+  return `
+    --x: ${randomBetween(10, 90)}%;
+    --y: ${randomBetween(15, 85)}%;
+    --h: ${randomBetween(0, 360)};
+    --s2: ${randomBetween(2, 6)};
+    --d: -${randomBetween(250, 400) / 1000}s;
+    --s: ${randomBetween(3, 6)}s;
+  `;
+}
+
+export default function Home() {
+  return (
+    <main
+      className={css({
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100lvh',
+        padding: '20px',
+      })}
+    >
+      <h1
+        className={`
+        ${kalnia.className}
+        ${css(({ theme }) => ({
+          fontSize: 'clamp(3rem, 1.9503rem + 4.4789vw, 6.25rem)',
+          fontWeight: 500,
+          textAlign: 'center',
+          position: 'relative',
+          display: 'flex',
+          alignItems: 'center',
+          color: '#888',
+          marginBottom: '1rem',
+          ...theme.applyStyles('dark', { color: '#fff' }),
+        }))}`}
+      >
+        Pigment CSS
+        <span
+          className={css(({ theme }) => ({
+            position: 'absolute',
+            inset: '0',
+            background: 'white',
+            mixBlendMode: 'color-burn',
+            overflow: 'hidden',
+            pointerEvents: 'none',
+            ...theme.applyStyles('dark', {
+              mixBlendMode: 'darken',
+              filter: 'brightness(2)',
+            }),
+          }))}
+        >
+          <Bubble
+            className={css`
+              ${generateBubbleVars()}
+            `}
+          />
+          <Bubble
+            className={css`
+              ${generateBubbleVars()}
+            `}
+          />
+          <Bubble
+            className={css`
+              ${generateBubbleVars()}
+            `}
+          />
+          <Bubble
+            className={css`
+              ${generateBubbleVars()}
+            `}
+          />
+          <Bubble
+            className={css`
+              ${generateBubbleVars()}
+            `}
+          />
+          <Bubble
+            className={css`
+              ${generateBubbleVars()}
+            `}
+          />
+          <Bubble
+            className={css`
+              ${generateBubbleVars()}
+            `}
+          />
+          <Bubble
+            className={css`
+              ${generateBubbleVars()}
+            `}
+          />
+          <Bubble
+            className={css`
+              ${generateBubbleVars()}
+            `}
+          />
+          <Bubble
+            className={css`
+              ${generateBubbleVars()}
+            `}
+          />
+        </span>
+      </h1>
+      <div
+        className={`
+          ${josefin.className}
+          ${css({
+            letterSpacing: '2px',
+            fontSize: 'clamp(0.75rem, 0.5885rem + 0.6891vw, 1.25rem)',
+            textTransform: 'uppercase',
+            fontWeight: 500,
+            opacity: 0.5,
+            lineHeight: 2,
+            textAlign: 'center',
+            textWrap: 'balance',
+          })}
+        `}
+      >
+        CSS-in-JS library with static extraction
+      </div>
+
+      <div
+        className={css({
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '1rem',
+          marginTop: '3rem',
+          '& > *': { flex: 'auto' },
+        })}
+      >
+        <Link
+          href="https://github.com/mui/material-ui/blob/master/packages/pigment-react/README.md"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Documentation
+        </Link>
+        <Link
+          outlined
+          href="https://github.com/orgs/mui/projects/27/views/1"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Roadmap
+        </Link>
+      </div>
+    </main>
+  );
+}