[docs] Automatically generate API docs

.circleci/config.yml

@@ -138,6 +138,12 @@ jobs:
       - run:
           name: Lint JSON
           command: yarn jsonlint
+      - run:
+          name: Generate the documentation
+          command: yarn docs:api
+      - run:
+          name: '`yarn docs:api` changes committed?'
+          command: git diff --exit-code
   test_browser:
     <<: *defaults
     docker:

docs/package.json

@@ -24,7 +24,7 @@
     "@material-ui/docs": "^4.0.0-beta.3",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
-    "@material-ui/monorepo": "https://github.com/mui-org/material-ui.git#master",
+    "@material-ui/monorepo": "https://github.com/m4theushw/material-ui.git#generate-docs",
     "@trendmicro/react-interpolate": "^0.5.5",
     "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.0",

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'api/grid-api';
+const requireRaw = require.context('!raw-loader!./', false, /\/grid-api\.md$/);
+
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'api/grid-cell-params';
+const requireRaw = require.context('!raw-loader!./', false, /\/grid-cell-params\.md$/);
+
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/data-grid/grid-cell-params.md

@@ -0,0 +1,28 @@
+# GridCellParams Interface
+
+<p class="description">Object passed as parameter in the column <a href="/api/data-grid/grid-col-def">GridColDef</a> cell renderer.</p>
+
+## Import
+
+```js
+import { GridCellParams } from '@material-ui/x-grid';
+// or
+import { GridCellParams } from '@material-ui/data-grid';
+```
+
+## Properties
+
+| Name                                                                                         | Type                                                                              | Description                                                      |
+| :------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------- | :--------------------------------------------------------------- |
+| <span class="prop-name">api</span>                                                           | <span class="prop-type">any</span>                                                | GridApi that let you manipulate the grid.                        |
+| <span class="prop-name">cellMode</span>                                                      | <span class="prop-type">GridCellMode</span>                                       | The mode of the cell.                                            |
+| <span class="prop-name">colDef</span>                                                        | <span class="prop-type">any</span>                                                | The column of the row that the current cell belongs to.          |
+| <span class="prop-name">field</span>                                                         | <span class="prop-type">string</span>                                             | The column field of the cell that triggered the event            |
+| <span class="prop-name">formattedValue</span>                                                | <span class="prop-type">GridCellValue</span>                                      | The cell value formatted with the column valueFormatter.         |
+| <span class="prop-name">getValue</span>                                                      | <span class="prop-type">(id: GridRowId, field: string) =&gt; GridCellValue</span> | Get the cell value of a row and field.                           |
+| <span class="prop-name">hasFocus</span>                                                      | <span class="prop-type">boolean</span>                                            | If true, the cell is the active element.                         |
+| <span class="prop-name">id</span>                                                            | <span class="prop-type">GridRowId</span>                                          | The grid row id.                                                 |
+| <span class="prop-name optional">isEditable<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">boolean</span>                                            | If true, the cell is editable.                                   |
+| <span class="prop-name">row</span>                                                           | <span class="prop-type">GridRowData</span>                                        | The row model of the row that the current cell belongs to.       |
+| <span class="prop-name">tabIndex</span>                                                      | <span class="prop-type">0 \| -1</span>                                            | the tabIndex value.                                              |
+| <span class="prop-name">value</span>                                                         | <span class="prop-type">GridCellValue</span>                                      | The cell value, but if the column has valueGetter, use getValue. |

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'api/grid-col-def';
+const requireRaw = require.context('!raw-loader!./', false, /\/grid-col-def\.md$/);
+
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/data-grid/grid-col-def.md

