@astryxdesign/cli 0.6.3 → 0.6.4-canary.078fd25

package/assets/codemods/transform-prop.mjs

@@ -0,0 +1,109 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * Find imported components, resolve their local JSX names (including aliases),
+ * and yield matching JSX prop paths to a visitor.
+ *
+ * This helper intentionally stops at the JSX boundary. It does not follow
+ * variables, helper calls, object spreads, wrapper components, or types.
+ *
+ * @param {any} root jscodeshift collection for one source file
+ * @param {any} j configured jscodeshift instance
+ * @param {{
+ *   matchesImport: (source: string) => boolean,
+ *   components: ReadonlyMap<string, ReadonlySet<string>>,
+ *   normalizeComponentName?: (name: string) => string,
+ * }} options
+ * @param {(propPath: any, context: {component: string, localName: string}) => void} visit
+ */
+export function transformProp(root, j, options, visit) {
+  const normalize = options.normalizeComponentName ?? (name => name);
+  /** @type {Map<string, {component: string, props: ReadonlySet<string>}>} */
+  const directBindings = new Map();
+  /** @type {Set<string>} */
+  const namespaceBindings = new Set();
+
+  root.find(j.ImportDeclaration).forEach((/** @type {any} */ importPath) => {
+    const source = importPath.node.source.value;
+    if (
+      importPath.node.importKind === 'type' ||
+      typeof source !== 'string' ||
+      !options.matchesImport(source)
+    ) {
+      return;
+    }
+
+    const subpathName = normalize(source.split('/').at(-1) ?? '');
+    const subpathProps = options.components.get(subpathName);
+
+    for (const specifier of importPath.node.specifiers ?? []) {
+      if (specifier.importKind === 'type') continue;
+
+      if (specifier.type === 'ImportSpecifier') {
+        const importedName =
+          specifier.imported?.name ?? specifier.imported?.value;
+        if (typeof importedName !== 'string') continue;
+        const component = normalize(importedName);
+        const props = options.components.get(component);
+        if (!props) continue;
+        directBindings.set(specifier.local?.name ?? importedName, {
+          component,
+          props,
+        });
+      } else if (specifier.type === 'ImportDefaultSpecifier' && subpathProps) {
+        directBindings.set(specifier.local.name, {
+          component: subpathName,
+          props: subpathProps,
+        });
+      } else if (specifier.type === 'ImportNamespaceSpecifier') {
+        namespaceBindings.add(specifier.local.name);
+      }
+    }
+  });
+
+  if (directBindings.size === 0 && namespaceBindings.size === 0) return;
+
+  root.find(j.JSXOpeningElement).forEach((/** @type {any} */ jsxPath) => {
+    const name = jsxPath.node.name;
+    let localName;
+    let component;
+    let props;
+
+    if (name.type === 'JSXIdentifier') {
+      localName = name.name;
+      const binding = directBindings.get(localName);
+      if (!binding) return;
+      ({component, props} = binding);
+    } else if (
+      name.type === 'JSXMemberExpression' &&
+      name.object?.type === 'JSXIdentifier' &&
+      name.property?.type === 'JSXIdentifier' &&
+      namespaceBindings.has(name.object.name)
+    ) {
+      localName = name.object.name;
+      component = normalize(name.property.name);
+      props = options.components.get(component);
+      if (!props) return;
+    } else {
+      return;
+    }
+
+    // A parameter or local declaration with the imported name shadows the
+    // module binding. Only JSX tags whose root binding resolves to Program are
+    // considered usages of the import discovered above.
+    const bindingScope = jsxPath.scope.lookup(localName);
+    if (!bindingScope || bindingScope.path.node.type !== 'Program') return;
+
+    for (let index = 0; index < jsxPath.node.attributes.length; index++) {
+      const attribute = jsxPath.node.attributes[index];
+      if (
+        attribute.type !== 'JSXAttribute' ||
+        attribute.name?.type !== 'JSXIdentifier' ||
+        !props.has(attribute.name.name)
+      ) {
+        continue;
+      }
+      visit(jsxPath.get('attributes', index), {component, localName});
+    }
+  });
+}

