@atlaskit/eslint-plugin-design-system 10.15.0 → 10.17.0

package/dist/cjs/rules/no-legacy-icons/helpers.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.locToString = exports.isSize = exports.isInRangeList = exports.getUpcomingIcons = exports.getMigrationMapObject = exports.getLiteralStringValue = exports.createHelpers = exports.createGuidance = exports.createCantMigrateSpreadPropsError = exports.createCantMigrateSizeUnknown = exports.createCantMigrateReExportError = exports.createCantMigrateIdentifierMapOrArrayError = exports.createCantMigrateIdentifierError = exports.createCantMigrateFunctionUnknownError = exports.createCantMigrateColorError = exports.createCantFindSuitableReplacementError = exports.createAutoMigrationError = exports.canMigrateColor = exports.canAutoMigrateNewIconBasedOnSize = exports.addToListOfRanges = void 0;
+exports.locToString = exports.isSize = exports.isInsideNewButton = exports.isInsideLegacyButton = exports.isInRangeList = exports.getUpcomingIcons = exports.getNewIconNameAndImportPath = exports.getMigrationMapObject = exports.getLiteralStringValue = exports.createPropFixes = exports.createImportFix = exports.createHelpers = exports.createGuidance = exports.createCantMigrateSpreadPropsError = exports.createCantMigrateSizeUnknown = exports.createCantMigrateReExportError = exports.createCantMigrateIdentifierMapOrArrayError = exports.createCantMigrateIdentifierError = exports.createCantMigrateFunctionUnknownError = exports.createCantMigrateColorError = exports.createCantFindSuitableReplacementError = exports.createAutoMigrationError = exports.checkIfNewIconExist = exports.canMigrateColor = exports.canAutoMigrateNewIconBasedOnSize = exports.addToListOfRanges = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _UNSAFE_migrationMap = _interopRequireWildcard(require("@atlaskit/icon/UNSAFE_migration-map"));
@@ -63,12 +63,33 @@ var canAutoMigrateNewIconBasedOnSize = exports.canAutoMigrateNewIconBasedOnSize
   return ['swap', 'swap-slight-visual-change', 'swap-visual-change', 'swap-size-shift-utility'].includes(guidance || '');
 };
 
+/**
+ *
+ * @param iconPackage string
+ * @returns object of new icon name and import path
+ */
+var getNewIconNameAndImportPath = exports.getNewIconNameAndImportPath = function getNewIconNameAndImportPath(iconPackage, shouldUseMigrationPath) {
+  var legacyIconName = getIconKey(iconPackage);
+  var migrationMapObject = getMigrationMapObject(iconPackage);
+  if (!migrationMapObject || !migrationMapObject.newIcon) {
+    return {};
+  }
+  var newIcon = migrationMapObject.newIcon;
+  var migrationPath = newIcon.name === legacyIconName ? "".concat(newIcon.package, "/").concat(newIcon.type, "/migration/").concat(newIcon.name) : "".concat(newIcon.package, "/").concat(newIcon.type, "/migration/").concat(newIcon.name, "--").concat(legacyIconName.replaceAll('/', '-'));
+  return {
+    iconName: newIcon.name,
+    importPath: shouldUseMigrationPath ? migrationPath : "".concat(newIcon.package, "/").concat(newIcon.type, "/").concat(newIcon.name)
+  };
+};
+
 /**
  * Creates the written guidance for migrating a legacy icon to a new icon
  */
