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

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.',

package/dist/es2019/rules/use-latest-xcss-syntax-typography/config/index.js

@@ -1,5 +1,6 @@
 const defaults = {
-  failSilently: false
+  failSilently: false,
+  patterns: ['restricted-property', 'wrapped-token-value']
 };
 export const getConfig = overrides => {
   return Object.assign({}, defaults, overrides);

package/dist/es2019/rules/use-latest-xcss-syntax-typography/index.js

@@ -1,7 +1,8 @@
 import { createLintRule } from '../utils/create-rule';
 import { errorBoundary } from '../utils/error-boundary';
 import { getConfig } from './config';
-import { BannedProperty } from './linters';
+import { RestrictedProperty, WrappedTokenValue } from './linters';
+const typescriptErrorMessage = 'There is ongoing work to make this a TypeScript error. Once that happens, you will have to delete/refactor anyway.';
 const rule = createLintRule({
   meta: {
     name: 'use-latest-xcss-syntax-typography',
@@ -14,17 +15,29 @@ const rule = createLintRule({
       severity: 'warn'
     },
     messages: {
-      noUnsafeTypographyProperties: `Don't set '{{ property }}' on xcss. They are unsafe as they allow invalid combinations of typography tokens. There is ongoing work to make this a TypeScript error. Once that happens, you will have to delete/refactor anyway.`
+      noRestrictedTypographyProperties: `Don't set '{{ property }}' on xcss as it allows invalid combinations of typography tokens. ${typescriptErrorMessage}`,
+      noRestrictedTypographyPropertiesHeading: `Don't set '{{ property }}' on xcss in combination with 'font' heading tokens. ${typescriptErrorMessage}`,
+      noWrappedTokenTypographyValues: `Don't wrap typography tokens in xcss. ${typescriptErrorMessage}`
     }
   },
   create(context) {
     const config = getConfig(context.options[0]);
     return errorBoundary({
-      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Identifier[name=/(fontSize|lineHeight|fontWeight|letterSpacing)/]': node => BannedProperty.lint(node, {
-        context
+      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Identifier[name=/(fontSize|lineHeight|fontWeight|letterSpacing)/]': node => RestrictedProperty.lint(node, {
+        context,
+        config
       }),
-      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Literal[value=/(fontSize|lineHeight|fontWeight|letterSpacing)/]': node => BannedProperty.lint(node, {
-        context
+      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Literal[value=/(fontSize|lineHeight|fontWeight|letterSpacing)/]': node => RestrictedProperty.lint(node, {
+        context,
+        config
+      }),
+      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Identifier[name=/(font|fontFamily|fontWeight)/]': node => WrappedTokenValue.lint(node, {
+        context,
+        config
+      }),
+      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Literal[value=/(font|fontFamily|fontWeight)/]': node => WrappedTokenValue.lint(node, {
+        context,
+        config
       })
     }, config);
   }

package/dist/es2019/rules/use-latest-xcss-syntax-typography/linters/common.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/rules/use-latest-xcss-syntax-typography/linters/index.js

@@ -1 +1,2 @@
-export { BannedProperty } from './banned-property';
+export { RestrictedProperty } from './restricted-property';
+export { WrappedTokenValue } from './wrapped-token-value';

package/dist/es2019/rules/use-latest-xcss-syntax-typography/linters/restricted-property.js

@@ -0,0 +1,61 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+export const RestrictedProperty = {
+  lint(node, {
+    context,
+    config
+  }) {
+    if (RestrictedProperty._check(node, {
+      context,
+      config
+    })) {
+      let property = 'fontSize, lineHeight, fontWeight or letterSpacing';
+      if (isNodeOfType(node, 'Identifier')) {
+        property = node.name;
+      } else if (isNodeOfType(node, 'Literal')) {
+        property = String(node.value);
+      }
+      context.report({
+        node,
+        messageId: property === 'fontWeight' ? 'noRestrictedTypographyPropertiesHeading' : 'noRestrictedTypographyProperties',
+        data: {
+          property
+        }
+      });
+    }
+  },
+  _check(node, {
+    config
+  }) {
+    if (!config.patterns.includes('restricted-property')) {
+      return false;
+    }
+
+    // Prevent font weight being used in combination with heading tokens
+    if (isNodeOfType(node, 'Identifier') && node.name === 'fontWeight' || isNodeOfType(node, 'Literal') && node.value === 'fontWeight') {
+      if (isNodeOfType(node.parent.parent, 'ObjectExpression')) {
+        for (const property of node.parent.parent.properties) {
+          var _property$value$value;
+          // Only looking for heading token on `font` property
+          const isFontProperty = isNodeOfType(property, 'Property') && (isNodeOfType(property.key, 'Literal') && property.key.value === 'font' || isNodeOfType(property.key, 'Identifier') && property.key.name === 'font');
+          if (!isFontProperty) {
+            continue;
+          }
+
+          // Checking for heading token string, for example xcss({ font: 'font.heading.medium' })
+          if (isNodeOfType(property.value, 'Literal') && typeof property.value.value === 'string' && (_property$value$value = property.value.value) !== null && _property$value$value !== void 0 && _property$value$value.startsWith('font.heading')) {
+            return true;
+          }
+
+          // Checking for wrapped heading token, for example xcss({ font: token('font.heading.medium') })
+          if (isNodeOfType(property.value, 'CallExpression') && isNodeOfType(property.value.callee, 'Identifier') && property.value.callee.name === 'token' && isNodeOfType(property.value.arguments[0], 'Literal') && typeof property.value.arguments[0].value === 'string' && property.value.arguments[0].value.startsWith('font.heading')) {
+            return true;
+          }
+        }
+      }
+      return false;
+    }
+    return true;
+  }
+};

package/dist/es2019/rules/use-latest-xcss-syntax-typography/linters/wrapped-token-value.js

@@ -0,0 +1,44 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+const messageId = 'noWrappedTokenTypographyValues';
+export const WrappedTokenValue = {
+  lint(node, {
+    context,
+    config
+  }) {
+    if (WrappedTokenValue._check(node, {
+      context,
+      config
+    })) {
+      context.report({
+        node,
+        messageId,
+        fix: WrappedTokenValue._fix(node)
+      });
+    }
+  },
+  _check(node, {
+    config
+  }) {
+    if (!config.patterns.includes('wrapped-token-value')) {
+      return false;
+    }
+    if (isNodeOfType(node.parent, 'Property') && isNodeOfType(node.parent.value, 'CallExpression') && isNodeOfType(node.parent.value.callee, 'Identifier') && node.parent.value.callee.name === 'token' && node.parent.value.arguments.length >= 1) {
+      return true;
+    }
+    return false;
+  },
+  _fix(node) {
+    return fixer => {
+      let wrappedTokenFix;
+      if (isNodeOfType(node.parent, 'Property') && isNodeOfType(node.parent.value, 'CallExpression') && node.parent.value.arguments.length >= 1) {
+        const firstArg = node.parent.value.arguments[0];
+        if (isNodeOfType(firstArg, 'Literal') && typeof firstArg.value === 'string') {
+          wrappedTokenFix = fixer.replaceText(node.parent.value, `'${firstArg.value}'`);
+        }
+      }
+      return [wrappedTokenFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
+    };
+  }
+};