@astryxdesign/cli 0.0.0-bootstrap.0 → 0.1.0-canary.08d4cf4

package/src/codemods/transforms/v0.0.2/__tests__/unify-visibility-to-onOpenChange.test.mjs

@@ -0,0 +1,130 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+
+async function applyTransform(source) {
+  const {default: transform} = await import(
+    '../unify-visibility-to-onOpenChange.mjs'
+  );
+  const jscodeshift = (await import('jscodeshift')).default;
+  const api = {jscodeshift, stats: () => {}, report: () => {}};
+  const file = {source, path: 'test.tsx'};
+  const result = transform(file, api);
+  return result ?? source;
+}
+
+describe('unify-visibility-to-onOpenChange', () => {
+  // Simple renames
+  it('renames onHide to onOpenChange on XDSDialog', async () => {
+    const input = '<XDSDialog onHide={handleHide} />';
+    const output = await applyTransform(input);
+    expect(output).toContain('onOpenChange={handleHide}');
+    expect(output).not.toContain('onHide');
+  });
+
+  it('renames onHide to onOpenChange on XDSDialogHeader', async () => {
+    const input = '<XDSDialogHeader onHide={close} title="Test" />';
+    const output = await applyTransform(input);
+    expect(output).toContain('onOpenChange={close}');
+    expect(output).not.toContain('onHide');
+  });
+
+  it('renames onClose to onOpenChange on XDSMobileNav', async () => {
+    const input = '<XDSMobileNav onClose={handleClose} />';
+    const output = await applyTransform(input);
+    expect(output).toContain('onOpenChange={handleClose}');
+    expect(output).not.toContain('onClose');
+  });
+
+  it('renames onMenuToggle to onOpenChange on XDSDropdownMenu', async () => {
+    const input = '<XDSDropdownMenu onMenuToggle={toggle} />';
+    const output = await applyTransform(input);
+    expect(output).toContain('onOpenChange={toggle}');
+    expect(output).not.toContain('onMenuToggle');
+  });
+
+  it('renames onToggle to onOpenChange on XDSPopover', async () => {
+    const input = '<XDSPopover onToggle={handleToggle} />';
+    const output = await applyTransform(input);
+    expect(output).toContain('onOpenChange={handleToggle}');
+    expect(output).not.toContain('onToggle');
+  });
+
+  it('renames onToggle to onOpenChange on XDSCollapsibleGroup', async () => {
+    const input = '<XDSCollapsibleGroup onToggle={handleToggle} />';
+    const output = await applyTransform(input);
+    expect(output).toContain('onOpenChange={handleToggle}');
+    expect(output).not.toContain('onToggle');
+  });
+
+  // Merge components — single prop
+  it('renames onShow to onOpenChange on XDSHoverCard when only onShow', async () => {
+    const input = '<XDSHoverCard onShow={handleShow} />';
+    const output = await applyTransform(input);
+    expect(output).toContain('onOpenChange={handleShow}');
+    expect(output).not.toContain('onShow');
+  });
+
+  it('renames onHide to onOpenChange on XDSTooltip when only onHide', async () => {
+    const input = '<XDSTooltip onHide={handleHide} />';
+    const output = await applyTransform(input);
+    expect(output).toContain('onOpenChange={handleHide}');
+    expect(output).not.toContain('onHide');
+  });
+
+  // Merge components — both props
+  it('adds TODO comment on XDSHoverCard when both onShow and onHide exist', async () => {
+    const input = '<XDSHoverCard onShow={show} onHide={hide} />';
+    const output = await applyTransform(input);
+    expect(output).toContain('TODO');
+    // Both props should remain
+    expect(output).toContain('onShow');
+    expect(output).toContain('onHide');
+  });
+
+  it('adds TODO comment on XDSTooltip when both onShow and onHide exist', async () => {
+    const input = '<XDSTooltip onShow={show} onHide={hide} content="tip" />';
+    const output = await applyTransform(input);
+    expect(output).toContain('TODO');
+    expect(output).toContain('onShow');
+    expect(output).toContain('onHide');
+  });
+
+  // Negative cases
+  it('does not rename onHide on non-XDS components', async () => {
+    const input = '<Dialog onHide={handleHide} />';
+    const output = await applyTransform(input);
+    expect(output).toBe(input);
+  });
+
+  it('does not rename onToggle on non-XDS components', async () => {
+    const input = '<Popover onToggle={handleToggle} />';
+    const output = await applyTransform(input);
+    expect(output).toBe(input);
+  });
+
+  it('returns undefined when no changes needed', async () => {
+    const {default: transform} = await import(
+      '../unify-visibility-to-onOpenChange.mjs'
+    );
+    const jscodeshift = (await import('jscodeshift')).default;
+    const api = {jscodeshift, stats: () => {}, report: () => {}};
+    const source = '<XDSDialog onOpenChange={handleChange} />';
+    const result = transform({source, path: 'test.tsx'}, api);
+    expect(result).toBeUndefined();
+  });
+
+  it('handles multiple components in one file', async () => {
+    const input = `
+      <div>
+        <XDSDialog onHide={close} />
+        <XDSPopover onToggle={toggle} />
+      </div>
+    `;
+    const output = await applyTransform(input);
+    expect(output).not.toContain('onHide');
+    expect(output).not.toContain('onToggle');
+    expect(output).toContain('onOpenChange={close}');
+    expect(output).toContain('onOpenChange={toggle}');
+  });
+});

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

