@astryxdesign/cli 0.3.0-canary.ccb5ca9 → 0.3.0-canary.cd0b9f6

package/assets/codemods/transforms/next/__tests__/next-codemods.test.mjs

@@ -0,0 +1,92 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Unit tests for the staged (next-release) codemods.
+ *
+ * Mirrors v0.3.0/__tests__/next-codemods.test.mjs, which covers the codemods
+ * after promotion. Keeping a copy here means a staged transform is tested from
+ * the day it is written rather than the day it is released.
+ */
+
+import {describe, expect, it} from 'vitest';
+import jscodeshift from 'jscodeshift';
+
+const j = jscodeshift.withParser('tsx');
+const api = {jscodeshift: j, stats: () => {}, report: () => {}};
+
+async function apply(name, source) {
+  const {default: transform} = await import(`../${name}.mjs`);
+  return transform({source, path: 'test.tsx'}, api) ?? source;
+}
+
+const TRANSFORM = 'rename-dropdown-menu-radio-dot-target';
+
+describe('rename-dropdown-menu-radio-dot-target', () => {
+  it('renames the theme target key in a defineTheme components map', async () => {
+    const input = `import {defineTheme} from '@astryxdesign/core/theme';
+export const theme = defineTheme({
+  name: 'brand',
+  components: {
+    'dropdown-menu-radio-dot': {base: {backgroundColor: 'var(--color-accent)'}},
+  },
+});`;
+    const output = await apply(TRANSFORM, input);
+    expect(output).toContain("'radio-indicator-dot':");
+    // The old name survives only inside the TODO comment the rename attaches.
+    expect(output).not.toContain("'dropdown-menu-radio-dot':");
+  });
+
+  it('warns that the new target is app-wide, not menu-only', async () => {
+    const input = `const components = {
+  'dropdown-menu-radio-dot': {base: {width: '10px'}},
+};`;
+    const output = await apply(TRANSFORM, input);
+    // The rename cannot preserve scope — there is no menu-only dot element
+    // left — so the author has to decide, and must be told.
+    expect(output).toContain('TODO(astryx upgrade)');
+    expect(output).toContain('EVERY radio dot');
+  });
+
+  it('renames the rendered class inside a selector string', async () => {
+    const input = `const sel = '.astryx-dropdown-menu-radio-dot';
+const nested = '.astryx-dropdown-menu-radio .astryx-dropdown-menu-radio-dot';`;
+    const output = await apply(TRANSFORM, input);
+    expect(output).toContain("'.astryx-radio-indicator-dot'");
+    expect(output).toContain(
+      '.astryx-dropdown-menu-radio .astryx-radio-indicator-dot',
+    );
+  });
+
+  it('renames the class inside a template literal', async () => {
+    const input =
+      'const css = `.astryx-dropdown-menu-radio-dot { background: ${c}; }`;';
+    const output = await apply(TRANSFORM, input);
+    expect(output).toContain('.astryx-radio-indicator-dot {');
+    expect(output).not.toContain('astryx-dropdown-menu-radio-dot');
+  });
+
+  it('leaves the surviving dropdown-menu-radio target alone', async () => {
+    // Only the DOT target was removed; the circle still carries the
+    // menu-specific target, so a theme keyed on it must not be rewritten.
+    const input = `const components = {
+  'dropdown-menu-radio': {base: {borderWidth: '2px'}},
+};`;
+    const output = await apply(TRANSFORM, input);
+    expect(output).toContain("'dropdown-menu-radio'");
+    expect(output).not.toContain('radio-indicator');
+    expect(output).not.toContain('TODO(astryx upgrade)');
+  });
+
+  it('is a no-op on files that never mention the target', async () => {
+    const input = `const components = {button: {base: {fontWeight: '600'}}};`;
+    expect(await apply(TRANSFORM, input)).toBe(input);
+  });
+
+  it('is idempotent', async () => {
+    const input = `const components = {
+  'dropdown-menu-radio-dot': {base: {width: '10px'}},
+};`;
+    const once = await apply(TRANSFORM, input);
+    expect(await apply(TRANSFORM, once)).toBe(once);
+  });
+});

package/assets/codemods/transforms/next/index.mjs

@@ -7,4 +7,14 @@
  * this file into the resolved version folder.
  */
 
