chore: unify linting and formatting configs

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "jsxSingleQuote": true,
+  "bracketSpacing": true
+}

.stylelintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "stylelint-config-recommended-scss"
-}
+  "extends": [
+    "stylelint-config-recommended-scss",
+    "stylelint-config-prettier-scss"
+  ]
+}

commitlint.config.js

@@ -1,10 +1,11 @@
 module.exports = {
   extends: ['@commitlint/config-conventional'],
   rules: {
+    'header-max-length': [2, 'always', 50], // Enforce 50 character max for commit title
+    'body-max-line-length': [2, 'always', 72], // Wrap body lines at 72 characters
     'subject-case': [0, 'always'],
     'footer-max-length': [0, 'always'],
     'footer-max-line-length': [0, 'always'],
     'body-max-length': [0, 'always'],
-    'body-max-line-length': [0, 'always'],
   },
 };

config/cypress.webpack.config.js

@@ -1,38 +1,34 @@
-/* global require, module, __dirname */
 const { resolve } = require('path');
 const config = require('@redhat-cloud-services/frontend-components-config');
 
 const { config: webpackConfig, plugins } = config({
-    rootFolder: resolve(__dirname, '../')
+  rootFolder: resolve(__dirname, '../'),
 });
 
 webpackConfig.module.rules.push({
-    resolve: {
-        alias: {
-            '@redhat-cloud-services/frontend-components/useChrome': resolve(
-                __dirname,
-                './overrideChrome.js'
-            ),
-            '../useChrome': resolve(
-                __dirname,
-                './overrideChrome.js'
-            )
-        }
-    }
+  resolve: {
+    alias: {
+      '@redhat-cloud-services/frontend-components/useChrome': resolve(
+        __dirname,
+        './overrideChrome.js',
+      ),
+      '../useChrome': resolve(__dirname, './overrideChrome.js'),
+    },
+  },
 });
 
 module.exports = {
-    ...webpackConfig,
-    plugins,
-    module: {
-        ...webpackConfig.module,
-        rules: [
-            ...webpackConfig.module.rules,
-            {
-                test: /\.(?:js|mjs|cjs)$/,
-                exclude: /(node_modules|bower_components)/i,
-                use: ['babel-loader']
-            }
-        ]
-    }
+  ...webpackConfig,
+  plugins,
+  module: {
+    ...webpackConfig.module,
+    rules: [
+      ...webpackConfig.module.rules,
+      {
+        test: /\.(?:js|mjs|cjs)$/,
+        exclude: /(node_modules|bower_components)/i,
+        use: ['babel-loader'],
+      },
+    ],
+  },
 };

eslint.config.mjs

@@ -0,0 +1,130 @@
+import react from 'eslint-plugin-react';
+import prettier from 'eslint-plugin-prettier';
+import unusedImports from 'eslint-plugin-unused-imports';
+import importPlugin from 'eslint-plugin-import';
+import cypress from 'eslint-plugin-cypress';
+import globals from 'globals';
+import babelParser from '@babel/eslint-parser';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  {
+    ignores: ['node_modules/*', 'dist/*', 'coverage-jest/*', 'coverage-cypress/*'],
+  },
+  ...compat.extends(
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:cypress/recommended',
+    'prettier',
+  ),
+  {
+    plugins: {
+      react,
+      prettier,
+      'unused-imports': unusedImports,
+      cypress,
+      import: importPlugin,
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.jest,
+        insights: true,
+        React: true,
+        mount: true, // Set to true to allow it to be used without definition
+      },
+
+      parser: babelParser,
+      ecmaVersion: 2020,
+      sourceType: 'module',
+
+      parserOptions: {
+        requireConfigFile: true,
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+
+    rules: {
+      'react/jsx-curly-brace-presence': [
+        'error',
+        {
+          props: 'never',
+          children: 'never',
+        },
+      ],
+
+      'arrow-body-style': ['error', 'as-needed'],
+      'react/react-in-jsx-scope': 'off',
+      camelcase: 'off',
+      'spaced-comment': 'error',
+      'prettier/prettier': ['warn', { singleQuote: true }],
+      'import/no-duplicates': 'error', // This rule provides auto-fix capability
+      'unused-imports/no-unused-imports': 'error',
+      'unused-imports/no-unused-vars': ['warn'],
+      'no-empty-pattern': ['error', { allowObjectPatternsAsParameters: true }],
+
+      // React-specific rules from the original config
+      'react/boolean-prop-naming': 'error',
+      'react/no-children-prop': 'error',
+      'react/display-name': 'off',
+      'react/no-danger': 'error',
+      'react/no-deprecated': 'error',
+      'react/no-direct-mutation-state': 'error',
+      'react/no-typos': 'error',
+      'react/no-unused-prop-types': 'error',
+      'react/no-unused-state': 'error',
+      'react/prefer-es6-class': 'error',
+      'react/prefer-read-only-props': 'error',
+      'react/require-render-return': 'error',
+      'react/state-in-constructor': 'error',
+      'react/style-prop-object': 'error',
+      'react/jsx-boolean-value': 'error',
+      'react/jsx-handler-names': 'error',
+      'react/sort-comp': [
+        'error',
+        {
+          order: ['static-methods', 'lifecycle', 'everything-else', '/^handle.+$/', 'render'],
+        },
+      ],
+
+      // Code quality rules (not formatting)
+      curly: ['error', 'all'],
+      'dot-notation': 'error',
+      eqeqeq: 'error',
+      'no-bitwise': 'error',
+      'no-caller': 'error',
+      'no-prototype-builtins': 'off',
+      'no-use-before-define': ['error', { functions: false }],
+      'no-undef': 'error',
+      'no-unused-vars': 'off', // Handled by unused-imports plugin
+      'no-var': 'error',
+      'no-with': 'error',
+      'object-shorthand': 'error',
+      'one-var': ['error', 'never'],
+      'vars-on-top': 'error',
+      'wrap-iife': 'error',
+      yoda: ['error', 'never'],
+    },
+  },
+];