[docs] Standardize getting started docs across all packages (#16302)

Signed-off-by: Sam Sycamore <[email protected]>
Co-authored-by: Alexandre Fauquette <[email protected]>
Co-authored-by: Lukas Tyla <[email protected]>

README.md

@@ -40,10 +40,10 @@ Get started in the [MUI X documentation](https://mui.com/x/introduction/).
 
 ### Installation
 
-- [Data Grid installation](https://mui.com/x/react-data-grid/getting-started/#installation)
-- [Date and Time Pickers installation](https://mui.com/x/react-date-pickers/getting-started/#installation)
-- [Charts installation](https://mui.com/x/react-charts/getting-started/#installation)
-- [Tree View installation](https://mui.com/x/react-tree-view/getting-started/#installation)
+- [Data Grid installation](https://mui.com/x/react-data-grid/quickstart/#installation)
+- [Date and Time Pickers installation](https://mui.com/x/react-date-pickers/quickstart/#installation)
+- [Charts installation](https://mui.com/x/react-charts/quickstart/#installation)
+- [Tree View installation](https://mui.com/x/react-tree-view/quickstart/#installation)
 
 ## Licensing
 

docs/.link-check-errors.txt

@@ -1,5 +1,12 @@
 Broken links found by `docs:link-check` that exist:
 
+- https://mui.com/x/react-charts/getting-started/
 - https://mui.com/x/react-data-grid/#premium-plan
+- https://mui.com/x/react-data-grid/getting-started/
 - https://mui.com/x/react-data-grid/getting-started/#feature-comparison
 - https://mui.com/x/react-date-pickers/fields/#accessible-dom-structure
+- https://mui.com/x/react-date-pickers/getting-started/
+- https://mui.com/x/react-date-pickers/quickstart/#date-and-time-types
+- https://mui.com/x/react-tree-view/#rich-tree-view
+- https://mui.com/x/react-tree-view/#simple-tree-view
+- https://mui.com/x/react-tree-view/getting-started/

docs/data/charts/overview/overview.md

@@ -17,20 +17,19 @@ MUI X Charts is a library of production-ready components for rendering charts w
 It uses [D3.js](https://d3js.org/) for data manipulation and SVGs for rendering.
 
 The components provide a high level of customization, with beautiful defaults as well as extensive configuration props and flexible composition options.
-They also have access to all [MUI System](https://mui.com/system/getting-started/) tools such as theme overrides and the `sx` prop.
+Theming features are designed to be frictionless when integrating with Material UI and other MUI X components, but they can also stand on their own and be customized to meet the needs of any design system.
+
+The Charts package is **open-core**: The Community version is MIT-licensed and free forever, while more advanced features require a Pro commercial license.
+See [MUI X Licensing](/x/introduction/licensing/) for complete details.
 
 {{"demo": "ChartsOverviewDemo.js", "defaultCodeOpen": true}}
 
 ## All MUI X Charts
 
-{{"component": "modules/components/ChartComponentsGrid.js"}}
-
-## Using this documentation
+The MIT-licensed Community version of the Charts package covers the most common use cases for data visualization.
+The Pro plan, denoted by the blue cube icon (<span class="plan-pro"></span>) throughout the documentation, expands on the Community version to support more complex visualizations.
 
-Each Chart type has two accompanying documents:
-
-1. **Overview** – a general description of built-in features
-2. **Demo** – a collection of custom examples
+{{"component": "modules/components/ChartComponentsGrid.js"}}
 
 ## Supported features
 

docs/data/charts/getting-started/getting-started.md → docs/data/charts/quickstart/quickstart.md

@@ -4,20 +4,24 @@ githubLabel: 'component: charts'
 packageName: '@mui/x-charts'
 ---
 
-# Charts - Getting started
+# Charts - Quickstart
 
 <p class="description">Install the MUI X Charts package to start building React data visualization components.</p>
 
 ## Installation
 
-Run one of the following commands to install the free Community version or the paid Pro version of the MUI X Charts:
+Install the Charts package that best suits your needs—Community or Pro:
 
 <!-- #default-branch-switch -->
 
 {{"component": "modules/components/ChartsInstallationInstructions.js"}}
 
+### Peer dependencies
+
+#### Material UI
+
 The Charts packages have a peer dependency on `@mui/material`.
-If you're not already using it, install it with the following command:
+If you're not already using it, install it now:
 
 <codeblock storageKey="package-manager">
 
@@ -35,6 +39,8 @@ yarn add @mui/material @emotion/react @emotion/styled
 
 </codeblock>
 
+#### React
+
 <!-- #react-peer-version -->
 
 [`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) are also peer dependencies:
@@ -48,16 +54,21 @@ yarn add @mui/material @emotion/react @emotion/styled
 
 ### Usage with D3
 
-To help folks using CommonJS, the `@mui/x-charts` package uses a vendored package named `@mui/x-charts-vendor` to access D3 libraries.
+For those using CommonJS, the MUI X Charts provide a vendored package to access D3 libraries.
 You can import D3 functions from `@mui/x-charts-vendor/d3-scale`.
 
 ## Rendering Charts
 
 MUI X Charts can be rendered as _self-contained_ or _composable_ components.
-[Self-contained components](#self-contained-charts) are simpler to get started with and are recommended for most common use cases; more complex visualization (such as combining Bar and Line Charts on a single plot) requires [custom composition](#composable-charts).
+[Self-contained components](#self-contained-charts) are simpler to get started with and are recommended for most common use cases.
+More complex visualization (such as combining Bar and Line Charts on a single plot) requires [custom composition](#composable-charts).
 
 ### Self-contained Charts
 
+```tsx
+import { BarChart } from '@mui/x-charts/BarChart';
+```
+
 Self-contained Chart components are imported and rendered as a single React component (such as `<BarChart />` or `<LineChart />`) which contains all of the necessary subcomponents.
 
 These components require a `series` prop describing the data to render, as well as a numerical value (rendered in pixels) for the `height` prop.
@@ -72,51 +83,48 @@ Subcomponents include:
 
 - Axis components – to define the X and Y axes
 - Plot components – to create Bars, Lines, or any other Chart type
-- Auxillary components - to add Tooltips, Highlights, and more
-- Utilities - such as classes and types
+- Auxiliary components – to add Tooltips, Highlights, and more
+- Utilities – such as classes and types
 
 See the [Charts composition documentation](/x/react-charts/composition/) for complete details.
 
 The demo below shows how to use composition to create a custom Chart that combines a Bar and a Line Chart on a single plot:
 
 {{"demo": "Combining.js"}}
 
-## Chart layouts
+### Chart layouts
 
 The layout of a Chart is defined by two main spaces: the plot area, and the outer margins.
 
 The `width` and `height` props define the dimensions of the SVG which is the root of the chart.
-Within this SVG, the plot area (or drawing area) serves as the canvas for data visualization, where the lines, bars or other visual elements are rendered.
+Within this SVG, the plot area (or drawing area) serves as the canvas for data visualization, where the lines, bars, or other visual elements are rendered.
 The size of the plot area is determined by the `margin = {top, bottom, left, right}` object which defines its outer margins inside the SVG.
 The outer margin space is where information like axes, titles, and legends are displayed.
 
 See the [Styling documentation](/x/react-charts/styling/#placement) for complete details.
 
-## Server-side rendering
-
-The chart support server-side rendering under two conditions:
+### Server-side rendering
 
-1. The `width` and `height` props needs to be provided.
-2. The animation should be disabled with the `skipAnimation` prop.
+Charts support server-side rendering under two conditions:
 
-The reason is that it is not possible to compute the SVG dimensions on the server, and the `skipAnimation` ensures that the animation is not in an "empty" state when first rendering.
+1. `width` and `height` props must be provided – it's not possible to compute the SVG dimensions on the server.
+2. Animations must be disabled with the `skipAnimation` prop – otherwise the animation will be in an empty state on first render.
 
-## Axis management
+### Axis management
 
 MUI X Charts take a flexible approach to axis management, with support for multiple axes and any combination of scales and ranges.
-
 See the [Axis documentation](/x/react-charts/axis/) for complete details.
 
 ## TypeScript
 
+### Theme augmentation
+
 To benefit from [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users must import the following types.
 These types use module augmentation to extend the default theme structure.
 
 ```tsx
-// only one import is necessary,
-// from the version you're currently using.
+// Pro users: add `-pro` suffix to package name
 import type {} from '@mui/x-charts/themeAugmentation';
-import type {} from '@mui/x-charts-pro/themeAugmentation';
 
 const theme = createTheme({
   components: {

docs/data/common-concepts/custom-components/custom-components.md

@@ -8,7 +8,7 @@ A slot is a part of a component that can be [overridden](/x/common-concepts/cust
 
 Some of those slots allow you to provide your own UI primitives to the MUI X components.
 This is the role of all the `baseXXX` component on the Data Grid component (`baseButton`, `baseSelect`, ...).
-These slots receive props that should be as generic as possible so that it is easy to interface any other design system.
+These slots receive props that should be as generic as possible so they can integrate well with any other design system.
 
 Other slots allow you to override parts of the MUI X UI components with a custom UI built specifically for this component.
 This is the role of slots like `calendarHeader` on the `DateCalendar` component or `item` on the Rich Tree View component.

docs/data/data-grid/custom-columns/custom-columns.md

@@ -33,7 +33,7 @@ In the demo below, we create a custom column type using the `GridColTypeDef` int
 
 By default, the Data Grid uses native browser inputs for editing `date` and `dateTime` columns.
 
-While [MUI X Date / Time Pickers](/x/react-date-pickers/getting-started/) are not supported by the Data Grid out of the box yet, it is easy to integrate them by creating [custom edit components](/x/react-data-grid/editing/custom-edit-component/) and [custom filter operators](/x/react-data-grid/filtering/customization/#create-a-custom-operator).
+While the [MUI X Date and Time Pickers](/x/react-date-pickers/) are not supported by the Data Grid out of the box yet, you can integrate them by creating [custom edit components](/x/react-data-grid/editing/custom-edit-component/) and [custom filter operators](/x/react-data-grid/filtering/customization/#create-a-custom-operator).
 
 The example below uses `@mui/x-date-pickers` for both `date` and `dateTime` column types:
 

docs/data/data-grid/overview/overview.md

@@ -19,10 +19,13 @@ It provides developers with an intuitive API for implementing complex use cases;
 The Grid's theming features are designed to be frictionless when integrating with Material UI and other MUI X components, but it can also stand on its own and be customized to meet the needs of any design system.
 
 The Data Grid is **open-core**: The Community version is MIT-licensed and free forever, while more advanced features require a Pro or Premium commercial license.
-
 See [MUI X Licensing](/x/introduction/licensing/) for complete details.
 
-## Community version
+## Community version (free forever)
+
+```js
+import { DataGrid } from '@mui/x-data-grid';
+```
 
 The MIT-licensed Community version of the Data Grid is a more sophisticated implementation of the [Material UI Table](/material-ui/react-table/).
 
@@ -32,8 +35,11 @@ It includes all of the main features listed in the navigation menu, such as edit
 
 ## Pro version [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
 
-The Pro plan expands on the Community version to support more complex use cases with features like advanced filtering, column pinning, column and row reordering, support for tree data, and virtualization to handle larger datasets.
+```js
+import { DataGridPro } from '@mui/x-data-grid-pro';
+```
 
+The Pro plan expands on the Community version to support more complex use cases with features like advanced filtering, column pinning, column and row reordering, support for tree data, and virtualization to handle larger datasets.
 Pro features are denoted by the blue cube icon (<span class="plan-pro"></span>) throughout the documentation.
 
 The demo below displays 31 columns and 100,000 rows—over three million cells in total:
@@ -42,8 +48,11 @@ The demo below displays 31 columns and 100,000 rows—over three million cells i
 
 ## Premium version [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')
 
-The Premium plan includes all Pro features as well as more advanced features for data analysis and large dataset management, such as row grouping with aggregation functions (like sum and average) and the ability to export to Excel files.
+```js
+import { DataGridPremium } from '@mui/x-data-grid-premium';
+```
 
+The Premium plan includes all Pro features as well as more advanced features for data analysis and large dataset management, such as row grouping with aggregation functions (like sum and average) and the ability to export to Excel files.
 Premium features are denoted by the golden cube icon (<span class="plan-premium"></span>) throughout the documentation.
 
 The demo below groups rows by commodity name, and uses an aggregation function to calculate the sum of quantities for each group and in total (displayed in a summary row).

docs/data/data-grid/getting-started/getting-started.md → docs/data/data-grid/quickstart/quickstart.md

@@ -4,7 +4,7 @@
 
 ## Installation
 
-Run one of the following commands to install the MUI X Data Grid package that best suits your needs—the free Community version or the paid Pro or Premium version:
+Install the Data Grid package that best suits your needs—Community, Pro, or Premium:
 
 <!-- #default-branch-switch -->
 
@@ -13,11 +13,15 @@ Run one of the following commands to install the MUI X Data Grid package that b
 :::success
 Not sure which package to choose?
 You can start with the Community version and upgrade to Pro or Premium at any time.
-Check out the [Feature showcase](/x/react-data-grid/demo/) for a list of features available in each package.
+Check out the [Feature showcase](/x/react-data-grid/features/) for a list of features available in each package.
 :::
 
+### Peer dependencies
+
+#### Material UI
+
 The Data Grid packages have a peer dependency on `@mui/material`.
-If you're not already using it, install it with the following command:
+If you're not already using it, install it now:
 
 <codeblock storageKey="package-manager">
 
@@ -35,6 +39,8 @@ yarn add @mui/material @emotion/react @emotion/styled
 
 </codeblock>
 
+#### React
+
 <!-- #react-peer-version -->
 
 [`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) are also peer dependencies:
@@ -46,11 +52,14 @@ yarn add @mui/material @emotion/react @emotion/styled
 },
 ```
 
-## Quickstart
+## Rendering a Data Grid
+
+### Import the component
 
-Import the component that corresponds to the version you're using, along with the `GridRowsProp` and `GridColDef` utilities:
+Import the Data Grid component that corresponds to the version you're using, along with the `GridRowsProp` and `GridColDef` utilities:
 
 ```js
+// choose one
 import { DataGrid, GridRowsProp, GridColDef } from '@mui/x-data-grid';
 import { DataGridPro, GridRowsProp, GridColDef } from '@mui/x-data-grid-pro';
 import { DataGridPremium, GridRowsProp, GridColDef } from '@mui/x-data-grid-premium';
@@ -85,7 +94,7 @@ const columns: GridColDef[] = [
 ];
 ```
 
-### Render the Data Grid
+### Render the component
 
 With the component and utilites imported, and rows and columns defined, you're now ready to render the Data Grid as shown below:
 
@@ -117,6 +126,8 @@ export default function App() {
 
 ## TypeScript
 
+### Theme augmentation
+
 To benefit from [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users must import the following types.
 These types use module augmentation to extend the default theme structure.
 
@@ -140,16 +151,17 @@ const theme = createTheme({
 
 ## Using this documentation
 
-### The useDemoData hook
+### @mui/x-data-grid-generator
+
+**The `@mui/x-data-grid-generator` is a development-only package and should not be used in production.**
+You can use it to create a reproduction of a bug or generate demo data in your development environment.
+You should not rely on its API—it doesn't follow semver.
 
-The `useDemoData` hook is a utility hook from the `@mui/x-data-grid-generator` package.
-It contains columns definitions and generates random data for the Data Grid.
-It is often used in our demos to provide realistic data without polluting the code with data generation logic.
+### useDemoData hook
 
-:::success
-Looking for the column definitions and custom cell renderers from the `useDemoData` hook?
-Check out the [Custom columns demo](/x/react-data-grid/custom-columns/#full-example) where you can copy them from the demo source code.
-:::
+The `useDemoData` hook is a utility hook from the `@mui/x-data-grid-generator` package, used in demos throughout this documentation to provide realistic data without polluting the code with data generation logic.
+It contains column definitions and generates random data for the Data Grid.
+For more details on these definitions and the custom cell renderers available, see the [custom columns demo](/x/react-data-grid/custom-columns/#full-example) where you can copy them from the demo source code.
 
 Here's how it's used:
 
@@ -168,12 +180,6 @@ export default function Demo() {
 It comes with two datasets: `Commodity` and `Employee`.
 You can customize the data generation by passing the custom options of type [`UseDemoDataOptions`](https://github.com/mui/mui-x/blob/6aad22644ee710690b90dc2ac6bbafceb91fecf0/packages/x-data-grid-generator/src/hooks/useDemoData.ts#L29-L36).
 
-:::error
-`@mui/x-data-grid-generator` is a development-only package and should not be used in production.
-You can use it to create a reproduction of a bug or generate demo data in your development environment.
-You should not rely on its API—it doesn't follow semver.
-:::
-
 ## API
 
 - [DataGrid](/x/api/data-grid/data-grid/)