eslint-config-vylda-vanilla-react 4.0.0

package/index.js

@@ -0,0 +1,150 @@
+import {
+  barrels, barrelsFiles, customs, errors, es6, getImportConfig, ignores, mapFiles, node,
+  plus, strict, stylistic, variables,
+} from 'eslint-config-vylda-vanilla';
+import config, {
+  files, plugins, reactPlugins, refreshFiles,
+} from './eslint.config.mjs';
+import bestPractices from './rules/best-practices.mjs';
+import * as constants from './rules/constants.mjs';
+import {
+  defaultImportExtensions,
+  defaultImportExtensionsRuleGranularOption,
+  defaultImportNoExtraneousDependenciesDevDependencies,
+  defaultImportResolverNodeExtensions,
+} from './rules/imports.mjs';
+import {
+  a11y, hooks, perfectionist, react, reactStylistic, refresh,
+} from './rules/index.mjs';
+
+const dineddd = defaultImportNoExtraneousDependenciesDevDependencies;
+const diergo = defaultImportExtensionsRuleGranularOption;
+
+const defaultOptions = {
+  barrelsFiles,
+  files,
+  importExtensions: defaultImportExtensions,
+  importExtensionsRuleGranularOption: diergo,
+  importNoExtraneousDependenciesDevDependencies: dineddd,
+  importResolverNodeExtensions: defaultImportResolverNodeExtensions,
+  plugins,
+  refreshFiles,
+};
+
+/**
+ * Create Vanilla ESLint configs
+ * @param {Array.<Object>} importConfigs - Array of import configs
+ * @returns {Array.<Object>} - ESLint Flat config
+ */
+const createVanillaConfigs = (importConfigs) => [
+  ...importConfigs,
+  ...es6,
+  ...strict,
+  ...stylistic,
+  ...bestPractices,
+  ...errors,
+  ...node,
+  ...variables,
+  ...customs,
+  ...perfectionist,
+  ...plus,
+];
+
+const reactConfigs = [
+  ...a11y,
+  ...hooks,
+  ...react,
+  ...reactStylistic,
+  ...refresh,
+];
+
+/**
+ * returns eslint config for typescript
+ * @param {string} baseDir - base directory for tsconfig.json
+ * @param {object} [options={}] - options
+ * @param {Array.<string>} [options.barrelsFiles=['**\/index.{js,mjs}']] - file patterns for barrel files
+ * @param {Array.<string>} [options.files=['**\/*.{cjs,js,jsx,mjs}']] - file patterns to lint
+ * @param {Array.<string>} [options.importExtensions=['.js', '.jsx', '.mjs']] - extensions for module settings import/extensions
+ * @param {Object.<string, string>} [options.importExtensionsRuleGranularOption] - granural oprions for import/extensions rule; for default values see Readme.md
+ * @param {Array.<string>} [options.importNoExtraneousDependenciesDevDependencies=['see Readme.md']] - devDependencies for import/no-extraneous-dependencies rule
+ * @param {Array.<string>} [options.importResolverNodeExtensions=['.js', '.jsx', '.json', '.mjs']] - extensions for module settings import/resolver.node.extensions
+ * @param {Object.<string, Object>} [options.plugins] - default plugins; for default values see Readme.md
+ * @param {Array.<string>} [options.refreshFiles=['**\/*.jsx']] - file patterns for refresh rules
+ * @returns {Array.<Object>} - ESLint Flat config
+ */
+const getConfig = (options = defaultOptions) => {
+  const {
+    barrelsFiles: customBarrelsFiles = barrelsFiles,
+    files: customFiles = files,
+    importExtensions: ie = defaultImportExtensions,
+    importExtensionsRuleGranularOption: iergo = diergo,
+    importNoExtraneousDependenciesDevDependencies: ineddd = dineddd,
+    importResolverNodeExtensions: irne = defaultImportResolverNodeExtensions,
+    plugins: customPlugins = plugins,
+    refreshFiles: customRefreshFiles = refreshFiles,
+  } = options;
+
+  const importConfigs = getImportConfig({
+    importExtensions: ie,
+    importExtensionsRuleGranularOption: iergo,
+    importNoExtraneousDependenciesDevDependencies: ineddd,
+    importResolverNodeExtensions: irne,
+  });
+
+  const vanillaConfigs = createVanillaConfigs(importConfigs);
+  const configsWithFiles = mapFiles(vanillaConfigs, customFiles);
+  const reactConfigWithFiles = mapFiles(reactConfigs, customRefreshFiles);
+  const barrelsConfigWithFiles = mapFiles(barrels, customBarrelsFiles);
+
+  const eslintConfig = [
+    {
+      name: 'vanilla-react/base',
+      plugins: customPlugins,
+    },
+    ...configsWithFiles,
+    ...reactConfigWithFiles,
+    ...barrelsConfigWithFiles,
+    ...ignores,
+  ];
+
+  return eslintConfig;
+};
+
+const vanillaConfigs = createVanillaConfigs([]);
+
+export {
+  a11y,
+  barrels,
+  barrelsFiles,
+  bestPractices,
+  constants,
+  customs,
+  defaultImportExtensions,
+  defaultImportExtensionsRuleGranularOption,
+  defaultImportNoExtraneousDependenciesDevDependencies,
+  defaultImportResolverNodeExtensions,
+  errors,
+  es6,
+  files,
+  getConfig,
+  getImportConfig,
+  hooks,
+  ignores,
+  mapFiles,
+  node,
+  perfectionist,
+  plugins,
+  plus,
+  react,
+  reactConfigs,
+  reactPlugins,
+  reactStylistic,
+  refresh,
+  refreshFiles,
+  strict,
+  stylistic,
+  vanillaConfigs,
+  variables,
+};
+
+export default config;

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "eslint-config-vylda-vanilla-react",
+  "version": "4.0.0",
+  "description": "Eslint rules for JS React projects",
+  "main": "index.js",
+  "type": "module",
+  "keywords": [
+    "eslint",
+    "react"
+  ],
+  "scripts": {
+    "inspect": "npx @eslint/config-inspector",
+    "lint": "eslint .",
+    "test": "eslint .",
+    "prepare": "husky"
+  },
+  "author": "Vilem Lipold, vilem.lipold@seznam.cz",
+  "bugs": {
+    "url": "https://gitlab.com/Vylda/eslint-config-vylda-vanilla-react/-/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.com/Vylda/eslint-config-vylda-vanilla-react.git"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "homepage": "https://gitlab.com/Vylda/eslint-config-vylda-vanilla-react",
+  "license": "MIT",
+  "dependencies": {
+    "eslint-config-vylda-vanilla": "^4.3.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.5.0"
+  },
+  "devDependencies": {
+    "@eslint/config-inspector": "^1.0.2",
+    "eslint": "^9.39.0",
+    "husky": "^9.1.7"
+  }
+}

