[docs] Generate docs for components

babel.config.js

@@ -22,6 +22,7 @@ const defaultAlias = {
   '@mui/x-data-grid-generator': './packages/grid/x-grid-data-generator/src',
   '@mui/x-data-grid-pro': './packages/grid/x-grid/src',
   '@mui/x-license-pro': './packages/x-license/src',
+  'typescript-to-proptypes': '@material-ui/monorepo/packages/typescript-to-proptypes/src',
   docs: './node_modules/@material-ui/monorepo/docs',
 };
 

docs/next.config.js

@@ -41,7 +41,7 @@ module.exports = {
     REACT_STRICT_MODE: reactStrictMode,
     // Set by Netlify
     GRID_EXPERIMENTAL_ENABLED: process.env.PULL_REQUEST === 'false' ? 'false' : 'true',
-    SOURCE_CODE_ROOT_URL: 'https://github.com/mui-org/material-ui-x/blob/master',
+    SOURCE_CODE_ROOT_URL: 'https://github.com/mui-org/material-ui-x/blob/next',
     SOURCE_CODE_REPO: 'https://github.com/mui-org/material-ui-x',
   },
   webpack5: true,

docs/package.json

@@ -25,10 +25,12 @@
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "@mui/icons-material": "^5.0.0-rc.1",
+    "@mui/lab": "^5.0.0-alpha.45",
     "@mui/material": "^5.0.0-rc.1",
     "@mui/styles": "^5.0.0-rc.1",
     "@mui/utils": "^5.0.0-rc.1",
     "@trendmicro/react-interpolate": "^0.5.5",
+    "@types/lodash": "^4.14.173",
     "@types/react-dom": "^17.0.9",
     "@types/react-router-dom": "^5.1.8",
     "accept-language": "^3.0.18",
@@ -66,9 +68,11 @@
     "react": "^17.0.2",
     "react-docgen": "^5.4.0",
     "react-dom": "^17.0.2",
+    "react-intersection-observer": "^8.32.1",
     "react-is": "^17.0.2",
     "react-router": "^5.2.1",
     "react-router-dom": "^5.2.1",
+    "react-swipeable-views": "^0.14.0",
     "react-text-mask": "^5.4.3",
     "recast": "^0.20.5",
     "rimraf": "^3.0.2",

docs/pages/api-docs/data-grid/data-grid-pro.js

@@ -1,7 +1,23 @@
 import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { demos, docs, demoComponents } from './data-grid-pro.md?@mui/markdown';
+import ApiPage from 'docsx/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './data-grid-pro.json';
 
-export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
 }
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docsx/translations/api-docs/data-grid',
+    false,
+    /data-grid-pro.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/api-docs/data-grid/data-grid-pro.json

