Update Next.js example with new create-next-app

mui · Jun 8, 2024 · e5c8ce8 · e5c8ce8
1 parent e317bd3
commit e5c8ce8
Show file tree

Hide file tree

Showing 11 changed files with 9,684 additions and 7,766 deletions.
diff --git a/examples/pigment-css-nextjs-ts/.eslintrc.json b/examples/pigment-css-nextjs-ts/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/examples/pigment-css-nextjs-ts/.gitignore b/examples/pigment-css-nextjs-ts/.gitignore
@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
@@ -23,7 +24,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
 
 # local env files
 .env*.local
@@ -33,4 +33,4 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-# next-env.d.ts
+next-env.d.ts
diff --git a/...pigment-css-nextjs-ts/src/app/favicon.ico → ...les/pigment-css-nextjs-ts/app/favicon.ico b/...pigment-css-nextjs-ts/src/app/favicon.ico → ...les/pigment-css-nextjs-ts/app/favicon.ico
diff --git a/...pigment-css-nextjs-ts/src/app/globals.css → ...les/pigment-css-nextjs-ts/app/globals.css b/...pigment-css-nextjs-ts/src/app/globals.css → ...les/pigment-css-nextjs-ts/app/globals.css
diff --git a/.../pigment-css-nextjs-ts/src/app/layout.tsx → ...ples/pigment-css-nextjs-ts/app/layout.tsx b/.../pigment-css-nextjs-ts/src/app/layout.tsx → ...ples/pigment-css-nextjs-ts/app/layout.tsx
@@ -1,16 +1,17 @@
-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';
+import type { Metadata } from 'next';
 
 export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
 };
 
