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

package/src/codemods/transforms/v0.0.15/rename-date-picker-to-input.mjs

@@ -0,0 +1,114 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Rename DateTimePicker → DateTimeInput, DateRangePicker → DateRangeInput
+ *
+ * Renames components, types, and import paths for consistency with other
+ * input components (DateInput, TextInput, NumberInput).
+ *
+ * Handles:
+ * 1. Import source paths: '@xds/core/DateTimePicker' → '@xds/core/DateTimeInput'
+ * 2. Named imports/exports: XDSDateTimePicker → XDSDateTimeInput, etc.
+ * 3. JSX element names: <XDSDateTimePicker /> → <XDSDateTimeInput />
+ * 4. Type references: XDSDateTimePickerProps → XDSDateTimeInputProps, etc.
+ * 5. displayName strings
+ */
+
+export const meta = {
+  title: 'Rename DateTimePicker/DateRangePicker → DateTimeInput/DateRangeInput',
+  description:
+    'Renames `XDSDateTimePicker` to `XDSDateTimeInput` and `XDSDateRangePicker` to `XDSDateRangeInput`, ' +
+    'including props types, import paths, and JSX usage.',
+};
+
+const IMPORT_PATH_RENAMES = new Map([
+  ['@xds/core/DateTimePicker', '@xds/core/DateTimeInput'],
+  ['@xds/core/DateRangePicker', '@xds/core/DateRangeInput'],
+]);
+
+const IDENTIFIER_RENAMES = new Map([
+  // Components
+  ['XDSDateTimePicker', 'XDSDateTimeInput'],
+  ['XDSDateRangePicker', 'XDSDateRangeInput'],
+  // Props types
+  ['XDSDateTimePickerProps', 'XDSDateTimeInputProps'],
+  ['XDSDateRangePickerProps', 'XDSDateRangeInputProps'],
+  // Size types
+  ['XDSDateTimePickerSize', 'XDSDateTimeInputSize'],
+  ['XDSDateRangePickerSize', 'XDSDateRangeInputSize'],
+  // Hour format type
+  ['XDSDateTimePickerHourFormat', 'XDSDateTimeInputHourFormat'],
+  // Status types
+  ['XDSDateTimePickerStatus', 'XDSDateTimeInputStatus'],
+  ['XDSDateTimePickerStatusType', 'XDSDateTimeInputStatusType'],
+  ['XDSDateRangePickerStatus', 'XDSDateRangeInputStatus'],
+  ['XDSDateRangePickerStatusType', 'XDSDateRangeInputStatusType'],
+]);
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  // 1. Rename import/export source paths
+  root.find(j.ImportDeclaration).forEach((path) => {
+    const source = path.node.source.value;
+    const renamed = IMPORT_PATH_RENAMES.get(source);
+    if (renamed) {
+      path.node.source.value = renamed;
+      hasChanges = true;
+    }
+  });
+
+  root.find(j.ExportNamedDeclaration).forEach((path) => {
+    if (path.node.source) {
+      const source = path.node.source.value;
+      const renamed = IMPORT_PATH_RENAMES.get(source);
+      if (renamed) {
+        path.node.source.value = renamed;
+        hasChanges = true;
+      }
+    }
+  });
+
+  // 2. Rename all identifiers (covers imports, type refs, variable names)
+  root.find(j.Identifier).forEach((path) => {
+    const renamed = IDENTIFIER_RENAMES.get(path.node.name);
+    if (renamed) {
+      path.node.name = renamed;
+      hasChanges = true;
+    }
+  });
+
+  // 3. Rename JSX element names
+  root.find(j.JSXIdentifier).forEach((path) => {
+    const renamed = IDENTIFIER_RENAMES.get(path.node.name);
+    if (renamed) {
+      path.node.name = renamed;
+      hasChanges = true;
+    }
+  });
+
+  // 4. Rename string literals (covers displayName assignments)
+  root.find(j.StringLiteral).forEach((path) => {
+    const renamed = IDENTIFIER_RENAMES.get(path.node.value);
+    if (renamed) {
+      path.node.value = renamed;
+      hasChanges = true;
+    }
+  });
+
+  // Also handle Literal nodes (parser-dependent)
+  root.find(j.Literal).forEach((path) => {
+    if (typeof path.node.value === 'string') {
+      const renamed = IDENTIFIER_RENAMES.get(path.node.value);
+      if (renamed) {
+        path.node.value = renamed;
+        if (path.node.raw) path.node.raw = undefined;
+        hasChanges = true;
+      }
+    }
+  });
+
+  return hasChanges ? root.toSource() : undefined;
+}