package/rules/a11y.mjs

@@ -0,0 +1,333 @@
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+import globals from 'globals';
+import { CONTROL_HAS_ASSOCIATE_LABELL_DEPTH, LABEL_HAS_ASSOCIATE_CONTROL_DEPTH } from './constants.mjs';
+
+const strictRules = {
+  // aria-activedescendant is used to manage focus within a composite widget.
+  // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-activedescendant-has-tabindex.md
+  'jsx-a11y/aria-activedescendant-has-tabindex': 'error',
+
+  // Elements cannot use an invalid ARIA attribute. This will fail if it finds an aria-* property that is not listed in WAI-ARIA States and Properties spec.
+  // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-props.md
+  'jsx-a11y/aria-props': 'error',
+
+  // ARIA state and property values must be valid.
+  // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-proptypes.md
+  'jsx-a11y/aria-proptypes': 'error',
+
+  // Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example meta, html, script, style.
+  // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-unsupported-elements.md
+  'jsx-a11y/aria-unsupported-elements': 'error',
+
+  // <html> elements must have the lang prop.
+  // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/html-has-lang.md
+  'jsx-a11y/html-has-lang': 'error',
+
+  // <iframe> elements must have a unique title property to indicate its content to the user.
+  // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/iframe-has-title.md
+  'jsx-a11y/iframe-has-title': 'error',
+
+  // Enforce img alt attribute does not contain the word image, picture, or photo. Screen readers already announce img elements as an image.
+  // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md
+  'jsx-a11y/img-redundant-alt': 'error',
+
+  // Elements with an interactive role and interaction handlers (mouse or key press) must be focusable.
+  // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/interactive-supports-focus.md
+  'jsx-a11y/interactive-supports-focus': [
+    'error',
+    {
+      tabbable: [
+        'button',
+        'checkbox',
+        'link',
+        'progressbar',
+        'searchbox',
+        'slider',
+        'spinbutton',
+        'switch',
+        'textbox',
+      ],
+    },
+  ],
+
+  // Enforce onmouseover/onmouseout are accompanied by onfocus/onblur.
+  // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
+  'jsx-a11y/mouse-events-have-key-events': [
+    'error',
+    {
+      hoverInHandlers: [
+        'onMouseOver',
+        'onMouseEnter',
+        'onPointerOver',
+        'onPointerEnter',
+      ],
+      hoverOutHandlers: [
+        'onMouseOut',
+        'onMouseLeave',
+        'onPointerOut',
+        'onPointerLeave',
+      ],
+    },
+  ],
+
+  // Enforce no accessKey prop on element. Access keys are HTML attributes that allow web developers to assign keyboard shortcuts to elements.
+  // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md
+  'jsx-a11y/no-access-key': 'error',
+
+  // Enforce that autoFocus prop is not used on elements.
+  // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md
+  'jsx-a11y/no-autofocus': 'error',
+
+  // Enforces that no distracting elements are used.
+  // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-distracting-elements.md
+  'jsx-a11y/no-distracting-elements': 'error',
+
+  // Elements with ARIA roles must have all required attributes for that role.
+  // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/role-has-required-aria-props.md
+  'jsx-a11y/role-has-required-aria-props': 'error',
+
+  // Enforce that elements with explicit or implicit roles defined contain only aria-* properties supported by that role.
+  // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/role-supports-aria-props.md
+  'jsx-a11y/role-supports-aria-props': 'error',
+
+  // The scope prop should be used only on <th> elements.
+  // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/scope.md
+  'jsx-a11y/scope': 'error',
+
+  // Avoid positive tabIndex property values to synchronize the flow of the page with keyboard tab order.
+  // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/tabindex-no-positive.md
+  'jsx-a11y/tabindex-no-positive': 'error',
+};
+
+const config = [
+  {
+    languageOptions: {
+      ...jsxA11y.flatConfigs.recommended.languageOptions,
+      globals: {
+        ...globals.serviceworker,
+        ...globals.browser,
+      },
+    },
+    name: 'jsx-a11y/a11y',
+    rules: {
+      ...strictRules,
+
+      // Enforce that all elements that require alternative text have meaningful information
+      // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/alt-text.md
+      'jsx-a11y/alt-text': [
+        'error',
+        {
+          area: [],
+          elements: ['img', 'object', 'area', 'input[type="image"]'],
+          img: ['Image'],
+          'input[type="image"]': [],
+          object: [],
+        },
+      ],
+
+      // Ensures anchor text is not ambiguous
+      // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-ambiguous-text.md
+      'jsx-a11y/anchor-ambiguous-text': 'off',
+
+      // Enforce that anchors have content
+      // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-has-content.md
+      'jsx-a11y/anchor-has-content': [
+        'error',
+        { components: ['Link', 'LinkButton', 'LinkText'] },
+      ],
+
+      // ensure <a> tags are valid
+      // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md
+      'jsx-a11y/anchor-is-valid': [
+        'error',
+        {
+          aspects: ['noHref', 'invalidHref', 'preferButton'],
+          components: ['Link'],
+          specialLink: ['to'],
+        },
+      ],
+
+      // Require ARIA roles to be valid and non-abstract
+      // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-role.md
+      'jsx-a11y/aria-role': [
+        'error',
+        { ignoreNonDOM: false },
+      ],
+
+      // Ensure the autocomplete attribute is correct and suitable for the form field it is used with
+      // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/autocomplete-valid.md
+      'jsx-a11y/autocomplete-valid': [
+        'error',
+        { inputComponents: ['Input'] },
+      ],
+
+      // require onClick be accompanied by onKeyUp/onKeyDown/onKeyPress
+      // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md
+      'jsx-a11y/click-events-have-key-events': 'error',
+
+      // Enforce that a control (an interactive element) has a text label.
+      // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/control-has-associated-label.md
+      'jsx-a11y/control-has-associated-label': [
+        'error',
+        {
+          controlComponents: [],
+          depth: CONTROL_HAS_ASSOCIATE_LABELL_DEPTH,
+          ignoreElements: [
+            'audio',
+            'canvas',
+            'embed',
+            'input',
+            'textarea',
+            'tr',
+            'video',
+          ],
+          ignoreRoles: [
+            'grid',
+            'listbox',
+            'menu',
+            'menubar',
+            'radiogroup',
+            'row',
+            'tablist',
+            'toolbar',
+            'tree',
+            'treegrid',
+          ],
+          includeRoles: ['alert', 'dialog'],
+          labelAttributes: ['label'],
+        },
+      ],
+
+      // ensure <hX> tags have content and are not aria-hidden
+      // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/heading-has-content.md
+      'jsx-a11y/heading-has-content': [
+        'error',
+        { components: ['Heading'] },
+      ],
+
+      // Enforce that a label tag has a text label and an associated control.
+      // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-associated-control.md
+      'jsx-a11y/label-has-associated-control': [
+        'error',
+        {
+          assert: 'both',
+          controlComponents: [],
+          depth: LABEL_HAS_ASSOCIATE_CONTROL_DEPTH,
+          labelAttributes: [],
+          labelComponents: [],
+        },
+      ],
+
+      // require HTML element's lang prop to be valid
+      // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/lang.md
+      'jsx-a11y/lang': 'error',
+
+      // media elements must have captions
+      // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/media-has-caption.md
+      'jsx-a11y/media-has-caption': ['error', {
+        audio: [],
+        track: [],
+        video: [],
+      }],
+
+      // Enforce that aria-hidden="true" is not set on focusable elements.
+      // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-aria-hidden-on-focusable.md
+      'jsx-a11y/no-aria-hidden-on-focusable': 'error',
+
+      // prohibit autoFocus prop
+      // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md
+      'jsx-a11y/no-autofocus': [
+        'error',
+        { ignoreNonDOM: true },
+      ],
+
+      // prevent distracting elements, like <marquee> and <blink>
+      // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-distracting-elements.md
+      'jsx-a11y/no-distracting-elements': [
+        'error',
+        { elements: ['marquee', 'blink'] },
+      ],
+
+      // WAI-ARIA roles should not be used to convert an interactive element to non-interactive
+      // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-interactive-element-to-noninteractive-role.md
+      'jsx-a11y/no-interactive-element-to-noninteractive-role': [
+        'error',
+        { tr: ['none', 'presentation'] },
+      ],
+
+      // A non-interactive element does not support event handlers (mouse and key handlers)
+      // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-element-interactions.md
+      'jsx-a11y/no-noninteractive-element-interactions': [
+        'error',
+        {
+          body: ['onError', 'onLoad'],
+          handlers: [
+            'onClick',
+            'onMouseDown',
+            'onMouseUp',
+            'onKeyPress',
+            'onKeyDown',
+            'onKeyUp',
+          ],
+          iframe: ['onError', 'onLoad'],
+          img: ['onError', 'onLoad'],
+        },
+      ],
+
+      // WAI-ARIA roles should not be used to convert a non-interactive element to interactive
+      // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-element-to-interactive-role.md
+      'jsx-a11y/no-noninteractive-element-to-interactive-role': [
+        'error',
+        {
+          li: ['menuitem', 'option', 'row', 'tab', 'treeitem'],
+          ol: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
+          table: ['grid'],
+          td: ['gridcell'],
+          ul: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
+        },
+      ],
+
+      // Tab key navigation should be limited to elements on the page that can be interacted with.
+      // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-tabindex.md
+      'jsx-a11y/no-noninteractive-tabindex': [
+        'error',
+        {
+          allowExpressionValues: true,
+          roles: ['tabpanel'],
+          tags: [],
+        },
+      ],
+
+      // ensure HTML elements do not specify redundant ARIA roles
+      // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-redundant-roles.md
+      'jsx-a11y/no-redundant-roles': [
+        'error',
+        {
+          nav: ['navigation'],
+        },
+      ],
+
+      // Enforce that DOM elements without semantic behavior not have interaction handlers
+      // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md
+      'jsx-a11y/no-static-element-interactions': [
+        'error',
+        {
+          handlers: [
+            'onClick',
+            'onMouseDown',
+            'onMouseUp',
+            'onKeyPress',
+            'onKeyDown',
+            'onKeyUp',
+          ],
+        },
+      ],
+
+      // Enforces using semantic DOM elements over the ARIA role property.
+      // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/prefer-tag-over-role.md
+      'jsx-a11y/prefer-tag-over-role': 'off',
+    },
+  },
+];
+
+export default config;

