@atlaskit/eslint-plugin-design-system 9.3.0 → 9.4.0

package/dist/cjs/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-bind-all.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isBlockedBindAll = isBlockedBindAll;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _getImportNodeBySource = require("../../utils/get-import-node-by-source");
+var _isBlockedEventBinding = require("../shared/is-blocked-event-binding");
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } // eslint-disable-next-line import/no-extraneous-dependencies
+function isBlockedBindAll(context, node) {
+  var callee = node.callee;
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(callee, 'Identifier')) {
+    return false;
+  }
+  if (callee.name !== 'bindAll') {
+    return false;
+  }
+  var module = (0, _getImportNodeBySource.getModuleOfIdentifier)(context.sourceCode, 'bindAll');
+  if ((module === null || module === void 0 ? void 0 : module.moduleName) !== 'bind-event-listener') {
+    return false;
+  }
+  var secondArg = node.arguments[1];
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(secondArg, 'ArrayExpression')) {
+    return false;
+  }
+  var _iterator = _createForOfIteratorHelper(secondArg.elements),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var element = _step.value;
+      if (!element) {
+        continue;
+      }
+      if (!(0, _eslintCodemodUtils.isNodeOfType)(element, 'ObjectExpression')) {
+        continue;
+      }
+      var _iterator2 = _createForOfIteratorHelper(element.properties),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var property = _step2.value;
+          if ((0, _isBlockedEventBinding.isBlockedEventBinding)(property)) {
+            return true;
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    }
+
+    // no exit conditions hit
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return false;
+}

package/dist/cjs/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-bind.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isBlockedBind = isBlockedBind;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _getImportNodeBySource = require("../../utils/get-import-node-by-source");
+var _isBlockedEventBinding = require("../shared/is-blocked-event-binding");
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } // eslint-disable-next-line import/no-extraneous-dependencies
+function isBlockedBind(context, node) {
+  var callee = node.callee;
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(callee, 'Identifier')) {
+    return false;
+  }
+  if (callee.name !== 'bind') {
+    return false;
+  }
+  var module = (0, _getImportNodeBySource.getModuleOfIdentifier)(context.sourceCode, 'bind');
+  if ((module === null || module === void 0 ? void 0 : module.moduleName) !== 'bind-event-listener') {
+    return false;
+  }
+  var secondArg = node.arguments[1];
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(secondArg, 'ObjectExpression')) {
+    return false;
+  }
+
+  // using a for loop for speed 🚀
+  var _iterator = _createForOfIteratorHelper(secondArg.properties),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var property = _step.value;
+      if ((0, _isBlockedEventBinding.isBlockedEventBinding)(property)) {
+        return true;
+      }
+    }
+
+    // no exit conditions hit
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return false;
+}

package/dist/cjs/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-jsx-attribute.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isBlockedJSXAttribute = isBlockedJSXAttribute;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _getImportNodeBySource = require("../../utils/get-import-node-by-source");
+var _blocked = require("../shared/blocked");
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+function getJSXElementNameFromAttribute(attribute) {
+  var parent = attribute.parent;
+  if (!parent) {
+    return null;
+  }
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(parent, 'JSXOpeningElement')) {
+    return null;
+  }
+  var identifier = parent.name;
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(identifier, 'JSXIdentifier')) {
+    return null;
+  }
+  return identifier.name;
+}
+function isOnIntrinsicJSXElement(attribute) {
+  var name = getJSXElementNameFromAttribute(attribute);
+  if (!name) {
+    return false;
+  }
+  var firstLetter = name.at(0);
+  if (!firstLetter) {
+    return false;
+  }
+  return firstLetter === firstLetter.toLocaleLowerCase();
+}
+function isOnBoxPrimitive(context, attribute) {
+  if (getJSXElementNameFromAttribute(attribute) !== 'Box') {
+    return false;
+  }
+  var module = (0, _getImportNodeBySource.getModuleOfIdentifier)(context.sourceCode, 'Box');
+  return (module === null || module === void 0 ? void 0 : module.moduleName) === '@atlaskit/primitives';
+}
+function isBlockedJSXAttribute(context, node) {
+  var attributeName = node.name;
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(attributeName, 'JSXIdentifier')) {
+    return false;
+  }
+
+  // not using a blocked attribute name, can continue on
+  if (!_blocked.blockedJSXAttributeLookup.has(attributeName.name)) {
+    return false;
+  }
+  return isOnIntrinsicJSXElement(node) || isOnBoxPrimitive(context, node);
+}

package/dist/cjs/rules/no-direct-use-of-web-platform-drag-and-drop/index.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _createRule = require("../utils/create-rule");
+var _isBlockedAddEventListener = require("./checks/is-blocked-add-event-listener");
+var _isBlockedBind = require("./checks/is-blocked-bind");
+var _isBlockedBindAll = require("./checks/is-blocked-bind-all");
+var _isBlockedJsxAttribute = require("./checks/is-blocked-jsx-attribute");
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'no-direct-use-of-web-platform-drag-and-drop',
+    type: 'problem',
+    docs: {
+      recommended: true,
+      severity: 'error',
+      description: 'Disallow using direct use of native drag and drop (please use Pragmatic drag and drop)'
+    },
+    messages: {
+      usePragmaticDnd: 'Please use Pragmatic drag and drop, which makes web platform drag and drop safe and easy to work with.'
+    }
+  },
+  create: function create(context) {
+    return {
+      JSXAttribute: function JSXAttribute(node) {
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXAttribute')) {
+          return;
+        }
+        if ((0, _isBlockedJsxAttribute.isBlockedJSXAttribute)(context, node)) {
+          context.report({
+            messageId: 'usePragmaticDnd',
+            node: node
+          });
+          return;
+        }
+      },
+      CallExpression: function CallExpression(node) {
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression')) {
+          return;
+        }
+        if ((0, _isBlockedAddEventListener.isBlockedAddEventListener)(node) || (0, _isBlockedBind.isBlockedBind)(context, node) || (0, _isBlockedBindAll.isBlockedBindAll)(context, node)) {
+          context.report({
+            messageId: 'usePragmaticDnd',
+            node: node
+          });
+          return;
+        }
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

package/dist/cjs/rules/no-direct-use-of-web-platform-drag-and-drop/shared/blocked.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.blockedJSXAttributeLookup = exports.blockedEventNameLookup = void 0;
+var blockedJSXAttributeLookup = exports.blockedJSXAttributeLookup = new Set(['onDragStart', 'onDragEnter', 'onDragLeave', 'onDragOver', 'onDrag', 'onDrop', 'onDragEnd']);
+var blockedEventNameLookup = exports.blockedEventNameLookup = new Set(['dragstart', 'dragenter', 'dragleave', 'dragover', 'drag', 'drop', 'dragend']);

package/dist/cjs/rules/no-direct-use-of-web-platform-drag-and-drop/shared/is-blocked-event-binding.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isBlockedEventBinding = isBlockedEventBinding;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _blocked = require("./blocked");
+function isBlockedEventBinding(property) {
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(property, 'Property')) {
+    return false;
+  }
+
+  // are we looking at the "type" property?
+
+  var key = property.key;
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(key, 'Identifier')) {
+    return false;
+  }
+  if (key.name !== 'type') {
+    return false;
+  }
+
+  // is the "type" property value blocked?
+
+  var value = property.value;
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(value, 'Literal')) {
+    return false;
+  }
+  return typeof value.value === 'string' && _blocked.blockedEventNameLookup.has(value.value);
+}

package/dist/cjs/rules/utils/create-no-tagged-template-expression-rule/index.js

@@ -80,7 +80,7 @@ var createNoTaggedTemplateExpressionRule = exports.createNoTaggedTemplateExpress
                   return _context.abrupt("return");
                 case 11:
                   args = (0, _toArguments.toArguments)(source, quasi);
-                  if (!((0, _isSupportedImport.isStyledComponents)(node.tag, references, importSources) && args.some(hasMixinInsideNestedSelector))) {
+                  if (!args.some(hasNestedSelectorWithMultipleArguments)) {
                     _context.next = 14;
                     break;
                   }
@@ -140,19 +140,17 @@ var createNoTaggedTemplateExpressionRule = exports.createNoTaggedTemplateExpress
     };
   };
 };