package/src/codemods/transforms/v0.0.15/rename-imperative-ref-to-handleRef.mjs

@@ -0,0 +1,67 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Rename imperative ref props to handleRef
+ *
+ * XDS components reserve `ref` for DOM elements. Components with imperative
+ * handles now expose those handles through `handleRef`.
+ *
+ * Handles:
+ * - JSX prop: `ref` → `handleRef` on XDSCalendar, XDSChatComposerInput,
+ *   XDSPowerSearch, XDSTokenizer, and XDSChartStreamGL
+ * - JSX prop: `sideNavRef` → `handleRef` on XDSSideNavCollapseButton
+ */
+
+export const meta = {
+  title: 'Rename imperative ref props to handleRef',
+  description:
+    'Renames imperative `ref` usages to `handleRef` on components whose ' +
+    '`ref` prop now points at the root DOM element. Also renames ' +
+    '`XDSSideNavCollapseButton` `sideNavRef` to `handleRef`.',
+  issue: '#2359',
+};
+
+const IMPERATIVE_REF_COMPONENTS = new Set([
+  'XDSCalendar',
+  'XDSChatComposerInput',
+  'XDSPowerSearch',
+  'XDSTokenizer',
+  'XDSChartStreamGL',
+]);
+
+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 == null) return;
+
+    for (const attr of path.node.attributes) {
+      if (attr.type !== 'JSXAttribute') continue;
+
+      if (
+        IMPERATIVE_REF_COMPONENTS.has(componentName) &&
+        attr.name?.type === 'JSXIdentifier' &&
+        attr.name.name === 'ref'
+      ) {
+        attr.name.name = 'handleRef';
+        hasChanges = true;
+      }
+
+      if (
+        componentName === 'XDSSideNavCollapseButton' &&
+        attr.name?.type === 'JSXIdentifier' &&
+        attr.name.name === 'sideNavRef'
+      ) {
+        attr.name.name = 'handleRef';
+        hasChanges = true;
+      }
+    }
+  });
+
+  if (!hasChanges) return undefined;
+  return root.toSource({quote: 'single'});
+}

package/src/codemods/transforms/v0.0.15/rename-isStreaming-to-isStopShown.mjs

@@ -0,0 +1,51 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Rename isStreaming → isStopShown on XDSChatComposer and XDSChatSendButton
+ *
+ * The `isStreaming` prop on chat components was too narrow — it implied only
+ * text streaming, but it actually controls whether the stop button is shown.
+ * Renamed to `isStopShown` for clarity.
+ *
+ * Handles:
+ * - JSX prop: `isStreaming` → `isStopShown` on XDSChatComposer and XDSChatSendButton
+ *
+ * Does NOT rename:
+ * - `isStreaming` on other components (XDSMarkdown, XDSChatReasoning)
+ * - Local variables, object properties, or state named `isStreaming`
+ */
+
+export const meta = {
+  title: 'Rename ChatComposer/ChatSendButton isStreaming to isStopShown',
+  description:
+    'Renames the `isStreaming` prop to `isStopShown` on `XDSChatComposer` and ' +
+    '`XDSChatSendButton`. The prop controls whether the stop button is shown — ' +
+    'the new name describes the affordance rather than implying a streaming state.',
+  issue: '#2328',
+};
+
+const TARGET_COMPONENTS = new Set(['XDSChatComposer', 'XDSChatSendButton']);
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  // Rename JSX prop on target components only
+  root.find(j.JSXOpeningElement).forEach((path) => {
+    const name = path.node.name;
+    const componentName = name.type === 'JSXIdentifier' ? name.name : null;
+    if (!TARGET_COMPONENTS.has(componentName)) return;
+
+    const attrs = path.node.attributes;
+    for (const attr of attrs) {
+      if (attr.type === 'JSXAttribute' && attr.name?.name === 'isStreaming') {
+        attr.name.name = 'isStopShown';
+        hasChanges = true;
+      }
+    }
+  });
+
+  if (!hasChanges) return undefined;
+  return root.toSource({quote: 'single'});
+}