package/assets/codemods/transform-prop.test.mjs

@@ -0,0 +1,95 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, expect, it} from 'vitest';
+import jscodeshift from 'jscodeshift';
+import {transformProp} from './transform-prop.mjs';
+
+const j = jscodeshift.withParser('tsx');
+const components = new Map([
+  ['Widget', new Set(['tone'])],
+  ['Group', new Set(['size'])],
+]);
+
+function apply(source) {
+  const root = j(source);
+  transformProp(
+    root,
+    j,
+    {
+      matchesImport: value => /^@example\/core(?:\/|$)/.test(value),
+      components,
+      normalizeComponentName: name =>
+        name.startsWith('XDS') ? name.slice(3) : name,
+    },
+    propPath => {
+      propPath.node.name.name = `migrated${propPath.node.name.name}`;
+    },
+  );
+  return root.toSource({quote: 'single'});
+}
+
+describe('transformProp', () => {
+  it('maps named import aliases to their JSX usages', () => {
+    const output = apply(`import {Widget as Card} from '@example/core';
+const view = <Card tone="old" other="old" />;`);
+
+    expect(output).toContain('<Card migratedtone="old" other="old"');
+  });
+
+  it('maps default subpath imports', () => {
+    const output = apply(`import Card from '@example/core/Widget';
+const view = <Card tone="old" />;`);
+
+    expect(output).toContain('<Card migratedtone="old"');
+  });
+
+  it('ignores declaration-level type imports', () => {
+    const output = apply(`import type {Widget} from '@example/core';
+const Widget = props => <div {...props} />;
+const view = <Widget tone="old" />;`);
+
+    expect(output).toContain('<Widget tone="old"');
+    expect(output).not.toContain('migratedtone');
+  });
+
+  it('ignores type specifiers in mixed imports', () => {
+    const output = apply(`import {type Widget, Group} from '@example/core';
+const Widget = props => <div {...props} />;
+const view = <><Widget tone="old" /><Group size="old" /></>;`);
+
+    expect(output).toContain('<Widget tone="old"');
+    expect(output).toContain('<Group migratedsize="old"');
+    expect(output).not.toContain('<Widget migratedtone');
+  });
+
+  it('maps namespace imports', () => {
+    const output = apply(`import * as Core from '@example/core';
+const view = <Core.Group size="old" />;`);
+
+    expect(output).toContain('<Core.Group migratedsize="old"');
+  });
+
+  it('ignores same-named imports from other packages', () => {
+    const source = `import {Widget} from '@other/core';
+const view = <Widget tone="old" />;`;
+    expect(apply(source)).toBe(source);
+  });
+
+  it('ignores a local binding that shadows an imported alias', () => {
+    const output = apply(`import {Widget as Card} from '@example/core';
+const migrated = <Card tone="old" />;
+function Local(Card) { return <Card tone="local" />; }`);
+
+    expect(output).toContain('<Card migratedtone="old"');
+    expect(output).toContain('<Card tone="local"');
+  });
+
+  it('yields only configured props on configured components', () => {
+    const output = apply(`import {Widget, Group} from '@example/core';
+const a = <Widget size="old" tone="old" />;
+const b = <Group tone="old" size="old" />;`);
+
+    expect(output).toContain('<Widget size="old" migratedtone="old"');
+    expect(output).toContain('<Group tone="old" migratedsize="old"');
+  });
+});

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

