Merge pull request #116 from rayane-djouah/prefer-shouldUseNarrowLayout

Create prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth Rule

eslint-plugin-expensify/CONST.js

@@ -33,5 +33,6 @@ module.exports = {
         PREFER_TYPE_FEST_TUPLE_TO_UNION: 'Prefer using `TupleToUnion` from `type-fest` for converting tuple types to union types.',
         PREFER_TYPE_FEST_VALUE_OF: 'Prefer using `ValueOf` from `type-fest` to extract the type of the properties of an object.',
         PREFER_AT: 'Prefer using the `.at()` method for array element access.',
+        PREFER_SHOULD_USE_NARROW_LAYOUT_INSTEAD_OF_IS_SMALL_SCREEN_WIDTH: 'Prefer using `shouldUseNarrowLayout` instead of `isSmallScreenWidth` from `useResponsiveLayout`.',  
     },
 };

eslint-plugin-expensify/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth.js

@@ -0,0 +1,104 @@
+const {AST_NODE_TYPES} = require("@typescript-eslint/utils");
+const _ = require("underscore");
+const CONST = require("./CONST");
+
+module.exports = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Warn against using isSmallScreenWidth from useResponsiveLayout and suggest using shouldUseNarrowLayout instead.",
+    },
+    schema: [],
+  },
+  create(context) {
+
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+
+    return {
+      VariableDeclarator(node) {
+        if (
+          !node.init ||
+          !node.init.callee ||
+          node.init.callee.name !== "useResponsiveLayout"
+        ) {
+          return;
+        }
+
+        // Check for 'const {isSmallScreenWidth, ...} = useResponsiveLayout();' pattern
+        if (node.id.type === AST_NODE_TYPES.ObjectPattern) {
+          node.id.properties.forEach((property) => {
+            if (!property.key || property.key.name !== "isSmallScreenWidth") {
+              return;
+            }
+            context.report({
+              node: property,
+              message:
+                CONST.MESSAGE
+                  .PREFER_SHOULD_USE_NARROW_LAYOUT_INSTEAD_OF_IS_SMALL_SCREEN_WIDTH,
+            });
+          });
+        }
+
+        const scope = sourceCode.getScope ? sourceCode.getScope(node) : context.getScope();
+
+        // Check for 'const var = useResponsiveLayout();' and use of this var
+        const variableName = node.id.name;
+        const variableUsages = _.filter(
+          scope.references,
+          (reference) => reference.identifier.name === variableName
+        );
+        variableUsages.forEach((usage) => {
+          const parent = usage.identifier.parent;
+
+          // Check for 'const isSmallScreenWidth = var.isSmallScreenWidth;' pattern
+          if (
+            parent.type === AST_NODE_TYPES.MemberExpression &&
+            parent.property.name === "isSmallScreenWidth"
+          ) {
+            context.report({
+              node: parent.property,
+              message:
+                CONST.MESSAGE
+                  .PREFER_SHOULD_USE_NARROW_LAYOUT_INSTEAD_OF_IS_SMALL_SCREEN_WIDTH,
+            });
+          }
+
+          // Check for 'const {isSmallScreenWidth} = var;' pattern
+          if (
+            parent.type === AST_NODE_TYPES.VariableDeclarator &&
+            parent.id.type === AST_NODE_TYPES.ObjectPattern
+          ) {
+            parent.id.properties.forEach((property) => {
+              if (!property.key || property.key.name !== "isSmallScreenWidth") {
+                return;
+              }
+              context.report({
+                node: property,
+                message:
+                  CONST.MESSAGE
+                    .PREFER_SHOULD_USE_NARROW_LAYOUT_INSTEAD_OF_IS_SMALL_SCREEN_WIDTH,
+              });
+            });
+          }
+        });
+      },
+      MemberExpression(node) {
+        // Check for 'const isSmallScreenWidth = useResponsiveLayout().isSmallScreenWidth;' pattern
+        if (
+          node.object.type !== "CallExpression" ||
+          node.object.callee.name !== "useResponsiveLayout" ||
+          node.property.name !== "isSmallScreenWidth"
+        ) {
+          return;
+        }
+        context.report({
+          node,
+          message:
+            CONST.MESSAGE
+              .PREFER_SHOULD_USE_NARROW_LAYOUT_INSTEAD_OF_IS_SMALL_SCREEN_WIDTH,
+        });
+      },
+    };
+  },
+};

eslint-plugin-expensify/tests/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth.test.js

@@ -0,0 +1,74 @@
+const RuleTester = require("eslint").RuleTester;
+const rule = require("../prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth");
+const message =
+  require("../CONST").MESSAGE
+    .PREFER_SHOULD_USE_NARROW_LAYOUT_INSTEAD_OF_IS_SMALL_SCREEN_WIDTH;
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 6,
+    sourceType: "module",
+  },
+});
+
+ruleTester.run(
+  "prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth",
+  rule,
+  {
+    valid: [
+      {
+        code: "const {shouldUseNarrowLayout} = useResponsiveLayout();",
+      },
+    ],
+    invalid: [
+      {
+        code: "const {isSmallScreenWidth} = useResponsiveLayout();",
+        errors: [
+          {
+            message,
+          },
+        ],
+      },
+      {
+        code: "const {isSmallScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();",
+        errors: [
+          {
+            message,
+          },
+        ],
+      },
+      {
+        code: `
+            const isSmallScreenWidth = useResponsiveLayout().isSmallScreenWidth;
+            `,
+        errors: [
+          {
+            message,
+          },
+        ],
+      },
+      {
+        code: `
+            const dimensions = useResponsiveLayout();
+            const isSmallScreenWidth = dimensions.isSmallScreenWidth;
+            `,
+        errors: [
+          {
+            message,
+          },
+        ],
+      },
+      {
+        code: `
+            const dimensions = useResponsiveLayout();
+            const {isSmallScreenWidth} = dimensions;
+            `,
+        errors: [
+          {
+            message,
+          },
+        ],
+      },
+    ],
+  }
+);

rules/expensify.js

@@ -28,6 +28,7 @@ module.exports = {
                 message: 'Please use SafeAreaView from react-native-safe-area-context',
             }],
         }],
+        "rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth": "warn",
     },
 };