package/src/codemods/transforms/v0.0.15/rename-stack-element-to-as.mjs

@@ -0,0 +1,41 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Rename `element` prop to `as` on Stack components
+ */
+
+export const meta = {
+  title: 'Rename element → as on Stack components',
+  description:
+    'Renames the `element` prop to `as` on XDSStack, XDSHStack, XDSVStack, and XDSStackItem for consistency with other polymorphic components.',
+};
+
+const TARGET_COMPONENTS = new Set([
+  'XDSStack',
+  'XDSHStack',
+  'XDSVStack',
+  'XDSStackItem',
+]);
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  root
+    .find(j.JSXOpeningElement)
+    .filter((path) => {
+      const name = path.node.name;
+      return name.type === 'JSXIdentifier' && TARGET_COMPONENTS.has(name.name);
+    })
+    .forEach((path) => {
+      path.node.attributes.forEach((attr) => {
+        if (attr.type === 'JSXAttribute' && attr.name.name === 'element') {
+          attr.name.name = 'as';
+          hasChanges = true;
+        }
+      });
+    });
+
+  return hasChanges ? root.toSource({quote: 'single'}) : undefined;
+}

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

@@ -0,0 +1,137 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+
+async function applyTransform(source) {
+  const {default: transform} = await import(
+    '../migrate-badge-dot-to-statusdot.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;
+}
+
+function getRawResult(source) {
+  return import('../migrate-badge-dot-to-statusdot.mjs').then(
+    async ({default: transform}) => {
+      const jscodeshift = (await import('jscodeshift')).default;
+      const api = {jscodeshift, stats: () => {}, report: () => {}};
+      return transform({source, path: 'test.tsx'}, api);
+    },
+  );
+}
+
+describe('migrate-badge-dot-to-statusdot', () => {
+  it('transforms shape="dot" badge to StatusDot', async () => {
+    const input = `import {XDSBadge} from '@xds/core/Badge';
+<XDSBadge variant="warning" shape="dot" label="Away" />`;
+    const output = await applyTransform(input);
+    expect(output).toContain('XDSStatusDot');
+    expect(output).toContain('variant="warning"');
+    expect(output).toContain('label="Away"');
+    expect(output).not.toContain('shape');
+    expect(output).not.toContain('XDSBadge');
+  });
+
+  it('maps success to positive and error to negative', async () => {
+    const input = `import {XDSBadge} from '@xds/core/Badge';
+<XDSBadge variant="success" shape="dot" label="Online" />`;
+    const output = await applyTransform(input);
+    expect(output).toContain('variant="positive"');
+
+    const input2 = `import {XDSBadge} from '@xds/core/Badge';
+<XDSBadge variant="error" shape="dot" label="Offline" />`;
+    const output2 = await applyTransform(input2);
+    expect(output2).toContain('variant="negative"');
+  });
+
+  it('does NOT transform badge without shape="dot"', async () => {
+    const input = `import {XDSBadge} from '@xds/core/Badge';
+<XDSBadge variant="error" label="3" />`;
+    const output = await applyTransform(input);
+    expect(output).toContain('XDSBadge');
+    expect(output).not.toContain('XDSStatusDot');
+  });
+
+  it('does NOT transform badge with icon prop even if shape="dot"', async () => {
+    const input = `import {XDSBadge} from '@xds/core/Badge';
+<XDSBadge variant="success" shape="dot" label="Active" icon={checkIcon} />`;
+    const output = await applyTransform(input);
+    expect(output).toContain('XDSBadge');
+    expect(output).not.toContain('XDSStatusDot');
+  });
+
+  it('adds StatusDot import', async () => {
+    const input = `import {XDSBadge} from '@xds/core/Badge';
+<XDSBadge variant="neutral" shape="dot" label="Idle" />`;
+    const output = await applyTransform(input);
+    expect(output).toMatch(/from ['"]@xds\/core\/StatusDot['"]/);
+    expect(output).toContain('XDSStatusDot');
+  });
+
+  it('removes Badge import when no other usages remain', async () => {
+    const input = `import {XDSBadge} from '@xds/core/Badge';
+<XDSBadge variant="info" shape="dot" label="Info" />`;
+    const output = await applyTransform(input);
+    expect(output).not.toContain("from '@xds/core/Badge'");
+    expect(output).not.toContain('XDSBadge');
+  });
+
+  it('keeps Badge import when mixed dot + pill usages exist', async () => {
+    const input = `import {XDSBadge} from '@xds/core/Badge';
+<div>
+  <XDSBadge variant="error" shape="dot" label="Unread" />
+  <XDSBadge variant="success" label="5" />
+</div>`;
+    const output = await applyTransform(input);
+    expect(output).toContain("from '@xds/core/Badge'");
+    expect(output).toMatch(/from ['"]@xds\/core\/StatusDot['"]/);
+    // The dot mode one should be converted
+    expect(output).toContain('XDSStatusDot');
+    // The pill one should remain
+    expect(output).toContain('XDSBadge');
+  });
+
+  it('does not transform non-XDS component with shape="dot"', async () => {
+    const input = '<Badge variant="error" shape="dot" label="x" />';
+    const output = await applyTransform(input);
+    expect(output).toBe(input);
+  });
+
+  it('returns undefined when no changes needed', async () => {
+    const result = await getRawResult('<XDSButton>Click</XDSButton>');
+    expect(result).toBeUndefined();
+  });
+
+  it('preserves other props (xstyle, className, data-testid, ref)', async () => {
+    const input = `import {XDSBadge} from '@xds/core/Badge';
+<XDSBadge variant="error" shape="dot" label="Status" xstyle={styles.dot} className="my-badge" data-testid="status-dot" ref={badgeRef} />`;
+    const output = await applyTransform(input);
+    expect(output).toContain('XDSStatusDot');
+    expect(output).toContain('variant="negative"');
+    expect(output).toContain('label="Status"');
+    expect(output).toContain('xstyle={styles.dot}');
+    expect(output).toContain('className="my-badge"');
+    expect(output).toContain('data-testid="status-dot"');
+    expect(output).toContain('ref={badgeRef}');
+    expect(output).not.toContain('shape');
+  });
+
+  it('defaults to neutral when no variant prop', async () => {
+    const input = `import {XDSBadge} from '@xds/core/Badge';
+<XDSBadge shape="dot" label="Unknown" />`;
+    const output = await applyTransform(input);
+    expect(output).toContain('variant="neutral"');
+    expect(output).toContain('label="Unknown"');
+  });
+
+  it('passes through label prop (not replaced with placeholder)', async () => {
+    const input = `import {XDSBadge} from '@xds/core/Badge';
+<XDSBadge variant="error" shape="dot" label="Unread" />`;
+    const output = await applyTransform(input);
+    expect(output).toContain('label="Unread"');
+    expect(output).not.toContain('label="status"');
+  });
+});

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

@@ -0,0 +1,161 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+
+async function applyTransform(source) {
+  const {default: transform} = await import(
+    '../migrate-gap-to-numeric.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('migrate-gap-to-numeric', () => {
+  it('converts gap="space0" to gap={0}', async () => {
+    const input = '<XDSStack direction="vertical" gap="space0"><div /></XDSStack>';
+    const output = await applyTransform(input);
+    expect(output).toContain('gap={0}');
+    expect(output).not.toContain('"space0"');
+  });
+
+  it('converts gap="space0.5" to gap={0.5}', async () => {
+    const input = '<XDSHStack gap="space0.5"><div /></XDSHStack>';
+    const output = await applyTransform(input);
+    expect(output).toContain('gap={0.5}');
+    expect(output).not.toContain('"space0.5"');
+  });
+
+  it('converts gap="space4" to gap={4}', async () => {
+    const input = '<XDSVStack gap="space4"><div /></XDSVStack>';
+    const output = await applyTransform(input);
+    expect(output).toContain('gap={4}');
+    expect(output).not.toContain('"space4"');
+  });
+
+  it('converts gap="space10" to gap={10}', async () => {
+    const input = '<XDSStack direction="horizontal" gap="space10"><div /></XDSStack>';
+    const output = await applyTransform(input);
+    expect(output).toContain('gap={10}');
+    expect(output).not.toContain('"space10"');
+  });
+
+  it('converts rowGap and columnGap on XDSGrid', async () => {
+    const input = '<XDSGrid columns={3} rowGap="space2" columnGap="space6"><div /></XDSGrid>';
+    const output = await applyTransform(input);
+    expect(output).toContain('rowGap={2}');
+    expect(output).toContain('columnGap={6}');
+    expect(output).not.toContain('"space2"');
+    expect(output).not.toContain('"space6"');
+  });
+
+  it('converts gap on XDSGrid', async () => {
+    const input = '<XDSGrid columns={3} gap="space4"><div /></XDSGrid>';
+    const output = await applyTransform(input);
+    expect(output).toContain('gap={4}');
+    expect(output).not.toContain('"space4"');
+  });
+
+  it('handles gap={"space4"} expression container form', async () => {
+    const input = '<XDSStack direction="vertical" gap={"space4"}><div /></XDSStack>';
+    const output = await applyTransform(input);
+    expect(output).toContain('gap={4}');
+  });
+
+  it('does not modify non-gap props', async () => {
+    const input = '<XDSStack direction="vertical" gap="space2" wrap="wrap"><div /></XDSStack>';
+    const output = await applyTransform(input);
+    expect(output).toContain('gap={2}');
+    expect(output).toContain('wrap="wrap"');
+  });
+
+  it('handles multiple components in one file', async () => {
+    const input = `
+      <div>
+        <XDSHStack gap="space2"><div /></XDSHStack>
+        <XDSVStack gap="space4"><div /></XDSVStack>
+        <XDSGrid columns={3} gap="space6"><div /></XDSGrid>
+      </div>
+    `;
+    const output = await applyTransform(input);
+    expect(output).toContain('gap={2}');
+    expect(output).toContain('gap={4}');
+    expect(output).toContain('gap={6}');
+    expect(output).not.toContain('"space');
+  });
+
+  it('returns undefined when no changes needed', async () => {
+    const {default: transform} = await import(
+      '../migrate-gap-to-numeric.mjs'
+    );
+    const jscodeshift = (await import('jscodeshift')).default;
+    const api = {jscodeshift, stats: () => {}, report: () => {}};
+    const source = '<XDSStack direction="vertical" gap={4}><div /></XDSStack>';
+    const result = transform({source, path: 'test.tsx'}, api);
+    expect(result).toBeUndefined();
+  });
+
+  it('does not modify unknown string values', async () => {
+    const input = '<XDSStack direction="vertical" gap="custom"><div /></XDSStack>';
+    const output = await applyTransform(input);
+    expect(output).toContain('gap="custom"');
+  });
+
+  it('does not modify gap on user-defined components', async () => {
+    const input = '<CustomComponent gap="space3" />';
+    const output = await applyTransform(input);
+    expect(output).toContain('gap="space3"');
+    expect(output).not.toContain('gap={3}');
+  });
+
+  it('does not modify gap on HTML elements', async () => {
+    const input = '<div gap="space4"><span /></div>';
+    const output = await applyTransform(input);
+    expect(output).toContain('gap="space4"');
+    expect(output).not.toContain('gap={4}');
+  });
+
+  it('does not modify rowGap/columnGap on non-XDS components', async () => {
+    const input =
+      '<MyGrid rowGap="space2" columnGap="space6"><div /></MyGrid>';
+    const output = await applyTransform(input);
+    expect(output).toContain('rowGap="space2"');
+    expect(output).toContain('columnGap="space6"');
+  });
+
+  it('does not modify gap on namespaced or member-expression components', async () => {
+    const input = '<Foo.Bar gap="space4"><div /></Foo.Bar>';
+    const output = await applyTransform(input);
+    expect(output).toContain('gap="space4"');
+  });
+
+  it('only rewrites XDS components in mixed files', async () => {
+    const input = `
+      <div>
+        <XDSStack gap="space2"><div /></XDSStack>
+        <CustomComponent gap="space3" />
+        <div gap="space4" />
+      </div>
+    `;
+    const output = await applyTransform(input);
+    expect(output).toContain('gap={2}');
+    expect(output).toContain('gap="space3"');
+    expect(output).toContain('gap="space4"');
+  });
+
+  it.each([
+    'XDSStack',
+    'XDSHStack',
+    'XDSVStack',
+    'XDSGrid',
+    'XDSGridSpan',
+    'XDSStackItem',
+  ])('rewrites gap on %s', async (component) => {
+    const input = `<${component} gap="space5"><div /></${component}>`;
+    const output = await applyTransform(input);
+    expect(output).toContain('gap={5}');
+    expect(output).not.toContain('"space5"');
+  });
+});