From 2962d6a7c3ee80d46ef7906c22ea8465eb546430 Mon Sep 17 00:00:00 2001
From: Flavien DELANGLE <flaviendelangle@gmail.com>
Date: Mon, 4 Apr 2022 09:04:52 +0200
Subject: [PATCH] [docs] New page for the pickers migration from the lab
 (#4327)

---
 .../migration-lab/migration-lab.md            | 86 +++++++++++++++++++
 docs/data/pages.ts                            |  3 +-
 .../x/react-date-pickers/migration-lab.js     | 11 +++
 3 files changed, 99 insertions(+), 1 deletion(-)
 create mode 100644 docs/data/date-pickers/migration-lab/migration-lab.md
 create mode 100644 docs/pages/x/react-date-pickers/migration-lab.js

diff --git a/docs/data/date-pickers/migration-lab/migration-lab.md b/docs/data/date-pickers/migration-lab/migration-lab.md
new file mode 100644
index 0000000000000..954a9fd6814bc
--- /dev/null
+++ b/docs/data/date-pickers/migration-lab/migration-lab.md
@@ -0,0 +1,86 @@
+---
+title: MUI X - Migration from the lab
+---
+
+# MUI X - Migration from the lab
+
+<p class="description">MUI date and time pickers are now available on X!</p>
+
+## Introduction
+
+This is a reference for migrating your site's pickers from `@mui/lab` to `@mui/x-date-pickers` or `@mui/x-date-pickers-pro`.
+This migration only concerns packages and should do not affect the behavior of the components in your app.
+
+We explored the reasons of this migration in a [blog post](https://mui.com/blog/lab-date-pickers-to-mui-x/)
+
+## License
+
+Most of our components remains MIT and are accessible for free in `@mui/x-date-pickers`.
+
+The range-picker components: `DateRangePicker`, `DateRangePickerDay`, `DesktopDateRangePicker`, `MobileDateRangePicker` and `StaticDateRangePicker`
+were marked as "intended for MUI X Pro" in our documentation and are now part of MUI X Pro.
+
+If you are using one of these components, you will have to take a Pro license in order to migrate to `@mui/x-date-pickers-pro` (see the [Pricing](https://mui.com/pricing/) page for more information).
+
+**Note**: If you already have a license for `@mui/x-data-grid-pro`, you can use the same one for `@mui/x-date-pickers-pro` with no additional fee!
+
+## Migration steps
+
+### 1. Install MUI X packages
+
+**Note:** `@mui/x-date-pickers-pro` re-exports everything from `@mui/x-date-pickers`. You don't have to install both when using the Pro Plan.
+
+#### Community Plan
+
+```sh
+// with npm
+npm install @mui/x-date-pickers
+
+// with yarn
+yarn add @mui/x-date-pickers
+```
+
+#### Pro Plan
+
+```sh
+// with npm
+npm install @mui/x-date-pickers-pro @mui/x-license-pro
+
+// with yarn
+yarn add @mui/x-date-pickers-pro @mui/x-license-pro
+```
+
+When you purchase a commercial license, you'll receive a license key by email.
+You must set the license key before rendering the first component.
+
+```jsx
+import { LicenseInfo } from '@mui/x-license-pro';
+
+LicenseInfo.setLicenseKey(
+  'x0jTPl0USVkVZV0SsMjM1kDNyADM5cjM2ETPZJVSQhVRsIDN0YTM6IVREJ1T0b9586ef25c9853decfa7709eee27a1e',
+);
+```
+
+More information [here](/x/advanced-components/#license-key-installation)
+
+### 2. Run the code mod
+
+We have prepared a codemod to help you migrate your codebase
+
+```sh
+npx @mui/codemod v5.0.0/date-pickers-moved-to-x <path>
+```
+
+Which will transform the imports like this:
+
+```diff
+- import DatePicker from '@mui/lab/DatePicker';
++ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+- import DateRangePicker from '@mui/lab/DateRangePicker';
++ import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+
+- import { DatePicker, DateRangePicker } from '@mui/lab';
++ import { DatePicker } from '@mui/x-date-pickers'; // DatePicker is also available in `@mui/x-date-pickers-pro`
++ import { DateRangePicker } from '@mui/x-date-pickers-pro';
+```
diff --git a/docs/data/pages.ts b/docs/data/pages.ts
index 5ac32429cccfd..cdc0edb8b1552 100644
--- a/docs/data/pages.ts
+++ b/docs/data/pages.ts
@@ -8,7 +8,7 @@ const pages = [
       { pathname: '/x/react-data-grid', title: 'Overview' },
       { pathname: '/x/react-data-grid/demo' },
       { pathname: '/x/react-data-grid/getting-started' },
-      { pathname: '/x/react-data-grid/migration-v4', title: 'Migration From v4' },
+      { pathname: '/x/react-data-grid/migration-v4', title: 'Migration from v4' },
       { pathname: '/x/react-data-grid/layout' },
       { pathname: '/x/react-data-grid/columns' },
       { pathname: '/x/react-data-grid/rows' },
@@ -62,6 +62,7 @@ const pages = [
     icon: 'TableViewIcon',
     children: [
       { pathname: '/x/react-date-pickers/getting-started' },
+      { pathname: '/x/react-date-pickers/migration-lab', title: 'Migration from the lab' },
       { pathname: '/x/react-date-pickers/date-picker' },
       {
         pathname: '/x/react-date-pickers/date-range-picker',
diff --git a/docs/pages/x/react-date-pickers/migration-lab.js b/docs/pages/x/react-date-pickers/migration-lab.js
new file mode 100644
index 0000000000000..18a6a0f60846c
--- /dev/null
+++ b/docs/pages/x/react-date-pickers/migration-lab.js
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import {
+  demos,
+  docs,
+  demoComponents,
+} from 'docsx/data/date-pickers/migration-lab/migration-lab.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+}