@agilebot/eslint-plugin 0.1.6 → 0.2.0

package/lib/rules/react/hook-use-ref.js

@@ -1,37 +1,35 @@
-const Components = require('eslint-plugin-react/lib/util/Components');
-
-module.exports = {
-  meta: {
-    docs: {
-      description: 'Ensure naming of useRef hook value.',
-      recommended: false
-    },
-    schema: [],
-    type: 'suggestion',
-    hasSuggestions: true
-  },
-
-  create: Components.detect((context, component, util) => {
-    return {
-      CallExpression(node) {
-        const isImmediateReturn =
-          node.parent && node.parent.type === 'ReturnStatement';
-
-        if (isImmediateReturn || !util.isReactHookCall(node, ['useRef'])) {
-          return;
-        }
-        if (node.parent.id.type !== 'Identifier') {
-          return;
-        }
-        const variable = node.parent.id.name;
-
-        if (!variable.endsWith('Ref')) {
-          context.report({
-            node: node,
-            message: 'useRef call is not end with "Ref"'
-          });
-        }
-      }
-    };
-  })
-};
+const Components = require('eslint-plugin-react/lib/util/Components');
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Ensure naming of useRef hook value.',
+      recommended: false
+    },
+    schema: [],
+    type: 'suggestion',
+    hasSuggestions: true
+  },
+
+  create: Components.detect((context, component, util) => ({
+    CallExpression(node) {
+      const isImmediateReturn =
+        node.parent && node.parent.type === 'ReturnStatement';
+
+      if (isImmediateReturn || !util.isReactHookCall(node, ['useRef'])) {
+        return;
+      }
+      if (node.parent.id.type !== 'Identifier') {
+        return;
+      }
+      const variable = node.parent.id.name;
+
+      if (!variable.endsWith('Ref')) {
+        context.report({
+          node: node,
+          message: 'useRef call is not end with "Ref"'
+        });
+      }
+    }
+  }))
+};

package/lib/rules/react/no-inline-styles.js

@@ -1,87 +1,87 @@
-module.exports = {
-  meta: {
-    docs: {
-      description: 'Disallow style props on components and DOM Nodes',
-      category: 'Best Practices',
-      recommended: false
-    },
-    messages: {
-      disallowInlineStyles:
-        'Avoid using inline styles, use sx prop or tss-react or styled-component instead'
-    },
-    schema: [
-      {
-        type: 'object',
-        properties: {
-          allowedFor: {
-            type: 'array',
-            uniqueItems: true,
-            items: { type: 'string' }
-          }
-        }
-      }
-    ]
-  },
-
-  create(context) {
-    const configuration = context.options[0] || {};
-    const allowedFor = configuration.allowedFor || [];
-
-    function checkComponent(node) {
-      const parentName = node.parent.name;
-      // Extract a component name when using a "namespace", e.g. `<AntdLayout.Content />`.
-      const tag =
-        parentName.name ||
-        `${parentName.object.name}.${parentName.property.name}`;
-      const componentName = parentName.name || parentName.property.name;
-      if (
-        componentName &&
-        typeof componentName[0] === 'string' &&
-        componentName[0] !== componentName[0].toUpperCase()
-      ) {
-        // This is a DOM node, not a Component, so exit.
-        return;
-      }
-
-      if (allowedFor.includes(tag)) {
-        return;
-      }
-      const prop = node.name.name;
-
-      if (prop === 'style') {
-        context.report({
-          node,
-          messageId: 'disallowInlineStyles'
-        });
-      }
-    }
-
-    function checkDOMNodes(node) {
-      const tag = node.parent.name.name;
-      if (
-        !(tag && typeof tag === 'string' && tag[0] !== tag[0].toUpperCase())
-      ) {
-        // This is a Component, not a DOM node, so exit.
-        return;
-      }
-      if (allowedFor.includes(tag)) {
-        return;
-      }
-      const prop = node.name.name;
-
-      if (prop === 'style') {
-        context.report({
-          node,
-          messageId: 'disallowInlineStyles'
-        });
-      }
-    }
-
-    return {
-      JSXAttribute(node) {
-        checkComponent(node);
-        checkDOMNodes(node);
-      }
-    };
-  }
-};
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Disallow style props on components and DOM Nodes',
+      category: 'Best Practices',
+      recommended: false
+    },
+    messages: {
+      disallowInlineStyles:
+        'Avoid using inline styles, use sx prop or tss-react or styled-component instead'
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          allowedFor: {
+            type: 'array',
+            uniqueItems: true,
+            items: { type: 'string' }
+          }
+        }
+      }
+    ]
+  },
+
+  create(context) {
+    const configuration = context.options[0] || {};
+    const allowedFor = configuration.allowedFor || [];
+
+    function checkComponent(node) {
+      const parentName = node.parent.name;
+      // Extract a component name when using a "namespace", e.g. `<AntdLayout.Content />`.
+      const tag =
+        parentName.name ||
+        `${parentName.object.name}.${parentName.property.name}`;
+      const componentName = parentName.name || parentName.property.name;
+      if (
+        componentName &&
+        typeof componentName[0] === 'string' &&
+        componentName[0] !== componentName[0].toUpperCase()
+      ) {
+        // This is a DOM node, not a Component, so exit.
+        return;
+      }
+
+      if (allowedFor.includes(tag)) {
+        return;
+      }
+      const prop = node.name.name;
+
+      if (prop === 'style') {
+        context.report({
+          node,
+          messageId: 'disallowInlineStyles'
+        });
+      }
+    }
+
+    function checkDOMNodes(node) {
+      const tag = node.parent.name.name;
+      if (
+        !(tag && typeof tag === 'string' && tag[0] !== tag[0].toUpperCase())
+      ) {
+        // This is a Component, not a DOM node, so exit.
+        return;
+      }
+      if (allowedFor.includes(tag)) {
+        return;
+      }
+      const prop = node.name.name;
+
+      if (prop === 'style') {
+        context.report({
+          node,
+          messageId: 'disallowInlineStyles'
+        });
+      }
+    }
+
+    return {
+      JSXAttribute(node) {
+        checkComponent(node);
+        checkDOMNodes(node);
+      }
+    };
+  }
+};

