Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[code-infra] Closer sync with eslint config of codebase #3441

Merged
merged 7 commits into from
Apr 25, 2024
Merged

[code-infra] Closer sync with eslint config of codebase #3441

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5af78f9
[code-infra] Closer sync with eslint config of codebase
oliviertassinari Apr 21, 2024
7297bf2
Fix naming
Janpot Apr 23, 2024
6f31a85
fix date picker
Janpot Apr 23, 2024
16adf62
fix text field and list
Janpot Apr 23, 2024
3c127d9
Update DataGridHideToolbar.js
Janpot Apr 23, 2024
1709cd7
Update DataGridHideToolbar.js
Janpot Apr 23, 2024
cc9ce85
exmaple update
Janpot Apr 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 40 additions & 37 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,31 @@ const lodash = require('lodash');

const ALLOWED_LODASH_METHODS = new Set(['throttle', 'debounce', 'set']);

const noRestrictedImports = {
paths: [
{
name: '@mui/icons-material',
message: 'Use @mui/icons-material/<Icon> instead.',
},
{
name: 'lodash-es',
importNames: Object.keys(lodash).filter((key) => !ALLOWED_LODASH_METHODS.has(key)),
message:
'Avoid kitchensink libraries like lodash-es. We prefer a slightly more verbose, but more universally understood javascript style',
},
{
name: 'react-query',
message: 'deprecated package, use @tanstack/react-query instead.',
},
],
patterns: [
{
group: ['lodash-es/*'],
message: 'Use `import { debounce } from "lodash-es";` instead.',
},
],
};

