@bigbinary/eslint-plugin-neeto 1.1.22 → 1.1.23

package/README.md

@@ -46,6 +46,8 @@ module.exports = {
 
 ## Exported rules
 
+
+- [use-classnames-for-dynamic-classes](./docs/src/rules/use-classnames-for-dynamic-classes.md)
 - [use-use-mutation-with-invalidation-hook](./docs/src/rules/use-use-mutation-with-invalidation-hook.md)
 - [no-withT-for-smart-components](./docs/src/rules/no-withT-for-smart-components.md)
 - [no-large-functions-inside-jsx](./docs/src/rules/no-large-functions-inside-jsx.md)

package/dist/index.js

@@ -42,6 +42,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/use-classnames-for-dynamic-classes": "error",
     "@bigbinary/neeto/use-use-mutation-with-invalidation-hook": "error",
     "@bigbinary/neeto/no-withT-for-smart-components": "error",
     "@bigbinary/neeto/no-large-functions-inside-jsx": "error",
@@ -551,6 +552,7 @@
   var USE_STANDARD_DATE_TIME_FORMATS = 'Use "dateFormat/timeFormat" from "@bigbinary/neeto-commons-frontend/utils" instead. Refer: https://github.com/bigbinary/neeto-commons-frontend/blob/main/docs/utils/README.md#dateformattimeformat';
   var MOVE_SPREAD_ATTRIBUTES_TO_TOP = "Move spread attribute to top";
   var USE_USE_MUTATION_WITH_INVALIDATION = "Use useMutationWithInvalidation from 'neetocommons/react-utils'";
+  var USE_CLASSNAMES_PACKAGE = "Use classnames package for dynamic classes";
 
   var PACKAGES_TO_CHECK = ["@bigbinary/neeto-molecules", "@bigbinary/neetoui", "@bigbinary/neeto-commons-frontend"];
 
@@ -8414,6 +8416,99 @@
     }
   };
 
+  // className={isPending ? "opacity-30" : "opacity-0"}
+  // className={isPending && "opacity-30"}
+  var CONDITIONAL_CLASSNAMES_PATTERN = {
+    name: {
+      type: TYPES.JSX_IDENTIFIER,
+      name: "className"
+    },
+    value: {
+      type: TYPES.JSX_EXPRESSION_CONTAINER,
+      expression: {
+        type: ramda.includes(ramda.__, [TYPES.LOGICAL_EXPRESSION, TYPES.CONDITIONAL_EXPRESSION, TYPES.TEMPLATE_LITERAL])
+      }
+    }
+  };
+
+  // import classnames from "classnames";
+  var CLASSNAMES_IMPORT_PATTERN = {
+    type: TYPES.IMPORT_DECLARATION,
+    source: {
+      type: TYPES.LITERAL,
+      value: "classnames"
+    },
+    specifiers: pure.existsBy({
+      type: TYPES.IMPORT_DEFAULT_SPECIFIER,
+      local: {
+        type: TYPES.IDENTIFIER,
+        name: "classnames"
+      }
+    })
+  };
+
+  // ${isPending && "opacity-30"}
+  // ${isPending ? "opacity-30" : "opacity-0"}
+  var CONDITIONAL_EXPRESSION_PATTERN = {
+    expressions: [{
+      type: ramda.includes(ramda.__, [TYPES.LOGICAL_EXPRESSION, TYPES.CONDITIONAL_EXPRESSION])
+    }]
+  };
+
+  var getFixString = function getFixString(context, expressionNode) {
+    if (expressionNode.type === TYPES.LOGICAL_EXPRESSION) {
+      var left = context.getSourceCode().getText(expressionNode.left);
+      var right = context.getSourceCode().getText(expressionNode.right);
+      return "classnames({ ".concat(right, ": ").concat(left, " })");
+    }
+    var test = context.getSourceCode().getText(expressionNode.test);
+    var consequent = context.getSourceCode().getText(expressionNode.consequent);
+    var alternate = context.getSourceCode().getText(expressionNode.alternate);
+    return "classnames({".concat(consequent, ": ").concat(test, ", ").concat(alternate, ": !(").concat(test, ")})");
+  };
+
+  var useClassnamesForDynamicClasses = {
+    meta: {
+      type: "error",
+      docs: {
+        url: "https://github.com/bigbinary/eslint-plugin-neeto/blob/main/docs/src/rules/use-classnames-for-dynamic-classes.md",
+        description: "Enforce use of classnames for dynamic classes"
+      },
+      fixable: "code"
+    },
+    create: function create(context) {
+      return {
+        JSXAttribute: function JSXAttribute(node) {
+          if (!pure.matches(CONDITIONAL_CLASSNAMES_PATTERN, node)) return;
+          var expressionNode = node.value.expression;
+          if (expressionNode.type === TYPES.TEMPLATE_LITERAL) {
+            if (pure.matches(CONDITIONAL_EXPRESSION_PATTERN, expressionNode)) {
+              context.report({
+                node: node,
+                message: USE_CLASSNAMES_PACKAGE
+              });
+            }
+            return;
+          }
+          context.report({
+            node: node,
+            message: USE_CLASSNAMES_PACKAGE,
+            fix: function fix(fixer) {
+              var fixString = getFixString(context, expressionNode);
+              var fixerArray = [fixer.replaceText(expressionNode, fixString)];
+              var importExists = pure.existsBy(CLASSNAMES_IMPORT_PATTERN, getAllImports(node));
+              if (!importExists) {
+                var addImport = fixer.insertTextBefore(context.getAncestors()[0], 'import classnames from "classnames";\n');
+                fixerArray.push(addImport);
+              }
+              return fixerArray;
+            }
+          });
+        }
+      };
+    }
+  };
+
   var IMPORT_SOURCES = {
     "neeto-commons-frontend/constants": ["neetocommons/constants", "@bigbinary/neeto-commons-frontend/constants"],
     "neeto-team-members-frontend": ["neetoteam", "@bigbinary/neeto-team-members-frontend"]
@@ -27145,6 +27240,7 @@
 
   var index = {
     rules: {
+      "use-classnames-for-dynamic-classes": useClassnamesForDynamicClasses,
       "use-use-mutation-with-invalidation-hook": useUseMutationWithInvalidationHook,
       "no-withT-for-smart-components": noWithTForSmartComponents,
       "no-large-functions-inside-jsx": noLargeFunctionsInsideJsx,

package/package.json

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