@@ -0,0 +1,106 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file v0.0.2 transform manifest
+ *
+ * Lists all codemods for the v0.0.2 release in the order they should run.
+ */
+
+import renameSelectorItemsToOptions, {
+  meta as selectorMeta,
+} from './rename-selector-items-to-options.mjs';
+import unifyVisibilityToOnOpenChange, {
+  meta as visibilityMeta,
+} from './unify-visibility-to-onOpenChange.mjs';
+import unifyUncontrolledToDefaultX, {
+  meta as uncontrolledMeta,
+} from './unify-uncontrolled-to-defaultX.mjs';
+import renameBannerEndButtonToEndContent, {
+  meta as bannerMeta,
+} from './rename-banner-endButton-to-endContent.mjs';
+import renameFormTooltipStartIcon, {
+  meta as formMeta,
+} from './rename-form-tooltip-startIcon.mjs';
+import renameIsShownToIsOpen, {
+  meta as isShownMeta,
+} from './rename-isShown-to-isOpen.mjs';
+import renameTopNavTitleToHeading, {
+  meta as topNavTitleMeta,
+} from './rename-topnav-title-to-heading.mjs';
+import renameSideNavHeaderToHeading, {
+  meta as sideNavHeaderMeta,
+} from './rename-sidenav-header-to-heading.mjs';
+import migrateUseXDSIconToGetIcon, {
+  meta as useXDSIconMeta,
+} from './migrate-useXDSIcon-to-getIcon.mjs';
+import migrateGapToNumeric, {
+  meta as gapMeta,
+} from './migrate-gap-to-numeric.mjs';
+import migrateIsFullBleedToPadding, {
+  meta as fullBleedMeta,
+} from './migrate-isFullBleed-to-padding.mjs';
+import migrateBadgeDotToStatusDot, {
+  meta as badgeDotMeta,
+} from './migrate-badge-dot-to-statusdot.mjs';
+export default [
+  {
+    name: 'rename-selector-items-to-options',
+    transform: renameSelectorItemsToOptions,
+    meta: selectorMeta,
+  },
+  {
+    name: 'unify-visibility-to-onOpenChange',
+    transform: unifyVisibilityToOnOpenChange,
+    meta: visibilityMeta,
+  },
+  {
+    name: 'unify-uncontrolled-to-defaultX',
+    transform: unifyUncontrolledToDefaultX,
+    meta: uncontrolledMeta,
+  },
+  {
+    name: 'rename-banner-endButton-to-endContent',
+    transform: renameBannerEndButtonToEndContent,
+    meta: bannerMeta,
+  },
+  {
+    name: 'rename-form-tooltip-startIcon',
+    transform: renameFormTooltipStartIcon,
+    meta: formMeta,
+  },
+  {
+    name: 'rename-isShown-to-isOpen',
+    transform: renameIsShownToIsOpen,
+    meta: isShownMeta,
+  },
+  {
+    name: 'rename-topnav-title-to-heading',
+    transform: renameTopNavTitleToHeading,
+    meta: topNavTitleMeta,
+  },
+  {
+    name: 'rename-sidenav-header-to-heading',
+    transform: renameSideNavHeaderToHeading,
+    meta: sideNavHeaderMeta,
+  },
+  {
+    name: 'migrate-useXDSIcon-to-getIcon',
+    transform: migrateUseXDSIconToGetIcon,
+    meta: useXDSIconMeta,
+  },
+  {
+    name: 'migrate-gap-to-numeric',
+    transform: migrateGapToNumeric,
+    meta: gapMeta,
+  },
+  {
+    name: 'migrate-isFullBleed-to-padding',
+    transform: migrateIsFullBleedToPadding,
+    meta: fullBleedMeta,
+  },
+  {
+    name: 'migrate-badge-dot-to-statusdot',
+    transform: migrateBadgeDotToStatusDot,
+    meta: badgeDotMeta,
+  },
+];

