@astryxdesign/cli 0.0.0-bootstrap.0 → 0.0.15

package/src/codemods/transforms/v0.0.10/remove-size-props.mjs

@@ -0,0 +1,94 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Remove size prop from XDSStatusDot and XDSProgressBar
+ * @see https://github.com/facebookexperimental/xds/issues/904
+ *
+ * StatusDot and ProgressBar now have a single fixed size (8px).
+ * The `size` prop has been removed from both components.
+ *
+ * This codemod handles:
+ * 1. JSX prop removal: <XDSStatusDot size="sm" /> → <XDSStatusDot />
+ * 2. JSX prop removal: <XDSProgressBar size="md" /> → <XDSProgressBar />
+ * 3. Object property removal in spread patterns: { size: "sm", ...rest } → { ...rest }
+ * 4. Destructuring removal: const { size, ...rest } = props → const { ...rest } = props
+ * 5. Type reference cleanup: XDSStatusDotSize, XDSProgressBarSize imports removed
+ */
+
+const TARGET_COMPONENTS = new Set([
+  'XDSStatusDot',
+  'XDSProgressBar',
+]);
+
+const SIZE_TYPE_IMPORTS = new Set([
+  'XDSStatusDotSize',
+  'XDSProgressBarSize',
+]);
+
+export const meta = {
+  title: 'Remove size prop from StatusDot and ProgressBar',
+  description:
+    'StatusDot and ProgressBar now have a single fixed size (8px). Removes the `size` prop from JSX, object literals, destructuring patterns, and cleans up size type imports.',
+  pr: '#966',
+};
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  // 1. Remove size JSX prop from target components
+  root
+    .find(j.JSXOpeningElement)
+    .filter((path) => {
+      const name = path.node.name;
+      // Handle simple names like <XDSStatusDot>
+      if (name.type === 'JSXIdentifier') {
+        return TARGET_COMPONENTS.has(name.name);
+      }
+      return false;
+    })
+    .forEach((path) => {
+      const attrs = path.node.attributes;
+      const sizeIdx = attrs.findIndex(
+        (attr) =>
+          attr.type === 'JSXAttribute' &&
+          attr.name &&
+          attr.name.name === 'size',
+      );
+      if (sizeIdx !== -1) {
+        attrs.splice(sizeIdx, 1);
+        hasChanges = true;
+      }
+    });
+
+  // 2. Remove size type imports (XDSStatusDotSize, XDSProgressBarSize)
+  root.find(j.ImportDeclaration).forEach((path) => {
+    const specifiers = path.node.specifiers;
+    if (!specifiers) return;
+
+    const toRemove = [];
+    for (let i = 0; i < specifiers.length; i++) {
+      const spec = specifiers[i];
+      const importedName =
+        spec.imported?.name || spec.local?.name;
+      if (importedName && SIZE_TYPE_IMPORTS.has(importedName)) {
+        toRemove.push(i);
+      }
+    }
+
+    if (toRemove.length > 0) {
+      // Remove in reverse order to preserve indices
+      for (let i = toRemove.length - 1; i >= 0; i--) {
+        specifiers.splice(toRemove[i], 1);
+      }
+      // If no specifiers left, remove entire import
+      if (specifiers.length === 0) {
+        j(path).remove();
+      }
+      hasChanges = true;
+    }
+  });
+
+  return hasChanges ? root.toSource() : undefined;
+}

package/src/codemods/transforms/v0.0.12/__tests__/add-is-icon-only.test.mjs