-var createGuidance = exports.createGuidance = function createGuidance(iconPackage) {
-  var insideNewButton = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var size = arguments.length > 2 ? arguments[2] : undefined;
+var createGuidance = exports.createGuidance = function createGuidance(_ref) {
+  var iconPackage = _ref.iconPackage,
+    insideNewButton = _ref.insideNewButton,
+    size = _ref.size,
+    shouldUseMigrationPath = _ref.shouldUseMigrationPath;
   var migrationMapObject = getMigrationMapObject(iconPackage);
   var upcomingIcon = getUpcomingIcons(iconPackage);
   if (upcomingIcon) {
@@ -100,21 +121,24 @@ var createGuidance = exports.createGuidance = function createGuidance(iconPackag
     if (!newIcon) {
       return 'No equivalent icon in new set. An option is to contribute a custom icon into icon-labs package instead.\n';
     }
+    var _getNewIconNameAndImp = getNewIconNameAndImportPath(iconPackage, shouldUseMigrationPath),
+      iconName = _getNewIconNameAndImp.iconName,
+      importPath = _getNewIconNameAndImp.importPath;
     var buttonGuidanceStr = "Please set 'spacing' property of the new icon to 'none', to ensure appropriate spacing inside `@atlaskit/button`.\n";
     var _guidance = '';
     if (size) {
       if (migrationMapObject.sizeGuidance[size] && canAutoMigrateNewIconBasedOnSize(migrationMapObject.sizeGuidance[size])) {
-        _guidance += "Fix: Use ".concat(newIcon.name, " from ").concat(newIcon.package, "/").concat(newIcon.type, "/").concat(newIcon.name, " instead.");
+        _guidance += "Fix: Use ".concat(iconName, " from ").concat(importPath, " instead.");
       } else {
         _guidance += "No equivalent icon for this size, ".concat(size, ", in new set.");
       }
       _guidance += "".concat(Object.keys(_UNSAFE_migrationMap.migrationOutcomeDescriptionMap).includes(migrationMapObject.sizeGuidance[size]) ? " Please: ".concat(_UNSAFE_migrationMap.migrationOutcomeDescriptionMap[migrationMapObject.sizeGuidance[size]]) : ' No migration size advice given.', "\n");
     } else {
-      _guidance = "Use ".concat(newIcon.name, " from ").concat(newIcon.package, "/").concat(newIcon.type, "/").concat(newIcon.name, " instead.\nMigration suggestions, depending on the legacy icon size:\n");
-      Object.entries(migrationMapObject.sizeGuidance).forEach(function (_ref) {
-        var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-          size = _ref2[0],
-          value = _ref2[1];
+      _guidance = "Use ".concat(iconName, " from ").concat(importPath, " instead.\nMigration suggestions, depending on the legacy icon size:\n");
+      Object.entries(migrationMapObject.sizeGuidance).forEach(function (_ref2) {
+        var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+          size = _ref3[0],
+          value = _ref3[1];
         _guidance += "\t- ".concat(size, ": ");
         if (!Object.keys(_UNSAFE_migrationMap.migrationOutcomeDescriptionMap).includes(value)) {
           _guidance += 'No migration advice given.\n';
@@ -244,13 +268,22 @@ var createCantMigrateSizeUnknown = exports.createCantMigrateSizeUnknown = functi
   };
   pushManualError(locToString(node), errors, myError, importSource, iconName);
 };
-var createAutoMigrationError = exports.createAutoMigrationError = function createAutoMigrationError(node, importSource, iconName, errors) {
+var createAutoMigrationError = exports.createAutoMigrationError = function createAutoMigrationError(_ref4) {
+  var node = _ref4.node,
+    importSource = _ref4.importSource,
+    iconName = _ref4.iconName,
+    errors = _ref4.errors,
+    shouldAddSpaciousSpacing = _ref4.shouldAddSpaciousSpacing,
+    insideNewButton = _ref4.insideNewButton;
   var myError = {
     node: node,
     messageId: 'noLegacyIconsAutoMigration',
     data: {
       importSource: importSource,
-      iconName: iconName
+      iconName: iconName,
+      spacing: shouldAddSpaciousSpacing ? 'spacious' : '',
+      // value type need to be a string in Rule.ReportDescriptor
+      insideNewButton: String(insideNewButton)
     }
   };
   errors[locToString(node)] = myError;
@@ -314,9 +347,9 @@ var createHelpers = exports.createHelpers = function createHelpers(context) {
      * Extracts the primaryColor value from a JSXAttribute
      */
     getPrimaryColor: function getPrimaryColor(attr) {
-      var _ref3, _getLiteralStringValu;
+      var _ref5, _getLiteralStringValu;
       var value = attr.value;
-      return (_ref3 = (_getLiteralStringValu = getLiteralStringValue(value)) !== null && _getLiteralStringValu !== void 0 ? _getLiteralStringValu : getTokenCallValue(value)) !== null && _ref3 !== void 0 ? _ref3 : null;
+      return (_ref5 = (_getLiteralStringValu = getLiteralStringValue(value)) !== null && _getLiteralStringValu !== void 0 ? _getLiteralStringValu : getTokenCallValue(value)) !== null && _ref5 !== void 0 ? _ref5 : null;
     },
     getTokenCallValue: getTokenCallValue,
     getConfigFlag: getConfigFlag
@@ -339,4 +372,171 @@ var isInRangeList = exports.isInRangeList = function isInRangeList(node, sortedL
     return range[0] >= currRange.start && range[1] <= currRange.end;
   });
   return !!found;
+};
+
+/**
+ *
+ * @param node Icon JSXelement
+ * @param newButtonImports list of new button import specifiers
+ * @returns if Icon is inside a new button
+ */
+var isInsideNewButton = exports.isInsideNewButton = function isInsideNewButton(node, newButtonImports) {
+  var _node$parent, _node$parent2;
+  var insideNewButton = false;
+  if (node.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'ArrowFunctionExpression') && (_node$parent = node.parent) !== null && _node$parent !== void 0 && (_node$parent = _node$parent.parent) !== null && _node$parent !== void 0 && _node$parent.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.parent.parent, 'JSXAttribute') && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.parent.parent.name, 'JSXIdentifier') && (_node$parent2 = node.parent) !== null && _node$parent2 !== void 0 && (_node$parent2 = _node$parent2.parent) !== null && _node$parent2 !== void 0 && (_node$parent2 = _node$parent2.parent) !== null && _node$parent2 !== void 0 && _node$parent2.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.parent.parent.parent, 'JSXOpeningElement') && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.parent.parent.parent.name, 'JSXIdentifier') && newButtonImports.has(node.parent.parent.parent.parent.name.name)) {
+    insideNewButton = true;
+  }
+  return insideNewButton;
+};
+
+/**
+ *
+ * @param node Icon JSXelement
+ * @param newButtonImports list of legacy button import specifiers
+ * @returns if Icon is inside a legacy button
+ */
+var isInsideLegacyButton = exports.isInsideLegacyButton = function isInsideLegacyButton(node, legacyButtonImports) {
+  var _node$parent3, _node$parent4, _node$parent5, _node$parent6;
+  var insideLegacyButton = false;
+  if (node.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'JSXExpressionContainer') && (_node$parent3 = node.parent) !== null && _node$parent3 !== void 0 && _node$parent3.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.parent, 'JSXAttribute') && (node.parent.parent.name.name === 'iconBefore' || node.parent.parent.name.name === 'iconAfter') && (0, _eslintCodemodUtils.isNodeOfType)((_node$parent4 = node.parent) === null || _node$parent4 === void 0 || (_node$parent4 = _node$parent4.parent) === null || _node$parent4 === void 0 ? void 0 : _node$parent4.parent, 'JSXOpeningElement') && (0, _eslintCodemodUtils.isNodeOfType)((_node$parent5 = node.parent) === null || _node$parent5 === void 0 || (_node$parent5 = _node$parent5.parent) === null || _node$parent5 === void 0 ? void 0 : _node$parent5.parent.name, 'JSXIdentifier') && legacyButtonImports.has((_node$parent6 = node.parent) === null || _node$parent6 === void 0 || (_node$parent6 = _node$parent6.parent) === null || _node$parent6 === void 0 ? void 0 : _node$parent6.parent.name.name)) {
+    insideLegacyButton = true;
+  }
+  return insideLegacyButton;
+};
+var findProp = function findProp(attributes, propName) {
+  return attributes.find(function (attr) {
+    return attr.type === 'JSXAttribute' && attr.name.name === propName;
+  });
+};
+
+/**
+ *
+ * Creates a list of fixers to update the icon import path
+ * @param metadata Metadata including the import source and spacing
+ * @param fixer The original fix function
+ * @param legacyImportNode The import declaration node to replace
+ * @param shouldUseMigrationPath The eslint rule config, whether to use migration entrypoint or not
+ * @param migrationImportNode The migration import declaration node to replace, only present if shouldUseMigrationPath is false
+ * @returns A list of fixers to migrate the icon
+ */
+var createImportFix = exports.createImportFix = function createImportFix(_ref6) {
+  var fixer = _ref6.fixer,
+    legacyImportNode = _ref6.legacyImportNode,
+    metadata = _ref6.metadata,
+    shouldUseMigrationPath = _ref6.shouldUseMigrationPath,
+    migrationImportNode = _ref6.migrationImportNode;
+  var fixes = [];
+  var importSource = metadata.importSource;
+  var importPath = migrationImportNode ? importSource.replace('/migration', '').split('--')[0] : getNewIconNameAndImportPath(importSource, shouldUseMigrationPath).importPath;
+
+  // replace old icon import with icon import
+  if (legacyImportNode && importPath) {
+    fixes.push(fixer.replaceText(legacyImportNode.source, "'".concat((0, _eslintCodemodUtils.literal)(importPath), "'")));
+  }
+  if (migrationImportNode && !shouldUseMigrationPath && importPath) {
+    fixes.push(fixer.replaceText(migrationImportNode.source, "'".concat((0, _eslintCodemodUtils.literal)(importPath), "'")));
+  }
+  return fixes;
+};
+
+/**
+ * Creates a list of fixers to update the icon props
+ * @param node The Icon element to migrate
+ * @param metadata Metadata including the import source and spacing
+ * @param fixer The original fix function
+ * @param legacyImportNode The import declaration node to replace
+ * @param shouldUseMigrationPath The eslint rule config, whether to use migration entrypoint or not
+ * @param migrationImportNode The migration import declaration node to replace, only present if shouldUseMigrationPath is false
+ * @returns A list of fixers to migrate the icon
+ */
+var createPropFixes = exports.createPropFixes = function createPropFixes(_ref7) {
+  var node = _ref7.node,
+    fixer = _ref7.fixer,
+    legacyImportNode = _ref7.legacyImportNode,
+    metadata = _ref7.metadata,
+    shouldUseMigrationPath = _ref7.shouldUseMigrationPath,
+    migrationImportNode = _ref7.migrationImportNode;
+  var fixes = [];
+  var importSource = metadata.importSource,
+    spacing = metadata.spacing,
+    insideNewButton = metadata.insideNewButton;
+  if (shouldUseMigrationPath && !legacyImportNode) {
+    return fixes;
+  }
+  var importPath = migrationImportNode ? importSource.replace('/migration', '').split('--')[0] : getNewIconNameAndImportPath(importSource, shouldUseMigrationPath).importPath;
+  var iconType = importPath !== null && importPath !== void 0 && importPath.startsWith('@atlaskit/icon/core') ? 'core' : 'utility';
+  if (node.type === 'JSXElement') {
+    var openingElement = node.openingElement;
+    var attributes = openingElement.attributes;
+
+    // replace primaryColor prop with color
+    var primaryColor = findProp(attributes, 'primaryColor');
+    if (primaryColor && primaryColor.type === 'JSXAttribute') {
+      fixes.push(fixer.replaceText(primaryColor.name, 'color'));
+    }
+
+    // add color="currentColor" if
+    // 1. primaryColor prop is not set
+    // 2. icon is not imported from migration entrypoint
+    // 3. icon element is not inside a new button
+    if (legacyImportNode && !primaryColor && !migrationImportNode &&
+    // value type need to be a string in Rule.ReportDescriptor
+    insideNewButton !== 'true') {
+      fixes.push(fixer.insertTextAfter(openingElement.name, " color=\"currentColor\""));
+    }
+
+    // rename or remove size prop based on shouldUseMigrationPath,
+    // add spacing="spacious" if
+    // 1. it's in error metadata, which means size is medium
+    // 2. no existing spacing prop
+    // 3. iconType is "core"
+    // 4. icon is not imported from migration entrypoint
+    var sizeProp = findProp(attributes, 'size');
+    var spacingProp = findProp(attributes, 'spacing');
+    if (spacing && !spacingProp && iconType === 'core' && !migrationImportNode) {
+      fixes.push(fixer.insertTextAfter(sizeProp || openingElement.name, " spacing=\"".concat(spacing, "\"")));
+    }
+    if (sizeProp && sizeProp.type === 'JSXAttribute') {
+      fixes.push(shouldUseMigrationPath ?
+      // replace size prop with LEGACY_size,
+      fixer.replaceText(sizeProp.name, 'LEGACY_size') :
+      // remove size prop if shouldUseMigrationPath is false
+      fixer.remove(sizeProp));
+    }
+
+    // rename or remove secondaryColor prop based on shouldUseMigrationPath
+    var secondaryColorProp = findProp(attributes, 'secondaryColor');
+    if (secondaryColorProp && secondaryColorProp.type === 'JSXAttribute') {
+      fixes.push(shouldUseMigrationPath ?
+      // replace secondaryColor prop with LEGACY_secondaryColor
+      fixer.replaceText(secondaryColorProp.name, 'LEGACY_secondaryColor') :
+      // remove secondaryColor prop if shouldUseMigrationPath is false
+      fixer.remove(secondaryColorProp));
+    }
+
+    // remove LEGACY props
+    if (!shouldUseMigrationPath) {
+      ['LEGACY_size', 'LEGACY_margin', 'LEGACY_fallbackIcon', 'LEGACY_secondaryColor'].forEach(function (propName) {
+        var legacyProp = findProp(attributes, propName);
+        if (legacyProp && legacyProp.type === 'JSXAttribute') {
+          fixes.push(fixer.remove(legacyProp));
+        }
+      });
+    }
+  }
+  return fixes;
+};
+
+/**
+ * Check if the new icon exists in the migration map
+ */
+var checkIfNewIconExist = exports.checkIfNewIconExist = function checkIfNewIconExist(error) {
+  var _error$data;
+  if (!((_error$data = error.data) !== null && _error$data !== void 0 && _error$data.importSource)) {
+    return false;
+  }
+  var iconKey = getIconKey(error.data.importSource);
+  var _ref8 = _UNSAFE_migrationMap.default[iconKey] || {},
+    newIcon = _ref8.newIcon;
+  return Boolean(newIcon);
 };

package/dist/cjs/rules/no-legacy-icons/index.js

@@ -11,6 +11,7 @@ var _helpers = require("./helpers");
 var rule = (0, _createRule.createLintRule)({
   meta: {
     name: 'no-legacy-icons',
+    fixable: 'code',
     type: 'problem',
     docs: {
       description: 'Enforces no legacy icons are used.',
@@ -28,6 +29,9 @@ var rule = (0, _createRule.createLintRule)({
         },
         quiet: {
           type: 'boolean'
+        },
+        shouldUseMigrationPath: {
+          type: 'boolean'
         }
       },
       additionalProperties: false

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::b6947ac630ea512fe3f4e3f44abb6783>>
+ * @codegen <<SignedSource::16613cb3962ed68af0bffd70eef5f5e2>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -9,6 +9,7 @@ export default {
     '@atlaskit/design-system/consistent-css-prop-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
+    '@atlaskit/design-system/ensure-icon-color': 'error',
     '@atlaskit/design-system/icon-label': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-css-tagged-template-expression': 'error',

package/dist/es2019/rules/ensure-icon-color/index.js

@@ -0,0 +1,50 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createIsFromImportSourceFor } from '../no-custom-icons/checks/is-from-import-source';
+import { createLintRule } from '../utils/create-rule';
+import { errorBoundary } from '../utils/error-boundary';
+
+/**
+ * Returns if the node is a JSXElement with a prop that matches the given name.
+ */
+function hasProp(node, propName) {
+  return isNodeOfType(node.openingElement, 'JSXOpeningElement') && node.openingElement.attributes.some(a => a.type === 'JSXAttribute' && a.name.name === propName);
+}
+const rule = createLintRule({
+  meta: {
+    name: 'ensure-icon-color',
+    docs: {
+      description: 'Enforces that upcoming icon components have a color prop set, to enable a migration of the default value.',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      missingColorProp: 'The default value of the `color` prop is about to change. To assist in the migration, the color prop must be set on new icons from `@atlaskit/icon/(core|utility)`.'
+    }
+  },
+  create(context) {
+    /**
+     * Contains a map of imported icon components from any atlaskit icon package.
+     */
+    const isNewIcon = createIsFromImportSourceFor(/^@(atlaskit\/icon|atlassian\/icon-lab)\/(core|utility)\/*/);
+    return errorBoundary({
+      JSXElement(node) {
+        var _isNewIcon$getImportS;
+        if (!isNewIcon(node) || hasProp(node, 'color')) {
+          return;
+        }
+        const importSource = (_isNewIcon$getImportS = isNewIcon.getImportSource(node)) !== null && _isNewIcon$getImportS !== void 0 ? _isNewIcon$getImportS : '';
+        context.report({
+          node: node.openingElement,
+          messageId: 'missingColorProp',
+          data: {
+            importSource
+          }
+        });
+      },
+      ImportDeclaration: isNewIcon.importDeclarationHook
+    });
+  }
+});
+export default rule;

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

@@ -1,11 +1,12 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::402e6eb5433560b1032e5ed926bb5564>>
+ * @codegen <<SignedSource::c2a140a3f690737dd938e746ef8fb9d5>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
 import ensureDesignTokenUsage from './ensure-design-token-usage';
 import ensureDesignTokenUsagePreview from './ensure-design-token-usage-preview';
+import ensureIconColor from './ensure-icon-color';
 import iconLabel from './icon-label';
 import noBannedImports from './no-banned-imports';
 import noCssTaggedTemplateExpression from './no-css-tagged-template-expression';
@@ -48,6 +49,7 @@ export default {
   'consistent-css-prop-usage': consistentCssPropUsage,
   'ensure-design-token-usage': ensureDesignTokenUsage,
   'ensure-design-token-usage/preview': ensureDesignTokenUsagePreview,
+  'ensure-icon-color': ensureIconColor,
   'icon-label': iconLabel,
   'no-banned-imports': noBannedImports,
   'no-css-tagged-template-expression': noCssTaggedTemplateExpression,