[core][docs] add Eslint rule to ensure main demo component match file… (

#37278)

Co-authored-by: Michał Dudak <[email protected]>

.eslintrc.js

@@ -34,6 +34,7 @@ module.exports = {
     'eslint-plugin-material-ui',
     'eslint-plugin-react-hooks',
     '@typescript-eslint/eslint-plugin',
+    'filenames',
   ],
   settings: {
     'import/resolver': {
@@ -297,6 +298,18 @@ module.exports = {
         'no-console': 'off',
       },
     },
+    {
+      files: ['docs/data/**/*.tsx'],
+      excludedFiles: [
+        'docs/data/joy/getting-started/templates/**/*.tsx',
+        'docs/data/**/css/*.tsx',
+        'docs/data/**/system/*.tsx',
+        'docs/data/**/tailwind/*.tsx',
+      ],
+      rules: {
+        'filenames/match-exported': ['error'],
+      },
+    },
     {
       files: ['*.d.ts'],
       rules: {

docs/data/base/components/autocomplete/UseAutocompletePopper.js

@@ -48,7 +48,7 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(props, r
   );
 });
 
-export default function UseAutocomplete() {
+export default function UseAutocompletePopper() {
   const [value, setValue] = React.useState(null);
 
   const handleChange = (event, newValue) => setValue(newValue);

docs/data/base/components/autocomplete/UseAutocompletePopper.tsx

@@ -51,7 +51,7 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(
   );
 });
 
-export default function UseAutocomplete() {
+export default function UseAutocompletePopper() {
   const [value, setValue] = React.useState<(typeof top100Films)[number] | null>(
     null,
   );

docs/data/base/components/menu/menu.md

@@ -52,7 +52,7 @@ The Menu serves as a replacement for the native HTML `<ul>`, and the Menu Item c
 The following demo shows how to create and style a Menu component.
 Click **Dashboard** to view the menu—notice that it uses the built-in [Popper](/base-ui/react-popper/) component to visually break out of its parent container:
 
-{{"demo": "MenuSimple.js"}}
+{{"demo": "UnstyledMenuSimple.js"}}
 
 ### Anatomy
 

docs/data/base/components/modal/ModalUnstyled.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { styled, Box } from '@mui/system';
 import Modal from '@mui/base/Modal';
 
-export default function ModalDemo() {
+export default function ModalUnstyled() {
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);

docs/data/base/components/modal/ModalUnstyled.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { styled, Box, Theme } from '@mui/system';
 import Modal from '@mui/base/Modal';
 
-export default function ModalDemo() {
+export default function ModalUnstyled() {
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);

docs/data/base/components/select/UnstyledSelectMultiple.js

@@ -5,7 +5,7 @@ import Option, { optionClasses } from '@mui/base/Option';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 
-export default function UnstyledSelectsMultiple() {
+export default function UnstyledSelectMultiple() {
   return (
     <CustomMultiSelect defaultValue={[10, 20]}>
       <StyledOption value={10}>Ten</StyledOption>

docs/data/base/components/select/UnstyledSelectMultiple.tsx

@@ -4,7 +4,7 @@ import Option, { optionClasses } from '@mui/base/Option';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 
-export default function UnstyledSelectsMultiple() {
+export default function UnstyledSelectMultiple() {
   return (
     <CustomMultiSelect defaultValue={[10, 20]}>
       <StyledOption value={10}>Ten</StyledOption>

docs/data/base/components/slider/UnstyledSliderIntroduction.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
-export default function UnstyledSlider() {
+export default function UnstyledSliderIntroduction() {
   return (
     <Box sx={{ width: 320 }}>
       <StyledSlider defaultValue={50} />

docs/data/base/components/slider/UnstyledSliderIntroduction.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled, alpha, Box } from '@mui/system';
 import Slider, { sliderClasses } from '@mui/base/Slider';
 
-export default function UnstyledSlider() {
+export default function UnstyledSliderIntroduction() {
   return (
     <Box sx={{ width: 320 }}>
       <StyledSlider defaultValue={50} />

docs/data/base/components/snackbar/UnstyledSnackbarIntroduction.js

@@ -5,7 +5,7 @@ import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import CloseIcon from '@mui/icons-material/Close';
 import Snackbar from '@mui/base/Snackbar';
 
-export default function TransitionComponentSnackbar() {
+export default function UnstyledSnackbarIntroduction() {
   const [open, setOpen] = React.useState(false);
   const [exited, setExited] = React.useState(true);
   const nodeRef = React.useRef(null);

docs/data/base/components/snackbar/UnstyledSnackbarIntroduction.tsx

@@ -6,7 +6,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import Snackbar from '@mui/base/Snackbar';
 import { SnackbarCloseReason } from '@mui/base/useSnackbar';
 
-export default function TransitionComponentSnackbar() {
+export default function UnstyledSnackbarIntroduction() {
   const [open, setOpen] = React.useState(false);
   const [exited, setExited] = React.useState(true);
   const nodeRef = React.useRef(null);

docs/data/base/components/switch/UnstyledSwitchIntroduction.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/system';
 import Switch, { switchClasses } from '@mui/base/Switch';
 
-export default function UnstyledSwitches() {
+export default function UnstyledSwitchIntroduction() {
   const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } };
 
   return (

docs/data/base/components/switch/UnstyledSwitchIntroduction.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/system';
 import Switch, { switchClasses } from '@mui/base/Switch';
 
-export default function UnstyledSwitches() {
+export default function UnstyledSwitchIntroduction() {
   const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } };
 
   return (

docs/data/base/components/table-pagination/TableCustomized.js

@@ -4,7 +4,7 @@ import TablePagination, {
   tablePaginationClasses as classes,
 } from '@mui/base/TablePagination';
 
-export default function UnstyledTable() {
+export default function TableCustomized() {
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(5);
 

docs/data/base/components/table-pagination/TableCustomized.tsx

@@ -4,7 +4,7 @@ import TablePagination, {
   tablePaginationClasses as classes,
 } from '@mui/base/TablePagination';
 
-export default function UnstyledTable() {
+export default function TableCustomized() {
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(5);
 

docs/data/base/components/table-pagination/TableUnstyled.js

@@ -4,7 +4,7 @@ import TablePagination, {
   tablePaginationClasses as classes,
 } from '@mui/base/TablePagination';
 
-export default function UnstyledTable() {
+export default function TableUnstyled() {
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(5);
 

docs/data/base/components/table-pagination/TableUnstyled.tsx

@@ -4,7 +4,7 @@ import TablePagination, {
   tablePaginationClasses as classes,
 } from '@mui/base/TablePagination';
 
-export default function UnstyledTable() {
+export default function TableUnstyled() {
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(5);
 

docs/data/base/components/tabs/KeyboardNavigation.js

@@ -5,7 +5,7 @@ import Tabs from '@mui/base/Tabs';
 import Tab, { tabClasses } from '@mui/base/Tab';
 import TabsList from '@mui/base/TabsList';
 
-export default function AccessibleTabs() {
+export default function KeyboardNavigation() {
   return (
     <div>
       <p>Selection following focus:</p>

docs/data/base/components/tabs/KeyboardNavigation.tsx

@@ -5,7 +5,7 @@ import Tabs from '@mui/base/Tabs';
 import Tab, { tabClasses } from '@mui/base/Tab';
 import TabsList from '@mui/base/TabsList';
 
-export default function AccessibleTabs() {
+export default function KeyboardNavigation() {
   return (
     <div>
       <p>Selection following focus:</p>

docs/data/base/components/textarea-autosize/MaxHeightTextarea.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import TextareaAutosize from '@mui/base/TextareaAutosize';
 import { styled } from '@mui/system';
 
-export default function EmptyTextarea() {
+export default function MaxHeightTextarea() {
   const blue = {
     100: '#DAECFF',
     200: '#b6daff',

docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import TextareaAutosize from '@mui/base/TextareaAutosize';
 import { styled } from '@mui/system';
 
-export default function EmptyTextarea() {
+export default function MaxHeightTextarea() {
   const blue = {
     100: '#DAECFF',
     200: '#b6daff',

docs/data/base/components/textarea-autosize/MinHeightTextarea.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import TextareaAutosize from '@mui/base/TextareaAutosize';
 import { styled } from '@mui/system';
 
-export default function EmptyTextarea() {
+export default function MinHeightTextarea() {
   const blue = {
     100: '#DAECFF',
     200: '#b6daff',

docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import TextareaAutosize from '@mui/base/TextareaAutosize';
 import { styled } from '@mui/system';
 
-export default function EmptyTextarea() {
+export default function MinHeightTextarea() {
   const blue = {
     100: '#DAECFF',
     200: '#b6daff',

docs/data/base/getting-started/quickstart/BaseButton.js

@@ -3,7 +3,7 @@ import Button from '@mui/base/Button';
 import useButton from '@mui/base/useButton';
 import Stack from '@mui/material/Stack';
 
-export default function App() {
+export default function BaseButton() {
   const { getRootProps } = useButton({});
   return (
     <Stack spacing={2} direction="row">

docs/data/base/getting-started/quickstart/BaseButton.tsx

@@ -3,7 +3,7 @@ import Button from '@mui/base/Button';
 import useButton from '@mui/base/useButton';
 import Stack from '@mui/material/Stack';
 
-export default function App() {
+export default function BaseButton() {
   const { getRootProps } = useButton({});
   return (
     <Stack spacing={2} direction="row">

docs/data/base/getting-started/quickstart/BaseButtonMuiSystem.js

@@ -88,7 +88,7 @@ const GitHubButtonComponent = styled(Button)(getStyles);
 
 const GitHubButtonHook = styled('button')(getStyles);
 
-export default function App() {
+export default function BaseButtonMuiSystem() {
   const { getRootProps } = useButton({});
 
   return (

docs/data/base/getting-started/quickstart/BaseButtonMuiSystem.tsx

@@ -88,7 +88,7 @@ const GitHubButtonComponent = styled(Button)(getStyles);
 
 const GitHubButtonHook = styled('button')(getStyles);
 
-export default function App() {
+export default function BaseButtonMuiSystem() {
   const { getRootProps } = useButton({});
 
   return (

docs/data/base/getting-started/quickstart/BaseButtonPlainCss.js

@@ -79,7 +79,7 @@ const css = `
   }
 `;
 
-export default function App() {
+export default function BaseButtonPlainCss() {
   const { getRootProps } = useButton({});
   return (
     <React.Fragment>

docs/data/base/getting-started/quickstart/BaseButtonPlainCss.tsx

@@ -79,7 +79,7 @@ const css = `
   }
 `;
 
-export default function App() {
+export default function BaseButtonPlainCss() {
   const { getRootProps } = useButton({});
   return (
     <React.Fragment>

docs/data/base/getting-started/quickstart/Tutorial.js

@@ -76,7 +76,7 @@ const CustomButton = styled(Button)(
   `,
 );
 
-export default function App() {
+export default function Tutorial() {
   return (
     <div style={{ marginTop: 16, paddingTop: 16, paddingBottom: 16 }}>
       <CustomButton>Create Repository</CustomButton>

docs/data/base/getting-started/quickstart/Tutorial.tsx

@@ -76,7 +76,7 @@ const CustomButton = styled(Button)(
   `,
 );
 
-export default function App() {
+export default function Tutorial() {
   return (
     <div style={{ marginTop: 16, paddingTop: 16, paddingBottom: 16 }}>
       <CustomButton>Create Repository</CustomButton>

docs/data/base/guides/overriding-component-structure/OverridingInternalSlot.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Select from '@mui/base/Select';
 import Option from '@mui/base/Option';
 
-export default function OrderedListSelect() {
+export default function OverridingInternalSlot() {
   return (
     <Select slots={{ listbox: 'ol' }} defaultValue="First option">
       <Option value="First option">First option</Option>

docs/data/base/guides/overriding-component-structure/OverridingInternalSlot.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Select from '@mui/base/Select';
 import Option from '@mui/base/Option';
 
-export default function OrderedListSelect() {
+export default function OverridingInternalSlot() {
   return (
     <Select slots={{ listbox: 'ol' }} defaultValue="First option">
       <Option value="First option">First option</Option>

docs/data/base/guides/overriding-component-structure/OverridingRootSlot.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Button from '@mui/base/Button';
 
-export default function DivButton() {
+export default function OverridingRootSlot() {
   return <Button slots={{ root: 'div' }}>Button</Button>;
 }

docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Button from '@mui/base/Button';
 
-export default function DivButton() {
+export default function OverridingRootSlot() {
   return <Button slots={{ root: 'div' }}>Button</Button>;
 }

docs/data/joy/components/alert/AlertInvertedColors.js

@@ -12,7 +12,7 @@ import Check from '@mui/icons-material/Check';
 import Close from '@mui/icons-material/Close';
 import Warning from '@mui/icons-material/Warning';
 
-export default function AlertBasic() {
+export default function AlertInvertedColors() {
   return (
     <Stack spacing={2} sx={{ maxWidth: 400 }}>
       <Alert

docs/data/joy/components/alert/AlertInvertedColors.tsx

@@ -12,7 +12,7 @@ import Check from '@mui/icons-material/Check';
 import Close from '@mui/icons-material/Close';
 import Warning from '@mui/icons-material/Warning';
 
-export default function AlertBasic() {
+export default function AlertInvertedColors() {
   return (
     <Stack spacing={2} sx={{ maxWidth: 400 }}>
       <Alert

docs/data/joy/components/aspect-ratio/ListStackRatio.js

@@ -26,7 +26,7 @@ const data = [
   },
 ];
 
-export default function FlexRowRatio() {
+export default function ListStackRatio() {
   return (
     <Sheet
       variant="outlined"

docs/data/joy/components/aspect-ratio/ListStackRatio.tsx

@@ -26,7 +26,7 @@ const data = [
   },
 ];
 
-export default function FlexRowRatio() {
+export default function ListStackRatio() {
   return (
     <Sheet
       variant="outlined"

docs/data/joy/components/autocomplete/AutocompleteDecorators.js

@@ -3,7 +3,7 @@ import Autocomplete from '@mui/joy/Autocomplete';
 import Stack from '@mui/joy/Stack';
 import LiveTv from '@mui/icons-material/LiveTv';
 
-export default function ComboBox() {
+export default function AutocompleteDecorators() {
   return (
     <Stack spacing={2}>
       <Autocomplete

docs/data/joy/components/autocomplete/AutocompleteDecorators.tsx

@@ -3,7 +3,7 @@ import Autocomplete from '@mui/joy/Autocomplete';
 import Stack from '@mui/joy/Stack';
 import LiveTv from '@mui/icons-material/LiveTv';
 
-export default function ComboBox() {
+export default function AutocompleteDecorators() {
   return (
     <Stack spacing={2}>
       <Autocomplete