@@ -0,0 +1,193 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+
+async function applyTransform(source, filePath = 'test.tsx') {
+  const {default: transform} = await import('../add-is-icon-only.mjs');
+  const jscodeshift = (await import('jscodeshift')).default;
+  const j = filePath.endsWith('.ts') || filePath.endsWith('.tsx') ? jscodeshift.withParser('tsx') : jscodeshift;
+  const api = {jscodeshift: j, stats: () => {}, report: () => {}};
+  return transform({source, path: filePath}, api) ?? source;
+}
+
+describe('add-is-icon-only', () => {
+  it('converts icon-only button to XDSIconButton', async () => {
+    const input = `import {XDSButton} from '@xds/core/Button';
+<XDSButton label="Settings" icon={<GearIcon />} variant="ghost" />`;
+    const output = await applyTransform(input);
+    expect(output).toContain('XDSIconButton');
+    expect(output).not.toContain('XDSButton');
+    expect(output).toContain('@xds/core/IconButton');
+  });
+
+  it('skips button with JSX children', async () => {
+    const input = '<XDSButton label="Save" icon={<SaveIcon />}>Save</XDSButton>';
+    expect(await applyTransform(input)).not.toContain('XDSIconButton');
+  });
+
+  it('skips button with children prop', async () => {
+    const input = '<XDSButton label="Save" icon={<SaveIcon />} children="Save" />';
+    expect(await applyTransform(input)).not.toContain('XDSIconButton');
+  });
+
+  it('skips button without icon', async () => {
+    const input = '<XDSButton label="Submit" variant="primary" />';
+    expect(await applyTransform(input)).not.toContain('XDSIconButton');
+  });
+
+  it('skips button that already has isIconOnly', async () => {
+    const input = '<XDSButton label="Settings" icon={<GearIcon />} isIconOnly />';
+    expect(await applyTransform(input)).toBe(input);
+  });
+
+  it('handles multiple buttons — converts only icon-only ones', async () => {
+    const input = `import {XDSButton} from '@xds/core/Button';
+<>
+  <XDSButton label="A" icon={<I />} />
+  <XDSButton label="B" />
+  <XDSButton label="C" icon={<I />} />
+</>`;
+    const output = await applyTransform(input);
+    expect((output.match(/XDSIconButton/g) || []).length).toBeGreaterThanOrEqual(2);
+    // XDSButton should remain for the non-icon-only one
+    expect(output).toContain('XDSButton');
+  });
+
+  it('does NOT convert XDSToggleButton', async () => {
+    const input = '<XDSToggleButton label="Bold" icon={<B />} value="bold" />';
+    expect(await applyTransform(input)).not.toContain('XDSIconButton');
+  });
+
+  it('removes redundant children matching label', async () => {
+    const input = '<XDSButton label="Save" icon={<SaveIcon />}>Save</XDSButton>';
+    const output = await applyTransform(input);
+    expect(output).not.toContain('>Save<');
+    expect(output).toContain('/>');
+  });
+
+  it('preserves children differing from label', async () => {
+    const input = '<XDSButton label="Close dialog" icon={<X />}>Close</XDSButton>';
+    expect(await applyTransform(input)).toContain('>Close<');
+  });
+
+  it('adds isIconOnly to DropdownMenu button object', async () => {
+    const input = "<XDSDropdownMenu button={{ label: 'More', icon: <I /> }} items={[]} />";
+    expect(await applyTransform(input)).toContain('isIconOnly: true');
+  });
+
+  it('skips DropdownMenu button object with children', async () => {
+    const input = "<XDSDropdownMenu button={{ label: 'X', icon: <I />, children: 'X' }} items={[]} />";
+    expect(await applyTransform(input)).not.toContain('isIconOnly');
+  });
+
+  it('skips unrelated components', async () => {
+    const input = '<XDSAvatar icon={<P />} name="U" />';
+    expect(await applyTransform(input)).not.toContain('XDSIconButton');
+  });
+
+  it('returns undefined when no changes needed', async () => {
+    const {default: transform} = await import('../add-is-icon-only.mjs');
+    const jscodeshift = (await import('jscodeshift')).default;
+    const j = jscodeshift.withParser('tsx');
+    const result = transform({source: '<XDSButton label="X" />', path: 'test.tsx'}, {jscodeshift: j, stats: () => {}, report: () => {}});
+    expect(result).toBeUndefined();
+  });
+
+  it('removes endContent when converting to XDSIconButton', async () => {
+    const input = `import {XDSButton} from '@xds/core/Button';
+<XDSButton label="X" icon={<I />} endContent={<Badge />} />`;
+    const output = await applyTransform(input);
+    expect(output).toContain('XDSIconButton');
+    expect(output).not.toContain('endContent');
+  });
+
+  it('replaces Button import when no XDSButton usage remains', async () => {
+    const input = `import {XDSButton} from '@xds/core/Button';
+<XDSButton label="X" icon={<I />} />`;
+    const output = await applyTransform(input);
+    expect(output).toContain('@xds/core/IconButton');
+    expect(output).not.toContain('@xds/core/Button');
+  });
+
+  it('keeps Button import when XDSButton still used', async () => {
+    const input = `import {XDSButton} from '@xds/core/Button';
+<><XDSButton label="A" icon={<I />} /><XDSButton label="B" variant="primary" /></>`;
+    const output = await applyTransform(input);
+    expect(output).toContain('@xds/core/Button');
+    expect(output).toContain('@xds/core/IconButton');
+  });
+
+  it('adds XDSIconButton to barrel import', async () => {
+    const input = `import {XDSButton, XDSBadge} from '@xds/core';
+<XDSButton label="X" icon={<I />} />`;
+    const output = await applyTransform(input);
+    expect(output).toContain('XDSIconButton');
+    expect(output).toContain("from '@xds/core'");
+  });
+
+  it('updates closing tag for non-self-closing elements', async () => {
+    const input = `import {XDSButton} from '@xds/core/Button';
+<XDSButton label="X" icon={<I />}></XDSButton>`;
+    const output = await applyTransform(input);
+    expect(output).toContain('</XDSIconButton>');
+  });
+
+  // Bug fixes (#1346)
+
+  it('does not produce double semicolons after use client directive', async () => {
+    const input = `'use client';
+
+import {XDSButton} from '@xds/core/Button';
+
+function Foo() {
+  return <XDSButton label="X" icon={<I />} />;
+}`;
+    const output = await applyTransform(input);
+    expect(output).not.toContain(';;');
+    expect(output).toContain("'use client'");
+  });
+
+  it('may produce double semicolons from jscodeshift bug (runner fixes this)', async () => {
+    // jscodeshift has a known bug where inserting new imports corrupts
+    // directive prologues. The runner's fixDirectiveCorruption() handles
+    // this — see validation.test.mjs for runner-level tests.
+    const input = `'use client';
+
+import {XDSButton} from '@xds/core/Button';
+import {SomeIcon} from '@heroicons/react/24/outline';
+
+export function F() {
+  return <><XDSButton label="X" icon={<I />} /><XDSButton label="Y" variant="primary" /></>;
+}`;
+    const output = await applyTransform(input);
+    // The transform itself works correctly
+    expect(output).toContain('XDSIconButton');
+    expect(output).toContain('XDSButton');
+  });
+
+  it('splits type imports to correct module when replacing Button import', async () => {
+    const input = `import {XDSButton, type XDSButtonProps} from '@xds/core/Button';
+
+function Foo(props: XDSButtonProps) {
+  return <XDSButton label="X" icon={<I />} />;
+}`;
+    const output = await applyTransform(input);
+    // Type import should stay on @xds/core/Button
+    expect(output).toContain("XDSButtonProps");
+    expect(output).toContain("'@xds/core/Button'");
+    // Component import should be on @xds/core/IconButton
+    expect(output).toContain("XDSIconButton");
+    expect(output).toContain("'@xds/core/IconButton'");
+    // XDSButton should NOT be in any import (it was the only value import)
+    expect(output).not.toMatch(/import.*XDSButton[^P]/);
+  });
+
+  it('uses single quotes for new imports', async () => {
+    const input = `import {XDSButton} from '@xds/core/Button';
+<><XDSButton label="A" icon={<I />} /><XDSButton label="B" variant="primary" /></>`;
+    const output = await applyTransform(input);
+    // New IconButton import should use single quotes
+    expect(output).toContain("from '@xds/core/IconButton'");
+    expect(output).not.toContain('from "@xds/core/IconButton"');
+  });
+});

