@atlaskit/eslint-plugin-design-system 13.25.0 → 13.27.0

package/dist/es2019/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';
 const 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(context) {
@@ -22,6 +24,11 @@ const rule = createLintRule({
      */
     const lozengeImports = {}; // local name -> import source
 
+    /**
+     * Contains a map of imported Badge components.
+     */
+    const badgeImports = {}; // local name -> import source
+
     /**
      * Check if a JSX attribute value is a literal false
      */
@@ -30,14 +37,25 @@ const 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;
       }
-      const 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') {
+        const expr = node.expression;
+        return expr && expr.type !== 'Literal';
+      }
+      return false;
     }
 
     /**
@@ -70,6 +88,21 @@ const rule = createLintRule({
       return mapping[oldValue] || oldValue;
     }
 
+    /**
+     * Map Badge old appearance values to new semantic appearance values
+     */
+    function mapBadgeToNewAppearanceValue(oldValue) {
+      const 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 @@ const 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 fixer => {
+        if (!attrValue) {
+          return null;
+        }
+        if (attrValue.type === 'Literal') {
+          return fixer.replaceText(attrValue, `"${newValue}"`);
+        }
+        if (attrValue.type === 'JSXExpressionContainer' && 'expression' in attrValue && attrValue.expression && attrValue.expression.type === 'Literal') {
+          return fixer.replaceText(attrValue.expression, `"${newValue}"`);
+        }
+        return null;
+      };
+    }
+
     /**
      * Generate the replacement JSX element text
      */
@@ -147,6 +199,18 @@ const rule = createLintRule({
               }
             });
           }
