From c25c422e7a1ec8e6c36ca59f4ebbc0d2f65aae6d Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Fri, 19 Jul 2024 15:37:53 +0200 Subject: [PATCH] [docs] Bump pnpm priority as a package manager (#13894) --- .../charts/getting-started/getting-started.md | 26 +++++++++++-------- .../getting-started/getting-started.md | 18 +++++++------ .../getting-started/getting-started.md | 19 +++++++++----- .../migration-pickers-lab.md | 17 ++++++------ .../migration-tree-view-lab.md | 9 ++++--- .../getting-started/getting-started.md | 19 +++++++++----- .../components/InstallationInstructions.tsx | 2 +- 7 files changed, 64 insertions(+), 46 deletions(-) diff --git a/docs/data/charts/getting-started/getting-started.md b/docs/data/charts/getting-started/getting-started.md index 7eea0dda7d14d..417c1fc8a2a8d 100644 --- a/docs/data/charts/getting-started/getting-started.md +++ b/docs/data/charts/getting-started/getting-started.md @@ -19,29 +19,33 @@ Run one of the following commands to add the MUI X Charts to your project: npm install @mui/x-charts ``` -```bash yarn -yarn add @mui/x-charts -``` - ```bash pnpm pnpm add @mui/x-charts ``` +```bash yarn +yarn add @mui/x-charts +``` + The Charts package has a peer dependency on `@mui/material`. If you are not already using it in your project, you can install it with: + ```bash npm npm install @mui/material @emotion/react @emotion/styled ``` -```bash yarn -yarn add @mui/material @emotion/react @emotion/styled -``` + ```bash pnpm pnpm add @mui/material @emotion/react @emotion/styled ``` + +```bash yarn +yarn add @mui/material @emotion/react @emotion/styled +``` + @@ -64,14 +68,14 @@ Material UI is using [Emotion](https://emotion.sh/docs/introduction) as a styli npm install @mui/styled-engine-sc styled-components ``` -```bash yarn -yarn add @mui/styled-engine-sc styled-components -``` - ```bash pnpm pnpm add @mui/styled-engine-sc styled-components ``` +```bash yarn +yarn add @mui/styled-engine-sc styled-components +``` + Take a look at the [Styled engine guide](/material-ui/integrations/styled-components/) for more information about how to configure `styled-components` as the style engine. diff --git a/docs/data/data-grid/getting-started/getting-started.md b/docs/data/data-grid/getting-started/getting-started.md index 84dae9faae038..696a9da03c95c 100644 --- a/docs/data/data-grid/getting-started/getting-started.md +++ b/docs/data/data-grid/getting-started/getting-started.md @@ -14,18 +14,19 @@ The Data Grid package has a peer dependency on `@mui/material`. If you are not already using it in your project, you can install it with: + ```bash npm npm install @mui/material @emotion/react @emotion/styled ``` -```bash yarn -yarn add @mui/material @emotion/react @emotion/styled -``` - ```bash pnpm pnpm add @mui/material @emotion/react @emotion/styled ``` +```bash yarn +yarn add @mui/material @emotion/react @emotion/styled +``` + @@ -44,18 +45,19 @@ Please note that [react](https://www.npmjs.com/package/react) and [react-dom](ht Material UI is using [Emotion](https://emotion.sh/docs/introduction) as a styling engine by default. If you want to use [`styled-components`](https://styled-components.com/) instead, run: + ```bash npm npm install @mui/styled-engine-sc styled-components ``` -```bash yarn -yarn add @mui/styled-engine-sc styled-components -``` - ```bash pnpm pnpm add @mui/styled-engine-sc styled-components ``` +```bash yarn +yarn add @mui/styled-engine-sc styled-components +``` + :::info diff --git a/docs/data/date-pickers/getting-started/getting-started.md b/docs/data/date-pickers/getting-started/getting-started.md index ac7925ea7c394..7572576f22f64 100644 --- a/docs/data/date-pickers/getting-started/getting-started.md +++ b/docs/data/date-pickers/getting-started/getting-started.md @@ -31,15 +31,19 @@ The Date and Time Pickers package has a peer dependency on `@mui/material`. If you are not already using it in your project, you can install it with: + ```bash npm npm install @mui/material @emotion/react @emotion/styled ``` -```bash yarn -yarn add @mui/material @emotion/react @emotion/styled -``` + ```bash pnpm pnpm add @mui/material @emotion/react @emotion/styled ``` + +```bash yarn +yarn add @mui/material @emotion/react @emotion/styled +``` + @@ -58,18 +62,19 @@ Please note that [react](https://www.npmjs.com/package/react) and [react-dom](ht Material UI is using [Emotion](https://emotion.sh/docs/introduction) as a styling engine by default. If you want to use [`styled-components`](https://styled-components.com/) instead, run: + ```bash npm npm install @mui/styled-engine-sc styled-components ``` -```bash yarn -yarn add @mui/styled-engine-sc styled-components -``` - ```bash pnpm pnpm add @mui/styled-engine-sc styled-components ``` +```bash yarn +yarn add @mui/styled-engine-sc styled-components +``` + Take a look at the [Styled engine guide](/material-ui/integrations/styled-components/) for more information about how to configure `styled-components` as the style engine. diff --git a/docs/data/migration/migration-pickers-lab/migration-pickers-lab.md b/docs/data/migration/migration-pickers-lab/migration-pickers-lab.md index a449aa68def35..25e25c6456c2f 100644 --- a/docs/data/migration/migration-pickers-lab/migration-pickers-lab.md +++ b/docs/data/migration/migration-pickers-lab/migration-pickers-lab.md @@ -32,18 +32,19 @@ If you already have a license for `@mui/x-data-grid-pro`, you can use the same o #### Community plan + ```bash npm npm install @mui/x-date-pickers ``` -```bash yarn -yarn add @mui/x-date-pickers -``` - ```bash pnpm pnpm add @mui/x-date-pickers ``` +```bash yarn +yarn add @mui/x-date-pickers +``` + #### Pro plan @@ -54,14 +55,14 @@ pnpm add @mui/x-date-pickers npm install @mui/x-date-pickers-pro @mui/x-license-pro ``` -```bash yarn -yarn add @mui/x-date-pickers-pro @mui/x-license-pro -``` - ```bash pnpm pnpm add @mui/x-date-pickers-pro @mui/x-license-pro ``` +```bash 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. diff --git a/docs/data/migration/migration-tree-view-lab/migration-tree-view-lab.md b/docs/data/migration/migration-tree-view-lab/migration-tree-view-lab.md index ca437680baa84..2b1a932e33ffe 100644 --- a/docs/data/migration/migration-tree-view-lab/migration-tree-view-lab.md +++ b/docs/data/migration/migration-tree-view-lab/migration-tree-view-lab.md @@ -18,18 +18,19 @@ This migration is about the npm packages used, it **does not** affect the behavi ### 1. Install MUI X package + ```bash npm npm install @mui/x-tree-view ``` -```bash yarn -yarn add @mui/x-tree-view -``` - ```bash pnpm pnpm add @mui/x-tree-view ``` +```bash yarn +yarn add @mui/x-tree-view +``` + ### 2. Run the code mod diff --git a/docs/data/tree-view/getting-started/getting-started.md b/docs/data/tree-view/getting-started/getting-started.md index 3ae405a02a8d7..8b57abc56271b 100644 --- a/docs/data/tree-view/getting-started/getting-started.md +++ b/docs/data/tree-view/getting-started/getting-started.md @@ -18,33 +18,38 @@ Using your favorite package manager, install `@mui/x-tree-view`: + ```bash npm npm install @mui/x-tree-view ``` -```bash yarn -yarn add @mui/x-tree-view -``` - ```bash pnpm pnpm add @mui/x-tree-view ``` +```bash yarn +yarn add @mui/x-tree-view +``` + The Tree View package has a peer dependency on `@mui/material`. If you are not already using it in your project, you can install it with: + ```bash npm npm install @mui/material @emotion/react @emotion/styled ``` -```bash yarn -yarn add @mui/material @emotion/react @emotion/styled -``` + ```bash pnpm pnpm add @mui/material @emotion/react @emotion/styled ``` + +```bash yarn +yarn add @mui/material @emotion/react @emotion/styled +``` + diff --git a/docs/src/modules/components/InstallationInstructions.tsx b/docs/src/modules/components/InstallationInstructions.tsx index 18faa37de0e62..4f0c59bd4a659 100644 --- a/docs/src/modules/components/InstallationInstructions.tsx +++ b/docs/src/modules/components/InstallationInstructions.tsx @@ -6,8 +6,8 @@ import ToggleOptions from './ToggleOptions'; const defaultPackageManagers: Record = { npm: 'npm install', - yarn: 'yarn add', pnpm: 'pnpm add', + yarn: 'yarn add', }; export default function InstallationInstructions(props: {