@atlaskit/eslint-plugin-design-system 10.18.0 → 10.18.1

package/dist/es2019/rules/no-legacy-icons/checks.js

@@ -1,5 +1,5 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
-import { addToListOfRanges, canAutoMigrateNewIconBasedOnSize, canMigrateColor, checkIfNewIconExist, createAutoMigrationError, createCantFindSuitableReplacementError, createCantMigrateColorError, createCantMigrateFunctionUnknownError, createCantMigrateIdentifierError, createCantMigrateIdentifierMapOrArrayError, createCantMigrateReExportError, createCantMigrateSizeUnknown, createCantMigrateSpreadPropsError, createGuidance, createHelpers, createImportFix, createPropFixes, getMigrationMapObject, getUpcomingIcons, isInRangeList, isInsideLegacyButton, isInsideNewButton, isSize, locToString } from './helpers';
+import { addToListOfRanges, canAutoMigrateNewIconBasedOnSize, canMigrateColor, createAutoMigrationError, createCantFindSuitableReplacementError, createCantMigrateColorError, createCantMigrateFunctionUnknownError, createCantMigrateIdentifierError, createCantMigrateIdentifierMapOrArrayError, createCantMigrateReExportError, createCantMigrateSizeUnknown, createCantMigrateSpreadPropsError, createGuidance, createHelpers, getMigrationMapObject, getUpcomingIcons, isInsideLegacyButton, isInsideNewButton, isSize, locToString, throwAutoErrors, throwManualErrors } from './helpers';
 export const createChecks = context => {
   //create global variables to be shared by the checks
   const {
@@ -13,7 +13,6 @@ export const createChecks = context => {
   const errorsManual = {};
   const errorsAuto = {};
   let guidance = {};
-  let autoIconJSXElementOccurrenceCount = 0;
 
   // Extract parameters
   const shouldErrorForManualMigration = getConfigFlag('shouldErrorForManualMigration', true);
@@ -38,7 +37,8 @@ export const createChecks = context => {
           legacyIconImports[spec.local.name] = {
             packageName: moduleSource,
             exported: false,
-            importNode: node
+            importNode: node,
+            importSpecifier: spec.local.name
           };
         }
       }
@@ -51,7 +51,8 @@ export const createChecks = context => {
           migrationIconImports[spec.local.name] = {
             packageName: moduleSource,
             exported: false,
-            importNode: node
+            importNode: node,
+            importSpecifier: spec.local.name
           };
         }
       });
