@astryxdesign/cli 0.4.6 → 0.4.7-canary.019ae5a

package/clients/cli/commands/dialog-adaptive-template.test.mjs

@@ -0,0 +1,24 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, expect, it} from 'vitest';
+import {component} from '../../../api/component/component.mjs';
+
+const CWD = {cwd: '.'};
+
+// Resolves built-in block templates by walking the source tree.
+const SCAN_TIMEOUT = 30_000;
+
+describe(
+  'Dialog adaptive presentation template',
+  () => {
+    it('is listed as a Dialog example block', async () => {
+      const result = await component('Dialog', {
+        ...CWD,
+        blocks: true,
+      });
+      const exampleNames = result.data.examples.map(b => b.name);
+      expect(exampleNames).toContain('DialogAdaptivePresentation');
+    });
+  },
+  SCAN_TIMEOUT,
+);

package/clients/cli/commands/theme-targets.behavior.test.mjs

@@ -0,0 +1,64 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file CLI behavior for `astryx theme targets`.
+ *
+ * The API leaf is covered by api/theme/targets/targets.test.mjs; what is only
+ * reachable here is the terminal binding — the table a human reads, the JSON
+ * envelope a lint script reads, and the route into component overrides from
+ * `theme --help`, which is where the question gets asked.
+ */
+
+import {describe, it, expect} from 'vitest';
+import {runCli} from '../../../test-utils/run-cli.mjs';
+
+describe('astryx theme targets', () => {
+  it('prints one greppable line per target, with props and states', async () => {
+    const {status, stdout} = await runCli(['theme', 'targets', 'Switch']);
+
+    expect(status).toBe(0);
+    expect(stdout).toMatch(/^switch\s+Switch\s+size\s+checked, disabled$/m);
+    expect(stdout).toMatch(/^switch-thumb\s+Switch\s+size\s+checked$/m);
+    expect(stdout).toMatch(/3 across 1 component/);
+  });
+
+  it('lists the whole surface when unfiltered', async () => {
+    const {status, stdout} = await runCli(['theme', 'targets']);
+
+    expect(status).toBe(0);
+    const rows = stdout.split('\n').filter(l => /^[a-z][a-z0-9-]*\s{2,}/.test(l));
+    expect(rows.length).toBeGreaterThan(100);
+    expect(stdout).toMatch(/^button\s/m);
+    expect(stdout).toMatch(/^switch-thumb\s/m);
+  }, 30_000);
+
+  it('returns a theme.targets envelope under --json', async () => {
+    const {status, stdout} = await runCli(['--json', 'theme', 'targets', 'Switch']);
+
+    expect(status).toBe(0);
+    const payload = JSON.parse(stdout);
+    expect(payload.type).toBe('theme.targets');
+    expect(payload.data.targets).toContainEqual({
+      key: 'switch-thumb',
+      className: 'astryx-switch-thumb',
+      component: 'Switch',
+      props: ['size'],
+      states: ['checked'],
+    });
+  });
+
+  it('fails a filter that matches nothing', async () => {
+    const {status, stderr} = await runCli(['theme', 'targets', 'nosuchthing']);
+
+    expect(status).toBe(1);
+    expect(stderr).toMatch(/No theming target matches "nosuchthing"/);
+  });
+
+  it('routes a theming question from `theme --help` to component overrides', async () => {
+    const {stdout} = await runCli(['theme', '--help']);
+
+    expect(stdout).toMatch(/Component style overrides:/);
+    expect(stdout).toMatch(/theme targets/);
+    expect(stdout).toMatch(/component <Name>/);
+  });
+});

package/clients/cli/commands/theme-targets.doc.mjs

