From 40be8b4beca51272dbae6d8f98c517cff70b3789 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Sat, 12 Mar 2022 09:34:10 +0700 Subject: [PATCH] [docs] Migrate button demos to base (#31395) --- .eslintrc.js | 2 + .../button}/UnstyledButtonCustom.js | 0 .../button}/UnstyledButtonCustom.tsx | 0 .../button}/UnstyledButtonCustom.tsx.preview | 0 .../button}/UnstyledButtonsSimple.js | 0 .../button}/UnstyledButtonsSimple.tsx | 0 .../button}/UnstyledButtonsSimple.tsx.preview | 0 .../components/button}/UnstyledButtonsSpan.js | 0 .../button}/UnstyledButtonsSpan.tsx | 0 .../button}/UnstyledButtonsSpan.tsx.preview | 0 .../components/button}/UseButton.js | 0 .../components/button}/UseButton.tsx | 0 .../components/button}/UseButton.tsx.preview | 0 docs/data/base/components/button/button.md | 40 ++++++++++++++-- docs/data/base/components/menu/MenuSimple.js | 1 - docs/data/base/components/menu/MenuSimple.tsx | 1 - .../base/components/menu/WrappedMenuItems.js | 1 - .../base/components/menu/WrappedMenuItems.tsx | 1 - docs/data/base/components/menu/menu.md | 2 +- .../material/components/buttons/buttons.md | 46 +------------------ docs/data/material/components/menus/menus.md | 10 +--- .../templates/sign-in-side/SignInSide.js | 1 - .../templates/sign-in-side/SignInSide.tsx | 1 - .../templates/sign-in/SignIn.js | 1 - .../templates/sign-in/SignIn.tsx | 1 - .../templates/sign-up/SignUp.js | 1 - .../templates/sign-up/SignUp.tsx | 1 - docs/packages/markdown/parseMarkdown.js | 8 ++++ docs/pages/api-docs/button-unstyled.js | 23 ---------- docs/pages/api-docs/button-unstyled.json | 28 ----------- docs/pages/api-docs/menu-item-unstyled.js | 23 ---------- docs/pages/api-docs/menu-item-unstyled.json | 11 ----- docs/pages/api-docs/menu-unstyled.js | 23 ---------- docs/pages/api-docs/menu-unstyled.json | 21 --------- docs/pages/base/api/button-unstyled.json | 2 +- docs/pages/base/api/menu-item-unstyled.json | 2 +- docs/pages/base/api/menu-unstyled.json | 2 +- .../ApiBuilders/ComponentApiBuilder.ts | 13 ++++-- docs/scripts/buildApi.ts | 30 +----------- docs/scripts/buildApiUtils.test.ts | 4 +- docs/scripts/buildApiUtils.ts | 29 ++++++++++-- docs/src/modules/components/AppNavDrawer.js | 10 ---- docs/src/modules/utils/find.js | 2 +- docs/src/pagesApi.js | 3 -- .../src/ButtonUnstyled/ButtonUnstyled.tsx | 4 +- .../src/MenuItemUnstyled/MenuItemUnstyled.tsx | 4 +- .../src/MenuUnstyled/MenuUnstyled.tsx | 4 +- 47 files changed, 99 insertions(+), 257 deletions(-) rename docs/data/{material/components/buttons => base/components/button}/UnstyledButtonCustom.js (100%) rename docs/data/{material/components/buttons => base/components/button}/UnstyledButtonCustom.tsx (100%) rename docs/data/{material/components/buttons => base/components/button}/UnstyledButtonCustom.tsx.preview (100%) rename docs/data/{material/components/buttons => base/components/button}/UnstyledButtonsSimple.js (100%) rename docs/data/{material/components/buttons => base/components/button}/UnstyledButtonsSimple.tsx (100%) rename docs/data/{material/components/buttons => base/components/button}/UnstyledButtonsSimple.tsx.preview (100%) rename docs/data/{material/components/buttons => base/components/button}/UnstyledButtonsSpan.js (100%) rename docs/data/{material/components/buttons => base/components/button}/UnstyledButtonsSpan.tsx (100%) rename docs/data/{material/components/buttons => base/components/button}/UnstyledButtonsSpan.tsx.preview (100%) rename docs/data/{material/components/buttons => base/components/button}/UseButton.js (100%) rename docs/data/{material/components/buttons => base/components/button}/UseButton.tsx (100%) rename docs/data/{material/components/buttons => base/components/button}/UseButton.tsx.preview (100%) delete mode 100644 docs/pages/api-docs/button-unstyled.js delete mode 100644 docs/pages/api-docs/button-unstyled.json delete mode 100644 docs/pages/api-docs/menu-item-unstyled.js delete mode 100644 docs/pages/api-docs/menu-item-unstyled.json delete mode 100644 docs/pages/api-docs/menu-unstyled.js delete mode 100644 docs/pages/api-docs/menu-unstyled.json diff --git a/.eslintrc.js b/.eslintrc.js index fee270cca4bfe3..8df154dca97c8f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -250,6 +250,8 @@ module.exports = { // This is safe to do and helps readability of the demo code since the data is mostly irrelevant. '@typescript-eslint/no-use-before-define': 'off', 'react/prop-types': 'off', + 'no-alert': 'off', + 'no-console': 'off', }, }, { diff --git a/docs/data/material/components/buttons/UnstyledButtonCustom.js b/docs/data/base/components/button/UnstyledButtonCustom.js similarity index 100% rename from docs/data/material/components/buttons/UnstyledButtonCustom.js rename to docs/data/base/components/button/UnstyledButtonCustom.js diff --git a/docs/data/material/components/buttons/UnstyledButtonCustom.tsx b/docs/data/base/components/button/UnstyledButtonCustom.tsx similarity index 100% rename from docs/data/material/components/buttons/UnstyledButtonCustom.tsx rename to docs/data/base/components/button/UnstyledButtonCustom.tsx diff --git a/docs/data/material/components/buttons/UnstyledButtonCustom.tsx.preview b/docs/data/base/components/button/UnstyledButtonCustom.tsx.preview similarity index 100% rename from docs/data/material/components/buttons/UnstyledButtonCustom.tsx.preview rename to docs/data/base/components/button/UnstyledButtonCustom.tsx.preview diff --git a/docs/data/material/components/buttons/UnstyledButtonsSimple.js b/docs/data/base/components/button/UnstyledButtonsSimple.js similarity index 100% rename from docs/data/material/components/buttons/UnstyledButtonsSimple.js rename to docs/data/base/components/button/UnstyledButtonsSimple.js diff --git a/docs/data/material/components/buttons/UnstyledButtonsSimple.tsx b/docs/data/base/components/button/UnstyledButtonsSimple.tsx similarity index 100% rename from docs/data/material/components/buttons/UnstyledButtonsSimple.tsx rename to docs/data/base/components/button/UnstyledButtonsSimple.tsx diff --git a/docs/data/material/components/buttons/UnstyledButtonsSimple.tsx.preview b/docs/data/base/components/button/UnstyledButtonsSimple.tsx.preview similarity index 100% rename from docs/data/material/components/buttons/UnstyledButtonsSimple.tsx.preview rename to docs/data/base/components/button/UnstyledButtonsSimple.tsx.preview diff --git a/docs/data/material/components/buttons/UnstyledButtonsSpan.js b/docs/data/base/components/button/UnstyledButtonsSpan.js similarity index 100% rename from docs/data/material/components/buttons/UnstyledButtonsSpan.js rename to docs/data/base/components/button/UnstyledButtonsSpan.js diff --git a/docs/data/material/components/buttons/UnstyledButtonsSpan.tsx b/docs/data/base/components/button/UnstyledButtonsSpan.tsx similarity index 100% rename from docs/data/material/components/buttons/UnstyledButtonsSpan.tsx rename to docs/data/base/components/button/UnstyledButtonsSpan.tsx diff --git a/docs/data/material/components/buttons/UnstyledButtonsSpan.tsx.preview b/docs/data/base/components/button/UnstyledButtonsSpan.tsx.preview similarity index 100% rename from docs/data/material/components/buttons/UnstyledButtonsSpan.tsx.preview rename to docs/data/base/components/button/UnstyledButtonsSpan.tsx.preview diff --git a/docs/data/material/components/buttons/UseButton.js b/docs/data/base/components/button/UseButton.js similarity index 100% rename from docs/data/material/components/buttons/UseButton.js rename to docs/data/base/components/button/UseButton.js diff --git a/docs/data/material/components/buttons/UseButton.tsx b/docs/data/base/components/button/UseButton.tsx similarity index 100% rename from docs/data/material/components/buttons/UseButton.tsx rename to docs/data/base/components/button/UseButton.tsx diff --git a/docs/data/material/components/buttons/UseButton.tsx.preview b/docs/data/base/components/button/UseButton.tsx.preview similarity index 100% rename from docs/data/material/components/buttons/UseButton.tsx.preview rename to docs/data/base/components/button/UseButton.tsx.preview diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md index e3c2b903f487b0..d38a040a652838 100644 --- a/docs/data/base/components/button/button.md +++ b/docs/data/base/components/button/button.md @@ -1,17 +1,49 @@ --- product: base -title: React button unstyled +title: Unstyled React button +components: ButtonUnstyled githubLabel: 'component: button' +waiAria: https://www.w3.org/TR/wai-aria-practices/#button --- -# Button unstyled +# Unstyled button -

Buttons allow users to take actions, and make choices, with a single tap.

+

Buttons allow users to take actions and make choices with a single tap.

## Basic usage +```js +import ButtonUnstyled from '@mui/base/ButtonUnstyled'; +``` + +{{"demo": "UnstyledButtonsSimple.js"}} + ## Customizing the root element +By default, the `ButtonUnstyled` component renders a native `button` HTML element. +You can override this by setting the `component` or `components.Root` prop. +If you provide a non-interactive element, such as a `span`, the `ButtonUnstyled` component will automatically add the necessary accessibility attributes. + +{{"demo": "UnstyledButtonsSpan.js"}} + +Compare the attributes on the `span` with the `button` from the previous demo. + ## Complex customization -## `useButton` hook +In addition to HTML elements, you can also use SVGs with the `ButtonUnstyled` component. + +{{"demo": "UnstyledButtonCustom.js"}} + +## useButton hook + +```js +import { useButton } from '@mui/base/ButtonUnstyled'; +``` + +The `useButton` hook lets you use the functionality of `ButtonUnstyled` in other components. +It returns props to be placed on a custom button element, along with fields representing the internal state of the button. + +The `useButton` hook requires the `ref` of the element it's used on. +Additionally, you need to provide the `component` prop (unless you intend to use the plain `button`). + +{{"demo": "UseButton.js"}} diff --git a/docs/data/base/components/menu/MenuSimple.js b/docs/data/base/components/menu/MenuSimple.js index e9ab28ff73f63a..f4a037e31955b0 100644 --- a/docs/data/base/components/menu/MenuSimple.js +++ b/docs/data/base/components/menu/MenuSimple.js @@ -140,7 +140,6 @@ export default function UnstyledMenuSimple() { const createHandleMenuClick = (menuItem) => { return () => { - // eslint-disable-next-line no-console console.log(`Clicked on ${menuItem}`); close(); }; diff --git a/docs/data/base/components/menu/MenuSimple.tsx b/docs/data/base/components/menu/MenuSimple.tsx index 2cef1b44d30f84..e8408c5dc8f42f 100644 --- a/docs/data/base/components/menu/MenuSimple.tsx +++ b/docs/data/base/components/menu/MenuSimple.tsx @@ -140,7 +140,6 @@ export default function UnstyledMenuSimple() { const createHandleMenuClick = (menuItem: string) => { return () => { - // eslint-disable-next-line no-console console.log(`Clicked on ${menuItem}`); close(); }; diff --git a/docs/data/base/components/menu/WrappedMenuItems.js b/docs/data/base/components/menu/WrappedMenuItems.js index 7da6bee5e88c11..13646e8428b0ee 100644 --- a/docs/data/base/components/menu/WrappedMenuItems.js +++ b/docs/data/base/components/menu/WrappedMenuItems.js @@ -177,7 +177,6 @@ export default function WrappedMenuItems() { const createHandleMenuClick = (menuItem) => { return () => { - // eslint-disable-next-line no-console console.log(`Clicked on ${menuItem}`); close(); }; diff --git a/docs/data/base/components/menu/WrappedMenuItems.tsx b/docs/data/base/components/menu/WrappedMenuItems.tsx index cbb33a8e616c79..025e8caea40c80 100644 --- a/docs/data/base/components/menu/WrappedMenuItems.tsx +++ b/docs/data/base/components/menu/WrappedMenuItems.tsx @@ -176,7 +176,6 @@ export default function WrappedMenuItems() { const createHandleMenuClick = (menuItem: string) => { return () => { - // eslint-disable-next-line no-console console.log(`Clicked on ${menuItem}`); close(); }; diff --git a/docs/data/base/components/menu/menu.md b/docs/data/base/components/menu/menu.md index ccaa9ef3b36a71..86d0bd536b7bed 100644 --- a/docs/data/base/components/menu/menu.md +++ b/docs/data/base/components/menu/menu.md @@ -1,7 +1,7 @@ --- product: base title: React Menu unstyled component and hook -components: '' +components: MenuUnstyled, MenuItemUnstyled githubLabel: 'component: menu' waiAria: https://www.w3.org/TR/wai-aria-practices/#menu --- diff --git a/docs/data/material/components/buttons/buttons.md b/docs/data/material/components/buttons/buttons.md index 7acb6352b88c1e..57a658610f9895 100644 --- a/docs/data/material/components/buttons/buttons.md +++ b/docs/data/material/components/buttons/buttons.md @@ -1,10 +1,11 @@ --- product: material-ui title: React Button component -components: Button, IconButton, ButtonBase, LoadingButton, ButtonUnstyled +components: Button, IconButton, ButtonBase, LoadingButton materialDesign: https://material.io/components/buttons githubLabel: 'component: button' waiAria: https://www.w3.org/TR/wai-aria-practices/#button +unstyled: /base/react-button/ --- # Button @@ -180,46 +181,3 @@ However: ``` This has the advantage of supporting any element, for instance, a link `` element. - -## Unstyled - -The button also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size. - -### Unstyled component - -```js -import ButtonUnstyled from '@mui/base/ButtonUnstyled'; -``` - -{{"demo": "UnstyledButtonsSimple.js"}} - -#### Customizing the root element - -By default, the `ButtonUnstyled` renders a native `button` element. -You are free to override this by setting the `component` or `components.Root` prop. -If a non-interactive element (such as a span) is provided this way, the `ButtonUnstyled` will take care of adding accessibility attributes. - -{{"demo": "UnstyledButtonsSpan.js"}} - -Compare the attributes on the span with the button from the previous demo. - -#### Complex customization - -You are not limited to using HTML elements for the button structure. -SVG elements, even with complex structure, are equally acceptable. - -{{"demo": "UnstyledButtonCustom.js"}} - -### useButton hook - -```js -import { useButton } from '@mui/base/ButtonUnstyled'; -``` - -If you need to use Button's functionality in another component, you can use the `useButton` hook. -It returns props to be placed on a custom button element and fields representing the internal state of the button. - -The `useButton` hook requires the ref of the element it'll be used on. -Additionally, you need to provide the `component` prop (unless you intend to use the plain `button`). - -{{"demo": "UseButton.js"}} diff --git a/docs/data/material/components/menus/menus.md b/docs/data/material/components/menus/menus.md index 2db5e1994d0afb..18840c1b8dc7dd 100644 --- a/docs/data/material/components/menus/menus.md +++ b/docs/data/material/components/menus/menus.md @@ -1,10 +1,11 @@ --- product: material-ui title: React Menu component -components: Menu, MenuItem, MenuList, ClickAwayListener, Popover, Popper, MenuUnstyled, MenuItemUnstyled +components: Menu, MenuItem, MenuList, ClickAwayListener, Popover, Popper githubLabel: 'component: menu' materialDesign: https://material.io/components/menus waiAria: https://www.w3.org/TR/wai-aria-practices/#menubutton +unstyled: /base/react-menu/ --- # Menu @@ -105,13 +106,6 @@ Here is an example of a context menu. (Right click to open.) {{"demo": "ContextMenu.js"}} -## Unstyled - -The Menu also comes with an unstyled version. -It's ideal for doing heavy customizations and minimizing bundle size. - -See its docs on the [MUI Base section](/base/react-menu). - ## Complementary projects For more advanced use cases you might be able to take advantage of: diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js index fc930b300630ab..0ab6b5d3515310 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js +++ b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js @@ -32,7 +32,6 @@ export default function SignInSide() { const handleSubmit = (event) => { event.preventDefault(); const data = new FormData(event.currentTarget); - // eslint-disable-next-line no-console console.log({ email: data.get('email'), password: data.get('password'), diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx index 2922ff3ba2c37b..9b3cdc5ab2abb5 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx +++ b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx @@ -32,7 +32,6 @@ export default function SignInSide() { const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); const data = new FormData(event.currentTarget); - // eslint-disable-next-line no-console console.log({ email: data.get('email'), password: data.get('password'), diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.js b/docs/data/material/getting-started/templates/sign-in/SignIn.js index 6f81bdfc032c8c..f8b8e7d8afebc0 100644 --- a/docs/data/material/getting-started/templates/sign-in/SignIn.js +++ b/docs/data/material/getting-started/templates/sign-in/SignIn.js @@ -32,7 +32,6 @@ export default function SignIn() { const handleSubmit = (event) => { event.preventDefault(); const data = new FormData(event.currentTarget); - // eslint-disable-next-line no-console console.log({ email: data.get('email'), password: data.get('password'), diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx index 48a6b285d0927d..f11640fafa67d6 100644 --- a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx +++ b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx @@ -32,7 +32,6 @@ export default function SignIn() { const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); const data = new FormData(event.currentTarget); - // eslint-disable-next-line no-console console.log({ email: data.get('email'), password: data.get('password'), diff --git a/docs/data/material/getting-started/templates/sign-up/SignUp.js b/docs/data/material/getting-started/templates/sign-up/SignUp.js index 86d72d4a0b90f4..ee2cc6d1a11a9f 100644 --- a/docs/data/material/getting-started/templates/sign-up/SignUp.js +++ b/docs/data/material/getting-started/templates/sign-up/SignUp.js @@ -32,7 +32,6 @@ export default function SignUp() { const handleSubmit = (event) => { event.preventDefault(); const data = new FormData(event.currentTarget); - // eslint-disable-next-line no-console console.log({ email: data.get('email'), password: data.get('password'), diff --git a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx index a3e4139976cc5e..aa7a2b4b109484 100644 --- a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx +++ b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx @@ -32,7 +32,6 @@ export default function SignUp() { const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); const data = new FormData(event.currentTarget); - // eslint-disable-next-line no-console console.log({ email: data.get('email'), password: data.get('password'), diff --git a/docs/packages/markdown/parseMarkdown.js b/docs/packages/markdown/parseMarkdown.js index 009c6457e8733f..fb4833abf4fe86 100644 --- a/docs/packages/markdown/parseMarkdown.js +++ b/docs/packages/markdown/parseMarkdown.js @@ -291,6 +291,14 @@ function prepareMarkdown(config) { const description = headers.description || getDescription(markdown); const contents = getContents(markdown); + if (headers.unstyled) { + contents.push(` +## Unstyled + +The component also comes with an [unstyled version](${headers.unstyled}). It's ideal for doing heavy customizations and minimizing bundle size. + `); + } + if (headers.components.length > 0) { contents.push(` ## API diff --git a/docs/pages/api-docs/button-unstyled.js b/docs/pages/api-docs/button-unstyled.js deleted file mode 100644 index 605eb23e3441eb..00000000000000 --- a/docs/pages/api-docs/button-unstyled.js +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; -import ApiPage from 'docs/src/modules/components/ApiPage'; -import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; -import jsonPageContent from './button-unstyled.json'; - -export default function Page(props) { - const { descriptions, pageContent } = props; - return ; -} - -Page.getInitialProps = () => { - const req = require.context( - 'docs/translations/api-docs/button-unstyled', - false, - /button-unstyled.*.json$/, - ); - const descriptions = mapApiPageTranslations(req); - - return { - descriptions, - pageContent: jsonPageContent, - }; -}; diff --git a/docs/pages/api-docs/button-unstyled.json b/docs/pages/api-docs/button-unstyled.json deleted file mode 100644 index e48201cbe24e95..00000000000000 --- a/docs/pages/api-docs/button-unstyled.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "props": { - "action": { - "type": { - "name": "union", - "description": "func
| { current?: { focusVisible: func } }" - } - }, - "component": { "type": { "name": "elementType" }, "default": "'button'" }, - "components": { - "type": { "name": "shape", "description": "{ Root?: elementType }" }, - "default": "{}" - }, - "componentsProps": { - "type": { "name": "shape", "description": "{ root?: object }" }, - "default": "{}" - }, - "disabled": { "type": { "name": "bool" } } - }, - "name": "ButtonUnstyled", - "styles": { "classes": [], "globalClasses": {}, "name": null }, - "spread": true, - "forwardsRefTo": "HTMLButtonElement", - "filename": "/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx", - "inheritance": null, - "demos": "", - "cssComponent": false -} diff --git a/docs/pages/api-docs/menu-item-unstyled.js b/docs/pages/api-docs/menu-item-unstyled.js deleted file mode 100644 index 810251bfa4a63b..00000000000000 --- a/docs/pages/api-docs/menu-item-unstyled.js +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; -import ApiPage from 'docs/src/modules/components/ApiPage'; -import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; -import jsonPageContent from './menu-item-unstyled.json'; - -export default function Page(props) { - const { descriptions, pageContent } = props; - return ; -} - -Page.getInitialProps = () => { - const req = require.context( - 'docs/translations/api-docs/menu-item-unstyled', - false, - /menu-item-unstyled.*.json$/, - ); - const descriptions = mapApiPageTranslations(req); - - return { - descriptions, - pageContent: jsonPageContent, - }; -}; diff --git a/docs/pages/api-docs/menu-item-unstyled.json b/docs/pages/api-docs/menu-item-unstyled.json deleted file mode 100644 index 63c97eceea6e5c..00000000000000 --- a/docs/pages/api-docs/menu-item-unstyled.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "props": { "disabled": { "type": { "name": "bool" } } }, - "name": "MenuItemUnstyled", - "styles": { "classes": [], "globalClasses": {}, "name": null }, - "spread": true, - "forwardsRefTo": "HTMLLIElement", - "filename": "/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.tsx", - "inheritance": null, - "demos": "", - "cssComponent": false -} diff --git a/docs/pages/api-docs/menu-unstyled.js b/docs/pages/api-docs/menu-unstyled.js deleted file mode 100644 index 8b6d8ac2901057..00000000000000 --- a/docs/pages/api-docs/menu-unstyled.js +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; -import ApiPage from 'docs/src/modules/components/ApiPage'; -import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; -import jsonPageContent from './menu-unstyled.json'; - -export default function Page(props) { - const { descriptions, pageContent } = props; - return ; -} - -Page.getInitialProps = () => { - const req = require.context( - 'docs/translations/api-docs/menu-unstyled', - false, - /menu-unstyled.*.json$/, - ); - const descriptions = mapApiPageTranslations(req); - - return { - descriptions, - pageContent: jsonPageContent, - }; -}; diff --git a/docs/pages/api-docs/menu-unstyled.json b/docs/pages/api-docs/menu-unstyled.json deleted file mode 100644 index b69a7e00d86b93..00000000000000 --- a/docs/pages/api-docs/menu-unstyled.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "props": { - "actions": { "type": { "name": "custom", "description": "ref" } }, - "anchorEl": { - "type": { - "name": "union", - "description": "HTML element
| object
| func" - } - }, - "onClose": { "type": { "name": "func" } }, - "open": { "type": { "name": "bool" } } - }, - "name": "MenuUnstyled", - "styles": { "classes": [], "globalClasses": {}, "name": null }, - "spread": false, - "forwardsRefTo": "HTMLDivElement", - "filename": "/packages/mui-base/src/MenuUnstyled/MenuUnstyled.tsx", - "inheritance": null, - "demos": "", - "cssComponent": false -} diff --git a/docs/pages/base/api/button-unstyled.json b/docs/pages/base/api/button-unstyled.json index e99ddf3b44705a..c1e5df36bc2726 100644 --- a/docs/pages/base/api/button-unstyled.json +++ b/docs/pages/base/api/button-unstyled.json @@ -23,6 +23,6 @@ "forwardsRefTo": "HTMLButtonElement", "filename": "/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/base/api/menu-item-unstyled.json b/docs/pages/base/api/menu-item-unstyled.json index bb95a2e41fd253..cebdff7744c2c2 100644 --- a/docs/pages/base/api/menu-item-unstyled.json +++ b/docs/pages/base/api/menu-item-unstyled.json @@ -6,6 +6,6 @@ "forwardsRefTo": "HTMLLIElement", "filename": "/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/base/api/menu-unstyled.json b/docs/pages/base/api/menu-unstyled.json index c66d5c1fe00754..925af55ff03ef6 100644 --- a/docs/pages/base/api/menu-unstyled.json +++ b/docs/pages/base/api/menu-unstyled.json @@ -16,6 +16,6 @@ "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-base/src/MenuUnstyled/MenuUnstyled.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/scripts/ApiBuilders/ComponentApiBuilder.ts b/docs/scripts/ApiBuilders/ComponentApiBuilder.ts index 03aeebd673a7e8..42b9932721a9e7 100644 --- a/docs/scripts/ApiBuilders/ComponentApiBuilder.ts +++ b/docs/scripts/ApiBuilders/ComponentApiBuilder.ts @@ -514,6 +514,7 @@ const generateComponentApi = async (componentInfo: ComponentInfo, program: ttp.t getInheritance, getDemos, readFile, + skipApiGeneration, } = componentInfo; const { shouldSkip, spread, EOL, src } = readFile(); @@ -606,12 +607,14 @@ const generateComponentApi = async (componentInfo: ComponentInfo, program: ttp.t // eslint-disable-next-line no-console console.log('Built API docs for', reactApi.name); - // Generate pages, json and translations - generateApiTranslations(path.join(process.cwd(), 'docs/translations/api-docs'), reactApi); - generateApiPage(apiPagesDirectory, reactApi); + if (!skipApiGeneration) { + // Generate pages, json and translations + generateApiTranslations(path.join(process.cwd(), 'docs/translations/api-docs'), reactApi); + generateApiPage(apiPagesDirectory, reactApi); - // Add comment about demo & api links (including inherited component) to the component file - await annotateComponentDefinition(reactApi); + // Add comment about demo & api links (including inherited component) to the component file + await annotateComponentDefinition(reactApi); + } return reactApi; }; diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index 8459f3f29dd3e5..68e19209643186 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -5,7 +5,6 @@ import kebabCase from 'lodash/kebabCase'; import * as yargs from 'yargs'; import * as ttp from 'typescript-to-proptypes'; import { findPages, findComponents } from 'docs/src/modules/utils/find'; -import FEATURE_TOGGLE from 'docs/src/featureToggle'; import { ComponentInfo, getGenericComponentInfo, @@ -116,27 +115,7 @@ interface Settings { getComponentInfo: (filename: string) => ComponentInfo; } -const BEFORE_MIGRATION_SETTINGS: Settings[] = [ - { - input: { - libDirectory: [ - path.join(process.cwd(), 'packages/mui-base/src'), - path.join(process.cwd(), 'packages/mui-material/src'), - path.join(process.cwd(), 'packages/mui-lab/src'), - ], - }, - output: { - apiManifestPath: path.join(process.cwd(), 'docs/src/pagesApi.js'), - }, - getApiPages: () => { - const pages = findPages({ front: true }, path.join(process.cwd(), 'docs/pages')); - return pages.find(({ pathname }) => pathname.indexOf('api') !== -1)?.children ?? []; - }, - getComponentInfo: getGenericComponentInfo, - }, -]; - -const MIGRATION_SETTINGS: Settings[] = [ +const SETTINGS: Settings[] = [ { input: { libDirectory: [ @@ -182,17 +161,12 @@ const MIGRATION_SETTINGS: Settings[] = [ }, ]; -// TODO: Switch to MIGRATION_SETTINGS once ready to migrate content -const ACTIVE_SETTINGS = FEATURE_TOGGLE.enable_product_scope - ? MIGRATION_SETTINGS - : BEFORE_MIGRATION_SETTINGS; - type CommandOptions = { grep?: string }; async function run(argv: CommandOptions) { const grep = argv.grep == null ? null : new RegExp(argv.grep); let allBuilds: Array> = []; - await ACTIVE_SETTINGS.reduce(async (resolvedPromise, setting) => { + await SETTINGS.reduce(async (resolvedPromise, setting) => { await resolvedPromise; const workspaceRoot = path.resolve(__dirname, '../../'); /** diff --git a/docs/scripts/buildApiUtils.test.ts b/docs/scripts/buildApiUtils.test.ts index 2e9995bd8375c1..669053dfb83ddc 100644 --- a/docs/scripts/buildApiUtils.test.ts +++ b/docs/scripts/buildApiUtils.test.ts @@ -219,8 +219,8 @@ describe('buildApiUtils', () => { if (existed) { expect(info.getDemos()).to.deep.equal([ { - name: 'Buttons', - demoPathname: '/material-ui/react-button/', + name: 'Button', + demoPathname: '/base/react-button/', }, ]); } diff --git a/docs/scripts/buildApiUtils.ts b/docs/scripts/buildApiUtils.ts index 78e7ccace8e933..8bc2be1710257b 100644 --- a/docs/scripts/buildApiUtils.ts +++ b/docs/scripts/buildApiUtils.ts @@ -1,6 +1,7 @@ import fs from 'fs'; import path from 'path'; import kebabCase from 'lodash/kebabCase'; +import snakeCase from 'lodash/snakeCase'; import { getHeaders } from '@mui/markdown'; import { findPagesMarkdown, findPagesMarkdownNew } from 'docs/src/modules/utils/find'; import { getLineFeed } from 'docs/scripts/helpers'; @@ -98,8 +99,11 @@ export type ComponentInfo = { }; getDemos: () => Array<{ name: string; demoPathname: string }>; apiPagesDirectory: string; + skipApiGeneration?: boolean; }; +const migratedBaseComponents = ['ButtonUnstyled', 'MenuUnstyled', 'MenuItemUnstyled']; + export const getGenericComponentInfo = (filename: string): ComponentInfo => { const { name } = extractPackageFile(filename); let srcInfo: null | ReturnType = null; @@ -112,6 +116,7 @@ export const getGenericComponentInfo = (filename: string): ComponentInfo => { muiName: getMuiName(name), apiPathname: `/api/${kebabCase(name)}/`, apiPagesDirectory: path.join(process.cwd(), 'docs/pages/api-docs'), + skipApiGeneration: migratedBaseComponents.includes(name), readFile() { srcInfo = parseFile(filename); return srcInfo; @@ -139,7 +144,7 @@ export const getGenericComponentInfo = (filename: string): ComponentInfo => { }; }; -function findNewComponentDemos( +function findMaterialUIDemos( componentName: string, pagesMarkdown: ReadonlyArray<{ pathname: string; components: readonly string[] }>, ) { @@ -189,7 +194,7 @@ export const getMaterialComponentInfo = (filename: string): ComponentInfo => { components: (getHeaders(fs.readFileSync(markdown.filename, 'utf8')) as any) .components as string[], })); - return findNewComponentDemos(name, allMarkdowns).map((info) => ({ + return findMaterialUIDemos(name, allMarkdowns).map((info) => ({ ...info, demoPathname: info.demoPathname, })); @@ -197,6 +202,24 @@ export const getMaterialComponentInfo = (filename: string): ComponentInfo => { }; }; +function findBaseDemos( + componentName: string, + pagesMarkdown: ReadonlyArray<{ pathname: string; components: readonly string[] }>, +) { + const filteredMarkdowns = pagesMarkdown + .filter((page) => page.components.includes(componentName)) + .map((page) => page.pathname); + return Array.from(new Set(filteredMarkdowns)) // get unique filenames + .map((pathname) => ({ + name: pageToTitle({ pathname }) || '', + demoPathname: migratedBaseComponents.some((c) => + pathname.endsWith(snakeCase(c.replace('Unstyled', ''))), + ) + ? `${pathname.replace('/components/', '/react-')}/` + : replaceComponentLinks(`${pathname.replace(/^\/material/, '')}/`), + })); +} + export const getBaseComponentInfo = (filename: string): ComponentInfo => { const { name } = extractPackageFile(filename); let srcInfo: null | ReturnType = null; @@ -231,7 +254,7 @@ export const getBaseComponentInfo = (filename: string): ComponentInfo => { components: (getHeaders(fs.readFileSync(markdown.filename, 'utf8')) as any) .components as string[], })); - return findNewComponentDemos(name, allMarkdowns); + return findBaseDemos(name, allMarkdowns); }, }; }; diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js index 883f3f579cc3d9..f6f7941916c78b 100644 --- a/docs/src/modules/components/AppNavDrawer.js +++ b/docs/src/modules/components/AppNavDrawer.js @@ -29,7 +29,6 @@ import ROUTES from 'docs/src/route'; import materialPkgJson from '../../../../packages/mui-material/package.json'; import basePkgJson from '../../../../packages/mui-base/package.json'; import systemPkgJson from '../../../../packages/mui-system/package.json'; -import joyPkgJson from '../../../../packages/mui-joy/package.json'; const savedScrollTop = {}; @@ -590,15 +589,6 @@ function AppNavDrawer(props) { ])} /> )} - {router.asPath.startsWith('/joy-ui/') && ( - - )} {router.asPath.startsWith('/system/') && FEATURE_TOGGLE.enable_system_scope && ( { * * Demos: * - * - [Buttons](https://mui.com/components/buttons/) + * - [Button](https://mui.com/base/react-button/) * * API: * - * - [ButtonUnstyled API](https://mui.com/api/button-unstyled/) + * - [ButtonUnstyled API](https://mui.com/base/api/button-unstyled/) */ const ButtonUnstyled = React.forwardRef(function ButtonUnstyled< D extends React.ElementType = ButtonUnstyledTypeMap['defaultComponent'], diff --git a/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.tsx b/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.tsx index 79026ae5bff429..e85316881a70d0 100644 --- a/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.tsx +++ b/packages/mui-base/src/MenuItemUnstyled/MenuItemUnstyled.tsx @@ -21,11 +21,11 @@ function getUtilityClasses(ownerState: MenuItemOwnerState) { * * Demos: * - * - [Menus](https://mui.com/components/menus/) + * - [Menu](https://mui.com/base/react-menu/) * * API: * - * - [MenuItemUnstyled API](https://mui.com/api/menu-item-unstyled/) + * - [MenuItemUnstyled API](https://mui.com/base/api/menu-item-unstyled/) */ const MenuItemUnstyled = React.forwardRef(function MenuItemUnstyled( props: MenuItemUnstyledProps & React.ComponentPropsWithoutRef<'li'>, diff --git a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.tsx b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.tsx index 36634c39179035..059e7a827c26ff 100644 --- a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.tsx +++ b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.tsx @@ -29,11 +29,11 @@ function getUtilityClasses(ownerState: MenuUnstyledOwnerState) { * * Demos: * - * - [Menus](https://mui.com/components/menus/) + * - [Menu](https://mui.com/base/react-menu/) * * API: * - * - [MenuUnstyled API](https://mui.com/api/menu-unstyled/) + * - [MenuUnstyled API](https://mui.com/base/api/menu-unstyled/) */ const MenuUnstyled = React.forwardRef(function MenuUnstyled( props: MenuUnstyledProps & React.HTMLAttributes,