@@ -0,0 +1,287 @@
+{
+  "props": {
+    "columns": {
+      "type": { "name": "arrayOf", "description": "Array<object>" },
+      "required": true
+    },
+    "rows": {
+      "type": { "name": "arrayOf", "description": "Array<object>" },
+      "required": true
+    },
+    "apiRef": { "type": { "name": "shape", "description": "{ current: object }" } },
+    "aria-label": { "type": { "name": "string" } },
+    "aria-labelledby": { "type": { "name": "string" } },
+    "autoHeight": { "type": { "name": "bool" } },
+    "autoPageSize": { "type": { "name": "bool" } },
+    "checkboxSelection": { "type": { "name": "bool" } },
+    "checkboxSelectionVisibleOnly": {
+      "type": { "name": "custom", "description": "bool" },
+      "default": "false"
+    },
+    "classes": { "type": { "name": "object" } },
+    "columnBuffer": { "type": { "name": "number" }, "default": "2" },
+    "columnTypes": { "type": { "name": "object" } },
+    "components": { "type": { "name": "object" } },
+    "componentsProps": { "type": { "name": "object" } },
+    "density": {
+      "type": {
+        "name": "enum",
+        "description": "'comfortable'<br>&#124;&nbsp;'compact'<br>&#124;&nbsp;'standard'"
+      },
+      "default": "\"standard\""
+    },
+    "disableColumnFilter": { "type": { "name": "bool" } },
+    "disableColumnMenu": { "type": { "name": "bool" } },
+    "disableColumnReorder": { "type": { "name": "bool" } },
+    "disableColumnResize": { "type": { "name": "bool" } },
+    "disableColumnSelector": { "type": { "name": "bool" } },
+    "disableDensitySelector": { "type": { "name": "bool" } },
+    "disableExtendRowFullWidth": { "type": { "name": "bool" } },
+    "disableMultipleColumnsFiltering": { "type": { "name": "bool" } },
+    "disableMultipleColumnsSorting": { "type": { "name": "bool" } },
+    "disableMultipleSelection": { "type": { "name": "bool" } },
+    "disableSelectionOnClick": { "type": { "name": "bool" } },
+    "disableVirtualization": { "type": { "name": "bool" } },
+    "editMode": {
+      "type": { "name": "enum", "description": "'cell'<br>&#124;&nbsp;'row'" },
+      "default": "\"cell\""
+    },
+    "editRowsModel": { "type": { "name": "object" } },
+    "error": { "type": { "name": "any" } },
+    "filterMode": {
+      "type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" },
+      "default": "\"client\""
+    },
+    "filterModel": {
+      "type": {
+        "name": "shape",
+        "description": "{ items: Array&lt;{ columnField?: string, id?: number<br>&#124;&nbsp;string, operatorValue?: string, value?: any }&gt;, linkOperator?: 'and'<br>&#124;&nbsp;'or' }"
+      }
+    },
+    "getCellClassName": { "type": { "name": "func" } },
+    "getRowClassName": { "type": { "name": "func" } },
+    "getRowId": { "type": { "name": "func" } },
+    "headerHeight": { "type": { "name": "number" }, "default": "56" },
+    "hideFooter": { "type": { "name": "bool" } },
+    "hideFooterPagination": { "type": { "name": "bool" } },
+    "hideFooterRowCount": {
+      "type": { "name": "custom", "description": "bool" },
+      "default": "false"
+    },
+    "hideFooterSelectedRowCount": { "type": { "name": "bool" } },
+    "isCellEditable": { "type": { "name": "func" } },
+    "isRowSelectable": { "type": { "name": "func" } },
+    "loading": { "type": { "name": "bool" } },
+    "localeText": { "type": { "name": "object" } },
+    "logger": {
+      "type": {
+        "name": "shape",
+        "description": "{ debug: func, error: func, info: func, warn: func }"
+      },
+      "default": "console"
+    },
+    "logLevel": {
+      "type": {
+        "name": "enum",
+        "description": "'debug'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'warn'<br>&#124;&nbsp;false"
+      },
+      "default": "\"debug\""
+    },
+    "nonce": { "type": { "name": "string" } },
+    "onCellBlur": { "type": { "name": "func" } },
+    "onCellClick": { "type": { "name": "func" } },
+    "onCellDoubleClick": { "type": { "name": "func" } },
+    "onCellEditCommit": { "type": { "name": "func" } },
+    "onCellEditStart": { "type": { "name": "func" } },
+    "onCellEditStop": { "type": { "name": "func" } },
+    "onCellEnter": { "type": { "name": "func" } },
+    "onCellFocusOut": { "type": { "name": "func" } },
+    "onCellKeyDown": { "type": { "name": "func" } },
+    "onCellLeave": { "type": { "name": "func" } },
+    "onCellOut": { "type": { "name": "func" } },
+    "onCellOver": { "type": { "name": "func" } },
+    "onCellValueChange": { "type": { "name": "func" } },
+    "onColumnHeaderClick": { "type": { "name": "func" } },
+    "onColumnHeaderDoubleClick": { "type": { "name": "func" } },
+    "onColumnHeaderEnter": { "type": { "name": "func" } },
+    "onColumnHeaderLeave": { "type": { "name": "func" } },
+    "onColumnHeaderOut": { "type": { "name": "func" } },
+    "onColumnHeaderOver": { "type": { "name": "func" } },
+    "onColumnOrderChange": { "type": { "name": "func" } },
+    "onColumnResize": { "type": { "name": "func" } },
+    "onColumnVisibilityChange": { "type": { "name": "func" } },
+    "onColumnWidthChange": { "type": { "name": "func" } },
+    "onEditCellPropsChange": { "type": { "name": "func" } },
+    "onEditRowsModelChange": { "type": { "name": "func" } },
+    "onError": { "type": { "name": "func" } },
+    "onFilterModelChange": { "type": { "name": "func" } },
+    "onPageChange": { "type": { "name": "func" } },
+    "onPageSizeChange": { "type": { "name": "func" } },
+    "onResize": { "type": { "name": "func" } },
+    "onRowClick": { "type": { "name": "func" } },
+    "onRowDoubleClick": { "type": { "name": "func" } },
+    "onRowEditCommit": { "type": { "name": "func" } },
+    "onRowEditStart": { "type": { "name": "func" } },
+    "onRowEditStop": { "type": { "name": "func" } },
+    "onRowEnter": { "type": { "name": "func" } },
+    "onRowLeave": { "type": { "name": "func" } },
+    "onRowOut": { "type": { "name": "func" } },
+    "onRowOver": { "type": { "name": "func" } },
+    "onRowsScrollEnd": { "type": { "name": "func" } },
+    "onSelectionModelChange": { "type": { "name": "func" } },
+    "onSortModelChange": { "type": { "name": "func" } },
+    "onStateChange": { "type": { "name": "func" } },
+    "onViewportRowsChange": { "type": { "name": "func" } },
+    "page": { "type": { "name": "number" }, "default": "1" },
+    "pageSize": { "type": { "name": "number" }, "default": "100" },
+    "pagination": { "type": { "name": "bool" } },
+    "paginationMode": {
+      "type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" },
+      "default": "\"client\""
+    },
+    "rowCount": { "type": { "name": "number" } },
+    "rowHeight": { "type": { "name": "number" }, "default": "52" },
+    "rowsPerPageOptions": {
+      "type": { "name": "arrayOf", "description": "Array&lt;number&gt;" },
+      "default": "[25, 50, 100]"
+    },
+    "scrollbarSize": { "type": { "name": "number" } },
+    "scrollEndThreshold": { "type": { "name": "number" } },
+    "selectionModel": {
+      "type": {
+        "name": "union",
+        "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;string"
+      }
+    },
+    "showCellRightBorder": { "type": { "name": "bool" } },
+    "showColumnRightBorder": { "type": { "name": "bool" } },
+    "sortingMode": {
+      "type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" },
+      "default": "\"client\""
+    },
+    "sortingOrder": {
+      "type": { "name": "arrayOf", "description": "Array&lt;'asc'<br>&#124;&nbsp;'desc'&gt;" },
+      "default": "['asc', 'desc', null]"
+    },
+    "sortModel": {
+      "type": {
+        "name": "arrayOf",
+        "description": "Array&lt;{ field: string, sort?: 'asc'<br>&#124;&nbsp;'desc' }&gt;"
+      }
+    }
+  },
+  "slots": {
+    "BooleanCellFalseIcon": { "default": "GridCloseIcon", "type": { "name": "elementType" } },
+    "BooleanCellTrueIcon": { "default": "GridCheckIcon", "type": { "name": "elementType" } },
+    "Checkbox": { "default": "Checkbox", "type": { "name": "elementType" } },
+    "ColumnFilteredIcon": { "default": "GridFilterAltIcon", "type": { "name": "elementType" } },
+    "ColumnMenu": { "default": "GridColumnMenu", "type": { "name": "elementType" } },
+    "ColumnMenuIcon": {
+      "default": "GridTripleDotsVerticalIcon",
+      "type": { "name": "elementType" }
+    },
+    "ColumnResizeIcon": { "default": "GridSeparatorIcon", "type": { "name": "elementType" } },
+    "ColumnSelectorIcon": { "default": "GridColumnIcon", "type": { "name": "elementType" } },
+    "ColumnSortedAscendingIcon": {
+      "default": "GridArrowUpwardIcon",
+      "type": { "name": "elementType | null" }
+    },
+    "ColumnSortedDescendingIcon": {
+      "default": "GridArrowDownwardIcon",
+      "type": { "name": "elementType | null" }
+    },
+    "ColumnsPanel": { "default": "GridColumnsPanel", "type": { "name": "elementType" } },
+    "ColumnUnsortedIcon": {
+      "default": "GridColumnUnsortedIcon",
+      "type": { "name": "elementType | null" }
+    },
+    "DensityComfortableIcon": {
+      "default": "GridViewStreamIcon",
+      "type": { "name": "elementType" }
+    },
+    "DensityCompactIcon": { "default": "GridViewHeadlineIcon", "type": { "name": "elementType" } },
+    "DensityStandardIcon": { "default": "GridTableRowsIcon", "type": { "name": "elementType" } },
+    "ErrorOverlay": { "default": "ErrorOverlay", "type": { "name": "elementType" } },
+    "ExportIcon": { "default": "GridSaveAltIcon", "type": { "name": "elementType" } },
+    "FilterPanel": { "default": "GridFilterPanel", "type": { "name": "elementType" } },
+    "Footer": { "default": "GridFooter", "type": { "name": "elementType" } },
+    "Header": { "default": "GridHeader", "type": { "name": "elementType" } },
+    "LoadingOverlay": { "default": "GridLoadingOverlay", "type": { "name": "elementType" } },
+    "MoreActionsIcon": { "default": "GridMoreVertIcon", "type": { "name": "elementType" } },
+    "NoResultsOverlay": { "default": "GridNoResultsOverlay", "type": { "name": "elementType" } },
+    "NoRowsOverlay": { "default": "GridNoRowsOverlay", "type": { "name": "elementType" } },
+    "OpenFilterButtonIcon": { "default": "GridFilterListIcon", "type": { "name": "elementType" } },
+    "Pagination": { "default": "Pagination", "type": { "name": "elementType" } },
+    "Panel": { "default": "GridPanel", "type": { "name": "elementType" } },
+    "PreferencesPanel": { "default": "GridPreferencesPanel", "type": { "name": "elementType" } },
+    "Toolbar": { "default": "null", "type": { "name": "elementType | null" } }
+  },
+  "name": "DataGridPro",
+  "styles": {
+    "classes": [
+      "autoHeight",
+      "booleanCell",
+      "cell--editable",
+      "cell--editing",
+      "cell--textCenter",
+      "cell--textLeft",
+      "cell--textRight",
+      "cell--withRenderer",
+      "cell",
+      "cellCheckbox",
+      "checkboxInput",
+      "columnHeader--alignCenter",
+      "columnHeader--alignLeft",
+      "columnHeader--alignRight",
+      "columnHeader--dragging",
+      "columnHeader--moving",
+      "columnHeader--numeric",
+      "columnHeader--sortable",
+      "columnHeader--sorted",
+      "columnHeader",
+      "columnHeaderCheckbox",
+      "columnHeaderDraggableContainer",
+      "columnHeaderDropZone",
+      "columnHeaderTitle",
+      "columnHeaderTitleContainer",
+      "columnHeaderWrapper",
+      "columnsContainer",
+      "columnSeparator--resizable",
+      "columnSeparator--resizing",
+      "columnSeparator",
+      "dataContainer",
+      "editBooleanCell",
+      "editInputCell",
+      "filterIcon",
+      "footerContainer",
+      "iconButtonContainer",
+      "iconSeparator",
+      "main",
+      "menuIcon",
+      "menuIconButton",
+      "menuOpen",
+      "overlay",
+      "renderingZone",
+      "root",
+      "row--editable",
+      "row--editing",
+      "row",
+      "rowCount",
+      "scrollArea",
+      "scrollAreaLeft",
+      "scrollAreaRight",
+      "selectedRowCount",
+      "sortIcon",
+      "toolbarContainer",
+      "viewport",
+      "window",
+      "windowContainer",
+      "withBorder"
+    ],
+    "globalClasses": {},
+    "name": "MuiDataGrid"
+  },
+  "forwardsRefTo": "GridRoot",
+  "filename": "/packages/grid/x-grid/src/DataGridPro.tsx",
+  "demos": "<ul><li><a href=\"/components/data-grid#commercial-version\">DataGridPro</a></li></ul>"
+}

docs/pages/api-docs/data-grid/data-grid.js

@@ -1,7 +1,19 @@
 import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import { demos, docs, demoComponents } from './data-grid.md?@mui/markdown';
+import ApiPage from 'docsx/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './data-grid.json';
 
-export default function Page() {
-  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
 }
+
+Page.getInitialProps = () => {
+  const req = require.context('docsx/translations/api-docs/data-grid', false, /data-grid.*.json$/);
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};