package/lib/rules/react/prefer-named-property-access.js

@@ -1,105 +1,105 @@
-const { ESLintUtils } = require('@typescript-eslint/utils');
-
-/**
- * Auto-fix util.
- * Ensures that passed key is imported from 'react' package.
- */
-function* updateImportStatement(context, fixer, key) {
-  const sourceCode = context.getSourceCode();
-  const importNode = sourceCode.ast.body.find(
-    node => node.type === 'ImportDeclaration' && node.source.value === 'react'
-  );
-
-  // No import from 'react' - create import statement
-  if (!importNode) {
-    yield fixer.insertTextBefore(
-      sourceCode.ast.body[0],
-      `import { ${key} } from 'react';\n`
-    );
-
-    return;
-  }
-
-  // Only default import from 'react' - add named imports section
-  if (
-    importNode.specifiers.length === 1 &&
-    importNode.specifiers[0].type === 'ImportDefaultSpecifier'
-  ) {
-    yield fixer.insertTextAfter(importNode.specifiers[0], `, { ${key} }`);
-
-    return;
-  }
-
-  const alreadyImportedKeys = importNode.specifiers
-    .filter(specifier => specifier.type === 'ImportSpecifier')
-    .map(specifier => specifier.imported.name);
-
-  // Named imports section is present and current key is already imported - do nothing
-  if (alreadyImportedKeys.includes(key)) {
-    return;
-  }
-
-  // Named imports section is present and current key is not imported yet - add it to named imports section
-  yield fixer.insertTextAfter([...importNode.specifiers].pop(), `, ${key}`);
-}
-
-/** @type {import('eslint').Rule.RuleModule} */
-module.exports = ESLintUtils.RuleCreator.withoutDocs({
-  defaultOptions: [],
-  meta: {
-    type: 'layout',
-    fixable: 'code',
-    docs: {
-      description:
-        'Enforce importing each member of React namespace separately instead of accessing them through React namespace',
-      category: 'Layout & Formatting'
-    },
-    messages: {
-      illegalReactPropertyAccess:
-        'Illegal React property access: {{name}}. Use named import instead.'
-    }
-  },
-
-  create(context) {
-    return {
-      // Analyze TS types declarations
-      TSQualifiedName(node) {
-        // Do nothing to types that are ending with 'Event' as they will overlap with global event types otherwise
-        if (node.left.name !== 'React' || node.right.name.endsWith('Event')) {
-          return;
-        }
-
-        context.report({
-          node,
-          messageId: 'illegalReactPropertyAccess',
-          data: {
-            name: node.right.name
-          },
-          *fix(fixer) {
-            yield fixer.replaceText(node, node.right.name);
-            yield* updateImportStatement(context, fixer, node.right.name);
-          }
-        });
-      },
-
-      // Analyze expressions for React.* access
-      MemberExpression(node) {
-        if (node.object.name !== 'React') {
-          return;
-        }
-
-        context.report({
-          node,
-          messageId: 'illegalReactPropertyAccess',
-          data: {
-            name: node.property.name
-          },
-          *fix(fixer) {
-            yield fixer.replaceText(node, node.property.name);
-            yield* updateImportStatement(context, fixer, node.property.name);
-          }
-        });
-      }
-    };
-  }
-});
+const { ESLintUtils } = require('@typescript-eslint/utils');
+
+/**
+ * Auto-fix util.
+ * Ensures that passed key is imported from 'react' package.
+ */
+function* updateImportStatement(context, fixer, key) {
+  const sourceCode = context.getSourceCode();
+  const importNode = sourceCode.ast.body.find(
+    node => node.type === 'ImportDeclaration' && node.source.value === 'react'
+  );
+
+  // No import from 'react' - create import statement
+  if (!importNode) {
+    yield fixer.insertTextBefore(
+      sourceCode.ast.body[0],
+      `import { ${key} } from 'react';\n`
+    );
+
+    return;
+  }
+
+  // Only default import from 'react' - add named imports section
+  if (
+    importNode.specifiers.length === 1 &&
+    importNode.specifiers[0].type === 'ImportDefaultSpecifier'
+  ) {
+    yield fixer.insertTextAfter(importNode.specifiers[0], `, { ${key} }`);
+
+    return;
+  }
+
+  const alreadyImportedKeys = importNode.specifiers
+    .filter(specifier => specifier.type === 'ImportSpecifier')
+    .map(specifier => specifier.imported.name);
+
+  // Named imports section is present and current key is already imported - do nothing
+  if (alreadyImportedKeys.includes(key)) {
+    return;
+  }
+
+  // Named imports section is present and current key is not imported yet - add it to named imports section
+  yield fixer.insertTextAfter([...importNode.specifiers].pop(), `, ${key}`);
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = ESLintUtils.RuleCreator.withoutDocs({
+  defaultOptions: [],
+  meta: {
+    type: 'layout',
+    fixable: 'code',
+    docs: {
+      description:
+        'Enforce importing each member of React namespace separately instead of accessing them through React namespace',
+      category: 'Layout & Formatting'
+    },
+    messages: {
+      illegalReactPropertyAccess:
+        'Illegal React property access: {{name}}. Use named import instead.'
+    }
+  },
+
+  create(context) {
+    return {
+      // Analyze TS types declarations
+      TSQualifiedName(node) {
+        // Do nothing to types that are ending with 'Event' as they will overlap with global event types otherwise
+        if (node.left.name !== 'React' || node.right.name.endsWith('Event')) {
+          return;
+        }
+
+        context.report({
+          node,
+          messageId: 'illegalReactPropertyAccess',
+          data: {
+            name: node.right.name
+          },
+          *fix(fixer) {
+            yield fixer.replaceText(node, node.right.name);
+            yield* updateImportStatement(context, fixer, node.right.name);
+          }
+        });
+      },
+
+      // Analyze expressions for React.* access
+      MemberExpression(node) {
+        if (node.object.name !== 'React') {
+          return;
+        }
+
+        context.report({
+          node,
+          messageId: 'illegalReactPropertyAccess',
+          data: {
+            name: node.property.name
+          },
+          *fix(fixer) {
+            yield fixer.replaceText(node, node.property.name);
+            yield* updateImportStatement(context, fixer, node.property.name);
+          }
+        });
+      }
+    };
+  }
+});

package/lib/rules/tss/class-naming.js

@@ -1,43 +1,43 @@
-const { getStyesObj, isCamelCase } = require('../../util/tss');
-
-module.exports = {
-  meta: {
-    type: 'problem'
-  },
-  create: function rule(context) {
-    return {
-      CallExpression(node) {
-        const stylesObj = getStyesObj(node);
-
-        if (stylesObj === undefined) {
-          return;
-        }
-
-        stylesObj.properties.forEach(property => {
-          if (property.computed) {
-            // Skip over computed properties for now.
-            // e.g. `{ [foo]: { ... } }`
-            return;
-          }
-
-          if (
-            property.type === 'ExperimentalSpreadProperty' ||
-            property.type === 'SpreadElement'
-          ) {
-            // Skip over object spread for now.
-            // e.g. `{ ...foo }`
-            return;
-          }
-
-          const className = property.key.value || property.key.name;
-          if (!isCamelCase(className)) {
-            context.report(
-              property,
-              `Class \`${className}\` must be camelCase in makeStyles.`
-            );
-          }
-        });
-      }
-    };
-  }
-};
+const { getStyesObj, isCamelCase } = require('../../util/tss');
+
+module.exports = {
+  meta: {
+    type: 'problem'
+  },
+  create: function rule(context) {
+    return {
+      CallExpression(node) {
+        const stylesObj = getStyesObj(node);
+
+        if (stylesObj === undefined) {
+          return;
+        }
+
+        stylesObj.properties.forEach(property => {
+          if (property.computed) {
+            // Skip over computed properties for now.
+            // e.g. `{ [foo]: { ... } }`
+            return;
+          }
+
+          if (
+            property.type === 'ExperimentalSpreadProperty' ||
+            property.type === 'SpreadElement'
+          ) {
+            // Skip over object spread for now.
+            // e.g. `{ ...foo }`
+            return;
+          }
+
+          const className = property.key.value || property.key.name;
+          if (!isCamelCase(className)) {
+            context.report(
+              property,
+              `Class \`${className}\` must be camelCase in makeStyles.`
+            );
+          }
+        });
+      }
+    };
+  }
+};

package/lib/rules/tss/no-color-value.js

@@ -1,58 +1,58 @@
-const { getStyesObj } = require('../../util/tss');
-
-module.exports = {
-  meta: {
-    type: 'problem',
-    docs: {
-      description:
-        'Enforce the use of color variables instead of color codes within makeStyles'
-    }
-  },
-  create: function (context) {
-    const parserOptions = context.parserOptions;
-    if (!parserOptions || !parserOptions.project) {
-      return {};
-    }
-
-    return {
-      CallExpression(node) {
-        const stylesObj = getStyesObj(node);
-        if (!stylesObj) {
-          return;
-        }
-
-        // Check for color codes inside the stylesObj
-        function checkColorLiteral(value) {
-          if (value.type === 'Literal' && typeof value.value === 'string') {
-            const colorCodePattern =
-              /#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})|rgb\?\(\s*(\d{1,3}\s*,\s*){2}\d{1,3}(?:\s*,\s*\d*(?:\.\d+)?)?\s*\)/g;
-            const isColorCode = colorCodePattern.test(value.value);
-            if (isColorCode) {
-              context.report({
-                node: value,
-                message:
-                  'Use color variables instead of color codes in makeStyles.'
-              });
-            }
-          }
-        }
-
-        function loopStylesObj(obj) {
-          if (obj && obj.type === 'ObjectExpression') {
-            obj.properties.forEach(property => {
-              if (property.type === 'Property' && property.value) {
-                if (property.value.type === 'ObjectExpression') {
-                  loopStylesObj(property.value);
-                } else {
-                  checkColorLiteral(property.value);
-                }
-              }
-            });
-          }
-        }
-
-        loopStylesObj(stylesObj);
-      }
-    };
-  }
-};
+const { getStyesObj } = require('../../util/tss');
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Enforce the use of color variables instead of color codes within makeStyles'
+    }
+  },
+  create: function (context) {
+    const parserOptions = context.parserOptions;
+    if (!parserOptions || !parserOptions.project) {
+      return {};
+    }
+
+    return {
+      CallExpression(node) {
+        const stylesObj = getStyesObj(node);
+        if (!stylesObj) {
+          return;
+        }
+
+        // Check for color codes inside the stylesObj
+        function checkColorLiteral(value) {
+          if (value.type === 'Literal' && typeof value.value === 'string') {
+            const colorCodePattern =
+              /#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})|rgb\?\(\s*(\d{1,3}\s*,\s*){2}\d{1,3}(?:\s*,\s*\d*(?:\.\d+)?)?\s*\)/g;
+            const isColorCode = colorCodePattern.test(value.value);
+            if (isColorCode) {
+              context.report({
+                node: value,
+                message:
+                  'Use color variables instead of color codes in makeStyles.'
+              });
+            }
+          }
+        }
+
+        function loopStylesObj(obj) {
+          if (obj && obj.type === 'ObjectExpression') {
+            obj.properties.forEach(property => {
+              if (property.type === 'Property' && property.value) {
+                if (property.value.type === 'ObjectExpression') {
+                  loopStylesObj(property.value);
+                } else {
+                  checkColorLiteral(property.value);
+                }
+              }
+            });
+          }
+        }
+
+        loopStylesObj(stylesObj);
+      }
+    };
+  }
+};