package/src/codemods/transforms/v0.0.2/migrate-badge-dot-to-statusdot.mjs

@@ -0,0 +1,228 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Migrate Badge dot mode → StatusDot
+ * @see https://github.com/facebookexperimental/xds/pull/945
+ *
+ * Converts XDSBadge with shape="dot" to XDSStatusDot.
+ * Variant mapping: success→positive, error→negative, others unchanged.
+ * Passes through label prop for a11y.
+ */
+
+export const meta = {
+  title: 'Migrate Badge dot → StatusDot',
+  description: 'Converts XDSBadge shape="dot" to XDSStatusDot.',
+  pr: '#945',
+};
+
+const VARIANT_MAP = {
+  success: 'positive',
+  error: 'negative',
+  warning: 'warning',
+  info: 'info',
+  neutral: 'neutral',
+};
+
+function isDotMode(path) {
+  const opening = path.node.openingElement;
+
+  // Dot mode is indicated by shape="dot" prop
+  const hasShapeDot = opening.attributes.some(
+    (attr) =>
+      attr.type === 'JSXAttribute' &&
+      attr.name.type === 'JSXIdentifier' &&
+      attr.name.name === 'shape' &&
+      attr.value &&
+      (attr.value.type === 'Literal' || attr.value.type === 'StringLiteral') &&
+      attr.value.value === 'dot',
+  );
+  if (!hasShapeDot) return false;
+
+  // If icon prop is present, leave alone
+  const hasIcon = opening.attributes.some(
+    (attr) =>
+      attr.type === 'JSXAttribute' &&
+      attr.name.type === 'JSXIdentifier' &&
+      attr.name.name === 'icon',
+  );
+  if (hasIcon) return false;
+
+  return true;
+}
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  // Find all XDSBadge JSX elements
+  root.find(j.JSXElement).forEach((path) => {
+    const opening = path.node.openingElement;
+    if (
+      opening.name.type !== 'JSXIdentifier' ||
+      opening.name.name !== 'XDSBadge'
+    ) {
+      return;
+    }
+
+    if (!isDotMode(path)) return;
+
+    // Map variant
+    const variantAttr = opening.attributes.find(
+      (attr) =>
+        attr.type === 'JSXAttribute' &&
+        attr.name.name === 'variant',
+    );
+
+    let newVariantValue = 'neutral'; // default
+    if (variantAttr) {
+      if (
+        variantAttr.value &&
+        (variantAttr.value.type === 'StringLiteral' ||
+          variantAttr.value.type === 'Literal')
+      ) {
+        const oldVariant = variantAttr.value.value;
+        newVariantValue =
+          Object.hasOwn(VARIANT_MAP, oldVariant)
+            ? VARIANT_MAP[oldVariant]
+            : oldVariant;
+      } else if (
+        variantAttr.value &&
+        variantAttr.value.type === 'JSXExpressionContainer'
+      ) {
+        // Dynamic variant — pass through as-is, no mapping possible
+        newVariantValue = null;
+      }
+    }
+
+    // Build new attributes
+    const newAttributes = [];
+
+    // Add mapped variant
+    if (newVariantValue !== null) {
+      newAttributes.push(
+        j.jsxAttribute(
+          j.jsxIdentifier('variant'),
+          j.stringLiteral(newVariantValue),
+        ),
+      );
+    } else if (variantAttr) {
+      // Dynamic variant — keep original attribute
+      newAttributes.push(variantAttr);
+    }
+
+    // Pass through other props (skip variant and shape since we handled them)
+    for (const attr of opening.attributes) {
+      if (attr.type === 'JSXSpreadAttribute') {
+        newAttributes.push(attr);
+        continue;
+      }
+      if (attr.name.name === 'variant') continue;
+      if (attr.name.name === 'shape') continue;
+      newAttributes.push(attr);
+    }
+
+    // Replace with self-closing XDSStatusDot
+    const newElement = j.jsxElement(
+      j.jsxOpeningElement(
+        j.jsxIdentifier('XDSStatusDot'),
+        newAttributes,
+        true,
+      ),
+      null,
+      [],
+    );
+
+    j(path).replaceWith(newElement);
+    hasChanges = true;
+  });
+
+  if (!hasChanges) return undefined;
+
+  // Handle imports
+  const badgeImports = root.find(j.ImportDeclaration).filter((path) => {
+    const source = path.node.source.value;
+    return (
+      typeof source === 'string' &&
+      (source === '@xds/core' ||
+        source === '@xds/core/Badge' ||
+        source.endsWith('/Badge'))
+    );
+  });
+
+  // Check if any XDSBadge usages remain
+  const remainingBadgeUsages = root
+    .find(j.JSXIdentifier, {name: 'XDSBadge'})
+    .size();
+
+  // Add XDSStatusDot import if not already present
+  const hasStatusDotImport =
+    root
+      .find(j.ImportSpecifier, {
+        imported: {name: 'XDSStatusDot'},
+      })
+      .size() > 0 ||
+    root
+      .find(j.ImportDefaultSpecifier)
+      .filter(
+        (path) => path.node.local.name === 'XDSStatusDot',
+      )
+      .size() > 0;
+
+  if (!hasStatusDotImport) {
+    const newImport = j.importDeclaration(
+      [j.importSpecifier(j.identifier('XDSStatusDot'))],
+      j.stringLiteral('@xds/core/StatusDot'),
+    );
+
+    // Insert after the last existing xds import, or at the top
+    const xdsImports = root.find(j.ImportDeclaration).filter((path) => {
+      const source = path.node.source.value;
+      return typeof source === 'string' && source.includes('@xds/core');
+    });
+
+    if (xdsImports.size() > 0) {
+      xdsImports.at(-1).insertAfter(newImport);
+    } else {
+      const allImports = root.find(j.ImportDeclaration);
+      if (allImports.size() > 0) {
+        allImports.at(-1).insertAfter(newImport);
+      } else {
+        root.get().node.program.body.unshift(newImport);
+      }
+    }
+  }
+
+  // Remove XDSBadge import if no remaining usages
+  if (remainingBadgeUsages === 0) {
+    badgeImports.forEach((path) => {
+      const specifiers = path.node.specifiers;
+      if (!specifiers) return;
+
+      const filtered = specifiers.filter((s) => {
+        if (
+          s.type === 'ImportSpecifier' &&
+          s.imported.type === 'Identifier' &&
+          s.imported.name === 'XDSBadge'
+        ) {
+          return false;
+        }
+        if (
+          s.type === 'ImportDefaultSpecifier' &&
+          s.local.name === 'XDSBadge'
+        ) {
+          return false;
+        }
+        return true;
+      });
+
+      if (filtered.length === 0) {
+        j(path).remove();
+      } else if (filtered.length !== specifiers.length) {
+        path.node.specifiers = filtered;
+      }
+    });
+  }
+
+  return root.toSource();
+}