@@ -0,0 +1,41 @@
+# GridColDef Interface
+
+<p class="description">Column Definition interface.</p>
+
+## Import
+
+```js
+import { GridColDef } from '@material-ui/x-grid';
+// or
+import { GridColDef } from '@material-ui/data-grid';
+```
+
+## Properties
+
+| Name                                                                                                        | Type                                                                                                                                      | Default                                          | Description                                                                                           |
+| :---------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------- | :---------------------------------------------------------------------------------------------------- |
+| <span class="prop-name optional">align<sup><abbr title="optional">?</abbr></sup></span>                     | <span class="prop-type">GridAlignment</span>                                                                                              |                                                  | Allows to align the column values in cells.                                                           |
+| <span class="prop-name optional">cellClassName<sup><abbr title="optional">?</abbr></sup></span>             | <span class="prop-type">GridCellClassNamePropType</span>                                                                                  |                                                  | Class name that will be added in cells for that column.                                               |
+| <span class="prop-name optional">description<sup><abbr title="optional">?</abbr></sup></span>               | <span class="prop-type">string</span>                                                                                                     |                                                  | The description of the column rendered as tooltip if the column header name is not fully displayed.   |
+| <span class="prop-name optional">disableClickEventBubbling<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">boolean</span>                                                                                                    |                                                  | Allows to disable the click event in cells.                                                           |
+| <span class="prop-name optional">disableColumnMenu<sup><abbr title="optional">?</abbr></sup></span>         | <span class="prop-type">boolean</span>                                                                                                    |                                                  | If `true`, the column menu is disabled for this column.                                               |
+| <span class="prop-name optional">editable<sup><abbr title="optional">?</abbr></sup></span>                  | <span class="prop-type">boolean</span>                                                                                                    | <span class="prop-default">true<br /></span>     | If `true`, the cells of the column are editable.                                                      |
+| <span class="prop-name">field</span>                                                                        | <span class="prop-type">string</span>                                                                                                     |                                                  | The column identifier. It's used to map with GridRowData values.                                      |
+| <span class="prop-name optional">filterOperators<sup><abbr title="optional">?</abbr></sup></span>           | <span class="prop-type">GridFilterOperator[]</span>                                                                                       |                                                  | Allows setting the filter operators for this column.                                                  |
+| <span class="prop-name optional">filterable<sup><abbr title="optional">?</abbr></sup></span>                | <span class="prop-type">boolean</span>                                                                                                    | <span class="prop-default">true<br /></span>     | If `true`, the column is filterable.                                                                  |
+| <span class="prop-name optional">flex<sup><abbr title="optional">?</abbr></sup></span>                      | <span class="prop-type">number</span>                                                                                                     |                                                  | If set, it indicates that a column has fluid width. Range [0, ∞).                                     |
+| <span class="prop-name optional">headerAlign<sup><abbr title="optional">?</abbr></sup></span>               | <span class="prop-type">GridAlignment</span>                                                                                              |                                                  | Header cell element alignment.                                                                        |
+| <span class="prop-name optional">headerClassName<sup><abbr title="optional">?</abbr></sup></span>           | <span class="prop-type">string \| string[]</span>                                                                                         |                                                  | Class name that will be added in the column header cell.                                              |
+| <span class="prop-name optional">headerName<sup><abbr title="optional">?</abbr></sup></span>                | <span class="prop-type">string</span>                                                                                                     |                                                  | The title of the column rendered in the column header cell.                                           |
+| <span class="prop-name optional">hide<sup><abbr title="optional">?</abbr></sup></span>                      | <span class="prop-type">boolean</span>                                                                                                    | <span class="prop-default">false<br /></span>    | If `true`, hide the column.                                                                           |
+| <span class="prop-name optional">hideSortIcons<sup><abbr title="optional">?</abbr></sup></span>             | <span class="prop-type">boolean</span>                                                                                                    |                                                  | Toggle the visibility of the sort icons.                                                              |
+| <span class="prop-name optional">renderCell<sup><abbr title="optional">?</abbr></sup></span>                | <span class="prop-type">(params: GridCellParams) =&gt; ReactElement&lt;any, string \| JSXElementConstructor&lt;any&gt;&gt;</span>         |                                                  | Allows to override the component rendered as cell for this column.                                    |
+| <span class="prop-name optional">renderEditCell<sup><abbr title="optional">?</abbr></sup></span>            | <span class="prop-type">(params: GridCellParams) =&gt; ReactElement&lt;any, string \| JSXElementConstructor&lt;any&gt;&gt;</span>         |                                                  | Allows to override the component rendered in edit cell mode for this column.                          |
+| <span class="prop-name optional">renderHeader<sup><abbr title="optional">?</abbr></sup></span>              | <span class="prop-type">(params: GridColumnHeaderParams) =&gt; ReactElement&lt;any, string \| JSXElementConstructor&lt;any&gt;&gt;</span> |                                                  | Allows to render a component in the column header cell.                                               |
+| <span class="prop-name optional">resizable<sup><abbr title="optional">?</abbr></sup></span>                 | <span class="prop-type">boolean</span>                                                                                                    | <span class="prop-default">true<br /></span>     | If `true`, the column is resizable.                                                                   |
+| <span class="prop-name optional">sortComparator<sup><abbr title="optional">?</abbr></sup></span>            | <span class="prop-type">GridComparatorFn</span>                                                                                           |                                                  | A comparator function used to sort rows.                                                              |
+| <span class="prop-name optional">sortable<sup><abbr title="optional">?</abbr></sup></span>                  | <span class="prop-type">boolean</span>                                                                                                    | <span class="prop-default">true<br /></span>     | If `true`, the column is sortable.                                                                    |
+| <span class="prop-name optional">type<sup><abbr title="optional">?</abbr></sup></span>                      | <span class="prop-type">string</span>                                                                                                     | <span class="prop-default">'string'<br /></span> | Type allows to merge this object with a default definition [GridColDef](/api/data-grid/grid-col-def). |
+| <span class="prop-name optional">valueFormatter<sup><abbr title="optional">?</abbr></sup></span>            | <span class="prop-type">(params: GridValueFormatterParams) =&gt; GridCellValue</span>                                                     |                                                  | Function that allows to apply a formatter before rendering its value.                                 |
+| <span class="prop-name optional">valueGetter<sup><abbr title="optional">?</abbr></sup></span>               | <span class="prop-type">(params: GridValueGetterParams) =&gt; GridCellValue</span>                                                        |                                                  | Function that allows to get a specific data instead of field to render in the cell.                   |
+| <span class="prop-name optional">width<sup><abbr title="optional">?</abbr></sup></span>                     | <span class="prop-type">number</span>                                                                                                     | <span class="prop-default">100<br /></span>      | Set the width of the column.                                                                          |

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

