@astryxdesign/cli 0.3.0-canary.fbc60c5 → 0.3.0-canary.fcbc342

package/assets/codemods/transforms/next/rename-dropdown-menu-radio-dot-target.mjs

@@ -0,0 +1,152 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: rename the removed `dropdown-menu-radio-dot` theme target
+ *
+ * The menu radio's dot is no longer drawn by DropdownMenuRadioItem. That row
+ * now renders the shared radio indicator, so its dot is the indicator's dot and
+ * carries `radio-indicator-dot` (plus the legacy `radio-dot`) instead of the
+ * menu-specific `dropdown-menu-radio-dot`, which is gone.
+ *
+ * Runtime themes are not validated: a theme keyed on the old target keeps
+ * compiling and simply stops matching, with no error anywhere. That silence is
+ * why this rename needs a codemod rather than a changelog line.
+ *
+ * The rename is NOT scope-preserving, and that cannot be fixed here — there is
+ * no menu-only dot element left to address. `radio-indicator-dot` reaches every
+ * radio dot in the app, including RadioList's. So every rewritten site also
+ * gets a TODO comment (api.report is a stub; comments are the only warning
+ * channel) telling the author to check whether the rule was meant to be
+ * menu-only, and pointing at the containing-target route if it was.
+ */
+
+export const meta = {
+  title: 'Rename the removed dropdown-menu-radio-dot theme target',
+  description:
+    'Renames the `dropdown-menu-radio-dot` theme target (and the ' +
+    '`astryx-dropdown-menu-radio-dot` class it rendered) to ' +
+    '`radio-indicator-dot` / `astryx-radio-indicator-dot`. Menu radios draw ' +
+    'the shared radio indicator now, so the menu-specific dot target no ' +
+    'longer exists. The new target is app-wide rather than menu-only, so each ' +
+    'rewritten site gets a TODO comment to confirm that widening is intended.',
+  pr: '#4712',
+};
+
+const OLD_TARGET = 'dropdown-menu-radio-dot';
+const NEW_TARGET = 'radio-indicator-dot';
+const OLD_CLASS = `astryx-${OLD_TARGET}`;
+const NEW_CLASS = `astryx-${NEW_TARGET}`;
+
+const TODO_COMMENT =
+  ' TODO(astryx upgrade): `dropdown-menu-radio-dot` became `radio-indicator-dot`,' +
+  ' which styles EVERY radio dot, not just the ones in a menu. If this rule was' +
+  ' meant to be menu-only, scope it under the containing `dropdown-menu-radio`' +
+  ' target instead of this one. ';
+
+/**
+ * Rewrite one string value, or return null when it holds nothing to rename.
+ *
+ * Handles the target name on its own (a theme's `components` key) and the
+ * rendered class inside a larger string (a selector such as
+ * `.astryx-dropdown-menu-radio-dot`, or a className list).
+ *
+ * @param {string} value
+ * @returns {string | null}
+ */
+function renameIn(value) {
+  if (value === OLD_TARGET) {
+    return NEW_TARGET;
+  }
+  if (value.includes(OLD_CLASS)) {
+    return value.split(OLD_CLASS).join(NEW_CLASS);
+  }
+  return null;
+}
+
+/**
+ * @param {import('../../../../authoring/codemod/type').AstryxCodemodFile} file
+ * @param {import('../../../../authoring/codemod/type').CodemodTransformApi} api
+ * @returns {string | null | undefined}
+ */
+export default function transformer(file, api) {
+  // Cheap bail-out: most files in a consumer repo mention neither name.
+  if (!file.source.includes(OLD_TARGET)) {
+    return undefined;
+  }
+
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  /** Attach the widening warning once to the nearest statement-ish node. */
+  function attachTodo(/** @type {any} */ path) {
+    // The property (or its statement) reads better than the bare literal, and
+    // matches where a human would look for the note.
+    const host =
+      path.parent?.node?.type === 'ObjectProperty' ||
+      path.parent?.node?.type === 'Property'
+        ? path.parent.node
+        : path.node;
+    if (!host.comments) {
+      host.comments = [];
+    }
+    if (
+      host.comments.some((/** @type {any} */ c) => c.value === TODO_COMMENT)
+    ) {
+      return;
+    }
+    host.comments.push(j.commentBlock(TODO_COMMENT, true, false));
+  }
+
+  root
+    .find(j.StringLiteral)
+    .forEach((/** @type {any} */ path) => {
+      const renamed = renameIn(path.node.value);
+      if (renamed == null) {
+        return;
+      }
+      path.node.value = renamed;
+      attachTodo(path);
+      hasChanges = true;
+    });
+
+  // Older parsers surface string literals as `Literal`.
+  root.find(j.Literal).forEach((/** @type {any} */ path) => {
+    if (typeof path.node.value !== 'string') {
+      return;
+    }
+    const renamed = renameIn(path.node.value);
+    if (renamed == null) {
+      return;
+    }
+    path.node.value = renamed;
+    if (typeof path.node.raw === 'string') {
+      path.node.raw = path.node.raw
+        .split(OLD_TARGET)
+        .join(NEW_TARGET);
+    }
+    attachTodo(path);
+    hasChanges = true;
+  });
+
+  // Template literals carry the class in CSS strings: `.${OLD_CLASS} > span`.
+  root.find(j.TemplateElement).forEach((/** @type {any} */ path) => {
+    const cooked = path.node.value?.cooked;
+    if (typeof cooked !== 'string') {
+      return;
+    }
+    const renamed = renameIn(cooked);
+    if (renamed == null) {
+      return;
+    }
+    path.node.value.cooked = renamed;
+    path.node.value.raw = path.node.value.raw
+      .split(OLD_CLASS)
+      .join(NEW_CLASS)
+      .split(OLD_TARGET)
+      .join(NEW_TARGET);
+    hasChanges = true;
+  });
+
+  return hasChanges ? root.toSource({quote: 'single'}) : undefined;
+}

