@astryxdesign/cli 0.1.6-canary.f87204e → 0.1.6-canary.fa8c18f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.6-canary.f87204e",
+  "version": "0.1.6-canary.fa8c18f",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -79,10 +79,10 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/charts": "0.1.6-canary.f87204e",
-    "@astryxdesign/core": "0.1.6-canary.f87204e",
-    "@astryxdesign/lab": "0.1.6-canary.f87204e",
-    "@astryxdesign/theme-neutral": "0.1.6-canary.f87204e",
+    "@astryxdesign/charts": "0.1.6-canary.fa8c18f",
+    "@astryxdesign/core": "0.1.6-canary.fa8c18f",
+    "@astryxdesign/lab": "0.1.6-canary.fa8c18f",
+    "@astryxdesign/theme-neutral": "0.1.6-canary.fa8c18f",
     "gpt-tokenizer": "^3.4.0"
   },
   "peerDependenciesMeta": {
@@ -100,10 +100,10 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/charts": "0.1.6-canary.f87204e",
-    "@astryxdesign/core": "0.1.6-canary.f87204e",
-    "@astryxdesign/lab": "0.1.6-canary.f87204e",
-    "@astryxdesign/theme-neutral": "0.1.6-canary.f87204e",
+    "@astryxdesign/charts": "0.1.6-canary.fa8c18f",
+    "@astryxdesign/core": "0.1.6-canary.fa8c18f",
+    "@astryxdesign/lab": "0.1.6-canary.fa8c18f",
+    "@astryxdesign/theme-neutral": "0.1.6-canary.fa8c18f",
     "gpt-tokenizer": "^3.4.0"
   },
   "scripts": {

package/src/codemods/__tests__/registry.test.mjs

@@ -20,6 +20,7 @@ describe('registry', () => {
         '0.1.2',
         '0.1.3',
         '0.1.5',
+        '0.1.7',
       ]);
     });
   });

package/src/codemods/registry.mjs

@@ -21,6 +21,7 @@ const registry = new Map([
   ['0.1.2', () => import('./transforms/v0.1.2/index.mjs')],
   ['0.1.3', () => import('./transforms/v0.1.3/index.mjs')],
   ['0.1.5', () => import('./transforms/v0.1.5/index.mjs')],
+  ['0.1.7', () => import('./transforms/v0.1.7/index.mjs')],
 ]);
 
 // Re-export from the shared utility so registry callers and other consumers

package/src/codemods/transforms/v0.1.7/__tests__/migrate-table-tableprops-to-direct-props.test.mjs

