[docs] Redesign Date and Time Pickers overview page (#13241)

Signed-off-by: Nora <[email protected]> Co-authored-by: Arthur Suh Balduini <[email protected]> Co-authored-by: Kenan Yusuf <[email protected]> Co-authored-by: Sycamore <[email protected]> Co-authored-by: Lukas Tyla <[email protected]>
mui · Aug 7, 2024 · 0c30946 · 0c30946
1 parent d7043dd
commit 0c30946
Show file tree

Hide file tree

Showing 27 changed files with 2,030 additions and 295 deletions.
diff --git a/docs/data/date-pickers/base-concepts/base-concepts.md b/docs/data/date-pickers/base-concepts/base-concepts.md
@@ -29,6 +29,51 @@ import { DatePicker } from '@mui/x-date-pickers';
 import { DatePicker } from '@mui/x-date-pickers-pro';
 ```
 
+## Date library
+
+The Date and Time Pickers are focused on UI/UX and, like most other picker components available, require a third-party library to format, parse, and mutate dates.
+
+MUI's components let you choose which library you prefer for this purpose.
+This gives you the flexibility to implement any date library you may already be using in your application, without adding an extra one to your bundle.
+
+To achieve this, both `@mui/x-date-pickers` and `@mui/x-date-pickers-pro` export a set of **adapters** that expose the date manipulation libraries under a unified API.
+
+### Available libraries
+
+The Date and Time Pickers currently support the following date libraries:
+
+- [Day.js](https://day.js.org/)
+- [date-fns](https://date-fns.org/)
+- [Luxon](https://moment.github.io/luxon/#/)
+- [Moment.js](https://momentjs.com/)
+
+:::info
+If you are using a non-Gregorian calendar (such as Jalali or Hijri), please refer to the [Support for other calendar systems](/x/react-date-pickers/calendar-systems/) page.
+:::
+
+### Recommended library
+
+If you are already using one of the libraries listed above in your application, then you can keep using it with the Date and Time Pickers as well.
+This will avoid bundling two libraries.
+
+If you don't have your own requirements or don't manipulate dates outside of MUI X components, then the recommendation is to use `dayjs` because it has the smallest impact on your application's bundle size.
+
+Here is the weight added to your gzipped bundle size by each of these libraries when used inside the Date and Time Pickers:
+
+| Library           | Gzipped size |
+| :---------------- | -----------: |
+| `[email protected]`    |      6.77 kB |
+| `[email protected]` |     19.39 kB |
+| `[email protected]`     |     23.26 kB |
+| `[email protected]`   |     20.78 kB |
+
+:::info
+The results above were obtained in October 2022 with the latest version of each library.
+The bundling of the JavaScript modules was done by a Create React App, and no locale was loaded for any of the libraries.
+
+The results may vary in your application depending on the version of each library, the locale, and the bundler used.
+:::
+
 ## Other components
 
 ### Choose interaction style

diff --git a/docs/data/date-pickers/getting-started/getting-started.md b/docs/data/date-pickers/getting-started/getting-started.md
@@ -24,7 +24,7 @@ Using your favorite package manager, install:
 
 :::info
 If you need more information about the date library supported by the Date and Time Pickers,
-take a look at the [dedicated section](/x/react-date-pickers/#date-library)
+take a look at the [dedicated section](/x/react-date-pickers/base-concepts/#date-library)
 :::
 
 The Date and Time Pickers package has a peer dependency on `@mui/material`.

diff --git a/docs/data/date-pickers/overview/CommonlyUsedComponents.js b/docs/data/date-pickers/overview/CommonlyUsedComponents.js
diff --git a/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx b/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx
diff --git a/docs/data/date-pickers/overview/overview.md b/docs/data/date-pickers/overview/overview.md
@@ -7,68 +7,16 @@ materialDesign: https://m2.material.io/components/date-pickers
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/
 ---
 
-# MUI X Date and Time Pickers
-
-<p class="description">These react date picker and time picker components let users select date or time values.</p>
-
-{{"component": "@mui/docs/ComponentLinkHeader"}}
-
-## Overview
-
-{{"demo": "CommonlyUsedComponents.js"}}
-
-## Community or Pro plan?
-
-The Date and Time Pickers are available in two packages:
-
-- `@mui/x-date-pickers`, which is MIT licensed (free forever) and contains all the components to edit a date and/or a time.
-- `@mui/x-date-pickers-pro`, which is [commercially licensed](/x/introduction/licensing/#pro-plan) and contains additional components to edit date and/or time ranges.
-
-## Date library
-
-The Date and Time Pickers are focused on UI/UX and, like most other picker components available, require a third-party library to format, parse, and mutate dates.
-
-MUI's components let you choose which library you prefer for this purpose.
-This gives you the flexibility to implement any date library you may already be using in your application, without adding an extra one to your bundle.
+{{"component": "modules/components/overview/XLogo.tsx"}}
 
-To achieve this, both `@mui/x-date-pickers` and `@mui/x-date-pickers-pro` export a set of **adapters** that expose the date manipulation libraries under a unified API.
-
-### Available libraries
-
-The Date and Time Pickers currently support the following date libraries:
-
-- [Day.js](https://day.js.org/)
-- [date-fns](https://date-fns.org/)
-- [Luxon](https://moment.github.io/luxon/#/)
-- [Moment.js](https://momentjs.com/)
-
-:::info
-If you are using a non-Gregorian calendar (such as Jalali or Hijri), please refer to the [Support for other calendar systems](/x/react-date-pickers/calendar-systems/) page.
-:::
-
-### Recommended library
-
-If you are already using one of the libraries listed above in your application, then you can keep using it with the Date and Time Pickers as well.
-This will avoid bundling two libraries.
-
-If you don't have your own requirements or don't manipulate dates outside of MUI X components, then the recommendation is to use `dayjs` because it has the smallest impact on your application's bundle size.
-
-Here is the weight added to your gzipped bundle size by each of these libraries when used inside the Date and Time Pickers:
-
-| Library           | Gzipped size |
-| :---------------- | -----------: |
-| `[email protected]`    |      6.77 kB |
-| `[email protected]` |     19.39 kB |
-| `[email protected]`     |     23.26 kB |
-| `[email protected]`   |     20.78 kB |
-
-:::info
-The results above were obtained in October 2022 with the latest version of each library.
-The bundling of the JavaScript modules was done by a Create React App, and no locale was loaded for any of the libraries.
+# MUI X Date and Time Pickers
 
-The results may vary in your application depending on the version of each library, the locale, and the bundler used.
-:::
+<p class="description">A collection of React UI components for selecting dates, times, and ranges. </p>
 
-## What's next?
+{{"component": "modules/components/overview/MainDemo.tsx"}}
 
-Continue to the [next page](/x/react-date-pickers/getting-started/) and learn how to prepare your application for the Date and Time Pickers.
+{{"component": "modules/components/overview/FeatureHighlight.tsx"}}
+{{"component": "modules/components/overview/CommunityOrPro.tsx"}}
+{{"component": "modules/components/overview/Keyboard.tsx"}}
+{{"component": "modules/components/overview/Internationalization.tsx"}}
+{{"component": "modules/components/overview/DateLibraries.tsx"}}
diff --git a/docs/pages/x/react-date-pickers/index.js b/docs/pages/x/react-date-pickers/index.js
@@ -3,5 +3,5 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import * as pageProps from 'docsx/data/date-pickers/overview/overview.md?muiMarkdown';
 
 export default function Page() {
-  return <MarkdownDocs {...pageProps} disableAd />;
+  return <MarkdownDocs {...pageProps} disableAd disableToc />;
 }
diff --git a/docs/public/static/x/date-libraries/datefns.png b/docs/public/static/x/date-libraries/datefns.png
diff --git a/docs/public/static/x/date-libraries/dayjs.png b/docs/public/static/x/date-libraries/dayjs.png
diff --git a/docs/public/static/x/date-libraries/luxon.png b/docs/public/static/x/date-libraries/luxon.png
diff --git a/docs/public/static/x/date-libraries/momentjs.png b/docs/public/static/x/date-libraries/momentjs.png