[code-infra] Move HighlightedCodeWithTabs to @mui/docs (#42060)

mui · Jul 4, 2024 · 53c8624 · 53c8624
1 parent df2b591
commit 53c8624
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 8 deletions.
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -12,7 +12,7 @@ import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
 import NoSsr from '@mui/material/NoSsr';
-import { HighlightedCode } from '@mui/docs/HighlightedCode';
+import { HighlightedCode, CodeTab, CodeTabList } from '@mui/docs/HighlightedCode';
 import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
 import LibraryAddCheckRoundedIcon from '@mui/icons-material/LibraryAddCheckRounded';
 import DemoSandbox from 'docs/src/modules/components/DemoSandbox';
@@ -28,7 +28,6 @@ import { useUserLanguage, useTranslate } from '@mui/docs/i18n';
 import stylingSolutionMapping from 'docs/src/modules/utils/stylingSolutionMapping';
 import DemoToolbarRoot from 'docs/src/modules/components/DemoToolbarRoot';
 import { BrandingProvider, blue, blueDark, grey } from '@mui/docs/branding';
-import { CodeTab, CodeTabList } from 'docs/src/modules/components/HighlightedCodeWithTabs';
 
 /**
  * Removes leading spaces (indentation) present in the `.tsx` previews

diff --git a/docs/src/modules/components/HighlightedCodeWithTabs.js b/docs/src/modules/components/HighlightedCodeWithTabs.js
@@ -0,0 +1,5 @@
+// Backwards compatibility for Toolpad and X.
+// TODO: remove when Toolpad and X migrated to `@mui/docs/HighlightedCode`
+import { HighlightedCodeWithTabs } from '@mui/docs/HighlightedCode';
+
+export default HighlightedCodeWithTabs;
diff --git a/docs/src/modules/components/RichMarkdownElement.js b/docs/src/modules/components/RichMarkdownElement.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslate, useUserLanguage } from '@mui/docs/i18n';
+import { HighlightedCodeWithTabs } from '@mui/docs/HighlightedCode';
 import { MarkdownElement } from '@mui/docs/MarkdownElement';
-import HighlightedCodeWithTabs from 'docs/src/modules/components/HighlightedCodeWithTabs';
 import Demo from 'docs/src/modules/components/Demo';
 
 function noComponent(moduleID) {

diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json
@@ -56,6 +56,7 @@
     "@mui/material": "^5.0.0",
     "@mui/system": "^5.0.0",
     "@types/react": "^17.0.0 || ^18.0.0",
+    "chai": "^4.4.1",
     "next": "^13.5.1 || ^14",
     "react": "^17.0.0 || ^18.0.0"
   },

diff --git a/packages/mui-docs/src/HighlightedCode/HighlightedCode.test.tsx b/packages/mui-docs/src/HighlightedCode/HighlightedCode.test.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
-import { getDesignTokens } from '@mui/docs/branding';
-import { HighlightedCode } from '@mui/docs/HighlightedCode';
+import { getDesignTokens } from '../branding';
+import { HighlightedCode } from './HighlightedCode';
 
 describe('HighlightedCode', () => {
   const { render } = createRenderer();

diff --git a/...es/components/HighlightedCodeWithTabs.tsx → ...ghlightedCode/HighlightedCodeWithTabs.tsx b/...es/components/HighlightedCodeWithTabs.tsx → ...ghlightedCode/HighlightedCodeWithTabs.tsx
@@ -5,7 +5,7 @@ import { TabsList as TabsListBase } from '@mui/base/TabsList';
 import { TabPanel as TabPanelBase } from '@mui/base/TabPanel';
 import { Tab as TabBase } from '@mui/base/Tab';
 import useLocalStorageState from '@mui/utils/useLocalStorageState';
-import { HighlightedCode } from '@mui/docs/HighlightedCode';
+import { HighlightedCode } from './HighlightedCode';
 
 export const CodeTabList = styled(TabsListBase)<{
   ownerState: { mounted: boolean; contained?: boolean };
@@ -285,7 +285,7 @@ type TabsConfig = {
   tab: string;
 };
 
-export default function HighlightedCodeWithTabs(
+export function HighlightedCodeWithTabs(
   props: {
     tabs: Array<TabsConfig>;
     storageKey?: string;
@@ -320,7 +320,6 @@ export default function HighlightedCodeWithTabs(
       {tabs.map(({ tab, language, code }) => (
         <CodeTabPanel ownerState={ownerState} key={tab} value={tab}>
           <HighlightedCode
-            // @ts-ignore
             language={language || 'bash'}
             code={typeof code === 'function' ? code(tab) : code}
           />

diff --git a/packages/mui-docs/src/HighlightedCode/index.tsx b/packages/mui-docs/src/HighlightedCode/index.tsx
@@ -1 +1,2 @@
 export * from './HighlightedCode';
+export * from './HighlightedCodeWithTabs';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml