@atlaskit/eslint-plugin-design-system 4.0.0 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 4.2.0
+
+### Minor Changes
+
+- [`afc248d2ded`](https://bitbucket.org/atlassian/atlassian-frontend/commits/afc248d2ded) - Adds a new rule, `use-visually-hidden` to complement the `@atlaskit/visually-hidden` component.
+- [`0c0a8b5dff4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0c0a8b5dff4) - Adds an additional rule 'no-deprecated-api-usage'. This rule targets APIs/props in the Design System that we intend to remove completely. This rule should be used by all product repos as it will provide an early warning of expected deprecations.
+- [`93d6f8856f2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/93d6f8856f2) - @atlaskit/icon-priority has been deprecated due to low usage. It will be deleted after 21 April 2022. If you rely on these icons, @atlaskit/icon-priority will still be available as a deprecated package on NPM, but we recommend self-hosting and managing.
+
+## 4.1.1
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
+- Updated dependencies
+
+## 4.1.0
+
+### Minor Changes
+
+- [`52fbe80eeb5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/52fbe80eeb5) - Moved logic for detecting deprecated tokens out of no-unsafe-design-token-usage and moves it into a new rule: no-deprecated-token-usage. This rule is solely reponsible for catching usage of deprecated tokens. In most cases this allows consumers to set this rule to "warn", allowing iterative migration to new token names rather than in a big bang.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.0.1
+
+### Patch Changes
+
+- [`7da1a30902a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7da1a30902a) - Adds missing meta to `ensure-design-token-usage` rule.
+
 ## 4.0.0
 
 ### Major Changes

package/dist/cjs/index.js

@@ -5,25 +5,36 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.configs = exports.rules = void 0;
+exports.rules = exports.configs = void 0;
 
 var _ensureDesignTokenUsage = _interopRequireDefault(require("./rules/ensure-design-token-usage"));
 
+var _noDeprecatedApis = _interopRequireDefault(require("./rules/no-deprecated-apis"));
+
+var _noDeprecatedDesignTokenUsage = _interopRequireDefault(require("./rules/no-deprecated-design-token-usage"));
+
 var _noDeprecatedImports = _interopRequireDefault(require("./rules/no-deprecated-imports"));
 
 var _noUnsafeDesignTokenUsage = _interopRequireDefault(require("./rules/no-unsafe-design-token-usage"));
 
+var _useVisuallyHidden = _interopRequireDefault(require("./rules/use-visually-hidden"));
+
 var rules = {
   'ensure-design-token-usage': _ensureDesignTokenUsage.default,
   'no-unsafe-design-token-usage': _noUnsafeDesignTokenUsage.default,
-  'no-deprecated-imports': _noDeprecatedImports.default
+  'no-deprecated-design-token-usage': _noDeprecatedDesignTokenUsage.default,
+  'no-deprecated-imports': _noDeprecatedImports.default,
+  'no-deprecated-apis': _noDeprecatedApis.default,
+  'use-visually-hidden': _useVisuallyHidden.default
 };
 exports.rules = rules;
 var configs = {
   recommended: {
     plugins: ['@atlaskit/design-system'],
     rules: {
-      '@atlaskit/design-system/no-deprecated-imports': 'error'
+      '@atlaskit/design-system/no-deprecated-imports': 'error',
+      '@atlaskit/design-system/use-visually-hidden': 'error',
+      '@atlaskit/design-system/no-deprecated-apis': 'warn'
     }
   }
 };

package/dist/cjs/rules/ensure-design-token-usage/index.js

@@ -43,6 +43,9 @@ var filterSuggestion = function filterSuggestion(_ref) {
 
 var rule = {
   meta: {
+    // We need to upgrade the version of ESLint.
+    // @ts-expect-error
+    hasSuggestions: true,
     docs: {
       recommended: true
     },

package/dist/cjs/rules/no-deprecated-apis/index.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _getImportNodeBySource = require("../utils/get-import-node-by-source");
+
+var _isNode = require("../utils/is-node");
+
+// eslint-disable-next-line import/no-unresolved
+var unsafeOverridesConfig = {
+  cssFn: ['@atlaskit/menu', '@atlaskit/side-navigation'],
+  overrides: ['@atlaskit/drawer', '@atlaskit/menu', '@atlaskit/side-navigation']
+};
+var unsafeOverrides = ['cssFn', 'overrides'];
+var rule = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Disallow specified APIs that have been marked as deprecated and/or discouraged.',
+      recommended: true
+    },
+    messages: {
+      noDeprecatedApis: "The prop \"{{propName}}\" has been deprecated. It will be removed in the next major release."
+    }
+  },
+  create: function create(context) {
+    return {
+      // find JSX atribute - find name of attribute - get source and find relevant identifiers.
+      JSXAttribute: function (_JSXAttribute) {
+        function JSXAttribute(_x) {
+          return _JSXAttribute.apply(this, arguments);
+        }
+
+        JSXAttribute.toString = function () {
+          return _JSXAttribute.toString();
+        };
+
+        return JSXAttribute;
+      }(function (node) {
+        var _node$name, _closesetJSXElement$n;
+
+        if (!unsafeOverrides.includes(node === null || node === void 0 ? void 0 : (_node$name = node.name) === null || _node$name === void 0 ? void 0 : _node$name.name)) {
+          return;
+        }
+
+        var source = context.getSourceCode();
+        var bannedApi = node.name.name; // traverse the tree to the nearest JSX Element and get its name
+
+        var closesetJSXElement = (0, _isNode.getClosestNodeOfType)(node, 'JSXOpeningElement'); // @ts-ignore
+
+        var jsxElementName = closesetJSXElement === null || closesetJSXElement === void 0 ? void 0 : (_closesetJSXElement$n = closesetJSXElement.name) === null || _closesetJSXElement$n === void 0 ? void 0 : _closesetJSXElement$n.name;
+
+        if (!jsxElementName) {
+          return;
+        } // find an import for the path of the banned api
+
+
+        unsafeOverridesConfig[bannedApi].forEach(function (path) {
+          var importNode = (0, _getImportNodeBySource.getImportedNodeBySource)(source, path);
+
+          if (!importNode) {
+            return;
+          } // find an import that matches our JSX element
+
+
+          var hasTargetNode = importNode.specifiers.some(function (node) {
+            return node.local.name === jsxElementName;
+          });
+
+          if (!hasTargetNode) {
+            return;
+          } // if we're here the import exists and there is a valid lint error.
+
+
+          context.report({
+            node: node,
+            messageId: 'noDeprecatedApis',
+            data: {
+              propName: bannedApi
+            }
+          });
+        });
+      })
+    };
+  }
+};
+var _default = rule;
+exports.default = _default;

package/dist/cjs/rules/no-deprecated-design-token-usage/index.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _renameMapping = _interopRequireDefault(require("@atlaskit/tokens/rename-mapping"));
+
+var getCleanPathId = function getCleanPathId(path) {
+  return path.split('.').filter(function (el) {
+    return el !== '[default]';
+  }).join('.');
+};
+
+var rule = {
+  meta: {
+    docs: {
+      recommended: true
+    },
+    fixable: 'code',
+    type: 'problem',
+    messages: {
+      tokenRenamed: 'The token "{{name}}" is deprecated in favour of "{{replacement}}".'
+    }
+  },
+  create: function create(context) {
+    return {
+      'CallExpression[callee.name="token"]': function CallExpressionCalleeNameToken(node) {
+        if (node.type !== 'CallExpression') {
+          return;
+        }
+
+        if (node.arguments[0].type !== 'Literal') {
+          return;
+        }
+
+        var tokenKey = node.arguments[0].value;
+
+        if (!tokenKey) {
+          return;
+        }
+
+        if (typeof tokenKey !== 'string') {
+          return;
+        }
+
+        var migrationMeta = _renameMapping.default.filter(function (t) {
+          return t.state === 'deprecated';
+        }).find(function (t) {
+          return t.path === tokenKey;
+        });
+
+        if (migrationMeta) {
+          var cleanTokenKey = getCleanPathId(migrationMeta.replacement);
+          context.report({
+            messageId: 'tokenRenamed',
+            node: node,
+            data: {
+              name: tokenKey,
+              replacement: cleanTokenKey
+            },
+            fix: function fix(fixer) {
+              return fixer.replaceText(node.arguments[0], "'".concat(cleanTokenKey, "'"));
+            }
+          });
+          return;
+        }
+      }
+    };
+  }
+};
+var _default = rule;
+exports.default = _default;

package/dist/cjs/rules/no-deprecated-imports/index.js

@@ -31,18 +31,24 @@ var rule = {
     }
   },
   create: function create(context) {
-    var sourceCode = context.getSourceCode();
-
     var restrictedPathMessages = _paths.restrictedPaths.reduce(function (memo, importSource) {
       if (typeof importSource === 'string') {
         memo[importSource] = {
           message: ''
         };
       } else {
-        memo[importSource.name] = {
-          message: importSource.message // importNames: importSource.importNames
+        if ('message' in importSource) {
+          memo[importSource.path] = {
+            message: importSource.message
+          };
+        }
 
-        };
+        if ('imports' in importSource) {
+          memo[importSource.path] = {
+            // @ts-ignore
+            imports: importSource.imports
+          };
+        }
       }
 
       return memo;
@@ -50,27 +56,46 @@ var rule = {
     /**
      * Report a restricted path.
      * @param {string} importSource path of the import
-     * @param {Map<string,Object[]>} importNames Map of import names that are being imported
      * @param {node} node representing the restricted path reference
+     * @param {Map<string,Rule.Node>} importNames Map of import names that are being imported
      * @returns {void}
      * @private
      */
 
 
-    function checkRestrictedPathAndReport(importSource, importNames, node) {
+    function checkRestrictedPathAndReport(importSource, node, importNames) {
       if (!Object.prototype.hasOwnProperty.call(restrictedPathMessages, importSource)) {
         return;
       }
 
-      var customMessage = restrictedPathMessages[importSource].message;
-      context.report({
-        node: node,
-        messageId: customMessage ? 'pathWithCustomMessage' : 'path',
-        data: {
-          importSource: importSource,
-          customMessage: customMessage
-        }
-      });
+      var config = restrictedPathMessages[importSource]; // The message will only exist if the import is completely banned,
+      // eg a deprecated package
+
+      if ('message' in config) {
+        context.report({
+          node: node,
+          messageId: config.message ? 'pathWithCustomMessage' : 'path',
+          data: {
+            importSource: importSource,
+            customMessage: config.message
+          }
+        });
+      } // if there are specific named exports that are banned,
+      // iterate through and check if they're being imported
+
+
+      if ('imports' in config) {
+        var _config$imports;
+
+        (_config$imports = config.imports) === null || _config$imports === void 0 ? void 0 : _config$imports.forEach(function (restrictedImport) {
+          if (importNames.has(restrictedImport.importName)) {
+            context.report({
+              node: importNames.get(restrictedImport.importName),
+              message: restrictedImport.message
+            });
+          }
+        });
+      }
     }
     /**
      * Checks a node to see if any problems should be reported.
@@ -84,12 +109,7 @@ var rule = {
       var importSource = node.source.value.trim();
       var importNames = new Map();
 
-      if (node.type === 'ExportAllDeclaration') {
-        var starToken = sourceCode.getFirstToken(node, 1);
-        importNames.set('*', [{
-          loc: starToken === null || starToken === void 0 ? void 0 : starToken.loc
-        }]);
-      } else if ('specifiers' in node) {
+      if ('specifiers' in node) {
         // @ts-ignore
         var _iterator = _createForOfIteratorHelper(node.specifiers),
             _step;
@@ -98,9 +118,6 @@ var rule = {
           for (_iterator.s(); !(_step = _iterator.n()).done;) {
             var specifier = _step.value;
             var name = void 0;
-            var specifierData = {
-              loc: specifier.loc
-            };
 
             if (specifier.type === 'ImportDefaultSpecifier') {
               name = 'default';
@@ -113,11 +130,7 @@ var rule = {
             }
 
             if (name) {
-              if (importNames.has(name)) {
-                importNames.get(name).push(specifierData);
-              } else {
-                importNames.set(name, [specifierData]);
-              }
+              importNames.set(name, specifier);
             }
           }
         } catch (err) {
@@ -127,7 +140,7 @@ var rule = {
         }
       }
 
-      checkRestrictedPathAndReport(importSource, importNames, node);
+      checkRestrictedPathAndReport(importSource, node, importNames);
     };
 
     return {
@@ -136,8 +149,7 @@ var rule = {
         if (node.source) {
           checkNode(node);
         }
-      },
-      ExportAllDeclaration: checkNode
+      }
     };
   }
 };

package/dist/cjs/rules/no-deprecated-imports/paths.js

@@ -3,48 +3,76 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.restrictedPaths = void 0;
+exports.restrictedPaths = exports.namedThemeExports = void 0;
+var namedThemeExports = [{
+  importName: 'assistive',
+  message: 'The assistive mixin is deprecated. Please use `@atlaskit/visually-hidden` instead.'
+}, {
+  importName: 'visuallyHidden',
+  message: 'The visuallyHidden mixin is deprecated. Please use `@atlaskit/visually-hidden` instead.'
+}, {
+  importName: 'focusRing',
+  message: 'The focusRing mixin is deprecated. Please use `@atlaskit/visually-hidden` instead.'
+}];
+exports.namedThemeExports = namedThemeExports;
 var restrictedPaths = [{
-  name: '@atlaskit/navigation-next',
+  path: '@atlaskit/navigation-next',
   message: "navigation-next is deprecated. Please use '@atlaskit/atlassian-navigation' instead."
 }, {
-  name: '@atlaskit/field-base',
+  path: '@atlaskit/field-base',
   message: "field-base is deprecated. Please use the '@atlaskit/form' package instead."
 }, {
-  name: '@atlaskit/field-radio-group',
+  path: '@atlaskit/field-radio-group',
   message: "field-radio-group is deprecated. Please use '@atlaskit/radio' instead, and check the migration guide."
 }, {
-  name: '@atlaskit/field-range',
+  path: '@atlaskit/field-range',
   message: "field-range is deprecated. Please use '@atlaskit/range' instead."
 }, {
-  name: '@atlaskit/field-text',
+  path: '@atlaskit/field-text',
   message: "field-text is deprecated. Please use '@atlaskit/textfield' instead."
 }, {
-  name: '@atlaskit/field-text-area',
+  path: '@atlaskit/field-text-area',
   message: "field-text-area is deprecated. Please use '@atlaskit/textarea' instead."
 }, {
-  name: '@atlaskit/navigation',
+  path: '@atlaskit/navigation',
   message: "navigation is deprecated. Please use '@atlaskit/atlassian-navigation' instead."
 }, {
-  name: '@atlaskit/global-navigation',
+  path: '@atlaskit/global-navigation',
   message: "global-navigation is deprecated. Please use '@atlaskit/atlassian-navigation' for the horizontal nav bar, '@atlaskit/side-navigation' for the side nav, and '@atlaskit/page-layout' to layout your application."
 }, {
-  name: '@atlaskit/input',
+  path: '@atlaskit/input',
   message: 'input is deprecated. This was an internal component and should not be used directly.'
 }, {
-  name: '@atlaskit/layer',
+  path: '@atlaskit/layer',
   message: 'layer is deprecated. This was an internal component and should not be used directly.'
 }, {
-  name: '@atlaskit/single-select',
+  path: '@atlaskit/single-select',
   message: "single-select is deprecated. Please use '@atlaskit/select' instead."
 }, {
-  name: '@atlaskit/multi-select',
+  path: '@atlaskit/multi-select',
   message: "multi-select is deprecated. Please use '@atlaskit/select' instead."
 }, {
-  name: '@atlaskit/droplist',
+  path: '@atlaskit/droplist',
   message: "droplist is deprecated. For the pop-up behaviour please use '@atlaskit/popup' and for common menu components please use '@atlaskit/menu'."
 }, {
-  name: '@atlaskit/item',
+  path: '@atlaskit/item',
   message: "item is deprecated. Please use '@atlaskit/menu' instead."
+}, // TODO uncomment me when we formally deprecate typography
+// {
+//   path: '@atlaskit/theme/typography',
+//   message: 'The typography mixins are deprecated. Please use `@atlaskit/heading` instead.',
+// },
+{
+  path: '@atlaskit/theme/constants',
+  imports: namedThemeExports
+}, {
+  path: '@atlaskit/theme',
+  imports: namedThemeExports // .concat(
+  //   { importName: 'typography', message: 'The typography mixins are deprecated. Please use `@atlaskit/heading` instead.',}
+  // )
+
+}, {
+  path: '@atlaskit/icon-priority',
+  message: "icon-priority is deprecated due to limited usage in Cloud products. It will be deleted after 21 April 2022."
 }];
 exports.restrictedPaths = restrictedPaths;

package/dist/cjs/rules/no-unsafe-design-token-usage/index.js

@@ -15,6 +15,12 @@ var _isNode = require("../utils/is-node");
 
 var _isToken = require("../utils/is-token");
 
+var getCleanPathId = function getCleanPathId(path) {
+  return path.split('.').filter(function (el) {
+    return el !== '[default]';
+  }).join('.');
+};
+
 var defaultConfig = {
   shouldEnforceFallbacks: false
 };
@@ -29,7 +35,7 @@ var rule = {
       directTokenUsage: "Access the global theme using the token function.\n\n```\nimport { token } from '@atlaskit/tokens';\n\ntoken('{{tokenKey}}');\n```\n",
       staticToken: "Token string should be inlined directly into the function call.\n\n```\ntoken('color.background.blanket');\n```\n",
       invalidToken: 'The token "{{name}}" does not exist.',
-      tokenRenamed: 'The token "{{name}}" has been renamed.',
+      tokenRemoved: 'The token "{{name}}" is removed in favour of "{{replacement}}".',
       tokenFallbackEnforced: "Token function requires a fallback, preferably something that best matches the light/default theme in case tokens aren't present.\n\n```\ntoken('color.background.blanket', N500A);\n```\n      ",
       tokenFallbackRestricted: "Token function must not use a fallback.\n\n```\ntoken('color.background.blanket');\n```\n      "
     }
@@ -130,15 +136,23 @@ var rule = {
           return;
         }
 
-        if (typeof tokenKey === 'string' && tokenKey in _renameMapping.default) {
+        var migrationMeta = _renameMapping.default.filter(function (t) {
+          return t.state === 'deleted';
+        }).find(function (t) {
+          return t.path === tokenKey;
+        });
+
+        if (typeof tokenKey === 'string' && migrationMeta) {
+          var cleanTokenKey = getCleanPathId(migrationMeta.replacement);
           context.report({
-            messageId: 'tokenRenamed',
+            messageId: 'tokenRemoved',
             node: node,
             data: {
-              name: tokenKey
+              name: tokenKey,
+              replacement: cleanTokenKey
             },
             fix: function fix(fixer) {
-              return fixer.replaceText(node.arguments[0], "'".concat(_renameMapping.default[tokenKey], "'"));
+              return fixer.replaceText(node.arguments[0], "'".concat(cleanTokenKey, "'"));
             }
           });
           return;

package/dist/cjs/rules/use-visually-hidden/constants.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VISUALLY_HIDDEN_SOURCE = exports.VISUALLY_HIDDEN_IMPORT = exports.IMPORT_NAME = void 0;
+var IMPORT_NAME = 'AKVisuallyHidden';
+exports.IMPORT_NAME = IMPORT_NAME;
+var VISUALLY_HIDDEN_SOURCE = '@atlaskit/visually-hidden';
+exports.VISUALLY_HIDDEN_SOURCE = VISUALLY_HIDDEN_SOURCE;
+var VISUALLY_HIDDEN_IMPORT = "import ".concat(IMPORT_NAME, " from '").concat(VISUALLY_HIDDEN_SOURCE, "';\n");
+exports.VISUALLY_HIDDEN_IMPORT = VISUALLY_HIDDEN_IMPORT;

package/dist/cjs/rules/use-visually-hidden/fix-jsx.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _getImportNodeBySource = require("../utils/get-import-node-by-source");
+
+var _isNode = require("../utils/is-node");
+
+var _constants = require("./constants");
+
+var _utils = require("./utils");
+
+var _default = function _default(source, node) {
+  return function (fixer) {
+    var fixes = [];
+    var importedNode = (0, _utils.getFirstImport)(source);
+    var visuallyHiddenNode = (0, _getImportNodeBySource.getImportedNodeBySource)(source, _constants.VISUALLY_HIDDEN_SOURCE);
+
+    if (!importedNode) {
+      return [];
+    }
+
+    var jsxOpeningElement = (0, _isNode.getClosestNodeOfType)(node, 'JSXOpeningElement');
+
+    if (visuallyHiddenNode) {
+      fixes.push(fixer.replaceText(jsxOpeningElement, visuallyHiddenNode.specifiers[0].local.name));
+    } else {
+      fixes.push(fixer.insertTextBefore(importedNode, _constants.VISUALLY_HIDDEN_IMPORT));
+      fixes.push(fixer.replaceText(jsxOpeningElement, "<".concat(_constants.IMPORT_NAME, " />")));
+    }
+
+    return fixes;
+  };
+};
+
+exports.default = _default;

package/dist/cjs/rules/use-visually-hidden/fix-vanilla.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _getImportNodeBySource = require("../utils/get-import-node-by-source");
+
+var _constants = require("./constants");
+
+var _utils = require("./utils");
+
+var _default = function _default(source, node) {
+  return function (fixer) {
+    var fixes = [];
+    var importedNode = (0, _utils.getFirstImport)(source);
+    var visuallyHiddenNode = (0, _getImportNodeBySource.getImportedNodeBySource)(source, _constants.VISUALLY_HIDDEN_SOURCE);
+
+    if (!importedNode) {
+      return [];
+    }
+
+    if (visuallyHiddenNode) {
+      fixes.push(fixer.replaceText(node, visuallyHiddenNode.specifiers[0].local.name));
+    } else {
+      fixes.push(fixer.insertTextBefore(importedNode, _constants.VISUALLY_HIDDEN_IMPORT));
+      fixes.push(fixer.replaceText(node, _constants.IMPORT_NAME));
+    }
+
+    return fixes;
+  };
+};
+
+exports.default = _default;