package/src/codemods/transforms/v0.0.2/migrate-gap-to-numeric.mjs

@@ -0,0 +1,121 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Migrate gap/rowGap/columnGap from string tokens to numeric values
+ *
+ * Transforms:
+ * - gap="space0" → gap={0}
+ * - gap="space0.5" → gap={0.5}
+ * - gap="space1" → gap={1}
+ * - gap="space1.5" → gap={1.5}
+ * - gap="space2" → gap={2}
+ * - ... through gap="space10" → gap={10}
+ *
+ * Also handles rowGap and columnGap on XDSGrid.
+ */
+
+export const meta = {
+  title: 'Migrate gap to numeric scale',
+  description:
+    'Migrates gap, rowGap, and columnGap props from string tokens (e.g. "space4") to numeric values (e.g. 4).',
+};
+
+/**
+ * Mapping from string token to numeric value.
+ */
+const TOKEN_TO_NUMBER = {
+  space0: 0,
+  'space0.5': 0.5,
+  space1: 1,
+  'space1.5': 1.5,
+  space2: 2,
+  space3: 3,
+  space4: 4,
+  space5: 5,
+  space6: 6,
+  space7: 7,
+  space8: 8,
+  space9: 9,
+  space10: 10,
+  space11: 11,
+  space12: 12,
+};
+
+const GAP_PROPS = ['gap', 'rowGap', 'columnGap'];
+
+/**
+ * Only XDS layout components accept the numeric gap scale. We must not
+ * rewrite gap props on user-defined components or HTML elements that happen
+ * to share the prop name — doing so would silently corrupt their code when
+ * `astryx upgrade` runs.
+ */
+const XDS_LAYOUT_ELEMENTS = new Set([
+  'XDSStack',
+  'XDSHStack',
+  'XDSVStack',
+  'XDSGrid',
+  'XDSGridSpan',
+  'XDSStackItem',
+]);
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  root.find(j.JSXOpeningElement).forEach((elementPath) => {
+    const nameNode = elementPath.node.name;
+    // Only handle simple identifier element names like <XDSStack>. Skip member
+    // expressions (e.g. <Foo.Bar>) and namespaced names — they're never XDS.
+    if (!nameNode || nameNode.type !== 'JSXIdentifier') {
+      return;
+    }
+    if (!XDS_LAYOUT_ELEMENTS.has(nameNode.name)) {
+      return;
+    }
+
+    for (const attr of elementPath.node.attributes ?? []) {
+      if (attr.type !== 'JSXAttribute' || !attr.name) {
+        continue;
+      }
+      const attrName = attr.name.name;
+      if (!GAP_PROPS.includes(attrName)) {
+        continue;
+      }
+
+      const value = attr.value;
+
+      // Handle gap="space4" — JSX string attributes are Literal nodes
+      if (
+        value &&
+        (value.type === 'Literal' || value.type === 'StringLiteral')
+      ) {
+        const numericValue = TOKEN_TO_NUMBER[value.value];
+        if (numericValue !== undefined) {
+          attr.value = j.jsxExpressionContainer(j.literal(numericValue));
+          hasChanges = true;
+        }
+        continue;
+      }
+
+      // Handle gap={"space4"} (JSXExpressionContainer wrapping a string)
+      if (
+        value &&
+        value.type === 'JSXExpressionContainer' &&
+        (value.expression.type === 'Literal' ||
+          value.expression.type === 'StringLiteral')
+      ) {
+        const strValue = value.expression.value;
+        if (typeof strValue === 'string') {
+          const numericValue = TOKEN_TO_NUMBER[strValue];
+          if (numericValue !== undefined) {
+            value.expression = j.literal(numericValue);
+            hasChanges = true;
+          }
+        }
+      }
+    }
+  });
+
+  return hasChanges ? root.toSource() : undefined;
+}

