From 1ff1e7c7cbdc78f6673dd5a12623215e67be8971 Mon Sep 17 00:00:00 2001 From: delangle Date: Fri, 1 Apr 2022 10:05:03 +0200 Subject: [PATCH 1/9] [docs] New page for the pickers migration from the lab --- .../migration-lab/migration-lab.md | 85 +++++++++++++++++++ docs/data/pages.ts | 3 +- .../x/react-date-pickers/migration-lab.js | 11 +++ 3 files changed, 98 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..721f8b62b38f6 --- /dev/null +++ b/docs/data/date-pickers/migration-lab/migration-lab.md @@ -0,0 +1,85 @@ +--- +title: MUI X - Migration from the lab +--- + +# MUI X - Migration from the lab + +

MUI Date and time pickers are now available on X!

+ +## 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 should be easy + +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 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! + +## How to migrate ? + +### Installation + +#### 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) + +#### Community Plan + +```sh +// with npm +npm install @mui/x-date-pickers + +// with yarn +yarn add @mui/x-data-grid +``` + +#### Migrate your imports + +To migrate, update the package name and change from a default export to a named export: + +```ts +// before +import DatePicker from '@mui/lab/DatePicker'; +import DateRangePicker from '@mui/lab/DateRangePicker'; +import { DatePicker, DateRangePicker } from '@mui/lab'; + +// after +import DatePicker from '@mui/x-date-pickers/DatePicker'; +import DateRangePicker from '@mui/x-date-pickers-pro/DateRangePicker'; +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'; +``` + +We have prepared a codemod to help you migrate your codebase from `@mui/lab` to `@mui/x-date-pickers` or `@mui/x-date-pickers-pro`: + +```sh +npx @mui/codemod v5.0.0/date-pickers-moved-to-x +``` 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 ; +} From 6535833c87c7a276590f9a816864068c255632e4 Mon Sep 17 00:00:00 2001 From: delangle Date: Fri, 1 Apr 2022 12:22:37 +0200 Subject: [PATCH 2/9] Work --- .../migration-lab/migration-lab.md | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/docs/data/date-pickers/migration-lab/migration-lab.md b/docs/data/date-pickers/migration-lab/migration-lab.md index 721f8b62b38f6..a2e167f4ce2cb 100644 --- a/docs/data/date-pickers/migration-lab/migration-lab.md +++ b/docs/data/date-pickers/migration-lab/migration-lab.md @@ -24,11 +24,9 @@ If you are using one of these components, you will have to take a Pro license in **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! -## How to migrate ? +## Migration steps -### Installation - -#### Pro Plan +### 1. Install MUI X packages ```sh // with npm @@ -61,9 +59,15 @@ npm install @mui/x-date-pickers yarn add @mui/x-data-grid ``` -#### Migrate your imports +### 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 +``` -To migrate, update the package name and change from a default export to a named export: +Which will transform the imports like this: ```ts // before @@ -77,9 +81,3 @@ import DateRangePicker from '@mui/x-date-pickers-pro/DateRangePicker'; 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'; ``` - -We have prepared a codemod to help you migrate your codebase from `@mui/lab` to `@mui/x-date-pickers` or `@mui/x-date-pickers-pro`: - -```sh -npx @mui/codemod v5.0.0/date-pickers-moved-to-x -``` From c3590114bf2362a13ac50ea8e03ce35980f80a24 Mon Sep 17 00:00:00 2001 From: delangle Date: Fri, 1 Apr 2022 12:23:22 +0200 Subject: [PATCH 3/9] Work --- .../migration-lab/migration-lab.md | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/docs/data/date-pickers/migration-lab/migration-lab.md b/docs/data/date-pickers/migration-lab/migration-lab.md index a2e167f4ce2cb..68da890fea4e8 100644 --- a/docs/data/date-pickers/migration-lab/migration-lab.md +++ b/docs/data/date-pickers/migration-lab/migration-lab.md @@ -28,6 +28,18 @@ If you are using one of these components, you will have to take a Pro license in ### 1. Install MUI X packages +#### Community Plan + +```sh +// with npm +npm install @mui/x-date-pickers + +// with yarn +yarn add @mui/x-data-grid +``` + +#### Pro Plan + ```sh // with npm npm install @mui/x-date-pickers-pro @mui/x-license-pro @@ -49,16 +61,6 @@ LicenseInfo.setLicenseKey( More information [here](/x/advanced-components/#license-key-installation) -#### Community Plan - -```sh -// with npm -npm install @mui/x-date-pickers - -// with yarn -yarn add @mui/x-data-grid -``` - ### 2. Run the code mod We have prepared a codemod to help you migrate your codebase From 282075675e6f8ace2b3f2acf7659712bd95c46d6 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Fri, 1 Apr 2022 12:30:50 +0200 Subject: [PATCH 4/9] Update docs/data/date-pickers/migration-lab/migration-lab.md Co-authored-by: Siriwat K --- docs/data/date-pickers/migration-lab/migration-lab.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/date-pickers/migration-lab/migration-lab.md b/docs/data/date-pickers/migration-lab/migration-lab.md index 68da890fea4e8..f1a96c4715d23 100644 --- a/docs/data/date-pickers/migration-lab/migration-lab.md +++ b/docs/data/date-pickers/migration-lab/migration-lab.md @@ -35,7 +35,7 @@ If you are using one of these components, you will have to take a Pro license in npm install @mui/x-date-pickers // with yarn -yarn add @mui/x-data-grid +yarn add @mui/x-date-pickers ``` #### Pro Plan From b323e1a31c7ebb45d9539272de54e875ce9485aa Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Fri, 1 Apr 2022 12:31:01 +0200 Subject: [PATCH 5/9] Update docs/data/date-pickers/migration-lab/migration-lab.md Co-authored-by: Siriwat K --- .../migration-lab/migration-lab.md | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/docs/data/date-pickers/migration-lab/migration-lab.md b/docs/data/date-pickers/migration-lab/migration-lab.md index f1a96c4715d23..1951382b1e379 100644 --- a/docs/data/date-pickers/migration-lab/migration-lab.md +++ b/docs/data/date-pickers/migration-lab/migration-lab.md @@ -71,15 +71,13 @@ npx @mui/codemod v5.0.0/date-pickers-moved-to-x Which will transform the imports like this: -```ts -// before -import DatePicker from '@mui/lab/DatePicker'; -import DateRangePicker from '@mui/lab/DateRangePicker'; -import { DatePicker, DateRangePicker } from '@mui/lab'; - -// after -import DatePicker from '@mui/x-date-pickers/DatePicker'; -import DateRangePicker from '@mui/x-date-pickers-pro/DateRangePicker'; -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 +- 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'; From 55f468c1cc99e94c042da63f27a2f256de1a2b64 Mon Sep 17 00:00:00 2001 From: delangle Date: Fri, 1 Apr 2022 12:39:21 +0200 Subject: [PATCH 6/9] Work --- docs/data/date-pickers/migration-lab/migration-lab.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/data/date-pickers/migration-lab/migration-lab.md b/docs/data/date-pickers/migration-lab/migration-lab.md index 1951382b1e379..a430644009821 100644 --- a/docs/data/date-pickers/migration-lab/migration-lab.md +++ b/docs/data/date-pickers/migration-lab/migration-lab.md @@ -81,3 +81,4 @@ Which will transform the imports like this: - 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'; +``` From 8925686757c3e59e7746f216761e4adec45a8a6e Mon Sep 17 00:00:00 2001 From: delangle Date: Fri, 1 Apr 2022 12:42:07 +0200 Subject: [PATCH 7/9] Work --- docs/data/date-pickers/migration-lab/migration-lab.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/docs/data/date-pickers/migration-lab/migration-lab.md b/docs/data/date-pickers/migration-lab/migration-lab.md index a430644009821..28b7fe5a36ba5 100644 --- a/docs/data/date-pickers/migration-lab/migration-lab.md +++ b/docs/data/date-pickers/migration-lab/migration-lab.md @@ -9,7 +9,7 @@ title: MUI X - Migration from the lab ## 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 should be easy +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/) @@ -17,7 +17,7 @@ We explored the reasons of this migration in a [blog post](https://mui.com/blog/ Most of our components remains MIT and are accessible for free in `@mui/x-date-pickers`. -The components `DateRangePicker`, `DateRangePickerDay`, `DesktopDateRangePicker`, `MobileDateRangePicker` and `StaticDateRangePicker` +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). @@ -48,6 +48,8 @@ npm install @mui/x-date-pickers-pro @mui/x-license-pro yarn add @mui/x-date-pickers-pro @mui/x-license-pro ``` +**Note:** `@mui/x-date-pickers-pro` re-exports everything from `@mui/x-date-pickers`. You don't have to install both. + 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. @@ -73,10 +75,10 @@ Which will transform the imports like this: ```diff - import DatePicker from '@mui/lab/DatePicker'; -+ import DatePicker from '@mui/x-date-pickers/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 { 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` From f8a83e0b0ad9d7445e22864c6fe5de30c3ba24a2 Mon Sep 17 00:00:00 2001 From: delangle Date: Fri, 1 Apr 2022 12:42:47 +0200 Subject: [PATCH 8/9] Work --- docs/data/date-pickers/migration-lab/migration-lab.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/date-pickers/migration-lab/migration-lab.md b/docs/data/date-pickers/migration-lab/migration-lab.md index 28b7fe5a36ba5..341e4abe4e24d 100644 --- a/docs/data/date-pickers/migration-lab/migration-lab.md +++ b/docs/data/date-pickers/migration-lab/migration-lab.md @@ -4,7 +4,7 @@ title: MUI X - Migration from the lab # MUI X - Migration from the lab -

MUI Date and time pickers are now available on X!

+

MUI date and time pickers are now available on X!

## Introduction From 9ae7c0e946d91a69dc5486df061a7bf281ed782e Mon Sep 17 00:00:00 2001 From: delangle Date: Fri, 1 Apr 2022 16:32:08 +0200 Subject: [PATCH 9/9] Work --- docs/data/date-pickers/migration-lab/migration-lab.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/date-pickers/migration-lab/migration-lab.md b/docs/data/date-pickers/migration-lab/migration-lab.md index 341e4abe4e24d..954a9fd6814bc 100644 --- a/docs/data/date-pickers/migration-lab/migration-lab.md +++ b/docs/data/date-pickers/migration-lab/migration-lab.md @@ -28,6 +28,8 @@ If you are using one of these components, you will have to take a Pro license in ### 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 @@ -48,8 +50,6 @@ npm install @mui/x-date-pickers-pro @mui/x-license-pro yarn add @mui/x-date-pickers-pro @mui/x-license-pro ``` -**Note:** `@mui/x-date-pickers-pro` re-exports everything from `@mui/x-date-pickers`. You don't have to install both. - 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.