@atlaskit/eslint-plugin-design-system 13.24.2 → 13.26.0

package/dist/esm/rules/{lozenge-appearance-and-isbold-migration → lozenge-isBold-and-lozenge-badge-appearance-migration}/index.js

@@ -2,18 +2,20 @@ import { isNodeOfType } from 'eslint-codemod-utils';
 import { createLintRule } from '../utils/create-rule';
 var rule = createLintRule({
   meta: {
-    name: 'lozenge-appearance-and-isbold-migration',
+    name: 'lozenge-isBold-and-lozenge-badge-appearance-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.',
+      description: 'Helps migrate Lozenge isBold prop and appearance values (for both Lozenge and Badge components) as part of the Labelling System Phase 1 migration.',
       recommended: true,
       severity: 'warn'
     },
     messages: {
       updateAppearance: 'Update appearance value to new semantic value.',
       migrateTag: 'Non-bold <Lozenge> variants should migrate to <Tag> component.',
-      manualReview: "Dynamic 'isBold' props require manual review before migration."
+      manualReview: "Dynamic 'isBold' props require manual review before migration.",
+      updateBadgeAppearance: 'Update Badge appearance value "{{oldValue}}" to new semantic value "{{newValue}}".',
+      dynamicBadgeAppearance: 'Dynamic appearance prop values require manual review to ensure they use the new semantic values: neutral, information, inverse, danger, success.'
     }
   },
   create: function create(context) {
@@ -22,6 +24,11 @@ var rule = createLintRule({
      */
     var lozengeImports = {}; // local name -> import source
 
+    /**
+     * Contains a map of imported Badge components.
+     */
+    var badgeImports = {}; // local name -> import source
+
     /**
      * Check if a JSX attribute value is a literal false
      */
@@ -30,14 +37,25 @@ var rule = createLintRule({
     }
 
     /**
-     * Check if a JSX attribute value is dynamic (not a literal boolean)
+     * Check if a JSX attribute value is dynamic (not a static literal value)
+     * Can be used for any prop type (boolean, string, etc.)
      */
     function isDynamicExpression(node) {
-      if (!node || node.type !== 'JSXExpressionContainer') {
+      if (!node) {
+        return false;
+      }
+
+      // If it's a plain literal (e.g., appearance="value"), it's not dynamic
+      if (node.type === 'Literal') {
         return false;
       }
-      var expr = node.expression;
-      return expr && !(expr.type === 'Literal' && typeof expr.value === 'boolean');
+
+      // If it's an expression container with a non-literal expression, it's dynamic
+      if (node.type === 'JSXExpressionContainer') {
+        var expr = node.expression;
+        return expr && expr.type !== 'Literal';
+      }
+      return false;
     }
 
     /**
@@ -70,6 +88,21 @@ var rule = createLintRule({
       return mapping[oldValue] || oldValue;
     }
 
+    /**
+     * Map Badge old appearance values to new semantic appearance values
+     */
+    function mapBadgeToNewAppearanceValue(oldValue) {
+      var mapping = {
+        added: 'success',
+        removed: 'danger',
+        default: 'neutral',
+        primary: 'information',
+        primaryInverted: 'inverse',
+        important: 'danger'
+      };
+      return mapping[oldValue] || oldValue;
+    }
+
     /**
      * Extract the string value from a JSX attribute value
      */
@@ -86,6 +119,25 @@ var rule = createLintRule({
       return null;
     }
 
+    /**
+     * Create a fixer function to replace an appearance prop value
+     * Handles both Literal and JSXExpressionContainer with Literal
+     */
+    function createAppearanceFixer(attrValue, newValue) {
+      return function (fixer) {
+        if (!attrValue) {
+          return null;
+        }
+        if (attrValue.type === 'Literal') {
+          return fixer.replaceText(attrValue, "\"".concat(newValue, "\""));
+        }
+        if (attrValue.type === 'JSXExpressionContainer' && 'expression' in attrValue && attrValue.expression && attrValue.expression.type === 'Literal') {
+          return fixer.replaceText(attrValue.expression, "\"".concat(newValue, "\""));
+        }
+        return null;
+      };
+    }
+
     /**
      * Generate the replacement JSX element text
      */
@@ -147,6 +199,18 @@ var rule = createLintRule({
               }
             });
           }
+          // Track Badge imports
+          if (moduleSource === '@atlaskit/badge' || moduleSource.startsWith('@atlaskit/badge')) {
+            node.specifiers.forEach(function (spec) {
+              if (spec.type === 'ImportDefaultSpecifier') {
+                badgeImports[spec.local.name] = moduleSource;
+              } else if (spec.type === 'ImportSpecifier' && spec.imported.type === 'Identifier') {
+                if (spec.imported.name === 'Badge' || spec.imported.name === 'default') {
+                  badgeImports[spec.local.name] = moduleSource;
+                }
+              }
+            });
+          }
         }
       },
       JSXElement: function JSXElement(node) {
@@ -158,6 +222,45 @@ var rule = createLintRule({
         }
         var elementName = node.openingElement.name.name;
 
+        // Handle Badge components
+        if (badgeImports[elementName]) {
+          // Find the appearance prop
+          var _appearanceProp = node.openingElement.attributes.find(function (attr) {
+            return attr.type === 'JSXAttribute' && attr.name.type === 'JSXIdentifier' && attr.name.name === 'appearance';
+          });
+          if (!_appearanceProp || _appearanceProp.type !== 'JSXAttribute') {
+            // No appearance prop or it's a spread attribute, nothing to migrate
+            return;
+          }
+
+          // Check if it's a dynamic expression
+          if (isDynamicExpression(_appearanceProp.value)) {
+            context.report({
+              node: _appearanceProp,
+              messageId: 'dynamicBadgeAppearance'
+            });
+            return;
+          }
+
+          // Extract the string value
+          var stringValue = extractStringValue(_appearanceProp.value);
+          if (stringValue && typeof stringValue === 'string') {
+            var mappedValue = mapBadgeToNewAppearanceValue(stringValue);
+            if (mappedValue !== stringValue) {
+              context.report({
+                node: _appearanceProp,
+                messageId: 'updateBadgeAppearance',
+                data: {
+                  oldValue: stringValue,
+                  newValue: mappedValue
+                },
+                fix: createAppearanceFixer(_appearanceProp.value, mappedValue)
+              });
+            }
+          }
+          return;
+        }
+
         // Only process if this is a Lozenge component we've imported
         if (!lozengeImports[elementName]) {
           return;
@@ -171,21 +274,14 @@ var rule = createLintRule({
           var shouldMigrateToTag = !isBoldProp || isLiteralFalse(isBoldProp.value);
           if (!shouldMigrateToTag) {
             // Only update appearance values for Lozenge components that stay as Lozenge
-            var stringValue = extractStringValue(appearanceProp.value);
-            if (stringValue && typeof stringValue === 'string') {
-              var mappedValue = mapToNewAppearanceValue(stringValue);
-              if (mappedValue !== stringValue) {
+            var _stringValue = extractStringValue(appearanceProp.value);
+            if (_stringValue && typeof _stringValue === 'string') {
+              var _mappedValue = mapToNewAppearanceValue(_stringValue);
+              if (_mappedValue !== _stringValue) {
                 context.report({
                   node: appearanceProp,
                   messageId: 'updateAppearance',
-                  fix: function fix(fixer) {
-                    if (appearanceProp.value.type === 'Literal') {
-                      return fixer.replaceText(appearanceProp.value, "\"".concat(mappedValue, "\""));
-                    } else if (appearanceProp.value.type === 'JSXExpressionContainer' && appearanceProp.value.expression && appearanceProp.value.expression.type === 'Literal') {
-                      return fixer.replaceText(appearanceProp.value.expression, "\"".concat(mappedValue, "\""));
-                    }
-                    return null;
-                  }
+                  fix: createAppearanceFixer(appearanceProp.value, _mappedValue)
                 });
               }
             }

package/dist/esm/rules/use-tokens-shape/transformers/style-map.js

@@ -5,6 +5,7 @@ var radiusTokenMap = {
   '6px': 'radius.medium',
   '8px': 'radius.large',
   '12px': 'radius.xlarge',
+  '16px': 'radius.xxlarge',
   '50%': 'radius.full',
   '100%': 'radius.full',
   2: 'radius.xsmall',
@@ -13,11 +14,13 @@ var radiusTokenMap = {
   6: 'radius.medium',
   8: 'radius.large',
   12: 'radius.xlarge',
+  16: 'radius.xxlarge',
   '0.125rem': 'radius.xsmall',
   '0.25rem': 'radius.small',
   '0.375rem': 'radius.medium',
   '0.5rem': 'radius.large',
-  '0.75rem': 'radius.xlarge'
+  '0.75rem': 'radius.xlarge',
+  '1rem': 'radius.xxlarge'
 };
 var borderWidthTokenMap = {
   '1px': 'border.width'

package/dist/types/presets/all-flat.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7fae089db9d7d7153fea58c673bd56af>>
+ * @codegen <<SignedSource::df988d512376c1317e5f7a350ad19fb9>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Linter } from 'eslint';

package/dist/types/presets/all.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::655d7f24171da0dff60003d0f235e48a>>
+ * @codegen <<SignedSource::2dee8518d733b0b364809d0f5641afda>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { ESLint } from 'eslint';

package/dist/types/presets/recommended-flat.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ff76b50abd06b99746997ad4f51a9178>>
+ * @codegen <<SignedSource::7ed1a8eeaaea559980cb2c533ba9a2e6>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Linter } from 'eslint';

package/dist/types/presets/recommended.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::07d2533eef1accad3c7ace7be7a8ea24>>
+ * @codegen <<SignedSource::32a0942d7edc5a3fdc70dd0833bb8aca>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { ESLint } from 'eslint';

package/dist/types/rules/index.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::75f94fc6b6fa998eed54b610e41bb9b1>>
+ * @codegen <<SignedSource::c74b833590d4eb693616a3fcbf2e335a>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Rule } from 'eslint';

package/dist/types-ts4.5/presets/all-flat.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7fae089db9d7d7153fea58c673bd56af>>
+ * @codegen <<SignedSource::df988d512376c1317e5f7a350ad19fb9>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Linter } from 'eslint';

package/dist/types-ts4.5/presets/all.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::655d7f24171da0dff60003d0f235e48a>>
+ * @codegen <<SignedSource::2dee8518d733b0b364809d0f5641afda>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { ESLint } from 'eslint';

package/dist/types-ts4.5/presets/recommended-flat.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ff76b50abd06b99746997ad4f51a9178>>
+ * @codegen <<SignedSource::7ed1a8eeaaea559980cb2c533ba9a2e6>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Linter } from 'eslint';

package/dist/types-ts4.5/presets/recommended.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::07d2533eef1accad3c7ace7be7a8ea24>>
+ * @codegen <<SignedSource::32a0942d7edc5a3fdc70dd0833bb8aca>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { ESLint } from 'eslint';

package/dist/types-ts4.5/rules/index.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::75f94fc6b6fa998eed54b610e41bb9b1>>
+ * @codegen <<SignedSource::c74b833590d4eb693616a3fcbf2e335a>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Rule } from 'eslint';

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
 	"description": "The essential plugin for use with the Atlassian Design System.",
-	"version": "13.24.2",
+	"version": "13.26.0",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
 	"publishConfig": {
@@ -41,7 +41,7 @@
 		"@atlaskit/eslint-utils": "^2.0.0",
 		"@atlaskit/icon": "^29.0.0",
 		"@atlaskit/icon-lab": "^5.12.0",
-		"@atlaskit/tokens": "^8.0.0",
+		"@atlaskit/tokens": "^8.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@typescript-eslint/utils": "^7.1.0",
 		"ajv": "^6.12.6",
@@ -54,7 +54,7 @@
 	},
 	"devDependencies": {
 		"@af/formatting": "workspace:^",
-		"@atlaskit/ds-lib": "^5.2.0",
+		"@atlaskit/ds-lib": "^5.3.0",
 		"@atlaskit/theme": "^21.0.0",
 		"@atlassian/codegen": "^0.1.0",
 		"@atlassian/eslint-utils": "^0.5.0",