[docs] API pages i18n (mui#23214)

docs/pages/api-docs/accordion-actions.js

@@ -1,15 +1,27 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+import ApiDocs from 'docs/src/modules/components/ApiDocs';
+import mapApiTranslations, { parsePropsMarkdown } from 'docs/src/modules/utils/mapApiTranslations';
+import jsonPageContent from './accordion-actions.json';
 
-const pageFilename = 'api/accordion-actions';
-const requireRaw = require.context('!raw-loader!./', false, /\/accordion-actions\.md$/);
-
-export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+export default function Page({ pageContent }) {
+  return <ApiDocs pageContent={pageContent} />;
 }
 
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
+Page.getInitialProps = async () => {
+  const req1 = require.context('docs/translations', false, /component-descriptions.*.json$/);
+  const req2 = require.context('docs/translations', false, /prop-descriptions.*.json$/);
+  const req3 = require.context('docs/translations', false, /class-descriptions.*.json$/);
+
+  const componentDescription = mapApiTranslations(req1, 'AccordionActions');
+  const propDescriptions = parsePropsMarkdown(mapApiTranslations(req2, 'AccordionActions'));
+  const classDescriptions = mapApiTranslations(req3, 'AccordionActions');
+
+  const pageContent = {
+    ...jsonPageContent,
+    componentDescription,
+    propDescriptions,
+    classDescriptions,
+  };
+
+  return { pageContent };
 };

docs/pages/api-docs/accordion-actions.json

@@ -0,0 +1,16 @@
+{
+  "props": {
+    "children": { "type": { "name": "node" } },
+    "classes": { "type": { "name": "object" } },
+    "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" },
+    "disableSpacing": { "type": { "name": "bool" } }
+  },
+  "name": "AccordionActions",
+  "styles": { "classes": ["root", "spacing"], "globalClasses": {} },
+  "spread": true,
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/material-ui/src/AccordionActions/AccordionActions.js",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/accordion/\">Accordion</a></li></ul>",
+  "styledComponent": false
+}

docs/pages/api-docs/accordion-details.js

@@ -1,15 +1,27 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+import ApiDocs from 'docs/src/modules/components/ApiDocs';
+import mapApiTranslations, { parsePropsMarkdown } from 'docs/src/modules/utils/mapApiTranslations';
+import jsonPageContent from './accordion-details.json';
 
-const pageFilename = 'api/accordion-details';
-const requireRaw = require.context('!raw-loader!./', false, /\/accordion-details\.md$/);
-
-export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+export default function Page({ pageContent }) {
+  return <ApiDocs pageContent={pageContent} />;
 }
 
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
+Page.getInitialProps = async () => {
+  const req1 = require.context('docs/translations', false, /component-descriptions.*.json$/);
+  const req2 = require.context('docs/translations', false, /prop-descriptions.*.json$/);
+  const req3 = require.context('docs/translations', false, /class-descriptions.*.json$/);
+
+  const componentDescription = mapApiTranslations(req1, 'AccordionDetails');
+  const propDescriptions = parsePropsMarkdown(mapApiTranslations(req2, 'AccordionDetails'));
+  const classDescriptions = mapApiTranslations(req3, 'AccordionDetails');
+
+  const pageContent = {
+    ...jsonPageContent,
+    componentDescription,
+    propDescriptions,
+    classDescriptions,
+  };
+
+  return { pageContent };
 };

docs/pages/api-docs/accordion-details.json

@@ -0,0 +1,15 @@
+{
+  "props": {
+    "children": { "type": { "name": "node" } },
+    "classes": { "type": { "name": "object" } },
+    "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }
+  },
+  "name": "AccordionDetails",
+  "styles": { "classes": ["root"], "globalClasses": {} },
+  "spread": true,
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/material-ui/src/AccordionDetails/AccordionDetails.js",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/accordion/\">Accordion</a></li></ul>",
+  "styledComponent": false
+}

docs/pages/api-docs/accordion-summary.js

