@atlaskit/eslint-plugin-design-system 13.23.3 → 13.24.0

package/dist/es2019/rules/lozenge-appearance-and-isbold-migration/index.js

@@ -0,0 +1,261 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+const rule = createLintRule({
+  meta: {
+    name: 'lozenge-appearance-and-isbold-migration',
+    fixable: 'code',
+    type: 'suggestion',
+    docs: {
+      description: 'Helps migrate deprecated Lozenge usages to the new API or Tag component as part of the Labelling System Phase 1 migration.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      replaceAppearance: "'appearance' prop on <Lozenge> is deprecated — use 'color' instead.",
+      migrateTag: 'Non-bold <Lozenge> variants should migrate to <Tag> component.',
+      manualReview: "Dynamic 'isBold' props require manual review before migration."
+    }
+  },
+  create(context) {
+    /**
+     * Contains a map of imported Lozenge components.
+     */
+    const lozengeImports = {}; // local name -> import source
+    const tagImports = {}; // local name -> import source
+
+    /**
+     * Check if a JSX attribute value is a literal false
+     */
+    function isLiteralFalse(node) {
+      return node && node.type === 'JSXExpressionContainer' && node.expression && node.expression.type === 'Literal' && node.expression.value === false;
+    }
+
+    /**
+     * Check if a JSX attribute value is dynamic (not a literal boolean)
+     */
+    function isDynamicExpression(node) {
+      if (!node || node.type !== 'JSXExpressionContainer') {
+        return false;
+      }
+      const expr = node.expression;
+      return expr && !(expr.type === 'Literal' && typeof expr.value === 'boolean');
+    }
+
+    /**
+     * Get all attributes as an object for easier manipulation
+     */
+    function getAttributesMap(attributes) {
+      const map = {};
+      attributes.forEach(attr => {
+        if (attr.type === 'JSXAttribute' && attr.name.type === 'JSXIdentifier') {
+          map[attr.name.name] = attr;
+        }
+      });
+      return map;
+    }
+
+    /**
+     * Map Lozenge appearance values to Tag color values
+     */
+    function mapAppearanceToTagColor(appearanceValue) {
+      const mapping = {
+        success: 'lime',
+        default: 'standard',
+        removed: 'red',
+        inprogress: 'blue',
+        new: 'purple',
+        moved: 'orange'
+      };
+      return mapping[appearanceValue] || appearanceValue;
+    }
+
+    /**
+     * Map Lozenge appearance values to Lozenge color values
+     */
+    function mapAppearanceToLozengeColor(appearanceValue) {
+      const mapping = {
+        default: 'neutral',
+        inprogress: 'information',
+        moved: 'warning',
+        new: 'discovery',
+        removed: 'danger',
+        success: 'success'
+      };
+      return mapping[appearanceValue] || appearanceValue;
+    }
+
+    /**
+     * Extract the string value from a JSX attribute value
+     */
+    function extractStringValue(attrValue) {
+      if (!attrValue) {
+        return null;
+      }
+      if (attrValue.type === 'Literal') {
+        return attrValue.value;
+      }
+      if (attrValue.type === 'JSXExpressionContainer' && attrValue.expression && attrValue.expression.type === 'Literal') {
+        return attrValue.expression.value;
+      }
+      return null;
+    }
+
+    /**
+     * Generate the replacement JSX element text
+     */
+    function generateTagReplacement(node, lozengeLocalName) {
+      const sourceCode = context.getSourceCode();
+      const attributes = node.openingElement.attributes;
+
+      // Build new attributes array, excluding isBold and mapping appearance to color
+      const newAttributes = [];
+      attributes.forEach(attr => {
+        if (attr.type === 'JSXAttribute' && attr.name.type === 'JSXIdentifier') {
+          const attrName = attr.name.name;
+          if (attrName === 'isBold') {
+            // Skip isBold attribute
+            return;
+          }
+          if (attrName === 'appearance') {
+            // Map appearance to color with value transformation
+            const stringValue = extractStringValue(attr.value);
+            if (stringValue && typeof stringValue === 'string') {
+              const mappedColor = mapAppearanceToTagColor(stringValue);
+              newAttributes.push(`color="${mappedColor}"`);
+            } else {
+              // If we can't extract the string value, keep as-is but rename to color
+              const value = attr.value ? sourceCode.getText(attr.value) : '';
+              newAttributes.push(`color${value ? `=${value}` : ''}`);
+            }
+            return;
+          }
+
+          // Keep all other attributes
+          newAttributes.push(sourceCode.getText(attr));
+        } else if (attr.type === 'JSXSpreadAttribute') {
+          // Keep spread attributes
+          newAttributes.push(sourceCode.getText(attr));
+        }
+      });
+      const attributesText = newAttributes.length > 0 ? ` ${newAttributes.join(' ')}` : '';
+      const children = node.children.length > 0 ? sourceCode.getText().slice(node.openingElement.range[1], node.closingElement ? node.closingElement.range[0] : node.range[1]) : '';
+      if (node.closingElement) {
+        return `<Tag${attributesText}>${children}</Tag>`;
+      } else {
+        return `<Tag${attributesText} />`;
+      }
+    }
+    return {
+      ImportDeclaration(node) {
+        const moduleSource = node.source.value;
+        if (typeof moduleSource === 'string') {
+          // Track Lozenge imports
+          if (moduleSource === '@atlaskit/lozenge' || moduleSource.startsWith('@atlaskit/lozenge')) {
+            node.specifiers.forEach(spec => {
+              if (spec.type === 'ImportDefaultSpecifier') {
+                lozengeImports[spec.local.name] = moduleSource;
+              } else if (spec.type === 'ImportSpecifier' && spec.imported.type === 'Identifier') {
+                if (spec.imported.name === 'Lozenge') {
+                  lozengeImports[spec.local.name] = moduleSource;
+                }
+              }
+            });
+          }
+          // Track Tag imports
+          if (moduleSource === '@atlaskit/tag' || moduleSource.startsWith('@atlaskit/tag/')) {
+            node.specifiers.forEach(spec => {
+              if (spec.type === 'ImportDefaultSpecifier') {
+                tagImports[spec.local.name] = moduleSource;
+              } else if (spec.type === 'ImportSpecifier' && spec.imported.type === 'Identifier') {
+                if (spec.imported.name === 'Tag') {
+                  tagImports[spec.local.name] = moduleSource;
+                }
+              }
+            });
+          }
+        }
+      },
+      JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        const elementName = node.openingElement.name.name;
+
+        // Only process if this is a Lozenge component we've imported
+        if (!lozengeImports[elementName]) {
+          return;
+        }
+        const attributesMap = getAttributesMap(node.openingElement.attributes);
+        const appearanceProp = attributesMap.appearance;
+        const isBoldProp = attributesMap.isBold;
+
+        // Handle appearance prop migration
+        if (appearanceProp) {
+          context.report({
+            node: appearanceProp,
+            messageId: 'replaceAppearance',
+            fix: fixer => {
+              const fixes = [];
+              // Always rename the prop name
+              fixes.push(fixer.replaceText(appearanceProp.name, 'color'));
+
+              // Also map the value if it's a string literal and we're not migrating to Tag
+              const shouldMigrateToTag = !isBoldProp || isLiteralFalse(isBoldProp.value);
+              if (!shouldMigrateToTag) {
+                const stringValue = extractStringValue(appearanceProp.value);
+                if (stringValue && typeof stringValue === 'string') {
+                  const mappedColor = mapAppearanceToLozengeColor(stringValue);
+                  if (mappedColor !== stringValue) {
+                    // Update the value if it changed
+                    if (appearanceProp.value.type === 'Literal') {
+                      fixes.push(fixer.replaceText(appearanceProp.value, `"${mappedColor}"`));
+                    } else if (appearanceProp.value.type === 'JSXExpressionContainer' && appearanceProp.value.expression && appearanceProp.value.expression.type === 'Literal') {
+                      fixes.push(fixer.replaceText(appearanceProp.value.expression, `"${mappedColor}"`));
+                    }
+                  }
+                }
+              }
+              return fixes;
+            }
+          });
+        }
+
+        // Handle isBold prop and Tag migration
+        if (isBoldProp) {
+          if (isLiteralFalse(isBoldProp.value)) {
+            // isBold={false} should migrate to Tag
+            context.report({
+              node: node,
+              messageId: 'migrateTag',
+              fix: fixer => {
+                const replacement = generateTagReplacement(node, elementName);
+                return fixer.replaceText(node, replacement);
+              }
+            });
+          } else if (isDynamicExpression(isBoldProp.value)) {
+            // Dynamic isBold requires manual review
+            context.report({
+              node: isBoldProp,
+              messageId: 'manualReview'
+            });
+          }
+          // isBold={true} or isBold (implicit true) - no action needed
+        } else {
+          // No isBold prop means implicit false, should migrate to Tag
+          context.report({
+            node: node,
+            messageId: 'migrateTag',
+            fix: fixer => {
+              const replacement = generateTagReplacement(node, elementName);
+              return fixer.replaceText(node, replacement);
+            }
+          });
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/es2019/rules/no-deprecated-imports/handlers/icon.js

@@ -1,6 +1,6 @@
 import { isNodeOfType, literal } from 'eslint-codemod-utils';
 import coreIconLabMetadata from '@atlaskit/icon-lab/metadata';
-import { coreIconMetadata, utilityIconMetadata } from '@atlaskit/icon/metadata';
+import { coreIconMetadata } from '@atlaskit/icon/metadata';
 import { pathWithCustomMessageId } from '../constants';
 /**
  * __Deprecation icon handler__
@@ -61,23 +61,22 @@ export const getDeprecationIconHandler = context => {
     const shouldTurnOffAutoFixer = getConfigFlag('turnOffAutoFixer', false);
     for (const [importSource, error] of Object.entries(importErrors)) {
       if (importSource.includes('/migration/')) {
-        var _metadata$deprecatedI, _error$data;
-        const [_location, type, _migration, name] = importSource.split('/').slice(1);
-        const metadata = type === 'core' ? coreIconMetadata : utilityIconMetadata;
+        var _coreIconMetadata$dep, _error$data;
+        const [_location, _, _migration, name] = importSource.split('/').slice(1);
         const [deprecatedIconName, legacyIconName] = name.split('--');
-        const replacement = metadata === null || metadata === void 0 ? void 0 : (_metadata$deprecatedI = metadata[deprecatedIconName]) === null || _metadata$deprecatedI === void 0 ? void 0 : _metadata$deprecatedI.replacement;
+        const replacement = (_coreIconMetadata$dep = coreIconMetadata[deprecatedIconName]) === null || _coreIconMetadata$dep === void 0 ? void 0 : _coreIconMetadata$dep.replacement;
         if (replacement && ((_error$data = error.data) === null || _error$data === void 0 ? void 0 : _error$data.unfixable) === 'false') {
           const newIconName = getIconComponentName(replacement.name);
           if (!shouldTurnOffAutoFixer) {
-            addAutoFix(error, importSource, `${replacement.location}/${replacement.type}/migration/${replacement.name}--${legacyIconName}`, newIconName);
+            addAutoFix(error, importSource, `${replacement.location}/core/migration/${replacement.name}--${legacyIconName}`, newIconName);
           }
         }
       } else {
         var _metadata, _metadata$name;
-        const [location, type, name] = importSource.split('/').slice(1);
+        const [location, _, name] = importSource.split('/').slice(1);
         let metadata;
         if (location === 'icon') {
-          metadata = type === 'core' ? coreIconMetadata : utilityIconMetadata;
+          metadata = coreIconMetadata;
         } else if (location === 'icon-lab') {
           metadata = coreIconLabMetadata;
         }
@@ -85,7 +84,7 @@ export const getDeprecationIconHandler = context => {
         if (replacement) {
           const newIconName = getIconComponentName(replacement.name);
           if (!shouldTurnOffAutoFixer) {
-            addAutoFix(error, importSource, `${replacement.location}/${replacement.type}/${replacement.name}`, newIconName);
+            addAutoFix(error, importSource, `${replacement.location}/core/${replacement.name}`, newIconName);
           }
         }
       }

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

@@ -63,10 +63,10 @@ const getNewIconNameAndImportPath = (iconPackage, shouldUseMigrationPath) => {
   const {
     newIcon
   } = migrationMapObject;
-  const migrationPath = newIcon.name === legacyIconName ? `${newIcon.package}/${newIcon.type}/migration/${newIcon.name}` : `${newIcon.package}/${newIcon.type}/migration/${newIcon.name}--${legacyIconName.replaceAll('/', '-')}`;
+  const migrationPath = newIcon.name === legacyIconName ? `${newIcon.package}/core/migration/${newIcon.name}` : `${newIcon.package}/core/migration/${newIcon.name}--${legacyIconName.replaceAll('/', '-')}`;
   return {
     iconName: newIcon.name,
-    importPath: shouldUseMigrationPath ? migrationPath : `${newIcon.package}/${newIcon.type}/${newIcon.name}`
+    importPath: shouldUseMigrationPath ? migrationPath : `${newIcon.package}/core/${newIcon.name}`
   };
 };
 

package/dist/es2019/rules/utils/get-deprecated-config.js

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import { deprecatedCore as deprecatedIconLabCore, deprecatedUtility as deprecatedIconLabUtility } from '@atlaskit/icon-lab/deprecated-map';
-import { deprecatedCore as deprecatedIconCore, deprecatedUtility as deprecatedIconUtility } from '@atlaskit/icon/deprecated-map';
+import { deprecatedCore as deprecatedIconCore } from '@atlaskit/icon/deprecated-map';
 export const getConfig = specifier => {
   const configPath = path.resolve(__dirname, '..', '..', '..', 'configs', 'deprecated.json');
   const source = fs.readFileSync(configPath, 'utf8');
@@ -11,7 +11,6 @@ export const getConfig = specifier => {
     imports: {
       ...parsedConfig.imports,
       ...deprecatedIconCore,
-      ...deprecatedIconUtility,
       ...deprecatedIconLabCore,
       ...deprecatedIconLabUtility
     }

package/dist/esm/presets/all-flat.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5aac2d8dc7c2832bcb8a96a143d60db5>>
+ * @codegen <<SignedSource::7fae089db9d7d7153fea58c673bd56af>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -15,6 +15,7 @@ var rules = {
     '@atlaskit/design-system/ensure-icon-color': 'error',
     '@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
     '@atlaskit/design-system/icon-label': 'warn',
+    '@atlaskit/design-system/lozenge-appearance-and-isbold-migration': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
     '@atlaskit/design-system/no-css-tagged-template-expression': 'error',

package/dist/esm/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::43ea4411c4e338a916772d4bfda146cc>>
+ * @codegen <<SignedSource::655d7f24171da0dff60003d0f235e48a>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -14,6 +14,7 @@ var rules = {
     '@atlaskit/design-system/ensure-icon-color': 'error',
     '@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
     '@atlaskit/design-system/icon-label': 'warn',
+    '@atlaskit/design-system/lozenge-appearance-and-isbold-migration': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
     '@atlaskit/design-system/no-css-tagged-template-expression': 'error',

package/dist/esm/presets/recommended-flat.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3328b9c675a0d09876dcfbc5d29bc63f>>
+ * @codegen <<SignedSource::44a03b30a12e3b52d720c16785c9c649>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -11,6 +11,7 @@ var rules = {
     '@atlaskit/design-system/consistent-css-prop-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/icon-label': 'warn',
+    '@atlaskit/design-system/lozenge-appearance-and-isbold-migration': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
     '@atlaskit/design-system/no-deprecated-apis': 'error',

package/dist/esm/presets/recommended.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b28f895280627b7a35f059f90783644a>>
+ * @codegen <<SignedSource::0311febdad396820af1b01dd2825b63f>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -10,6 +10,7 @@ var rules = {
     '@atlaskit/design-system/consistent-css-prop-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/icon-label': 'warn',
+    '@atlaskit/design-system/lozenge-appearance-and-isbold-migration': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
     '@atlaskit/design-system/no-deprecated-apis': 'error',

package/dist/esm/rules/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::732bff0fc39d7ff05b6688694101698d>>
+ * @codegen <<SignedSource::75f94fc6b6fa998eed54b610e41bb9b1>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -11,6 +11,7 @@ import ensureDesignTokenUsagePreview from './ensure-design-token-usage-preview';
 import ensureIconColor from './ensure-icon-color';
 import ensureProperXcssUsage from './ensure-proper-xcss-usage';
 import iconLabel from './icon-label';
+import lozengeAppearanceAndIsboldMigration from './lozenge-appearance-and-isbold-migration';
 import noBannedImports from './no-banned-imports';
 import noBooleanAutofocusOnModalDialog from './no-boolean-autofocus-on-modal-dialog';
 import noCssTaggedTemplateExpression from './no-css-tagged-template-expression';
@@ -80,6 +81,7 @@ export var rules = {
   'ensure-icon-color': ensureIconColor,
   'ensure-proper-xcss-usage': ensureProperXcssUsage,
   'icon-label': iconLabel,
+  'lozenge-appearance-and-isbold-migration': lozengeAppearanceAndIsboldMigration,
   'no-banned-imports': noBannedImports,
   'no-boolean-autofocus-on-modal-dialog': noBooleanAutofocusOnModalDialog,
   'no-css-tagged-template-expression': noCssTaggedTemplateExpression,