@atlaskit/eslint-plugin-design-system 13.25.0 → 13.27.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/no-to-match-snapshot/index.js

@@ -0,0 +1,43 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+export var name = 'no-to-match-snapshot';
+var rule = createLintRule({
+  meta: {
+    name: name,
+    type: 'problem',
+    docs: {
+      description: 'Disallow using toMatchSnapshot() in favor of toMatchInlineSnapshot(). See https://hello.atlassian.net/wiki/spaces/DST/pages/6105892000/DSTRFC-038+-+Removal+of+.toMatchSnapshot for rationale.',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      useInlineSnapshot: 'Use toMatchInlineSnapshot() instead of toMatchSnapshot(). See https://hello.atlassian.net/wiki/spaces/DST/pages/6105892000/DSTRFC-038+-+Removal+of+.toMatchSnapshot for rationale.'
+    }
+  },
+  create: function create(context) {
+    return {
+      MemberExpression: function MemberExpression(node) {
+        // Check if this is a call to toMatchSnapshot
+        if (!isNodeOfType(node.property, 'Identifier') || node.property.name !== 'toMatchSnapshot') {
+          return;
+        }
+
+        // Check if the object is an expect() call
+        if (!isNodeOfType(node.object, 'CallExpression') || !isNodeOfType(node.object.callee, 'Identifier') || node.object.callee.name !== 'expect') {
+          return;
+        }
+
+        // Only report if this is being called (i.e., it's part of a CallExpression)
+        // We want to catch expect(...).toMatchSnapshot() but not just the property access
+        if (!node.parent || !isNodeOfType(node.parent, 'CallExpression')) {
+          return;
+        }
+        context.report({
+          node: node.property,
+          messageId: 'useInlineSnapshot'
+        });
+      }
+    };
+  }
+});
+export default rule;

package/dist/esm/rules/no-unsafe-inline-snapshot/index.js