package/rules/best-practices.mjs

@@ -0,0 +1,57 @@
+import { bestPractices } from 'eslint-config-vylda-vanilla';
+
+const getOldRule = (ruleName) => {
+  const oldRuleSet = bestPractices.find((ruleSet) => {
+    const { rules } = ruleSet;
+    const rule = rules[ruleName];
+
+    return rule;
+  });
+
+  if (!oldRuleSet) {
+    return undefined;
+  }
+
+  const { rules } = oldRuleSet;
+  const oldRule = rules[ruleName];
+
+  return oldRule;
+};
+
+const updateOldRules = () => {
+  const classMethodsUseThisRule = getOldRule('class-methods-use-this');
+
+  if (!!classMethodsUseThisRule) {
+    const [, cmutRuleOptions] = classMethodsUseThisRule;
+
+    const newCmutRuleOptions = {
+      ...cmutRuleOptions,
+      exceptMethods: [
+        'render',
+        'getInitialState',
+        'getDefaultProps',
+        'getChildContext',
+        'componentWillMount',
+        'UNSAFE_componentWillMount',
+        'componentDidMount',
+        'componentWillReceiveProps',
+        'UNSAFE_componentWillReceiveProps',
+        'shouldComponentUpdate',
+        'componentWillUpdate',
+        'UNSAFE_componentWillUpdate',
+        'componentDidUpdate',
+        'componentWillUnmount',
+        'componentDidCatch',
+        'getSnapshotBeforeUpdate',
+      ],
+    };
+
+    classMethodsUseThisRule[1] = newCmutRuleOptions;
+  }
+
+  return structuredClone(bestPractices);
+};
+
+const config = updateOldRules();
+
+export default config;

package/rules/constants.mjs

@@ -0,0 +1,20 @@
+import { constants } from 'eslint-config-vylda-vanilla';
+
+export const {
+  COMPLEXITY,
+  CURLY_NEWLINE_PROPERTY_MIN_ELEMENTS,
+  IGNORE_CHAIN_WITH_DEPTH,
+  INDENT, MAX_DEPENDENCIES,
+  MAX_FUNCTION_PARAMS,
+  MAX_LINE_CODE_LENGTH,
+  MAX_LINE_COMMENTS_LENGTH,
+  MAX_LINE_PER_FILE,
+  MAX_LINE_PER_FUNCTION,
+  MAX_NESTED_BLOCKS,
+  MAX_NESTED_CALLBACKS,
+  OBJECT_CURLY_MIN_PROPS,
+} = constants;
+
+export const CONTROL_HAS_ASSOCIATE_LABELL_DEPTH = 5;
+export const JSX_MAX_DEPTH = 4;
+export const LABEL_HAS_ASSOCIATE_CONTROL_DEPTH = 25;