-function hasMixinInsideNestedSelector(arg) {
+function hasNestedSelectorWithMultipleArguments(arg) {
   if (arg.type === 'literal' || arg.type === 'expression' || arg.type === 'declaration') {
     return false;
   }
-  if (arg.type === 'rule' && arg.declarations.length > 1 && arg.declarations.some(function (node) {
-    return node.type === 'expression';
-  })) {
+  if (arg.type === 'rule' && arg.declarations.length > 1) {
     return true;
   }
   if (arg.type === 'block') {
-    return arg.blocks.some(hasMixinInsideNestedSelector);
+    return arg.blocks.some(hasNestedSelectorWithMultipleArguments);
   }
   if (arg.type === 'rule') {
-    return arg.declarations.some(hasMixinInsideNestedSelector);
+    return arg.declarations.some(hasNestedSelectorWithMultipleArguments);
   }
 }

package/dist/es2019/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2e2cf6c0ecfe1b01f3eb24caa223f09e>>
+ * @codegen <<SignedSource::1ab11547db880eba1206f334a9b2150f>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -15,6 +15,7 @@ export default {
     '@atlaskit/design-system/no-deprecated-apis': 'error',
     '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
     '@atlaskit/design-system/no-deprecated-imports': 'error',
+    '@atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop': 'error',
     '@atlaskit/design-system/no-empty-styled-expression': 'warn',
     '@atlaskit/design-system/no-exported-css': 'warn',
     '@atlaskit/design-system/no-exported-keyframes': 'warn',

package/dist/es2019/presets/recommended.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::aebc778f0b10032cbb2941b55189d766>>
+ * @codegen <<SignedSource::05b4fe8f97edc4f7e46ded52b4917037>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -13,6 +13,7 @@ export default {
     '@atlaskit/design-system/no-deprecated-apis': 'error',
     '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
     '@atlaskit/design-system/no-deprecated-imports': 'error',
+    '@atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop': 'error',
     '@atlaskit/design-system/no-empty-styled-expression': 'warn',
     '@atlaskit/design-system/no-exported-css': 'warn',
     '@atlaskit/design-system/no-exported-keyframes': 'warn',

package/dist/es2019/rules/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::eb5c94901f711e67446ba88f0630bf76>>
+ * @codegen <<SignedSource::293575f7bd0150862f792e3fffc286c4>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -12,6 +12,7 @@ import noCssTaggedTemplateExpression from './no-css-tagged-template-expression';
 import noDeprecatedApis from './no-deprecated-apis';
 import noDeprecatedDesignTokenUsage from './no-deprecated-design-token-usage';
 import noDeprecatedImports from './no-deprecated-imports';
+import noDirectUseOfWebPlatformDragAndDrop from './no-direct-use-of-web-platform-drag-and-drop';
 import noEmptyStyledExpression from './no-empty-styled-expression';
 import noExportedCss from './no-exported-css';
 import noExportedKeyframes from './no-exported-keyframes';
@@ -46,6 +47,7 @@ export default {
   'no-deprecated-apis': noDeprecatedApis,
   'no-deprecated-design-token-usage': noDeprecatedDesignTokenUsage,
   'no-deprecated-imports': noDeprecatedImports,
+  'no-direct-use-of-web-platform-drag-and-drop': noDirectUseOfWebPlatformDragAndDrop,
   'no-empty-styled-expression': noEmptyStyledExpression,
   'no-exported-css': noExportedCss,
   'no-exported-keyframes': noExportedKeyframes,

package/dist/es2019/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-add-event-listener.js

@@ -0,0 +1,25 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { blockedEventNameLookup } from '../shared/blocked';
+export function isBlockedAddEventListener(node) {
+  const callee = node.callee;
+  if (!isNodeOfType(callee, 'MemberExpression')) {
+    return false;
+  }
+  const property = callee.property;
+  if (!isNodeOfType(property, 'Identifier')) {
+    return false;
+  }
+  if (property.name !== 'addEventListener') {
+    return false;
+  }
+
+  // check the first argument
+  const first = node.arguments[0];
+
+  // only checking literals for this eslint rule
+  if (!isNodeOfType(first, 'Literal')) {
+    return false;
+  }
+  const value = first.value;
+  return typeof value === 'string' && blockedEventNameLookup.has(value);
+}

package/dist/es2019/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-bind-all.js

@@ -0,0 +1,38 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { getModuleOfIdentifier } from '../../utils/get-import-node-by-source';
+import { isBlockedEventBinding } from '../shared/is-blocked-event-binding';
+export function isBlockedBindAll(context, node) {
+  const callee = node.callee;
+  if (!isNodeOfType(callee, 'Identifier')) {
+    return false;
+  }
+  if (callee.name !== 'bindAll') {
+    return false;
+  }
+  const module = getModuleOfIdentifier(context.sourceCode, 'bindAll');
+  if ((module === null || module === void 0 ? void 0 : module.moduleName) !== 'bind-event-listener') {
+    return false;
+  }
+  const secondArg = node.arguments[1];
+  if (!isNodeOfType(secondArg, 'ArrayExpression')) {
+    return false;
+  }
+  for (const element of secondArg.elements) {
+    if (!element) {
+      continue;
+    }
+    if (!isNodeOfType(element, 'ObjectExpression')) {
+      continue;
+    }
+    for (const property of element.properties) {
+      if (isBlockedEventBinding(property)) {
+        return true;
+      }
+    }
+  }
+
+  // no exit conditions hit
+  return false;
+}

package/dist/es2019/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-bind.js

@@ -0,0 +1,33 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { getModuleOfIdentifier } from '../../utils/get-import-node-by-source';
+import { isBlockedEventBinding } from '../shared/is-blocked-event-binding';
+export function isBlockedBind(context, node) {
+  const callee = node.callee;
+  if (!isNodeOfType(callee, 'Identifier')) {
+    return false;
+  }
+  if (callee.name !== 'bind') {
+    return false;
+  }
+  const module = getModuleOfIdentifier(context.sourceCode, 'bind');
+  if ((module === null || module === void 0 ? void 0 : module.moduleName) !== 'bind-event-listener') {
+    return false;
+  }
+  const secondArg = node.arguments[1];
+  if (!isNodeOfType(secondArg, 'ObjectExpression')) {
+    return false;
+  }
+
+  // using a for loop for speed 🚀
+
+  for (const property of secondArg.properties) {
+    if (isBlockedEventBinding(property)) {
+      return true;
+    }
+  }
+
+  // no exit conditions hit
+  return false;
+}

package/dist/es2019/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-jsx-attribute.js

@@ -0,0 +1,49 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { getModuleOfIdentifier } from '../../utils/get-import-node-by-source';
+import { blockedJSXAttributeLookup } from '../shared/blocked';
+function getJSXElementNameFromAttribute(attribute) {
+  const parent = attribute.parent;
+  if (!parent) {
+    return null;
+  }
+  if (!isNodeOfType(parent, 'JSXOpeningElement')) {
+    return null;
+  }
+  const identifier = parent.name;
+  if (!isNodeOfType(identifier, 'JSXIdentifier')) {
+    return null;
+  }
+  return identifier.name;
+}
+function isOnIntrinsicJSXElement(attribute) {
+  const name = getJSXElementNameFromAttribute(attribute);
+  if (!name) {
+    return false;
+  }
+  const firstLetter = name.at(0);
+  if (!firstLetter) {
+    return false;
+  }
+  return firstLetter === firstLetter.toLocaleLowerCase();
+}
+function isOnBoxPrimitive(context, attribute) {
+  if (getJSXElementNameFromAttribute(attribute) !== 'Box') {
+    return false;
+  }
+  const module = getModuleOfIdentifier(context.sourceCode, 'Box');
+  return (module === null || module === void 0 ? void 0 : module.moduleName) === '@atlaskit/primitives';
+}
+export function isBlockedJSXAttribute(context, node) {
+  const attributeName = node.name;
+  if (!isNodeOfType(attributeName, 'JSXIdentifier')) {
+    return false;
+  }
+
+  // not using a blocked attribute name, can continue on
+  if (!blockedJSXAttributeLookup.has(attributeName.name)) {
+    return false;
+  }
+  return isOnIntrinsicJSXElement(node) || isOnBoxPrimitive(context, node);
+}

package/dist/es2019/rules/no-direct-use-of-web-platform-drag-and-drop/index.js

@@ -0,0 +1,49 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+import { isBlockedAddEventListener } from './checks/is-blocked-add-event-listener';
+import { isBlockedBind } from './checks/is-blocked-bind';
+import { isBlockedBindAll } from './checks/is-blocked-bind-all';
+import { isBlockedJSXAttribute } from './checks/is-blocked-jsx-attribute';
+const rule = createLintRule({
+  meta: {
+    name: 'no-direct-use-of-web-platform-drag-and-drop',
+    type: 'problem',
+    docs: {
+      recommended: true,
+      severity: 'error',
+      description: 'Disallow using direct use of native drag and drop (please use Pragmatic drag and drop)'
+    },
+    messages: {
+      usePragmaticDnd: 'Please use Pragmatic drag and drop, which makes web platform drag and drop safe and easy to work with.'
+    }
+  },
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        if (!isNodeOfType(node, 'JSXAttribute')) {
+          return;
+        }
+        if (isBlockedJSXAttribute(context, node)) {
+          context.report({
+            messageId: 'usePragmaticDnd',
+            node
+          });
+          return;
+        }
+      },
+      CallExpression(node) {
+        if (!isNodeOfType(node, 'CallExpression')) {
+          return;
+        }
+        if (isBlockedAddEventListener(node) || isBlockedBind(context, node) || isBlockedBindAll(context, node)) {
+          context.report({
+            messageId: 'usePragmaticDnd',
+            node
+          });
+          return;
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/es2019/rules/no-direct-use-of-web-platform-drag-and-drop/shared/blocked.js

@@ -0,0 +1,2 @@
+export const blockedJSXAttributeLookup = new Set(['onDragStart', 'onDragEnter', 'onDragLeave', 'onDragOver', 'onDrag', 'onDrop', 'onDragEnd']);
+export const blockedEventNameLookup = new Set(['dragstart', 'dragenter', 'dragleave', 'dragover', 'drag', 'drop', 'dragend']);

package/dist/es2019/rules/no-direct-use-of-web-platform-drag-and-drop/shared/is-blocked-event-binding.js

@@ -0,0 +1,25 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { blockedEventNameLookup } from './blocked';
+export function isBlockedEventBinding(property) {
+  if (!isNodeOfType(property, 'Property')) {
+    return false;
+  }
+
+  // are we looking at the "type" property?
+
+  const key = property.key;
+  if (!isNodeOfType(key, 'Identifier')) {
+    return false;
+  }
+  if (key.name !== 'type') {
+    return false;
+  }
+
+  // is the "type" property value blocked?
+
+  const value = property.value;
+  if (!isNodeOfType(value, 'Literal')) {
+    return false;
+  }
+  return typeof value.value === 'string' && blockedEventNameLookup.has(value.value);
+}

package/dist/es2019/rules/utils/create-no-tagged-template-expression-rule/index.js

@@ -2,7 +2,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 import esquery from 'esquery';
-import { getImportSources, isEmotion, isStyledComponents } from '@atlaskit/eslint-utils/is-supported-import';
+import { getImportSources, isEmotion } from '@atlaskit/eslint-utils/is-supported-import';
 import { generate } from './generate';
 import { getTaggedTemplateExpressionOffset } from './get-tagged-template-expression-offset';
 import { toArguments } from './to-arguments';
@@ -60,11 +60,23 @@ export const createNoTaggedTemplateExpressionRule = (isUsage, messageId) => cont
             return;
           }
           const args = toArguments(source, quasi);
-          if (isStyledComponents(node.tag, references, importSources) && args.some(hasMixinInsideNestedSelector)) {
+          if (args.some(hasNestedSelectorWithMultipleArguments)) {
             /**
-             * Styled components doesn't support arrays as style object values,
-             * so we cannot autofix mixins as we cannot combine them with the other
-             * properties in the object.
+             * We don't want to autofix if we would produce an array value, for example:
+             * ```
+             * styled.div({
+             *  ':hover': [
+             *    mixin,
+             *    {
+             *      color: 'red'
+             *    }
+             *  ]
+             * })
+             * ```
+             *
+             * This should only occur if there is a mixin in a nested selector.
+             *
+             * The array syntax is only supported by emotion.
              */
             return;
           }
@@ -136,17 +148,17 @@ export const createNoTaggedTemplateExpressionRule = (isUsage, messageId) => cont
     }
   };
 };
-function hasMixinInsideNestedSelector(arg) {
+function hasNestedSelectorWithMultipleArguments(arg) {
   if (arg.type === 'literal' || arg.type === 'expression' || arg.type === 'declaration') {
     return false;
   }
-  if (arg.type === 'rule' && arg.declarations.length > 1 && arg.declarations.some(node => node.type === 'expression')) {
+  if (arg.type === 'rule' && arg.declarations.length > 1) {
     return true;
   }
   if (arg.type === 'block') {
-    return arg.blocks.some(hasMixinInsideNestedSelector);
+    return arg.blocks.some(hasNestedSelectorWithMultipleArguments);
   }
   if (arg.type === 'rule') {
-    return arg.declarations.some(hasMixinInsideNestedSelector);
+    return arg.declarations.some(hasNestedSelectorWithMultipleArguments);
   }
 }

package/dist/esm/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2e2cf6c0ecfe1b01f3eb24caa223f09e>>
+ * @codegen <<SignedSource::1ab11547db880eba1206f334a9b2150f>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -15,6 +15,7 @@ export default {
     '@atlaskit/design-system/no-deprecated-apis': 'error',
     '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
     '@atlaskit/design-system/no-deprecated-imports': 'error',
+    '@atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop': 'error',
     '@atlaskit/design-system/no-empty-styled-expression': 'warn',
     '@atlaskit/design-system/no-exported-css': 'warn',
     '@atlaskit/design-system/no-exported-keyframes': 'warn',