@bigbinary/eslint-plugin-neeto 1.7.6 → 1.8.0

package/README.md

@@ -140,6 +140,7 @@ of the issues identified in JavaScript code.
 - [use-permissions-prop-in-private-route](./docs/src/rules/use-permissions-prop-in-private-route.md)
 - [use-webpack-alias](./docs/src/rules/use-webpack-alias.md)
 - [use-neetoui-action-block-in-formik-forms](./docs/src/rules/use-neetoui-action-block-in-formik-forms.md)
+- [prefer-radio-buttons-for-few-options](./docs/src/rules/prefer-radio-buttons-for-few-options.md)
 
 ## Overriding rules
 

package/dist/index.js

@@ -38,6 +38,7 @@
   var commonResolve$2 = loadJS$2("node_modules/@bigbinary/neeto-commons-frontend/configs/webpack/resolve.js");
   var resolve$2 = ramda.mergeDeepLeft(projectResolve$2, commonResolve$2);
   var rules = {
+    "@bigbinary/neeto/prefer-radio-buttons-for-few-options": "warn",
     "@bigbinary/neeto/switch-children-must-be-route-or-redirect": "error",
     "@bigbinary/neeto/use-dayjs-from-neeto-commons-fronted": "error",
     "@bigbinary/neeto/use-neetoui-action-block-in-formik-forms": "warn",
@@ -330,7 +331,7 @@
   }
 
   var name = "@bigbinary/eslint-plugin-neeto";
-  var version = "1.7.5";
+  var version = "1.7.6";
   var main = "dist/index.js";
   var license = "UNLICENSED";
   var scripts = {
@@ -753,6 +754,7 @@
   var HELP_URL_SHOULD_USE_PERMALINK = "Help URL must use a permalink (/p/...) instead of an article link (/articles/...).";
   var HELP_URL_INCORRECT_FORMAT = "Incorrect help URL format. Please use the 'help.neeto<product>.com' format instead of 'neeto<product>help.neetokb.com'.";
   var INVALID_SWITCH_CHILD_MESSAGE = "Switch component can only contain Route, Redirect, or PrivateRoute as direct children";
+  var PREFER_RADIO_BUTTONS_FOR_FEW_OPTIONS = "Consider using Radio buttons instead of Dropdown/Select when there are fewer than 4 options.";
 
   var PACKAGES_TO_CHECK = ["@bigbinary/neeto-molecules", "@bigbinary/neetoui", "@bigbinary/neeto-commons-frontend"];
 
@@ -9174,6 +9176,144 @@
     }
   };
 