module.exports = {
...baseline,
settings: {
Expand All @@ -25,37 +50,11 @@ module.exports = {
*/
rules: {
...baseline.rules,
'import/prefer-default-export': ['off'],
// TODO move to @mui/monorepo, codebase is moving away from default exports
'import/prefer-default-export': 'off',
Comment on lines -28 to +54
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Syntax convention (['off'] -> 'off')

// TODO move rule into the main repo once it has upgraded
'@typescript-eslint/return-await': ['off'],

'no-restricted-imports': [
'error',
{
paths: [
{
name: '@mui/icons-material',
message: 'Use @mui/icons-material/<Icon> instead.',
},
{
name: 'lodash-es',
importNames: Object.keys(lodash).filter((key) => !ALLOWED_LODASH_METHODS.has(key)),
message:
'Avoid kitchensink libraries like lodash-es. We prefer a slightly more verbose, but more universally understood javascript style',
},
{
name: 'react-query',
message: 'deprecated package, use @tanstack/react-query instead.',
},
],
patterns: [
{
group: ['lodash-es/*'],
message: 'Use `import { debounce } from "lodash-es";` instead.',
},
],
},
],
'@typescript-eslint/return-await': 'off',
'no-restricted-imports': ['error', noRestrictedImports],
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

moved to a variable, noRestrictedImports, to be able to extend it in specific paths.

'no-restricted-syntax': [
...baseline.rules['no-restricted-syntax'].filter((rule) => {
// Too opinionated for Toolpad
Expand Down Expand Up @@ -94,15 +93,21 @@ module.exports = {
],
},
],
'material-ui/no-hardcoded-labels': 'off', // We are not really translating the docs/website anymore
},
overrides: [
...baseline.overrides,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The main difference

{
files: ['docs/src/modules/components/**/*.js'],
rules: {
'material-ui/no-hardcoded-labels': 'off',
},
},
{
files: ['examples/**/*'],
rules: {
// We use it for demonstration purposes
'no-console': 'off',
// Personal preference
'no-underscore-dangle': 'off',
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems marginally used

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is a reason. examples don't contain eslint. So the code shouldn't contain eslint comments.

Copy link
Member Author

@oliviertassinari oliviertassinari Apr 22, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This makes sense. Should we move this rule to the share eslint config then? It feels like we want this for all /examples folders through MUI codebase.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 I'm good with that as well

// no node_modules in examples as they are not installed
'import/no-unresolved': 'off',
},
Expand Down Expand Up @@ -158,13 +163,11 @@ module.exports = {
'react/function-component-definition': 'off',
},
},
// TODO remove, fix this rule in the codebase
{
// Disabling this rule for now:
// https://github.com/mui/material-ui/blob/9737bc85bb6960adb742e7709e9c3710c4b6cedd/.eslintrc.js#L359
files: ['packages/*/src/**/*{.ts,.tsx,.js}'],
excludedFiles: ['*.d.ts', '*.spec.ts', '*.spec.tsx'],
files: ['**'],
rules: {
'import/no-cycle': ['error', { ignoreExternal: true }],
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed seems to duplicate

'no-restricted-imports': ['error', noRestrictedImports],
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added until fixed in Toolpad

},
},
],
Expand Down
2 changes: 1 addition & 1 deletion docs/data/toolpad/studio/components/button/ButtonBasic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@ const TOOLPAD_PROPS = {
content: 'Hello World',
};

export default function BasicButton() {
export default function ButtonBasic() {
return <Button {...TOOLPAD_PROPS} />;
}
2 changes: 1 addition & 1 deletion docs/data/toolpad/studio/components/button/ButtonColor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const TOOLPAD_PROPS3 = {
variant: 'outlined',
};

export default function BasicButton() {
export default function ButtonColor() {
return (
<Stack spacing={2} direction="row" alignItems="center">
<Button {...TOOLPAD_PROPS1} />
Expand Down
2 changes: 1 addition & 1 deletion docs/data/toolpad/studio/components/button/ButtonSize.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const TOOLPAD_PROPS3 = {
content: 'Large',
};

export default function BasicButton() {
export default function ButtonSize() {
return (
<Stack spacing={2} direction="row" alignItems="center">
<Button {...TOOLPAD_PROPS1} />
Expand Down
2 changes: 1 addition & 1 deletion docs/data/toolpad/studio/components/button/ButtonState.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const TOOLPAD_PROPS2 = {
disabled: true,
};

export default function BasicButton() {
export default function ButtonState() {
return (
<Stack spacing={2} direction="row" alignItems="center">
<Button {...TOOLPAD_PROPS1} />
Expand Down
2 changes: 1 addition & 1 deletion docs/data/toolpad/studio/components/button/ButtonVariant.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const TOOLPAD_PROPS3 = {
content: 'Text',
};

export default function BasicButton() {
export default function ButtonVariant() {
return (
<Stack spacing={2} direction="row" alignItems="center">
<Button {...TOOLPAD_PROPS1} />
Expand Down
2 changes: 2 additions & 0 deletions docs/data/toolpad/studio/components/data-grid/DataGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable filenames/match-exported */
import * as React from 'react';
import { AppHostProvider } from '@toolpad/studio-runtime';
import { DataGrid } from '@toolpad/studio-components';
Expand Down Expand Up @@ -26,6 +27,7 @@ const COLUMNS = [
{ field: 'Location', type: 'string' },
];

// TODO fix name
export default function BasicDataGrid() {
return (
<AppHostProvider>
Expand Down
4 changes: 3 additions & 1 deletion docs/data/toolpad/studio/components/data-grid/DataGrid_hidetoolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@ const COLUMNS = [
{ field: 'Location', type: 'string' },
];

export default function BasicDataGrid() {
// TODO fix me
// eslint-disable-next-line @typescript-eslint/naming-convention
export default function DataGrid_hidetoolbar() {
return (
<AppHostProvider>
<DataGrid
Expand Down
4 changes: 3 additions & 1 deletion docs/data/toolpad/studio/components/data-grid/DataGrid_standard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@ const COLUMNS = [
{ field: 'Location', type: 'string' },
];

export default function BasicDataGrid() {
// TODO fix me
// eslint-disable-next-line @typescript-eslint/naming-convention
export default function DataGrid_standard() {
return (
<AppHostProvider>
<DataGrid rows={ROWS} columns={COLUMNS} height={300} density="standard" />
Expand Down
2 changes: 1 addition & 1 deletion docs/data/toolpad/studio/components/data-grid/ProDataGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const COLUMNS = [
{ field: 'Location', type: 'string' },
];

export default function BasicDataGrid() {
export default function ProDataGrid() {
return (
<AppHostProvider plan="pro">
<DataGrid rows={ROWS} columns={COLUMNS} height={300} />
Expand Down
2 changes: 2 additions & 0 deletions docs/data/toolpad/studio/components/date-picker/DatePicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
/* eslint-disable filenames/match-exported */
import * as React from 'react';
import { DatePicker } from '@toolpad/studio-components';

// TODO fix name
export default function BasicDatepicker() {
return <DatePicker label="Enter date" size="small" />;
}
4 changes: 2 additions & 2 deletions docs/data/toolpad/studio/components/date-picker/DatePickerDisabled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import * as React from 'react';
import { DatePicker } from '@toolpad/studio-components';
import { Stack } from '@mui/material';
import Stack from '@mui/material/Stack';

export default function BasicButton() {
export default function DatePickerDisabled() {
return (
<Stack spacing={2} direction="row" alignItems="center">
<DatePicker variant="outlined" size="small" disabled label="Disabled" />
Expand Down
4 changes: 2 additions & 2 deletions docs/data/toolpad/studio/components/date-picker/DatePickerFormat.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import * as React from 'react';
import { DatePicker } from '@toolpad/studio-components';
import { Stack } from '@mui/material';
import Stack from '@mui/material/Stack';

export default function BasicButton() {
export default function DatePickerFormat() {
return (
<Stack spacing={2} direction="row" alignItems="center">
<DatePicker
Expand Down
4 changes: 2 additions & 2 deletions docs/data/toolpad/studio/components/date-picker/DatePickerSize.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import * as React from 'react';
import { DatePicker } from '@toolpad/studio-components';
import { Stack } from '@mui/material';
import Stack from '@mui/material/Stack';

export default function BasicButton() {
export default function DatePickerSize() {
return (
<Stack spacing={2} direction="row" alignItems="center">
<DatePicker size="small" variant="outlined" label="Small" />
Expand Down
4 changes: 2 additions & 2 deletions docs/data/toolpad/studio/components/date-picker/DatePickerVariant.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import * as React from 'react';
import { DatePicker } from '@toolpad/studio-components';
import { Stack } from '@mui/material';
import Stack from '@mui/material/Stack';

export default function BasicButton() {
export default function DatePickerVariant() {
return (
<Stack spacing={2} direction="row" alignItems="center">
<DatePicker size="small" variant="outlined" label="Outlined" />
Expand Down
2 changes: 2 additions & 0 deletions docs/data/toolpad/studio/components/list/List.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
/* eslint-disable filenames/match-exported */
import * as React from 'react';
import { List } from '@toolpad/studio-components';

// TODO fix name
Janpot marked this conversation as resolved.
Show resolved Hide resolved
export default function BasicList() {
return <List itemCount={2} />;
}
2 changes: 2 additions & 0 deletions docs/data/toolpad/studio/components/text-field/TextField.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
/* eslint-disable filenames/match-exported */
import * as React from 'react';
import { TextField } from '@toolpad/studio-components';

// TODO fix name
export default function BasicDatepicker() {
return (
<TextField label="Enter name" size="small" placeholder="This is a placeholder" />
Expand Down
4 changes: 2 additions & 2 deletions docs/data/toolpad/studio/components/text-field/TextFieldDisabled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import * as React from 'react';
import { TextField } from '@toolpad/studio-components';
import { Stack } from '@mui/material';
import Stack from '@mui/material/Stack';

export default function BasicButton() {
export default function TextFieldDisabled() {
return (
<Stack spacing={2} direction="row" alignItems="center">
<TextField variant="outlined" size="small" disabled label="Disabled" />
Expand Down
4 changes: 2 additions & 2 deletions docs/data/toolpad/studio/components/text-field/TextFieldSize.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import * as React from 'react';
import { TextField } from '@toolpad/studio-components';
import { Stack } from '@mui/material';
import Stack from '@mui/material/Stack';

export default function BasicButton() {
export default function TextFieldSize() {
return (
<Stack spacing={2} direction="row" alignItems="center">
<TextField size="small" variant="outlined" label="Small" />
Expand Down
4 changes: 2 additions & 2 deletions docs/data/toolpad/studio/components/text-field/TextFieldVariant.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import * as React from 'react';
import { TextField } from '@toolpad/studio-components';
import { Stack } from '@mui/material';
import Stack from '@mui/material/Stack';

export default function BasicButton() {
export default function TextFieldVariant() {
return (
<Stack spacing={2} direction="row" alignItems="center">
<TextField size="small" variant="outlined" label="Outlined" />
Expand Down
1 change: 1 addition & 0 deletions examples/with-prisma-data-provider/toolpad/prisma.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable no-underscore-dangle */
Copy link
Member

@Janpot Janpot Apr 22, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In general we don't add eslint disable comments in examples, but turn off the rule in an eslint override.

Reason is that eslint is not used/installed in the example, so it shouldn't contain eslint comments after I download it.

import { PrismaClient, Prisma } from '@prisma/client';

// Reuse existing PrismaClient instance during development
Expand Down
1 change: 1 addition & 0 deletions examples/with-prisma/toolpad/resources/functions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable no-underscore-dangle */
import { PrismaClient, Prisma } from '@prisma/client';

// Reuse existing PrismaClient instance during development
Expand Down
Loading