@@ -0,0 +1,38 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file CommandDoc for `astryx theme targets`. The terminal binding of the
+ * `themeTargets()` function (referenced via `fn`); its args map to that
+ * function's params so a converter can build Commander config + --help from one
+ * source of truth.
+ * @position packages/cli/clients/cli/commands — command documentation
+ */
+
+/** @type {import('@astryxdesign/cli/authoring').CommandDoc} */
+export const doc = {
+  type: 'command',
+  name: 'theme targets',
+  displayName: 'astryx theme targets',
+  namespace: 'cli',
+  summary: 'List the component theming targets a theme can override',
+  description:
+    'Prints every `defineTheme` components key across the system: the stable class it paints, ' +
+    'the component that declares it, and the props and states that are legal override keys ' +
+    'under it. This is the whole themeable surface in one command — what auditing a theme, or ' +
+    'answering "which key paints this pixel?", used to need one `astryx component <Name>` per ' +
+    'component to assemble. Pass a component name to scope it; pass any substring to search ' +
+    'keys. `--json` for a list a repo can lint its own theme against.',
+  fn: 'themeTargets',
+  args: [{name: 'filter', param: 'filter', required: false}],
+  examples: [
+    {label: 'The whole themeable surface', cli: 'astryx theme targets'},
+    {label: "One component's targets", cli: 'astryx theme targets Switch'},
+    {label: 'Search keys', cli: 'astryx theme targets thumb'},
+    {label: 'For a lint or an audit script', cli: 'astryx --json theme targets'},
+  ],
+  exitCodes: [
+    {code: 0, when: 'success'},
+    {code: 1, when: 'a filter matches no target, or core cannot be resolved'},
+  ],
+  related: ['component', 'theme build', 'theme template'],
+};

package/clients/cli/commands/theme-template.doc.mjs

