[core-infra] Add no-relative-packages

.eslintrc.js

@@ -242,8 +242,6 @@ module.exports = /** @type {Config} */ ({
 
     // We re-export default in many places, remove when https://github.com/airbnb/javascript/issues/2500 gets resolved
     'no-restricted-exports': 'off',
-    // Some of these occurences are deliberate and fixing them will break things in repos that use @monorepo dependency
-    'import/no-relative-packages': 'off',
     // Avoid accidental auto-"fixes" https://github.com/jsx-eslint/eslint-plugin-react/issues/3458
     'react/no-invalid-html-attribute': 'off',
 
@@ -304,15 +302,6 @@ module.exports = /** @type {Config} */ ({
         'react/no-unused-prop-types': 'off',
       },
     },
-    {
-      files: ['docs/src/modules/components/**/*.js'],
-      rules: {
-        'material-ui/no-hardcoded-labels': [
-          'error',
-          { allow: ['MUI', 'X', 'GitHub', 'Stack Overflow'] },
-        ],
-      },
-    },
     // Next.js plugin
     {
       files: ['docs/**/*'],
@@ -325,18 +314,27 @@ module.exports = /** @type {Config} */ ({
       rules: {
         // We're not using the Image component at the moment
         '@next/next/no-img-element': 'off',
+        'no-restricted-imports': [
+          'error',
+          {
+            paths: NO_RESTRICTED_IMPORTS_PATHS_TOP_LEVEL_PACKAGES,
+            patterns: NO_RESTRICTED_IMPORTS_PATTERNS_DEEPLY_NESTED,
+          },
+        ],
       },
     },
-    // Next.js entry points pages
     {
-      files: ['docs/pages/**/*.?(c|m)[jt]s?(x)'],
+      files: ['docs/src/modules/components/**/*'],
       rules: {
-        'react/prop-types': 'off',
+        'material-ui/no-hardcoded-labels': [
+          'error',
+          { allow: ['MUI', 'X', 'GitHub', 'Stack Overflow'] },
+        ],
       },
     },
     // demos
     {
-      files: ['docs/src/pages/**/*.?(c|m)[jt]s?(x)', 'docs/data/**/*.?(c|m)[jt]s?(x)'],
+      files: ['docs/src/pages/**/*', 'docs/data/**/*'],
       rules: {
         // This most often reports data that is defined after the component definition.
         // This is safe to do and helps readability of the demo code since the data is mostly irrelevant.
@@ -346,8 +344,15 @@ module.exports = /** @type {Config} */ ({
         'no-console': 'off',
       },
     },
+    // Next.js entry points pages
+    {
+      files: ['docs/pages/**/*'],
+      rules: {
+        'react/prop-types': 'off',
+      },
+    },
     {
-      files: ['docs/data/**/*.?(c|m)[jt]s?(x)'],
+      files: ['docs/data/**/*'],
       excludedFiles: [
         // filenames/match-exported sees filename as 'file-name.d'
         // Plugin looks unmaintain, find alternative? (e.g. eslint-plugin-project-structure)
@@ -359,6 +364,14 @@ module.exports = /** @type {Config} */ ({
         'filenames/match-exported': ['error'],
       },
     },
+    {
+      files: ['docs/data/material/getting-started/templates/**/*'],
+      rules: {
+        // So we can use # to improve the page UX
+        // and so developer get eslint warning to remind them to fix the links
+        'jsx-a11y/anchor-is-valid': 'off',
+      },
+    },
     {
       files: ['*.d.ts'],
       rules: {
@@ -442,18 +455,6 @@ module.exports = /** @type {Config} */ ({
         'no-bitwise': 'off',
       },
     },
-    {
-      files: ['docs/**/*.?(c|m)[jt]s?(x)'],
-      rules: {
-        'no-restricted-imports': [
-          'error',
-          {
-            paths: NO_RESTRICTED_IMPORTS_PATHS_TOP_LEVEL_PACKAGES,
-            patterns: NO_RESTRICTED_IMPORTS_PATTERNS_DEEPLY_NESTED,
-          },
-        ],
-      },
-    },
     {
       files: ['packages/*/src/**/*.?(c|m)[jt]s?(x)'],
       excludedFiles: ['*.d.ts', '*.spec.*'],
@@ -530,11 +531,9 @@ module.exports = /** @type {Config} */ ({
       },
     },
     {
-      files: ['docs/data/material/getting-started/templates/**/*'],
+      files: ['apps/**/*'],
       rules: {
-        // So we can use # to improve the page UX
-        // and so developer get eslint warning to remind them to fix the links
-        'jsx-a11y/anchor-is-valid': 'off',
+        'import/no-relative-packages': 'off',
       },
     },
   ],

dangerFileContent.ts

@@ -1,7 +1,8 @@
 import { exec } from 'child_process';
 import type * as dangerModule from 'danger';
+import replaceUrl from '@mui-internal/api-docs-builder/utils/replaceUrl';
+// eslint-disable-next-line import/no-relative-packages
 import { loadComparison } from './scripts/sizeSnapshot';
-import replaceUrl from './packages/api-docs-builder/utils/replaceUrl';
 
 declare const danger: (typeof dangerModule)['danger'];
 declare const markdown: (typeof dangerModule)['markdown'];

docs/scripts/updateIconSynonyms.js

@@ -4,6 +4,7 @@ import fetch from 'cross-fetch';
 import fse from 'fs-extra';
 import * as mui from '@mui/icons-material';
 import synonyms from 'docs/data/material/components/material-icons/synonyms';
+// eslint-disable-next-line import/no-relative-packages
 import myDestRewriter from '../../packages/mui-icons-material/renameFilters/material-design-icons';
 
 function not(a, b) {

docs/src/modules/components/ApiPage/list/ClassesList.tsx

@@ -87,6 +87,7 @@ export default function ClassesList(props: ClassesListProps) {
             {description && <p dangerouslySetInnerHTML={{ __html: description }} />}
             {displayClassKeys && !isGlobal && (
               <p className="prop-list-class">
+                {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
                 <span className="prop-list-title">{'Rule name'}:</span>
                 <code className="Api-code">{key}</code>
               </p>

docs/src/modules/components/ApiPage/list/PropertiesList.tsx

@@ -157,11 +157,13 @@ export default function PropertiesList(props: PropertiesListProps) {
               <React.Fragment>
                 {propName}
                 {isProPlan && (
+                  // eslint-disable-next-line material-ui/no-hardcoded-labels
                   <a href="/x/introduction/licensing/#pro-plan" aria-label="Pro plan">
                     <span className="plan-pro" />
                   </a>
                 )}
                 {isPremiumPlan && (
+                  // eslint-disable-next-line material-ui/no-hardcoded-labels
                   <a href="/x/introduction/licensing/#premium-plan" aria-label="Premium plan">
                     <span className="plan-premium" />
                   </a>

docs/src/modules/components/ApiPage/sections/ToggleDisplayOption.tsx

@@ -117,7 +117,8 @@ export default function ToggleDisplayOption(props: ToggleDisplayOptionProps) {
         sx={{ height: '1.875rem', p: '6px 4px 6px 8px', textTransform: 'capitalize' }}
       >
         <Box component="span" sx={{ fontWeight: 'medium', mr: 0.5 }}>
-          View:
+          {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
+          {'View:'}
         </Box>
         {displayOption}
       </Button>
@@ -136,7 +137,8 @@ export default function ToggleDisplayOption(props: ToggleDisplayOptionProps) {
           data-ga-event-action={sectionType}
           data-ga-event-label="table"
         >
-          Table
+          {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
+          {'Table'}
           <CheckIcon
             sx={{ fontSize: '0.85rem', ml: 'auto', opacity: displayOption === 'table' ? 1 : 0 }}
           />
@@ -149,7 +151,8 @@ export default function ToggleDisplayOption(props: ToggleDisplayOptionProps) {
           data-ga-event-action={sectionType}
           data-ga-event-label="expanded"
         >
-          Expanded list
+          {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
+          {'Expanded list'}
           <CheckIcon
             sx={{ fontSize: '0.85rem', ml: 'auto', opacity: displayOption === 'expanded' ? 1 : 0 }}
           />
@@ -162,7 +165,8 @@ export default function ToggleDisplayOption(props: ToggleDisplayOptionProps) {
           data-ga-event-action={sectionType}
           data-ga-event-label="collapsed"
         >
-          Collapsed list
+          {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
+          {'Collapsed list'}
           <CheckIcon
             sx={{ fontSize: '0.85rem', ml: 'auto', opacity: displayOption === 'collapsed' ? 1 : 0 }}
           />

docs/src/modules/components/ApiPage/table/ClassesTable.tsx

@@ -65,9 +65,11 @@ export default function ClassesTable(props: ClassesTableProps) {
       <StyledTable>
         <thead>
           <tr>
-            <th>Class name</th>
-            {displayClassKeys && <th>Rule name</th>}
-            <th>Description</th>
+            {/* eslint-disable material-ui/no-hardcoded-labels */}
+            <th>{'Class name'}</th>
+            {displayClassKeys && <th>{'Rule name'}</th>}
+            <th>{'Description'}</th>
+            {/* eslint-enable material-ui/no-hardcoded-labels */}
           </tr>
         </thead>
         <tbody>

docs/src/modules/components/ApiPage/table/PropertiesTable.tsx

@@ -133,10 +133,12 @@ export default function PropertiesTable(props: PropertiesTableProps) {
       <StyledTable>
         <thead>
           <tr>
-            <th>Name</th>
-            <th>Type</th>
-            {hasDefaultColumn && <th>Default</th>}
-            <th>Description</th>
+            {/* eslint-disable material-ui/no-hardcoded-labels */}
+            <th>{'Name'}</th>
+            <th>{'Type'}</th>
+            {hasDefaultColumn && <th>{'Default'}</th>}
+            <th>{'Description'}</th>
+            {/* eslint-enable material-ui/no-hardcoded-labels */}
           </tr>
         </thead>
         <tbody>
@@ -168,11 +170,13 @@ export default function PropertiesTable(props: PropertiesTableProps) {
                   {isRequired ? '*' : ''}
                   {isOptional ? '?' : ''}
                   {isProPlan && (
+                    // eslint-disable-next-line material-ui/no-hardcoded-labels
                     <a href="/x/introduction/licensing/#pro-plan" aria-label="Pro plan">
                       <span className="plan-pro" />
                     </a>
                   )}
                   {isPremiumPlan && (
+                    // eslint-disable-next-line material-ui/no-hardcoded-labels
                     <a href="/x/introduction/licensing/#premium-plan" aria-label="Premium plan">
                       <span className="plan-premium" />
                     </a>

docs/src/modules/components/ApiPage/table/SlotsTable.tsx

@@ -97,6 +97,7 @@ export default function SlotsTable(props: SlotsTableProps) {
                   {name}
                 </td>
                 <td className="MuiApi-table-class-name">
+                  {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
                   {className && <span className="class-name">{`.${className}`}</span>}
                 </td>
                 <td>{defaultValue && <code className="item-default">{defaultValue}</code>}</td>

docs/src/modules/components/JoyThemeBuilder.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable material-ui/no-hardcoded-labels */
 import * as React from 'react';
 import TypeScriptIcon from '@mui/docs/svgIcons/TypeScript';
 import startCase from 'lodash/startCase';

docs/src/modules/components/JoyUsageDemo.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable material-ui/no-hardcoded-labels */
 import * as React from 'react';
 import Check from '@mui/icons-material/Check';
 import CheckRounded from '@mui/icons-material/CheckRounded';

docs/src/modules/components/JoyVariablesDemo.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable material-ui/no-hardcoded-labels */
 import * as React from 'react';
 import Box from '@mui/joy/Box';
 import Divider from '@mui/joy/Divider';

docs/src/modules/components/MuiProductSelector.tsx

@@ -260,6 +260,7 @@ const MuiProductSelector = React.forwardRef(function MuiProductSelector(
           },
         }}
       >
+        {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
         <NavLabel>MUI X Components</NavLabel>
       </Box>
       {advancedProducts.map((product) => (
@@ -292,6 +293,7 @@ const MuiProductSelector = React.forwardRef(function MuiProductSelector(
         }}
       >
         <Box sx={{ display: 'flex', alignItems: 'center', gap: '1px' }}>
+          {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
           <NavLabel> Toolpad </NavLabel>
           <Chip
             label="Beta"

docs/src/modules/components/ThemeViewer.tsx

@@ -81,6 +81,7 @@ function ObjectEntryLabel(props: { objectKey: string; objectValue: any }) {
 
   return (
     <React.Fragment>
+      {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
       {`${objectKey}: `}
       {type === 'color' ? (
         <Color style={{ borderColor: lighten(label, 0.7) }}>

packages/rsc-builder/buildRsc.ts

@@ -1,8 +1,8 @@
 import path from 'path';
 import * as yargs from 'yargs';
 import * as fse from 'fs-extra';
-import findComponents from '../api-docs-builder/utils/findComponents';
-import findHooks from '../api-docs-builder/utils/findHooks';
+import findComponents from '@mui-internal/api-docs-builder/utils/findComponents';
+import findHooks from '@mui-internal/api-docs-builder/utils/findHooks';
 
 type CommandOptions = { grep?: string };