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

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

@@ -0,0 +1,81 @@
+// eslint-disable-next-line import/no-unresolved
+import { getImportedNodeBySource } from '../utils/get-import-node-by-source';
+import { getClosestNodeOfType } from '../utils/is-node';
+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 = 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 = 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
+            }
+          });
+        });
+      })
+    };
+  }
+};
+export default rule;

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

@@ -0,0 +1,66 @@
+import renameMapping from '@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.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;
+        }
+      }
+    };
+  }
+};
+export default rule;

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

@@ -49,17 +49,24 @@ var rule = {
     }
   },
   create: function create(context) {
-    var sourceCode = context.getSourceCode();
     var restrictedPathMessages = 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;
@@ -67,26 +74,45 @@ 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.
@@ -100,12 +126,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;
@@ -114,9 +135,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';
@@ -129,11 +147,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) {
@@ -143,7 +157,7 @@ var rule = {
         }
       }
 
-      checkRestrictedPathAndReport(importSource, importNames, node);
+      checkRestrictedPathAndReport(importSource, node, importNames);
     };
 
     return {
@@ -152,8 +166,7 @@ var rule = {
         if (node.source) {
           checkNode(node);
         }
-      },
-      ExportAllDeclaration: checkNode
+      }
     };
   }
 };

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

@@ -1,43 +1,70 @@
+export 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.'
+}];
 export 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."
 }];

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

@@ -2,6 +2,13 @@ import renameMapping from '@atlaskit/tokens/rename-mapping';
 import tokens from '@atlaskit/tokens/token-names';
 import { isDecendantOfStyleBlock, isDecendantOfStyleJsxAttribute } from '../utils/is-node';
 import { isToken } from '../utils/is-token';
+
+var getCleanPathId = function getCleanPathId(path) {
+  return path.split('.').filter(function (el) {
+    return el !== '[default]';
+  }).join('.');
+};
+
 var defaultConfig = {
   shouldEnforceFallbacks: false
 };
@@ -16,7 +23,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      "
     }
@@ -117,15 +124,23 @@ var rule = {
           return;
         }
 
-        if (typeof tokenKey === 'string' && tokenKey in renameMapping) {
+        var migrationMeta = renameMapping.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[tokenKey], "'"));
+              return fixer.replaceText(node.arguments[0], "'".concat(cleanTokenKey, "'"));
             }
           });
           return;

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

@@ -0,0 +1,3 @@
+export var IMPORT_NAME = 'AKVisuallyHidden';
+export var VISUALLY_HIDDEN_SOURCE = '@atlaskit/visually-hidden';
+export var VISUALLY_HIDDEN_IMPORT = "import ".concat(IMPORT_NAME, " from '").concat(VISUALLY_HIDDEN_SOURCE, "';\n");

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

@@ -0,0 +1,26 @@
+import { getImportedNodeBySource } from '../utils/get-import-node-by-source';
+import { getClosestNodeOfType } from '../utils/is-node';
+import { IMPORT_NAME, VISUALLY_HIDDEN_IMPORT, VISUALLY_HIDDEN_SOURCE } from './constants';
+import { getFirstImport } from './utils';
+export default (function (source, node) {
+  return function (fixer) {
+    var fixes = [];
+    var importedNode = getFirstImport(source);
+    var visuallyHiddenNode = getImportedNodeBySource(source, VISUALLY_HIDDEN_SOURCE);
+
+    if (!importedNode) {
+      return [];
+    }
+
+    var jsxOpeningElement = getClosestNodeOfType(node, 'JSXOpeningElement');
+
+    if (visuallyHiddenNode) {
+      fixes.push(fixer.replaceText(jsxOpeningElement, visuallyHiddenNode.specifiers[0].local.name));
+    } else {
+      fixes.push(fixer.insertTextBefore(importedNode, VISUALLY_HIDDEN_IMPORT));
+      fixes.push(fixer.replaceText(jsxOpeningElement, "<".concat(IMPORT_NAME, " />")));
+    }
+
+    return fixes;
+  };
+});

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

@@ -0,0 +1,23 @@
+import { getImportedNodeBySource } from '../utils/get-import-node-by-source';
+import { IMPORT_NAME, VISUALLY_HIDDEN_IMPORT, VISUALLY_HIDDEN_SOURCE } from './constants';
+import { getFirstImport } from './utils';
+export default (function (source, node) {
+  return function (fixer) {
+    var fixes = [];
+    var importedNode = getFirstImport(source);
+    var visuallyHiddenNode = getImportedNodeBySource(source, VISUALLY_HIDDEN_SOURCE);
+
+    if (!importedNode) {
+      return [];
+    }
+
+    if (visuallyHiddenNode) {
+      fixes.push(fixer.replaceText(node, visuallyHiddenNode.specifiers[0].local.name));
+    } else {
+      fixes.push(fixer.insertTextBefore(importedNode, VISUALLY_HIDDEN_IMPORT));
+      fixes.push(fixer.replaceText(node, IMPORT_NAME));
+    }
+
+    return fixes;
+  };
+});

package/dist/esm/rules/use-visually-hidden/index.js

