[docs] Improve documentation

docs/babel.config.js

@@ -19,6 +19,11 @@ const alias = {
   '@material-ui/x-grid-modules': '../packages/grid/x-grid-modules/src',
   '@material-ui/x-grid': '../packages/grid/x-grid/src',
   '@material-ui/x-license': '../packages/x-license/src',
+  // Help in the event npm and git are significantly desynchronized.
+  '@material-ui/core': './node_modules/@material-ui/monorepo/packages/material-ui/src',
+  '@material-ui/styles': './node_modules/@material-ui/monorepo/packages/material-ui-styles/src',
+  '@material-ui/docs': './node_modules/@material-ui/monorepo/packages/material-ui-docs/src',
+  '@material-ui/lab': './node_modules/@material-ui/monorepo/packages/material-ui-lab/src',
   docs: './node_modules/@material-ui/monorepo/docs',
   docsx: './',
   modules: './node_modules/@material-ui/monorepo/modules',
@@ -34,14 +39,19 @@ module.exports = {
     ['next/babel', { 'transform-runtime': { corejs: 2, version: transformRuntimeVersion } }],
   ],
   plugins: [
-    [
-      'babel-plugin-macros',
-      {
-        muiError: {
-          errorCodesPath,
-        },
-      },
-    ],
+    ['babel-plugin-transform-rename-import', {
+      replacements: [
+        { original: '@material-ui/utils/macros/MuiError.macro', replacement: 'react' },
+      ],
+    }],
+    // [
+    //   'babel-plugin-macros',
+    //   {
+    //     muiError: {
+    //       errorCodesPath,
+    //     },
+    //   },
+    // ],
     'babel-plugin-optimize-clsx',
     // for IE 11 support
     '@babel/plugin-transform-object-assign',

docs/src/pages/components/data-grid/getting-started/getting-started.md

@@ -109,7 +109,7 @@ The data grid comes in 2 versions:
 
 The features only available in the commercial version are suffixed with a <span style="font-size: 26px" role="img" title="Enterprise">⚡️</span> icon.
 
-<img src="/static/x/header-icon.png" width="454" height="239" alt="">
+<img src="/static/x/header-icon.png" style="width: 454px;" alt="">
 
 ### Try XGrid for free
 
@@ -120,19 +120,16 @@ Please take the component for a test run, no need to contact us.
 
 If you have an enterprise grid running with an expired or missing license key the grid displays a watermark, and a warning is shown in the console.
 
-<img src="/static/x/watermark.png" width="658" height="175" alt="">
-<br />
-<br />
-<br />
+<img src="/static/x/watermark.png" style="width: 658px; margin-bottom: 3rem" alt="">
 
 See [Pricing](https://material-ui.com/store/items/material-ui-x/) for details on purchasing licenses.
 
 ### Feature comparison
 
 The following table summarizes the features available in the community `DataGrid` and enterprise `XGrid` components. All the features of the community version are available in the enterprise one.
 
-|                                                                                         | Community | Enterprise ⚡️ |
-| --------------------------------------------------------------------------------------- | --------- | -------------- |
+| Features                                                                                | Community | Enterprise ⚡️ |
+| :-------------------------------------------------------------------------------------- | --------- | -------------- |
 | **Column**                                                                              |           |                |
 | [Column resizing](/components/data-grid/columns/#column-resizing)                       | ❌        | ✅             |
 | [Column groups](/components/data-grid/columns/#column-groups)                           | 🚧        | 🚧             |