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

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

@@ -0,0 +1,37 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file v0.0.13 transform manifest
+ *
+ * Lists all codemods for the v0.0.13 release in the order they should run.
+ */
+
+import toolbarDensityToSize, {
+  meta as toolbarDensityToSizeMeta,
+} from './toolbar-density-to-size.mjs';
+
+import iconNameDeprecations, {
+  meta as iconNameDeprecationsMeta,
+} from './icon-name-deprecations.mjs';
+
+import renameAttachmentsToDrawer, {
+  meta as renameAttachmentsToDrawerMeta,
+} from './rename-attachments-to-drawer.mjs';
+
+export default [
+  {
+    name: 'toolbar-density-to-size',
+    transform: toolbarDensityToSize,
+    meta: toolbarDensityToSizeMeta,
+  },
+  {
+    name: 'icon-name-deprecations',
+    transform: iconNameDeprecations,
+    meta: iconNameDeprecationsMeta,
+  },
+  {
+    name: 'rename-attachments-to-drawer',
+    transform: renameAttachmentsToDrawer,
+    meta: renameAttachmentsToDrawerMeta,
+  },
+];

package/src/codemods/transforms/v0.0.13/rename-attachments-to-drawer.mjs

@@ -0,0 +1,166 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Rename XDSChatComposerAttachments → XDSChatComposerDrawer
+ *
+ * Transforms:
+ * - Import: XDSChatComposerAttachments → XDSChatComposerDrawer
+ * - Import: XDSChatComposerAttachmentsProps → XDSChatComposerDrawerProps
+ * - JSX: <XDSChatComposerAttachments → <XDSChatComposerDrawer
+ * - JSX: </XDSChatComposerAttachments> → </XDSChatComposerDrawer>
+ * - Prop: attachments={...} → drawer={...} on XDSChatComposer
+ * - Type refs: XDSChatComposerAttachmentsProps → XDSChatComposerDrawerProps
+ * - CSS class: xds-chat-composer-attachments → xds-chat-composer-drawer (in strings)
+ */
+
+export const meta = {
+  title: 'Rename XDSChatComposerAttachments to XDSChatComposerDrawer',
+  description:
+    'Renames `XDSChatComposerAttachments` component and type to `XDSChatComposerDrawer`, ' +
+    'renames the `attachments` prop to `drawer` on `XDSChatComposer`, and updates ' +
+    'CSS class references from `xds-chat-composer-attachments` to `xds-chat-composer-drawer`.',
+  pr: '#1714',
+};
+
+const IMPORT_RENAMES = {
+  XDSChatComposerAttachments: 'XDSChatComposerDrawer',
+  XDSChatComposerAttachmentsProps: 'XDSChatComposerDrawerProps',
+};
+
+const CSS_CLASS_RENAMES = {
+  'xds-chat-composer-attachments': 'xds-chat-composer-drawer',
+};
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  // Track local names (handles aliased imports)
+  const localToComponent = new Map();
+
+  // --- 1. Rename imports ---
+  root.find(j.ImportSpecifier).forEach((path) => {
+    const importedName = path.node.imported.name;
+    const newName = IMPORT_RENAMES[importedName];
+    if (!newName) return;
+
+    const localName = path.node.local.name;
+
+    if (localName === importedName) {
+      // import { XDSChatComposerAttachments } → import { XDSChatComposerDrawer }
+      path.node.imported = j.identifier(newName);
+      path.node.local = j.identifier(newName);
+      localToComponent.set(newName, newName);
+    } else {
+      // import { XDSChatComposerAttachments as Foo } → import { XDSChatComposerDrawer as Foo }
+      path.node.imported = j.identifier(newName);
+      localToComponent.set(localName, newName);
+    }
+    hasChanges = true;
+  });
+
+  // --- 2. Rename JSX elements (opening + closing tags) ---
+  for (const [oldName, newName] of Object.entries(IMPORT_RENAMES)) {
+    if (oldName.endsWith('Props')) continue; // Skip type-only renames for JSX
+
+    root
+      .find(j.JSXIdentifier, {name: oldName})
+      .forEach((path) => {
+        const parent = path.parent.node;
+        if (
+          parent.type === 'JSXOpeningElement' ||
+          parent.type === 'JSXClosingElement'
+        ) {
+          path.node.name = newName;
+          hasChanges = true;
+        }
+      });
+  }
+
+  // --- 3. Rename `attachments` prop → `drawer` on XDSChatComposer ---
+  root.find(j.JSXOpeningElement).forEach((path) => {
+    const name = path.node.name;
+    const componentName = name.type === 'JSXIdentifier' ? name.name : null;
+    if (componentName !== 'XDSChatComposer') return;
+
+    const attrs = path.node.attributes;
+    for (const attr of attrs) {
+      if (
+        attr.type === 'JSXAttribute' &&
+        attr.name?.name === 'attachments'
+      ) {
+        attr.name = j.jsxIdentifier('drawer');
+        hasChanges = true;
+      }
+    }
+  });
+
+  // --- 4. Rename type references ---
+  root.find(j.TSTypeReference).forEach((path) => {
+    const typeName = path.node.typeName;
+    if (typeName.type === 'Identifier') {
+      const newName = IMPORT_RENAMES[typeName.name];
+      if (newName) {
+        typeName.name = newName;
+        hasChanges = true;
+      }
+    }
+  });
+
+  // Also handle plain Identifier references (e.g. typeof, React.ComponentProps<typeof X>)
+  root.find(j.Identifier, {name: 'XDSChatComposerAttachments'}).forEach((path) => {
+    const parent = path.parent.node;
+    if (
+      parent.type === 'ImportSpecifier' ||
+      parent.type === 'JSXOpeningElement' ||
+      parent.type === 'JSXClosingElement'
+    ) {
+      return;
+    }
+    path.node.name = 'XDSChatComposerDrawer';
+    hasChanges = true;
+  });
+
+  root.find(j.Identifier, {name: 'XDSChatComposerAttachmentsProps'}).forEach((path) => {
+    const parent = path.parent.node;
+    if (parent.type === 'ImportSpecifier') return;
+    path.node.name = 'XDSChatComposerDrawerProps';
+    hasChanges = true;
+  });
+
+  // --- 5. Rename CSS class strings ---
+  root.find(j.StringLiteral).forEach((path) => {
+    for (const [oldClass, newClass] of Object.entries(CSS_CLASS_RENAMES)) {
+      if (path.node.value.includes(oldClass)) {
+        path.node.value = path.node.value.replace(
+          new RegExp(oldClass.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'),
+          newClass,
+        );
+        hasChanges = true;
+      }
+    }
+  });
+
+  // Also check template literals
+  root.find(j.TemplateLiteral).forEach((path) => {
+    for (const quasi of path.node.quasis) {
+      for (const [oldClass, newClass] of Object.entries(CSS_CLASS_RENAMES)) {
+        if (quasi.value.raw.includes(oldClass)) {
+          quasi.value.raw = quasi.value.raw.replace(
+            new RegExp(oldClass.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'),
+            newClass,
+          );
+          quasi.value.cooked = quasi.value.cooked.replace(
+            new RegExp(oldClass.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'),
+            newClass,
+          );
+          hasChanges = true;
+        }
+      }
+    }
+  });
+
+  if (!hasChanges) return undefined;
+  return root.toSource({quote: 'single'});
+}

package/src/codemods/transforms/v0.0.13/toolbar-density-to-size.mjs

@@ -0,0 +1,159 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Migrate XDSToolbar density prop to size prop
+ *
+ * In the next release, XDSToolbar replaces `density` with `size`:
+ *   - `density="compact"` → `size="sm"`
+ *   - `density="default"` → removed (md is the default)
+ *   - No density prop → no change needed
+ *
+ * The new `size` prop also cascades to child components (Button, TextInput,
+ * TabList, Selector, etc.) via XDSSizeContext, so explicit `size` props on
+ * children inside a toolbar may become redundant. That cleanup is left to
+ * developers since it's a design decision, not a correctness issue.
+ */
+
+export const meta = {
+  title: 'Migrate XDSToolbar density to size',
+  description:
+    'Replaces `density="compact"` with `size="sm"` and removes `density="default"` ' +
+    '(md is the new default) on XDSToolbar components. Also handles Storybook ' +
+    'args/argTypes objects that reference the density prop.',
+  pr: '#1448',
+};
+
+/** Map from old density values to new size values (null = remove prop). */
+const DENSITY_TO_SIZE = {
+  compact: 'sm',
+  default: null, // md is the default, no prop needed
+};
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  root.find(j.JSXOpeningElement).forEach((path) => {
+    const name = path.node.name;
+    const componentName =
+      name.type === 'JSXIdentifier' ? name.name : null;
+    if (componentName !== 'XDSToolbar') return;
+
+    const attrs = path.node.attributes;
+    const densityIdx = attrs.findIndex(
+      (a) => a.type === 'JSXAttribute' && a.name?.name === 'density',
+    );
+    if (densityIdx === -1) return;
+
+    const densityAttr = attrs[densityIdx];
+    const value = densityAttr.value;
+
+    // density="compact" or density="default" (string literal)
+    if (value && (value.type === 'StringLiteral' || value.type === 'Literal')) {
+      const densityValue = value.value;
+      const sizeValue = DENSITY_TO_SIZE[densityValue];
+
+      if (sizeValue === undefined) {
+        // Unknown density value — leave it for manual review
+        return;
+      }
+
+      if (sizeValue === null) {
+        // density="default" → remove the prop entirely
+        attrs.splice(densityIdx, 1);
+      } else {
+        // density="compact" → size="sm"
+        attrs[densityIdx] = j.jsxAttribute(
+          j.jsxIdentifier('size'),
+          j.stringLiteral(sizeValue),
+        );
+      }
+      hasChanges = true;
+      return;
+    }
+
+    // density={expression} — rename prop to size, wrap in ternary
+    // density={someVar} → size={someVar === 'compact' ? 'sm' : 'md'}
+    if (
+      value &&
+      value.type === 'JSXExpressionContainer' &&
+      value.expression.type !== 'JSXEmptyExpression'
+    ) {
+      const expr = value.expression;
+      const newExpr = j.conditionalExpression(
+        j.binaryExpression('===', expr, j.stringLiteral('compact')),
+        j.stringLiteral('sm'),
+        j.stringLiteral('md'),
+      );
+      attrs[densityIdx] = j.jsxAttribute(
+        j.jsxIdentifier('size'),
+        j.jsxExpressionContainer(newExpr),
+      );
+      hasChanges = true;
+    }
+  });
+
+  // ---- 2. Object properties: Storybook args/argTypes ----
+  // Handles patterns like:
+  //   args: { density: 'compact' }  →  args: { size: 'sm' }
+  //   argTypes: { density: {...} }  →  argTypes: { size: {...} }
+  // Only transforms when the file imports XDSToolbar (scoping check).
+  const importsToolbar = root.find(j.ImportSpecifier, {
+    imported: {name: 'XDSToolbar'},
+  }).length > 0;
+
+  if (importsToolbar) {
+    // jscodeshift uses Property (default parser) or ObjectProperty (babel/tsx parser)
+    const PropertyType = j.ObjectProperty ?? j.Property;
+    root.find(PropertyType, {key: {name: 'density'}}).forEach((path) => {
+      const value = path.node.value;
+
+      // args: { density: 'compact' } → args: { size: 'sm' }
+      if (value.type === 'StringLiteral' || value.type === 'Literal') {
+        const densityValue = value.value;
+        const sizeValue = DENSITY_TO_SIZE[densityValue];
+        if (sizeValue === undefined) return;
+
+        if (sizeValue === null) {
+          // density: 'default' → remove property
+          const parent = path.parent.node;
+          if (parent.type === 'ObjectExpression') {
+            const idx = parent.properties.indexOf(path.node);
+            if (idx !== -1) {
+              parent.properties.splice(idx, 1);
+              hasChanges = true;
+            }
+          }
+        } else {
+          // density: 'compact' → size: 'sm'
+          path.node.key = j.identifier('size');
+          path.node.value = j.stringLiteral(sizeValue);
+          hasChanges = true;
+        }
+        return;
+      }
+
+      // argTypes: { density: {control: 'radio', options: [...]} }
+      // → argTypes: { size: {control: 'radio', options: ['sm', 'md', 'lg']} }
+      if (value.type === 'ObjectExpression') {
+        path.node.key = j.identifier('size');
+        // Update options array if present
+        const optionsProp = value.properties.find(
+          (p) => p.key?.name === 'options',
+        );
+        if (optionsProp && optionsProp.value.type === 'ArrayExpression') {
+          optionsProp.value = j.arrayExpression([
+            j.stringLiteral('sm'),
+            j.stringLiteral('md'),
+            j.stringLiteral('lg'),
+          ]);
+        }
+        hasChanges = true;
+      }
+    });
+  }
+
+  if (!hasChanges) return undefined;
+  return root.toSource({quote: 'single'});
+}

package/src/codemods/transforms/v0.0.14/__tests__/rename-action-props.test.mjs

@@ -0,0 +1,129 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+
+async function applyTransform(source) {
+  const {default: transform} = await import(
+    '../rename-action-props.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;
+}
+
+describe('rename-action-props', () => {
+  it('renames onChangeAction to changeAction on JSX', async () => {
+    const input = `<XDSSelector value="a" onChange={fn} onChangeAction={asyncFn} />`;
+    const output = await applyTransform(input);
+    expect(output).toContain('changeAction={asyncFn}');
+    expect(output).not.toContain('onChangeAction');
+  });
+
+  it('renames onClickAction to clickAction on JSX', async () => {
+    const input = `<XDSButton label="Go" onClickAction={asyncFn} />`;
+    const output = await applyTransform(input);
+    expect(output).toContain('clickAction={asyncFn}');
+    expect(output).not.toContain('onClickAction');
+  });
+
+  it('renames onPressedChangeAction to pressedChangeAction', async () => {
+    const input = `<XDSToggleButton onPressedChangeAction={asyncFn} />`;
+    const output = await applyTransform(input);
+    expect(output).toContain('pressedChangeAction={asyncFn}');
+    expect(output).not.toContain('onPressedChangeAction');
+  });
+
+  it('renames onScrollToTopAction to scrollToTopAction', async () => {
+    const input = `<XDSChatMessageList onScrollToTopAction={loadMore} />`;
+    const output = await applyTransform(input);
+    expect(output).toContain('scrollToTopAction={loadMore}');
+    expect(output).not.toContain('onScrollToTopAction');
+  });
+
+  it('handles multiple action props on one element', async () => {
+    const input = `<XDSTextInput onChange={fn} onChangeAction={asyncFn} />`;
+    const output = await applyTransform(input);
+    expect(output).toContain('changeAction={asyncFn}');
+    expect(output).toContain('onChange={fn}');
+    expect(output).not.toContain('onChangeAction');
+  });
+
+  it('renames object property keys', async () => {
+    const input = `createConfig({ onChangeAction: async () => {} });`;
+    const output = await applyTransform(input);
+    expect(output).toContain('changeAction:');
+    expect(output).not.toContain('onChangeAction:');
+  });
+
+  it('renames destructured props', async () => {
+    const input = `function MyInput({ onChangeAction, onChange }) { return null; }`;
+    const output = await applyTransform(input);
+    expect(output).toContain('changeAction');
+    expect(output).not.toContain('onChangeAction');
+  });
+
+  it('renames aliased destructured props', async () => {
+    const input = `function MyInput({ onChangeAction: handler }) { return null; }`;
+    const output = await applyTransform(input);
+    expect(output).toContain('changeAction: handler');
+    expect(output).not.toContain('onChangeAction');
+  });
+
+  it('renames TypeScript interface properties', async () => {
+    const input = `interface Props { onChangeAction?: (v: string) => Promise<void>; }`;
+    const output = await applyTransform(input);
+    expect(output).toContain('changeAction?:');
+    expect(output).not.toContain('onChangeAction');
+  });
+
+  it('returns undefined when no changes needed', async () => {
+    const {default: transform} = await import(
+      '../rename-action-props.mjs'
+    );
+    const jscodeshift = (await import('jscodeshift')).default;
+    const j = jscodeshift.withParser('tsx');
+    const api = {jscodeshift: j, stats: () => {}, report: () => {}};
+    const source = `<XDSSelector value="a" changeAction={fn} />`;
+    const result = transform({source, path: 'test.tsx'}, api);
+    expect(result).toBeUndefined();
+  });
+
+  it('does not rename onChange or onClick (non-action callbacks)', async () => {
+    const input = `<XDSSelector value="a" onChange={fn} onClick={fn2} />`;
+    const output = await applyTransform(input);
+    expect(output).toContain('onChange={fn}');
+    expect(output).toContain('onClick={fn2}');
+  });
+
+  it('does not rename onAction (not a transition-wrapped prop)', async () => {
+    const input = `<XDSAlertDialog title="Delete?" onAction={asyncFn} />`;
+    const output = await applyTransform(input);
+    expect(output).toContain('onAction={asyncFn}');
+  });
+
+  it('handles a full component file', async () => {
+    const input = `import { XDSSelector } from '@xds/core/Selector';
+
+interface MyProps {
+  onChangeAction?: (value: string) => Promise<void>;
+}
+
+function MySelector({ onChangeAction }: MyProps) {
+  return (
+    <XDSSelector
+      value="a"
+      onChange={fn}
+      onChangeAction={onChangeAction}
+    />
+  );
+}`;
+    const output = await applyTransform(input);
+    expect(output).toContain('changeAction');
+    expect(output).not.toContain('onChangeAction');
+    // onChange should be untouched
+    expect(output).toContain('onChange={fn}');
+  });
+});