[docs] Polish the first experience (#261)

mui · Sep 11, 2020 · ddad776 · ddad776
1 parent cde8cee
commit ddad776
Show file tree

Hide file tree

Showing 32 changed files with 465 additions and 388 deletions.
diff --git a/docs/public/_redirects b/docs/public/_redirects
@@ -0,0 +1,3 @@
+# Proxies
+# material-ui-x is configured to be hosted at the root.
+/static/* https://material-ui.netlify.app/static/:splat 200
diff --git a/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.js b/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.js
@@ -27,22 +27,22 @@ const rows = [
   },
 ];
 
-const valueFormatter = new Intl.NumberFormat('en-US', {
+const currencyFormatter = new Intl.NumberFormat('en-US', {
   style: 'currency',
   currency: 'USD',
 });
 
 const usdPrice = {
   type: 'number',
   width: 130,
-  valueFormatter: ({ value }) => valueFormatter.format(Number(value)),
+  valueFormatter: ({ value }) => currencyFormatter.format(Number(value)),
   cellClassName: 'font-tabular-nums',
 };
 
 const useStyles = makeStyles({
   root: {
     '& .font-tabular-nums': {
-      fontVariantNumeric: 'font-tabular-nums',
+      fontVariantNumeric: 'tabular-nums',
     },
   },
 });

diff --git a/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.tsx b/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.tsx
@@ -27,22 +27,22 @@ const rows = [
   },
 ];
 
-const valueFormatter = new Intl.NumberFormat('en-US', {
+const currencyFormatter = new Intl.NumberFormat('en-US', {
   style: 'currency',
   currency: 'USD',
 });
 
 const usdPrice: ColTypeDef = {
   type: 'number',
   width: 130,
-  valueFormatter: ({ value }) => valueFormatter.format(Number(value)),
+  valueFormatter: ({ value }) => currencyFormatter.format(Number(value)),
   cellClassName: 'font-tabular-nums',
 };
 
 const useStyles = makeStyles({
   root: {
     '& .font-tabular-nums': {
-      fontVariantNumeric: 'font-tabular-nums',
+      fontVariantNumeric: 'tabular-nums',
     },
   },
 });

diff --git a/docs/src/pages/components/data-grid/overview/DataGridDemo.js b/docs/src/pages/components/data-grid/overview/DataGridDemo.js
@@ -2,20 +2,21 @@ import * as React from 'react';
 import { DataGrid } from '@material-ui/data-grid';
 
 const columns = [
-  { field: 'id' },
-  { field: 'firstName' },
-  { field: 'lastName' },
+  { field: 'id', headerName: 'ID', width: 70 },
+  { field: 'firstName', headerName: 'First name', width: 130 },
+  { field: 'lastName', headerName: 'Last name', width: 130 },
   {
     field: 'age',
-    cellClassName: ['age'],
-    headerClassName: ['age'],
+    headerName: 'Age',
     type: 'number',
+    width: 90,
   },
   {
     field: 'fullName',
-    description: 'this column has a value getter and is not sortable',
-    headerClassName: 'highlight',
+    headerName: 'Full name',
+    description: 'This column has a value getter and is not sortable.',
     sortable: false,
+    width: 160,
     valueGetter: (params) =>
       `${params.getValue('firstName') || ''} ${
         params.getValue('lastName') || ''

diff --git a/docs/src/pages/components/data-grid/overview/DataGridDemo.tsx b/docs/src/pages/components/data-grid/overview/DataGridDemo.tsx
@@ -2,20 +2,21 @@ import * as React from 'react';
 import { DataGrid, ColDef } from '@material-ui/data-grid';
 
 const columns: ColDef[] = [
-  { field: 'id' },
-  { field: 'firstName' },
-  { field: 'lastName' },
+  { field: 'id', headerName: 'ID', width: 70 },
+  { field: 'firstName', headerName: 'First name', width: 130 },
+  { field: 'lastName', headerName: 'Last name', width: 130 },
   {
     field: 'age',
-    cellClassName: ['age'],
-    headerClassName: ['age'],
+    headerName: 'Age',
     type: 'number',
+    width: 90,
   },
   {
     field: 'fullName',
-    description: 'this column has a value getter and is not sortable',
-    headerClassName: 'highlight',
+    headerName: 'Full name',
+    description: 'This column has a value getter and is not sortable.',
     sortable: false,
+    width: 160,
     valueGetter: (params) =>
       `${params.getValue('firstName') || ''} ${
         params.getValue('lastName') || ''

diff --git a/docs/src/pages/components/data-grid/overview/overview.md b/docs/src/pages/components/data-grid/overview/overview.md
@@ -57,7 +57,7 @@ import { XGrid } from '@material-ui/x-grid';
 
 ## 🚧 Upcoming features
 
-Work in progress in the roadmap:
+Work in progress in the [roadmap](https://github.com/mui-org/material-ui-x/projects/1):
 
 - [Filtering](/components/data-grid/filtering/)
 - [Cell editing](/components/data-grid/editing/)

diff --git a/packages/grid/data-grid/README.md b/packages/grid/data-grid/README.md
@@ -14,13 +14,12 @@ npm install @material-ui/data-grid
 yarn add @material-ui/data-grid
 ```
 
-This component has 3 peer dependencies that you will need to install as well.
+This component has 2 peer dependencies that you will need to install as well.
 
 ```json
 "peerDependencies": {
   "@material-ui/core": "^4.9.12",
-  "react": "^16.8.0",
-  "styled-components": "^5.1.0"
+  "react": "^16.8.0"
 },
 ```
 

diff --git a/packages/grid/x-grid-data-generator/package.json b/packages/grid/x-grid-data-generator/package.json
@@ -16,6 +16,13 @@
   "bin": {
     "datagen": "./bin/data-gen-script.js"
   },
+  "scripts": {
+    "precommit": "npm run lint",
+    "build": "rollup -c",
+    "start": "rollup -cw",
+    "lint": "../../../node_modules/.bin/tsc --noEmit && eslint 'src/**/*.{ts,tsx}' --quiet --fix -c ../../../.eslintrc.js && npm run lint:css",
+    "lint:css": "stylelint 'src/**/*.{ts,tsx}' ../../../.stylelintrc.js"
+  },
   "dependencies": {
     "@types/chance": "^1.1.0",
     "chance": "^1.1.6",
@@ -42,15 +49,7 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.54",
     "@material-ui/x-grid": "^0.1.35",
-    "react": "^16.8.0",
-    "styled-components": "^5.1.0"
-  },
-  "scripts": {
-    "precommit": "npm run lint",
-    "build": "rollup -c",
-    "start": "rollup -cw",
-    "lint": "../../../node_modules/.bin/tsc --noEmit && eslint 'src/**/*.{ts,tsx}' --quiet --fix -c ../../../.eslintrc.js && npm run lint:css",
-    "lint:css": "stylelint 'src/**/*.{ts,tsx}' ../../../.stylelintrc.js"
+    "react": "^16.8.0"
   },
   "setupFiles": [
     "<rootDir>/src/setupTests.js"

diff --git a/packages/grid/x-grid-data-generator/src/commodities.columns.tsx b/packages/grid/x-grid-data-generator/src/commodities.columns.tsx
@@ -32,20 +32,16 @@ import {
   randomTaxCode,
 } from './services';
 import {
-  CountryRenderer,
-  DoneRenderer,
-  EmailRenderer,
-  IncotermRenderer,
-  ProgressRenderer,
-  StatusRenderer,
+  renderCountry,
+  renderDone,
+  renderEmail,
+  renderIncoterm,
+  renderPnl,
+  renderProgress,
+  renderStatus,
+  renderTotalPrice,
 } from './renderer';
 
-const totalPriceFormatter = ({ value }) => `$ ${Number(value).toLocaleString()}`;
-const pnlFormatter = (params) =>
-  Number(params.value!) < 0
-    ? `(${Math.abs(Number(params.value!)).toLocaleString()})`
-    : Number(params.value).toLocaleString();
-
 export const commodityColumns: any[] = [
   {
     field: 'id',
@@ -73,7 +69,7 @@ export const commodityColumns: any[] = [
     field: 'traderEmail',
     headerName: 'Trader Email',
     generateData: randomEmail,
-    renderCell: EmailRenderer,
+    renderCell: renderEmail,
     disableClickEventBubbling: true,
     width: 150,
   },
@@ -88,14 +84,14 @@ export const commodityColumns: any[] = [
     field: 'filledQuantity',
     headerName: 'Filled Quantity',
     generateData: generateFilledQuantity,
-    renderCell: ProgressRenderer,
+    renderCell: renderProgress,
     type: 'number',
     width: 120,
   },
   {
     field: 'isFilled',
     headerName: 'Is Filled',
-    renderCell: DoneRenderer,
+    renderCell: renderDone,
     align: 'center',
     generateData: generateIsFilled,
     width: 80,
@@ -104,7 +100,7 @@ export const commodityColumns: any[] = [
     field: 'status',
     headerName: 'Status',
     generateData: randomStatusOptions,
-    renderCell: StatusRenderer,
+    renderCell: renderStatus,
     width: 150,
   },
   {
@@ -143,31 +139,23 @@ export const commodityColumns: any[] = [
   {
     field: 'incoTerm',
     generateData: randomIncoterm,
-    renderCell: IncotermRenderer,
+    renderCell: renderIncoterm,
   },
   {
     field: 'totalPrice',
     headerName: 'Total in USD',
     generateData: generateTotalPrice,
-    valueFormatter: totalPriceFormatter,
-    cellClassRules: {
-      good: ({ value }) => Number(value) > 1000000,
-      bad: ({ value }) => Number(value) < 1000000,
-    },
+    renderCell: renderTotalPrice,
     type: 'number',
-    width: 120,
+    width: 160,
   },
   {
     field: 'pnl',
     headerName: 'PnL',
     generateData: randomPnL,
-    valueFormatter: pnlFormatter,
-    cellClassRules: {
-      positive: ({ value }) => Number(value) > 0,
-      negative: ({ value }) => Number(value) < 0,
-    },
+    renderCell: renderPnl,
     type: 'number',
-    width: 120,
+    width: 140,
   },
   {
     field: 'maturityDate',
@@ -203,7 +191,7 @@ export const commodityColumns: any[] = [
     field: 'counterPartyCountry',
     headerName: 'Counterparty Country',
     generateData: randomCountry,
-    renderCell: CountryRenderer,
+    renderCell: renderCountry,
     width: 120,
   },
   {

diff --git a/packages/grid/x-grid-data-generator/src/employees.columns.tsx b/packages/grid/x-grid-data-generator/src/employees.columns.tsx
@@ -15,13 +15,7 @@ import {
   randomUrl,
   randomUserName,
 } from './services';
-import {
-  AvatarRenderer,
-  CountryRenderer,
-  EmailRenderer,
-  LinkRenderer,
-  RatingRenderer,
-} from './renderer';
+import { renderAvatar, renderCountry, renderEmail, renderLink, renderRating } from './renderer';
 
 export const employeeColumns: any[] = [
   {
@@ -34,7 +28,7 @@ export const employeeColumns: any[] = [
     headerName: '',
     sortable: false,
     generateData: randomAvatar,
-    renderCell: AvatarRenderer,
+    renderCell: renderAvatar,
   },
   {
     field: 'name',
@@ -49,7 +43,7 @@ export const employeeColumns: any[] = [
     field: 'email',
     headerName: 'Email',
     generateData: randomEmail,
-    renderCell: EmailRenderer,
+    renderCell: renderEmail,
     disableClickEventBubbling: true,
     width: 150,
   },
@@ -69,14 +63,14 @@ export const employeeColumns: any[] = [
     field: 'website',
     headerName: 'website',
     generateData: randomUrl,
-    renderCell: LinkRenderer,
+    renderCell: renderLink,
     width: 160,
   },
   {
     field: 'rating',
     headerName: 'Rating',
     generateData: randomRating,
-    renderCell: RatingRenderer,
+    renderCell: renderRating,
     sortDirection: 'desc',
     sortIndex: 0,
     width: 180,
@@ -90,7 +84,7 @@ export const employeeColumns: any[] = [
     field: 'country',
     headerName: 'Country',
     generateData: randomCountry,
-    renderCell: CountryRenderer,
+    renderCell: renderCountry,
     width: 150,
   },
   {

diff --git a/packages/grid/x-grid-data-generator/src/renderer/country-renderer.tsx b/packages/grid/x-grid-data-generator/src/renderer/country-renderer.tsx
diff --git a/packages/grid/x-grid-data-generator/src/renderer/done-renderer.tsx b/packages/grid/x-grid-data-generator/src/renderer/done-renderer.tsx