@@ -0,0 +1,47 @@
+{
+  "name": "GridFilterApi",
+  "description": "The filter API interface that is available in the grid apiRef.",
+  "properties": [
+    {
+      "name": "applyFilter",
+      "description": "Applies a GridFilterItem on alls rows. If no <code>linkOperator</code> is given, the &quot;and&quot; operator is used.",
+      "type": "(item: GridFilterItem, linkOperator?: GridLinkOperator) => void"
+    },
+    {
+      "name": "applyFilterLinkOperator",
+      "description": "Changes the GridLinkOperator used to connect the filters.",
+      "type": "(operator: GridLinkOperator) => void"
+    },
+    {
+      "name": "applyFilters",
+      "description": "Applies all filters on all rows.",
+      "type": "() => void"
+    },
+    {
+      "name": "deleteFilter",
+      "description": "Deletes a GridFilterItem.",
+      "type": "(item: GridFilterItem) => void"
+    },
+    {
+      "name": "getVisibleRowModels",
+      "description": "Returns a sorted <code>Map</code> containing only the visible rows.",
+      "type": "() => Map<GridRowId, GridRowData>"
+    },
+    { "name": "hideFilterPanel", "description": "Hides the filter panel.", "type": "() => void" },
+    {
+      "name": "setFilterModel",
+      "description": "Sets the filter model to the one given by <code>model</code>.",
+      "type": "(model: GridFilterModelState) => void"
+    },
+    {
+      "name": "showFilterPanel",
+      "description": "Shows the filter panel. If <code>targetColumnField</code> is given, a filter for this field is also added.",
+      "type": "(targetColumnField?: string) => void"
+    },
+    {
+      "name": "upsertFilter",
+      "description": "Updates or inserts a GridFilterItem.",
+      "type": "(item: GridFilterItem) => void"
+    }
+  ]
+}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'api/grid-row-params';
+const requireRaw = require.context('!raw-loader!./', false, /\/grid-row-params\.md$/);
+
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};