package/assets/codemods/transforms/v0.3.0/__tests__/migrate-grid-minchildwidth-to-columns.test.mjs

@@ -0,0 +1,82 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+
+async function applyTransform(source) {
+  const {default: transform} =
+    await import('../migrate-grid-minchildwidth-to-columns.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;
+}
+
+/** Collapse whitespace (and space padding inside braces) so formatting of
+ * pretty-printed multiline objects does not matter for assertions. */
+function normalize(str) {
+  return str
+    .replace(/\s+/g, ' ')
+    .replace(/\{\s+/g, '{')
+    .replace(/\s+\}/g, '}')
+    .trim();
+}
+
+describe('migrate-grid-minchildwidth-to-columns', () => {
+  it('migrates minChildWidth only to columns={{minWidth, repeat: "fit"}}', async () => {
+    const input = `import {Grid} from '@astryxdesign/core';
+const t = <Grid minChildWidth={280}><Item /></Grid>;`;
+    const output = await applyTransform(input);
+    expect(output).not.toContain('minChildWidth');
+    expect(normalize(output)).toContain(
+      normalize("columns={{minWidth: 280, repeat: 'fit'}}"),
+    );
+  });
+
+  it('migrates columns={n} + minChildWidth to columns={{minWidth, max, repeat: "fit"}}', async () => {
+    const input = `import {Grid} from '@astryxdesign/core';
+const t = <Grid columns={3} minChildWidth={280}><Item /></Grid>;`;
+    const output = await applyTransform(input);
+    expect(output).not.toContain('minChildWidth');
+    expect(normalize(output)).toContain(
+      normalize("columns={{minWidth: 280, max: 3, repeat: 'fit'}}"),
+    );
+  });
+
+  it('preserves other attributes (gap) when migrating the combo', async () => {
+    const input = `import {Grid} from '@astryxdesign/core';
+const t = <Grid columns={5} gap={5} minChildWidth={140}><Item /></Grid>;`;
+    const output = await applyTransform(input);
+    expect(output).not.toContain('minChildWidth');
+    expect(normalize(output)).toContain(
+      normalize("columns={{minWidth: 140, max: 5, repeat: 'fit'}}"),
+    );
+    expect(output).toContain('gap={5}');
+  });
+
+  it('bails when columns is already an object (ambiguous)', async () => {
+    const input = `import {Grid} from '@astryxdesign/core';
+const t = <Grid columns={{minWidth: 100}} minChildWidth={280}><Item /></Grid>;`;
+    const output = await applyTransform(input);
+    // Unchanged: object columns is ambiguous, so it is left as-is.
+    expect(output).toBe(input);
+  });
+
+  it('bails when columns is a non-numeric/dynamic expression', async () => {
+    const input = `import {Grid} from '@astryxdesign/core';
+const t = <Grid columns={cols} minChildWidth={280}><Item /></Grid>;`;
+    const output = await applyTransform(input);
+    expect(output).toBe(input);
+  });
+
+  it('is alias-aware and supports the subpath import source', async () => {
+    const input = `import {Grid as G} from '@astryxdesign/core/Grid';
+const t = <G columns={4} minChildWidth={200}><Item /></G>;`;
+    const output = await applyTransform(input);
+    expect(output).not.toContain('minChildWidth');
+    expect(normalize(output)).toContain(
+      normalize("columns={{minWidth: 200, max: 4, repeat: 'fit'}}"),
+    );
+  });
+});

package/assets/codemods/transforms/v0.3.0/__tests__/migrate-table-rowexpansion-to-tree.test.mjs

@@ -0,0 +1,201 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+
+async function applyTransform(source) {
+  const {default: transform} = await import(
+    '../migrate-table-rowexpansion-to-tree.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;
+}
+
+function normalize(str) {
+  return str
+    .replace(/\s+/g, ' ')
+    .replace(/\{\s+/g, '{')
+    .replace(/\s+\}/g, '}')
+    .trim();
+}
+
+describe('migrate-table-rowexpansion-to-tree', () => {
+  it('rewrites the useTableRowExpansionState import to useTableTreeState', async () => {
+    const input = `import {Table, useTableRowExpansion, useTableRowExpansionState} from '@astryxdesign/core';
+function C() {
+  const {data, expansionConfig} = useTableRowExpansionState({
+    baseData: tree,
+    getChildren: item => item.children ?? [],
+    getRowKey: item => item.id,
+    expandedKeys,
+    setExpandedKeys,
+  });
+  const expansion = useTableRowExpansion(expansionConfig);
+  return <Table data={data} columns={cols} idKey="id" plugins={{expansion}} />;
+}`;
+    const output = await applyTransform(input);
+    expect(output).not.toContain('useTableRowExpansionState');
+    expect(output).toContain('useTableTreeState');
+    expect(output).toContain('useTableTreeData');
+  });
+
+  it('maps baseData to data and getChildren to childrenKey', async () => {
+    const input = `import {Table, useTableRowExpansion, useTableRowExpansionState} from '@astryxdesign/core';
+function C() {
+  const {data, expansionConfig} = useTableRowExpansionState({
+    baseData: tree,
+    getChildren: item => item.children ?? [],
+    getRowKey: item => item.id,
+    expandedKeys,
+    setExpandedKeys,
+  });
+  const expansion = useTableRowExpansion(expansionConfig);
+  return <Table data={data} columns={cols} idKey="id" plugins={{expansion}} />;
+}`;
+    const output = await applyTransform(input);
+    const n = normalize(output);
+    expect(n).toContain('data: tree');
+    expect(n).toContain("childrenKey: 'children'");
+    expect(output).not.toContain('baseData');
+    expect(output).not.toContain('getChildren');
+  });
+
+  it('maps getRowKey to idKey preserving the accessor function', async () => {
+    const input = `import {Table, useTableRowExpansion, useTableRowExpansionState} from '@astryxdesign/core';
+function C() {
+  const {data, expansionConfig} = useTableRowExpansionState({
+    baseData: tree,
+    getChildren: item => item.children ?? [],
+    getRowKey: item => item.id,
+    expandedKeys,
+    setExpandedKeys,
+  });
+  const expansion = useTableRowExpansion(expansionConfig);
+  return <Table data={data} columns={cols} idKey="id" plugins={{expansion}} />;
+}`;
+    const output = await applyTransform(input);
+    const n = normalize(output);
+    expect(n).toContain('idKey: item => item.id');
+    expect(output).not.toContain('getRowKey');
+  });
+
+  it('swaps the useTableRowExpansion plugin call for useTableTreeData', async () => {
+    const input = `import {Table, useTableRowExpansion, useTableRowExpansionState} from '@astryxdesign/core';
+function C() {
+  const {data, expansionConfig} = useTableRowExpansionState({
+    baseData: tree,
+    getChildren: item => item.children ?? [],
+    getRowKey: item => item.id,
+    expandedKeys,
+    setExpandedKeys,
+  });
+  const expansion = useTableRowExpansion(expansionConfig);
+  return <Table data={data} columns={cols} idKey="id" plugins={{expansion}} />;
+}`;
+    const output = await applyTransform(input);
+    // The state hook now returns treeConfig; the plugin consumes it.
+    expect(output).toContain('treeConfig');
+    expect(output).toContain('useTableTreeData(treeConfig)');
+    expect(output).not.toMatch(/useTableRowExpansion\(/);
+  });
+
+  it('maps getIsItemExpandable to isItemExpandable', async () => {
+    const input = `import {Table, useTableRowExpansion, useTableRowExpansionState} from '@astryxdesign/core';
+function C() {
+  const {data, expansionConfig} = useTableRowExpansionState({
+    baseData: tree,
+    getChildren: item => item.children ?? [],
+    getRowKey: item => item.id,
+    getIsItemExpandable: item => item.type === 'folder',
+    expandedKeys,
+    setExpandedKeys,
+  });
+  const expansion = useTableRowExpansion(expansionConfig);
+  return <Table data={data} columns={cols} idKey="id" plugins={{expansion}} />;
+}`;
+    const output = await applyTransform(input);
+    expect(output).toContain('isItemExpandable');
+    expect(output).not.toContain('getIsItemExpandable');
+  });
+
+  it('leaves the new detail-panel usage (renderExpanded) untouched', async () => {
+    const input = `import {Table, useTableRowExpansion} from '@astryxdesign/core';
+function C() {
+  const expansion = useTableRowExpansion({
+    expandedKeys,
+    onToggle,
+    getRowKey: item => item.id,
+    renderExpanded: item => <Details item={item} />,
+  });
+  return <Table data={rows} columns={cols} idKey="id" plugins={{expansion}} />;
+}`;
+    const output = await applyTransform(input);
+    // No useTableRowExpansionState import here, and renderExpanded present:
+    // this is the new detail-panel API. The codemod must not touch it.
+    expect(output).toBe(input);
+  });
+
+  it('does not touch files that never imported the row-expansion hooks', async () => {
+    const input = `import {Table, useTableSelection} from '@astryxdesign/core';
+const t = <Table data={rows} columns={cols} idKey="id" />;`;
+    const output = await applyTransform(input);
+    expect(output).toBe(input);
+  });
+
+  it('supports the @xds/core import source alias', async () => {
+    const input = `import {Table, useTableRowExpansion, useTableRowExpansionState} from '@xds/core';
+function C() {
+  const {data, expansionConfig} = useTableRowExpansionState({
+    baseData: tree,
+    getChildren: item => item.children ?? [],
+    getRowKey: item => item.id,
+    expandedKeys,
+    setExpandedKeys,
+  });
+  const expansion = useTableRowExpansion(expansionConfig);
+  return <Table data={data} columns={cols} idKey="id" plugins={{expansion}} />;
+}`;
+    const output = await applyTransform(input);
+    expect(output).toContain('useTableTreeState');
+    expect(output).not.toContain('useTableRowExpansionState');
+  });
+
+  it('emits treeConfig as a shorthand (not treeConfig: treeConfig)', async () => {
+    const input = `import {Table, useTableRowExpansion, useTableRowExpansionState} from '@astryxdesign/core';
+function C() {
+  const {data, expansionConfig} = useTableRowExpansionState({
+    baseData: tree,
+    getChildren: item => item.children ?? [],
+    getRowKey: item => item.id,
+    expandedKeys,
+    setExpandedKeys,
+  });
+  const expansion = useTableRowExpansion(expansionConfig);
+  return <Table data={data} columns={cols} idKey="id" plugins={{expansion}} />;
+}`;
+    const output = await applyTransform(input);
+    expect(output).not.toContain('treeConfig: treeConfig');
+    expect(normalize(output)).toContain('visibleData: data');
+  });
+
+  it('leaves a migration guidance comment about expansion state', async () => {
+    const input = `import {Table, useTableRowExpansion, useTableRowExpansionState} from '@astryxdesign/core';
+function C() {
+  const {data, expansionConfig} = useTableRowExpansionState({
+    baseData: tree,
+    getChildren: item => item.children ?? [],
+    getRowKey: item => item.id,
+    expandedKeys,
+    setExpandedKeys,
+  });
+  const expansion = useTableRowExpansion(expansionConfig);
+  return <Table data={data} columns={cols} idKey="id" plugins={{expansion}} />;
+}`;
+    const output = await applyTransform(input);
+    expect(output).toContain('astryx-migration');
+    expect(output).toContain('defaultExpandedIds');
+  });
+});

package/assets/codemods/transforms/v0.3.0/index.mjs

@@ -40,6 +40,9 @@ import migrateLabCodeBlockImports, {
 import removeThemeTransitionTokenImports, {
   meta as removeThemeTransitionTokenImportsMeta,
 } from './remove-theme-transition-token-imports.mjs';
+import migrateTableRowExpansionToTree, {
+  meta as migrateTableRowExpansionToTreeMeta,
+} from './migrate-table-rowexpansion-to-tree.mjs';
 
 export default [
   {
@@ -87,4 +90,9 @@ export default [
     transform: removeThemeTransitionTokenImports,
     meta: removeThemeTransitionTokenImportsMeta,
   },
+  {
+    name: 'migrate-table-rowexpansion-to-tree',
+    transform: migrateTableRowExpansionToTree,
+    meta: migrateTableRowExpansionToTreeMeta,
+  },
 ];

package/assets/codemods/transforms/v0.3.0/migrate-grid-minchildwidth-to-columns.mjs

@@ -49,11 +49,10 @@ export default function transformer(file, api) {
         a.type === 'JSXAttribute' && a.name?.name === 'minChildWidth',
     );
     if (!minAttr) return;
-    const hasColumns = attrs.some(
+    const columnsAttr = attrs.find(
       (/** @type {any} */ a) =>
         a.type === 'JSXAttribute' && a.name?.name === 'columns',
     );
-    if (hasColumns) return;
 
     let minWidthExpr;
     if (
@@ -67,6 +66,43 @@ export default function transformer(file, api) {
       return;
     }
 
+    if (columnsAttr) {
+      // Both `columns` and `minChildWidth` are present. This is only safely
+      // migratable when `columns` is a numeric literal (e.g. `columns={3}`).
+      //
+      // In the old (0.2.0) Grid runtime, when both props were set and
+      // `columns` was a number, `minChildWidth` dominated and the numeric
+      // `columns` became a *max column cap* with `auto-fit`:
+      //   repeat(auto-fit, minmax(minChildWidth, 1fr)) capped at `columns`.
+      // The 0.3.0 `columns` object models this exactly as
+      //   {minWidth, max, repeat: 'fit'}.
+      // So the lossless rewrite is:
+      //   <Grid columns={3} minChildWidth={280}>
+      //     -> <Grid columns={{minWidth: 280, max: 3, repeat: 'fit'}}>
+      //
+      // If `columns` is already an object or a non-numeric/dynamic
+      // expression, the combined behavior is genuinely ambiguous, so we
+      // bail and leave it unmigrated (it surfaces separately).
+      const columnsValue = columnsAttr.value;
+      if (columnsValue?.type !== 'JSXExpressionContainer') return;
+      const columnsExpr = columnsValue.expression;
+      const isNumericLiteral =
+        (columnsExpr?.type === 'NumericLiteral' ||
+          columnsExpr?.type === 'Literal') &&
+        typeof columnsExpr.value === 'number';
+      if (!isNumericLiteral) return;
+
+      const columnsObject = j.objectExpression([
+        j.property('init', j.identifier('minWidth'), minWidthExpr),
+        j.property('init', j.identifier('max'), j.literal(columnsExpr.value)),
+        j.property('init', j.identifier('repeat'), j.literal('fit')),
+      ]);
+      columnsAttr.value = j.jsxExpressionContainer(columnsObject);
+      attrs.splice(attrs.indexOf(minAttr), 1);
+      hasChanges = true;
+      return;
+    }
+
     const columnsObject = j.objectExpression([
       j.property('init', j.identifier('minWidth'), minWidthExpr),
       j.property('init', j.identifier('repeat'), j.literal('fit')),