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

package/dist/cjs/rules/use-tokens-typography/index.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _createRule = require("../utils/create-rule");
+var _errorBoundary = require("../utils/error-boundary");
 var _config = require("./config");
-var _errorBoundary = require("./error-boundary");
 var _styleObject = require("./transformers/style-object");
 var create = function create(context) {
   var config = (0, _config.getConfig)(context.options[0]);

package/dist/es2019/rules/consistent-css-prop-usage/index.js

@@ -449,7 +449,8 @@ const defaultConfig = {
   cssImportSource: CSS_IN_JS_IMPORTS.compiled,
   xcssImportSource: CSS_IN_JS_IMPORTS.atlaskitPrimitives,
   excludeReactComponents: false,
-  autoFix: true
+  autoFix: true,
+  shouldAlwaysCheckXcss: false
 };
 const rule = createLintRule({
   meta: {
@@ -492,6 +493,9 @@ const rule = createLintRule({
         excludeReactComponents: {
           type: 'boolean'
         },
+        shouldAlwaysCheckXcss: {
+          type: 'boolean'
+        },
         autoFix: {
           type: 'boolean'
         }
@@ -508,7 +512,20 @@ const rule = createLintRule({
           name,
           value
         } = node;
-        if (mergedConfig.excludeReactComponents && node.parent.type === 'JSXOpeningElement') {
+
+        /**
+         * We skip linting `xcss` attributes if:
+         *
+         * - excludeReactComponents === true
+         * - shouldAlwaysCheckXcss === false
+         *
+         * In the future we may want to remove `shouldAlwaysCheckXcss`
+         * and just always lint `xcss`, regardless of `excludeReactComponents`
+         */
+        if (mergedConfig.excludeReactComponents && name.name === 'xcss' && !mergedConfig.shouldAlwaysCheckXcss) {
+          return;
+        }
+        if (mergedConfig.excludeReactComponents && node.parent.type === 'JSXOpeningElement' && name.name === 'css') {
           // e.g. <item.before />
           if (node.parent.name.type === 'JSXMemberExpression') {
             return;

package/dist/es2019/rules/ensure-design-token-usage/index.js

@@ -3,10 +3,10 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { getImportSources } from '@atlaskit/eslint-utils/is-supported-import';
 import { createLintRule } from '../utils/create-rule';
+import { errorBoundary } from '../utils/error-boundary';
 import { includesHardCodedColor } from '../utils/is-color';
 import { isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfType, isDecendantOfXcssBlock } from '../utils/is-node';
 import { lintJSXIdentifierForColor, lintJSXLiteralForColor, lintJSXMemberForColor, lintObjectForColor, lintTemplateIdentifierForColor } from './color';
-import { errorBoundary } from './error-boundary';
 import ruleMeta from './rule-meta';
 import { lintObjectForSpacing } from './spacing';
 import { convertHyphenatedNameToCamelCase, emToPixels, getDomainsForProperty, getFontSizeValueInScope, getPropertyNodeFromParent, getTokenReplacement, getValueForPropertyNode, getValueFromShorthand, getValueFromTemplateLiteralRaw, includesTokenString, insertTokensImport, isAuto, isCalc, isTokenValueString, isValidSpacingValue, isZero, processCssNode, splitShorthandValues } from './utils';

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

@@ -0,0 +1,388 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { canAutoMigrateNewIconBasedOnSize, canMigrateColor, createAutoMigrationError, createCantFindSuitableReplacementError, createCantMigrateColorError, createCantMigrateFunctionUnknownError, createCantMigrateIdentifierError, createCantMigrateReExportError, createCantMigrateSizeUnknown, createCantMigrateSpreadPropsError, createCantMigrateUnsafeProp, createGuidance, createHelpers, findUNSAFEProp, getIconKey, getMigrationMapObject, locToString } from './helpers';
+import { isSize } from './migration-map-temp';
+export const createChecks = context => {
+  //create global variables to be shared by the checks
+  const {
+    getPrimaryColor,
+    getConfigFlag
+  } = createHelpers(context);
+  const legacyIconImports = {};
+  const newButtonImports = new Set();
+  const errorsManual = {};
+  const errorsAuto = {};
+  let guidance = {};
+
+  // Extract parameters
+  const shouldErrorForManualMigration = getConfigFlag('shouldErrorForManualMigration', true);
+  const shouldErrorForAutoMigration = getConfigFlag('shouldErrorForAutoMigration', true);
+  const isQuietMode = getConfigFlag('quiet', false);
+
+  /**
+   * Adds the legacy Icon and new button imports to the correct global arrays to be used by the other checks
+   * @param node The import node found by ESLint
+   */
+  const checkImportDeclarations = node => {
+    const moduleSource = node.source.value;
+
+    // Find the imports for legacy icons
+    if (moduleSource && typeof moduleSource === 'string' && ['@atlaskit/icon/glyph/', '@atlaskit/icon-object/glyph/'].find(val => moduleSource.startsWith(val)) && node.specifiers.length > 0) {
+      for (const spec of node.specifiers) {
+        if (spec.local.name) {
+          legacyIconImports[spec.local.name] = {
+            packageName: moduleSource,
+            exported: false
+          };
+        }
+      }
+    }
+
+    // Find the imports for new button and IconButton
+    if (typeof moduleSource === 'string' && moduleSource.startsWith('@atlaskit/button/new') && node.specifiers.length) {
+      for (const spec of node.specifiers) {
+        if (spec.type === 'ImportDefaultSpecifier') {
+          newButtonImports.add(spec.local.name);
+        } else if (spec.type === 'ImportSpecifier' && spec.imported.name === 'IconButton') {
+          newButtonImports.add(spec.local.name);
+        }
+      }
+    }
+  };
+
+  /**
+   * Adds the legacy Icon and new button variable reassignments to the correct global arrays to be used by the other checks
+   * @param node The variable reassignment node found by ESLint
+   */
+  const checkVariableDeclarations = node => {
+    if (isNodeOfType(node, 'VariableDeclaration')) {
+      const isExported = node.parent && isNodeOfType(node.parent, 'ExportNamedDeclaration');
+      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')) {
+          if (decl.init.name in legacyIconImports) {
+            legacyIconImports[decl.id.name] = {
+              packageName: legacyIconImports[decl.init.name].packageName,
+              exported: legacyIconImports[decl.init.name].exported || isExported
+            };
+          } else if (newButtonImports.has(decl.init.name)) {
+            newButtonImports.add(decl.id.name);
+          }
+        }
+      }
+    }
+  };
+
+  /**
+   * Checks if the default export is a re-export of a legacy icon and stores the errors in the global array
+   * @param node The default export node found by ESLint
+   */
+  const checkExportDefaultDeclaration = node => {
+    let exportName = '';
+    let packageName = '';
+    if ('declaration' in node && node.declaration && isNodeOfType(node.declaration, 'Identifier') && node.declaration.name in legacyIconImports) {
+      packageName = legacyIconImports[node.declaration.name].packageName;
+      exportName = 'Default export';
+    } else if ('declaration' in node && node.declaration && isNodeOfType(node.declaration, 'AssignmentExpression') && isNodeOfType(node.declaration.left, 'Identifier') && isNodeOfType(node.declaration.right, 'Identifier') && node.declaration.right.name in legacyIconImports) {
+      packageName = legacyIconImports[node.declaration.right.name].packageName;
+      exportName = node.declaration.left.name;
+    } else {
+      return;
+    }
+    createCantMigrateReExportError(node, packageName, exportName, errorsManual);
+    guidance[locToString(node)] = createGuidance(packageName);
+  };
+
+  /**
+   * Checks if the named exports are re-exports of a legacy icon and stores the errors in the global array
+   * @param node The named export node found by ESLint
+   */
+  const checkExportNamedVariables = node => {
+    // export {default as AddIcon} from '@atlaskit/icon/glyph/add';
+    if (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) {
+        createCantMigrateReExportError(node, moduleSource, node.specifiers[0].exported.name, errorsManual);
+        guidance[locToString(node)] = createGuidance(moduleSource);
+      }
+    } else if (node.declaration && isNodeOfType(node.declaration, 'VariableDeclaration')) {
+      // export const Icon = AddIcon;
+      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) {
+          createCantMigrateReExportError(node, legacyIconImports[decl.init.name].packageName, decl.init.name, errorsManual);
+          guidance[locToString(node)] = createGuidance(createGuidance(legacyIconImports[decl.init.name].packageName));
+        }
+      }
+    } else if (!node.source && node.specifiers && node.specifiers.length > 0) {
+      /**
+       * case where multiple consts are re-exported:
+       * const AddIcon = LegacyIcon;
+       * const crossIcon = LegacyIcon2;
+       * export { AddIcon, CrossIcon as default }
+       */
+      for (const spec of node.specifiers) {
+        if (spec.local.name in legacyIconImports) {
+          //update legacy imports to be exported
+          legacyIconImports[spec.local.name] = {
+            packageName: legacyIconImports[spec.local.name].packageName,
+            exported: true
+          };
+          createCantMigrateReExportError(spec, legacyIconImports[spec.local.name].packageName, spec.exported.name, errorsManual);
+          guidance[locToString(spec)] = createGuidance(legacyIconImports[spec.local.name].packageName);
+        }
+      }
+    }
+  };
+
+  /**
+   * Checks if a legacy icon is referenced in an array or map and stores the errors in the global array
+   * @param node The array/map node found by ESLint
+   */
+  const checkArrayOrMap = node => {
+    if (!isNodeOfType(node, 'Identifier')) {
+      return;
+    }
+    if (node.name && node.name in legacyIconImports && legacyIconImports[node.name].packageName) {
+      createCantMigrateIdentifierError(node, legacyIconImports[node.name].packageName, node.name, errorsManual);
+      guidance[locToString(node)] = createGuidance(legacyIconImports[node.name].packageName);
+    }
+  };
+
+  /**
+   * Checks if a legacy icon is referenced as a prop to a component and stores the errors in the global array
+   * @param node The property node found by ESLint
+   */
+  const checkIconAsProp = node => {
+    if (!isNodeOfType(node, 'Identifier')) {
+      return;
+    }
+    if (!node.parent || !node.parent.parent || !node.parent.parent.parent) {
+      return;
+    }
+    if (!isNodeOfType(node.parent, 'JSXExpressionContainer') || !isNodeOfType(node.parent.parent, 'JSXAttribute') || !isNodeOfType(node.parent.parent.parent, 'JSXOpeningElement')) {
+      return;
+    }
+    if (node.name in legacyIconImports && isNodeOfType(node.parent.parent.name, 'JSXIdentifier') && node.parent.parent.name.name !== 'LEGACY_fallbackIcon') {
+      var _migrationMapObject$s;
+      const migrationMapObject = getMigrationMapObject(legacyIconImports[node.name].packageName);
+      const newIcon = migrationMapObject === null || migrationMapObject === void 0 ? void 0 : migrationMapObject.newIcon;
+      const isNewIconMigratable = canAutoMigrateNewIconBasedOnSize(migrationMapObject === null || migrationMapObject === void 0 ? void 0 : (_migrationMapObject$s = migrationMapObject.sizeGuidance) === null || _migrationMapObject$s === void 0 ? void 0 : _migrationMapObject$s.medium);
+      const isInNewButton = isNodeOfType(node.parent.parent.parent.name, 'JSXIdentifier') && newButtonImports.has(node.parent.parent.parent.name.name);
+      let UNSAFE_size = null;
+      let UNSAFE_propName = null;
+      if (isInNewButton) {
+        const result = findUNSAFEProp(node.parent.parent, node.parent.parent.parent);
+        UNSAFE_size = result.UNSAFE_size;
+        UNSAFE_propName = result.UNSAFE_propName;
+      }
+      if (newIcon && isInNewButton && isNewIconMigratable && UNSAFE_size !== 'large' && UNSAFE_size !== 'xlarge') {
+        const iconKey = getIconKey(legacyIconImports[node.name].packageName);
+        createAutoMigrationError(node, legacyIconImports[node.name].packageName, node.name, newIcon, iconKey, errorsAuto);
+        guidance[locToString(node)] = createGuidance(legacyIconImports[node.name].packageName, 'medium');
+      } else if ((!newIcon || !isNewIconMigratable) && !UNSAFE_size) {
+        createCantFindSuitableReplacementError(node, legacyIconImports[node.name].packageName, node.name, errorsManual);
+        guidance[locToString(node)] = createGuidance(legacyIconImports[node.name].packageName);
+      } else if ((UNSAFE_size === 'large' || UNSAFE_size === 'xlarge') && UNSAFE_propName) {
+        createCantMigrateUnsafeProp(node, UNSAFE_propName, UNSAFE_size, legacyIconImports[node.name].packageName, node.name, errorsManual);
+        guidance[locToString(node)] = createGuidance(legacyIconImports[node.name].packageName, UNSAFE_size);
+      } else if (!isInNewButton) {
+        createCantMigrateFunctionUnknownError(node, legacyIconImports[node.name].packageName, node.name, errorsManual);
+        guidance[locToString(node)] = createGuidance(legacyIconImports[node.name].packageName);
+      }
+    }
+  };
+
+  /**
+   * Checks if a legacy icon is being rendered and stores the errors in the global array
+   * @param node The JSX node found by ESLint
+   */
+  const checkJSXElement = node => {
+    var _node$parent, _node$parent$parent, _node$parent$parent$p;
+    if (!('openingElement' in node) || !isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+      return;
+    }
+
+    // Determine if element is rendered inside LEGACY_fallbackIcon prop - if so, don't perform any checks
+    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') && ((_node$parent$parent$p = node.parent.parent.parent.name) === null || _node$parent$parent$p === void 0 ? void 0 : _node$parent$parent$p.name) === 'LEGACY_fallbackIcon') {
+      return;
+    }
+    const name = node.openingElement.name.name;
+    // Legacy icons rendered as JSX elements
+    if (name in legacyIconImports) {
+      var _node$parent2, _node$parent2$parent, _node$parent3, _node$parent3$parent, _node$parent3$parent$, _size;
+      // Determine if inside a new button - if so:
+      // - Assume spread props are safe - still error if props explicitly set to unmigratable values
+      // - eventually: look for UNSAFE_iconBefore_size props on the parent button - if it's large/xlarge, fail
+      let insideNewButton = false;
+      let UNSAFE_propName = null;
+      let UNSAFE_size = null;
+      if (node.parent && isNodeOfType(node.parent, 'ArrowFunctionExpression') && (_node$parent2 = node.parent) !== null && _node$parent2 !== void 0 && (_node$parent2$parent = _node$parent2.parent) !== null && _node$parent2$parent !== void 0 && _node$parent2$parent.parent && isNodeOfType(node.parent.parent.parent, 'JSXAttribute') && isNodeOfType(node.parent.parent.parent.name, 'JSXIdentifier') && (_node$parent3 = node.parent) !== null && _node$parent3 !== void 0 && (_node$parent3$parent = _node$parent3.parent) !== null && _node$parent3$parent !== void 0 && (_node$parent3$parent$ = _node$parent3$parent.parent) !== null && _node$parent3$parent$ !== void 0 && _node$parent3$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;
+        const result = findUNSAFEProp(node.parent.parent.parent, node.parent.parent.parent.parent);
+        UNSAFE_size = result.UNSAFE_size;
+        UNSAFE_propName = result.UNSAFE_propName;
+      }
+
+      // Find size prop on node
+      let size = 'medium';
+      let primaryColor = null;
+      let afterSpreadSet = new Set();
+      let requiredAttributesAfterSpread = new Set(['size', 'primaryColor', 'secondaryColor']);
+      let hasSpread = false;
+      let hasPrimaryColorProp = false;
+      for (const attr of node.openingElement.attributes) {
+        // Detect spread props
+        if (isNodeOfType(attr, 'JSXSpreadAttribute')) {
+          // In case there are more spread props
+          afterSpreadSet.clear();
+          hasSpread = true;
+          continue;
+        }
+        if (!isNodeOfType(attr, 'JSXAttribute') || !isNodeOfType(attr.name, 'JSXIdentifier') || !attr.value) {
+          continue;
+        }
+
+        // Register props that aren't being spread
+        afterSpreadSet.add(attr.name.name);
+
+        // Extract values of props
+        switch (attr.name.name) {
+          case 'size':
+            if (isNodeOfType(attr.value, 'Literal') && isSize(attr.value.value)) {
+              size = attr.value.value;
+            } else if (isNodeOfType(attr.value, 'JSXExpressionContainer') && isNodeOfType(attr.value.expression, 'Literal') && isSize(attr.value.expression.value)) {
+              size = attr.value.expression.value;
+            } else {
+              size = null;
+            }
+            break;
+          case 'primaryColor':
+            primaryColor = getPrimaryColor(attr);
+            hasPrimaryColorProp = true;
+            break;
+        }
+      }
+      let hasManualMigration = false;
+      if (primaryColor && !canMigrateColor(primaryColor) || hasPrimaryColorProp && !primaryColor) {
+        createCantMigrateColorError(node, primaryColor ? `the value of '${primaryColor}'` : 'a statically unknown value', errorsManual, legacyIconImports[name].packageName, name);
+        hasManualMigration = true;
+      }
+
+      // If size can't be determined (i.e. size is a variable or function call, etc)
+      // then we need to error; icon can't be auto-migrated safely
+      if (size === null) {
+        createCantMigrateSizeUnknown(node, errorsManual, legacyIconImports[name].packageName, name);
+        hasManualMigration = true;
+      }
+      guidance[locToString(node)] = createGuidance(legacyIconImports[name].packageName, size ? size : undefined);
+      // Check for unsafe size
+      if ((UNSAFE_size === 'large' || UNSAFE_size === 'xlarge') && (UNSAFE_propName === 'UNSAFE_iconAfter_size' || UNSAFE_propName === 'UNSAFE_iconBefore_size' || UNSAFE_propName === 'UNSAFE_size')) {
+        createCantMigrateUnsafeProp(node, UNSAFE_propName, UNSAFE_size, legacyIconImports[name].packageName, name, errorsManual);
+        hasManualMigration = true;
+      }
+      // Do a set comparison - is requiredAttributesAfterSpread a subset of afterSpreadSet?
+      if (hasSpread === true && !Array.from(requiredAttributesAfterSpread).every(val => afterSpreadSet.has(val)) && !insideNewButton) {
+        const missingProps = Array.from(requiredAttributesAfterSpread).filter(val => !afterSpreadSet.has(val));
+        createCantMigrateSpreadPropsError(node, missingProps, errorsManual, legacyIconImports[name].packageName, name);
+        hasManualMigration = true;
+      }
+      // Check if it is an exported component?
+      if (legacyIconImports[name].exported) {
+        createCantMigrateReExportError(node, legacyIconImports[name].packageName, name, errorsManual);
+        hasManualMigration = true;
+      }
+      const migrationMapObject = getMigrationMapObject(legacyIconImports[name].packageName);
+      const iconKey = getIconKey(legacyIconImports[name].packageName);
+      const newIcon = migrationMapObject === null || migrationMapObject === void 0 ? void 0 : migrationMapObject.newIcon;
+      const isNewIconMigratable = canAutoMigrateNewIconBasedOnSize(migrationMapObject === null || migrationMapObject === void 0 ? void 0 : migrationMapObject.sizeGuidance[(_size = size) !== null && _size !== void 0 ? _size : 'medium']);
+      if (!hasManualMigration && newIcon && isNewIconMigratable) {
+        createAutoMigrationError(node, legacyIconImports[name].packageName, name, newIcon, iconKey, errorsAuto);
+      } else if ((!newIcon || !isNewIconMigratable) && size) {
+        createCantFindSuitableReplacementError(node, legacyIconImports[name].packageName, name, errorsManual);
+      }
+    }
+  };
+
+  /**
+   * Checks if a legacy icon is being passed into a function call and stores the errors in the global array
+   * @param node The function call node found by ESLint
+   */
+  const checkCallExpression = node => {
+    if ('arguments' in node && node.arguments.length) {
+      for (const arg of node.arguments) {
+        if (isNodeOfType(arg, 'Identifier') && arg.name in legacyIconImports && legacyIconImports[arg.name].packageName) {
+          createCantMigrateFunctionUnknownError(node, legacyIconImports[arg.name].packageName, arg.name, errorsManual);
+          guidance[locToString(node)] = createGuidance(legacyIconImports[arg.name].packageName);
+        }
+      }
+    }
+  };
+
+  /**
+   * Throws the relevant errors in the correct order based on configs.
+   */
+  const throwErrors = () => {
+    if (shouldErrorForManualMigration) {
+      for (const [key, errorList] of Object.entries(errorsManual)) {
+        const node = 'node' in errorList.errors[0] ? errorList.errors[0].node : null;
+        if (node) {
+          context.report({
+            node,
+            messageId: 'noLegacyIconsManualMigration',
+            data: {
+              iconName: errorList.iconName,
+              importSource: errorList.importSource,
+              quietModeGuidance: isQuietMode ? 'For more information see the below errors:' : ''
+            }
+          });
+          if (!isQuietMode) {
+            for (const error of errorList.errors) {
+              context.report(error);
+            }
+            if (key in guidance) {
+              context.report({
+                node,
+                messageId: 'guidance',
+                data: {
+                  guidance: guidance[key]
+                }
+              });
+            }
+          }
+        }
+      }
+    }
+    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 (key in errorsManual) {
+          delete errorsAuto[key];
+          continue;
+        }
+        const node = 'node' in error ? error.node : null;
+        if (node) {
+          context.report(error);
+          if (key in guidance && !isQuietMode) {
+            context.report({
+              node,
+              messageId: 'guidance',
+              data: {
+                guidance: guidance[key]
+              }
+            });
+          }
+        }
+      }
+    }
+  };
+  return {
+    checkImportDeclarations,
+    checkVariableDeclarations,
+    checkExportDefaultDeclaration,
+    checkExportNamedVariables,
+    checkArrayOrMap,
+    checkIconAsProp,
+    checkJSXElement,
+    checkCallExpression,
+    throwErrors
+  };
+};