-export default [];
+import renameDropdownMenuRadioDotTarget, {
+  meta as renameDropdownMenuRadioDotTargetMeta,
+} from './rename-dropdown-menu-radio-dot-target.mjs';
+
+export default [
+  {
+    name: 'rename-dropdown-menu-radio-dot-target',
+    transform: renameDropdownMenuRadioDotTarget,
+    meta: renameDropdownMenuRadioDotTargetMeta,
+  },
+];

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/docs/getting-started.doc.mjs

@@ -21,7 +21,7 @@ export const docs = {
           type: 'code',
           lang: 'text',
           label: 'Paste this into your AI',
-          code: 'Install @astryxdesign/core, @astryxdesign/theme-neutral, and @astryxdesign/cli in this project, then run `npx @astryxdesign/cli init` to set up agent docs. Read the generated files to learn the conventions.',
+          code: 'Install @astryxdesign/core, @stylexjs/stylex, @astryxdesign/theme-neutral, and @astryxdesign/cli in this project, then run `npx @astryxdesign/cli init` to set up agent docs. Read the generated files to learn the conventions.',
         },
       ],
     },
@@ -34,13 +34,13 @@ export const docs = {
         },
         {
           type: 'prose',
-          text: 'Add the core package, a theme, and the CLI to your existing project.',
+          text: 'Add the core package and its `@stylexjs/stylex` peer dependency, plus a theme and the CLI.',
         },
         {
           type: 'code',
           lang: 'bash',
           label: 'Terminal',
-          code: `npm install @astryxdesign/core @astryxdesign/theme-neutral @astryxdesign/cli`,
+          code: `npm install @astryxdesign/core @stylexjs/stylex @astryxdesign/theme-neutral @astryxdesign/cli`,
         },
         {
           type: 'prose',

package/authoring/doctypes/base/type.ts

@@ -260,6 +260,8 @@ export interface ComponentSlotElement {
  * { property: 'padding', vars: ['--_card-padding'] },
  * ```
  */
+// SYNC: apps/docsite/scripts/generate-data.mjs (interface DerivedVar) — see the
+// note on ComponentThemingTarget below.
 export interface ComponentThemingDerivedVar {
   /** The standard CSS property name (camelCase) that theme authors write.
    *  e.g. `'borderRadius'`, `'padding'`, `'paddingBlock'` */
@@ -291,6 +293,10 @@ export interface ComponentThemingDerivedVar {
  * {className: 'astryx-card'}
  * ```
  */
+// SYNC: When adding a field here, add it to the docsite's generated-registry
+// copy too — apps/docsite/scripts/generate-data.mjs (interface ThemingTarget).
+// `next build` type-checks the emitted componentRegistry.ts against that copy,
+// so a field present in a .doc.mjs but missing there fails the docsite build.
 export interface ComponentThemingTarget {
   /** The stable CSS class name rendered by the component.
    *  Always starts with `astryx-`.
@@ -310,6 +316,15 @@ export interface ComponentThemingTarget {
    *  `[data-checked="checked"]`. Legacy state classes are still emitted for
    *  compatibility. Omit if the element has no state-driven selectors. */
   states?: string[];
+  /** Set when this target has been RENAMED and this entry is the old name.
+   *  The component still emits the class (via `themeProps`'s `legacyNames`),
+   *  so existing themes keep working, but the docsite should steer readers to
+   *  the replacement. The value is the class name that supersedes this one,
+   *  without the `astryx-` prefix — e.g. `"checkbox-indicator"`.
+   *
+   *  A theme target is public API; renaming one without this is a silent
+   *  break for every theme styling it. */
+  deprecatedFor?: string;
 }
 
 /**

package/clients/cli/commands/build-theme.registry.test.mjs

@@ -74,6 +74,16 @@ function renderedClassLiterals() {
             classes.add(m[1]);
           }
         }
+        // Renamed targets emit their old name too, via themeProps'
+        // `legacyNames`. Those classes are just as rendered as the primary
+        // one, so a doc entry for the old name is still backed by real output.
+        const legacyRe = /legacyNames:\s*\[([^\]]*)\]/g;
+        let lm;
+        while ((lm = legacyRe.exec(text)) !== null) {
+          for (const nm of lm[1].matchAll(/'([^']+)'/g)) {
+            classes.add(nm[1]);
+          }
+        }
       }
     }
   };

package/package.json

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