package/src/codemods/transforms/v0.0.12/add-is-icon-only.mjs

@@ -0,0 +1,316 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Migrate pre-v0.0.12 icon-only XDSButton to XDSIconButton
+ * @see https://github.com/facebookexperimental/xds/issues/1321
+ *
+ * Migration codemod for code written against v0.0.11 or earlier.
+ *
+ * Prior to v0.0.12, XDSButton inferred icon-only mode when `icon` was
+ * present and no `children` were provided — the label was used as
+ * aria-label only and the button rendered as a square icon button.
+ *
+ * In v0.0.12, that implicit inference is removed. `label` is always
+ * rendered as visible text. Without this codemod, existing icon-only
+ * buttons will start showing their label text alongside the icon.
+ *
+ * This codemod converts those implicit icon-only usages to the new
+ * explicit `<XDSIconButton>` component, which is always icon-only by
+ * design — no boolean prop to forget, visible in JSX, greppable.
+ *
+ * Detection: a JSX element was implicitly icon-only when it has:
+ *   1. An `icon` prop (any value)
+ *   2. No `children` prop AND no JSX children (self-closing or empty)
+ *   3. No existing `isIconOnly` prop (already migrated)
+ *
+ * Also handles:
+ * - Object literals in forwarding components (XDSDropdownMenu, XDSMoreMenu)
+ *   — these get `isIconOnly: true` since they pass props internally
+ * - Removing redundant `children` that duplicate `label` on icon+text buttons
+ *
+ * Run on demand: `astryx upgrade --from 0.0.11 --to 0.0.12 --codemod add-is-icon-only`
+ */
+
+const TARGET_COMPONENTS = new Set([
+  'XDSButton',
+]);
+
+/** Components whose button-like object props get isIconOnly: true added. */
+const FORWARDING_COMPONENTS = new Set([
+  'XDSDropdownMenu',
+  'XDSMoreMenu',
+]);
+
+export const meta = {
+  title: 'Migrate pre-v0.0.12 icon-only buttons to XDSIconButton',
+  description:
+    'Converts implicit icon-only <XDSButton icon={...} label="..." /> (v0.0.11 pattern) ' +
+    'to the explicit <XDSIconButton> component introduced in v0.0.12. ' +
+    'Also adds isIconOnly to forwarding component object configs.',
+  pr: '#1321',
+};
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+  let needsIconButtonImport = false;
+  let hasRemainingXDSButton = false;
+
+  // Insert a new node after a target node in the program body.
+  // Uses direct body manipulation instead of jscodeshift's insertAfter(),
+  // which has a known bug that corrupts 'use client' directives into
+  // double semicolons ('use client';;).
+  function insertAfterInBody(targetPath, newNode) {
+    const body = root.get().node.program.body;
+    const targetIndex = body.indexOf(targetPath.node);
+    if (targetIndex !== -1) {
+      body.splice(targetIndex + 1, 0, newNode);
+    } else {
+      // Fallback: insert after all imports
+      const lastImportIdx = body.findLastIndex(
+        (n) => n.type === 'ImportDeclaration',
+      );
+      body.splice(lastImportIdx + 1, 0, newNode);
+    }
+  }
+
+  // ---- 1. JSX elements: convert icon-only XDSButton to XDSIconButton ----
+  root.find(j.JSXOpeningElement).forEach((path) => {
+    const name = path.node.name;
+    const componentName =
+      name.type === 'JSXIdentifier' ? name.name : null;
+    if (!componentName || !TARGET_COMPONENTS.has(componentName)) return;
+
+    const attrs = path.node.attributes;
+
+    const hasIcon = attrs.some(
+      (a) => a.type === 'JSXAttribute' && a.name?.name === 'icon',
+    );
+    const hasChildren = attrs.some(
+      (a) => a.type === 'JSXAttribute' && a.name?.name === 'children',
+    );
+    const hasIsIconOnly = attrs.some(
+      (a) => a.type === 'JSXAttribute' && a.name?.name === 'isIconOnly',
+    );
+
+    if (!hasIcon || hasChildren || hasIsIconOnly) return;
+
+    // Check for JSX children (non-whitespace text or elements)
+    const parent = path.parent.node;
+    const hasJSXChildren =
+      parent.type === 'JSXElement' &&
+      parent.children &&
+      parent.children.some((child) => {
+        if (child.type === 'JSXText') return child.value.trim() !== '';
+        return true;
+      });
+
+    if (hasJSXChildren) return;
+
+    // This is an icon-only button — convert to XDSIconButton
+    name.name = 'XDSIconButton';
+
+    // Remove endContent prop (XDSIconButton doesn't accept it)
+    for (let i = attrs.length - 1; i >= 0; i--) {
+      if (attrs[i].type === 'JSXAttribute' && attrs[i].name?.name === 'endContent') {
+        attrs.splice(i, 1);
+      }
+    }
+
+    // Update closing element if present
+    if (parent.type === 'JSXElement' && parent.closingElement) {
+      parent.closingElement.name.name = 'XDSIconButton';
+    }
+
+    needsIconButtonImport = true;
+    hasChanges = true;
+  });
+
+  // ---- 2. Remove redundant children that match label ----
+  root.find(j.JSXElement).forEach((path) => {
+    const opening = path.node.openingElement;
+    const name = opening.name;
+    const componentName =
+      name.type === 'JSXIdentifier' ? name.name : null;
+    if (!componentName || !TARGET_COMPONENTS.has(componentName)) return;
+
+    const attrs = opening.attributes;
+    const hasIcon = attrs.some(
+      (a) => a.type === 'JSXAttribute' && a.name?.name === 'icon',
+    );
+    if (!hasIcon) return;
+
+    // Get label value
+    const labelAttr = attrs.find(
+      (a) => a.type === 'JSXAttribute' && a.name?.name === 'label',
+    );
+    if (!labelAttr || !labelAttr.value) return;
+
+    let labelValue = null;
+    if (labelAttr.value.type === 'StringLiteral' || labelAttr.value.type === 'Literal') {
+      labelValue = labelAttr.value.value;
+    }
+    if (!labelValue) return;
+
+    // Check if children is a single text node matching label
+    const children = path.node.children;
+    if (!children || children.length !== 1) return;
+
+    const child = children[0];
+    if (child.type === 'JSXText' && child.value.trim() === labelValue) {
+      path.node.children = [];
+      path.node.closingElement = null;
+      opening.selfClosing = true;
+      hasChanges = true;
+    }
+    if (
+      child.type === 'JSXExpressionContainer' &&
+      (child.expression.type === 'StringLiteral' || child.expression.type === 'Literal') &&
+      child.expression.value === labelValue
+    ) {
+      path.node.children = [];
+      path.node.closingElement = null;
+      opening.selfClosing = true;
+      hasChanges = true;
+    }
+  });
+
+  // ---- 3. Object literals: add isIconOnly to button config objects ----
+  root.find(j.JSXOpeningElement).forEach((path) => {
+    const name = path.node.name;
+    const componentName =
+      name.type === 'JSXIdentifier' ? name.name : null;
+    if (!componentName || !FORWARDING_COMPONENTS.has(componentName)) return;
+
+    const attrs = path.node.attributes;
+    const buttonAttr = attrs.find(
+      (a) =>
+        a.type === 'JSXAttribute' &&
+        a.name?.name === 'button' &&
+        a.value?.type === 'JSXExpressionContainer' &&
+        a.value.expression.type === 'ObjectExpression',
+    );
+    if (!buttonAttr) return;
+
+    const obj = buttonAttr.value.expression;
+    const props = obj.properties;
+
+    const hasIcon = props.some(
+      (p) => (p.type === 'Property' || p.type === 'ObjectProperty') && p.key?.name === 'icon',
+    );
+    const hasChildren = props.some(
+      (p) => (p.type === 'Property' || p.type === 'ObjectProperty') && p.key?.name === 'children',
+    );
+    const hasIsIconOnly = props.some(
+      (p) => (p.type === 'Property' || p.type === 'ObjectProperty') && p.key?.name === 'isIconOnly',
+    );
+
+    if (hasIcon && !hasChildren && !hasIsIconOnly) {
+      props.push(
+        j.property('init', j.identifier('isIconOnly'), j.literal(true)),
+      );
+      hasChanges = true;
+    }
+  });
+
+  if (!hasChanges) return undefined;
+
+  // ---- 4. Update imports ----
+  // Check if any XDSButton JSX usage remains
+  root.find(j.JSXIdentifier, {name: 'XDSButton'}).forEach(() => {
+    hasRemainingXDSButton = true;
+  });
+  // Also check for XDSButton in type annotations (e.g. typeof XDSButton)
+  root.find(j.Identifier, {name: 'XDSButton'}).forEach((path) => {
+    // Skip JSX identifiers (already counted above) and import specifiers
+    if (path.parent.node.type === 'JSXOpeningElement' ||
+        path.parent.node.type === 'JSXClosingElement' ||
+        path.parent.node.type === 'ImportSpecifier') return;
+    hasRemainingXDSButton = true;
+  });
+
+  if (needsIconButtonImport) {
+    let alreadyImported = false;
+    root.find(j.ImportDeclaration).forEach((path) => {
+      if (path.node.specifiers.some(
+        (s) => s.type === 'ImportSpecifier' && s.imported.name === 'XDSIconButton',
+      )) {
+        alreadyImported = true;
+      }
+    });
+
+    if (!alreadyImported) {
+      // Handle @xds/core/Button import — may need splitting if it has
+      // other specifiers (type imports, other components)
+      if (!hasRemainingXDSButton) {
+        root.find(j.ImportDeclaration).forEach((path) => {
+          if (alreadyImported) return;
+          const source = path.node.source.value;
+          if (source !== '@xds/core/Button') return;
+          const specs = path.node.specifiers;
+          const btnIdx = specs.findIndex(
+            (s) => s.type === 'ImportSpecifier' && s.imported.name === 'XDSButton',
+          );
+          if (btnIdx === -1) return;
+
+          // Remove XDSButton from this import
+          specs.splice(btnIdx, 1);
+
+          if (specs.length === 0) {
+            // No other specifiers — replace the entire import
+            specs.push(j.importSpecifier(j.identifier('XDSIconButton')));
+            path.node.source = j.stringLiteral('@xds/core/IconButton');
+          } else {
+            // Other specifiers remain (type imports, etc.) — keep this import
+            // for them and add a new one for XDSIconButton
+            const newImport = j.importDeclaration(
+              [j.importSpecifier(j.identifier('XDSIconButton'))],
+              j.stringLiteral('@xds/core/IconButton'),
+            );
+            insertAfterInBody(path, newImport);
+          }
+          alreadyImported = true;
+        });
+      }
+
+      // For barrel imports, add the specifier
+      if (!alreadyImported) {
+        root.find(j.ImportDeclaration).forEach((path) => {
+          if (alreadyImported) return;
+          if (path.node.source.value === '@xds/core') {
+            path.node.specifiers.push(
+              j.importSpecifier(j.identifier('XDSIconButton')),
+            );
+            alreadyImported = true;
+          }
+        });
+      }
+
+      // Otherwise add a new import after the last @xds import
+      if (!alreadyImported) {
+        const newImport = j.importDeclaration(
+          [j.importSpecifier(j.identifier('XDSIconButton'))],
+          j.stringLiteral('@xds/core/IconButton'),
+        );
+
+        const xdsImports = root
+          .find(j.ImportDeclaration)
+          .filter((p) => p.node.source.value.startsWith('@xds/'));
+
+        if (xdsImports.length > 0) {
+          insertAfterInBody(xdsImports.at(-1), newImport);
+        } else {
+          const allImports = root.find(j.ImportDeclaration);
+          if (allImports.length > 0) {
+            insertAfterInBody(allImports.at(-1), newImport);
+          } else {
+            root.get().node.program.body.unshift(newImport);
+          }
+        }
+      }
+    }
+  }
+
+  return root.toSource({quote: 'single'});
+}

package/src/codemods/transforms/v0.0.12/index.mjs

@@ -0,0 +1,24 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file v0.0.12 transform manifest
+ *
+ * Lists all codemods for the v0.0.12 release in the order they should run.
+ */
+
+import addIsIconOnly, {
+  meta as addIsIconOnlyMeta,
+} from './add-is-icon-only.mjs';
+
+export default [
+  {
+    name: 'add-is-icon-only',
+    transform: addIsIconOnly,
+    meta: addIsIconOnlyMeta,
+    // Optional: heuristic-based detection can produce false positives.
+    // A button with icon + no children might intentionally show the label
+    // in v0.0.12. Run explicitly with --codemod add-is-icon-only after
+    // visually verifying the results.
+    optional: true,
+  },
+];