[docs] Reference shared code from the Core monorepo (mui#326)

babel.config.js

@@ -17,7 +17,8 @@ module.exports = function getBabelConfig(api) {
 
   const defaultAlias = {
     '@base_ui/react': resolveAliasPath('./packages/mui-base/src'),
-    docs: resolveAliasPath('./docs'),
+    docs: resolveAliasPath('./node_modules/@mui/monorepo/docs'),
+    'docs-base': resolveAliasPath('./docs'),
     test: resolveAliasPath('./test'),
     '@mui-internal/api-docs-builder': resolveAliasPath(
       './node_modules/@mui/monorepo/packages/api-docs-builder',

docs/babel.config.js

@@ -3,6 +3,11 @@ const fse = require('fs-extra');
 
 const errorCodesPath = path.resolve(__dirname, './public/static/error-codes.json');
 
+const alias = {
+  docs: '../node_modules/@mui/monorepo/docs',
+  'docs-base': './',
+};
+
 const { version: transformRuntimeVersion } = fse.readJSONSync(
   require.resolve('@babel/runtime-corejs2/package.json'),
 );
@@ -31,6 +36,13 @@ module.exports = {
         },
       },
     ],
+    [
+      'babel-plugin-module-resolver',
+      {
+        alias,
+        transformFunctions: ['require', 'require.context'],
+      },
+    ],
     'babel-plugin-optimize-clsx',
     // for IE11 support
     '@babel/plugin-transform-object-assign',

docs/config.js

@@ -1,29 +1 @@
-// Valid languages to server-side render in production
-const LANGUAGES = ['en'];
-
-// Server side rendered languages
-const LANGUAGES_SSR = ['en'];
-
-// Work in progress
-const LANGUAGES_IN_PROGRESS = LANGUAGES.slice();
-
-const LANGUAGES_IGNORE_PAGES = (pathname) => {
-  // We don't have the bandwidth like Qt to translate our blog posts
-  // https://www.qt.io/zh-cn/blog
-  if (pathname === '/blog' || pathname.startsWith('/blog/')) {
-    return true;
-  }
-
-  if (pathname === '/size-snapshot/') {
-    return true;
-  }
-
-  return false;
-};
-
-module.exports = {
-  LANGUAGES,
-  LANGUAGES_IN_PROGRESS,
-  LANGUAGES_SSR,
-  LANGUAGES_IGNORE_PAGES,
-};
+module.exports = require('@mui/monorepo/docs/config');

docs/data/base/all-components/all-components.md

@@ -2,4 +2,4 @@
 
 <p class="description">Every Base UI component available so far, sorted alphabetically.</p>
 
-{{"component": "modules/components/BaseUIComponents.js"}}
+{{"component": "modules/all-components/AllComponents.js"}}

docs/next.config.mjs

@@ -3,10 +3,9 @@ import * as path from 'path';
 import * as url from 'url';
 import * as fs from 'fs';
 import { createRequire } from 'module';
-// @ts-expect-error This expected error should be gone once we update the monorepo
 // eslint-disable-next-line no-restricted-imports
 import withDocsInfra from '@mui/monorepo/docs/nextConfigDocsInfra.js';
-import { findPages } from './src/modules/utils/find.mjs';
+import { findPages } from './src/utils/findPages.mjs';
 import {
   LANGUAGES,
   LANGUAGES_SSR,
@@ -57,6 +56,8 @@ export default withDocsInfra({
         ...config.resolve,
         alias: {
           ...config.resolve.alias,
+          'docs-base': path.resolve(currentDirectory, '../docs'),
+          docs: path.resolve(currentDirectory, '../node_modules/@mui/monorepo/docs'),
         },
       },
       module: {

docs/package.json

@@ -28,10 +28,11 @@
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.5",
     "@base_ui/react": "workspace:*",
-    "@mui/docs": "6.0.0-alpha.3",
+    "@mui/base": "5.0.0-beta.40",
+    "@mui/docs": "https://pkg.csb.dev/mui/material-ui/commit/19d7243c/@mui/docs",
     "@mui/icons-material": "5.15.15",
-    "@mui/internal-markdown": "^1.0.1",
-    "@mui/internal-scripts": "^1.0.3",
+    "@mui/internal-markdown": "^1.0.3",
+    "@mui/internal-scripts": "^1.0.6",
     "@mui/joy": "5.0.0-beta.32",
     "@mui/material": "5.15.15",
     "@mui/material-nextjs": "5.15.11",
@@ -81,8 +82,7 @@
   "devDependencies": {
     "@babel/plugin-transform-react-constant-elements": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
-    "@mui/internal-docs-utils": "^1.0.4",
-    "@mui/internal-scripts": "^1.0.3",
+    "@mui/internal-docs-utils": "^1.0.6",
     "@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/fb183624/@mui/internal-test-utils",
     "@types/autosuggest-highlight": "^3.2.3",
     "@types/chai": "^4.3.14",

docs/pages/_app.js

@@ -6,7 +6,7 @@ import NextHead from 'next/head';
 import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
 import basePkgJson from 'packages/mui-base/package.json';
-import basePages from 'docs/data/base/pages';
+import basePages from 'docs-base/data/base/pages';
 import PageContext from 'docs/src/modules/components/PageContext';
 import GoogleAnalytics from 'docs/src/modules/components/GoogleAnalytics';
 import { CodeCopyProvider } from 'docs/src/modules/utils/CodeCopy';
@@ -19,13 +19,16 @@ import findActivePage from 'docs/src/modules/utils/findActivePage';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import getProductInfoFromUrl from 'docs/src/modules/utils/getProductInfoFromUrl';
 import { DocsProvider } from '@mui/docs/DocsProvider';
+import configureSandboxDependencies from 'docs-base/src/utils/configureSandboxDependencies';
 import './global.css';
 import '../public/static/components-gallery/base-theme.css';
 import config from '../config';
 
 // Client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache();
 
+configureSandboxDependencies();
+
 let reloadInterval;
 
 // Avoid infinite loop when "Upload on reload" is set in the Chrome sw dev tools.

docs/pages/_document.js

@@ -7,7 +7,7 @@ import GlobalStyles from '@mui/material/GlobalStyles';
 import { getInitColorSchemeScript as getMuiInitColorSchemeScript } from '@mui/material/styles';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import createEmotionCache from 'docs/src/createEmotionCache';
-import { getMetaThemeColor } from 'docs/src/modules/brandingTheme';
+import { getMetaThemeColor } from '@mui/docs/branding';
 
 const PRODUCTION_GA =
   process.env.DEPLOY_ENV === 'production' || process.env.DEPLOY_ENV === 'staging';

docs/pages/base-ui.tsx

@@ -5,11 +5,11 @@ import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import AppHeader from 'docs/src/layouts/AppHeader';
 import AppFooter from 'docs/src/layouts/AppFooter';
 import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
-import BaseUIHero from 'docs/src/components/productBaseUI/BaseUIHero';
-import BaseUISummary from 'docs/src/components/productBaseUI/BaseUISummary';
-import BaseUICustomization from 'docs/src/components/productBaseUI/BaseUICustomization';
-import BaseUIEnd from 'docs/src/components/productBaseUI/BaseUIEnd';
-import BaseUITestimonial from 'docs/src/components/productBaseUI/BaseUITestimonial';
+import BaseUIHero from 'docs-base/src/modules/home/BaseUIHero';
+import BaseUISummary from 'docs-base/src/modules/home/BaseUISummary';
+import BaseUICustomization from 'docs-base/src/modules/home/BaseUICustomization';
+import BaseUIEnd from 'docs-base/src/modules/home/BaseUIEnd';
+import BaseUITestimonial from 'docs-base/src/modules/home/BaseUITestimonial';
 
 export default function BaseUI() {
   return (

docs/pages/base-ui/all-components/index.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
 import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/all-components/all-components.md?@mui/markdown';
+import * as pageProps from 'docs-base/data/base/all-components/all-components.md?@mui/markdown';
 
 export default function Page() {
   return <MarkdownDocs {...pageProps} disableToc />;

docs/pages/base-ui/getting-started/accessibility.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
 import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/getting-started/accessibility/accessibility.md?@mui/markdown';
+import * as pageProps from 'docs-base/data/base/getting-started/accessibility/accessibility.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs {...pageProps} />;
+  return <MarkdownDocs {...pageProps} disableAd />;
 }
 
 Page.getLayout = (page) => {

docs/pages/base-ui/getting-started/customization.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
 import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/getting-started/customization/customization.md?@mui/markdown';
+import * as pageProps from 'docs-base/data/base/getting-started/customization/customization.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs {...pageProps} />;
+  return <MarkdownDocs {...pageProps} disableAd />;
 }
 
 Page.getLayout = (page) => {

docs/pages/base-ui/getting-started/index.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
 import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/getting-started/overview/overview.md?@mui/markdown';
+import * as pageProps from 'docs-base/data/base/getting-started/overview/overview.md?@mui/markdown';
 
 export default function Page() {
   return <MarkdownDocs {...pageProps} disableAd />;

docs/pages/base-ui/getting-started/quickstart.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
 import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/getting-started/quickstart/quickstart.md?@mui/markdown';
+import * as pageProps from 'docs-base/data/base/getting-started/quickstart/quickstart.md?@mui/markdown';
 
 export default function Page() {
   return <MarkdownDocs {...pageProps} disableAd />;

docs/pages/base-ui/getting-started/support.js

@@ -1,7 +1,12 @@
 import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import * as pageProps from 'docs/data/base/getting-started/support/support.md?@mui/markdown';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
+import * as pageProps from 'docs-base/data/base/getting-started/support/support.md?@mui/markdown';
 
 export default function Page() {
   return <MarkdownDocs {...pageProps} disableAd />;
 }
+
+Page.getLayout = (page) => {
+  return <AppFrame>{page}</AppFrame>;
+};

docs/pages/base-ui/getting-started/usage.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
 import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/getting-started/usage/usage.md?@mui/markdown';
+import * as pageProps from 'docs-base/data/base/getting-started/usage/usage.md?@mui/markdown';
 
 export default function Page() {
   return <MarkdownDocs {...pageProps} disableAd />;

docs/pages/base-ui/guides/next-js-app-router.js

@@ -1,7 +1,12 @@
 import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import * as pageProps from 'docs/data/base/guides/next-js-app-router/next-js-app-router.md?@mui/markdown';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
+import * as pageProps from 'docs-base/data/base/guides/next-js-app-router/next-js-app-router.md?@mui/markdown';
 
 export default function Page() {
   return <MarkdownDocs {...pageProps} />;
 }
+
+Page.getLayout = (page) => {
+  return <AppFrame>{page}</AppFrame>;
+};

docs/pages/base-ui/guides/overriding-component-structure.js

@@ -1,7 +1,12 @@
 import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import * as pageProps from 'docs/data/base/guides/overriding-component-structure/overriding-component-structure.md?@mui/markdown';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
+import * as pageProps from 'docs-base/data/base/guides/overriding-component-structure/overriding-component-structure.md?@mui/markdown';
 
 export default function Page() {
   return <MarkdownDocs {...pageProps} />;
 }
+
+Page.getLayout = (page) => {
+  return <AppFrame>{page}</AppFrame>;
+};

docs/pages/base-ui/guides/working-with-tailwind-css.js

@@ -1,7 +1,12 @@
 import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import * as pageProps from 'docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md?@mui/markdown';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
+import * as pageProps from 'docs-base/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md?@mui/markdown';
 
 export default function Page() {
   return <MarkdownDocs {...pageProps} />;
 }
+
+Page.getLayout = (page) => {
+  return <AppFrame>{page}</AppFrame>;
+};

docs/pages/base-ui/react-accordion/index.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
 import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/accordion/accordion.md?@mui/markdown';
+import * as pageProps from 'docs-base/data/base/components/accordion/accordion.md?@mui/markdown';
 
 export default function Page(props) {
   const { userLanguage, ...other } = props;

docs/pages/base-ui/react-autocomplete/[docsTab]/index.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
 import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/autocomplete/autocomplete.md?@mui/markdown';
+import * as pageProps from 'docs-base/data/base/components/autocomplete/autocomplete.md?@mui/markdown';
 import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
 import useAutocompleteApiJsonPageContent from '../../api/use-autocomplete.json';
 
@@ -23,9 +23,9 @@ export const getStaticPaths = () => {
 
 export const getStaticProps = () => {
   const useAutocompleteApiReq = require.context(
-    'docs/translations/api-docs/use-autocomplete',
+    'docs-base/translations/api-docs/use-autocomplete',
     false,
-    /use-autocomplete.*.json$/,
+    /\.\/use-autocomplete.*.json$/,
   );
   const useAutocompleteApiDescriptions = mapApiPageTranslations(useAutocompleteApiReq);
 

docs/pages/base-ui/react-autocomplete/index.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
 import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/autocomplete/autocomplete.md?@mui/markdown';
+import * as pageProps from 'docs-base/data/base/components/autocomplete/autocomplete.md?@mui/markdown';
 
 export default function Page(props) {
   const { userLanguage, ...other } = props;

docs/pages/base-ui/react-badge/[docsTab]/index.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
 import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/badge/badge.md?@mui/markdown';
+import * as pageProps from 'docs-base/data/base/components/badge/badge.md?@mui/markdown';
 import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
 import BadgeApiJsonPageContent from '../../api/badge.json';
 import useBadgeApiJsonPageContent from '../../api/use-badge.json';
@@ -24,16 +24,16 @@ export const getStaticPaths = () => {
 
 export const getStaticProps = () => {
   const BadgeApiReq = require.context(
-    'docs/translations/api-docs-base/badge',
+    'docs-base/translations/api-docs/badge',
     false,
-    /badge.*.json$/,
+    /\.\/badge.*.json$/,
   );
   const BadgeApiDescriptions = mapApiPageTranslations(BadgeApiReq);
 
   const useBadgeApiReq = require.context(
-    'docs/translations/api-docs/use-badge',
+    'docs-base/translations/api-docs/use-badge',
     false,
-    /use-badge.*.json$/,
+    /\.\/use-badge.*.json$/,
   );
   const useBadgeApiDescriptions = mapApiPageTranslations(useBadgeApiReq);
 

docs/pages/base-ui/react-badge/index.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
 import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/badge/badge.md?@mui/markdown';
+import * as pageProps from 'docs-base/data/base/components/badge/badge.md?@mui/markdown';
 
 export default function Page(props) {
   const { userLanguage, ...other } = props;