@@ -1,205 +1,126 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-import {describe, it, expect} from 'vitest';
+import {describe, expect, it} from 'vitest';
+import transform from '../rename-status-variants.mjs';
 
 async function applyTransform(source) {
-  const {default: transform} = await import(
-    '../rename-status-variants.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-status-variants', () => {
-  it('renames StatusDot variant="positive" to "success"', async () => {
-    const input = `<XDSStatusDot variant="positive" label="Online" />`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'success'");
-    expect(output).not.toContain("'positive'");
-  });
+  it('renames direct StatusDot literals and ternary branches', async () => {
+    const output = await applyTransform(`import {StatusDot} from '@astryxdesign/core';
+const a = <StatusDot variant="positive" />;
+const b = <StatusDot variant={'negative'} />;
+const c = <StatusDot variant={ready ? 'info' : 'positive'} />;`);
 
-  it('renames StatusDot variant="negative" to "error"', async () => {
-    const input = `<XDSStatusDot variant="negative" label="Offline" />`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'error'");
-    expect(output).not.toContain("'negative'");
+    expect(output).toContain("variant='success'");
+    expect(output).toContain("variant={'error'}");
+    expect(output).toContain("ready ? 'accent' : 'success'");
   });
 
-  it('renames StatusDot variant="info" to "accent"', async () => {
-    const input = `<XDSStatusDot variant="info" label="Info" />`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'accent'");
-    expect(output).not.toContain("'info'");
-  });
+  it('renames literals inside satisfies expressions while preserving the type', async () => {
+    const output =
+      await applyTransform(`import {StatusDot} from '@astryxdesign/core';
+const view = <StatusDot variant={'positive' satisfies StatusDotVariant} />;`);
 
-  it('renames AvatarStatusDot variant="positive" to "success"', async () => {
-    const input = `<XDSAvatarStatusDot variant="positive" label="Online" />`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'success'");
-    expect(output).not.toContain("'positive'");
+    expect(output).toContain("{'success' satisfies StatusDotVariant}");
   });
 
-  it('renames Icon color="positive" to "success"', async () => {
-    const input = `<XDSIcon color="positive" icon={CheckIcon} />`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'success'");
-    expect(output).not.toContain("'positive'");
-  });
+  it('renames Icon, SVGIcon, AvatarStatusDot, and ProgressBar props', async () => {
+    const output = await applyTransform(`import {
+  Icon,
+  SVGIcon,
+  AvatarStatusDot,
+  ProgressBar,
+} from '@astryxdesign/core';
+const view = <>
+  <Icon color="negative" />
+  <SVGIcon color="positive" />
+  <AvatarStatusDot variant="negative" />
+  <ProgressBar variant="positive" />
+</>;`);
 
-  it('renames Icon color="negative" to "error"', async () => {
-    const input = `<XDSIcon color="negative" icon={XIcon} />`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'error'");
-    expect(output).not.toContain("'negative'");
+    expect(output.match(/'error'/g)).toHaveLength(2);
+    expect(output.match(/'success'/g)).toHaveLength(2);
   });
 
-  it('renames ProgressBar variant="positive" to "success"', async () => {
-    const input = `<XDSProgressBar variant="positive" value={50} />`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'success'");
-    expect(output).not.toContain("'positive'");
-  });
+  it('maps import aliases and default subpath imports', async () => {
+    const output = await applyTransform(`import {StatusDot as Dot} from '@xds/core';
+import IconGlyph from '@astryxdesign/core/Icon';
+const view = <><Dot variant="positive" /><IconGlyph color="negative" /></>;`);
 
-  it('renames ProgressBar variant="negative" to "error"', async () => {
-    const input = `<XDSProgressBar variant="negative" value={50} />`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'error'");
-    expect(output).not.toContain("'negative'");
+    expect(output).toContain("<Dot variant='success'");
+    expect(output).toContain("<IconGlyph color='error'");
   });
 
-  it('handles expression container: variant={"positive"}', async () => {
-    const input = `<XDSStatusDot variant={'positive'} label="Online" />`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'success'");
-    expect(output).not.toContain("'positive'");
-  });
+  it('maps namespace imports', async () => {
+    const output = await applyTransform(`import * as Core from '@astryxdesign/core';
+const view = <Core.StatusDot variant="info" />;`);
 
-  it('handles ternary: variant={x ? "positive" : "negative"}', async () => {
-    const input = `<XDSStatusDot variant={isOnline ? 'positive' : 'negative'} label="Status" />`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'success'");
-    expect(output).toContain("'error'");
-    expect(output).not.toContain("'positive'");
-    expect(output).not.toContain("'negative'");
+    expect(output).toContain("variant='accent'");
   });
 
-  it('renames object property values in files importing target components', async () => {
-    const input = `import { XDSStatusDot } from '@xds/core/StatusDot';
-const args = { variant: 'positive' };`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'success'");
-    expect(output).not.toContain("'positive'");
-  });
+  it('keeps Badge info distinct while renaming its removed variants', async () => {
+    const output = await applyTransform(`import {Badge} from '@astryxdesign/core';
+const view = <>
+  <Badge variant="info" />
+  <Badge variant="positive" />
+  <Badge variant="negative" />
+</>;`);
 
-  it('renames unambiguous values in Storybook argType options arrays but leaves ambiguous "info"', async () => {
-    const input = `import { XDSStatusDot } from '@xds/core/StatusDot';
-const meta = { argTypes: { variant: { options: ['positive', 'negative', 'warning', 'info', 'neutral'] } } };`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'success'");
-    expect(output).toContain("'error'");
-    expect(output).not.toContain("'positive'");
-    expect(output).not.toContain("'negative'");
-    // 'info' is ambiguous (valid on Badge etc.) and this is a context-blind
-    // path — the codemod cannot tell which component the options describe, so
-    // it is left for human review rather than risk rewriting a valid value.
-    expect(output).toContain("'info'");
-    expect(output).not.toContain("'accent'");
-    // warning and neutral are unchanged
-    expect(output).toContain("'warning'");
-    expect(output).toContain("'neutral'");
+    expect(output).toContain('variant="info"');
+    expect(output).toContain("variant='success'");
+    expect(output).toContain("variant='error'");
   });
 
-  it('does not touch unrelated components', async () => {
-    const input = `<XDSBadge variant="info" label="New" />`;
-    const output = await applyTransform(input);
-    // XDSBadge is not in the target list
-    expect(output).toContain('info');
+  it('leaves variables, helpers, objects, types, and Storybook metadata untouched', async () => {
+    const input = `import {StatusDot} from '@astryxdesign/core';
+type CellTone = 'positive' | 'negative' | 'info';
+const args = {variant: 'positive'};
+const options = ['positive', 'negative', 'info'];
+function tone() { return 'negative' as const; }
+const view = <StatusDot variant={tone()} />;`;
+
+    expect(await applyTransform(input)).toBe(input);
   });
 
-  it('does not rewrite Badge config "info" in a file that also imports a target (Icon)', async () => {
-    // Regression: a file may import a target component (e.g. XDSIcon) AND
-    // declare a typed config object for a NON-target component (Badge, whose
-    // BadgeVariantMap still has `info`). The context-blind object-property path
-    // must NOT rewrite that `info` to `accent` just because the file imports a
-    // target — `accent` is not a valid Badge variant. positive/negative stay
-    // renamed (no component keeps them), but info is preserved.
-    const input = `import { XDSIcon } from '@xds/core/Icon';
-import { XDSBadge, type XDSBadgeVariant } from '@xds/core/Badge';
-const PROGRESS_CONFIG: Record<string, {label: string; variant: XDSBadgeVariant}> = {
-  OPEN: {label: 'Open', variant: 'info'},
-  DONE: {label: 'Done', variant: 'positive'},
-  BLOCKED: {label: 'Blocked', variant: 'negative'},
-};`;
-    const output = await applyTransform(input);
-    // Ambiguous 'info' on a Badge config is left intact.
-    expect(output).toContain("variant: 'info'");
-    expect(output).not.toContain("'accent'");
-    // Unambiguous values are still migrated (no component retains them).
-    expect(output).toContain("variant: 'success'");
-    expect(output).toContain("variant: 'error'");
-    expect(output).not.toContain("'positive'");
-    expect(output).not.toContain("'negative'");
+  it('leaves unrelated props untouched', async () => {
+    const output = await applyTransform(`import {StatusDot} from '@astryxdesign/core';
+const view = <StatusDot variant="positive" label="positive" />;`);
+
+    expect(output).toContain("variant='success'");
+    expect(output).toContain('label="positive"');
   });
 
-  it('still renames "info" to "accent" on a direct target JSX attribute', async () => {
-    // The precise path (component is known) keeps the full mapping, including
-    // the ambiguous info -> accent, even when other components are imported.
-    const input = `import { XDSStatusDot } from '@xds/core/StatusDot';
-import { XDSBadge } from '@xds/core/Badge';
-const a = <XDSStatusDot variant="info" label="Status" />;
-const b = <XDSBadge variant="info" label="New" />;`;
-    const output = await applyTransform(input);
-    // StatusDot's info -> accent (precise), Badge's info stays.
-    expect(output).toContain("<XDSStatusDot variant='accent'");
-    expect(output).toContain('<XDSBadge variant="info"');
+  it('ignores same-named components imported from other packages', async () => {
+    const input = `import {StatusDot} from '@other/core';
+const view = <StatusDot variant="positive" />;`;
+    expect(await applyTransform(input)).toBe(input);
   });
 
-  it('does not touch unrelated props on target components', async () => {
-    const input = `<XDSStatusDot variant="positive" label="positive result" />`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'success'");
-    // The label "positive result" should NOT be renamed
-    expect(output).toContain('positive result');
+  it('ignores a local component that shadows an imported alias', async () => {
+    const output = await applyTransform(`import {StatusDot as Dot} from '@xds/core';
+const migrated = <Dot variant="positive" />;
+function Local(Dot) { return <Dot variant="negative" />; }`);
+
+    expect(output).toContain("variant='success'");
+    expect(output).toContain('variant="negative"');
   });
 
-  it('returns undefined when no changes needed', async () => {
-    const {default: transform} = await import(
-      '../rename-status-variants.mjs'
-    );
+  it('returns undefined when no direct prop needs a change', async () => {
     const jscodeshift = (await import('jscodeshift')).default;
     const j = jscodeshift.withParser('tsx');
-    const api = {jscodeshift: j, stats: () => {}, report: () => {}};
-    const source = `<XDSStatusDot variant='success' label='Online' />`;
-    const result = transform({source, path: 'test.tsx'}, api);
-    expect(result).toBeUndefined();
-  });
-
-  it('handles a full component file', async () => {
-    const input = `import { XDSStatusDot } from '@xds/core/StatusDot';
-import { XDSIcon } from '@xds/core/Icon';
-
-function StatusIndicator({ isOnline }: { isOnline: boolean }) {
-  return (
-    <div>
-      <XDSStatusDot
-        variant={isOnline ? 'positive' : 'negative'}
-        label={isOnline ? 'Online' : 'Offline'}
-      />
-      <XDSIcon
-        icon={isOnline ? CheckIcon : XIcon}
-        color={isOnline ? 'positive' : 'negative'}
-      />
-    </div>
-  );
-}`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'success'");
-    expect(output).toContain("'error'");
-    expect(output).not.toContain("'positive'");
-    expect(output).not.toContain("'negative'");
+    const source = `import {StatusDot} from '@astryxdesign/core';
+const view = <StatusDot variant="success" />;`;
+    expect(
+      transform(
+        {source, path: 'test.tsx'},
+        {jscodeshift: j, stats: () => {}, report: () => {}},
+      ),
+    ).toBeUndefined();
   });
 });