@@ -0,0 +1,120 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+
+async function applyTransform(source) {
+  const {default: transform} = await import(
+    '../migrate-table-tableprops-to-direct-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;
+}
+
+const TODO = 'TODO(astryx): tableProps is deprecated';
+
+describe('migrate-table-tableprops-to-direct-props', () => {
+  it('lifts className and style to sibling props', async () => {
+    const input = `import {Table} from '@astryxdesign/core';
+const x = <Table tableProps={{className: 'striped', style: {width: 400}}} columns={cols} />;`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`className='striped'`);
+    expect(output).toContain('style={{width: 400}}');
+    expect(output).not.toContain('tableProps');
+  });
+
+  it(`lifts 'aria-label' and 'data-testid' string keys to hyphenated props`, async () => {
+    const input = `import {Table} from '@astryxdesign/core/Table';
+const x = <Table tableProps={{'aria-label': 'Users', 'data-testid': 'users-table'}} />;`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`aria-label='Users'`);
+    expect(output).toContain(`data-testid='users-table'`);
+    expect(output).not.toContain('tableProps');
+  });
+
+  it('lifts id and an onClick handler', async () => {
+    const input = `import {Table} from '@xds/core';
+const x = <Table tableProps={{id: 'users', onClick: (e) => handle(e)}} />;`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`id='users'`);
+    expect(output).toContain('onClick={(e) => handle(e)}');
+    expect(output).not.toContain('tableProps');
+  });
+
+  it('keeps colliding keys in a shrunken tableProps with a TODO comment', async () => {
+    const input = `import {Table} from '@astryxdesign/core';
+const x = <Table className='mine' tableProps={{className: 'theirs', id: 'users'}} />;`;
+    const output = await applyTransform(input);
+    // Non-colliding key lifted
+    expect(output).toContain(`id='users'`);
+    // Existing sibling wins; colliding key stays inside tableProps
+    expect(output).toContain(`className='mine'`);
+    expect(output).toContain('tableProps={{');
+    expect(output).toContain(`className: 'theirs'`);
+    expect(output).not.toContain('id: ');
+    expect(output).toContain(TODO);
+  });
+
+  it('leaves a dynamic tableProps={identifier} untouched with a TODO comment', async () => {
+    const input = `import {Table} from '@astryxdesign/core';
+const x = <Table tableProps={props} />;`;
+    const output = await applyTransform(input);
+    expect(output).toContain('tableProps={props}');
+    expect(output).toContain(TODO);
+  });
+
+  it('leaves an object containing a spread untouched with a TODO comment (no partial lift)', async () => {
+    const input = `import {Table} from '@astryxdesign/core';
+const x = <Table tableProps={{className: 'x', ...rest}} />;`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`tableProps={{className: 'x', ...rest}}`);
+    expect(output).not.toContain(`<Table className=`);
+    expect(output).toContain(TODO);
+  });
+
+  it('transforms aliased Table imports', async () => {
+    const input = `import {Table as DataTable} from '@astryxdesign/core';
+const x = <DataTable tableProps={{className: 'x'}} />;`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`<DataTable className='x' />`);
+    expect(output).not.toContain('tableProps');
+  });
+
+  it('does not touch other components with a tableProps attribute', async () => {
+    const input = `import {Table} from '@astryxdesign/core';
+const a = <Table tableProps={{id: 'users'}} />;
+const b = <OtherComponent tableProps={{className: 'x'}} />;`;
+    const output = await applyTransform(input);
+    expect(output).toContain(`<Table id='users' />`);
+    expect(output).toContain(`<OtherComponent tableProps={{className: 'x'}} />`);
+  });
+
+  it('returns undefined for files without a Table import', async () => {
+    const {default: transform} = await import(
+      '../migrate-table-tableprops-to-direct-props.mjs'
+    );
+    const jscodeshift = (await import('jscodeshift')).default;
+    const j = jscodeshift.withParser('tsx');
+    const api = {jscodeshift: j, stats: () => {}, report: () => {}};
+    const source = `import {Grid} from '@astryxdesign/core';
+const x = <Table tableProps={{className: 'x'}} />;`;
+    const result = transform({source, path: 'test.tsx'}, api);
+    expect(result).toBeUndefined();
+  });
+
+  it('returns undefined for already-migrated files (no tableProps)', async () => {
+    const {default: transform} = await import(
+      '../migrate-table-tableprops-to-direct-props.mjs'
+    );
+    const jscodeshift = (await import('jscodeshift')).default;
+    const j = jscodeshift.withParser('tsx');
+    const api = {jscodeshift: j, stats: () => {}, report: () => {}};
+    const source = `import {Table} from '@astryxdesign/core';
+const x = <Table className='x' />;`;
+    const result = transform({source, path: 'test.tsx'}, api);
+    expect(result).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,19 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file v0.1.7 transform manifest
+ *
+ * Lists all codemods for the v0.1.7 release in the order they should run.
+ */
+
+import migrateTableTablePropsToDirectProps, {
+  meta as migrateTableTablePropsToDirectPropsMeta,
+} from './migrate-table-tableprops-to-direct-props.mjs';
+
+export default [
+  {
+    name: 'migrate-table-tableprops-to-direct-props',
+    transform: migrateTableTablePropsToDirectProps,
+    meta: migrateTableTablePropsToDirectPropsMeta,
+  },
+];

package/src/codemods/transforms/v0.1.7/migrate-table-tableprops-to-direct-props.mjs

@@ -0,0 +1,188 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Migrate Table tableProps to direct root props
+ * @see https://github.com/facebook/astryx/issues/3679
+ *
+ * `tableProps` (typed HTMLAttributes<HTMLTableElement>, nesting HTML
+ * attributes one level deep) is deprecated. As of v0.1.7, <Table> honors
+ * className/style/xstyle directly and spreads all other BaseProps
+ * (id, aria-*, data-*, event handlers, ...) onto the root <table>, with
+ * direct props taking precedence over tableProps.
+ *
+ * This codemod lifts object-literal `tableProps` keys into sibling JSX
+ * props:
+ *
+ * - tableProps={{className: 'x', style: s}} → className="x" style={s}
+ * - String-literal keys ('aria-label', 'data-testid') become hyphenated
+ *   JSX attributes.
+ * - Keys that collide with an existing sibling attribute (or fail the
+ *   attribute-name guard) are kept inside a shrunken tableProps with a
+ *   trailing TODO comment for manual migration.
+ * - Dynamic values (tableProps={props}, tableProps={fn()}, objects with
+ *   spreads/computed keys/methods) are left untouched with a TODO comment.
+ *
+ * Only elements whose name resolves to a `Table` import (alias-aware)
+ * from an Astryx core source are rewritten. No import changes are needed.
+ */
+
+export const meta = {
+  title: 'Migrate Table tableProps to direct root props',
+  description:
+    'Lifts object-literal `tableProps` keys on <Table> into sibling JSX props ' +
+    '(className, style, id, aria-*, data-*, event handlers). Dynamic or ' +
+    'colliding entries are kept and annotated with a TODO comment.',
+  pr: '#3679',
+};
+
+/** Import sources that provide the Astryx Table component. */
+const TABLE_IMPORT_SOURCES = new Set([
+  '@astryxdesign/core',
+  '@astryxdesign/core/Table',
+  '@xds/core',
+  '@xds/core/Table',
+]);
+
+/** Keys must be valid JSX attribute names to be lifted. */
+const LIFTABLE_KEY_RE = /^[a-zA-Z_][a-zA-Z0-9_-]*$/;
+
+const TODO_COMMENT =
+  ' TODO(astryx): tableProps is deprecated — merge these into direct props manually ';
+
+/**
+ * Extract the static key name from an object property, or null when the
+ * property is not a simple liftable entry (spread, computed key, method,
+ * getter/setter, non-string literal key).
+ */
+function getPropertyKeyName(prop) {
+  if (prop.type !== 'ObjectProperty' && prop.type !== 'Property') return null;
+  // espree-style Property nodes: skip methods and accessors
+  if (prop.method || (prop.kind != null && prop.kind !== 'init')) return null;
+  if (prop.computed) return null;
+  const key = prop.key;
+  if (key.type === 'Identifier') return key.name;
+  if (
+    (key.type === 'StringLiteral' || key.type === 'Literal') &&
+    typeof key.value === 'string'
+  ) {
+    return key.value;
+  }
+  return null;
+}
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  // --- 1. Track local names for the Table import (alias-aware) ---
+  const tableLocals = new Set();
+  root.find(j.ImportDeclaration).forEach((path) => {
+    if (!TABLE_IMPORT_SOURCES.has(path.node.source.value)) return;
+    for (const spec of path.node.specifiers ?? []) {
+      if (spec.type === 'ImportSpecifier' && spec.imported.name === 'Table') {
+        tableLocals.add(spec.local.name);
+      }
+    }
+  });
+
+  if (tableLocals.size === 0) return undefined;
+
+  function attachTodo(attr) {
+    if (!attr.comments) attr.comments = [];
+    if (attr.comments.some((c) => c.value === TODO_COMMENT)) return;
+    attr.comments.push(j.commentBlock(TODO_COMMENT, false, true));
+    hasChanges = true;
+  }
+
+  function buildAttributeValue(valueNode) {
+    if (
+      valueNode.type === 'StringLiteral' ||
+      (valueNode.type === 'Literal' && typeof valueNode.value === 'string')
+    ) {
+      return j.stringLiteral(valueNode.value);
+    }
+    return j.jsxExpressionContainer(valueNode);
+  }
+
+  // --- 2. Rewrite tableProps on tracked <Table> elements ---
+  root.find(j.JSXOpeningElement).forEach((path) => {
+    const name = path.node.name;
+    const componentName = name.type === 'JSXIdentifier' ? name.name : null;
+    if (!componentName || !tableLocals.has(componentName)) return;
+
+    const attrs = path.node.attributes;
+    const tablePropsAttr = attrs.find(
+      (a) => a.type === 'JSXAttribute' && a.name?.name === 'tableProps',
+    );
+    if (!tablePropsAttr) return;
+
+    const value = tablePropsAttr.value;
+    const isObjectLiteral =
+      value?.type === 'JSXExpressionContainer' &&
+      value.expression.type === 'ObjectExpression';
+
+    // Dynamic case: tableProps={identifier}, tableProps={fn()}, ... —
+    // leave the attribute untouched and warn via a trailing comment
+    // (api.report is a stub; comments are the only warning channel).
+    if (!isObjectLiteral) {
+      attachTodo(tablePropsAttr);
+      return;
+    }
+
+    const obj = value.expression;
+
+    // Objects containing spreads, computed keys, or methods are treated
+    // as dynamic: no partial lift, just the TODO comment.
+    const allSimple = obj.properties.every(
+      (prop) => getPropertyKeyName(prop) !== null,
+    );
+    if (!allSimple) {
+      attachTodo(tablePropsAttr);
+      return;
+    }
+
+    const lifted = [];
+    const kept = [];
+    for (const prop of obj.properties) {
+      const keyName = getPropertyKeyName(prop);
+      const collidesWithSibling = attrs.some(
+        (a) => a.type === 'JSXAttribute' && a.name?.name === keyName,
+      );
+      const collidesWithLifted = lifted.some(
+        (a) => a.name.name === keyName,
+      );
+      if (
+        !LIFTABLE_KEY_RE.test(keyName) ||
+        collidesWithSibling ||
+        collidesWithLifted
+      ) {
+        kept.push(prop);
+        continue;
+      }
+      lifted.push(
+        j.jsxAttribute(
+          j.jsxIdentifier(keyName),
+          buildAttributeValue(prop.value),
+        ),
+      );
+    }
+
+    const tablePropsIdx = attrs.indexOf(tablePropsAttr);
+    if (kept.length === 0) {
+      // All keys lifted — replace tableProps with the sibling attributes.
+      attrs.splice(tablePropsIdx, 1, ...lifted);
+      hasChanges = true;
+    } else {
+      // Some keys collide or fail the name guard — keep only those in a
+      // shrunken tableProps and flag it for manual migration.
+      attrs.splice(tablePropsIdx, 0, ...lifted);
+      obj.properties = kept;
+      attachTodo(tablePropsAttr);
+      if (lifted.length > 0) hasChanges = true;
+    }
+  });
+
+  if (!hasChanges) return undefined;
+  return root.toSource({quote: 'single'});
+}