[docs] All the docs actual content

.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",
@@ -14,7 +16,9 @@
   "sandboxes": [
     "/examples/pigment-css-nextjs-ts",
     "/examples/pigment-css-remix-ts",
-    "/examples/pigment-css-vite-ts"
+    "/examples/pigment-css-vite-ts",
+    "/v1-examples/pigment-css-v1-nextjs",
+    "/v1-examples/pigment-css-v1-vite"
   ],
   "silent": true
 }

.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,5 @@ 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
+/v1-examples

.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',
       },

.npmrc

@@ -1 +1,2 @@
 enable-pre-post-scripts = true
+link-workspace-packages = true

.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"
   },

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

@@ -30,11 +30,11 @@
     "@pigment-css/vite-plugin": "workspace:^",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react": "^4.3.4",
     "postcss": "^8.4.47",
     "postcss-combine-media-query": "^1.0.1",
-    "vite": "5.4.10",
-    "vite-plugin-pages": "^0.32.3"
+    "vite": "6.2.1",
+    "vite-plugin-pages": "^0.32.5"
   },
   "nx": {
     "targets": {

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/README.md

@@ -1,4 +1,15 @@
-# Pigment CSS Docs app
+# Pigment CSS Docs
 
-This is the Pigment CSS docs application bootstrapped with Next.js 15. It uses App Router and
-Pigment CSS for styling.
+This is a Next.js based app that uses the app router and exports a static build that is hosted on Netlify.
+
+It uses Pigment CSS itself for all the styling. The Pigment CSS config in the `next.config.ts` file includes an `include` filter to only transform files ending in `pigment.ts` or `pigment.tsx`. So any `styled` or `css` call should be done in a file ending with the same extension. Rest of the files won't go through Pigment CSS's transform making it comparatively faster than trying to transform all the files, even if they don't contain anything related to Pigment CSS.
+
+`pigment.tsx` has also been added to the `pageExtensions` option in the Next.js config so that we can write our layout/page files directly and that'll be part of Next.js routes.
+
+All the navigation items in the left sidebar of the docs is part of [src/nav.ts](./src/nav.ts) file. This also decides the pages that'll be generated during build.
+
+## Adding a new page
+
+To add a new mdx page, identify the correct category (directory) in the [content](./src/content/) directory and create a new mdx file. Make sure to add an appropriate navigation item in [src/nav.ts](./src/nav.ts) at the desired place. The sidebar should be updated now with the new item. Navigate to the new page.
+
+Any navigation item or parent category can be marked as `draft` by setting `draft: true`. This makes sure that the marked nav items and the corresponding pages are only rendered during development and won't be part of the final production build.

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);