@agilebot/eslint-plugin 0.2.2 → 0.2.3

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

@@ -1,87 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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);
-      }
-    };
-  }
-};

package/lib/rules/tss/unused-classes.js

@@ -1,108 +0,0 @@
-const { getBasicIdentifier, getStyesObj } = require('../../util/tss');
-
-module.exports = {
-  meta: {
-    type: 'problem'
-  },
-  create: function rule(context) {
-    const usedClasses = {};
-    const definedClasses = {};
-
-    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;
-          }
-          definedClasses[property.key.value || property.key.name] = property;
-        });
-      },
-
-      MemberExpression(node) {
-        if (
-          node.object.type === 'Identifier' &&
-          node.object.name === 'classes'
-        ) {
-          const whichClass = getBasicIdentifier(node.property);
-          if (whichClass) {
-            usedClasses[whichClass] = true;
-          }
-          return;
-        }
-
-        const classIdentifier = getBasicIdentifier(node.property);
-        if (!classIdentifier) {
-          // props['foo' + bar].baz
-          return;
-        }
-
-        if (classIdentifier !== 'classes') {
-          // props.foo.bar
-          return;
-        }
-
-        const { parent } = node;
-
-        if (parent.type !== 'MemberExpression') {
-          // foo.styles
-          return;
-        }
-
-        if (
-          node.object.object &&
-          node.object.object.type !== 'ThisExpression'
-        ) {
-          // foo.foo.styles
-          return;
-        }
-
-        const propsIdentifier = getBasicIdentifier(parent.object);
-        if (propsIdentifier && propsIdentifier !== 'props') {
-          return;
-        }
-        if (!propsIdentifier && parent.object.type !== 'MemberExpression') {
-          return;
-        }
-
-        if (parent.parent.type === 'MemberExpression') {
-          // this.props.props.styles
-          return;
-        }
-
-        const parentClassIdentifier = getBasicIdentifier(parent.property);
-        if (parentClassIdentifier) {
-          usedClasses[parentClassIdentifier] = true;
-        }
-      },
-      'Program:exit': () => {
-        // Now we know all of the defined classes and used classes, so we can
-        // see if there are any defined classes that are not used.
-        Object.keys(definedClasses).forEach(definedClassKey => {
-          if (!usedClasses[definedClassKey]) {
-            context.report(
-              definedClasses[definedClassKey],
-              `Class \`${definedClassKey}\` is unused`
-            );
-          }
-        });
-      }
-    };
-  }
-};

package/lib/util/intl.js