@@ -0,0 +1,133 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { getSourceCode } from '@atlaskit/eslint-utils/context-compat';
+import { createLintRule } from '../utils/create-rule';
+export var name = 'no-unsafe-inline-snapshot';
+var MAX_LINES = 100;
+
+/**
+ * Checks if a snapshot contains internal implementation details
+ */
+function containsInternalDetails(snapshotContent) {
+  var issues = [];
+
+  // Check for className attributes (unless they equal "REDACTED")
+  // Handles: className="value", className='value', and whitespace variations
+  var classNameRegex = /className\s*=\s*(["'])((?:(?!\1)[^\\]|\\.)*)\1/gi;
+  var match;
+  while ((match = classNameRegex.exec(snapshotContent)) !== null) {
+    var classNameValue = match[2];
+    if (classNameValue && classNameValue !== 'REDACTED') {
+      issues.push("className=\"".concat(classNameValue, "\""));
+    }
+  }
+
+  // Check for style attributes (unless they equal "REDACTED")
+  // Handles: style="value", style='value', and whitespace variations
+  // Style values can contain colons, semicolons, etc., so we need to capture the full quoted value
+  var styleRegex = /style\s*=\s*(["'])((?:(?!\1)[^\\]|\\.)*)\1/gi;
+  while ((match = styleRegex.exec(snapshotContent)) !== null) {
+    var styleValue = match[2];
+    if (styleValue && styleValue !== 'REDACTED') {
+      issues.push("style=\"".concat(styleValue, "\""));
+    }
+  }
+
+  // Check for style blocks (unless they contain "REDACTED")
+  var styleBlockRegex = /<style[^>]*>([\s\S]*?)<\/style>/gi;
+  while ((match = styleBlockRegex.exec(snapshotContent)) !== null) {
+    var styleContent = match[1];
+    if (styleContent && !styleContent.trim().includes('REDACTED')) {
+      issues.push('style block');
+    }
+  }
+  return {
+    hasIssues: issues.length > 0,
+    issues: issues
+  };
+}
+
+/**
+ * Extracts the snapshot content from a template literal or string literal
+ */
+function extractSnapshotContent(node, sourceCode) {
+  if (isNodeOfType(node, 'TemplateLiteral')) {
+    // For template literals, get the raw text including the template parts
+    return sourceCode.getText(node);
+  }
+  if (isNodeOfType(node, 'Literal') && typeof node.value === 'string') {
+    return node.value;
+  }
+  return null;
+}
+var rule = createLintRule({
+  meta: {
+    name: name,
+    type: 'problem',
+    docs: {
+      description: 'Enforce guardrails on toMatchInlineSnapshot usage: snapshots must not exceed 100 lines and must not contain internal implementation details like className or style attributes.',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      exceedsMaxLines: "Inline snapshot exceeds ".concat(MAX_LINES, " lines. Consider breaking it into smaller snapshots or using a different testing approach."),
+      containsInternalDetails: 'Inline snapshot contains internal implementation details: {{details}}. Use "REDACTED" for className and style values, or remove these details from the snapshot.'
+    }
+  },
+  create: function create(context) {
+    var sourceCode = getSourceCode(context);
+    return {
+      MemberExpression: function MemberExpression(node) {
+        // Check if this is a call to toMatchInlineSnapshot
+        if (!isNodeOfType(node.property, 'Identifier') || node.property.name !== 'toMatchInlineSnapshot') {
+          return;
+        }
+
+        // Check if the object is an expect() call
+        if (!isNodeOfType(node.object, 'CallExpression') || !isNodeOfType(node.object.callee, 'Identifier') || node.object.callee.name !== 'expect') {
+          return;
+        }
+
+        // Only report if this is being called (i.e., it's part of a CallExpression)
+        if (!node.parent || !isNodeOfType(node.parent, 'CallExpression')) {
+          return;
+        }
+
+        // Get the snapshot content from the first argument
+        var callExpression = node.parent;
+        if (callExpression.arguments.length === 0) {
+          return;
+        }
+        var snapshotArg = callExpression.arguments[0];
+        var snapshotContent = extractSnapshotContent(snapshotArg, sourceCode);
+        if (!snapshotContent) {
+          return;
+        }
+
+        // Check line count
+        var lines = snapshotContent.split('\n');
+        if (lines.length > MAX_LINES) {
+          context.report({
+            node: snapshotArg,
+            messageId: 'exceedsMaxLines'
+          });
+          return;
+        }
+
+        // Check for internal implementation details
+        var _containsInternalDeta = containsInternalDetails(snapshotContent),
+          hasIssues = _containsInternalDeta.hasIssues,
+          issues = _containsInternalDeta.issues;
+        if (hasIssues) {
+          context.report({
+            node: snapshotArg,
+            messageId: 'containsInternalDetails',
+            data: {
+              details: issues.slice(0, 3).join(', ') // Show first 3 issues
+            }
+          });
+        }
+      }
+    };
+  }
+});
+export default rule;

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::d7a0407a6c6b10bfbba790523d06f97d>>
  * @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::e632a96e9bae920c23e25114f40e3c0d>>
  * @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::62347cf64e4ac99b927fce9d1a2bd894>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Rule } from 'eslint';

package/dist/types/rules/no-to-match-snapshot/index.d.ts

@@ -0,0 +1,4 @@
+import type { Rule } from 'eslint';
+export declare const name = "no-to-match-snapshot";
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types/rules/no-unsafe-inline-snapshot/index.d.ts

@@ -0,0 +1,4 @@
+import type { Rule } from 'eslint';
+export declare const name = "no-unsafe-inline-snapshot";
+declare const rule: Rule.RuleModule;
+export default rule;

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::d7a0407a6c6b10bfbba790523d06f97d>>
  * @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::e632a96e9bae920c23e25114f40e3c0d>>
  * @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::62347cf64e4ac99b927fce9d1a2bd894>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Rule } from 'eslint';

package/dist/types-ts4.5/rules/no-to-match-snapshot/index.d.ts

@@ -0,0 +1,4 @@
+import type { Rule } from 'eslint';
+export declare const name = "no-to-match-snapshot";
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types-ts4.5/rules/no-unsafe-inline-snapshot/index.d.ts

@@ -0,0 +1,4 @@
+import type { Rule } from 'eslint';
+export declare const name = "no-unsafe-inline-snapshot";
+declare const rule: Rule.RuleModule;
+export default rule;

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.25.0",
+	"version": "13.27.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.1.0",
+		"@atlaskit/tokens": "^8.4.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",