[docs] Improve documentation (#287)

babel.config.js

@@ -1,8 +1,3 @@
-const path = require('path');
-
-const errorCodesPath = path.resolve(__dirname, './docs/public/static/error-codes.json');
-const missingError = process.env.MUI_EXTRACT_ERROR_CODES === 'true' ? 'write' : 'annotate';
-
 let defaultPresets;
 
 // We release a ES version of Material-UI.
@@ -33,15 +28,6 @@ const defaultAlias = {
 module.exports = {
   presets: defaultPresets.concat(['@babel/preset-react', '@babel/preset-typescript']),
   plugins: [
-    [
-      'babel-plugin-macros',
-      {
-        muiError: {
-          errorCodesPath,
-          missingError,
-        },
-      },
-    ],
     'babel-plugin-optimize-clsx',
     ['@babel/plugin-proposal-class-properties', { loose: true }],
     ['@babel/plugin-proposal-object-rest-spread', { loose: true }],

docs/babel.config.js

@@ -1,8 +1,5 @@
 const bpmr = require('babel-plugin-module-resolver');
 const fse = require('fs-extra');
-const path = require('path');
-
-const errorCodesPath = path.resolve(__dirname, './public/static/error-codes.json');
 
 function resolvePath(sourcePath, currentFile, opts) {
   if (sourcePath === 'markdown') {
@@ -19,6 +16,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',
@@ -35,11 +37,11 @@ module.exports = {
   ],
   plugins: [
     [
-      'babel-plugin-macros',
+      'babel-plugin-transform-rename-import',
       {
-        muiError: {
-          errorCodesPath,
-        },
+        replacements: [
+          { original: '@material-ui/utils/macros/MuiError.macro', replacement: 'react' },
+        ],
       },
     ],
     'babel-plugin-optimize-clsx',

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)                           | 🚧        | 🚧             |