+          // Track Badge imports
+          if (moduleSource === '@atlaskit/badge' || moduleSource.startsWith('@atlaskit/badge')) {
+            node.specifiers.forEach(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(node) {
@@ -158,6 +222,43 @@ const rule = createLintRule({
         }
         const elementName = node.openingElement.name.name;
 
+        // Handle Badge components
+        if (badgeImports[elementName]) {
+          // Find the appearance prop
+          const appearanceProp = node.openingElement.attributes.find(attr => 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
+          const stringValue = extractStringValue(appearanceProp.value);
+          if (stringValue && typeof stringValue === 'string') {
+            const 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;
@@ -178,14 +279,7 @@ const rule = createLintRule({
                 context.report({
                   node: appearanceProp,
                   messageId: 'updateAppearance',
-                  fix: fixer => {
-                    if (appearanceProp.value.type === 'Literal') {
-                      return fixer.replaceText(appearanceProp.value, `"${mappedValue}"`);
-                    } else if (appearanceProp.value.type === 'JSXExpressionContainer' && appearanceProp.value.expression && appearanceProp.value.expression.type === 'Literal') {
-                      return fixer.replaceText(appearanceProp.value.expression, `"${mappedValue}"`);
-                    }
-                    return null;
-                  }
+                  fix: createAppearanceFixer(appearanceProp.value, mappedValue)
                 });
               }
             }

package/dist/es2019/rules/no-to-match-snapshot/index.js

@@ -0,0 +1,43 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+export const name = 'no-to-match-snapshot';
+const rule = createLintRule({
+  meta: {
+    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(context) {
+    return {
+      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/es2019/rules/no-unsafe-inline-snapshot/index.js

@@ -0,0 +1,134 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { getSourceCode } from '@atlaskit/eslint-utils/context-compat';
+import { createLintRule } from '../utils/create-rule';
+export const name = 'no-unsafe-inline-snapshot';
+const MAX_LINES = 100;
+
+/**
+ * Checks if a snapshot contains internal implementation details
+ */
+function containsInternalDetails(snapshotContent) {
+  const issues = [];
+
+  // Check for className attributes (unless they equal "REDACTED")
+  // Handles: className="value", className='value', and whitespace variations
+  const classNameRegex = /className\s*=\s*(["'])((?:(?!\1)[^\\]|\\.)*)\1/gi;
+  let match;
+  while ((match = classNameRegex.exec(snapshotContent)) !== null) {
+    const classNameValue = match[2];
+    if (classNameValue && classNameValue !== 'REDACTED') {
+      issues.push(`className="${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
+  const styleRegex = /style\s*=\s*(["'])((?:(?!\1)[^\\]|\\.)*)\1/gi;
+  while ((match = styleRegex.exec(snapshotContent)) !== null) {
+    const styleValue = match[2];
+    if (styleValue && styleValue !== 'REDACTED') {
+      issues.push(`style="${styleValue}"`);
+    }
+  }
+
+  // Check for style blocks (unless they contain "REDACTED")
+  const styleBlockRegex = /<style[^>]*>([\s\S]*?)<\/style>/gi;
+  while ((match = styleBlockRegex.exec(snapshotContent)) !== null) {
+    const styleContent = match[1];
+    if (styleContent && !styleContent.trim().includes('REDACTED')) {
+      issues.push('style block');
+    }
+  }
+  return {
+    hasIssues: issues.length > 0,
+    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;
+}
+const rule = createLintRule({
+  meta: {
+    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 ${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(context) {
+    const sourceCode = getSourceCode(context);
+    return {
+      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
+        const callExpression = node.parent;
+        if (callExpression.arguments.length === 0) {
+          return;
+        }
+        const snapshotArg = callExpression.arguments[0];
+        const snapshotContent = extractSnapshotContent(snapshotArg, sourceCode);
+        if (!snapshotContent) {
+          return;
+        }
+
+        // Check line count
+        const lines = snapshotContent.split('\n');
+        if (lines.length > MAX_LINES) {
+          context.report({
+            node: snapshotArg,
+            messageId: 'exceedsMaxLines'
+          });
+          return;
+        }
+
+        // Check for internal implementation details
+        const {
+          hasIssues,
+          issues
+        } = containsInternalDetails(snapshotContent);
+        if (hasIssues) {
+          context.report({
+            node: snapshotArg,
+            messageId: 'containsInternalDetails',
+            data: {
+              details: issues.slice(0, 3).join(', ') // Show first 3 issues
+            }
+          });
+        }
+      }
+    };
+  }
+});
+export default rule;

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::7fae089db9d7d7153fea58c673bd56af>>
+ * @codegen <<SignedSource::d7a0407a6c6b10bfbba790523d06f97d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -15,7 +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/lozenge-isBold-and-lozenge-badge-appearance-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',
@@ -47,7 +47,9 @@ var rules = {
     '@atlaskit/design-system/no-physical-properties': 'error',
     '@atlaskit/design-system/no-separator-with-list-elements': 'warn',
     '@atlaskit/design-system/no-styled-tagged-template-expression': 'error',
+    '@atlaskit/design-system/no-to-match-snapshot': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
+    '@atlaskit/design-system/no-unsafe-inline-snapshot': 'error',
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/no-unused-css-map': 'warn',

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::655d7f24171da0dff60003d0f235e48a>>
+ * @codegen <<SignedSource::e632a96e9bae920c23e25114f40e3c0d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -14,7 +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/lozenge-isBold-and-lozenge-badge-appearance-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',
@@ -46,7 +46,9 @@ var rules = {
     '@atlaskit/design-system/no-physical-properties': 'error',
     '@atlaskit/design-system/no-separator-with-list-elements': 'warn',
     '@atlaskit/design-system/no-styled-tagged-template-expression': 'error',
+    '@atlaskit/design-system/no-to-match-snapshot': 'error',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
+    '@atlaskit/design-system/no-unsafe-inline-snapshot': 'error',
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/no-unused-css-map': 'warn',

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::ff76b50abd06b99746997ad4f51a9178>>
+ * @codegen <<SignedSource::7ed1a8eeaaea559980cb2c533ba9a2e6>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -11,7 +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/lozenge-isBold-and-lozenge-badge-appearance-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::07d2533eef1accad3c7ace7be7a8ea24>>
+ * @codegen <<SignedSource::32a0942d7edc5a3fdc70dd0833bb8aca>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -10,7 +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/lozenge-isBold-and-lozenge-badge-appearance-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::75f94fc6b6fa998eed54b610e41bb9b1>>
+ * @codegen <<SignedSource::62347cf64e4ac99b927fce9d1a2bd894>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -11,7 +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 lozengeIsBoldAndLozengeBadgeAppearanceMigration from './lozenge-isBold-and-lozenge-badge-appearance-migration';
 import noBannedImports from './no-banned-imports';
 import noBooleanAutofocusOnModalDialog from './no-boolean-autofocus-on-modal-dialog';
 import noCssTaggedTemplateExpression from './no-css-tagged-template-expression';
@@ -44,7 +44,9 @@ import noNestedStyles from './no-nested-styles';
 import noPhysicalProperties from './no-physical-properties';
 import noSeparatorWithListElements from './no-separator-with-list-elements';
 import noStyledTaggedTemplateExpression from './no-styled-tagged-template-expression';
+import noToMatchSnapshot from './no-to-match-snapshot';
 import noUnsafeDesignTokenUsage from './no-unsafe-design-token-usage';
+import noUnsafeInlineSnapshot from './no-unsafe-inline-snapshot';
 import noUnsafeStyleOverrides from './no-unsafe-style-overrides';
 import noUnsupportedDragAndDropLibraries from './no-unsupported-drag-and-drop-libraries';
 import noUnusedCssMap from './no-unused-css-map';
@@ -81,7 +83,7 @@ export var rules = {
   'ensure-icon-color': ensureIconColor,
   'ensure-proper-xcss-usage': ensureProperXcssUsage,
   'icon-label': iconLabel,
-  'lozenge-appearance-and-isbold-migration': lozengeAppearanceAndIsboldMigration,
+  'lozenge-isBold-and-lozenge-badge-appearance-migration': lozengeIsBoldAndLozengeBadgeAppearanceMigration,
   'no-banned-imports': noBannedImports,
   'no-boolean-autofocus-on-modal-dialog': noBooleanAutofocusOnModalDialog,
   'no-css-tagged-template-expression': noCssTaggedTemplateExpression,
@@ -114,7 +116,9 @@ export var rules = {
   'no-physical-properties': noPhysicalProperties,
   'no-separator-with-list-elements': noSeparatorWithListElements,
   'no-styled-tagged-template-expression': noStyledTaggedTemplateExpression,
+  'no-to-match-snapshot': noToMatchSnapshot,
   'no-unsafe-design-token-usage': noUnsafeDesignTokenUsage,
+  'no-unsafe-inline-snapshot': noUnsafeInlineSnapshot,
   'no-unsafe-style-overrides': noUnsafeStyleOverrides,
   'no-unsupported-drag-and-drop-libraries': noUnsupportedDragAndDropLibraries,
   'no-unused-css-map': noUnusedCssMap,