[docs-infra] Use the @mui/docs/HighlightedCode (#12848)

Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Co-authored-by: Lukas <llukas.tyla@gmail.com>
mui · Apr 26, 2024 · 2b4a75d · 2b4a75d
1 parent a61561a
commit 2b4a75d
Show file tree

Hide file tree

Showing 27 changed files with 50 additions and 60 deletions.
diff --git a/docs/data/charts/bars/BarClickNoSnap.js b/docs/data/charts/bars/BarClickNoSnap.js
@@ -7,7 +7,7 @@ import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';
 
 import { BarChart } from '@mui/x-charts/BarChart';
 
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 const barChartsParams = {
   series: [

diff --git a/docs/data/charts/bars/ColorScaleNoSnap.js → docs/data/charts/bars/ColorScale.js b/docs/data/charts/bars/ColorScaleNoSnap.js → docs/data/charts/bars/ColorScale.js
@@ -3,12 +3,11 @@ import { BarChart } from '@mui/x-charts/BarChart';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
-// @ts-ignore
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 const series = [{ data: [-2, -9, 12, 11, 6, -4] }];
 
-export default function ColorScaleNoSnap() {
+export default function ColorScale() {
   const [colorX, setColorX] = React.useState('piecewise');
   const [colorY, setColorY] = React.useState('None');
 

diff --git a/docs/data/charts/bars/ColorScaleNoSnap.tsx → docs/data/charts/bars/ColorScale.tsx b/docs/data/charts/bars/ColorScaleNoSnap.tsx → docs/data/charts/bars/ColorScale.tsx
@@ -3,12 +3,11 @@ import { BarChart } from '@mui/x-charts/BarChart';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
-// @ts-ignore
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 const series = [{ data: [-2, -9, 12, 11, 6, -4] }];
 
-export default function ColorScaleNoSnap() {
+export default function ColorScale() {
   const [colorX, setColorX] = React.useState<
     'None' | 'piecewise' | 'continuous' | 'ordinal'
   >('piecewise');

diff --git a/docs/data/charts/bars/bars.md b/docs/data/charts/bars/bars.md
@@ -98,7 +98,7 @@ The bar charts use by priority:
 
 Learn more about the `colorMap` properties in the [Styling docs](/x/react-charts/styling/#values-color).
 
-{{"demo": "ColorScaleNoSnap.js"}}
+{{"demo": "ColorScale.js"}}
 
 ### Border Radius
 

diff --git a/docs/data/charts/lines/ColorScaleNoSnap.js → docs/data/charts/lines/ColorScale.js b/docs/data/charts/lines/ColorScaleNoSnap.js → docs/data/charts/lines/ColorScale.js
@@ -3,10 +3,9 @@ import { LineChart } from '@mui/x-charts/LineChart';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
-// @ts-ignore
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
-export default function ColorScaleNoSnap() {
+export default function ColorScale() {
   const [colorX, setColorX] = React.useState('None');
   const [colorY, setColorY] = React.useState('piecewise');
 

diff --git a/docs/data/charts/lines/ColorScaleNoSnap.tsx → docs/data/charts/lines/ColorScale.tsx b/docs/data/charts/lines/ColorScaleNoSnap.tsx → docs/data/charts/lines/ColorScale.tsx
@@ -3,10 +3,9 @@ import { LineChart } from '@mui/x-charts/LineChart';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
-// @ts-ignore
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
-export default function ColorScaleNoSnap() {
+export default function ColorScale() {
   const [colorX, setColorX] = React.useState<
     'None' | 'piecewise' | 'continuous' | 'ordinal'
   >('None');

diff --git a/docs/data/charts/lines/InterpolationDemoNoSnap.js b/docs/data/charts/lines/InterpolationDemoNoSnap.js
@@ -4,7 +4,7 @@ import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
 import { LineChart } from '@mui/x-charts/LineChart';
 
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 const curveTypes = [
   'catmullRom',

diff --git a/docs/data/charts/lines/LineClickNoSnap.js b/docs/data/charts/lines/LineClickNoSnap.js
@@ -7,7 +7,7 @@ import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';
 
 import { LineChart } from '@mui/x-charts/LineChart';
 
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 const lineChartsParams = {
   series: [

diff --git a/docs/data/charts/lines/lines.md b/docs/data/charts/lines/lines.md
@@ -159,7 +159,7 @@ The line charts use by priority:
 
 Learn more about the `colorMap` properties in the [Styling docs](/x/react-charts/styling/#values-color).
 
-{{"demo": "ColorScaleNoSnap.js"}}
+{{"demo": "ColorScale.js"}}
 
 :::warning
 For now, ordinal config is not supported for line chart.

diff --git a/docs/data/charts/pie/PieClickNoSnap.js b/docs/data/charts/pie/PieClickNoSnap.js
@@ -7,7 +7,7 @@ import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';
 
 import { PieChart } from '@mui/x-charts/PieChart';
 
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 const data1 = [
   { label: 'Group A', value: 400 },

diff --git a/docs/data/charts/scatter/ColorScaleNoSnap.js → docs/data/charts/scatter/ColorScale.js b/docs/data/charts/scatter/ColorScaleNoSnap.js → docs/data/charts/scatter/ColorScale.js
@@ -4,15 +4,14 @@ import { ScatterChart } from '@mui/x-charts/ScatterChart';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
-// @ts-ignore
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 import { Chance } from 'chance';
 
 const POINTS_NUMBER = 50;
 const chance = new Chance(42);
 
-export default function ColorScaleNoSnap() {
+export default function ColorScale() {
   const [colorX, setColorX] = React.useState('piecewise');
   const [colorY, setColorY] = React.useState('None');
   const [colorZ, setColorZ] = React.useState('None');

diff --git a/.../data/charts/scatter/ColorScaleNoSnap.tsx → docs/data/charts/scatter/ColorScale.tsx b/.../data/charts/scatter/ColorScaleNoSnap.tsx → docs/data/charts/scatter/ColorScale.tsx
@@ -4,15 +4,14 @@ import { ScatterValueType } from '@mui/x-charts';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
-// @ts-ignore
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 import { Chance } from 'chance';
 
 const POINTS_NUMBER = 50;
 const chance = new Chance(42);
 
-export default function ColorScaleNoSnap() {
+export default function ColorScale() {
   const [colorX, setColorX] = React.useState<'None' | 'piecewise' | 'continuous'>(
     'piecewise',
   );

diff --git a/docs/data/charts/scatter/ScatterClickNoSnap.js b/docs/data/charts/scatter/ScatterClickNoSnap.js
@@ -7,7 +7,7 @@ import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';
 
 import { ScatterChart } from '@mui/x-charts/ScatterChart';
 
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 const scatterChartsParams = {
   series: [

diff --git a/docs/data/charts/scatter/scatter.md b/docs/data/charts/scatter/scatter.md
@@ -88,7 +88,7 @@ Here are three ways to set z value to 5.
 
 Learn more about the `colorMap` properties in the [Styling docs](/x/react-charts/styling/#values-color).
 
-{{"demo": "ColorScaleNoSnap.js"}}
+{{"demo": "ColorScale.js"}}
 
 ### Grid
 

diff --git a/docs/data/data-grid/events/CatalogOfEventsNoSnap.js b/docs/data/data-grid/events/CatalogOfEventsNoSnap.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';

diff --git a/docs/data/date-pickers/base-concepts/ComponentExplorerNoSnap.js b/docs/data/date-pickers/base-concepts/ComponentExplorerNoSnap.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 // @ts-ignore
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
 import Stack from '@mui/material/Stack';
 import Box from '@mui/material/Box';

diff --git a/docs/data/date-pickers/base-concepts/ComponentExplorerNoSnap.tsx b/docs/data/date-pickers/base-concepts/ComponentExplorerNoSnap.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 // @ts-ignore
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
 import Stack from '@mui/material/Stack';
 import Box from '@mui/material/Box';

diff --git a/docs/src/modules/components/ApiDocs.js b/docs/src/modules/components/ApiDocs.js
@@ -7,7 +7,7 @@ import AccordionDetails from '@mui/material/AccordionDetails';
 import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import PropTypes from 'prop-types';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 
 const PrimaryHeading = styled(Typography)(({ theme }) => ({
   fontSize: theme.typography.pxToRem(15),

diff --git a/docs/src/modules/components/ChartsUsageDemo.js b/docs/src/modules/components/ChartsUsageDemo.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Box from '@mui/joy/Box';
 import BrandingProvider from 'docs/src/BrandingProvider';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import DemoPropsForm from './DemoPropsForm';
 
 export default function ChartsUsageDemo({

diff --git a/docs/src/modules/components/CustomizationPlayground.tsx b/docs/src/modules/components/CustomizationPlayground.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 // @ts-ignore
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 // @ts-ignore
 import BrandingProvider from 'docs/src/BrandingProvider';
 import { styled, Theme, alpha, useTheme } from '@mui/material/styles';

diff --git a/docs/src/modules/components/InterfaceApiPage.js b/docs/src/modules/components/InterfaceApiPage.js
@@ -7,8 +7,8 @@ import Alert from '@mui/material/Alert';
 import VerifiedRoundedIcon from '@mui/icons-material/VerifiedRounded';
 import { alpha } from '@mui/material/styles';
 import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
+import { MarkdownElement } from '@mui/docs/MarkdownElement';
 import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
 import PropertiesSection from 'docs/src/modules/components/ApiPage/sections/PropertiesSection';
 import { DEFAULT_API_LAYOUT_STORAGE_KEYS } from 'docs/src/modules/components/ApiPage/sections/ToggleDisplayOption';

diff --git a/docs/src/modules/components/LocalizationTable.js b/docs/src/modules/components/LocalizationTable.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
 import { Link } from '@mui/docs/Link';
-import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
+import { MarkdownElement } from '@mui/docs/MarkdownElement';
 
 const Root = styled('div')(({ theme }) => ({
   position: 'relative',

diff --git a/docs/src/modules/components/PickersRenderingInstructions.js b/docs/src/modules/components/PickersRenderingInstructions.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import Stack from '@mui/material/Stack';
 import ToggleOptions from './ToggleOptions';
 

diff --git a/docs/src/modules/components/SelectorsDocs.js b/docs/src/modules/components/SelectorsDocs.js
@@ -7,8 +7,8 @@ import AccordionDetails from '@mui/material/AccordionDetails';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
+import { MarkdownElement } from '@mui/docs/MarkdownElement';
 import allSelectors from 'docsx/pages/x/api/data-grid/selectors.json';
 
 const SelectorDetails = styled(AccordionDetails)({

diff --git a/package.json b/package.json
@@ -86,9 +86,9 @@
     "@emotion/styled": "^11.11.0",
     "@mnajdova/enzyme-adapter-react-18": "^0.2.0",
     "@mui/icons-material": "^5.15.14",
-    "@mui/internal-markdown": "^1.0.0",
+    "@mui/internal-markdown": "^1.0.3",
     "@mui/material": "^5.15.14",
-    "@mui/monorepo": "github:mui/material-ui#e1d94d5ce097815bcd738352e69bb43ce03bd266",
+    "@mui/monorepo": "github:mui/material-ui#afffc2ffc3db1e6abf48f3b3e13a41e8b758f874",
     "@mui/utils": "^5.15.14",
     "@next/eslint-plugin-next": "14.0.4",
     "@octokit/plugin-retry": "^6.0.1",
@@ -197,8 +197,7 @@
     "patchedDependencies": {
       "date-fns-jalali@2.13.0-0": "patches/date-fns-jalali@2.13.0-0.patch",
       "karma-mocha@2.0.1": "patches/karma-mocha@2.0.1.patch",
-      "babel-plugin-replace-imports@1.0.2": "patches/babel-plugin-replace-imports@1.0.2.patch",
-      "@mui/monorepo@6.0.0-alpha.0": "patches/@mui__monorepo@6.0.0-alpha.0.patch"
+      "babel-plugin-replace-imports@1.0.2": "patches/babel-plugin-replace-imports@1.0.2.patch"
     }
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tsconfig.json b/tsconfig.json
@@ -28,6 +28,8 @@
       "@mui/x-tree-view-pro/*": ["./packages/x-tree-view-pro/src/*"],
       "@mui/x-license": ["./packages/x-license/src"],
       "@mui/x-license/*": ["./packages/x-license/src/*"],
+      "@mui/docs": ["./node_modules/@mui/monorepo/packages/mui-docs/src"],
+      "@mui/docs/*": ["./node_modules/@mui/monorepo/packages/mui-docs/src/*"],
       "@mui-internal/test-utils": ["./node_modules/@mui/monorepo/packages/test-utils/src"],
       "@mui-internal/test-utils/*": ["./node_modules/@mui/monorepo/packages/test-utils/src/*"],
       "@mui-internal/api-docs-builder": ["./node_modules/@mui/monorepo/packages/api-docs-builder"],