-export default function RootLayout(props: { children: React.ReactNode }) {
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
   return (
     <html lang="en">
       <body

diff --git a/...es/pigment-css-nextjs-ts/src/app/page.tsx → examples/pigment-css-nextjs-ts/app/page.tsx b/...es/pigment-css-nextjs-ts/src/app/page.tsx → examples/pigment-css-nextjs-ts/app/page.tsx
@@ -1,5 +1,4 @@
-import * as React from 'react';
-import { styled, css, keyframes } from '@pigment-css/react';
+import { css, keyframes, styled } from '@pigment-css/react';
 
 const scale = keyframes({
   to: { scale: 'var(--s2)' },

diff --git a/...es/pigment-css-nextjs-ts/src/augment.d.ts → examples/pigment-css-nextjs-ts/augment.d.ts b/...es/pigment-css-nextjs-ts/src/augment.d.ts → examples/pigment-css-nextjs-ts/augment.d.ts
diff --git a/...ples/pigment-css-nextjs-ts/next.config.js → ...les/pigment-css-nextjs-ts/next.config.mjs b/...ples/pigment-css-nextjs-ts/next.config.js → ...les/pigment-css-nextjs-ts/next.config.mjs
@@ -1,4 +1,4 @@
-const { withPigment, extendTheme } = require('@pigment-css/nextjs-plugin');
+import { withPigment, extendTheme } from ('@pigment-css/nextjs-plugin');
 
 // To learn more about theming, visit https://github.com/mui/pigment-css/blob/master/README.md#theming
 const theme = extendTheme({
@@ -25,4 +25,4 @@ const theme = extendTheme({
 /** @type {import('next').NextConfig} */
 const nextConfig = {};
 
-module.exports = withPigment(nextConfig, { theme });
+export default withPigment(nextConfig, { theme });
diff --git a/examples/pigment-css-nextjs-ts/tsconfig.json b/examples/pigment-css-nextjs-ts/tsconfig.json
@@ -1,15 +1,13 @@
 {
   "compilerOptions": {
-    "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
-    "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
@@ -21,7 +19,7 @@
     ],
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],

diff --git a/package.json b/package.json
@@ -3,46 +3,79 @@
   "version": "0.0.12",
   "private": true,
   "scripts": {
-    "preinstall": "npx only-allow pnpm",
-    "proptypes": "tsx ./scripts/generateProptypes.ts",
-    "deduplicate": "pnpm dedupe",
     "build": "lerna run --no-private build",
     "build:ci": "lerna run build --concurrency 8 --skip-nx-cache",
     "build:codesandbox": "NODE_OPTIONS=\"--max_old_space_size=4096\" lerna run --concurrency 8 --no-private build",
-    "release:version": "lerna version --no-changelog --no-push --no-git-tag-version --no-private",
-    "release:build": "lerna run --concurrency 8 --no-private build --skip-nx-cache",
-    "release:changelog": "node scripts/releaseChangelog.mjs",
-    "release:publish": "pnpm publish --recursive --tag latest",
-    "release:publish:dry-run": "pnpm publish --recursive --tag latest --registry=\"http://localhost:4873/\"",
-    "release:tag": "node scripts/releaseTag.mjs",
+    "deduplicate": "pnpm dedupe",
+    "eslint": "eslint . --cache --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0",
+    "eslint:ci": "eslint . --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0",
     "extract-error-codes": "cross-env MUI_EXTRACT_ERROR_CODES=true lerna run --concurrency 8 build:modern",
+    "preinstall": "npx only-allow pnpm",
     "install:codesandbox": "pnpm install --no-frozen-lockfile",
     "jsonlint": "node ./scripts/jsonlint.mjs",
-    "eslint": "eslint . --cache --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0",
-    "eslint:ci": "eslint . --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0",
-    "stylelint": "stylelint --reportInvalidScopeDisables --reportNeedlessDisables \"{docs,examples,app}/**/*.{js,ts,tsx}\" --ignore-path .gitignore",
     "markdownlint": "markdownlint-cli2 \"**/*.md\"",
     "prettier": "pretty-quick --ignore-path .eslintignore",
     "prettier:all": "prettier --write . --ignore-path .eslintignore",
+    "proptypes": "tsx ./scripts/generateProptypes.ts",
+    "release:build": "lerna run --concurrency 8 --no-private build --skip-nx-cache",
+    "release:changelog": "node scripts/releaseChangelog.mjs",
+    "release:publish": "pnpm publish --recursive --tag latest",
+    "release:publish:dry-run": "pnpm publish --recursive --tag latest --registry=\"http://localhost:4873/\"",
+    "release:tag": "node scripts/releaseTag.mjs",
+    "release:version": "lerna version --no-changelog --no-push --no-git-tag-version --no-private",
     "size:snapshot": "node --max-old-space-size=4096 ./scripts/sizeSnapshot/create",
     "size:why": "pnpm size:snapshot --analyze",
-    "test": "node scripts/test.mjs",
+    "stylelint": "stylelint --reportInvalidScopeDisables --reportNeedlessDisables \"{docs,examples,app}/**/*.{js,ts,tsx}\" --ignore-path .gitignore",
     "tc": "node test/cli.js",
-    "test:extended": "pnpm eslint && pnpm typescript && pnpm test:coverage",
+    "test": "node scripts/test.mjs",
+    "test:argos": "node ./scripts/pushArgos.mjs",
     "test:coverage": "pnpm build && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
     "test:coverage:ci": "pnpm build && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
     "test:coverage:html": "pnpm build && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=html mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
+    "test:extended": "pnpm eslint && pnpm typescript && pnpm test:coverage",
     "test:regressions": "cross-env NODE_ENV=production pnpm test:regressions:build && concurrently --success first --kill-others \"pnpm test:regressions:run\" \"pnpm test:regressions:server\"",
     "test:regressions:build": "webpack --config test/regressions/webpack.config.js",
     "test:regressions:dev": "concurrently \"pnpm test:regressions:build --watch\" \"pnpm test:regressions:server\"",
     "test:regressions:run": "mocha --config test/regressions/.mocharc.js --delay 'test/regressions/**/*.test.js'",
     "test:regressions:server": "serve test/regressions -p 5001",
     "test:unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
-    "test:argos": "node ./scripts/pushArgos.mjs",
     "typescript": "tsc -b tsconfig.typecheck.json",
     "typescript:ci": "lerna run --concurrency 3 --no-bail --no-sort typescript",
     "validate-declarations": "tsx scripts/validateTypescriptDeclarations.mts"
   },
+  "nyc": {
+    "exclude": [
+      "**/*.test.{js,ts,tsx}",
+      "**/*.test/*"
+    ],
+    "include": [
+      "packages/mui*/src/**/*.{js,ts,tsx}"
+    ],
+    "instrument": false,
+    "sourceMap": false
+  },
+  "resolutions": {
+    "@babel/code-frame": "^7.24.2",
+    "@babel/core": "^7.24.4",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-numeric-separator": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/plugin-transform-destructuring": "npm:@minh.nguyen/plugin-transform-destructuring@^7.5.2",
+    "@babel/plugin-transform-runtime": "^7.24.3",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@babel/runtime": "^7.24.4",
+    "@babel/types": "^7.24.0",
+    "@definitelytyped/header-parser": "^0.2.8",
+    "@definitelytyped/typescript-versions": "^0.1.1",
+    "@definitelytyped/utils": "^0.1.5",
+    "@types/node": "^18.19.30",
+    "@types/react": "^18.2.74",
+    "@types/react-dom": "18.2.24"
+  },
   "dependencies": {
     "@pigment-css/react": "workspace:^",
     "globby": "^14.0.1"
@@ -119,38 +152,5 @@
     "unist-util-visit": "^2.0.3",
     "yargs": "^17.7.2"
   },
-  "packageManager": "[email protected]",
-  "resolutions": {
-    "@babel/core": "^7.24.4",
-    "@babel/code-frame": "^7.24.2",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-    "@babel/plugin-proposal-numeric-separator": "^7.18.6",
-    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/plugin-transform-destructuring": "npm:@minh.nguyen/plugin-transform-destructuring@^7.5.2",
-    "@babel/plugin-transform-runtime": "^7.24.3",
-    "@babel/preset-env": "^7.24.4",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
-    "@babel/runtime": "^7.24.4",
-    "@babel/types": "^7.24.0",
-    "@definitelytyped/header-parser": "^0.2.8",
-    "@definitelytyped/typescript-versions": "^0.1.1",
-    "@definitelytyped/utils": "^0.1.5",
-    "@types/node": "^18.19.30",
-    "@types/react": "^18.2.74",
-    "@types/react-dom": "18.2.24"
-  },
-  "nyc": {
-    "include": [
-      "packages/mui*/src/**/*.{js,ts,tsx}"
-    ],
-    "exclude": [
-      "**/*.test.{js,ts,tsx}",
-      "**/*.test/*"
-    ],
-    "sourceMap": false,
-    "instrument": false
-  }
+  "packageManager": "[email protected]+sha512.98a80fd11c2e7096747762304106432b3ddc67dcf54b5a8c01c93f68a2cd5e05e6821849522a06fb76284d41a2660d5e334f2ee3bbf29183bf2e739b1dafa771"
 }