Rename "docs-base" path alias to "docs" (mui#742)

babel.config.js

@@ -17,8 +17,7 @@ module.exports = function getBabelConfig(api) {
 
   const defaultAlias = {
     '@base_ui/react': resolveAliasPath('./packages/mui-base/src'),
-    docs: resolveAliasPath('./node_modules/@mui/monorepo/docs'),
-    'docs-base': resolveAliasPath('./docs'),
+    docs: resolveAliasPath('./docs'),
     test: resolveAliasPath('./test'),
     '@mui-internal/api-docs-builder': resolveAliasPath(
       './node_modules/@mui/monorepo/packages/api-docs-builder',

docs/app/(content)/components/[slug]/getApiReferenceData.ts

@@ -1,5 +1,5 @@
 import { readFile } from 'node:fs/promises';
-import { ComponentAPIReference } from 'docs-base/types/ComponentAPIReference';
+import { ComponentAPIReference } from 'docs/types/ComponentAPIReference';
 import kebabCase from 'lodash/kebabCase';
 
 export function getApiReferenceData(componentNames: string[]): Promise<ComponentAPIReference[]> {

docs/app/(content)/components/[slug]/page.tsx

@@ -1,18 +1,15 @@
 import * as React from 'react';
 import { Metadata } from 'next';
-import { components } from 'docs-base/src/components/content/MDXComponents';
-import { getMarkdownPage, getMarkdownPageMetadata } from 'docs-base/app/(content)/getMarkdownPage';
-import { ComponentLinkHeader } from 'docs-base/src/components/content/ComponentLinkHeader';
-import { Description } from 'docs-base/src/components/content/Description';
-import { TableOfContents } from 'docs-base/src/components/TableOfContents';
-import routes, { getSlugs } from 'docs-base/data/pages';
-import { SiblingPageLinks } from 'docs-base/src/components/SiblingPageLinks';
-import { EditPageGithubLink } from 'docs-base/src/components/EditPageGithubLink';
-import {
-  ApiReference,
-  getApiReferenceTableOfContents,
-} from 'docs-base/src/components/ApiReference';
-import { DemoLoader, DemoLoaderProps } from 'docs-base/src/components/demo/DemoLoader';
+import { components } from 'docs/src/components/content/MDXComponents';
+import { getMarkdownPage, getMarkdownPageMetadata } from 'docs/app/(content)/getMarkdownPage';
+import { ComponentLinkHeader } from 'docs/src/components/content/ComponentLinkHeader';
+import { Description } from 'docs/src/components/content/Description';
+import { TableOfContents } from 'docs/src/components/TableOfContents';
+import routes, { getSlugs } from 'docs/data/pages';
+import { SiblingPageLinks } from 'docs/src/components/SiblingPageLinks';
+import { EditPageGithubLink } from 'docs/src/components/EditPageGithubLink';
+import { ApiReference, getApiReferenceTableOfContents } from 'docs/src/components/ApiReference';
+import { DemoLoader, DemoLoaderProps } from 'docs/src/components/demo/DemoLoader';
 import { getApiReferenceData } from './getApiReferenceData';
 import classes from '../../styles.module.css';
 

docs/app/(content)/getMarkdownPage.ts

@@ -12,7 +12,7 @@ import extractToc, { type Toc } from '@stefanprobst/rehype-extract-toc';
 import exportToc from '@stefanprobst/rehype-extract-toc/mdx';
 import { read as readVFile } from 'to-vfile';
 import { matter } from 'vfile-matter';
-import { config } from 'docs-base/config';
+import { config } from 'docs/config';
 
 export const DATA_PATH = path.join(process.cwd(), 'data');
 

docs/app/(content)/getting-started/[slug]/page.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { Metadata } from 'next';
-import { components } from 'docs-base/src/components/content/MDXComponents';
-import { getMarkdownPage, getMarkdownPageMetadata } from 'docs-base/app/(content)/getMarkdownPage';
-import { TableOfContents } from 'docs-base/src/components/TableOfContents';
-import routes, { getSlugs } from 'docs-base/data/pages';
-import { Description } from 'docs-base/src/components/content/Description';
-import { SiblingPageLinks } from 'docs-base/src/components/SiblingPageLinks';
-import { EditPageGithubLink } from 'docs-base/src/components/EditPageGithubLink';
+import { components } from 'docs/src/components/content/MDXComponents';
+import { getMarkdownPage, getMarkdownPageMetadata } from 'docs/app/(content)/getMarkdownPage';
+import { TableOfContents } from 'docs/src/components/TableOfContents';
+import routes, { getSlugs } from 'docs/data/pages';
+import { Description } from 'docs/src/components/content/Description';
+import { SiblingPageLinks } from 'docs/src/components/SiblingPageLinks';
+import { EditPageGithubLink } from 'docs/src/components/EditPageGithubLink';
 import classes from '../../styles.module.css';
 
 const CATEGORY_SEGMENT = 'getting-started';

docs/app/(content)/guides/[slug]/page.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { Metadata } from 'next';
-import { components } from 'docs-base/src/components/content/MDXComponents';
-import { getMarkdownPage, getMarkdownPageMetadata } from 'docs-base/app/(content)/getMarkdownPage';
-import { TableOfContents } from 'docs-base/src/components/TableOfContents';
-import routes, { getSlugs } from 'docs-base/data/pages';
-import { Description } from 'docs-base/src/components/content/Description';
-import { SiblingPageLinks } from 'docs-base/src/components/SiblingPageLinks';
-import { EditPageGithubLink } from 'docs-base/src/components/EditPageGithubLink';
+import { components } from 'docs/src/components/content/MDXComponents';
+import { getMarkdownPage, getMarkdownPageMetadata } from 'docs/app/(content)/getMarkdownPage';
+import { TableOfContents } from 'docs/src/components/TableOfContents';
+import routes, { getSlugs } from 'docs/data/pages';
+import { Description } from 'docs/src/components/content/Description';
+import { SiblingPageLinks } from 'docs/src/components/SiblingPageLinks';
+import { EditPageGithubLink } from 'docs/src/components/EditPageGithubLink';
 import classes from '../../styles.module.css';
 
 const CATEGORY_SEGMENT = 'guides';

docs/app/(content)/layout.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import { AppBar } from 'docs-base/src/components/AppBar';
-import { Navigation } from 'docs-base/src/components/Navigation';
-import routes from 'docs-base/data/pages';
+import { AppBar } from 'docs/src/components/AppBar';
+import { Navigation } from 'docs/src/components/Navigation';
+import routes from 'docs/data/pages';
 
 export default function Layout({ children }: React.PropsWithChildren<{}>) {
   return (

docs/app/DocsProviders.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Tooltip } from '@base_ui/react/Tooltip';
-import { DemoVariantSelectorProvider } from 'docs-base/src/components/demo/DemoVariantSelectorProvider';
-import { PackageManagerSnippetProvider } from 'docs-base/src/blocks/PackageManagerSnippet/PackageManagerSnippetProvider';
+import { DemoVariantSelectorProvider } from 'docs/src/components/demo/DemoVariantSelectorProvider';
+import { PackageManagerSnippetProvider } from 'docs/src/blocks/PackageManagerSnippet/PackageManagerSnippetProvider';
 
 export function DocsProviders({ children }: { children: React.ReactNode }) {
   return (

docs/app/layout.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Metadata } from 'next';
-import { GoogleAnalytics } from 'docs-base/src/components/GoogleAnalytics';
+import { GoogleAnalytics } from 'docs/src/components/GoogleAnalytics';
 import { DocsProviders } from './DocsProviders';
 import '../src/styles/style.css';
 

docs/app/not-found.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import { AppBar } from 'docs-base/src/components/AppBar';
-import { Navigation } from 'docs-base/src/components/Navigation';
-import routes from 'docs-base/data/pages';
+import { AppBar } from 'docs/src/components/AppBar';
+import { Navigation } from 'docs/src/components/Navigation';
+import routes from 'docs/data/pages';
 import classes from './(content)/styles.module.css';
 
 export default function NotFound() {

docs/app/page.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Metadata } from 'next';
 import Link from 'next/link';
-import { BaseUIIcon } from 'docs-base/src/icons/BaseUI';
+import { BaseUIIcon } from 'docs/src/icons/BaseUI';
 
 export default function Home() {
   return (
@@ -21,10 +21,10 @@ export default function Home() {
       <div className="mb-8">
         <BaseUIIcon />
       </div>
-      <h1 className="Text size-7 mb-2">
+      <h1 className="Text mb-2 size-7">
         Unstyled UI components for building accessible web apps and design systems.
       </h1>
-      <p className="Text size-5 color-gray weight-1 mb-8">
+      <p className="Text color-gray weight-1 mb-8 size-5">
         From the creators of Radix, Floating UI, and MUI.
       </p>
       <Link className="Link Text size-4" href="/getting-started/overview">

docs/next.config.mjs

@@ -38,8 +38,7 @@ const nextConfig = {
         ...config.resolve,
         alias: {
           ...config.resolve.alias,
-          'docs-base': path.resolve(workspaceRoot, 'docs'),
-          docs: path.resolve(workspaceRoot, 'node_modules/@mui/monorepo/docs'),
+          docs: path.resolve(workspaceRoot, 'docs'),
         },
       },
       module: {

docs/scripts/formattedTSDemos.js

@@ -88,7 +88,7 @@ async function transpileFile(tsxPath, project) {
     if (enableJSXPreview) {
       transformOptions.plugins = transformOptions.plugins.concat([
         [
-          require.resolve('docs/src/modules/utils/babel-plugin-jsx-preview'),
+          require.resolve('@mui/monorepo/docs/src/modules/utils/babel-plugin-jsx-preview'),
           { maxLines: 16, outputFilename: `${tsxPath}.preview` },
         ],
       ]);

docs/src/blocks/sandbox/createCodeSandbox.ts

@@ -1,5 +1,5 @@
 import LZString from 'lz-string';
-import { DemoFile } from 'docs-base/src/blocks/Demo';
+import { DemoFile } from 'docs/src/blocks/Demo';
 import * as CRA from './CreateReactApp';
 import { packDemo } from './packDemo';
 import { addHiddenInput } from './addHiddenInput';

docs/src/blocks/sandbox/createStackBlitzProject.ts

@@ -1,4 +1,4 @@
-import { DemoFile } from 'docs-base/src/blocks/Demo';
+import { DemoFile } from 'docs/src/blocks/Demo';
 import * as CRA from './CreateReactApp';
 import { packDemo } from './packDemo';
 import { addHiddenInput } from './addHiddenInput';

docs/src/blocks/sandbox/packDemo.test.ts

@@ -1,6 +1,6 @@
 import { describe, it } from 'mocha';
 import { expect } from 'chai';
-import { DemoFile } from 'docs-base/src/blocks/Demo';
+import { DemoFile } from 'docs/src/blocks/Demo';
 import { packDemo } from './packDemo';
 
 describe('packDemo', () => {

docs/src/blocks/sandbox/packDemo.ts

@@ -1,4 +1,4 @@
-import { DemoFile } from 'docs-base/src/blocks/Demo';
+import { DemoFile } from 'docs/src/blocks/Demo';
 import flattenRelativeImports from './flattenRelativeImports';
 
 const SCRIPT_EXTENSIONS = ['js', 'ts', 'jsx', 'tsx'];

docs/src/components/ApiReference.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-danger */
 import * as React from 'react';
-import { ComponentAPIReference } from 'docs-base/types/ComponentAPIReference';
+import { ComponentAPIReference } from 'docs/types/ComponentAPIReference';
 import { type TocEntry } from '@stefanprobst/rehype-extract-toc';
 import classes from './ApiReference.module.css';
 

docs/src/components/AppBar.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { BaseUIIcon } from 'docs-base/src/icons/BaseUI';
-import { GitHubIcon } from 'docs-base/src/icons/GitHub';
-import { SettingsIcon } from 'docs-base/src/icons/Settings';
-import { IconButton } from 'docs-base/src/design-system/IconButton';
-import { IconLinkButton } from 'docs-base/src/design-system/IconLinkButton';
+import { BaseUIIcon } from 'docs/src/icons/BaseUI';
+import { GitHubIcon } from 'docs/src/icons/GitHub';
+import { SettingsIcon } from 'docs/src/icons/Settings';
+import { IconButton } from 'docs/src/design-system/IconButton';
+import { IconLinkButton } from 'docs/src/design-system/IconLinkButton';
 import { DocsVersionSelector } from './DocsVersionSelector';
 import packageJson from '../../../package.json';
 import classes from './AppBar.module.css';

docs/src/components/DocsVersionSelector.tsx

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { SelectIcon } from 'docs-base/src/icons/Select';
+import { SelectIcon } from 'docs/src/icons/Select';
 import { Menu } from '@base_ui/react/Menu';
 import classes from './DocsVersionSelector.module.css';
 

docs/src/components/Navigation.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Link from 'next/link';
-import { RouteMetadata } from 'docs-base/data/pages';
+import { RouteMetadata } from 'docs/data/pages';
 import classes from './Navigation.module.css';
 
 interface NavigationProps {

docs/src/components/demo/CodeSandboxLink.tsx

@@ -1,9 +1,9 @@
 'use client';
 import * as React from 'react';
-import { useDemoContext } from 'docs-base/src/blocks/Demo/DemoContext';
-import { createCodeSandbox } from 'docs-base/src/blocks/sandbox/createCodeSandbox';
-import { CodesandboxIcon } from 'docs-base/src/icons/Codesandbox';
-import { IconButton } from 'docs-base/src/design-system/IconButton';
+import { useDemoContext } from 'docs/src/blocks/Demo/DemoContext';
+import { createCodeSandbox } from 'docs/src/blocks/sandbox/createCodeSandbox';
+import { CodesandboxIcon } from 'docs/src/icons/Codesandbox';
+import { IconButton } from 'docs/src/design-system/IconButton';
 
 const COMMIT_REF = process.env.PULL_REQUEST_ID ? process.env.COMMIT_REF : undefined;
 const SOURCE_CODE_REPO = process.env.SOURCE_CODE_REPO;

docs/src/components/demo/Demo.tsx

@@ -3,13 +3,13 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { Collapsible } from '@base_ui/react/Collapsible';
 import { ErrorBoundary } from 'react-error-boundary';
-import * as BaseDemo from 'docs-base/src/blocks/Demo';
-import { CopyIcon } from 'docs-base/src/icons/Copy';
-import { ResetIcon } from 'docs-base/src/icons/Reset';
-import { ResetFocusIcon } from 'docs-base/src/icons/ResetFocus';
-import { ChevronDownIcon } from 'docs-base/src/icons/ChevronDown';
-import { IconButton } from 'docs-base/src/design-system/IconButton';
-import { Button } from 'docs-base/src/design-system/Button';
+import * as BaseDemo from 'docs/src/blocks/Demo';
+import { CopyIcon } from 'docs/src/icons/Copy';
+import { ResetIcon } from 'docs/src/icons/Reset';
+import { ResetFocusIcon } from 'docs/src/icons/ResetFocus';
+import { ChevronDownIcon } from 'docs/src/icons/ChevronDown';
+import { IconButton } from 'docs/src/design-system/IconButton';
+import { Button } from 'docs/src/design-system/Button';
 import { DemoVariantSelector } from './DemoVariantSelector';
 import { DemoFileSelector } from './DemoFileSelector';
 import { CodeSandboxLink } from './CodeSandboxLink';

docs/src/components/demo/DemoFileSelector.tsx

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import clsx from 'clsx';
-import { DemoContext } from 'docs-base/src/blocks/Demo';
+import { DemoContext } from 'docs/src/blocks/Demo';
 import { Tabs } from '@base_ui/react/Tabs';
 import classes from './DemoFileSelector.module.css';
 

docs/src/components/demo/DemoVariantSelector.tsx

@@ -1,8 +1,8 @@
 'use client';
 import * as React from 'react';
-import { type DemoVariant } from 'docs-base/src/blocks/Demo';
-import { useDemoContext } from 'docs-base/src/blocks/Demo/DemoContext';
-import { ToggleButtonGroup } from 'docs-base/src/design-system/ToggleButtonGroup';
+import { type DemoVariant } from 'docs/src/blocks/Demo';
+import { useDemoContext } from 'docs/src/blocks/Demo/DemoContext';
+import { ToggleButtonGroup } from 'docs/src/design-system/ToggleButtonGroup';
 import classes from './DemoVariantSelector.module.css';
 import { useDemoVariantSelectorContext } from './DemoVariantSelectorProvider';
 

docs/src/components/demo/GitHubLink.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { useDemoContext } from 'docs-base/src/blocks/Demo/DemoContext';
-import { IconLinkButton } from 'docs-base/src/design-system/IconLinkButton';
-import { GitHubIcon } from 'docs-base/src/icons/GitHub';
+import { useDemoContext } from 'docs/src/blocks/Demo/DemoContext';
+import { IconLinkButton } from 'docs/src/design-system/IconLinkButton';
+import { GitHubIcon } from 'docs/src/icons/GitHub';
 
 export function GitHubLink() {
   const { selectedFile } = useDemoContext();

docs/src/components/demo/StackBlitzLink.tsx

@@ -1,9 +1,9 @@
 'use client';
 import * as React from 'react';
-import { useDemoContext } from 'docs-base/src/blocks/Demo/DemoContext';
-import { createStackBlitzProject } from 'docs-base/src/blocks/sandbox/createStackBlitzProject';
-import { IconButton } from 'docs-base/src/design-system/IconButton';
-import { StackBlitzIcon } from 'docs-base/src/icons/StackBlitz';
+import { useDemoContext } from 'docs/src/blocks/Demo/DemoContext';
+import { createStackBlitzProject } from 'docs/src/blocks/sandbox/createStackBlitzProject';
+import { IconButton } from 'docs/src/design-system/IconButton';
+import { StackBlitzIcon } from 'docs/src/icons/StackBlitz';
 
 const tailwindSetup = `
     <!-- Check out the Tailwind CSS' installation guide for setting it up: https://tailwindcss.com/docs/installation -->

docs/src/components/demo/loadDemo.ts

@@ -2,8 +2,8 @@ import { existsSync, statSync } from 'node:fs';
 import { readFile, readdir } from 'node:fs/promises';
 import { basename, dirname, extname, resolve } from 'node:path';
 import { codeToHtml } from 'shiki';
-import { config } from 'docs-base/config';
-import { DemoFile, DemoVariant } from 'docs-base/src/blocks/Demo';
+import { config } from 'docs/config';
+import { DemoFile, DemoVariant } from 'docs/src/blocks/Demo';
 
 const COMPONENTS_BASE_PATH = 'data/components';
 
@@ -92,7 +92,7 @@ async function loadSimpleDemo(path: string, variantName: string): Promise<DemoVa
   const DemoComponent = (
     await import(
       /* webpackInclude: /\.(tsx?|jsx?)$/ */
-      `docs-base/data/components/${path}`
+      `docs/data/components/${path}`
     )
   ).default;
 

test/regressions/index.js

@@ -4,7 +4,7 @@ import * as ReactDOMClient from 'react-dom/client';
 import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
 import webfontloader from 'webfontloader';
 import TestViewer from './TestViewer';
-import 'docs-base/src/styles/demo-colors.css';
+import 'docs/src/styles/demo-colors.css';
 import './tailwind.css';
 
 // Get all the fixtures specifically written for preventing visual regressions.

test/regressions/webpack.config.js

@@ -95,10 +95,6 @@ module.exports = {
       // Exclude polyfill and treat 'zlib' as an empty module since it is not required. next -> gzip-size relies on it.
       zlib: false,
     },
-    alias: {
-      ...webpackBaseConfig.resolve.alias,
-      docs: false, // Disable this alias as it creates a circular resolution loop with the docs-base alias
-    },
   },
   // TODO: 'browserslist:modern'
   // See https://github.com/webpack/webpack/issues/14203

tsconfig.base.json

@@ -21,8 +21,7 @@
       "@mui-internal/api-docs-builder/*": [
         "./node_modules/@mui/monorepo/packages/api-docs-builder/*"
       ],
-      "docs-base/*": ["./docs/*"],
-      "docs/*": ["./node_modules/@mui/monorepo/docs/*"]
+      "docs/*": ["./docs/*"]
     }
   },
   "exclude": ["**/.*/", "**/build", "**/build-tests", "**/node_modules", "docs/export"]

webpackBaseConfig.js

@@ -14,8 +14,7 @@ module.exports = {
         __dirname,
         './node_modules/@mui/monorepo/packages/api-docs-builder',
       ),
-      docs: path.resolve(__dirname, './node_modules/@mui/monorepo/docs'),
-      'docs-base': path.resolve(__dirname, './docs'),
+      docs: path.resolve(__dirname, './docs'),
     },
     extensions: ['.js', '.ts', '.tsx', '.d.ts'],
   },