@atlaskit/eslint-plugin-design-system 10.16.0 → 10.17.1

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

@@ -1,4 +1,4 @@
-import { isNodeOfType } from 'eslint-codemod-utils';
+import { isNodeOfType, literal } from 'eslint-codemod-utils';
 import baseMigrationMap, { migrationOutcomeDescriptionMap } from '@atlaskit/icon/UNSAFE_migration-map';
 import { getImportName } from '../utils/get-import-name';
 import { upcomingIcons } from './upcoming-icons';
@@ -50,10 +50,36 @@ export const canAutoMigrateNewIconBasedOnSize = guidance => {
   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
+ */
+export const getNewIconNameAndImportPath = (iconPackage, shouldUseMigrationPath) => {
+  const legacyIconName = getIconKey(iconPackage);
+  const migrationMapObject = getMigrationMapObject(iconPackage);
+  if (!migrationMapObject || !migrationMapObject.newIcon) {
+    return {};
+  }
+  const {
+    newIcon
+  } = migrationMapObject;
+  const migrationPath = newIcon.name === legacyIconName ? `${newIcon.package}/${newIcon.type}/migration/${newIcon.name}` : `${newIcon.package}/${newIcon.type}/migration/${newIcon.name}--${legacyIconName.replaceAll('/', '-')}`;
+  return {
+    iconName: newIcon.name,
+    importPath: shouldUseMigrationPath ? migrationPath : `${newIcon.package}/${newIcon.type}/${newIcon.name}`
+  };
+};
+
 /**
  * Creates the written guidance for migrating a legacy icon to a new icon
  */
-export const createGuidance = (iconPackage, insideNewButton = false, size) => {
+export const createGuidance = ({
+  iconPackage,
+  insideNewButton,
+  size,
+  shouldUseMigrationPath
+}) => {
   const migrationMapObject = getMigrationMapObject(iconPackage);
   const upcomingIcon = getUpcomingIcons(iconPackage);
   if (upcomingIcon) {
@@ -82,17 +108,21 @@ export const createGuidance = (iconPackage, insideNewButton = false, size) => {
     if (!newIcon) {
       return 'No equivalent icon in new set. An option is to contribute a custom icon into icon-labs package instead.\n';
     }
+    const {
+      iconName,
+      importPath
+    } = getNewIconNameAndImportPath(iconPackage, shouldUseMigrationPath);
     const buttonGuidanceStr = "Please set 'spacing' property of the new icon to 'none', to ensure appropriate spacing inside `@atlaskit/button`.\n";
     let guidance = '';
     if (size) {
       if (migrationMapObject.sizeGuidance[size] && canAutoMigrateNewIconBasedOnSize(migrationMapObject.sizeGuidance[size])) {
-        guidance += `Fix: Use ${newIcon.name} from ${newIcon.package}/${newIcon.type}/${newIcon.name} instead.`;
+        guidance += `Fix: Use ${iconName} from ${importPath} instead.`;
       } else {
         guidance += `No equivalent icon for this size, ${size}, in new set.`;
       }
       guidance += `${Object.keys(migrationOutcomeDescriptionMap).includes(migrationMapObject.sizeGuidance[size]) ? ` Please: ${migrationOutcomeDescriptionMap[migrationMapObject.sizeGuidance[size]]}` : ' No migration size advice given.'}\n`;
     } else {
-      guidance = `Use ${newIcon.name} from ${newIcon.package}/${newIcon.type}/${newIcon.name} instead.\nMigration suggestions, depending on the legacy icon size:\n`;
+      guidance = `Use ${iconName} from ${importPath} instead.\nMigration suggestions, depending on the legacy icon size:\n`;
       Object.entries(migrationMapObject.sizeGuidance).forEach(([size, value]) => {
         guidance += `\t- ${size}: `;
         if (!Object.keys(migrationOutcomeDescriptionMap).includes(value)) {
@@ -223,13 +253,23 @@ export const createCantMigrateSizeUnknown = (node, errors, importSource, iconNam
   };
   pushManualError(locToString(node), errors, myError, importSource, iconName);
 };
-export const createAutoMigrationError = (node, importSource, iconName, errors) => {
+export const createAutoMigrationError = ({
+  node,
+  importSource,
+  iconName,
+  errors,
+  shouldAddSpaciousSpacing,
+  insideNewButton
+}) => {
   const myError = {
     node,
     messageId: 'noLegacyIconsAutoMigration',
     data: {
       importSource,
-      iconName
+      iconName,
+      spacing: shouldAddSpaciousSpacing ? 'spacious' : '',
+      // value type need to be a string in Rule.ReportDescriptor
+      insideNewButton: String(insideNewButton)
     }
   };
   errors[locToString(node)] = myError;
@@ -320,4 +360,178 @@ export const isInRangeList = (node, sortedListOfRangesForErrors) => {
   }
   const found = sortedListOfRangesForErrors.find(currRange => 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
+ */
+export const isInsideNewButton = (node, newButtonImports) => {
+  var _node$parent, _node$parent$parent, _node$parent2, _node$parent2$parent, _node$parent2$parent$;
+  let insideNewButton = false;
+  if (node.parent && isNodeOfType(node.parent, 'ArrowFunctionExpression') && (_node$parent = node.parent) !== null && _node$parent !== void 0 && (_node$parent$parent = _node$parent.parent) !== null && _node$parent$parent !== void 0 && _node$parent$parent.parent && isNodeOfType(node.parent.parent.parent, 'JSXAttribute') && isNodeOfType(node.parent.parent.parent.name, 'JSXIdentifier') && (_node$parent2 = node.parent) !== null && _node$parent2 !== void 0 && (_node$parent2$parent = _node$parent2.parent) !== null && _node$parent2$parent !== void 0 && (_node$parent2$parent$ = _node$parent2$parent.parent) !== null && _node$parent2$parent$ !== void 0 && _node$parent2$parent$.parent && isNodeOfType(node.parent.parent.parent.parent, 'JSXOpeningElement') && 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
+ */
+export const isInsideLegacyButton = (node, legacyButtonImports) => {
+  var _node$parent3, _node$parent4, _node$parent4$parent, _node$parent5, _node$parent5$parent, _node$parent6, _node$parent6$parent;
+  let insideLegacyButton = false;
+  if (node.parent && isNodeOfType(node.parent, 'JSXExpressionContainer') && (_node$parent3 = node.parent) !== null && _node$parent3 !== void 0 && _node$parent3.parent && isNodeOfType(node.parent.parent, 'JSXAttribute') && (node.parent.parent.name.name === 'iconBefore' || node.parent.parent.name.name === 'iconAfter') && isNodeOfType((_node$parent4 = node.parent) === null || _node$parent4 === void 0 ? void 0 : (_node$parent4$parent = _node$parent4.parent) === null || _node$parent4$parent === void 0 ? void 0 : _node$parent4$parent.parent, 'JSXOpeningElement') && isNodeOfType((_node$parent5 = node.parent) === null || _node$parent5 === void 0 ? void 0 : (_node$parent5$parent = _node$parent5.parent) === null || _node$parent5$parent === void 0 ? void 0 : _node$parent5$parent.parent.name, 'JSXIdentifier') && legacyButtonImports.has((_node$parent6 = node.parent) === null || _node$parent6 === void 0 ? void 0 : (_node$parent6$parent = _node$parent6.parent) === null || _node$parent6$parent === void 0 ? void 0 : _node$parent6$parent.parent.name.name)) {
+    insideLegacyButton = true;
+  }
+  return insideLegacyButton;
+};
+const findProp = (attributes, propName) => attributes.find(attr => 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
+ */
+export const createImportFix = ({
+  fixer,
+  legacyImportNode,
+  metadata,
+  shouldUseMigrationPath,
+  migrationImportNode
+}) => {
+  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)}'`));
+  }
+  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
+ */
+export const createPropFixes = ({
+  node,
+  fixer,
+  legacyImportNode,
+  metadata,
+  shouldUseMigrationPath,
+  migrationImportNode
+}) => {
+  const fixes = [];
+  const {
+    importSource,
+    spacing,
+    insideNewButton
+  } = metadata;
+  if (shouldUseMigrationPath && !legacyImportNode) {
+    return fixes;
+  }
+  const importPath = migrationImportNode ? importSource.replace('/migration', '').split('--')[0] : getNewIconNameAndImportPath(importSource, shouldUseMigrationPath).importPath;
+  const iconType = importPath !== null && importPath !== void 0 && importPath.startsWith('@atlaskit/icon/core') ? 'core' : 'utility';
+  if (node.type === 'JSXElement') {
+    const {
+      openingElement
+    } = node;
+    const {
+      attributes
+    } = openingElement;
+
+    // replace primaryColor prop with color
+    const 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
+    const sizeProp = findProp(attributes, 'size');
+    const spacingProp = findProp(attributes, 'spacing');
+    if (spacing && !spacingProp && iconType === 'core' && !migrationImportNode) {
+      fixes.push(fixer.insertTextAfter(sizeProp || openingElement.name, ` spacing="${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
+    const 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(propName => {
+        const 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
+ */
+export const checkIfNewIconExist = error => {
+  var _error$data;
+  if (!((_error$data = error.data) !== null && _error$data !== void 0 && _error$data.importSource)) {
+    return false;
+  }
+  const iconKey = getIconKey(error.data.importSource);
+  const {
+    newIcon
+  } = baseMigrationMap[iconKey] || {};
+  return Boolean(newIcon);
 };

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

@@ -5,6 +5,7 @@ import { createHelpers } from './helpers';
 const rule = createLintRule({
   meta: {
     name: 'no-legacy-icons',
+    fixable: 'code',
     type: 'problem',
     docs: {
       description: 'Enforces no legacy icons are used.',
@@ -22,6 +23,9 @@ const rule = createLintRule({
         },
         quiet: {
           type: 'boolean'
+        },
+        shouldUseMigrationPath: {
+          type: 'boolean'
         }
       },
       additionalProperties: false

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

@@ -1 +1 @@
-export const upcomingIcons = ['app-switcher', 'check-circle-outline', 'export', 'file', 'flag-filled', 'lightbulb-filled', 'lock-filled', 'menu-expand', 'menu', 'notification-direct', 'notification', 'people-group', 'people', 'refresh', 'switcher', 'editor/align-image-center', 'editor/align-image-left', 'editor/align-image-right', 'editor/background-color', 'editor/bold', 'editor/indent', 'editor/italic', 'editor/horizontal-rule', 'editor-layout-three-equal', 'editor-layout-three-with-sidebars', 'editor/layout-two-equal', 'editor/layout-two-left-sidebars', 'editor/layout-two-right-sidebar', 'editor/media-center', 'editor/media-full-width', 'editor/media-wide', 'editor/number-list', 'emoji/activity', 'editor/file', 'emoji/flags', 'emoji/food', 'emoji/nature', 'emoji/people', 'emoji/productivity', 'emoji/travel', 'bitbucket/repos'];
+export const upcomingIcons = [];