@astryxdesign/cli 0.6.3 → 0.6.4-canary.06c8fa3

package/assets/codemods/transforms/v0.0.14/rename-status-variants.mjs

@@ -4,86 +4,81 @@
  * @file Codemod: Rename status variants positive/negative → success/error
  * @see https://github.com/facebookexperimental/xds/issues/996
  *
- * Converges component APIs to match the token layer naming:
- * - `positive` → `success` (maps to --color-success)
- * - `negative` → `error` (maps to --color-error)
- * - `info` → `accent` (maps to --color-accent)
- *
- * Affected components:
- * - XDSStatusDot: variant="positive|negative|info" → variant="success|error|accent"
- * - XDSAvatarStatusDot: variant="positive|negative" → variant="success|error"
- * - XDSIcon: color="positive|negative" → color="success|error"
- * - XDSProgressBar: variant="positive|negative" → variant="success|error"
- *
- * Transforms JSX attributes, object properties (in files importing affected
- * components), TypeScript type annotations, and Storybook argType options.
+ * This transform is deliberately limited to static literals written directly
+ * in affected props on imported JSX components. It does not infer through
+ * variables, helpers, objects, types, or wrappers: missing an indirect
+ * migration is safer than rewriting an unrelated domain using the same words.
  */
 
+import {transformProp} from '../../transform-prop.mjs';
+
 export const meta = {
   title: 'Rename status variants positive/negative → success/error',
   description:
-    'Renames `positive` to `success`, `negative` to `error`, and `info` to `accent` ' +
-    'on StatusDot, AvatarStatusDot, Icon, SVGIcon, and ProgressBar to align with token naming. ' +
-    'The `info` -> `accent` rename is only applied to direct JSX attributes on these ' +
-    'components (where the component is known); in context-blind locations (object ' +
-    'properties, type unions) `info` is left untouched because it is a valid variant on ' +
-    'other components such as Badge.',
+    'Renames static status values written directly on imported StatusDot, ' +
+    'AvatarStatusDot, Icon, SVGIcon, ProgressBar, and Badge JSX elements. ' +
+    'Indirect values are left unchanged for manual migration.',
   pr: '#996',
 };
 