@@ -0,0 +1,180 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/* eslint-disable @atlaskit/design-system/use-visually-hidden */
+import { getClosestNodeOfType, isStyledObjectNode, isStyledTemplateNode } from '../utils/is-node';
+import fixJsx from './fix-jsx';
+import fixVanilla from './fix-vanilla';
+import { countMatchingKeyValues, getObjectLikeness, makeTemplateLiteralIntoEntries } from './utils';
+var THEME_IMPORT_NAMES = ['visuallyHidden', 'assistive'];
+var rule = {
+  meta: {
+    type: 'suggestion',
+    fixable: 'code',
+    docs: {
+      description: 'Suggest usage of the `@atlaskit/visually-hidden` component instead of either the `@atlaskit/theme` mixins or just something the user has rolled themselves.',
+      recommended: true
+    },
+    messages: {
+      noDeprecatedUsage: 'Using the export `{{local}}` from `{{import}}` as a mixin is discouraged. Please use `@atlaskit/visually-hidden` instead.',
+      noDeprecated: 'The export `{{local}}` from `{{import}}` is deprecated. Please use `@atlaskit/visually-hidden` instead.',
+      suggestion: 'This CSS closely matches the implementation of a visually hidden element. You should consider using the `@atlaskit/visually-hidden` component instead.'
+    }
+  },
+  create: function create(context) {
+    var source = context.getSourceCode();
+    return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        var isThemeNode = node.source.value === '@atlaskit/theme' || node.source.value === '@atlaskit/theme/constants';
+
+        if (!isThemeNode) {
+          return;
+        }
+
+        var visuallyHiddenOrAssistive = node.specifiers.filter(function (specifier) {
+          return specifier.type === 'ImportSpecifier';
+        }).find(function (specifier) {
+          return THEME_IMPORT_NAMES.includes(specifier.imported.name);
+        });
+
+        if (!visuallyHiddenOrAssistive) {
+          return;
+        }
+
+        context.getDeclaredVariables(visuallyHiddenOrAssistive).forEach(function (someNode) {
+          someNode.references.map(function (innerNode) {
+            return innerNode.identifier;
+          }).forEach(function (idNode) {
+            // @ts-ignore JSX is not typed correctly in eslint
+            if ((idNode === null || idNode === void 0 ? void 0 : idNode.parent.type) === 'JSXExpressionContainer') {
+              context.report({
+                node: idNode.parent,
+                messageId: 'noDeprecatedUsage',
+                data: {
+                  import: "".concat(node.source.value),
+                  local: visuallyHiddenOrAssistive.local.name
+                },
+                fix: fixJsx(source, idNode)
+              }); // this is either a styled usage OR mixin usage in a styled usage
+            } else if (idNode.parent.type === 'CallExpression') {
+              if (isStyledObjectNode(idNode.parent) || isStyledTemplateNode(idNode.parent)) {
+                context.report({
+                  node: idNode.parent,
+                  messageId: 'noDeprecatedUsage',
+                  data: {
+                    import: "".concat(node.source.value),
+                    local: visuallyHiddenOrAssistive.local.name
+                  },
+                  fix: fixVanilla(source, idNode.parent)
+                });
+              }
+
+              if (idNode.parent.callee === idNode) {
+                context.report({
+                  node: idNode.parent,
+                  messageId: 'noDeprecatedUsage',
+                  data: {
+                    import: "".concat(node.source.value),
+                    local: visuallyHiddenOrAssistive.local.name
+                  },
+                  fix: fixVanilla(source, getClosestNodeOfType(idNode.parent, 'TaggedTemplateExpression'))
+                });
+              }
+            }
+          });
+        });
+        return context.report({
+          node: visuallyHiddenOrAssistive,
+          messageId: 'noDeprecated',
+          data: {
+            import: "".concat(node.source.value),
+            local: visuallyHiddenOrAssistive.local.name
+          }
+        });
+      },
+      CallExpression: function CallExpression(node) {
+        var _node$arguments$;
+
+        if (node.type !== 'CallExpression') {
+          return;
+        }
+
+        if (!(node.callee.type === 'MemberExpression' || node.callee.type === 'Identifier')) {
+          return;
+        }
+
+        var isStyled = isStyledObjectNode(node);
+
+        if (node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && node.callee.object.name !== 'styled') {
+          return;
+        }
+
+        if (node.callee.type === 'Identifier' && node.callee.name !== 'css') {
+          return;
+        } // This is an object style (probably)
+
+
+        if (node.arguments && ((_node$arguments$ = node.arguments[0]) === null || _node$arguments$ === void 0 ? void 0 : _node$arguments$.type) === 'ObjectExpression') {
+          var matchingScore = getObjectLikeness(node.arguments[0]);
+
+          if (matchingScore > 0.8) {
+            return context.report({
+              node: node.parent,
+              messageId: 'suggestion',
+              fix: isStyled ? fixVanilla(source, node) : undefined
+            });
+          }
+        }
+
+        return null;
+      },
+      ObjectExpression: function ObjectExpression(node) {
+        if (node.parent.type === 'CallExpression') {
+          return;
+        }
+
+        var matchingScore = getObjectLikeness(node);
+
+        if (matchingScore > 0.8) {
+          return context.report({
+            node: node,
+            messageId: 'suggestion'
+          });
+        }
+      },
+      'TaggedTemplateExpression[tag.name="css"],TaggedTemplateExpression[tag.object.name="styled"]': function TaggedTemplateExpressionTagNameCssTaggedTemplateExpressionTagObjectNameStyled(node) {
+        if (node.type !== 'TaggedTemplateExpression') {
+          return;
+        }
+
+        var templateString = node.quasi.quasis.map(function (q) {
+          return q.value.raw;
+        }).join('');
+        var styleEntries = makeTemplateLiteralIntoEntries(templateString);
+
+        if (!styleEntries) {
+          return;
+        }
+
+        var count = countMatchingKeyValues(styleEntries.map(function (_ref) {
+          var _ref2 = _slicedToArray(_ref, 2),
+              key = _ref2[0],
+              value = _ref2[1];
+
+          return {
+            key: key,
+            value: value
+          };
+        }));
+
+        if (count > 0.8) {
+          return context.report({
+            node: node,
+            messageId: 'suggestion',
+            fix: node.tag.type !== 'Identifier' ? fixVanilla(source, node) : undefined
+          });
+        }
+      }
+    };
+  }
+};
+export default rule;