@@ -16,9 +16,9 @@ export const doc = {
   namespace: 'cli',
   summary: 'Write the annotated theme template into your project',
   description:
-    'Writes theme.template.ts: the annotated reference for the whole theme surface — every ' +
+    'Writes theme.template.ts: the annotated reference for the whole theme surface, covering every ' +
     'defineTheme field, the token families, the component override syntax, and how a theme is ' +
-    'consumed — naming the CLI command that prints the authoritative reference for each. Read ' +
+    'consumed, naming the CLI command that prints the authoritative reference for each. Read ' +
     'it, copy what you need into your own theme file, delete it. Use `theme add <slug>` instead ' +
     'to start from a theme we ship. Leaves an existing file untouched unless --overwrite.',
   fn: 'themeTemplate',

package/clients/cli/commands/theme.doc.mjs

@@ -17,11 +17,13 @@ export const doc = {
   description:
     'The theme command group. Running astryx theme with no subcommand prints the ' +
     'subcommand list; the work happens in the subcommands: compile a theme (build), ' +
-    'scaffold one into your project (add), start a custom one from the annotated template (template), or list the bundled themes (list).',
-  subcommands: ['build', 'add', 'list', 'template'],
+    'scaffold one into your project (add), start a custom one from the annotated template (template), ' +
+    'list the bundled themes (list), or list the component theming targets a theme can override (targets).',
+  subcommands: ['build', 'add', 'list', 'template', 'targets'],
   examples: [
     {label: 'List bundled themes', cli: 'astryx theme list'},
     {label: 'Scaffold a theme', cli: 'astryx theme add matcha'},
+    {label: 'See what a theme can override', cli: 'astryx theme targets'},
   ],
   exitCodes: [
     {code: 0, when: 'success (help shown, or a subcommand succeeded)'},

package/clients/cli/index.mjs

@@ -70,6 +70,7 @@ export const JSON_SUPPORTED = new Set([
   'theme list',
   'theme add',
   'theme template',
+  'theme targets',
   'upgrade',
   'manifest',
   'doctor',

package/clients/cli/lib/manifest.mjs

@@ -77,6 +77,7 @@ export const RESPONSE_TYPES = {
   'theme list': ['theme.list'],
   'theme add': ['theme.list', 'theme.add'],
   'theme template': ['theme.template'],
+  'theme targets': ['theme.targets'],
   upgrade: ['upgrade.list', 'upgrade.status', 'upgrade.run'],
   manifest: ['manifest'],
   doctor: ['doctor'],
@@ -116,6 +117,7 @@ const EXAMPLES = {
     'astryx theme add matcha ./src/themes/matcha',
   ],
   'theme template': ['astryx theme template', 'astryx theme template --json'],
+  'theme targets': ['astryx theme targets Switch', 'astryx --json theme targets'],
   upgrade: ['astryx upgrade --json'],
   manifest: ['astryx manifest --json', 'astryx --json'],
   doctor: ['astryx doctor', 'astryx doctor --json'],

package/foundation/discovery/theming-targets.d.mts

@@ -0,0 +1,86 @@
+// @generated by scripts/sync-api-types.mjs from the JSDoc in foundation/**/*.mjs.
+// DO NOT EDIT — run `pnpm sync:api-types` to regenerate.
+
+/**
+ * Every theming target declared under a core `src` directory, sorted by key
+ * then component. A key can appear more than once: a shared sub-element (the
+ * radio indicator, say) is documented by every component that renders it.
+ *
+ * Unreadable docs are skipped rather than fatal — a single malformed doc must
+ * not take out theme validation or the listing.
+ *
+ * @param {string} coreSrc - absolute path to `<core>/src`
+ * @returns {Promise<ThemingTarget[]>}
+ */
+export function collectThemingTargets(coreSrc: string): Promise<ThemingTarget[]>;
+/**
+ * One public custom property a theme may set on a component's target.
+ * @typedef {object} ThemingVar
+ * @property {string} name - the custom property, e.g. `--tree-list-indent`
+ * @property {string} component - the component whose doc declares it
+ * @property {string} dir - absolute path to the directory the doc lives in
+ * @property {string} default - the documented default value
+ */
+/**
+ * Every PUBLIC theming var declared under a core `src` directory, sorted by
+ * name. Private `--_*` vars are a component's own plumbing, not a theme's to
+ * set, so they are not enumerated here.
+ *
+ * @param {string} coreSrc - absolute path to `<core>/src`
+ * @returns {Promise<ThemingVar[]>}
+ */
+export function collectThemingVars(coreSrc: string): Promise<ThemingVar[]>;
+/**
+ * Collapse the enumeration into the `{key: [props and states]}` map theme
+ * validation checks override keys against — both are legal override keys, so
+ * they share one list.
+ * @param {ThemingTarget[]} targets
+ * @returns {Record<string, string[]>}
+ */
+export function targetsByKey(targets: ThemingTarget[]): Record<string, string[]>;
+/**
+ * One theming target, as a theme author has to write it.
+ */
+export type ThemingTarget = {
+    /**
+     * - the `defineTheme` `components` key (class minus the `astryx-` prefix)
+     */
+    key: string;
+    /**
+     * - the stable class the component renders
+     */
+    className: string;
+    /**
+     * - the component whose doc declares it
+     */
+    component: string;
+    /**
+     * - visual props the target reflects (`variant:value` keys)
+     */
+    props: string[];
+    /**
+     * - runtime states the target reflects (bare-name keys)
+     */
+    states: string[];
+};
+/**
+ * One public custom property a theme may set on a component's target.
+ */
+export type ThemingVar = {
+    /**
+     * - the custom property, e.g. `--tree-list-indent`
+     */
+    name: string;
+    /**
+     * - the component whose doc declares it
+     */
+    component: string;
+    /**
+     * - absolute path to the directory the doc lives in
+     */
+    dir: string;
+    /**
+     * - the documented default value
+     */
+    default: string;
+};

package/foundation/discovery/theming-targets.mjs

@@ -0,0 +1,202 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file The one enumeration of component theming targets.
+ *
+ * @input  a core `src` directory
+ * @output every `theming.targets` entry authored in a component `.doc.mjs`,
+ *         flattened into the `defineTheme` component key a theme author writes
+ * @position packages/cli/foundation/discovery — shared by `theme targets` (the
+ *           listing) and `theme build` (override validation). Both read the
+ *           component docs, which are the source of truth `astryx component
+ *           <Name>` prints; nothing here is a second registry, so the list a
+ *           theme author can enumerate and the set the compiler accepts cannot
+ *           drift from the components or from each other.
+ */
+
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import {loadComponentDoc} from './component-loader.mjs';
+
+const SKIP_DIRS = new Set(['node_modules', '__tests__']);
+
+/**
+ * One theming target, as a theme author has to write it.
+ * @typedef {object} ThemingTarget
+ * @property {string} key - the `defineTheme` `components` key (class minus the `astryx-` prefix)
+ * @property {string} className - the stable class the component renders
+ * @property {string} component - the component whose doc declares it
+ * @property {string[]} props - visual props the target reflects (`variant:value` keys)
+ * @property {string[]} states - runtime states the target reflects (bare-name keys)
+ */
+
+/**
+ * Strip the namespace prefix to get the `defineTheme` key for a class name.
+ *
+ * Keep the `astryx-` literal in sync with packages/core/src/naming.ts
+ * (NAMESPACE / classPrefix), the same way component-format.mjs does.
+ * <!-- SYNC: packages/core/src/naming.ts (namespace prefix source of truth) -->
+ * @param {string} className
+ * @returns {string}
+ */
+function targetKey(className) {
+  return className.replace(/^astryx-/, '');
+}
+
+/**
+ * Every theming target declared under a core `src` directory, sorted by key
+ * then component. A key can appear more than once: a shared sub-element (the
+ * radio indicator, say) is documented by every component that renders it.
+ *
+ * Unreadable docs are skipped rather than fatal — a single malformed doc must
+ * not take out theme validation or the listing.
+ *
+ * @param {string} coreSrc - absolute path to `<core>/src`
+ * @returns {Promise<ThemingTarget[]>}
+ */
+export async function collectThemingTargets(coreSrc) {
+  if (!coreSrc || !fs.existsSync(coreSrc)) return [];
+
+  /** @type {ThemingTarget[]} */
+  const targets = [];
+
+  /** @param {string} dir */
+  async function scan(dir) {
+    for (const entry of fs.readdirSync(dir, {withFileTypes: true})) {
+      const full = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        if (SKIP_DIRS.has(entry.name)) continue;
+        await scan(full);
+        continue;
+      }
+      if (!entry.name.endsWith('.doc.mjs')) continue;
+
+      /** @type {any} */
+      let doc;
+      try {
+        doc = await loadComponentDoc(full);
+      } catch {
+        continue;
+      }
+
+      const component =
+        typeof doc?.name === 'string' && doc.name
+          ? doc.name
+          : path.basename(path.dirname(full));
+
+      for (const target of doc?.theming?.targets || []) {
+        const className = target?.className;
+        if (typeof className !== 'string') continue;
+        const key = targetKey(className);
+        if (!key) continue;
+        targets.push({
+          key,
+          className,
+          component,
+          props: stringList(target.visualProps),
+          states: stringList(target.states),
+        });
+      }
+    }
+  }
+
+  await scan(coreSrc);
+
+  targets.sort(
+    (a, b) => a.key.localeCompare(b.key) || a.component.localeCompare(b.component),
+  );
+  return targets;
+}
+
+/**
+ * One public custom property a theme may set on a component's target.
+ * @typedef {object} ThemingVar
+ * @property {string} name - the custom property, e.g. `--tree-list-indent`
+ * @property {string} component - the component whose doc declares it
+ * @property {string} dir - absolute path to the directory the doc lives in
+ * @property {string} default - the documented default value
+ */
+
+/**
+ * Every PUBLIC theming var declared under a core `src` directory, sorted by
+ * name. Private `--_*` vars are a component's own plumbing, not a theme's to
+ * set, so they are not enumerated here.
+ *
+ * @param {string} coreSrc - absolute path to `<core>/src`
+ * @returns {Promise<ThemingVar[]>}
+ */
+export async function collectThemingVars(coreSrc) {
+  if (!coreSrc || !fs.existsSync(coreSrc)) return [];
+
+  /** @type {Map<string, ThemingVar>} */
+  const vars = new Map();
+
+  /** @param {string} dir */
+  async function scan(dir) {
+    for (const entry of fs.readdirSync(dir, {withFileTypes: true})) {
+      const full = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        if (SKIP_DIRS.has(entry.name)) continue;
+        await scan(full);
+        continue;
+      }
+      if (!entry.name.endsWith('.doc.mjs')) continue;
+
+      /** @type {any} */
+      let doc;
+      try {
+        doc = await loadComponentDoc(full);
+      } catch {
+        continue;
+      }
+
+      const component =
+        typeof doc?.name === 'string' && doc.name
+          ? doc.name
+          : path.basename(path.dirname(full));
+
+      for (const entryVar of doc?.theming?.vars || []) {
+        const name = entryVar?.name;
+        if (typeof name !== 'string') continue;
+        if (entryVar.private === true || name.startsWith('--_')) continue;
+        if (vars.has(name)) continue;
+        vars.set(name, {
+          name,
+          component,
+          dir: path.dirname(full),
+          default: typeof entryVar.default === 'string' ? entryVar.default : '',
+        });
+      }
+    }
+  }
+
+  await scan(coreSrc);
+
+  return [...vars.values()].sort((a, b) => a.name.localeCompare(b.name));
+}
+
+/**
+ * Collapse the enumeration into the `{key: [props and states]}` map theme
+ * validation checks override keys against — both are legal override keys, so
+ * they share one list.
+ * @param {ThemingTarget[]} targets
+ * @returns {Record<string, string[]>}
+ */
+export function targetsByKey(targets) {
+  /** @type {Record<string, string[]>} */
+  const byKey = {};
+  for (const t of targets) {
+    byKey[t.key] = [...new Set([...(byKey[t.key] || []), ...t.props, ...t.states])];
+  }
+  return byKey;
+}
+
+/**
+ * @param {unknown} value
+ * @returns {string[]}
+ */
+function stringList(value) {
+  return Array.isArray(value)
+    ? value.filter((/** @type {unknown} */ v) => typeof v === 'string')
+    : [];
+}