feat: v1 docs

.codesandbox/ci.json

@@ -5,7 +5,9 @@
   "packages": [
     "packages/pigment-css-core",
     "packages/pigment-css-nextjs-plugin",
+    "packages/pigment-css-plugin",
     "packages/pigment-css-react",
+    "packages/pigment-css-react-new",
     "packages/pigment-css-theme",
     "packages/pigment-css-unplugin",
     "packages/pigment-css-utils",

.eslintignore

@@ -11,7 +11,10 @@
 /packages/pigment-css-react/tests/**/fixtures
 /packages/pigment-css-core/exports/
 /packages/pigment-css-core/tests/**/fixtures
+/packages/pigment-css-react-new/exports/
+/packages/pigment-css-react-new/tests/**/fixtures
 /packages/pigment-css-nextjs-plugin/loader.js
+/packages/pigment-css-plugin/exports/
 # Ignore fixtures
 /packages-internal/scripts/typescript-to-proptypes/test/*/*
 /test/bundling/fixtures/**/*.fixture.js
@@ -35,3 +38,4 @@ pnpm-lock.yaml
 # If we want to format these files we'd need to do it in crowdin
 docs/**/*-pt.md
 docs/**/*-zh.md
+/tmpapps

.eslintrc.js

@@ -57,12 +57,6 @@ module.exports = {
     // Airbnb use warn https://github.com/airbnb/javascript/blob/63098cbb6c05376dbefc9a91351f5727540c1ce1/packages/eslint-config-airbnb-base/rules/style.js#L97
     // but eslint recommands error
     'func-names': 'error',
-    'no-restricted-imports': [
-      'error',
-      {
-        patterns: ['@mui/*/*/*'],
-      },
-    ],
     'no-continue': 'off',
     'no-constant-condition': 'error',
     // Use the proptype inheritance chain
@@ -83,6 +77,8 @@ module.exports = {
     ],
     'no-use-before-define': 'off',
 
+    'react/react-in-jsx-scope': 'off',
+
     // disabled type-aware linting due to performance considerations
     '@typescript-eslint/dot-notation': 'off',
     'dot-notation': 'error',
@@ -201,6 +197,7 @@ module.exports = {
 
     'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
     'lines-around-directive': 'off',
+    'react/prop-types': 'off',
   },
   overrides: [
     {
@@ -281,7 +278,7 @@ module.exports = {
     },
     // Next.js entry points pages
     {
-      files: ['docs/pages/**/*.js'],
+      files: ['docs/apps/**/*{.tsx,.ts,.js}'],
       rules: {
         'react/prop-types': 'off',
       },

.vscode/settings.json

@@ -9,5 +9,6 @@
       "language": "markdown",
       "scheme": "file"
     }
-  ]
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

apps/pigment-css-next-app/package.json

@@ -15,13 +15,13 @@
     "local-ui-lib": "workspace:^",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "next": "15.1.3"
+    "next": "15.1.6"
   },
   "devDependencies": {
     "@pigment-css/nextjs-plugin": "workspace:^",
-    "@types/node": "^18.19.63",
-    "@types/react": "^19.0.2",
-    "@types/react-dom": "^19.0.2",
+    "@types/node": "^20",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "eslint": "^8.57.0",
     "typescript": "^5.4.4"
   },

docs/.env

@@ -1,3 +1,4 @@
-REPO_ROOT=https://github.com/mui/pigment-css
-DEFAULT_BRANCH=master
-
+APP_NAME=Pigment CSS
+GITHUB=https://github.com/mui/pigment-css
+NPM=https://www.npmjs.com/package/@pigment-css/core
+WEBSITE=https://pigment-css.com

docs/.gitignore

@@ -28,10 +28,15 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+export

docs/eslint.config.mjs

@@ -0,0 +1,14 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [...compat.extends('next/core-web-vitals', 'next/typescript')];
+
+export default eslintConfig;

docs/next.config.ts

@@ -1,54 +1,50 @@
-import * as url from 'url';
-import * as path from 'path';
+import * as path from 'node:path';
 import type { NextConfig } from 'next';
-// @ts-ignore
-// eslint-disable-next-line no-restricted-imports
+import withPigment, { type PigmentCSSConfig } from '@pigment-css/plugin/nextjs';
+// @ts-expect-error This file doesn't have TS definitions.
 import withDocsInfra from '@mui/monorepo/docs/nextConfigDocsInfra.js';
-import { withPigment, extendTheme } from '@pigment-css/nextjs-plugin';
 
-import { theme as baseTheme } from './src/theme';
+import theme, { THEME_DARK } from './src/theme';
+
 import rootPackage from '../package.json';
 
-const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url));
-const DATA_DIR = path.join(currentDirectory, 'data');
+const isProd = process.env.NODE_ENV === 'production';
+const CONTENT_DIR = path.join(__dirname, 'src', 'content');
 
 const nextConfig: NextConfig = {
+  pageExtensions: ['tsx', 'pigment.tsx'],
   trailingSlash: false,
   env: {
-    DATA_DIR,
-    CURRENT_VERSION: rootPackage.version,
-  },
-  distDir: 'export',
-  output: process.env.NODE_ENV === 'production' ? 'export' : undefined,
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
-  devIndicators: {
-    buildActivity: true,
-    buildActivityPosition: 'bottom-right',
-    appIsrStatus: false,
+    LIB_VERSION: rootPackage.version,
+    CONTENT_DIR,
+    CHANGELOG_FILE: path.join(__dirname, '../CHANGELOG.md'),
   },
+  ...(isProd && { distDir: 'export', output: 'export' }),
   experimental: {
     esmExternals: true,
     workerThreads: false,
-    turbo: undefined,
+    useLightningcss: true,
   },
 };
 
