[code-infra] Cleanup monorepo and @mui/docs usage

docs/data/charts/gauge/gauge.md

@@ -11,7 +11,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/meter/
 
 <p class="description">Gauge charts let the user evaluate metrics.</p>
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+{{"component": "@mui/docs/ComponentLinkHeader", "design": false}}
 
 ## Basics
 

docs/data/charts/overview/overview.md

@@ -9,7 +9,7 @@ packageName: '@mui/x-charts'
 
 <p class="description">A fast and extendable library of react chart components for data visualization.</p>
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+{{"component": "@mui/docs/ComponentLinkHeader", "design": false}}
 
 ## Overview
 

docs/data/data-grid/overview/overview.md

@@ -12,7 +12,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/grid/
 The Data Grid component is built with React and TypeScript to provide a smooth UX for manipulating an unlimited set of data.
 It features an intuitive API for real-time updates as well as theming and custom templates—all with blazing-fast performance.
 
-{{"component": "modules/components/ComponentLinkHeader.js"}}
+{{"component": "@mui/docs/ComponentLinkHeader"}}
 
 ## Overview
 

docs/data/date-pickers/date-picker/CustomizationExamplesNoSnap.js

@@ -4,7 +4,7 @@ import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import Stack from '@mui/material/Stack';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 import CustomizationPlayground from 'docsx/src/modules/components/CustomizationPlayground';
 import CircularProgress from '@mui/material/CircularProgress';
 import { pickerExamples } from './examplesConfig.styling';

docs/data/date-pickers/overview/overview.md

@@ -11,7 +11,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepick
 
 <p class="description">These react date picker and time picker components let users select date or time values.</p>
 
-{{"component": "modules/components/ComponentLinkHeader.js"}}
+{{"component": "@mui/docs/ComponentLinkHeader"}}
 
 ## Overview
 

docs/data/tree-view/overview/overview.md

@@ -10,7 +10,7 @@ packageName: '@mui/x-tree-view'
 
 <p class="description">The Tree View component lets users navigate hierarchical lists of data with nested levels that can be expanded and collapsed.</p>
 
-{{"component": "modules/components/ComponentLinkHeader.js"}}
+{{"component": "@mui/docs/ComponentLinkHeader"}}
 
 ## Available components
 

docs/next.config.mjs

@@ -68,7 +68,7 @@ export default withDocsInfra({
   transpilePackages: [
     // TODO, those shouldn't be needed in the first place
     '@mui/monorepo', // Migrate everything to @mui/docs until the @mui/monorepo dependency becomes obsolete
-    '@mui/docs',
+    '@mui/docs', // needed to fix slashes in the generated links (https://github.com/mui/mui-x/pull/13713#issuecomment-2205591461, )
   ],
   // Avoid conflicts with the other Next.js apps hosted under https://mui.com/
   assetPrefix: process.env.DEPLOY_ENV === 'development' ? undefined : '/x',

docs/package.json

@@ -28,6 +28,7 @@
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.5",
     "@mui/base": "^5.0.0-beta.40",
+    "@mui/docs": "^6.0.0-alpha.13",
     "@mui/icons-material": "^5.15.21",
     "@mui/joy": "5.0.0-beta.32",
     "@mui/lab": "^5.0.0-alpha.170",

docs/src/modules/components/ChartFeaturesGrid.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Grid from '@mui/material/Unstable_Grid2';
-import InfoCard from 'docs/src/components/action/InfoCard';
+import { InfoCard } from '@mui/docs/InfoCard';
 import LineAxisRoundedIcon from '@mui/icons-material/LineAxisRounded';
 import DashboardCustomizeRoundedIcon from '@mui/icons-material/DashboardCustomizeRounded';
 import LegendToggleRoundedIcon from '@mui/icons-material/LegendToggleRounded';

docs/src/modules/components/ChartsUsageDemo.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Box from '@mui/joy/Box';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import DemoPropsForm from './DemoPropsForm';
 

docs/src/modules/components/CustomizationPlayground.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
-// @ts-ignore
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
-// @ts-ignore
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { BrandingProvider } from '@mui/docs/branding';
 import { styled, Theme, alpha, useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import Tabs from '@mui/material/Tabs';
@@ -353,6 +351,7 @@ const CustomizationPlayground = function CustomizationPlayground({
           {moreInformation}
         </PlaygroundDemoArea>
         {shouldBeInteractive && (
+          // @ts-expect-error - should no longer be a problem when `BrandingProvider` supports `undefined`: https://github.com/mui/material-ui/pull/42833
           <BrandingProvider>
             <PlaygroundConfigArea>
               <ConfigSectionWrapper>
@@ -406,6 +405,7 @@ const CustomizationPlayground = function CustomizationPlayground({
         )}
       </PlaygroundWrapper>
       {selectedDemo && customizationOptions && selectedCustomizationOption && (
+        // @ts-expect-error - should no longer be a problem when `BrandingProvider` supports `undefined`: https://github.com/mui/material-ui/pull/42833
         <BrandingProvider>
           <TabsWrapper>
             <StylingApproachTabs

docs/src/modules/components/InstallationGrid.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Grid from '@mui/material/Unstable_Grid2';
-import InfoCard from 'docs/src/components/action/InfoCard';
+import { InfoCard } from '@mui/docs/InfoCard';
 import AccountTreeRounded from '@mui/icons-material/AccountTreeRounded';
 import PivotTableChartRoundedIcon from '@mui/icons-material/PivotTableChartRounded';
 import CalendarMonthRoundedIcon from '@mui/icons-material/CalendarMonthRounded';

docs/src/modules/components/InterfaceApiPage.js

@@ -6,7 +6,7 @@ import Typography from '@mui/material/Typography';
 import Alert from '@mui/material/Alert';
 import VerifiedRoundedIcon from '@mui/icons-material/VerifiedRounded';
 import { alpha } from '@mui/material/styles';
-import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
+import { useTranslate, useUserLanguage } from '@mui/docs/i18n';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import { MarkdownElement } from '@mui/docs/MarkdownElement';
 import { SectionTitle } from '@mui/docs/SectionTitle';

scripts/buildApiDocs/tsconfig.json

@@ -14,9 +14,6 @@
     "strict": true,
     "baseUrl": "./",
     "paths": {
-      "@mui/material-nextjs/*": [
-        "../../node_modules/@mui/monorepo/packages/mui-material-nextjs/src/*"
-      ],
       "docs/config": ["../../node_modules/@mui/monorepo/docs/config.d.ts"],
       "@mui-internal/api-docs-builder": [
         "../../node_modules/@mui/monorepo/packages/api-docs-builder/index.ts"