Merge branch 'master' of github.com:mantinedev/mantine into 7.13

mantinedev · Sep 2, 2024 · 2304030 · 2304030
2 parents d21d85e + 00a94ce
commit 2304030
Show file tree

Hide file tree

Showing 202 changed files with 1,684 additions and 1,167 deletions.
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/apps/help.mantine.dev/src/components/MdxLayout/TableOfContents/get-headings.ts b/apps/help.mantine.dev/src/components/MdxLayout/TableOfContents/get-headings.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-loop-func */
 export interface Heading {
   depth: number;
   content: string;

diff --git a/...ombobox-examples/examples/AutocompleteSelectFirstOption/AutocompleteSelectFirstOption.tsx b/...ombobox-examples/examples/AutocompleteSelectFirstOption/AutocompleteSelectFirstOption.tsx
@@ -28,7 +28,7 @@ export function AutocompleteSelectFirstOption() {
   ));
 
   useEffect(() => {
-    // we need to wait for options to render before we can select first one
+    // We need to wait for options to render before we can select first one
     combobox.selectFirstOption();
   }, [value]);
 

diff --git a/apps/mantine.dev/src/components/CssVariablesList/CssVariablesList.tsx b/apps/mantine.dev/src/components/CssVariablesList/CssVariablesList.tsx
@@ -5,21 +5,27 @@ import { CssVariableColorSwatch } from './CssVariableColorSwatch/CssVariableColo
 export function CssVariablesList() {
   const resolvedVariables = defaultCssVariablesResolver(DEFAULT_THEME);
   const variables = keys(resolvedVariables.variables).map((key) => [
-    <Code style={{ whiteSpace: 'nowrap' }}>{key}</Code>,
+    <Code style={{ whiteSpace: 'nowrap' }} key="code">
+      {key}
+    </Code>,
     resolvedVariables.variables[key],
-    <CssVariableColorSwatch variable={resolvedVariables.variables[key]} />,
+    <CssVariableColorSwatch variable={resolvedVariables.variables[key]} key="swatch" />,
   ]);
 
   const lightVariables = keys(resolvedVariables.light).map((key) => [
-    <Code style={{ whiteSpace: 'nowrap' }}>{key}</Code>,
+    <Code style={{ whiteSpace: 'nowrap' }} key="code">
+      {key}
+    </Code>,
     resolvedVariables.light[key],
-    <CssVariableColorSwatch variable={resolvedVariables.light[key]} />,
+    <CssVariableColorSwatch variable={resolvedVariables.light[key]} key="swatch" />,
   ]);
 
   const darkVariables = keys(resolvedVariables.dark).map((key) => [
-    <Code style={{ whiteSpace: 'nowrap' }}>{key}</Code>,
+    <Code style={{ whiteSpace: 'nowrap' }} key="code">
+      {key}
+    </Code>,
     resolvedVariables.dark[key],
-    <CssVariableColorSwatch variable={resolvedVariables.dark[key]} />,
+    <CssVariableColorSwatch variable={resolvedVariables.dark[key]} key="swatch" />,
   ]);
 
   return (

diff --git a/apps/mantine.dev/src/components/CssVariablesTable/CssVariablesTable.tsx b/apps/mantine.dev/src/components/CssVariablesTable/CssVariablesTable.tsx
@@ -9,7 +9,9 @@ export function CssVariablesTable({ variables }: CssVariablesTableProps) {
   const resolvedVariables = defaultCssVariablesResolver(DEFAULT_THEME);
 
   const data = variables.map((variable) => [
-    <Code style={{ whiteSpace: 'nowrap' }}>{variable}</Code>,
+    <Code style={{ whiteSpace: 'nowrap' }} key="code">
+      {variable}
+    </Code>,
     resolvedVariables.variables[variable as keyof typeof resolvedVariables.variables],
   ]);
 

diff --git a/apps/mantine.dev/src/components/MdxProvider/MdxLink/MdxLink.tsx b/apps/mantine.dev/src/components/MdxProvider/MdxLink/MdxLink.tsx
@@ -3,9 +3,9 @@ import { Anchor } from '@mantine/core';
 import classes from './MdxLink.module.css';
 
 export function MdxLink({ href, ...others }: React.ComponentPropsWithoutRef<'a'>) {
-  const replaced = href?.replace('https://mantine.dev', '')!;
+  const replaced = href?.replace('https://mantine.dev', '');
 
-  if (!replaced?.startsWith('http') && replaced.trim().length > 0) {
+  if (replaced && !replaced?.startsWith('http') && replaced.trim().length > 0) {
     return <Anchor className={classes.link} component={Link} href={replaced} {...others} />;
   }
 

diff --git a/apps/mantine.dev/src/components/Shell/Navbar/NavbarLinksGroup/NavbarLinksGroup.tsx b/apps/mantine.dev/src/components/Shell/Navbar/NavbarLinksGroup/NavbarLinksGroup.tsx
@@ -51,7 +51,7 @@ interface NavbarLinksGroupProps {
 export function NavbarLinksGroup({ data, onNavbarClose }: NavbarLinksGroupProps) {
   const router = useRouter();
   const [opened, setOpened] = useState(hasActiveLink(data, router.pathname));
-  // const [opened, setOpened] = useState(true);
+  // Const [opened, setOpened] = useState(true);
   const itemRefs = useRef<Record<string, HTMLAnchorElement>>({});
 
   const scrollToLink = (pathname: string) => {

diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,25 @@
+const mantine = require('eslint-config-mantine');
+const jest = require('eslint-plugin-jest');
+const tseslint = require('typescript-eslint');
+
+module.exports = tseslint.config(
+  ...mantine,
+  {
+    languageOptions: {
+      parserOptions: {
+        project: './tsconfig.eslint.json',
+      },
+    },
+  },
+  { ignores: ['**/*.{mjs,cjs,js,d.ts,d.mts}'] },
+  {
+    // Jest specific rules
+    plugins: { jest },
+    rules: {
+      ...jest.configs['flat/recommended'].rules,
+      'jest/no-export': 'off',
+      'jest/expect-expect': 'off',
+      'jest/valid-title': 'off',
+    },
+  }
+);
diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
     "jest": "jest",
     "typecheck": "tsc --noEmit && cd apps/mantine.dev && npm run typecheck && cd ../help.mantine.dev && npm run typecheck",
     "lint": "npm run eslint && npm run stylelint",
-    "eslint": "eslint packages apps/mantine.dev/src apps/help.mantine.dev/src scripts --ext .ts,.tsx --cache",
+    "eslint": "eslint packages apps/mantine.dev/src apps/help.mantine.dev/src scripts --cache",
     "stylelint": "stylelint \"**/*.css\" --cache",
     "syncpack": "syncpack list-mismatches",
     "syncpack:format": "syncpack format",
@@ -114,6 +114,7 @@
     "@babel/preset-env": "^7.23.3",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
+    "@eslint/js": "^9.9.1",
     "@hello-pangea/dnd": "^16.3.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
     "@rollup/plugin-alias": "^5.0.1",
@@ -127,6 +128,7 @@
     "@testing-library/react": "15.0.6",
     "@testing-library/user-event": "14.5.2",
     "@types/chroma-js": "^2.4.3",
+    "@types/eslint": "^9",
     "@types/fs-extra": "^11.0.4",
     "@types/gh-pages": "^5.0.1",
     "@types/jest": "^29.5.8",
@@ -139,23 +141,17 @@
     "@types/rimraf": "^3.0.2",
     "@types/signale": "^1",
     "@types/yargs": "^17.0.31",
-    "@typescript-eslint/eslint-plugin": "^6.8.0",
-    "@typescript-eslint/parser": "^6.8.0",
     "babel-loader": "^9.1.3",
     "chalk": "^5.3.0",
     "css-loader": "^6.8.1",
     "cssnano": "^6.0.1",
     "esbuild": "^0.19.5",
     "esbuild-jest": "^0.5.0",
-    "eslint": "^8.51.0",
-    "eslint-config-airbnb": "19.0.4",
-    "eslint-config-airbnb-typescript": "^17.1.0",
-    "eslint-config-mantine": "3.1.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jest": "^27.6.0",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint": "^9.9.1",
+    "eslint-config-mantine": "^4.0.1",
+    "eslint-plugin-jest": "^28.8.2",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-react": "^7.35.0",
     "execa": "^8.0.1",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.1.1",
@@ -193,6 +189,7 @@
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "tsx": "^4.7.3",
     "typescript": "5.3.3",
+    "typescript-eslint": "^8.3.0",
     "version-next": "^1.0.2",
     "webpack": "^5.89.0",
     "wrangler": "^3.34.2",

diff --git a/packages/@docs/demos/src/demos/carousel/Carousel.demo.progress.tsx b/packages/@docs/demos/src/demos/carousel/Carousel.demo.progress.tsx
@@ -58,7 +58,9 @@ function Demo() {
   const [embla, setEmbla] = useState<Embla | null>(null);
 
   const handleScroll = useCallback(() => {
-    if (!embla) return;
+    if (!embla) {
+      return;
+    }
     const progress = Math.max(0, Math.min(1, embla.scrollProgress()));
     setScrollProgress(progress * 100);
   }, [embla, setScrollProgress]);

diff --git a/packages/@docs/demos/src/demos/charts/AreaChart/AreaChart.demo.customTooltip.tsx b/packages/@docs/demos/src/demos/charts/AreaChart/AreaChart.demo.customTooltip.tsx
@@ -56,7 +56,9 @@ interface ChartTooltipProps {
 }
 
 function ChartTooltip({ label, payload }: ChartTooltipProps) {
-  if (!payload) return null;
+  if (!payload) {
+    return null;
+  }
 
   return (
     <Paper px="md" py="sm" withBorder shadow="md" radius="md">

diff --git a/packages/@docs/demos/src/demos/charts/BarChart/BarChart.demo.customTooltip.tsx b/packages/@docs/demos/src/demos/charts/BarChart/BarChart.demo.customTooltip.tsx
@@ -55,7 +55,9 @@ interface ChartTooltipProps {
 }
 
 function ChartTooltip({ label, payload }: ChartTooltipProps) {
-  if (!payload) return null;
+  if (!payload) {
+    return null;
+  }
 
   return (
     <Paper px="md" py="sm" withBorder shadow="md" radius="md">

diff --git a/packages/@docs/demos/src/demos/charts/LineChart/LineChart.demo.customTooltip.tsx b/packages/@docs/demos/src/demos/charts/LineChart/LineChart.demo.customTooltip.tsx
@@ -55,7 +55,9 @@ interface ChartTooltipProps {
 }
 
 function ChartTooltip({ label, payload }: ChartTooltipProps) {
-  if (!payload) return null;
+  if (!payload) {
+    return null;
+  }
 
   return (
     <Paper px="md" py="sm" withBorder shadow="md" radius="md">

diff --git a/packages/@docs/demos/src/demos/charts/ScatterChart/ScatterChart.demo.customTooltip.tsx b/packages/@docs/demos/src/demos/charts/ScatterChart/ScatterChart.demo.customTooltip.tsx
@@ -47,7 +47,9 @@ interface ChartTooltipProps {
 }
 
 function ChartTooltip({ payload }: ChartTooltipProps) {
-  if (!payload) return null;
+  if (!payload) {
+    return null;
+  }
 
   return (
     <Paper px="md" py="sm" withBorder shadow="md" radius="md">

diff --git a/packages/@docs/demos/src/demos/core/Combobox/Combobox.demo.selectFirstOption.tsx b/packages/@docs/demos/src/demos/core/Combobox/Combobox.demo.selectFirstOption.tsx
@@ -83,7 +83,7 @@ function Demo() {
   ));
 
   useEffect(() => {
-    // we need to wait for options to render before we can select first one
+    // We need to wait for options to render before we can select first one
     combobox.selectFirstOption();
   }, [value]);
 

diff --git a/packages/@docs/demos/src/demos/core/Menu/Menu.demo.navigation.tsx b/packages/@docs/demos/src/demos/core/Menu/Menu.demo.navigation.tsx
@@ -27,7 +27,7 @@ function Demo() {
 function Demo() {
   const menus = Array(4)
     .fill(0)
-    .map((e, i) => (
+    .map((_, i) => (
       <Menu
         key={i}
         trigger="click-hover"

diff --git a/packages/@docs/demos/src/demos/core/PasswordInput/PasswordInput.demo.visibilityIcon.tsx b/packages/@docs/demos/src/demos/core/PasswordInput/PasswordInput.demo.visibilityIcon.tsx
@@ -6,24 +6,34 @@ const code = `
 import { PasswordInput } from '@mantine/core';
 import { IconEyeCheck, IconEyeOff } from '@tabler/icons-react';
 
+const VisibilityToggleIcon = ({ reveal }: { reveal: boolean }) =>
+  reveal ? (
+    <IconEyeOff style={{ width: 'var(--psi-icon-size)', height: 'var(--psi-icon-size)' }} />
+  ) : (
+    <IconEyeCheck style={{ width: 'var(--psi-icon-size)', height: 'var(--psi-icon-size)' }} />
+  );
+
 function Demo() {
   return (
     <PasswordInput
+      maw={320}
+      mx="auto"
       label="Change visibility toggle icon"
       placeholder="Change visibility toggle icon"
       defaultValue="secret"
-      visibilityToggleIcon={({ reveal }) =>
-        reveal ? (
-          <IconEyeOff style={{ width: 'var(--psi-icon-size)', height: 'var(--psi-icon-size)' }} />
-        ) : (
-          <IconEyeCheck style={{ width: 'var(--psi-icon-size)', height: 'var(--psi-icon-size)' }} />
-        )
-      }
+      visibilityToggleIcon={VisibilityToggleIcon}
     />
   );
 }
 `;
 
+const VisibilityToggleIcon = ({ reveal }: { reveal: boolean }) =>
+  reveal ? (
+    <IconEyeOff style={{ width: 'var(--psi-icon-size)', height: 'var(--psi-icon-size)' }} />
+  ) : (
+    <IconEyeCheck style={{ width: 'var(--psi-icon-size)', height: 'var(--psi-icon-size)' }} />
+  );
+
 function Demo() {
   return (
     <PasswordInput
@@ -32,13 +42,7 @@ function Demo() {
       label="Change visibility toggle icon"
       placeholder="Change visibility toggle icon"
       defaultValue="secret"
-      visibilityToggleIcon={({ reveal }) =>
-        reveal ? (
-          <IconEyeOff style={{ width: 'var(--psi-icon-size)', height: 'var(--psi-icon-size)' }} />
-        ) : (
-          <IconEyeCheck style={{ width: 'var(--psi-icon-size)', height: 'var(--psi-icon-size)' }} />
-        )
-      }
+      visibilityToggleIcon={VisibilityToggleIcon}
     />
   );
 }

diff --git a/packages/@docs/demos/src/demos/core/SimpleGrid/SimpleGrid.demo.container.tsx b/packages/@docs/demos/src/demos/core/SimpleGrid/SimpleGrid.demo.container.tsx
@@ -29,7 +29,7 @@ function Demo() {
 function Demo() {
   return (
     // Wrapper div is added for demonstration purposes only,
-    // it is not required in real projects
+    // It is not required in real projects
     <div style={{ resize: 'horizontal', overflow: 'hidden', maxWidth: '100%' }}>
       <SimpleGrid
         type="container"

diff --git a/packages/@docs/demos/src/demos/emotion/Emotion.demo.composition.tsx b/packages/@docs/demos/src/demos/emotion/Emotion.demo.composition.tsx
@@ -53,10 +53,10 @@ function Demo() {
 
 const useStyles = createStyles((theme, _, u) => ({
   button: {
-    // assign reference to selector
+    // Assign reference to selector
     ref: u.ref('button'),
 
-    // and add any other properties
+    // And add any other properties
     backgroundColor: theme.colors.blue[6],
     color: theme.white,
     padding: `${theme.spacing.sm} ${theme.spacing.lg}`,
@@ -78,7 +78,7 @@ const useStyles = createStyles((theme, _, u) => ({
       backgroundColor: theme.colors.dark[8],
     },
 
-    // reference button with nested selector
+    // Reference button with nested selector
     [`&:hover .${u.ref('button')}`]: {
       backgroundColor: theme.colors.violet[6],
     },

diff --git a/packages/@docs/demos/src/demos/emotion/Emotion.demo.pseudo.tsx b/packages/@docs/demos/src/demos/emotion/Emotion.demo.pseudo.tsx
@@ -67,7 +67,7 @@ const useStyles = createStyles((theme) => ({
     '&:not(:first-of-type)': {
       backgroundColor: theme.colors.violet[6],
 
-      // pseudo-classes can be nested
+      // Pseudo-classes can be nested
       '&:hover': {
         backgroundColor: theme.colors.violet[9],
       },

diff --git a/packages/@docs/demos/src/demos/form/Form.demo.blurFieldValidation.tsx b/packages/@docs/demos/src/demos/form/Form.demo.blurFieldValidation.tsx
@@ -82,12 +82,12 @@ function Demo() {
     validateInputOnBlur: [
       'email',
       'name',
-      // use FORM_INDEX to reference fields indices
+      // Use FORM_INDEX to reference fields indices
       `jobs.${FORM_INDEX}.title`,
     ],
     initialValues: { name: '', email: '', age: 0, jobs: [{ title: '' }, { title: '' }] },
 
-    // functions will be used to validate values at corresponding key
+    // Functions will be used to validate values at corresponding key
     validate: {
       name: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null),
       email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'),

diff --git a/packages/@docs/demos/src/demos/form/Form.demo.blurValidation.tsx b/packages/@docs/demos/src/demos/form/Form.demo.blurValidation.tsx
@@ -60,7 +60,7 @@ function Demo() {
     validateInputOnBlur: true,
     initialValues: { name: '', email: '', age: 0 },
 
-    // functions will be used to validate values at corresponding key
+    // Functions will be used to validate values at corresponding key
     validate: {
       name: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null),
       email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'),