[core] Fixes for upcoming eslint upgrade

.eslintrc.js

@@ -81,6 +81,13 @@ module.exports = {
         '@next/next/no-html-link-for-pages': ['error', 'packages/toolpad-app/pages/'],
       },
     },
+    {
+      files: ['packages/toolpad-app/pages/**/*'],
+      rules: {
+        // The pattern is useful to type Next.js pages
+        'react/function-component-definition': 'off',
+      },
+    },
     {
       // Disabling this rule for now:
       // https://github.com/mui/material-ui/blob/9737bc85bb6960adb742e7709e9c3710c4b6cedd/.eslintrc.js#L359

docs/next.config.js

@@ -101,9 +101,7 @@ module.exports = withTM(
       return map;
     },
     rewrites: async () => {
-      return [
-        { source: '/api/:rest*', destination: '/api-docs/:rest*' },
-      ];
+      return [{ source: '/api/:rest*', destination: '/api-docs/:rest*' }];
     },
     // redirects only take effect in the development, not production (because of `next export`).
     redirects: async () => [

docs/pages/_app.js

@@ -142,6 +142,8 @@ function AppWrapper(props) {
     ];
   }
 
+  const pageContextValue = React.useMemo(() => ({ activePage, pages }), [activePage]);
+
   return (
     <React.Fragment>
       <NextHead>
@@ -152,7 +154,7 @@ function AppWrapper(props) {
       <UserLanguageProvider defaultUserLanguage={pageProps.userLanguage}>
         <CodeCopyProvider>
           <CodeVariantProvider>
-            <PageContext.Provider value={{ activePage, pages }}>
+            <PageContext.Provider value={pageContextValue}>
               <ThemeProvider>
                 <DocsStyledEngineProvider cacheLtr={emotionCache}>
                   {children}

docs/scripts/helpers.js

@@ -5,7 +5,7 @@ function getLineFeed(source) {
   return match === null ? os.EOL : match[0];
 }
 
-const fixBabelIssuesRegExp = new RegExp(/(?<=(\/>)|,)(\r?\n){2}/g);
+const fixBabelIssuesRegExp = /(?<=(\/>)|,)(\r?\n){2}/g;
 function fixBabelGeneratorIssues(source) {
   return source.replace(fixBabelIssuesRegExp, '\n');
 }

docs/src/components/landing/Marquee.js

@@ -6,7 +6,7 @@ import Link from 'docs/src/modules/components/Link';
 import Typography from '@mui/material/Typography';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
 
-const Marquee = ({ content }) => {
+function Marquee({ content }) {
   return (
     <Container
       sx={{
@@ -45,7 +45,7 @@ const Marquee = ({ content }) => {
       </Button>
     </Container>
   );
-};
+}
 
 Marquee.propTypes = {
   content: PropTypes.shape({

docs/src/components/landing/PricingTable.js

@@ -52,87 +52,93 @@ PlanName.propTypes = {
   }),
 };
 
-const Cell = ({ highlighted = false, ...props }) => (
-  <Box
-    {...props}
-    sx={{
-      py: 2,
-      px: 2,
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      ...(highlighted && {
-        // Remove borders since there are only two plans
-        // https://github.com/mui/mui-toolpad/pull/809#issuecomment-1221026428
-        borderWidth: '0 0 0 0',
-        borderStyle: 'solid',
-        borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.700' : 'grey.100'),
-        bgcolor: (theme) =>
-          theme.palette.mode === 'dark'
-            ? alpha(theme.palette.primaryDark[900], 0.5)
-            : alpha(theme.palette.grey[50], 0.5),
-      }),
-      ...props.sx,
-    }}
-  />
-);
+function Cell({ highlighted = false, ...props }) {
+  return (
+    <Box
+      {...props}
+      sx={{
+        py: 2,
+        px: 2,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...(highlighted && {
+          // Remove borders since there are only two plans
+          // https://github.com/mui/mui-toolpad/pull/809#issuecomment-1221026428
+          borderWidth: '0 0 0 0',
+          borderStyle: 'solid',
+          borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.700' : 'grey.100'),
+          bgcolor: (theme) =>
+            theme.palette.mode === 'dark'
+              ? alpha(theme.palette.primaryDark[900], 0.5)
+              : alpha(theme.palette.grey[50], 0.5),
+        }),
+        ...props.sx,
+      }}
+    />
+  );
+}
 
 Cell.propTypes = {
   highlighted: PropTypes.bool,
   sx: PropTypes.object,
 };
 
-const RowHead = ({ children, startIcon, ...props }) => (
-  <Box
-    {...props}
-    sx={{
-      justifyContent: 'flex-start',
-      borderRadius: 1,
-      bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.900' : 'grey.50'),
-      p: 1,
-      transition: 'none',
-      typography: 'body2',
-      fontWeight: 700,
-      display: 'flex',
-      alignItems: 'center',
-      ...props.sx,
-    }}
-  >
-    {startIcon ? <Box sx={{ lineHeight: 0, mr: 1 }}>{startIcon}</Box> : null}
-    {children}
-  </Box>
-);
+function RowHead({ children, startIcon, ...props }) {
+  return (
+    <Box
+      {...props}
+      sx={{
+        justifyContent: 'flex-start',
+        borderRadius: 1,
+        bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.900' : 'grey.50'),
+        p: 1,
+        transition: 'none',
+        typography: 'body2',
+        fontWeight: 700,
+        display: 'flex',
+        alignItems: 'center',
+        ...props.sx,
+      }}
+    >
+      {startIcon ? <Box sx={{ lineHeight: 0, mr: 1 }}>{startIcon}</Box> : null}
+      {children}
+    </Box>
+  );
+}
 
 RowHead.propTypes = {
   children: PropTypes.node.isRequired,
   startIcon: PropTypes.node,
   sx: PropTypes.object,
 };
 
-const RowCategory = (props) => (
-  <Box
-    {...props}
-    sx={{
-      typography: 'caption',
-      display: 'block',
-      fontWeight: 500,
-      bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.900' : 'grey.50'),
-      py: 1,
-      ml: 1,
-      pl: 1.5,
-      borderBottom: '1px solid',
-      borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.600' : 'grey.200'),
-      ...props.sx,
-    }}
-  />
-);
+function RowCategory(props) {
+  return (
+    <Box
+      {...props}
+      sx={{
+        typography: 'caption',
+        display: 'block',
+        fontWeight: 500,
+        bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.900' : 'grey.50'),
+        py: 1,
+        ml: 1,
+        pl: 1.5,
+        borderBottom: '1px solid',
+        borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.600' : 'grey.200'),
+        ...props.sx,
+      }}
+    />
+  );
+}
 
 RowCategory.propTypes = {
   sx: PropTypes.object,
 };
 
-const StickyHead = ({ plans, planInfo, container, disableCalculation = false }) => {
+function StickyHead({ plans, planInfo, container, disableCalculation = false }) {
   const [hidden, setHidden] = React.useState(true);
   React.useEffect(() => {
     function handleScroll() {
@@ -202,7 +208,7 @@ const StickyHead = ({ plans, planInfo, container, disableCalculation = false })
       </Container>
     </Box>
   );
-};
+}
 
 StickyHead.propTypes = {
   container: PropTypes.shape({
@@ -345,7 +351,7 @@ PricingTable.propTypes = {
   sx: PropTypes.object,
 };
 
-const Plan = ({ planInfo, benefits, unavailable, sx, ...props }) => {
+function Plan({ planInfo, benefits, unavailable, sx, ...props }) {
   return (
     <Paper
       variant="outlined"
@@ -355,7 +361,7 @@ const Plan = ({ planInfo, benefits, unavailable, sx, ...props }) => {
       <PlanName planInfo={planInfo} />
     </Paper>
   );
-};
+}
 
 Plan.propTypes = {
   benefits: PropTypes.arrayOf(PropTypes.string),

docs/src/components/landing/SignUp.js

@@ -13,7 +13,7 @@ import ROUTES from '../../route';
 
 const Form = styled('form')({});
 
-const SignUp = ({ sx }) => {
+function SignUp({ sx }) {
   const [form, setForm] = React.useState({
     email: '',
     status: 'initial',
@@ -152,7 +152,7 @@ const SignUp = ({ sx }) => {
       ) : null}
     </Form>
   );
-};
+}
 
 SignUp.propTypes = {
   sx: PropTypes.object,

docs/src/content/pricing.js

@@ -9,7 +9,7 @@ import IconImage from 'docs/src/components/icon/IconImage';
 import LaunchRounded from '@mui/icons-material/LaunchRounded';
 import GradientText from 'docs/src/components/typography/GradientText';
 
-const ColumnHead = ({ label, metadata, tooltip, nested = false, href }) => {
+function ColumnHead({ label, metadata, tooltip, nested = false, href }) {
   const text = (
     <Typography
       {...(href && {
@@ -61,7 +61,7 @@ const ColumnHead = ({ label, metadata, tooltip, nested = false, href }) => {
       ) : null}
     </Box>
   );
-};
+}
 
 ColumnHead.propTypes = {
   href: PropTypes.string,

packages/toolpad-app/scripts/waitForDb.ts

@@ -24,7 +24,9 @@ async function main() {
     } catch (err) {
       if (err.errorCode === 'P1001') {
         // eslint-disable-next-line no-await-in-loop
-        await new Promise((resolve) => setTimeout(resolve, INTERVAL));
+        await new Promise((resolve) => {
+          setTimeout(resolve, INTERVAL);
+        });
       } else {
         throw err;
       }

packages/toolpad-app/src/components/DialogForm.tsx

@@ -36,4 +36,4 @@ export default function DialogForm({ children, onKeyDown = () => {}, ...rest }:
       {children}
     </StyledDialogForm>
   );
-};
+}

packages/toolpad-app/src/components/NoSsr.tsx

@@ -25,5 +25,6 @@ export interface NoSsrProps {
  */
 export default function NoSsr({ children, defer, fallback = null }: NoSsrProps) {
   const isSsr = useIsSsr(defer);
+
   return <React.Fragment>{isSsr ? fallback : children}</React.Fragment>;
 }

packages/toolpad-app/src/toolpad/AppEditor/CodeComponentEditor/index.tsx

@@ -4,7 +4,7 @@ import { useParams } from 'react-router-dom';
 import createCache from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
 import * as ReactDOM from 'react-dom';
-import { ErrorBoundary } from 'react-error-boundary';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import {
   NodeId,
   createComponent,
@@ -120,6 +120,10 @@ const EXTRA_LIBS_HTTP_MODULES: ExtraLib[] = [
   },
 ];
 
+function RuntimeError({ error: runtimeError }: FallbackProps) {
+  return <ErrorAlert error={runtimeError} />;
+}
+
 interface CodeComponentEditorContentProps {
   codeComponentNode: appDom.CodeComponentNode;
 }
@@ -241,10 +245,7 @@ function CodeComponentEditorContent({ codeComponentNode }: CodeComponentEditorCo
         ? ReactDOM.createPortal(
             <FrameContent document={frameDocument}>
               <React.Suspense fallback={null}>
-                <ErrorBoundary
-                  resetKeys={[CodeComponent]}
-                  fallbackRender={({ error: runtimeError }) => <ErrorAlert error={runtimeError} />}
-                >
+                <ErrorBoundary resetKeys={[CodeComponent]} fallbackRender={RuntimeError}>
                   <AppThemeProvider dom={dom}>
                     <CodeComponent
                       {...defaultProps}

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalogItem.tsx

@@ -47,10 +47,10 @@ interface ComponentIconProps {
   kind?: ComponentItemKind;
 }
 
-const ComponentIcon = ({ id: componentId, kind }: ComponentIconProps) => {
+function ComponentIcon({ id: componentId, kind }: ComponentIconProps) {
   const Icon = iconMap.get(kind === 'custom' ? 'CodeComponent' : componentId);
   return Icon ? <Icon fontSize="medium" opacity={kind === 'future' ? 0.75 : 1} /> : null;
-};
+}
 
 interface ComponentCatalogItemProps {
   draggable?: boolean;
@@ -62,15 +62,15 @@ interface ComponentCatalogItemProps {
   kind?: ComponentItemKind;
 }
 
-const ComponentCatalogItem = ({
+function ComponentCatalogItem({
   draggable,
   onClick,
   id,
   displayName,
   builtIn,
   kind,
   onDragStart,
-}: ComponentCatalogItemProps) => {
+}: ComponentCatalogItemProps) {
   return (
     <Box
       className="ComponentCatalogItem"
@@ -112,6 +112,6 @@ const ComponentCatalogItem = ({
       </span>
     </Box>
   );
-};
+}
 
 export default ComponentCatalogItem;

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx

@@ -129,11 +129,7 @@ function SelectedNodeEditor({ node }: SelectedNodeEditorProps) {
         <NodeNameEditor node={node} />
         {nodeError ? <ErrorAlert error={nodeError} /> : null}
         <Divider sx={{ mt: 1 }} />
-        {node ? (
-          <React.Fragment>
-            <ComponentPropsEditor componentConfig={componentConfig} node={node} />
-          </React.Fragment>
-        ) : null}
+        {node ? <ComponentPropsEditor componentConfig={componentConfig} node={node} /> : null}
       </Stack>
     </ElementContext.Provider>
   );