@@ -90,7 +91,9 @@ export const createChecks = context => {
           if (Object.keys(legacyIconImports).includes(decl.init.name)) {
             legacyIconImports[decl.id.name] = {
               packageName: legacyIconImports[decl.init.name].packageName,
-              exported: legacyIconImports[decl.init.name].exported || isExported
+              exported: legacyIconImports[decl.init.name].exported || isExported,
+              importNode: legacyIconImports[decl.init.name].importNode,
+              importSpecifier: legacyIconImports[decl.init.name].importSpecifier
             };
           } else if (newButtonImports.has(decl.init.name)) {
             newButtonImports.add(decl.id.name);
@@ -129,7 +132,7 @@ export const createChecks = context => {
    * @param node The named export node found by ESLint
    */
   const checkExportNamedVariables = node => {
-    // export {default as AddIcon} from '@atlaskit/icon/glyph/add';
+    // Case: export {default as AddIcon} from '@atlaskit/icon/glyph/add';
     if (node.source && isNodeOfType(node.source, 'Literal') && Object.keys(node.source).includes('value')) {
       const moduleSource = node.source.value;
       if (typeof moduleSource === 'string' && ['@atlaskit/icon/glyph/', '@atlaskit/icon-object/glyph/'].find(val => moduleSource.startsWith(val)) && node.specifiers.length) {
@@ -143,7 +146,7 @@ export const createChecks = context => {
         }
       }
     } else if (node.declaration && isNodeOfType(node.declaration, 'VariableDeclaration')) {
-      // export const Icon = AddIcon;
+      // Case: export const Icon = AddIcon;
       for (const decl of node.declaration.declarations) {
         if (isNodeOfType(decl, 'VariableDeclarator') && Object.keys(decl).includes('init') && decl.init && isNodeOfType(decl.init, 'Identifier') && Object.keys(legacyIconImports).includes(decl.init.name)) {
           createCantMigrateReExportError(node, legacyIconImports[decl.init.name].packageName, decl.init.name, errorsManual);
@@ -166,7 +169,9 @@ export const createChecks = context => {
           //update legacy imports to be exported
           legacyIconImports[spec.local.name] = {
             packageName: legacyIconImports[spec.local.name].packageName,
-            exported: true
+            exported: true,
+            importNode: legacyIconImports[spec.local.name].importNode,
+            importSpecifier: legacyIconImports[spec.local.name].importSpecifier
           };
           createCantMigrateReExportError(spec, legacyIconImports[spec.local.name].packageName, spec.exported.name, errorsManual);
           addToListOfRanges(spec, errorRanges);
@@ -399,7 +404,6 @@ export const createChecks = context => {
       const sizeProp = node.openingElement.attributes.find(attribute => attribute.type === 'JSXAttribute' && (attribute.name.name === 'size' || attribute.name.name === 'LEGACY_size'));
       const shouldAddSpaciousSpacing = (sizeProp && sizeProp.type === 'JSXAttribute' && ((_sizeProp$value2 = sizeProp.value) === null || _sizeProp$value2 === void 0 ? void 0 : _sizeProp$value2.type) === 'Literal' && sizeProp.value.value === 'medium' || !sizeProp) && !insideNewButton && !insideLegacyButton;
       if (!hasManualMigration && (newIcon || upcomingIcon) && isNewIconMigratable) {
-        autoIconJSXElementOccurrenceCount++;
         createAutoMigrationError({
           node,
           importSource: legacyIconImports[name].packageName,
@@ -444,108 +448,26 @@ export const createChecks = context => {
    * Throws the relevant errors in the correct order based on configs.
    */
   const throwErrors = () => {
+    // Throw manual errors
     if (shouldErrorForManualMigration) {
-      for (const [key, errorList] of Object.entries(errorsManual)) {
-        const node = 'node' in errorList.errors[0] ? errorList.errors[0].node : null;
-        const cantMigrateIdentifierError = errorList.errors.find(x => 'messageId' in x && x.messageId === 'cantMigrateIdentifier');
-        if (node) {
-          let isInRange = false;
-          if (cantMigrateIdentifierError && isInRangeList(node, errorRanges)) {
-            isInRange = true;
-          }
-          if (isInRange && errorList.errors.length - 1 > 0 || !isInRange && errorList.errors.length > 0) {
-            const guidanceMessage = Object.keys(guidance).includes(key) ? guidance[key] : '';
-            context.report({
-              node,
-              messageId: 'noLegacyIconsManualMigration',
-              data: {
-                iconName: errorList.iconName,
-                importSource: errorList.importSource,
-                guidance: isQuietMode ? guidanceMessage : `${guidanceMessage}For more information see the below errors.\n`
-              }
-            });
-            if (!isQuietMode) {
-              for (const error of errorList.errors) {
-                if ('messageId' in error && (error.messageId !== 'cantMigrateIdentifier' || error.messageId === 'cantMigrateIdentifier' && !isInRange)) {
-                  context.report(error);
-                }
-              }
-            }
-          }
-        }
-      }
+      throwManualErrors({
+        errorsManual,
+        errorRanges,
+        guidance,
+        context,
+        isQuietMode
+      });
     }
     if (shouldErrorForAutoMigration) {
-      for (const [key, error] of Object.entries(errorsAuto)) {
-        // If there's a manual error that exists for this same component,
-        // don't throw the auto error
-        if (Object.keys(errorsManual).includes(key)) {
-          const cantMigrateIdentifierError = errorsManual[key].errors.find(x => 'messageId' in x && x.messageId === 'cantMigrateIdentifier');
-          if (!cantMigrateIdentifierError || cantMigrateIdentifierError && errorsManual[key].errors.length > 1) {
-            delete errorsAuto[key];
-            continue;
-          }
-        }
-        const node = 'node' in error ? error.node : null;
-        if (node) {
-          const guidanceMessage = Object.keys(guidance).includes(key) ? guidance[key] : '';
-          if (Object.keys(error).includes('data') && error.data) {
-            error.data.guidance = guidanceMessage;
-          }
-          context.report({
-            ...error,
-            fix: fixer => {
-              var _legacyIconImports$er, _migrationIconImports;
-              // don't migration if the new icon is not available
-              if (!error.data || shouldUseMigrationPath && !checkIfNewIconExist(error)) {
-                return [];
-              }
-              const fixArguments = {
-                metadata: error.data,
-                legacyImportNode: (_legacyIconImports$er = legacyIconImports[error.data.iconName]) === null || _legacyIconImports$er === void 0 ? void 0 : _legacyIconImports$er.importNode,
-                migrationImportNode: (_migrationIconImports = migrationIconImports[error.data.iconName]) === null || _migrationIconImports === void 0 ? void 0 : _migrationIconImports.importNode,
-                shouldUseMigrationPath
-              };
-              const propsFixes = createPropFixes({
-                ...fixArguments,
-                node,
-                fixer
-              });
-              let importFixes = [];
-              // Otherwise if there are multiple occurrences of the icon, import path will be handled after the prop fix
-              if (autoIconJSXElementOccurrenceCount <= 1) {
-                importFixes = createImportFix({
-                  ...fixArguments,
-                  fixer
-                });
-              }
-              return [...propsFixes, ...importFixes];
-            }
-          });
-        }
-      }
-
-      // Update import path at the end if there are multiple occurrences of the icon
-      if (autoIconJSXElementOccurrenceCount > 1) {
-        for (const [_, error] of Object.entries(errorsAuto)) {
-          context.report({
-            ...error,
-            fix: fixer => {
-              var _legacyIconImports$er2, _migrationIconImports2;
-              if (!error.data || shouldUseMigrationPath && !checkIfNewIconExist(error)) {
-                return [];
-              }
-              return createImportFix({
-                metadata: error.data,
-                fixer,
-                legacyImportNode: (_legacyIconImports$er2 = legacyIconImports[error.data.iconName]) === null || _legacyIconImports$er2 === void 0 ? void 0 : _legacyIconImports$er2.importNode,
-                migrationImportNode: (_migrationIconImports2 = migrationIconImports[error.data.iconName]) === null || _migrationIconImports2 === void 0 ? void 0 : _migrationIconImports2.importNode,
-                shouldUseMigrationPath
-              });
-            }
-          });
-        }
-      }
+      throwAutoErrors({
+        errorsManual,
+        errorsAuto,
+        legacyIconImports,
+        guidance,
+        migrationIconImports,
+        shouldUseMigrationPath,
+        context
+      });
     }
   };
   return {

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

@@ -54,7 +54,7 @@ export const canAutoMigrateNewIconBasedOnSize = guidance => {
  * @param iconPackage string
  * @returns object of new icon name and import path
  */
-export const getNewIconNameAndImportPath = (iconPackage, shouldUseMigrationPath) => {
+const getNewIconNameAndImportPath = (iconPackage, shouldUseMigrationPath) => {
   const legacyIconName = getIconKey(iconPackage);
   const migrationMapObject = getMigrationMapObject(iconPackage);
   if (!migrationMapObject || !migrationMapObject.newIcon) {
@@ -284,7 +284,7 @@ const pushManualError = (key, errors, myError, importSource, iconName) => {
     };
   }
 };
-export const getLiteralStringValue = value => {
+const getLiteralStringValue = value => {
   if (!value) {
     return;
   }
@@ -354,7 +354,7 @@ export const addToListOfRanges = (node, sortedListOfRangesForErrors) => {
     });
   }
 };
-export const isInRangeList = (node, sortedListOfRangesForErrors) => {
+const isInRangeList = (node, sortedListOfRangesForErrors) => {
   const {
     range
   } = node;
@@ -395,6 +395,18 @@ export const isInsideLegacyButton = (node, legacyButtonImports) => {
   return insideLegacyButton;
 };
 const findProp = (attributes, propName) => attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.name === propName);
+const getNewIconNameForRenaming = (isInManualArray, importSource, importSpecifier) => {
+  let newIconName;
+  if (isInManualArray) {
+    newIconName = getNewIconNameAndImportPath(importSource).iconName;
+    const keyToName = newIconName ? newIconName[0].toUpperCase() + newIconName.slice(1) + 'Icon' : undefined;
+    newIconName = keyToName;
+    if (newIconName === undefined || importSpecifier === keyToName) {
+      newIconName = `${keyToName}New`;
+    }
+  }
+  return newIconName;
+};
 
 /**
  *
@@ -406,25 +418,25 @@ const findProp = (attributes, propName) => attributes.find(attr => attr.type ===
  * @param migrationImportNode The migration import declaration node to replace, only present if shouldUseMigrationPath is false
  * @returns A list of fixers to migrate the icon
  */
-export const createImportFix = ({
+const createImportFix = ({
   fixer,
   legacyImportNode,
   metadata,
   shouldUseMigrationPath,
-  migrationImportNode
+  migrationImportNode,
+  newIconName
 }) => {
   const fixes = [];
   const {
     importSource
   } = metadata;
   const 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, `'${literal(importPath)}'`));
-  }
-  if (migrationImportNode && !shouldUseMigrationPath && importPath) {
-    fixes.push(fixer.replaceText(migrationImportNode.source, `'${literal(importPath)}'`));
+  const useMigrationPath = legacyImportNode && importPath;
+  const useFinalPath = migrationImportNode && !shouldUseMigrationPath && importPath;
+  if (useMigrationPath) {
+    fixes.push(newIconName ? fixer.insertTextBefore(legacyImportNode, `import ${newIconName} from '${importPath}';\n`) : fixer.replaceText(legacyImportNode.source, `'${literal(importPath)}'`));
+  } else if (useFinalPath) {
+    fixes.push(newIconName ? fixer.insertTextBefore(migrationImportNode, `import ${newIconName} from '${importPath}';\n`) : fixer.replaceText(migrationImportNode.source, `'${literal(importPath)}'`));
   }
   return fixes;
 };
@@ -439,13 +451,14 @@ export const createImportFix = ({
  * @param migrationImportNode The migration import declaration node to replace, only present if shouldUseMigrationPath is false
  * @returns A list of fixers to migrate the icon
  */
-export const createPropFixes = ({
+const createPropFixes = ({
   node,
   fixer,
   legacyImportNode,
   metadata,
   shouldUseMigrationPath,
-  migrationImportNode
+  migrationImportNode,
+  newIconName
 }) => {
   const fixes = [];
   const {
@@ -462,6 +475,9 @@ export const createPropFixes = ({
     const {
       openingElement
     } = node;
+    if (newIconName) {
+      fixes.push(fixer.replaceText(openingElement.name, newIconName));
+    }
     const {
       attributes
     } = openingElement;
@@ -520,6 +536,8 @@ export const createPropFixes = ({
         }
       });
     }
+  } else if (node.type === 'Identifier' && newIconName) {
+    fixes.push(fixer.replaceText(node, newIconName));
   }
   return fixes;
 };
@@ -527,7 +545,7 @@ export const createPropFixes = ({
 /**
  * Check if the new icon exists in the migration map
  */
-export const checkIfNewIconExist = error => {
+const checkIfNewIconExist = error => {
   var _error$data;
   if (!((_error$data = error.data) !== null && _error$data !== void 0 && _error$data.importSource)) {
     return false;
@@ -537,4 +555,171 @@ export const checkIfNewIconExist = error => {
     newIcon
   } = baseMigrationMap[iconKey] || {};
   return Boolean(newIcon);
+};
+export const throwManualErrors = ({
+  errorsManual,
+  errorRanges,
+  guidance,
+  context,
+  isQuietMode
+}) => {
+  for (const [key, errorList] of Object.entries(errorsManual)) {
+    const node = 'node' in errorList.errors[0] ? errorList.errors[0].node : null;
+    if (!node) {
+      return;
+    }
+    const cantMigrateIdentifierError = errorList.errors.find(x => 'messageId' in x && x.messageId === 'cantMigrateIdentifier');
+    let isInRange = false;
+    if (cantMigrateIdentifierError && isInRangeList(node, errorRanges)) {
+      isInRange = true;
+    }
+    if (isInRange && errorList.errors.length - 1 > 0 || !isInRange && errorList.errors.length > 0) {
+      const guidanceMessage = Object.keys(guidance).includes(key) ? guidance[key] : '';
+      context.report({
+        node,
+        messageId: 'noLegacyIconsManualMigration',
+        data: {
+          iconName: errorList.iconName,
+          importSource: errorList.importSource,
+          guidance: isQuietMode ? guidanceMessage : `${guidanceMessage}For more information see the below errors.\n`
+        }
+      });
+      if (!isQuietMode) {
+        for (const error of errorList.errors) {
+          if ('messageId' in error && (error.messageId !== 'cantMigrateIdentifier' || error.messageId === 'cantMigrateIdentifier' && !isInRange)) {
+            context.report(error);
+          }
+        }
+      }
+    }
+  }
+};
+
+// Loops through automatic errors and them after adding the required suggestion/fix
+export const throwAutoErrors = ({
+  errorsManual,
+  errorsAuto,
+  legacyIconImports,
+  guidance,
+  migrationIconImports,
+  shouldUseMigrationPath,
+  context
+}) => {
+  // Set of all the import sources that have manual errors (required later to check if a source has both manual and auto
+  // errors in one file making it impossible to just remove the legacy import)
+  const allManualErrorSources = Object.entries(errorsManual).reduce((result, option) => {
+    const [key, errorInfo] = option;
+    if (!errorsAuto.hasOwnProperty(key)) {
+      result.add(errorInfo.importSource);
+    }
+    return result;
+  }, new Set());
+  //group errors by import source and remove any unwanted errors
+  const groupedErrorList = Object.entries(errorsAuto).reduce((result, option) => {
+    const [key, error] = option;
+    //return early if no data
+    if (!error.data) {
+      return result;
+    }
+    if (Object.keys(errorsManual).includes(key)) {
+      const cantMigrateIdentifierError = errorsManual[key].errors.find(x => 'messageId' in x && x.messageId === 'cantMigrateIdentifier');
+      // If cantMigrateIdentifier is the only manual error found we still want to throw the auto error
+      if (!(cantMigrateIdentifierError && errorsManual[key].errors.length === 1)) {
+        return result;
+      }
+    }
+    const importSource = error.data.importSource;
+    if (!result.hasOwnProperty(importSource)) {
+      result[importSource] = [];
+    }
+    result[importSource].push({
+      key,
+      ...error
+    });
+    return result;
+  }, {});
+  for (const [importSource, errorList] of Object.entries(groupedErrorList)) {
+    const autoFixers = [];
+    // appliedErrorsForImport will contain all the errors FOR A SINGLE IMPORT and will be merged into errorListForReport
+    const appliedErrorsForImport = [];
+    // Loop over auto errors for a single import source
+    for (const [_, error] of errorList.entries()) {
+      var _legacyIconImports$er, _legacyIconImports$er2, _migrationIconImports;
+      const {
+        key
+      } = error;
+      const node = 'node' in error ? error.node : null;
+      // Check if there is a manual error for the same import source somewhere else in the same file
+      // If that is the case we'll need to provide a suggestion instead of auto-fixing as the suggestion will
+      // add another import without removing the old import and this needs to be validated
+      const isInManualArray = allManualErrorSources.has(importSource);
+      // New icon name for renaming if the icon is in the manual array
+      const newIconName = getNewIconNameForRenaming(isInManualArray, importSource, errorList[0].data ? (_legacyIconImports$er = legacyIconImports[errorList[0].data.iconName]) === null || _legacyIconImports$er === void 0 ? void 0 : _legacyIconImports$er.importSpecifier : undefined);
+      if (!node) {
+        continue;
+      }
+      const guidanceMessage = guidance.hasOwnProperty(key) ? guidance[key] : '';
+      if (Object.keys(error).includes('data') && error.data) {
+        error.data.guidance = guidanceMessage;
+      }
+      const fixArguments = error.data ? {
+        metadata: error.data,
+        legacyImportNode: (_legacyIconImports$er2 = legacyIconImports[error.data.iconName]) === null || _legacyIconImports$er2 === void 0 ? void 0 : _legacyIconImports$er2.importNode,
+        migrationImportNode: (_migrationIconImports = migrationIconImports[error.data.iconName]) === null || _migrationIconImports === void 0 ? void 0 : _migrationIconImports.importNode,
+        shouldUseMigrationPath,
+        newIconName: isInManualArray ? newIconName : undefined
+      } : null;
+      if (!error.data || shouldUseMigrationPath && !checkIfNewIconExist(error) || !fixArguments) {
+        continue;
+      }
+      if (isInManualArray) {
+        // provide suggestion if there is a manual error for the same import source and thus the legacy import can't be removed
+        error.suggest = [{
+          desc: 'Rename icon import, import from the new package, and update props.',
+          fix: fixer => {
+            return [...createPropFixes({
+              ...fixArguments,
+              node,
+              fixer
+            }), ...createImportFix({
+              ...fixArguments,
+              fixer
+            })];
+          }
+        }];
+      } else {
+        // Update Guidance message for auto-fixing
+        if (error.data) {
+          error.data.guidance = error.data.guidance + `\nTo automatically fix this icon, run the auto-fixer attached to the first use of ${importSource} in this file - either manually, or by saving this file.`;
+        }
+        // There should only be 1 import fix for each import source and thus only add this at the start of the list
+        if (autoFixers.length === 0) {
+          autoFixers.push(fixer => createImportFix({
+            ...fixArguments,
+            fixer
+          }));
+        }
+        // Push the prop fix regardless
+        autoFixers.push(fixer => createPropFixes({
+          ...fixArguments,
+          node,
+          fixer
+        }));
+      }
+      // Add the error to the appliedErrorsForImport, ready to be thrown later
+      appliedErrorsForImport.push(error);
+    }
+    // We want to have only 1 fix for each import source that is not in the manual array
+    // NOTE: If in the manual array, suggestions have been applied above and autoFixers.length will be 0 which will mean no fix is added
+    if (autoFixers.length > 0) {
+      // Add the fix to only one of the errors in the list of errors from the current import source
+      appliedErrorsForImport[0].fix = fixer => {
+        return autoFixers.flatMap(autoFixer => autoFixer(fixer));
+      };
+    }
+    // throw errors
+    appliedErrorsForImport.forEach(error => {
+      context.report(error);
+    });
+  }
 };

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

@@ -6,6 +6,7 @@ const rule = createLintRule({
   meta: {
     name: 'no-legacy-icons',
     fixable: 'code',
+    hasSuggestions: true,
     type: 'problem',
     docs: {
       description: 'Enforces no legacy icons are used.',