Tab container (#421)

* Update packages

* -   (bluefox) Corrected TabContainer

* Used new eslint-config

* Formatting

MIGRATION_6_7.md

@@ -36,3 +36,21 @@ Before:
 ## SelectID dialog
 
 `SelectID` dialog now requires `theme` property. Without this property, the dialog will crash.
+
+## Grid => Grid2
+
+Replace all `Grid` with `Grid2` component and remove `item` property as it not needed anymore.
+
+Attributes xs, sm, md, lg, xl are now in `size` property.
+
+Before:
+
+```jsx
+<Grid item xs={6} sm={4} md={3}>
+<Grid/>
+```
+
+```jsx
+<Grid2 size={{ xs: 6, sm: 4, md: 3 }}>
+<Grid2/>
+```

README.md

@@ -698,6 +698,10 @@ You can find the migration instructions:
 
 ## Changelog
 
+### **WORK IN PROGRESS**
+
+-   (bluefox) Corrected TabContainer
+
 ### 7.1.0 (2024-09-12)
 
 -   (bluefox) Optimized the icon picker

eslint.config.mjs

@@ -1,6 +1,4 @@
-import config from '@iobroker/eslint-config';
-import reactPlugin from 'eslint-plugin-react';
-import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import config, { reactConfig } from '@iobroker/eslint-config';
 
 // disable temporary the rule 'jsdoc/require-param' and enable 'jsdoc/require-jsdoc'
 config.forEach(rule => {
@@ -9,38 +7,5 @@ config.forEach(rule => {
         rule.rules['jsdoc/require-param'] = 'off';
     }
 });
-config.push({
-    rules: {
-        'class-methods-use-this': 'warn',
-    }
-})
-config.push({
-    plugins: {
-        react: reactPlugin,
-        'react-hooks': reactHooksPlugin,
-    },
-    rules: {
-        ...reactPlugin.configs.recommended.rules,
-        ...reactHooksPlugin.configs.recommended.rules,
-        'react/no-unused-class-component-methods': 'warn',
-        'react/prop-types': 'off',
-        '@typescript-eslint/restrict-template-expressions': 'off',
-        'react/no-is-mounted': 'off',
-    },
-    languageOptions: {
-        parserOptions: {
-            ecmaFeatures: {
-                jsx: true,
-            },
-            ecmaVersion: 12,
-            jsxPragma: 'React', // for @typescript/eslint-parser
-        }
-    },
-    settings: {
-        react: {
-            version: 'detect', // Automatically detect the React version
-        },
-    },
-});
 
-export default [...config];
+export default [...config, ...reactConfig];

package.json

@@ -64,7 +64,7 @@
         "@alcalzone/release-script": "^3.8.0",
         "@alcalzone/release-script-plugin-license": "^3.7.0",
         "@iobroker/build-tools": "^1.0.2",
-        "@iobroker/eslint-config": "^0.1.4",
+        "@iobroker/eslint-config": "^0.1.5",
         "@babel/core": "^7.25.2",
         "@babel/plugin-proposal-class-properties": "^7.18.6",
         "@babel/plugin-transform-runtime": "^7.25.4",
@@ -76,8 +76,6 @@
         "@types/react-color": "^3.0.12",
         "ajv": "^8.17.1",
         "eslint": "^9.10.0",
-        "eslint-plugin-react": "^7.36.0",
-        "eslint-plugin-react-hooks": "^5.1.0-rc.0",
         "ts-node": "^10.9.2",
         "typescript": "^5.6.2"
     }

src/Components/TabContainer.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Grid, Paper } from '@mui/material';
+import { Grid2, Paper } from '@mui/material';
 
 const styles: Record<string, React.CSSProperties> = {
     root: {
@@ -42,14 +42,14 @@ function TabContainer(props: TabContainerProps): React.JSX.Element {
             onKeyDown={props.onKeyDown}
             tabIndex={props.tabIndex}
         >
-            <Grid
+            <Grid2
                 container
                 direction="column"
                 wrap="nowrap"
                 sx={styles.container}
             >
                 {props.children}
-            </Grid>
+            </Grid2>
         </Paper>
     );
 }

tasksExample.js

@@ -3,7 +3,7 @@
  *
  * MIT License
  *
- **/
+ */
 'use strict';
 
 const fs = require('node:fs');