[docs] Migrate content to the new location

benchmark/server/scenarios/docs.js

@@ -5,7 +5,7 @@ import path from 'path';
 import * as React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
-import Markdown from 'docs/src/pages/getting-started/templates/blog/Markdown';
+import Markdown from 'docs/data/material/getting-started/templates/blog/Markdown';
 import { createStore } from 'redux';
 import { Provider } from 'react-redux';
 
@@ -17,7 +17,7 @@ const suite = new Benchmark.Suite('core', {
 Benchmark.options.minSamples = 100;
 
 const markdown = fs.readFileSync(
-  path.join(__dirname, '../../../docs/src/pages/getting-started/templates/blog/blog-post.1.md'),
+  path.join(__dirname, '../../../docs/data/material/getting-started/templates/blog/blog-post.1.md'),
   'UTF-8',
 );
 

benchmark/server/scenarios/server.js

@@ -11,7 +11,7 @@ import {
   createGenerateClassName,
 } from '@mui/styles';
 import { green, red } from '@mui/material/colors';
-import Pricing from 'docs/src/pages/getting-started/templates/pricing/Pricing';
+import Pricing from 'docs/data/material/getting-started/templates/pricing/Pricing';
 import { spacing, palette, unstable_styleFunctionSx as styleFunction } from '@mui/system';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';

docs/data/base/pagesApi.js

@@ -1 +1,25 @@
-module.exports = [];
+module.exports = [
+  { pathname: '/base/api/backdrop-unstyled' },
+  { pathname: '/base/api/badge-unstyled' },
+  { pathname: '/base/api/button-unstyled' },
+  { pathname: '/base/api/click-away-listener' },
+  { pathname: '/base/api/form-control-unstyled' },
+  { pathname: '/base/api/input-unstyled' },
+  { pathname: '/base/api/modal-unstyled' },
+  { pathname: '/base/api/multi-select-unstyled' },
+  { pathname: '/base/api/no-ssr' },
+  { pathname: '/base/api/option-group-unstyled' },
+  { pathname: '/base/api/option-unstyled' },
+  { pathname: '/base/api/popper-unstyled' },
+  { pathname: '/base/api/portal' },
+  { pathname: '/base/api/select-unstyled' },
+  { pathname: '/base/api/slider-unstyled' },
+  { pathname: '/base/api/switch-unstyled' },
+  { pathname: '/base/api/table-pagination-unstyled' },
+  { pathname: '/base/api/tab-panel-unstyled' },
+  { pathname: '/base/api/tabs-list-unstyled' },
+  { pathname: '/base/api/tabs-unstyled' },
+  { pathname: '/base/api/tab-unstyled' },
+  { pathname: '/base/api/textarea-autosize' },
+  { pathname: '/base/api/unstable-trap-focus' },
+];

docs/src/pages/components/about-the-lab/about-the-lab-zh.md → docs/data/material/components/about-the-lab/about-the-lab-zh.md

@@ -39,7 +39,7 @@ yarn add @mui/material
 
 ## TypeScript
 
-为了从 theme 中的 [CSS重载](/customization/theme-components/#global-style-overrides) 和 [默认的属性自定义](/customization/theme-components/#default-props) 中获益，使用 TypeScript 的用户需要引入如下类型的 types。 TypeScript 在内部将实验室里可用的扩展组件和 [模块扩展(module augmentation)](/guides/typescript/#customization-of-theme) 一起使用，这样可以拓展默认的主题（theme）结构。
+为了从 theme 中的 [CSS 重载](/customization/theme-components/#global-style-overrides) 和 [默认的属性自定义](/customization/theme-components/#default-props) 中获益，使用 TypeScript 的用户需要引入如下类型的 types。 TypeScript 在内部将实验室里可用的扩展组件和 [模块扩展(module augmentation)](/guides/typescript/#customization-of-theme) 一起使用，这样可以拓展默认的主题（theme）结构。
 
 ```tsx
 // 当使用 TypeScript 4.x 或更高版本时

docs/src/pages/components/accordion/accordion-pt.md → docs/data/material/components/accordion/accordion-pt.md

@@ -1,4 +1,5 @@
 ---
+product: material
 title: Componente de Acordeão React
 components: Accordion, AccordionActions, AccordionDetails, AccordionSummary
 githubLabel: 'component: Accordion'
@@ -18,19 +19,19 @@ waiAria: 'https://www.w3.org/TR/wai-aria-practices/#accordion'
 
 ## Acordeão básico
 
-{{"demo": "pages/components/accordion/BasicAccordion.js", "bg": true}}
+{{"demo": "BasicAccordion.js", "bg": true}}
 
 ## Acordeão controlado
 
 Estenda o comportamento padrão para criar um acordeão customizado com o componente `Accordion`.
 
-{{"demo": "pages/components/accordion/ControlledAccordions.js", "bg": true}}
+{{"demo": "ControlledAccordions.js", "bg": true}}
 
 ## Painéis de Expansão Customizados
 
 Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/how-to-customize/).
 
-{{"demo": "pages/components/accordion/CustomizedAccordions.js"}}
+{{"demo": "CustomizedAccordions.js"}}
 
 ## Performance
 

docs/src/pages/components/accordion/accordion-zh.md → docs/data/material/components/accordion/accordion-zh.md

@@ -1,4 +1,5 @@
 ---
+product: material
 title: React Accordion （扩展面板）组件
 components: Accordion, AccordionActions, AccordionDetails, AccordionSummary
 githubLabel: 'component: Accordion'
@@ -18,19 +19,19 @@ waiAria: 'https://www.w3.org/TR/wai-aria-practices/#accordion'
 
 ## 简单的扩展面板
 
-{{"demo": "pages/components/accordion/BasicAccordion.js", "bg": true}}
+{{"demo": "BasicAccordion.js", "bg": true}}
 
 ## 可控制的折叠面板
 
 使用`控制面板` 组件，能够扩展已有的控制面板行为，来创建自定义的扩展面板组。
 
-{{"demo": "pages/components/accordion/ControlledAccordions.js", "bg": true}}
+{{"demo": "ControlledAccordions.js", "bg": true}}
 
 ## 自定义的扩展面板
 
 以下是自定义扩展面板的一个示例。 您可以在 [重写文档页面](/customization/how-to-customize/) 中了解更多。
 
-{{"demo": "pages/components/accordion/CustomizedAccordions.js"}}
+{{"demo": "CustomizedAccordions.js"}}
 
 ## 性能
 

docs/src/pages/components/accordion/accordion.md → docs/data/material/components/accordion/accordion.md

@@ -1,4 +1,5 @@
 ---
+product: material
 title: React Accordion component
 components: Accordion, AccordionActions, AccordionDetails, AccordionSummary
 githubLabel: 'component: accordion'
@@ -18,20 +19,20 @@ An accordion is a lightweight container that may either be used standalone, or b
 
 ## Basic accordion
 
-{{"demo": "pages/components/accordion/BasicAccordion.js", "bg": true}}
+{{"demo": "BasicAccordion.js", "bg": true}}
 
 ## Controlled accordion
 
 Extend the default behavior to create an accordion with the `Accordion` component.
 
-{{"demo": "pages/components/accordion/ControlledAccordions.js", "bg": true}}
+{{"demo": "ControlledAccordions.js", "bg": true}}
 
 ## Customization
 
 Here is an example of customizing the component.
 You can learn more about this in the [overrides documentation page](/customization/how-to-customize/).
 
-{{"demo": "pages/components/accordion/CustomizedAccordions.js"}}
+{{"demo": "CustomizedAccordions.js"}}
 
 ## Performance
 

docs/src/pages/components/alert/alert-pt.md → docs/data/material/components/alert/alert-pt.md

@@ -1,4 +1,5 @@
 ---
+product: material
 title: Componente React para Alertas
 components: Alert, AlertTitle
 githubLabel: 'component: Alert'
@@ -17,27 +18,27 @@ waiAria: 'https://www.w3.org/TR/wai-aria-practices/#alert'
 
 O alerta oferece quatro níveis de severidade que se distinguem em diferentes ícones e cores.
 
-{{"demo": "pages/components/alert/BasicAlerts.js"}}
+{{"demo": "BasicAlerts.js"}}
 
 ## Descrição
 
 Você pode usar o componente `AlertTitle` para exibir um título formatado acima do conteúdo.
 
-{{"demo": "pages/components/alert/DescriptionAlerts.js"}}
+{{"demo": "DescriptionAlerts.js"}}
 
 ## Ações
 
 Um alerta pode conter uma ação, como um botão de fechar ou desfazer. A ação é renderizada depois da mensagem, na parte final do alerta.
 
 Se um callback `onClose` é fornecido e a propriedade `action` não é definida, um ícone de fechar será exibido. A propriedade `action` pode ser usada para fornecer uma ação alternativa, por exemplo, usando um Button ou IconButton.
 
-{{"demo": "pages/components/alert/ActionAlerts.js"}}
+{{"demo": "ActionAlerts.js"}}
 
 ### Transição
 
 Você pode utilizar um [componente de transição](/components/transitions/) como um `Collapse` para realizar uma transição na exibição do alerta.
 
-{{"demo": "pages/components/alert/TransitionAlerts.js"}}
+{{"demo": "TransitionAlerts.js"}}
 
 ## Ícones
 
@@ -47,19 +48,19 @@ Você pode alterar a severidade padrão e o mapeamento do ícone com a proprieda
 
 Definir a propriedade `icon` como falso removerá o ícone completamente.
 
-{{"demo": "pages/components/alert/IconAlerts.js"}}
+{{"demo": "IconAlerts.js"}}
 
 ## Variantes
 
 Duas variantes adicionais estão disponíveis – delineado e preenchido:
 
 ### Delineado
 
-{{"demo": "pages/components/alert/OutlinedAlerts.js"}}
+{{"demo": "OutlinedAlerts.js"}}
 
 ### Preenchido
 
-{{"demo": "pages/components/alert/FilledAlerts.js"}}
+{{"demo": "FilledAlerts.js"}}
 
 ## Toast
 
@@ -69,7 +70,7 @@ Você pode usar o componente Snackbar para [exibir um toast](/components/snackba
 
 A propriedade `color` irá sobrescrever a cor padrão para a severidade especificada.
 
-{{"demo": "pages/components/alert/ColorAlerts.js"}}
+{{"demo": "ColorAlerts.js"}}
 
 ## Acessibilidade
 

docs/src/pages/components/alert/alert-zh.md → docs/data/material/components/alert/alert-zh.md

@@ -1,4 +1,5 @@
 ---
+product: material
 title: React Alert （警告提示）组件
 components: Alert, AlertTitle
 githubLabel: 'component: Alert'
@@ -17,27 +18,27 @@ waiAria: 'https://www.w3.org/TR/wai-aria-practices/#alert'
 
 警告提示有四种不同程度的级别，每种都有自己独特的颜色和图标。
 
-{{"demo": "pages/components/alert/BasicAlerts.js"}}
+{{"demo": "BasicAlerts.js"}}
 
 ## 描述
 
 您可以使用 `AlertTitle` 组件在内容之上展示一个格式化的标题。
 
-{{"demo": "pages/components/alert/DescriptionAlerts.js"}}
+{{"demo": "DescriptionAlerts.js"}}
 
 ## 行为
 
 一个警告提示可以附带一个行为，例如一个关闭或撤销按钮。 它在消息之后，提醒结束前被渲染。
 
-如果提供了 `onClose` 回调且没有设置 `action` 属性的话，则会呈现一个关闭图标。 这个 `action` 属性可以用来提供一个可替代的行为，例如使用一个 Button 或者IconButton。
+如果提供了 `onClose` 回调且没有设置 `action` 属性的话，则会呈现一个关闭图标。 这个 `action` 属性可以用来提供一个可替代的行为，例如使用一个 Button 或者 IconButton。
 
-{{"demo": "pages/components/alert/ActionAlerts.js"}}
+{{"demo": "ActionAlerts.js"}}
 
 ### 过渡效果
 
 您也可以使用 [过渡组件](/components/transitions/) ，如使用 `Collapse（展开）` 来实现提醒出现时的过渡效果。
 
-{{"demo": "pages/components/alert/TransitionAlerts.js"}}
+{{"demo": "TransitionAlerts.js"}}
 
 ## Icons 图标
 
@@ -47,19 +48,19 @@ waiAria: 'https://www.w3.org/TR/wai-aria-practices/#alert'
 
 把图标属性设置为 `false` 将会移除所有图标。
 
-{{"demo": "pages/components/alert/IconAlerts.js"}}
+{{"demo": "IconAlerts.js"}}
 
 ## 变体
 
 还有描边（outlined）和填充（filled）这两种组件的变体可以使用。
 
 ### 描边
 
-{{"demo": "pages/components/alert/OutlinedAlerts.js"}}
+{{"demo": "OutlinedAlerts.js"}}
 
 ### 填充
 
-{{"demo": "pages/components/alert/FilledAlerts.js"}}
+{{"demo": "FilledAlerts.js"}}
 
 ## Toast（提示）
 
@@ -69,7 +70,7 @@ waiAria: 'https://www.w3.org/TR/wai-aria-practices/#alert'
 
 使用 `color` 属性可以覆盖不同程度提醒的默认颜色。
 
-{{"demo": "pages/components/alert/ColorAlerts.js"}}
+{{"demo": "ColorAlerts.js"}}
 
 ## 无障碍设计
 

docs/src/pages/components/alert/alert.md → docs/data/material/components/alert/alert.md

@@ -1,4 +1,5 @@
 ---
+product: material
 title: React Alert component
 components: Alert, AlertTitle
 githubLabel: 'component: alert'
@@ -17,13 +18,13 @@ waiAria: https://www.w3.org/TR/wai-aria-practices/#alert
 
 The alert offers four severity levels that set a distinctive icon and color.
 
-{{"demo": "pages/components/alert/BasicAlerts.js"}}
+{{"demo": "BasicAlerts.js"}}
 
 ## Description
 
 You can use the `AlertTitle` component to display a formatted title above the content.
 
-{{"demo": "pages/components/alert/DescriptionAlerts.js"}}
+{{"demo": "DescriptionAlerts.js"}}
 
 ## Actions
 
@@ -32,13 +33,13 @@ It is rendered after the message, at the end of the alert.
 
 If an `onClose` callback is provided and no `action` prop is set, a close icon is displayed. The `action` prop can be used to provide an alternative action, for example using a Button or IconButton.
 
-{{"demo": "pages/components/alert/ActionAlerts.js"}}
+{{"demo": "ActionAlerts.js"}}
 
 ### Transition
 
 You can use a [transition component](/components/transitions/) such as `Collapse` to transition the appearance of the alert.
 
-{{"demo": "pages/components/alert/TransitionAlerts.js"}}
+{{"demo": "TransitionAlerts.js"}}
 
 ## Icons
 
@@ -49,19 +50,19 @@ You can change the default severity to icon mapping with the `iconMapping` prop.
 
 Setting the icon prop to `false` will remove the icon altogether.
 
-{{"demo": "pages/components/alert/IconAlerts.js"}}
+{{"demo": "IconAlerts.js"}}
 
 ## Variants
 
 Two additional variants are available – outlined, and filled:
 
 ### Outlined
 
-{{"demo": "pages/components/alert/OutlinedAlerts.js"}}
+{{"demo": "OutlinedAlerts.js"}}
 
 ### Filled
 
-{{"demo": "pages/components/alert/FilledAlerts.js"}}
+{{"demo": "FilledAlerts.js"}}
 
 ## Toast
 
@@ -71,7 +72,7 @@ You can use the Snackbar to [display a toast](/components/snackbars/#customized-
 
 The `color` prop will override the default color for the specified severity.
 
-{{"demo": "pages/components/alert/ColorAlerts.js"}}
+{{"demo": "ColorAlerts.js"}}
 
 ## Accessibility