+  var MIN_OPTIONS_THRESHOLD = 4;
+  var DROPDOWN_COMPONENT_NAMES = ["Dropdown", "Select", "DropdownMenu", "SelectInput", "MultiSelect", "Menu"];
+  var OPTION_ELEMENT_NAMES = ["option", "Option", "MenuItem", "MenuItemButton"];
+  var DROPDOWN_COMPONENT_PATTERN = {
+    type: TYPES.JSX_ELEMENT,
+    openingElement: {
+      type: TYPES.JSX_OPENING_ELEMENT,
+      name: {
+        type: TYPES.JSX_IDENTIFIER,
+        name: ramda.includes(ramda.__, DROPDOWN_COMPONENT_NAMES)
+      }
+    }
+  };
+  var OPTION_ELEMENT_PATTERN = {
+    type: TYPES.JSX_ELEMENT,
+    openingElement: {
+      type: TYPES.JSX_OPENING_ELEMENT,
+      name: {
+        type: TYPES.JSX_IDENTIFIER,
+        name: ramda.includes(ramda.__, OPTION_ELEMENT_NAMES)
+      }
+    }
+  };
+  var OPTIONS_ARRAY_PATTERN = {
+    type: TYPES.JSX_ATTRIBUTE,
+    name: {
+      type: TYPES.JSX_IDENTIFIER,
+      name: "options"
+    },
+    value: {
+      type: TYPES.JSX_EXPRESSION_CONTAINER
+    }
+  };
+  var SPREAD_ATTRIBUTE_PATTERN = {
+    type: TYPES.JSX_SPREAD_ATTRIBUTE,
+    argument: {
+      type: TYPES.OBJECT_EXPRESSION
+    }
+  };
+  var SPREAD_OPTION_PROPERTY_PATTERN = {
+    type: TYPES.PROPERTY,
+    key: {
+      type: TYPES.IDENTIFIER,
+      name: "options"
+    }
+  };
+
+  var isImportedVariable = function isImportedVariable(node, context) {
+    if (node.type !== TYPES.IDENTIFIER) return false;
+    var scope = context.sourceCode.getScope(node);
+    var variable = scope.set.get(node.name);
+    if (!variable || ramda.isEmpty(variable.defs)) return false;
+    var def = variable.defs[0];
+    return def.type === "ImportBinding";
+  };
+  var resolveVariableReference = function resolveVariableReference(node, context) {
+    var _def$node;
+    if (node.type !== TYPES.IDENTIFIER) return null;
+    var scope = context.sourceCode.getScope(node);
+    var variable = scope.set.get(node.name);
+    if (!variable || ramda.isEmpty(variable.defs)) return null;
+    var def = variable.defs[0];
+    return ((_def$node = def.node) === null || _def$node === void 0 ? void 0 : _def$node.init) || null;
+  };
+  var countArrayElements = function countArrayElements(node, context) {
+    if (node.type === TYPES.ARRAY_EXPRESSION) {
+      return node.elements ? node.elements.length : 0;
+    }
+    if (node.type === TYPES.IDENTIFIER) {
+      if (isImportedVariable(node, context)) return -1;
+      var resolvedNode = resolveVariableReference(node, context);
+      if (resolvedNode) {
+        return countArrayElements(resolvedNode, context);
+      }
+    }
+    return 0;
+  };
+  var countOptions = function countOptions(node, context) {
+    var _node$openingElement, _optionsAttribute$val;
+    var optionCount = 0;
+
+    // Count direct option children
+    if (node.children) {
+      var optionElements = node.children.filter(function (child) {
+        return neetoCist.matches(OPTION_ELEMENT_PATTERN, child);
+      });
+      optionCount += optionElements.length;
+    }
+    var attributes = node === null || node === void 0 ? void 0 : (_node$openingElement = node.openingElement) === null || _node$openingElement === void 0 ? void 0 : _node$openingElement.attributes;
+    if (!attributes) return optionCount;
+
+    // Count options from props passed to the component
+    var optionsAttribute = ramda.find(neetoCist.matches(OPTIONS_ARRAY_PATTERN), attributes);
+    var expression = optionsAttribute === null || optionsAttribute === void 0 ? void 0 : (_optionsAttribute$val = optionsAttribute.value) === null || _optionsAttribute$val === void 0 ? void 0 : _optionsAttribute$val.expression;
+    if (expression) {
+      var elementsCount = countArrayElements(expression, context);
+      optionCount += elementsCount;
+    }
+
+    // Count options from spread props eg: <Component {...{options}} />
+    var spreadAttributes = attributes.filter(function (attribute) {
+      return neetoCist.matches(SPREAD_ATTRIBUTE_PATTERN, attribute);
+    });
+    spreadAttributes.forEach(function (attribute) {
+      if (!attribute.argument) return;
+      if (!(attribute.argument.type === TYPES.OBJECT_EXPRESSION)) return;
+      var optionsProperty = ramda.find(neetoCist.matches(SPREAD_OPTION_PROPERTY_PATTERN), attribute.argument.properties);
+      var optionsPropertyValue = optionsProperty === null || optionsProperty === void 0 ? void 0 : optionsProperty.value;
+      if (!optionsPropertyValue) return;
+      var elementsCount = countArrayElements(optionsPropertyValue, context);
+      optionCount += elementsCount;
+    });
+    return optionCount;
+  };
+  var preferRadioButtonsForFewOptions = {
+    meta: {
+      type: "warn",
+      docs: {
+        url: "https://github.com/bigbinary/eslint-plugin-neeto/blob/main/docs/src/rules/prefer-radio-buttons-for-few-options.md",
+        description: PREFER_RADIO_BUTTONS_FOR_FEW_OPTIONS
+      }
+    },
+    create: function create(context) {
+      return {
+        JSXElement: function JSXElement(node) {
+          if (!neetoCist.matches(DROPDOWN_COMPONENT_PATTERN, node)) return;
+          var optionCount = countOptions(node, context);
+          if (optionCount > 0 && optionCount < MIN_OPTIONS_THRESHOLD) {
+            context.report({
+              node: node,
+              message: PREFER_RADIO_BUTTONS_FOR_FEW_OPTIONS
+            });
+          }
+        }
+      };
+    }
+  };
+
   var NEETO_PACKAGES = ["@bigbinary/neetoui", "@bigbinary/neeto-icons"];
 
   var importedFromNeeto = function importedFromNeeto(context, node) {
@@ -13309,6 +13449,7 @@
 
   var index = {
     rules: {
+      "prefer-radio-buttons-for-few-options": preferRadioButtonsForFewOptions,
       "switch-children-must-be-route-or-redirect": switchChildrenMustBeRouteOrRedirect,
       "use-dayjs-from-neeto-commons-fronted": useDayjsFromNeetoCommonsFronted,
       "use-neetoui-action-block-in-formik-forms": useNeetouiActionBlockInFormikForms,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/eslint-plugin-neeto",
-  "version": "1.7.6",
+  "version": "1.8.0",
   "main": "dist/index.js",
   "license": "UNLICENSED",
   "scripts": {