package/src/codemods/transforms/v0.0.2/migrate-isFullBleed-to-padding.mjs

@@ -0,0 +1,106 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Migrate isFullBleed to padding={0}
+ *
+ * Transforms:
+ * - isFullBleed → padding={0}
+ * - isFullBleed={true} → padding={0}
+ * - isFullBleed={false} → (removed)
+ *
+ * Target components: XDSCard, XDSSection, XDSLayout, XDSLayoutContent,
+ * XDSLayoutHeader, XDSLayoutFooter, XDSLayoutPanel.
+ * Does NOT target XDSDivider (its isFullBleed uses negative margins).
+ */
+
+export const meta = {
+  title: 'Migrate isFullBleed to padding={0}',
+  description:
+    'Replaces `isFullBleed` with `padding={0}` on layout components. Does not touch XDSDivider.',
+};
+
+const TARGET_COMPONENTS = [
+  'XDSCard',
+  'XDSSection',
+  'XDSLayout',
+  'XDSLayoutContent',
+  'XDSLayoutHeader',
+  'XDSLayoutFooter',
+  'XDSLayoutPanel',
+];
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  TARGET_COMPONENTS.forEach((componentName) => {
+    root
+      .find(j.JSXOpeningElement, {
+        name: {name: componentName},
+      })
+      .forEach((path) => {
+        const attrs = path.node.attributes;
+        const isFullBleedIndex = attrs.findIndex(
+          (attr) =>
+            attr.type === 'JSXAttribute' && attr.name.name === 'isFullBleed',
+        );
+
+        if (isFullBleedIndex === -1) {
+          return;
+        }
+
+        const attr = attrs[isFullBleedIndex];
+        const value = attr.value;
+
+        // isFullBleed (no value — boolean shorthand, means true)
+        if (value === null) {
+          attrs.splice(isFullBleedIndex, 1);
+          const hasPadding = attrs.some(
+            (a) => a.type === 'JSXAttribute' && a.name.name === 'padding',
+          );
+          if (!hasPadding) {
+            attrs.push(
+              j.jsxAttribute(
+                j.jsxIdentifier('padding'),
+                j.jsxExpressionContainer(j.literal(0)),
+              ),
+            );
+          }
+          hasChanges = true;
+          return;
+        }
+
+        // isFullBleed={true} or isFullBleed={false}
+        if (
+          value &&
+          value.type === 'JSXExpressionContainer' &&
+          (value.expression.type === 'Literal' ||
+            value.expression.type === 'BooleanLiteral')
+        ) {
+          if (value.expression.value === true) {
+            // isFullBleed={true} → padding={0}
+            attrs.splice(isFullBleedIndex, 1);
+            const hasPadding = attrs.some(
+              (a) => a.type === 'JSXAttribute' && a.name.name === 'padding',
+            );
+            if (!hasPadding) {
+              attrs.push(
+                j.jsxAttribute(
+                  j.jsxIdentifier('padding'),
+                  j.jsxExpressionContainer(j.literal(0)),
+                ),
+              );
+            }
+            hasChanges = true;
+          } else if (value.expression.value === false) {
+            // isFullBleed={false} → remove entirely
+            attrs.splice(isFullBleedIndex, 1);
+            hasChanges = true;
+          }
+        }
+      });
+  });
+
+  return hasChanges ? root.toSource() : undefined;
+}