feat: v1 docs

.codesandbox/ci.json

@@ -3,8 +3,10 @@
   "installCommand": "install:codesandbox",
   "node": "18",
   "packages": [
+    "packages/pigment-css-core",
     "packages/pigment-css-nextjs-plugin",
     "packages/pigment-css-react",
+    "packages/pigment-css-react-new",
     "packages/pigment-css-theme",
     "packages/pigment-css-unplugin",
     "packages/pigment-css-utils",

.eslintignore

@@ -9,7 +9,12 @@
 /packages/pigment-css-react/exports/
 /packages/pigment-css-react/theme/
 /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
@@ -33,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',
       },

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,2 @@
-REPO_ROOT=https://github.com/mui/pigment-css
-DEFAULT_BRANCH=master
-
+SOURCE_CODE_REPO=https://github.com/mui/pigment-css
+SOURCE_GITHUB_BRANCH=master

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,47 @@
-import * as url from 'url';
-import * as path from 'path';
 import type { NextConfig } from 'next';
-// @ts-ignore
-// eslint-disable-next-line no-restricted-imports
+import nextMdx from '@next/mdx';
+import withPigment, { type PigmentCSSConfig } from '@pigment-css/plugin/nextjs';
+import remarkGfm from 'remark-gfm';
+import remarkTypography from 'remark-typography';
+import rehypeExtractToc from '@stefanprobst/rehype-extract-toc';
+// @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 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 withMdx = nextMdx({
+  options: {
+    remarkPlugins: [remarkGfm, remarkTypography],
+    rehypePlugins: [rehypeExtractToc],
+  },
+});
+
+const isProd = process.env.NODE_ENV === 'production';
 
 const nextConfig: NextConfig = {
   trailingSlash: false,
+  pageExtensions: ['mdx', 'tsx'],
   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,
+    APP_NAME: 'Pigment CSS',
+    GITHUB: 'https://github.com/mui/pigment-css',
+    NPM: 'https://www.npmjs.com/package/@pigment-css/core',
   },
+  ...(isProd && { distDir: 'export', output: 'export' }),
   experimental: {
     esmExternals: true,
     workerThreads: false,
-    turbo: undefined,
+    useLightningcss: true,
   },
 };
 
-const theme = extendTheme({
-  colorSchemes: {
-    light: baseTheme,
-  },
-});
-
-export default withPigment(withDocsInfra(nextConfig), {
+const pigmentConfig: PigmentCSSConfig = {
   theme,
-  displayName: true,
-  sourceMap: process.env.NODE_ENV !== 'production',
-  babelOptions: {
-    plugins: [
-      '@babel/plugin-proposal-explicit-resource-management',
-      '@babel/plugin-transform-unicode-property-regex',
-    ],
-  },
-});
+  transformSx: false,
+  displayName: !isProd,
+  sourceMap: !isProd,
+  include: /\.pigment\.tsx?$/,
+};
+
+export default withPigment(withMdx(withDocsInfra(nextConfig)), pigmentConfig);

docs/package.json

@@ -1,43 +1,39 @@
 {
   "name": "docs",
-  "version": "0.1.0",
+  "version": "0.0.0",
   "private": true,
   "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",
-    "@mdx-js/mdx": "^3.1.0",
-    "@pigment-css/react": "workspace:*",
-    "@stefanprobst/rehype-extract-toc": "^2.2.0",
+    "@base-ui-components/react": "^1.0.0-alpha.6",
+    "@pigment-css/theme": "workspace:*",
+    "@pigment-css/react-new": "workspace:*",
     "clsx": "^2.1.1",
-    "next": "15.0.2",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "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"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "next": "15.1.6",
+    "scroll-into-view-if-needed": "^3.1.0"
   },
   "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:*",
+    "@mdx-js/loader": "^3.1.0",
+    "@next/mdx": "^15.1.6",
+    "@pigment-css/plugin": "workspace:*",
+    "@stefanprobst/rehype-extract-toc": "^2.2.1",
+    "@mui/monorepo": "github:mui/material-ui#v6.4.2",
+    "remark-gfm": "^4.0.0",
+    "remark-typography": "^0.6.21",
+    "typescript": "^5",
     "@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.1.6",
+    "@eslint/eslintrc": "^3"
   },
   "nx": {
     "targets": {

docs/public/_headers

@@ -0,0 +1,24 @@
+/_next/*.js
+  Cache-Control: public, max-age=31536000, immutable
+
+/static/*.ico
+  Content-Type: image/x-icon
+
+/performance/*
+  X-Robots-Tag: noindex
+
+/experiments/*
+  X-Robots-Tag: noindex
+
+/*
+  Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
+  # Block usage in iframes.
+  X-Frame-Options: SAMEORIGIN
+  # Force the browser to trust the Content-Type header
+  # https://stackoverflow.com/questions/18337630/what-is-x-content-type-options-nosniff
+  X-Content-Type-Options: nosniff
+  X-XSS-Protection: 1; mode=block
+  Referrer-Policy: strict-origin-when-cross-origin
+  # TODO: progressively reduce the CSP scopes
+  # Start with a wildcard, using https://github.com/mui/toolpad/blob/f4c4eb046b352e4fc00729c3bed605e671b040c4/packages/toolpad-studio/src/server/index.ts#L241
+  Content-Security-Policy: default-src * data: mediastream: blob: filesystem: about: ws: wss: 'unsafe-eval' 'wasm-unsafe-eval' 'unsafe-inline'; script-src * data: blob: 'unsafe-inline' 'unsafe-eval'; script-src-elem * data: blob: 'unsafe-inline'; connect-src * data: blob: 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; media-src * data: blob: 'unsafe-inline'; frame-src * data: blob: ; style-src * data: blob: 'unsafe-inline'; font-src * data: blob: 'unsafe-inline'; frame-ancestors *;

docs/public/robots.txt

@@ -0,0 +1,4 @@
+# Algolia-Crawler-Verif: 98C49CAFF7AEED76
+
+User-agent: *
+Allow: /