-const theme = extendTheme({
-  colorSchemes: {
-    light: baseTheme,
+const pigmentConfig: PigmentCSSConfig = {
+  theme: {
+    colorSchemes: {
+      light: theme,
+      dark: THEME_DARK,
+    },
+    defaultScheme: 'light',
+    getSelector(mode) {
+      if (mode === 'light') {
+        return ':root, [data-theme="light"]';
+      }
+      return `[data-theme="${mode}"]`;
+    },
   },
-});
+  transformSx: false,
+  displayName: !isProd,
+  sourceMap: !isProd,
+  include: /\.pigment\.tsx?$/,
+};
 
-export default withPigment(withDocsInfra(nextConfig), {
-  theme,
-  displayName: true,
-  sourceMap: process.env.NODE_ENV !== 'production',
-  babelOptions: {
-    plugins: [
-      '@babel/plugin-proposal-explicit-resource-management',
-      '@babel/plugin-transform-unicode-property-regex',
-    ],
-  },
-});
+export default withPigment(withDocsInfra(nextConfig), pigmentConfig);

docs/package.json

@@ -1,43 +1,49 @@
 {
   "name": "docs",
-  "version": "0.1.0",
+  "version": "0.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
+    "clean": "rm -rf .next export",
     "dev": "next dev",
-    "build": "cross-env NODE_ENV=production next build",
-    "preview": "serve ./export",
-    "lint": "next lint",
-    "typescript": "tsc --noEmit -p ."
+    "build": "next build",
+    "start": "pnpm dlx serve export",
+    "lint": "next lint"
   },
   "dependencies": {
-    "@base_ui/react": "^1.0.0-alpha.3",
+    "@base-ui-components/react": "^1.0.0-alpha.6",
     "@mdx-js/mdx": "^3.1.0",
-    "@pigment-css/react": "workspace:*",
-    "@stefanprobst/rehype-extract-toc": "^2.2.0",
+    "@pigment-css/react-new": "workspace:*",
+    "@stefanprobst/rehype-extract-toc": "^2.2.1",
+    "clipboard-copy": "4.0.1",
     "clsx": "^2.1.1",
-    "next": "15.0.2",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "rehype-pretty-code": "0.14.0",
+    "estree-util-value-to-estree": "^3.3.2",
+    "hast-util-to-string": "^3.0.1",
+    "lucide-react": "^0.479.0",
+    "next": "15.2.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-highlight": "^7.0.2",
+    "rehype-pretty-code": "^0.14.0",
     "rehype-slug": "^6.0.0",
-    "remark-frontmatter": "^5.0.0",
-    "remark-gfm": "^4.0.0",
-    "remark-mdx-frontmatter": "^5.0.0",
-    "shiki": "^1.22.2",
-    "to-vfile": "^8.0.0",
-    "vfile-matter": "^5.0.0"
+    "remark-gfm": "^4.0.1",
+    "remark-typography": "^0.6.21",
+    "scroll-into-view-if-needed": "^3.1.0",
+    "shiki": "^3.1.0",
+    "unist-util-visit-parents": "^6.0.1"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-explicit-resource-management": "^7.25.9",
-    "@babel/plugin-transform-unicode-property-regex": "^7.25.9",
-    "@mui/monorepo": "github:mui/material-ui#ae455647016fe5dee968b017aa191e176bc113dd",
-    "@pigment-css/nextjs-plugin": "workspace:*",
+    "@eslint/eslintrc": "^3",
+    "@mui/monorepo": "github:mui/material-ui#v6.4.7",
+    "@pigment-css/plugin": "workspace:*",
+    "@types/mdx": "^2.0.13",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "eslint-config-next": "15.0.2",
-    "serve": "14.2.4",
-    "tailwindcss": "^3.4.14"
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "eslint": "^9",
+    "eslint-config-next": "15.2.3",
+    "typescript": "^5"
   },
   "nx": {
     "targets": {