@atlaskit/eslint-plugin-design-system 10.8.1 → 10.8.2

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

@@ -0,0 +1,275 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { getImportName } from '../utils/get-import-name';
+import migrationMap, { outcomeDescriptionMap } from './migration-map-temp';
+/**
+ * Returns the migration map object for a legacy icon or null if not found
+ * @param iconPackage The name of the legacy icon package
+ * @returns The migration map object for the legacy icon or null if not found
+ */
+export const getMigrationMapObject = iconPackage => {
+  const key = getIconKey(iconPackage);
+  if (key in migrationMap) {
+    return migrationMap[key];
+  }
+  return null;
+};
+
+/**
+ * Returns the key of a legacy icon
+ * @param iconPackage The name of the legacy icon package
+ * @returns The unique identifier for the icon (the part after "@atlaskit/icon/glyph")
+ */
+export const getIconKey = iconPackage => {
+  const key = iconPackage.replace(/^@atlaskit\/icon\/glyph\//, '');
+  return key;
+};
+
+/**
+ * Checks if a new icon can be auto-migrated based on guidance from the migration map
+ */
+export const canAutoMigrateNewIconBasedOnSize = guidance => {
+  return ['swap', 'swap-slight-visual-change', 'swap-visual-change', 'swap-size-shift-utility'].includes(guidance || '');
+};
+
+/**
+ * Creates the written guidance for migrating a legacy icon to a new icon
+ */
+export const createGuidance = (iconPackage, size) => {
+  const migrationMapObject = getMigrationMapObject(iconPackage);
+  if (migrationMapObject) {
+    const newIcon = migrationMapObject.newIcon;
+    if (!newIcon) {
+      return 'No equivalent icon in new set. An option is to contribute a custom icon into icon-labs package instead.\n';
+    }
+    if (size) {
+      let guidance = `Fix: Use ${newIcon.name} from @atlaskit/${newIcon.library}/${newIcon.type}/${newIcon.name} instead.`;
+      if (migrationMapObject.sizeGuidance[size] in outcomeDescriptionMap) {
+        guidance += ` Please: ${outcomeDescriptionMap[migrationMapObject.sizeGuidance[size]]}\n`;
+      } else {
+        guidance += ' No migration advice given.\n';
+      }
+      return guidance;
+    } else {
+      let guidance = `Use ${newIcon.name} from @atlaskit/${newIcon.library}/${newIcon.type}/${newIcon.name} instead.\nMigration suggestions, depending on the legacy icon size:\n`;
+      for (const [size, value] of Object.entries(migrationMapObject.sizeGuidance)) {
+        guidance += `\t- ${size}: `;
+        if (!(value in outcomeDescriptionMap)) {
+          guidance += 'No migration advice given.\n';
+        } else {
+          guidance += `${outcomeDescriptionMap[value]}\n`;
+        }
+        guidance;
+      }
+      return guidance;
+    }
+  } else {
+    return 'Migration suggestions not found\n';
+  }
+};
+
+/**
+ * Checks if the color can be migrated
+ * @param color String representing the color to check
+ * @returns True if the color can be migrated, false otherwise
+ */
+export const canMigrateColor = color => {
+  if (color.match(/^color\.text$/)) {
+    return true;
+  } else if (color.match(/^color\.icon/)) {
+    return true;
+  } else if (color.match(/^color\.link/)) {
+    return true;
+  } else if (color === 'currentColor') {
+    return true;
+  } else {
+    return false;
+  }
+};
+export const locToString = node => {
+  var _node$loc, _node$loc2, _node$loc3, _node$loc4;
+  return `${(_node$loc = node.loc) === null || _node$loc === void 0 ? void 0 : _node$loc.start.line}:${(_node$loc2 = node.loc) === null || _node$loc2 === void 0 ? void 0 : _node$loc2.start.column}:${(_node$loc3 = node.loc) === null || _node$loc3 === void 0 ? void 0 : _node$loc3.end.line}:${(_node$loc4 = node.loc) === null || _node$loc4 === void 0 ? void 0 : _node$loc4.end.column}`;
+};
+export const createCantMigrateReExportError = (node, packageName, exportName, errors) => {
+  const myError = {
+    node,
+    messageId: 'cantMigrateReExport',
+    data: {
+      packageName,
+      exportName
+    }
+  };
+  pushManualError(locToString(node), errors, myError, packageName, exportName);
+};
+export const createCantMigrateIdentifierError = (node, packageName, exportName, errors) => {
+  const myError = {
+    node,
+    messageId: 'cantMigrateIdentifier',
+    data: {
+      packageName,
+      exportName
+    }
+  };
+  pushManualError(locToString(node), errors, myError, packageName, exportName);
+};
+export const findUNSAFEProp = (iconAttr, button) => {
+  let UNSAFE_size = null;
+  const propName = iconAttr.name.name === 'iconAfter' || iconAttr.name.name === 'iconBefore' || iconAttr.name.name === 'icon' ? iconAttr.name.name : null;
+  const buttonAttributes = button.attributes;
+  const UNSAFE_propName = propName === 'icon' ? `UNSAFE_size` : propName ? `UNSAFE_${propName}_size` : null;
+  const UNSAFE_size_index = buttonAttributes.findIndex(x => UNSAFE_propName && 'name' in x && x.name && x.name.name === UNSAFE_propName);
+  let unsafeAttribute = UNSAFE_size_index !== -1 ? buttonAttributes[UNSAFE_size_index] : null;
+  if (unsafeAttribute && isNodeOfType(unsafeAttribute, 'JSXAttribute') && unsafeAttribute.value && isNodeOfType(unsafeAttribute.value, 'Literal') && unsafeAttribute.value.value && ['small', 'large', 'xlarge'].includes(unsafeAttribute.value.value)) {
+    UNSAFE_size = unsafeAttribute.value.value;
+  } else if (unsafeAttribute && isNodeOfType(unsafeAttribute, 'JSXAttribute') && unsafeAttribute.value && isNodeOfType(unsafeAttribute.value, 'JSXExpressionContainer') && isNodeOfType(unsafeAttribute.value.expression, 'Literal') && ['small', 'large', 'xlarge'].includes(unsafeAttribute.value.expression.value)) {
+    UNSAFE_size = unsafeAttribute.value.expression.value;
+  }
+  return {
+    UNSAFE_size,
+    UNSAFE_propName
+  };
+};
+export const createCantMigrateUnsafeProp = (node, propName, value, packageName, iconName, errors) => {
+  const myError = {
+    node,
+    messageId: 'cantMigrateUnsafeProp',
+    data: {
+      propName,
+      value
+    }
+  };
+  pushManualError(locToString(node), errors, myError, packageName, iconName);
+};
+export const createCantFindSuitableReplacementError = (node, importSource, iconName, errors) => {
+  const myError = {
+    node,
+    messageId: 'cantFindSuitableReplacement',
+    data: {
+      importSource,
+      iconName
+    }
+  };
+  pushManualError(locToString(node), errors, myError, importSource, iconName);
+};
+export const createCantMigrateFunctionUnknownError = (node, importSource, iconName, errors) => {
+  const myError = {
+    node,
+    messageId: 'cantMigrateFunctionUnknown',
+    data: {
+      importSource,
+      iconName
+    }
+  };
+  pushManualError(locToString(node), errors, myError, importSource, iconName);
+};
+export const createCantMigrateColorError = (node, colorValue, errors, importSource, iconName) => {
+  const myError = {
+    node,
+    messageId: 'cantMigrateColor',
+    data: {
+      colorValue
+    }
+  };
+  pushManualError(locToString(node), errors, myError, importSource, iconName);
+};
+export const createCantMigrateSpreadPropsError = (node, missingProps, errors, importSource, iconName) => {
+  const myError = {
+    node,
+    messageId: 'cantMigrateSpreadProps',
+    data: {
+      missingProps: missingProps.join(', ')
+    }
+  };
+  pushManualError(locToString(node), errors, myError, importSource, iconName);
+};
+export const createCantMigrateSizeUnknown = (node, errors, importSource, iconName) => {
+  const myError = {
+    node,
+    messageId: 'cantMigrateSizeUnknown'
+  };
+  pushManualError(locToString(node), errors, myError, importSource, iconName);
+};
+export const createAutoMigrationError = (node, importSource, iconName, newIcon, oldIconName, errors) => {
+  const migrationKey = newIcon.name === oldIconName ? newIcon.name : `${newIcon.name}--${oldIconName}`;
+  const newMigrationIconPackage = `@atlaskit/${newIcon.library}/${newIcon.type}/migration/${migrationKey}`;
+  const myError = {
+    node,
+    messageId: 'noLegacyIconsAutoMigration',
+    data: {
+      importSource,
+      iconName,
+      newIcon: newIcon.name,
+      //TODO: provide size guidance
+      newPackage: newMigrationIconPackage
+    }
+  };
+  errors[locToString(node)] = myError;
+};
+const pushManualError = (key, errors, myError, importSource, iconName) => {
+  if (key in errors) {
+    errors[key].errors.push(myError);
+  } else {
+    errors[key] = {
+      errors: [myError],
+      importSource,
+      iconName
+    };
+  }
+};
+export const getLiteralStringValue = value => {
+  if (!value) {
+    return;
+  }
+
+  // propName="value"
+  if (isNodeOfType(value, 'Literal') && typeof value.value === 'string') {
+    return value.value;
+  }
+
+  // propName={"value"}
+  if (isNodeOfType(value, 'JSXExpressionContainer') && isNodeOfType(value.expression, 'Literal') && typeof value.expression.value === 'string') {
+    return value.expression.value;
+  }
+  return;
+};
+export const createHelpers = context => {
+  /**
+   * Extracts the token name of a token() call from a JSXExpressionContainer
+   * @param value The JSXExpressionContainer to extract the token call from
+   * @returns The value of the token call, or null if it could not be extracted
+   */
+  const getTokenCallValue = value => {
+    const tokenName = getImportName(context.sourceCode.getScope(value), '@atlaskit/tokens', 'token');
+    if (tokenName && isNodeOfType(value, 'JSXExpressionContainer') && isNodeOfType(value.expression, 'CallExpression') && 'name' in value.expression.callee && value.expression.callee.name === tokenName) {
+      // propName={token("color...."}
+      return getLiteralStringValue(value.expression.arguments[0]);
+    }
+    return;
+  };
+
+  /**
+   * Gets the value of a boolean configuration flag
+   * @param key the key of the configuration flag
+   * @param defaultValue The default value of the configuration flag
+   * @returns defaultValue if the configuration flag is not set, the defaultValue of the configuration flag otherwise
+   */
+  const getConfigFlag = (key, defaultValue) => {
+    if (context.options.length > 0 && context.options[0] && key in context.options[0]) {
+      return context.options[0][key] === !defaultValue ? !defaultValue : defaultValue;
+    }
+    return defaultValue;
+  };
+  return {
+    /**
+     * Extracts the primaryColor value from a JSXAttribute
+     */
+    getPrimaryColor(attr) {
+      var _ref, _getLiteralStringValu;
+      const {
+        value
+      } = attr;
+      return (_ref = (_getLiteralStringValu = getLiteralStringValue(value)) !== null && _getLiteralStringValu !== void 0 ? _getLiteralStringValu : getTokenCallValue(value)) !== null && _ref !== void 0 ? _ref : null;
+    },
+    getTokenCallValue,
+    getConfigFlag
+  };
+};

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

@@ -1,5 +1,7 @@
-import { isNodeOfType } from 'eslint-codemod-utils';
 import { createLintRule } from '../utils/create-rule';
+import { errorBoundary } from '../utils/error-boundary';
+import { createChecks } from './checks';
+import { createHelpers } from './helpers';
 const rule = createLintRule({
   meta: {
     name: 'no-legacy-icons',
@@ -9,123 +11,120 @@ const rule = createLintRule({
       recommended: false,
       severity: 'warn'
     },
+    schema: [{
+      type: 'object',
+      properties: {
+        shouldErrorForManualMigration: {
+          type: 'boolean'
+        },
+        shouldErrorForAutoMigration: {
+          type: 'boolean'
+        },
+        quiet: {
+          type: 'boolean'
+        }
+      },
+      additionalProperties: false
+    }],
     messages: {
-      noLegacyIcons: `Legacy icon '{{iconName}}', is being rendered from import '{{importSource}}'. Migrate to an icon from '@atlaskit/icon/(core|utility)', or '@atlaskit/icon-labs/(core|utility)'.
-Learn more in our [code migration guide](https://hello.atlassian.net/wiki/spaces/DST/pages/3748692796/New+ADS+iconography+-+Code+migration+guide).`
+      noLegacyIconsAutoMigration: `Auto Migration:\nLegacy icon '{{iconName}}' from '{{importSource}}' detected.\nAutomatic migration is possible to '{{newIcon}}' from '{{newPackage}}.\nAtlassians: See https://go.atlassian.com/icon-migration-guide for details.'`,
+      noLegacyIconsManualMigration: `Manual Migration:\nLegacy icon '{{iconName}}' from '{{importSource}}' detected.\nAutomatic migration not possible.{{quietModeGuidance}}.\nAtlassians: See https://go.atlassian.com/icon-migration-guide for details.`,
+      cantFindSuitableReplacement: `No suitable replacement found for '{{iconName}}' from '{{importSource}}' at the size listed. Please manually migrate this icon.`,
+      cantMigrateReExport: `'{{exportName}}' is a re-export of icon from '{{packageName}}' and cannot be automatically migrated. Please utilize the export from icons directly.`,
+      cantMigrateColor: `Primary Color prop has {{colorValue}} which cannot be automatically migrated to color prop in the new Icon API. Please use either an appropriate color.icon, color.link token, or currentColor (as a last resort).`,
+      cantMigrateSpreadProps: `This usage of Icon uses spread props in a way that can't be automatically migrated. Please explicitly define the following props after spread: '{{missingProps}}' `,
+      cantMigrateSizeUnknown: `This usage of Icon sets the size via a variable or function that can't be determined.`,
+      cantMigrateFunctionUnknown: `'{{iconName}}' from legacy '{{importSource}}' is used in unknown function/component. Please manually migrate this icon.`,
+      cantMigrateIdentifier: `This icon is passed to other components via a map or array, in a way that can't be automatically migrated. Please manually migrate wherever this expression is used and use the icon components directly.`,
+      cantMigrateUnsafeProp: `Property '{{propName}}' with value of '{{value}}' is unable to be auto-migrated to the new button. Please manually migrate this icon.`,
+      guidance: `Guidance:\n'{{guidance}}'`
     }
   },
   create(context) {
-    const legacyIconImports = {};
+    const {
+      getConfigFlag
+    } = createHelpers(context);
+    const failSilently = getConfigFlag('failSilently', false);
+    const {
+      checkImportDeclarations,
+      checkVariableDeclarations,
+      checkExportDefaultDeclaration,
+      checkExportNamedVariables,
+      checkArrayOrMap,
+      checkIconAsProp,
+      checkJSXElement,
+      checkCallExpression,
+      throwErrors
+    } = createChecks(context);
     return {
+      // Track imports of relevant components
       ImportDeclaration(node) {
-        const moduleSource = node.source.value;
-        if (typeof moduleSource === 'string' && ['@atlaskit/icon/glyph/', '@atlaskit/icon-object/glyph/'].find(val => moduleSource.startsWith(val)) && node.specifiers.length) {
-          const defaultImport = node.specifiers.find(spec => spec.type === 'ImportDefaultSpecifier');
-          if (!defaultImport) {
-            return;
+        errorBoundary(() => checkImportDeclarations(node), {
+          config: {
+            failSilently
           }
-          const defaultImportName = defaultImport.local.name;
-          legacyIconImports[defaultImportName] = moduleSource;
-        }
+        });
       },
+      // Keep track of the relevant variable declarations and renames
       VariableDeclaration(node) {
-        if (isNodeOfType(node, 'VariableDeclaration')) {
-          for (const decl of node.declarations) {
-            if (isNodeOfType(decl, 'VariableDeclarator') && 'init' in decl && 'id' in decl && decl.init && decl.id && 'name' in decl.id && decl.id.name && isNodeOfType(decl.init, 'Identifier') && decl.init.name in legacyIconImports) {
-              legacyIconImports[decl.id.name] = legacyIconImports[decl.init.name];
-            }
+        errorBoundary(() => checkVariableDeclarations(node), {
+          config: {
+            failSilently
           }
-        }
+        });
       },
+      // Case: default re-exports. Can't be auto-migrated
       ExportDefaultDeclaration(node) {
-        if ('declaration' in node && node.declaration && isNodeOfType(node.declaration, 'Identifier') && node.declaration.name in legacyIconImports) {
-          context.report({
-            node,
-            messageId: 'noLegacyIcons',
-            data: {
-              importSource: legacyIconImports[node.declaration.name],
-              iconName: node.declaration.name
-            }
-          });
-        }
+        errorBoundary(() => checkExportDefaultDeclaration(node), {
+          config: {
+            failSilently
+          }
+        });
       },
       ExportNamedDeclaration(node) {
-        if ('source' in node && node.source && isNodeOfType(node.source, 'Literal') && 'value' in node.source) {
-          const moduleSource = node.source.value;
-          if (typeof moduleSource === 'string' && ['@atlaskit/icon/glyph/', '@atlaskit/icon-object/glyph/'].find(val => moduleSource.startsWith(val)) && node.specifiers.length) {
-            context.report({
-              node,
-              messageId: 'noLegacyIcons',
-              data: {
-                importSource: moduleSource,
-                iconName: node.specifiers[0].exported.name
-              }
-            });
+        errorBoundary(() => checkExportNamedVariables(node), {
+          config: {
+            failSilently
           }
-        } else if ('declaration' in node && node.declaration && isNodeOfType(node.declaration, 'VariableDeclaration')) {
-          for (const decl of node.declaration.declarations) {
-            if (isNodeOfType(decl, 'VariableDeclarator') && 'init' in decl && decl.init && isNodeOfType(decl.init, 'Identifier') && decl.init.name in legacyIconImports) {
-              context.report({
-                node,
-                messageId: 'noLegacyIcons',
-                data: {
-                  importSource: legacyIconImports[decl.init.name],
-                  iconName: decl.init.name
-                }
-              });
-            }
+        });
+      },
+      // Legacy icons found in arrays/objects
+      'ObjectExpression > Property > Identifier, ArrayExpression > Identifier ': node => {
+        errorBoundary(() => checkArrayOrMap(node), {
+          config: {
+            failSilently
           }
-        }
+        });
       },
-      JSXAttribute(node) {
-        if (!isNodeOfType(node.value, 'JSXExpressionContainer')) {
-          return;
-        }
-        if (isNodeOfType(node.value.expression, 'Identifier') && node.value.expression.name in legacyIconImports && isNodeOfType(node.name, 'JSXIdentifier') && !node.name.name.startsWith('LEGACY_')) {
-          context.report({
-            node,
-            messageId: 'noLegacyIcons',
-            data: {
-              importSource: legacyIconImports[node.value.expression.name],
-              iconName: node.value.expression.name
-            }
-          });
-        }
+      // Legacy icons passed in via props, as JSX identifier (i.e. icon={AddIcon})
+      'JSXOpeningElement > JSXAttribute > JSXExpressionContainer > Identifier': node => {
+        errorBoundary(() => checkIconAsProp(node), {
+          config: {
+            failSilently
+          }
+        });
       },
       JSXElement(node) {
-        if (!isNodeOfType(node, 'JSXElement')) {
-          return;
-        }
-        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
-          return;
-        }
-        const name = node.openingElement.name.name;
-        if (name in legacyIconImports) {
-          context.report({
-            node,
-            messageId: 'noLegacyIcons',
-            data: {
-              importSource: legacyIconImports[name],
-              iconName: name
-            }
-          });
-        }
+        errorBoundary(() => checkJSXElement(node), {
+          config: {
+            failSilently
+          }
+        });
       },
-      CallExpression(node) {
-        if ('arguments' in node && node.arguments.length) {
-          for (const arg of node.arguments) {
-            if (isNodeOfType(arg, 'Identifier') && arg.name in legacyIconImports) {
-              context.report({
-                node: arg,
-                messageId: 'noLegacyIcons',
-                data: {
-                  importSource: legacyIconImports[arg.name],
-                  iconName: arg.name
-                }
-              });
-            }
+      // Icons called as an argument of a function (i.e. icon={DefaultIcon(AddIcon)})
+      CallExpression: node => {
+        errorBoundary(() => checkCallExpression(node), {
+          config: {
+            failSilently
           }
-        }
+        });
+      },
+      'Program:exit': () => {
+        errorBoundary(() => throwErrors(), {
+          config: {
+            failSilently
+          }
+        });
       }
     };
   }