[core] Sync ApiPage.js with monorepo

[oliviertassinari]

I apply mui/material-ui#35202

https://deploy-preview-7073--material-ui-x.netlify.app/x/api/data-grid/data-grid-pro/

---

Same comment as with #7051 ("We should be able to remove this duplication of the ApiPage component as we move forward."). The git diff between ApiPage.js in the two repositories looks like this:

diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js
index 112aab9478..77d2978167 100644
--- a/docs/src/modules/components/ApiPage.js
+++ b/docs/src/modules/components/ApiPage.js
@@ -171,6 +175,7 @@ function getTranslatedHeader(t, header) {
     import: t('api-docs.import'),
     'component-name': t('api-docs.componentName'),
     props: t('api-docs.props'),
+    slots: t('api-docs.slots'),
     inheritance: t('api-docs.inheritance'),
     css: 'CSS',
   };
@@ -222,7 +227,9 @@ export default function ApiPage(props) {
     name: componentName,
     props: componentProps,
     spread,
+    slots,
     styles: componentStyles,
+    packages,
   } = pageContent;

   const {
@@ -230,11 +237,12 @@ export default function ApiPage(props) {
     componentDescriptionToc = [],
     classDescriptions,
     propDescriptions,
+    slotDescriptions,
   } = descriptions[userLanguage];
   const description = t('api-docs.pageDescription').replace(/{{name}}/, componentName);

   const source = filename
-    .replace(/\/packages\/mui(-(.+?))?\/src/, (match, dash, pkg) => `@mui/${pkg}`)
+    .replace(/\/packages\/(grid\/|)(.+?)?\/src/, (match, dash, pkg) => `@mui/${pkg}`)
     // convert things like `/Table/Table.js` to ``
     .replace(/\/([^/]+)\/\1\.(js|tsx)$/, '');

@@ -259,6 +267,7 @@ export default function ApiPage(props) {
     ...componentDescriptionToc,
     componentStyles.name && createTocEntry('component-name'),
     createTocEntry('props'),
+    Object.keys(slots).length && createTocEntry('slots'),
     componentStyles.classes.length > 0 && createTocEntry('css'),
   ].filter(Boolean);

@@ -285,6 +294,20 @@ export default function ApiPage(props) {
     inheritanceSuffix = t('api-docs.inheritanceSuffixTransition');
   }

+  const imports = [];
+
+  if (source === '@mui/x-date-pickers' || source === '@mui/x-date-pickers-pro') {
+    packages.forEach((pkg) => {
+      // e.g. import DatePicker from '@mui/x-date-pickers/DatePicker';
+      imports.push(`import { ${pkg.componentName} } from '${pkg.packageName}/${componentName}';`);
+    });
+  }
+
+  packages.forEach((pkg) => {
+    // e.g. import { DatePicker } from '@mui/x-date-pickers';
+    imports.push(`import { ${pkg.componentName} } from '${pkg.packageName}';`);
+  });
+
   return (
     <AppLayoutDocs
       description={description}
@@ -316,13 +339,7 @@ export default function ApiPage(props) {
           <span dangerouslySetInnerHTML={{ __html: demos }} />
         </div>
         <Heading hash="import" />
-        <HighlightedCode
-          code={`
-import ${componentName} from '${source}/${componentName}';
-// ${t('or')}
-import { ${componentName} } from '${source}';`}
-          language="jsx"
-        />
+        <HighlightedCode code={imports.join(`\n// ${t('or')}\n`)} language="jsx" />
         <span dangerouslySetInnerHTML={{ __html: t('api-docs.importDifference') }} />
         {componentDescription ? (
           <React.Fragment>
@@ -352,6 +369,12 @@ import { ${componentName} } from '${source}';`}
         <p dangerouslySetInnerHTML={{ __html: spreadHint }} />
         <PropsTable componentProps={componentProps} propDescriptions={propDescriptions} />
         <br />
+        {Object.keys(slots).length ? (
+          <React.Fragment>
+            <Heading hash="slots" />
+            <PropsTable componentProps={slots} propDescriptions={slotDescriptions} />
+          </React.Fragment>
+        ) : null}
         {cssComponent && (
           <React.Fragment>
             <span

It seems that we could easily add the slots logic to Material UI which would benefit them (cc @samuelsycamore). And move the import code generation logic to the yarn docs:api script, to keep the UI focused on presenting the information.

[mui-bot]

	Messages
📖	Netlify deploy preview: https://deploy-preview-7073--material-ui-x.netlify.app/

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	618.3	911	746.9	742.34	111.996
Sort 100k rows	ms	565.1	1,093.1	849.8	849.18	167.941
Select 100k rows	ms	187.5	269.6	225.3	226.12	26.082
Deselect 100k rows	ms	130.3	313.9	188.5	204.34	61.393

Generated by 🚫 dangerJS against ca9ce36

[flaviendelangle]

It seems that we could easily add the slots logic to Material UI which would benefit them (cc @samuelsycamore). And move the import code generation logic to the yarn docs:api script, to keep the UI focused on presenting the information.

Fully agree
Note the the yarn docs:api scripts are not shared across repos

[samuelsycamore]

It seems that we could easily add the slots logic to Material UI which would benefit them (cc @samuelsycamore).

Sounds great to me!