@@ -1,15 +1,27 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+import ApiDocs from 'docs/src/modules/components/ApiDocs';
+import mapApiTranslations, { parsePropsMarkdown } from 'docs/src/modules/utils/mapApiTranslations';
+import jsonPageContent from './accordion-summary.json';
 
-const pageFilename = 'api/accordion-summary';
-const requireRaw = require.context('!raw-loader!./', false, /\/accordion-summary\.md$/);
-
-export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+export default function Page({ pageContent }) {
+  return <ApiDocs pageContent={pageContent} />;
 }
 
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
+Page.getInitialProps = async () => {
+  const req1 = require.context('docs/translations', false, /component-descriptions.*.json$/);
+  const req2 = require.context('docs/translations', false, /prop-descriptions.*.json$/);
+  const req3 = require.context('docs/translations', false, /class-descriptions.*.json$/);
+
+  const componentDescription = mapApiTranslations(req1, 'AccordionSummary');
+  const propDescriptions = parsePropsMarkdown(mapApiTranslations(req2, 'AccordionSummary'));
+  const classDescriptions = mapApiTranslations(req3, 'AccordionSummary');
+
+  const pageContent = {
+    ...jsonPageContent,
+    componentDescription,
+    propDescriptions,
+    classDescriptions,
+  };
+
+  return { pageContent };
 };

docs/pages/api-docs/accordion-summary.json

@@ -0,0 +1,25 @@
+{
+  "props": {
+    "children": { "type": { "name": "node" } },
+    "classes": { "type": { "name": "object" } },
+    "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" },
+    "expandIcon": { "type": { "name": "node" } },
+    "focusVisibleClassName": { "type": { "name": "string" } },
+    "onClick": { "type": { "name": "func" }, "required": false, "description": "@ignore" }
+  },
+  "name": "AccordionSummary",
+  "styles": {
+    "classes": ["root", "expanded", "focusVisible", "disabled", "content", "expandIconWrapper"],
+    "globalClasses": {
+      "expanded": "Mui-expanded",
+      "focusVisible": "Mui-focusVisible",
+      "disabled": "Mui-disabled"
+    }
+  },
+  "spread": true,
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/material-ui/src/AccordionSummary/AccordionSummary.js",
+  "inheritance": { "component": "ButtonBase", "pathname": "/api/button-base/" },
+  "demos": "<ul><li><a href=\"/components/accordion/\">Accordion</a></li></ul>",
+  "styledComponent": false
+}

docs/pages/api-docs/accordion.js

@@ -1,15 +1,27 @@
 import React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+import ApiDocs from 'docs/src/modules/components/ApiDocs';
+import mapApiTranslations, { parsePropsMarkdown } from 'docs/src/modules/utils/mapApiTranslations';
+import jsonPageContent from './accordion.json';
 
-const pageFilename = 'api/accordion';
-const requireRaw = require.context('!raw-loader!./', false, /\/accordion\.md$/);
-
-export default function Page({ docs }) {
-  return <MarkdownDocs docs={docs} />;
+export default function Page({ pageContent }) {
+  return <ApiDocs pageContent={pageContent} />;
 }
 
-Page.getInitialProps = () => {
-  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
-  return { demos, docs };
+Page.getInitialProps = async () => {
+  const req1 = require.context('docs/translations', false, /component-descriptions.*.json$/);
+  const req2 = require.context('docs/translations', false, /prop-descriptions.*.json$/);
+  const req3 = require.context('docs/translations', false, /class-descriptions.*.json$/);
+
+  const componentDescription = mapApiTranslations(req1, 'Accordion');
+  const propDescriptions = parsePropsMarkdown(mapApiTranslations(req2, 'Accordion'));
+  const classDescriptions = mapApiTranslations(req3, 'Accordion');
+
+  const pageContent = {
+    ...jsonPageContent,
+    componentDescription,
+    propDescriptions,
+    classDescriptions,
+  };
+
+  return { pageContent };
 };