@agilebot/eslint-plugin 0.1.1

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

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

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

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

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

@@ -0,0 +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.slice().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

@@ -0,0 +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 (typeof 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

@@ -0,0 +1,59 @@
+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 =
+              // eslint-disable-next-line max-len
+              /#(?:[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

@@ -0,0 +1,108 @@
+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 (typeof 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/import.js

@@ -0,0 +1,71 @@
+const path = require('path');
+const jiti = require('jiti');
+const { transform } = require('sucrase');
+const { getTsconfig } = require('get-tsconfig');
+
+/**
+ * import ts module, like require, but support ts
+ * @param {*} modulePath - module path
+ */
+function tsImport(modulePath) {
+  if (!modulePath) {
+    return;
+  }
+  /** try to delete cache first */
+  try {
+    if (require.cache[modulePath]) {
+      delete require.cache[modulePath];
+    }
+  } catch (err) {
+    /* empty */
+  }
+
+  try {
+    return require(modulePath);
+  } catch (err) {
+    const tsconfig = getTsconfig(modulePath);
+    const { paths, baseUrl } = tsconfig.config.compilerOptions;
+    let basePath = path.dirname(tsconfig.path);
+    basePath = path.resolve(basePath, baseUrl);
+
+    const alias = resolveTsconfigPathsToAlias(paths, basePath);
+
+    return jiti(__filename, {
+      interopDefault: true,
+      cache: false,
+      debug: !!process.env.DEBUG,
+      transform: options => {
+        return transform(options.source, {
+          transforms: ['imports', 'typescript']
+        });
+      },
+      alias
+    })(modulePath);
+  }
+}
+
+/**
+ * Resolve tsconfig.json paths to Webpack aliases
+ * @param  {string} paths     - tsconfig.json paths
+ * @param  {string} basePath  - Path from tsconfig to Webpack config to create absolute aliases
+ * @return {object}           - Webpack alias config
+ */
+function resolveTsconfigPathsToAlias(paths, basePath = __dirname) {
+  const aliases = {};
+
+  Object.keys(paths).forEach(item => {
+    const key = item.replace('/*', '');
+    const value = path.resolve(
+      basePath,
+      paths[item][0].replace('/*', '').replace('*', '')
+    );
+
+    aliases[key] = value;
+  });
+
+  return aliases;
+}
+
+module.exports = {
+  tsImport
+};

package/lib/util/intl.js

@@ -0,0 +1,127 @@
+/**
+ * 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')
+  ) {
+    if (node.arguments.length && 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

@@ -0,0 +1,14 @@
+/**
+ * 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
+};