@@ -1,127 +0,0 @@
-/**
- * Finds an attribute in formatMessage using attribute name.
- *
- * @param {Object} node - parent formatMessage node
- * @param {string} attrName - attribute name.
- * @returns {Object} node - returns node if it finds the attribute.
- */
-function findFormatMessageAttrNode(node, attrName) {
-  // Find formatMessage usages
-  if (
-    node.type === 'CallExpression' &&
-    (node.callee.name === 'formatMessage' || node.callee.name === '$t') &&
-    node.arguments.length > 0 &&
-    node.arguments[0].properties
-  ) {
-    return node.arguments[0].properties.find(
-      a => a.key && a.key.name === attrName
-    );
-  }
-
-  // Find intl.formatMessage usages
-  if (
-    node.type === 'CallExpression' &&
-    node.callee.type === 'MemberExpression' &&
-    (node.callee.object.name === 'intl' ||
-      (node.callee.object.name && node.callee.object.name.endsWith('Intl'))) &&
-    (node.callee.property.name === 'formatMessage' ||
-      node.callee.property.name === '$t')
-  ) {
-    return node.arguments[0].properties.find(
-      a => a.key && a.key.name === attrName
-    );
-  }
-}
-
-/**
- * Finds an attribute in FormattedMessage using attribute name.
- *
- * @param {Object} node - parent FormattedMessage node
- * @param {string} attrName - attribute name.
- * @returns {Object} node - returns node if it finds the attribute.
- */
-function findFormattedMessageAttrNode(node, attrName) {
-  if (
-    node.type === 'JSXIdentifier' &&
-    node.name === 'FormattedMessage' &&
-    node.parent &&
-    node.parent.type === 'JSXOpeningElement'
-  ) {
-    return node.parent.attributes.find(a => a.name && a.name.name === attrName);
-  }
-}
-
-/**
- * Finds an attribute in defineMessages using attribute name.
- *
- * @param {Object} node - parent defineMessages node
- * @param {string} attrName - attribute name.
- * @returns {Object} node - returns node if it finds the attribute.
- */
-function findAttrNodeInDefineMessages(node, attrName) {
-  if (
-    node.type === 'Property' &&
-    node.key.name === attrName &&
-    node.parent &&
-    node.parent.parent &&
-    node.parent.parent.parent &&
-    node.parent.parent.parent.parent &&
-    node.parent.parent.parent.parent.type === 'CallExpression' &&
-    node.parent.parent.parent.parent.callee.name === 'defineMessages'
-  ) {
-    return node;
-  }
-}
-
-/**
- * Finds an attribute in defineMessages using attribute name.
- *
- * @param {Object} node - parent defineMessages node
- * @param {string} attrName - attribute name.
- * @returns {Object} node - returns node if it finds the attribute.
- */
-function findAttrNodeInDefineMessage(node, attrName) {
-  if (
-    node.type === 'Property' &&
-    node.key.name === attrName &&
-    node.parent &&
-    node.parent.parent &&
-    node.parent.parent.type === 'CallExpression' &&
-    node.parent.parent.callee.name === 'defineMessage'
-  ) {
-    return node;
-  }
-}
-
-/**
- * Returns a sorted array of nodes, based on their starting posting in the locale id.
- *
- * @param {Object} node - parent node containing the locale id.
- * @returns {Array} child nodes - sorted list.
- */
-function sortedTemplateElements(node) {
-  return [...node.quasis, ...node.expressions].sort(
-    (a, b) => a.range[0] - b.range[0]
-  );
-}
-
-/**
- * Replaces place holders with asterisk and returns the resulting id.
- *
- * @param {Object} node - parent node containing the locale id.
- * @returns {string} id - fixed id.
- */
-function templateLiteralDisplayStr(node) {
-  return sortedTemplateElements(node)
-    .map(e => (!e.value ? '*' : e.value.raw))
-    .join('');
-}
-
-module.exports = {
-  findFormatMessageAttrNode,
-  findFormattedMessageAttrNode,
-  findAttrNodeInDefineMessages,
-  findAttrNodeInDefineMessage,
-  sortedTemplateElements,
-  templateLiteralDisplayStr
-};

package/lib/util/settings.js

@@ -1,14 +0,0 @@
-/**
- * Get a setting from eslint config
- *
- * @param {object} context - Context
- * @param {string} name - Name
- * @returns {any} result
- */
-function getSetting(context, name) {
-  return context.settings[`agilebot/${name}`];
-}
-
-module.exports = {
-  getSetting
-};

package/lib/util/translations.js

@@ -1,66 +0,0 @@
-const fs = require('node:fs');
-const path = require('node:path');
-const { tsImport } = require('@agilebot/eslint-utils');
-const { getSetting } = require('./settings');
-
-/**
- * Map of locale file paths to keys and modified time
- *
- * @type {{string: {keys: Array, mtime: number}}}
- */
-const localeFilesKeys = {};
-
-/**
- * Get a list of ids keys from reading locale files
- * Keeps track of modified times and reloads if changed,; useful for realtime eslint in-editor
- *
- * @param {object} context - Context
- * @returns {string[]} results - Array of ids
- */
-function getIntlIds(context) {
-  const projectRoot = getSetting(context, 'project-root');
-  const localeFiles = getSetting(context, 'locale-files');
-
-  if (!localeFiles) {
-    throw new Error('localeFiles not in settings');
-  }
-
-  const results = [];
-  localeFiles.forEach(f => {
-    const fullPath = projectRoot ? path.join(projectRoot, f) : f;
-    const mtime = fs.lstatSync(fullPath).mtime.getTime();
-    if (
-      !localeFilesKeys[fullPath] ||
-      mtime !== localeFilesKeys[fullPath].mtime
-    ) {
-      let json;
-      if (fullPath.endsWith('.json')) {
-        json = JSON.parse(fs.readFileSync(fullPath));
-      } else if (fullPath.endsWith('.ts')) {
-        json = tsImport(fullPath);
-        if (typeof json === 'object' && json.default) {
-          json = json.default;
-        }
-      } else if (fullPath.endsWith('.js')) {
-        json = require(fullPath);
-        if (typeof json === 'object' && json.default) {
-          json = json.default;
-        }
-      } else {
-        throw new Error('unsupported file extension');
-      }
-
-      localeFilesKeys[fullPath] = {
-        keys: Object.keys(json),
-        mtime: mtime
-      };
-    }
-    results.push(...localeFilesKeys[fullPath].keys);
-  });
-
-  return results;
-}
-
-module.exports = {
-  getIntlIds
-};