-/** Rename mappings. */
-const RENAMES = new Map([
+const CORE_IMPORT_RE = /^@(astryxdesign|xds)\/core(?:\/|$)/;
+
+const COMPONENT_PROPS = new Map([
+  ['StatusDot', new Set(['variant'])],
+  ['AvatarStatusDot', new Set(['variant'])],
+  ['Icon', new Set(['color'])],
+  ['SVGIcon', new Set(['color'])],
+  ['ProgressBar', new Set(['variant'])],
+  ['Badge', new Set(['variant'])],
+]);
+
+const STATUS_RENAMES = new Map([
   ['positive', 'success'],
   ['negative', 'error'],
   ['info', 'accent'],
 ]);
 
-/**
- * Ambiguous renames that are only safe when the target component is known.
- *
- * `info` is a VALID variant on non-target components (notably XDSBadge, whose
- * BadgeVariantMap still has `info`). `positive`/`negative` are not retained by
- * any component post-migration, so renaming them is always safe. Therefore the
- * context-blind heuristic paths (object properties, type unions, and suffixed
- * props on wrapper components) must NOT rewrite `info` — only the precise path,
- * a direct JSX attribute on a known target component, may. Otherwise a
- * `variant: 'info'` on an unrelated Badge config in a file that merely also
- * imports e.g. XDSIcon gets wrongly rewritten to the invalid `accent`.
- */
-const AMBIGUOUS_VALUES = new Set(['info']);
-
-
-/**
- * Components and which props are affected.
- * Key: component name. Value: set of prop names to check.
- */
-const COMPONENT_PROPS = new Map([
-  ['XDSStatusDot', new Set(['variant'])],
-  ['XDSAvatarStatusDot', new Set(['variant'])],
-  ['XDSIcon', new Set(['color'])],
-  ['XDSProgressBar', new Set(['variant'])],
+const BADGE_RENAMES = new Map([
+  ['positive', 'success'],
+  ['negative', 'error'],
 ]);
 
-/** All affected component names for quick lookup. */
-const TARGET_COMPONENTS = new Set(COMPONENT_PROPS.keys());
-
-/** All affected prop names (variant, color). */
-const TARGET_PROP_NAMES = new Set();
-for (const props of COMPONENT_PROPS.values()) {
-  for (const p of props) TARGET_PROP_NAMES.add(p);
+/** @param {string} name */
+function canonicalComponentName(name) {
+  return name.startsWith('XDS') ? name.slice(3) : name;
 }
 
 /**
- * Check if a key matches a target prop — exact or case-insensitive suffix.
- * e.g. "dotVariant" matches because it ends with "variant".
+ * @param {any} node
+ * @param {ReadonlyMap<string, string>} renames
+ * @returns {boolean}
  */
-function matchesPropName(/** @type {any} */ keyName) {
-  if (TARGET_PROP_NAMES.has(keyName)) return true;
-  const lower = keyName.toLowerCase();
-  for (const prop of TARGET_PROP_NAMES) {
-    if (lower.endsWith(prop.toLowerCase()) && lower !== prop.toLowerCase()) return true;
+function renameStaticValue(node, renames) {
+  if (!node) return false;
+  if (
+    node.type === 'TSAsExpression' ||
+    node.type === 'TSSatisfiesExpression' ||
+    node.type === 'TypeCastExpression' ||
+    node.type === 'ParenthesizedExpression'
+  ) {
+    return renameStaticValue(node.expression, renames);
   }
-  return false;
+  if (node.type === 'ConditionalExpression') {
+    const consequentChanged = renameStaticValue(node.consequent, renames);
+    const alternateChanged = renameStaticValue(node.alternate, renames);
+    return consequentChanged || alternateChanged;
+  }
+  if (
+    (node.type !== 'StringLiteral' && node.type !== 'Literal') ||
+    typeof node.value !== 'string'
+  ) {
+    return false;
+  }
+  const replacement = renames.get(node.value);
+  if (!replacement) return false;
+  node.value = replacement;
+  if (node.raw) node.raw = undefined;
+  return true;
 }
 
 /**
@@ -96,158 +91,25 @@ export default function transformer(file, api) {
   const root = j(file.source);
   let hasChanges = false;
 
-  /**
-   * Rename a string literal value if it matches our renames.
-   * Unwraps TSAsExpression (e.g. 'positive' as const) to reach the literal.
-   * @returns {boolean} whether a rename occurred
-   */
-  function renameValue(/** @type {any} */ node, {precise = false} = {}) {
-    if (!node) return false;
-
-    // Unwrap TSAsExpression (e.g. 'positive' as const → StringLiteral)
-    const target = node.type === 'TSAsExpression' ? node.expression : node;
-
-    const isString =
-      target.type === 'StringLiteral' || target.type === 'Literal';
-    if (!isString || typeof target.value !== 'string') return false;
-
-    const replacement = RENAMES.get(target.value);
-    if (!replacement) return false;
-
-    // Ambiguous values (e.g. `info`) are only renamed in a precise context
-    // where the target component is known (a direct JSX attribute on a target).
-    // In context-blind paths they may belong to a component that legitimately
-    // keeps the value (e.g. Badge's `info`), so leave them untouched.
-    if (!precise && AMBIGUOUS_VALUES.has(target.value)) return false;
-
-    target.value = replacement;
-    if (target.raw) target.raw = undefined;
-    return true;
-  }
-
-  /**
-   * Rename elements in an array (handles TSAsExpression wrapping).
-   */
-  function renameArrayElements(/** @type {any} */ node, {precise = false} = {}) {
-    let arrayNode = node;
-    if (arrayNode.type === 'TSAsExpression') arrayNode = arrayNode.expression;
-    if (arrayNode.type !== 'ArrayExpression') return;
-    arrayNode.elements.forEach((/** @type {any} */ el) => {
-      if (renameValue(el, {precise})) hasChanges = true;
-    });
-  }
-
-  // Determine early: does this file import any target component?
-  const importsTarget = [...TARGET_COMPONENTS].some(
-    (name) =>
-      root.find(j.ImportSpecifier, {imported: {name}}).length > 0,
+  transformProp(
+    root,
+    j,
+    {
+      matchesImport: source => CORE_IMPORT_RE.test(source),
+      components: COMPONENT_PROPS,
+      normalizeComponentName: canonicalComponentName,
+    },
+    (propPath, {component}) => {
+      const prop = propPath.node;
+      const value =
+        prop.value?.type === 'JSXExpressionContainer'
+          ? prop.value.expression
+          : prop.value;
+      const renames = component === 'Badge' ? BADGE_RENAMES : STATUS_RENAMES;
+      if (renameStaticValue(value, renames)) hasChanges = true;
+    },
   );
 
-  // 1. JSX attributes on target components
-  root.find(j.JSXOpeningElement).forEach((/** @type {any} */ path) => {
-    const name = path.node.name;
-    const componentName = name.type === 'JSXIdentifier' ? name.name : null;
-    if (!componentName) return;
-
-    const isDirectTarget = TARGET_COMPONENTS.has(componentName);
-    // For non-target components, only check suffixed props if file imports targets
-    if (!isDirectTarget && !importsTarget) return;
-
-    path.node.attributes.forEach((/** @type {any} */ attr) => {
-      if (attr.type !== 'JSXAttribute') return;
-      const attrName = attr.name.name;
-
-      if (isDirectTarget) {
-        // Direct targets: only their specific props
-        const targetProps = COMPONENT_PROPS.get(componentName);
-        if (!targetProps || !targetProps.has(attrName)) return;
-      } else {
-        // Non-target components: suffixed prop names only
-        // (e.g. dotVariant on ChangelogSection wrapping XDSStatusDot)
-        if (!matchesPropName(attrName) || TARGET_PROP_NAMES.has(attrName)) return;
-      }
-
-      // Only a direct JSX attribute on a target component is a precise context
-      // where the component (and thus the validity of `info`) is known. The
-      // wrapper/suffixed-prop case is a heuristic and must not touch ambiguous
-      // values.
-      const precise = isDirectTarget;
-      const value = attr.value;
-
-      // variant="positive" (string literal)
-      if (renameValue(value, {precise})) {
-        hasChanges = true;
-        return;
-      }
-
-      // variant={'positive'} (expression container)
-      if (
-        value &&
-        value.type === 'JSXExpressionContainer' &&
-        value.expression
-      ) {
-        if (renameValue(value.expression, {precise})) {
-          hasChanges = true;
-          return;
-        }
-
-        // variant={condition ? 'positive' : 'negative'} (ternary)
-        if (value.expression.type === 'ConditionalExpression') {
-          if (renameValue(value.expression.consequent, {precise}))
-            hasChanges = true;
-          if (renameValue(value.expression.alternate, {precise}))
-            hasChanges = true;
-        }
-      }
-    });
-  });
-
-  // 2. Object properties in files importing target components.
-  //    Handles args objects, config objects, Storybook argTypes, etc.
-  if (importsTarget) {
-    const PropertyType = j.ObjectProperty ?? j.Property;
-    root.find(PropertyType).forEach((/** @type {any} */ path) => {
-      const key = path.node.key;
-      const keyName =
-        key.type === 'Identifier'
-          ? key.name
-          : key.type === 'StringLiteral' || key.type === 'Literal'
-            ? key.value
-            : null;
-
-      if (!keyName || !matchesPropName(keyName)) return;
-
-      const value = path.node.value;
-
-      // variant: 'positive' → variant: 'success'
-      if (renameValue(value)) {
-        hasChanges = true;
-        return;
-      }
-
-      // variant: { options: ['positive', 'negative', ...] }
-      if (value.type === 'ObjectExpression') {
-        const optionsProp = value.properties.find(
-          (/** @type {any} */ p) => p.key && (p.key.name === 'options' || p.key.value === 'options'),
-        );
-        if (optionsProp) {
-          renameArrayElements(optionsProp.value);
-        }
-      }
-
-      // variant: ['positive', 'negative'] or [...] as Type[]
-      renameArrayElements(value);
-    });
-  }
-
-  // 3. TypeScript type references: 'positive' | 'negative' in union types
-  if (importsTarget) {
-    root.find(j.TSLiteralType).forEach((/** @type {any} */ path) => {
-      const lit = path.node.literal;
-      if (renameValue(lit)) hasChanges = true;
-    });
-  }
-
   if (!hasChanges) return undefined;
   return root.toSource({quote: 'single'});
 }

package/assets/codemods/transforms/v0.1.8/__tests__/rename-avatar-size-scale.test.mjs

@@ -1,161 +1,129 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-import {describe, it, expect} from 'vitest';
+import {describe, expect, it} from 'vitest';
+import transform from '../rename-avatar-size-scale.mjs';
 
 async function applyTransform(source) {
-  const {default: transform} = await import('../rename-avatar-size-scale.mjs');
   const jscodeshift = (await import('jscodeshift')).default;
   const j = jscodeshift.withParser('tsx');
   const api = {jscodeshift: j, stats: () => {}, report: () => {}};
-  const file = {source, path: 'test.tsx'};
-  const result = transform(file, api);
-  return result ?? source;
+  return transform({source, path: 'test.tsx'}, api) ?? source;
 }
 
 describe('rename-avatar-size-scale', () => {
-  it('renames every named size on an Avatar JSX size attribute', async () => {
-    const input = `import {Avatar} from '@astryxdesign/core';
+  it('renames every direct Avatar size literal', async () => {
+    const output =
+      await applyTransform(`import {Avatar} from '@astryxdesign/core';
 const a = <Avatar name="A" size="tiny" />;
 const b = <Avatar name="B" size="xsmall" />;
 const c = <Avatar name="C" size="small" />;
 const d = <Avatar name="D" size="medium" />;
-const e = <Avatar name="E" size="large" />;`;
-    const output = await applyTransform(input);
-    expect(output).toContain(`size='xsm'`);
-    expect(output).toContain(`size='sm'`);
-    expect(output).toContain(`size='md'`);
-    expect(output).toContain(`size='lg'`);
-    expect(output).toContain(`size='xl'`);
-    for (const old of ['tiny', 'xsmall', 'small', 'medium', 'large']) {
-      expect(output).not.toContain(`size="${old}"`);
+const e = <Avatar name="E" size="large" />;`);
+
+    for (const size of ['xsm', 'sm', 'md', 'lg', 'xl']) {
+      expect(output).toContain(`size='${size}'`);
     }
   });
 
-  it('renames size on AvatarGroup', async () => {
-    const input = `import {AvatarGroup} from '@astryxdesign/core';
-const x = <AvatarGroup size="medium">{kids}</AvatarGroup>;`;
-    const output = await applyTransform(input);
-    expect(output).toContain(`size='lg'`);
-  });
+  it('renames literals inside satisfies expressions while preserving the type', async () => {
+    const output =
+      await applyTransform(`import {Avatar} from '@astryxdesign/core';
+const view = <Avatar size={'small' satisfies AvatarSize} />;`);
 
-  it('leaves numeric sizes untouched', async () => {
-    const input = `import {Avatar} from '@astryxdesign/core';
-const x = <Avatar name="A" size={48} />;`;
-    const output = await applyTransform(input);
-    expect(output).toContain('size={48}');
+    expect(output).toContain("{'md' satisfies AvatarSize}");
   });
 
-  it('is alias-aware', async () => {
-    const input = `import {Avatar as Face} from '@astryxdesign/core';
-const x = <Face name="A" size="small" />;`;
-    const output = await applyTransform(input);
-    expect(output).toContain(`size='md'`);
-  });
+  it('renames AvatarGroup and conditional literals', async () => {
+    const output =
+      await applyTransform(`import {AvatarGroup} from '@astryxdesign/core';
+const view = <AvatarGroup size={large ? 'large' : 'small'}>{kids}</AvatarGroup>;`);
 
-  it('renames the subpath and legacy import sources', async () => {
-    const sub = `import {Avatar} from '@astryxdesign/core/Avatar';
-const x = <Avatar name="A" size="large" />;`;
-    expect(await applyTransform(sub)).toContain(`size='xl'`);
-    const legacy = `import {Avatar} from '@xds/core';
-const x = <Avatar name="A" size="tiny" />;`;
-    expect(await applyTransform(legacy)).toContain(`size='xsm'`);
+    expect(output).toContain("large ? 'xl' : 'md'");
   });
 
-  it('renames a size inside a ternary on an Avatar element', async () => {
-    const input = `import {Avatar} from '@astryxdesign/core';
-const x = <Avatar name="A" size={big ? 'large' : 'small'} />;`;
-    const output = await applyTransform(input);
-    expect(output).toContain(`big ? 'xl' : 'md'`);
-  });
+  it('maps import aliases and default subpath imports', async () => {
+    const output =
+      await applyTransform(`import {Avatar as Face} from '@xds/core';
+import Faces from '@astryxdesign/core/AvatarGroup';
+const view = <><Face size="medium" /><Faces size="large" /></>;`);
 
-  it('renames the UNIQUE names tiny/xsmall in Storybook options and size args', async () => {
-    const input = `import {Avatar} from '@astryxdesign/core';
-const meta = {
-  argTypes: {size: {control: 'select', options: ['tiny', 'xsmall']}},
-  args: {size: 'tiny'},
-};`;
-    const output = await applyTransform(input);
-    expect(output).toContain(`['xsm', 'sm']`);
-    expect(output).toContain(`size: 'xsm'`);
+    expect(output).toContain("<Face size='lg'");
+    expect(output).toContain("<Faces size='xl'");
   });
 
-  it('renames a FULL Storybook options array (unique name unlocks ambiguous members)', async () => {
-    // The presence of a unique name (tiny/xsmall) proves the whole array is the
-    // Avatar size enum, so small/medium/large in it are safe to rename too.
-    const input = `import {Avatar} from '@astryxdesign/core';
-const meta = {
-  argTypes: {size: {control: 'select', options: ['tiny', 'xsmall', 'small', 'medium', 'large']}},
-};`;
-    const output = await applyTransform(input);
-    expect(output).toContain(`['xsm', 'sm', 'md', 'lg', 'xl']`);
-  });
+  it('ignores declaration-level type imports paired with a local Avatar', async () => {
+    const input = `import type {Avatar} from '@astryxdesign/core';
+const Avatar = props => <div {...props} />;
+const view = <Avatar size="small" />;`;
 
-  it('renames a standalone Avatar-size array literal used with .map()', async () => {
-    const input = `import {AvatarGroup} from '@astryxdesign/core';
-const sizes = (['tiny', 'xsmall', 'small', 'medium', 'large'] as const).map(s => s);`;
-    const output = await applyTransform(input);
-    expect(output).toContain(`['xsm', 'sm', 'md', 'lg', 'xl']`);
+    expect(await applyTransform(input)).toBe(input);
   });
 
-  it('does NOT rename an array of ambiguous words with no unique Avatar name', async () => {
-    // Without tiny/xsmall, the array could be anything (priorities, densities),
-    // so ambiguous members are left untouched.
-    const input = `import {Avatar} from '@astryxdesign/core';
-const densities = ['small', 'medium', 'large'] as const;`;
-    const output = await applyTransform(input);
-    expect(output).toContain(`['small', 'medium', 'large']`);
-  });
+  it('ignores mixed type specifiers while migrating runtime imports', async () => {
+    const output =
+      await applyTransform(`import {type Avatar, AvatarGroup} from '@astryxdesign/core';
+const Avatar = props => <div {...props} />;
+const view = <><Avatar size="small" /><AvatarGroup size="large" /></>;`);
 
-  it('renames a UNIQUE name in a size-typed union literal', async () => {
-    const input = `import {Avatar} from '@astryxdesign/core';
-type Props = {size: 'tiny' | 'xsmall'};`;
-    const output = await applyTransform(input);
-    expect(output).toContain(`'xsm' | 'sm'`);
+    expect(output).toContain('<Avatar size="small"');
+    expect(output).toContain("<AvatarGroup size='xl'");
   });
 
-  // --- Precision guards: ambiguous common words must NOT be corrupted in
-  // --- context-blind positions, even in files that import Avatar. ---
+  it('maps namespace imports', async () => {
+    const output =
+      await applyTransform(`import * as Core from '@astryxdesign/core';
+const view = <Core.Avatar size="small" />;`);
 
-  it('does NOT rename ambiguous names in an unrelated union type', async () => {
-    const input = `import {Avatar} from '@astryxdesign/core';
-type TaskPriority = 'urgent' | 'high' | 'medium' | 'low' | 'none';`;
-    const output = await applyTransform(input);
-    expect(output).toContain(`'medium'`);
-    expect(output).not.toContain(`'lg'`);
+    expect(output).toContain("size='md'");
   });
 
-  it('does NOT rename an ambiguous name in a non-size object property', async () => {
+  it('leaves numeric and dynamic sizes untouched', async () => {
     const input = `import {Avatar} from '@astryxdesign/core';
-const cfg = {priority: 'medium', density: 'large'};`;
-    const output = await applyTransform(input);
-    expect(output).toContain(`priority: 'medium'`);
-    expect(output).toContain(`density: 'large'`);
+const named = 'small';
+const a = <Avatar size={48} />;
+const b = <Avatar size={named} />;`;
+    expect(await applyTransform(input)).toBe(input);
   });
 
-  it('does NOT rename an ambiguous name in a size-keyed object property (component unknown)', async () => {
-    // A `size: 'small'` object entry could belong to any component; renaming it
-    // blind would be unsafe, so it is left for manual migration.
+  it('leaves objects, types, arrays, and Storybook metadata untouched', async () => {
     const input = `import {Avatar} from '@astryxdesign/core';
-const args = {size: 'small'};`;
-    const output = await applyTransform(input);
-    expect(output).toContain(`size: 'small'`);
+type Density = 'tiny' | 'xsmall' | 'small' | 'medium' | 'large';
+const card = {size: 'small'};
+const sizes = ['tiny', 'xsmall', 'small', 'medium', 'large'];
+const meta = {argTypes: {size: {options: sizes}}};
+const view = <Avatar size={card.size} />;`;
+
+    expect(await applyTransform(input)).toBe(input);
   });
 
-  it('does not touch files that never import Avatar/AvatarGroup', async () => {
+  it('does not touch files without an Avatar import', async () => {
     const input = `import {Badge} from '@astryxdesign/core';
-const x = <Badge size="small" />;
-type P = 'tiny' | 'xsmall';`;
-    const output = await applyTransform(input);
-    expect(output).toContain(`size="small"`);
-    expect(output).toContain(`'tiny' | 'xsmall'`);
+const view = <Badge size="small" />;`;
+    expect(await applyTransform(input)).toBe(input);
   });
 
-  it('does not rename an unrelated non-size string in an Avatar file', async () => {
-    const input = `import {Avatar} from '@astryxdesign/core';
-const label = 'small';
-const x = <Avatar name="A" size="small" />;`;
-    const output = await applyTransform(input);
-    expect(output).toContain(`const label = 'small'`);
-    expect(output).toContain(`size='md'`);
+  it('ignores same-named components imported from other packages', async () => {
+    const input = `import {Avatar} from '@other/core';
+const view = <Avatar size="small" />;`;
+    expect(await applyTransform(input)).toBe(input);
+  });
+
+  it('ignores a local component that shadows an imported alias', async () => {
+    const output =
+      await applyTransform(`import {Avatar as Face} from '@xds/core';
+const migrated = <Face size="medium" />;
+function Local(Face) { return <Face size="large" />; }`);
+
+    expect(output).toContain("size='lg'");
+    expect(output).toContain('size="large"');
+  });
+
+  it('leaves unrelated props on Avatar untouched', async () => {
+    const output =
+      await applyTransform(`import {Avatar} from '@astryxdesign/core';
+const view = <Avatar size="small" label="small" />;`);
+
+    expect(output).toContain("size='md'");
+    expect(output).toContain('label="small"');
   });
 });