@astryxdesign/cli 0.1.1 → 0.1.2-canary.043f3fd

package/src/codemods/transforms/v0.1.2/__tests__/rename-text-color-active-to-accent.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('../rename-text-color-active-to-accent.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;
+}
+
+describe('rename-text-color-active-to-accent', () => {
+  it('renames Text color="active" to color="accent"', async () => {
+    const input = `<Text color="active">Hi</Text>`;
+    const output = await applyTransform(input);
+    expect(output).toContain("'accent'");
+    expect(output).not.toContain('active');
+  });
+
+  it('renames Heading color="active" to color="accent"', async () => {
+    const input = `<Heading level={2} color="active">Title</Heading>`;
+    const output = await applyTransform(input);
+    expect(output).toContain("'accent'");
+    expect(output).not.toContain('active');
+  });
+
+  it('renames Link color="active" to color="accent"', async () => {
+    const input = `<Link href="/x" color="active">Go</Link>`;
+    const output = await applyTransform(input);
+    expect(output).toContain("'accent'");
+    expect(output).not.toContain('active');
+  });
+
+  it('renames Timestamp color="active" to color="accent"', async () => {
+    const input = `<Timestamp value={d} color="active" />`;
+    const output = await applyTransform(input);
+    expect(output).toContain("'accent'");
+    expect(output).not.toContain('active');
+  });
+
+  it("renames expression-container color={'active'}", async () => {
+    const input = `<Text color={'active'}>Hi</Text>`;
+    const output = await applyTransform(input);
+    expect(output).toContain("'accent'");
+    expect(output).not.toContain("'active'");
+  });
+
+  it('renames active inside a ternary color expression', async () => {
+    const input = `<Text color={isOn ? 'active' : 'secondary'}>Hi</Text>`;
+    const output = await applyTransform(input);
+    expect(output).toContain("'accent'");
+    expect(output).toContain("'secondary'");
+    expect(output).not.toContain("'active'");
+  });
+
+  it('does not change other color values', async () => {
+    const input = `<Text color="secondary">Hi</Text>`;
+    const output = await applyTransform(input);
+    expect(output).toBe(input);
+  });
+
+  it('does not touch color="active" on non-target components', async () => {
+    const input = `<StatusDot color="active" />`;
+    const output = await applyTransform(input);
+    expect(output).toBe(input);
+  });
+
+  it('does not touch unrelated "active" string literals', async () => {
+    const input = `const node = {id: 'active', label: 'Active Users'};`;
+    const output = await applyTransform(input);
+    expect(output).toBe(input);
+  });
+
+  it('does not touch a status enum value named active', async () => {
+    const input = `const filters = {status: 'active'};`;
+    const output = await applyTransform(input);
+    expect(output).toBe(input);
+  });
+
+  it('renames object color prop in files importing a target component', async () => {
+    const input = `import {Text} from '@xds/core/Text';
+const cfg = {color: 'active'};`;
+    const output = await applyTransform(input);
+    expect(output).toContain("color: 'accent'");
+    expect(output).not.toContain("'active'");
+  });
+
+  it("renames color: 'active' as const in files importing a target component", async () => {
+    const input = `import {Text} from '@xds/core/Text';
+const COLORS = [{color: 'active' as const, description: 'Accent'}];`;
+    const output = await applyTransform(input);
+    expect(output).toContain("'accent' as const");
+    expect(output).not.toContain("'active'");
+  });
+
+  it('does not rename object color prop when no target component is imported', async () => {
+    const input = `const cfg = {color: 'active'};`;
+    const output = await applyTransform(input);
+    expect(output).toBe(input);
+  });
+
+  it('renames active in Storybook color argTypes options', async () => {
+    const input = `import {Text} from '@xds/core/Text';
+const meta = {argTypes: {color: {control: 'select', options: ['primary', 'active', 'inherit']}}};`;
+    const output = await applyTransform(input);
+    expect(output).toContain("'accent'");
+    expect(output).not.toContain("'active'");
+  });
+
+  it('returns undefined (no change) when nothing matches', async () => {
+    const input = `<Text color="primary">Hi</Text>`;
+    const output = await applyTransform(input);
+    // applyTransform falls back to source when transform returns undefined
+    expect(output).toBe(input);
+  });
+});

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

@@ -0,0 +1,19 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file v0.1.2 transform manifest
+ *
+ * Lists all codemods for the v0.1.2 release in the order they should run.
+ */
+
+import renameTextColorActiveToAccent, {
+  meta as renameTextColorActiveToAccentMeta,
+} from './rename-text-color-active-to-accent.mjs';
+
+export default [
+  {
+    name: 'rename-text-color-active-to-accent',
+    transform: renameTextColorActiveToAccent,
+    meta: renameTextColorActiveToAccentMeta,
+  },
+];

package/src/codemods/transforms/v0.1.2/rename-text-color-active-to-accent.mjs

@@ -0,0 +1,136 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Rename Text/Heading/Link/Timestamp color "active" to "accent"
+ * @see https://github.com/facebook/astryx/issues/2863
+ *
+ * The `active` text-color value is renamed to `accent` and now maps to the
+ * dedicated `--color-text-accent` token (legible accent ink) instead of
+ * `--color-accent` (the interactive/base accent surface). This gives a
+ * first-class, type-safe way to render accent-colored text and resolves the
+ * gap reported in #2863.
+ *
+ * Transforms (scoped to Text, Heading, Link, and Timestamp):
+ * - <Text color="active" />            → <Text color="accent" />
+ * - <Heading color={'active'} />       → <Heading color={'accent'} />
+ * - <Text color={cond ? 'active' : x}> → <Text color={cond ? 'accent' : x}>
+ * - Storybook argTypes: color: { options: [..., 'active', ...] }
+ *     → replaces 'active' with 'accent' (files importing a target component)
+ * - Object properties: { color: 'active' } / { color: 'active' as const }
+ *     → { color: 'accent' } (files importing a target component)
+ *
+ * The transform deliberately does NOT touch bare `'active'` strings that are
+ * not a `color` value (e.g. status enums, ids, filter values), so it is safe
+ * to run across an entire codebase.
+ */
+
+export const meta = {
+  title: 'Rename Text/Heading/Link/Timestamp color "active" to "accent"',
+  description:
+    'Renames the `color="active"` value to `color="accent"` on Text, Heading, ' +
+    'Link, and Timestamp. The `accent` value maps to `--color-text-accent` ' +
+    '(the dedicated accent text ink). Also updates Storybook color argTypes ' +
+    'options and object-literal `color` props in files that import a target component.',
+  pr: '#2863',
+};
+
+const OLD_VALUE = 'active';
+const NEW_VALUE = 'accent';
+
+/** Components whose `color` prop accepts a TextColor value. */
+const TARGET_COMPONENTS = new Set(['Text', 'Heading', 'Link', 'Timestamp']);
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  /** Rewrite a string-literal node when it equals the old value. */
+  function renameStringLiteral(node) {
+    if (!node) return false;
+    if (
+      (node.type === 'StringLiteral' || node.type === 'Literal') &&
+      node.value === OLD_VALUE
+    ) {
+      node.value = NEW_VALUE;
+      if (node.raw) node.raw = `'${NEW_VALUE}'`;
+      return true;
+    }
+    return false;
+  }
+
+  /** Recursively rewrite the old value inside ternary/logical expressions. */
+  function renameInExpression(node) {
+    if (!node) return false;
+    let changed = false;
+    if (node.type === 'StringLiteral' || node.type === 'Literal') {
+      changed = renameStringLiteral(node) || changed;
+    } else if (node.type === 'ConditionalExpression') {
+      changed = renameInExpression(node.consequent) || changed;
+      changed = renameInExpression(node.alternate) || changed;
+    } else if (node.type === 'LogicalExpression') {
+      changed = renameInExpression(node.left) || changed;
+      changed = renameInExpression(node.right) || changed;
+    } else if (node.type === 'TSAsExpression') {
+      // `'active' as const` → rewrite the inner expression
+      changed = renameInExpression(node.expression) || changed;
+    }
+    return changed;
+  }
+
+  // --- 1. JSX attribute: color="active" / color={'active'} on target components ---
+  root.find(j.JSXOpeningElement).forEach(path => {
+    const name = path.node.name;
+    const componentName = name.type === 'JSXIdentifier' ? name.name : null;
+    if (!componentName || !TARGET_COMPONENTS.has(componentName)) return;
+
+    path.node.attributes.forEach(attr => {
+      if (attr.type !== 'JSXAttribute') return;
+      if (!attr.name || attr.name.name !== 'color') return;
+
+      const value = attr.value;
+      if (!value) return;
+
+      if (value.type === 'StringLiteral' || value.type === 'Literal') {
+        if (renameStringLiteral(value)) hasChanges = true;
+      } else if (value.type === 'JSXExpressionContainer') {
+        if (renameInExpression(value.expression)) hasChanges = true;
+      }
+    });
+  });
+
+  // Object-property / argTypes transforms only run in files that use a target
+  // component — keeps unrelated `{ color: 'active' }` / `'active'` strings safe.
+  const importsTarget =
+    root
+      .find(j.ImportSpecifier)
+      .filter(p => TARGET_COMPONENTS.has(p.node.imported?.name))
+      .size() > 0;
+
+  if (importsTarget) {
+    const PropertyType = j.ObjectProperty ?? j.Property;
+
+    // --- 2. Object property: { color: 'active' } / { color: 'active' as const } ---
+    root.find(PropertyType, {key: {name: 'color'}}).forEach(path => {
+      if (renameInExpression(path.node.value)) hasChanges = true;
+    });
+
+    // --- 3. Storybook argTypes: color: { options: [..., 'active', ...] } ---
+    root.find(PropertyType, {key: {name: 'color'}}).forEach(path => {
+      const value = path.node.value;
+      if (!value || value.type !== 'ObjectExpression') return;
+
+      const optionsProp = value.properties.find(
+        p => p.key && (p.key.name === 'options' || p.key.value === 'options'),
+      );
+      if (optionsProp && optionsProp.value.type === 'ArrayExpression') {
+        optionsProp.value.elements.forEach(el => {
+          if (renameStringLiteral(el)) hasChanges = true;
+        });
+      }
+    });
+  }
+
+  if (!hasChanges) return undefined;
+  return root.toSource({quote: 'single'});
+}

package/src/codemods/transforms/v0.1.3/__tests__/migrate-layout-components-to-experimental.test.mjs

@@ -0,0 +1,360 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+
+/**
+ * Invoke the transform directly with a configured jscodeshift api, mirroring
+ * how other transform tests (and `runConfigCodemod`) drive transforms via the
+ * unified `(file, api) => string | null | undefined` contract.
+ *
+ * @param {string} source
+ * @param {string} [filePath]
+ * @returns {Promise<string|null>} the rewritten source, or null for no-op
+ */
+async function applyTransform(source, filePath = 'astryx.config.mjs') {
+  const {default: transform} = await import(
+    '../migrate-layout-components-to-experimental.mjs'
+  );
+  const jscodeshift = (await import('jscodeshift')).default;
+  const j = jscodeshift.withParser('babel');
+  const api = {jscodeshift: j, stats: () => {}, report: () => {}};
+  return transform({source, path: filePath}, api);
+}
+
+describe('migrate-layout-components-to-experimental — meta', () => {
+  it('declares itself as a config codemod', async () => {
+    const {meta} = await import(
+      '../migrate-layout-components-to-experimental.mjs'
+    );
+    expect(meta.codemodType).toBe('config');
+    expect(meta.title).toMatch(/layout\.components/);
+    expect(typeof meta.description).toBe('string');
+  });
+});
+
+describe('migrate-layout-components-to-experimental — string → {from}', () => {
+  it('normalizes a string entry to { from } (named import semantics)', async () => {
+    const input = `export default {
+  layout: {
+    components: {
+      KpiCard: '@/components/KpiCard',
+    },
+  },
+};
+`;
+    const output = await applyTransform(input);
+    expect(output).not.toBeNull();
+    // No longer under layout.
+    expect(output).not.toMatch(/layout\s*:/);
+    // Relocated under experimental.xle.components as { from }.
+    expect(output).toContain('experimental');
+    expect(output).toContain('xle');
+    expect(output).toMatch(/KpiCard:\s*\{\s*from:\s*['"]@\/components\/KpiCard['"]/);
+  });
+
+  it('normalizes multiple string entries', async () => {
+    const input = `export default {
+  layout: {
+    components: {
+      KpiCard: '@/components/KpiCard',
+      Banner: '@/components/Banner',
+    },
+  },
+};
+`;
+    const output = await applyTransform(input);
+    expect(output).toMatch(/KpiCard:\s*\{\s*from:\s*['"]@\/components\/KpiCard['"]/);
+    expect(output).toMatch(/Banner:\s*\{\s*from:\s*['"]@\/components\/Banner['"]/);
+  });
+});
+
+describe('migrate-layout-components-to-experimental — object entries carried unchanged', () => {
+  it('preserves default: true (default import semantics)', async () => {
+    const input = `export default {
+  layout: {
+    components: {
+      Chart: { from: '@/c/Chart', default: true },
+    },
+  },
+};
+`;
+    const output = await applyTransform(input);
+    expect(output).toContain("from: '@/c/Chart'");
+    expect(output).toContain('default: true');
+    expect(output).toContain('experimental');
+    expect(output).toContain('xle');
+  });
+
+  it('preserves description', async () => {
+    const input = `export default {
+  layout: {
+    components: {
+      Chart: { from: '@/c/Chart', description: 'A chart' },
+    },
+  },
+};
+`;
+    const output = await applyTransform(input);
+    expect(output).toContain("from: '@/c/Chart'");
+    expect(output).toContain("description: 'A chart'");
+  });
+
+  it('preserves from/description/default and key order', async () => {
+    const input = `export default {
+  layout: {
+    components: {
+      Chart: { from: '@/c/Chart', description: 'A chart', default: true },
+    },
+  },
+};
+`;
+    const output = await applyTransform(input);
+    // Order: from, then description, then default.
+    expect(output).toMatch(
+      /from:\s*'@\/c\/Chart',\s*description:\s*'A chart',\s*default:\s*true/,
+    );
+  });
+
+  it('migrates a mix of string and object entries', async () => {
+    const input = `export default {
+  layout: {
+    components: {
+      KpiCard: '@/components/KpiCard',
+      Chart: { from: '@/c/Chart', default: true },
+    },
+  },
+};
+`;
+    const output = await applyTransform(input);
+    expect(output).toMatch(/KpiCard:\s*\{\s*from:\s*['"]@\/components\/KpiCard['"]/);
+    expect(output).toContain("from: '@/c/Chart'");
+    expect(output).toContain('default: true');
+  });
+});
+
+describe('migrate-layout-components-to-experimental — wrapper forms', () => {
+  it('handles bare object literal default export', async () => {
+    const input = `export default {
+  layout: { components: { KpiCard: '@/components/KpiCard' } },
+};
+`;
+    const output = await applyTransform(input);
+    expect(output).toContain('experimental');
+    expect(output).toContain('xle');
+  });
+
+  it('handles createConfig({ ... }) wrapper', async () => {
+    const input = `import { createConfig } from '@astryxdesign/cli';
+
+export default createConfig({
+  layout: { components: { KpiCard: '@/components/KpiCard' } },
+});
+`;
+    const output = await applyTransform(input);
+    expect(output).not.toBeNull();
+    expect(output).toContain('createConfig(');
+    expect(output).toContain('experimental');
+    expect(output).toContain('xle');
+    expect(output).toMatch(/KpiCard:\s*\{\s*from:\s*['"]@\/components\/KpiCard['"]/);
+    expect(output).not.toMatch(/layout\s*:/);
+  });
+});
+
+describe('migrate-layout-components-to-experimental — placement', () => {
+  it('adds xle to a pre-existing experimental (no xle)', async () => {
+    const input = `export default {
+  experimental: { foo: true },
+  layout: { components: { KpiCard: '@/components/KpiCard' } },
+};
+`;
+    const output = await applyTransform(input);
+    expect(output).toContain('foo: true');
+    expect(output).toContain('xle');
+    expect(output).toMatch(/KpiCard:\s*\{\s*from:/);
+  });
+});
+
+describe('migrate-layout-components-to-experimental — no-op cases', () => {
+  it('returns null when there is no layout', async () => {
+    const input = `export default { theme: 'dark' };\n`;
+    const output = await applyTransform(input);
+    expect(output).toBeNull();
+  });
+
+  it('returns null when layout has no components', async () => {
+    const input = `export default { layout: { foo: 1 } };\n`;
+    // layout exists but has no components → no-op (return null) BEFORE the
+    // "extra key" check, because there is nothing to migrate.
+    const output = await applyTransform(input);
+    expect(output).toBeNull();
+  });
+
+  it('returns null on an already-migrated config (idempotence-ish)', async () => {
+    const input = `export default {
+  experimental: { xle: { components: { KpiCard: { from: '@/components/KpiCard' } } } },
+};
+`;
+    const output = await applyTransform(input);
+    expect(output).toBeNull();
+  });
+});
+
+describe('migrate-layout-components-to-experimental — bail (throw) cases', () => {
+  it('throws when experimental.xle already exists', async () => {
+    const input = `export default {
+  experimental: { xle: { components: {} } },
+  layout: { components: { KpiCard: '@/components/KpiCard' } },
+};
+`;
+    await expect(applyTransform(input)).rejects.toThrow(/experimental\.xle/);
+  });
+
+  it('throws when layout has an extra key besides components', async () => {
+    const input = `export default {
+  layout: {
+    components: { KpiCard: '@/components/KpiCard' },
+    spacing: 8,
+  },
+};
+`;
+    await expect(applyTransform(input)).rejects.toThrow(/other than/);
+  });
+
+  it('throws when an entry value is an identifier', async () => {
+    const input = `const Kpi = '@/components/KpiCard';
+export default {
+  layout: { components: { KpiCard: Kpi } },
+};
+`;
+    await expect(applyTransform(input)).rejects.toThrow(/cannot be safely migrated/);
+  });
+
+  it('throws when an entry value is a call expression', async () => {
+    const input = `export default {
+  layout: { components: { KpiCard: resolve('@/components/KpiCard') } },
+};
+`;
+    await expect(applyTransform(input)).rejects.toThrow(/cannot be safely migrated/);
+  });
+
+  it('throws on a non-object default export (variable reference)', async () => {
+    const input = `const config = { layout: { components: {} } };
+export default config;
+`;
+    await expect(applyTransform(input)).rejects.toThrow(/statically analyze/);
+  });
+});
+
+describe('migrate-layout-components-to-experimental — end-to-end via runConfigCodemod', () => {
+  it('rewrites astryx.config.mjs on disk through the unified runner', async () => {
+    const {runConfigCodemod} = await import('../../../run-codemod.mjs');
+    const {default: transform, meta} = await import(
+      '../migrate-layout-components-to-experimental.mjs'
+    );
+    const jscodeshift = (await import('jscodeshift')).default;
+
+    const originalCwd = process.cwd();
+    const tmpDir = fs.mkdtempSync(
+      path.join(process.cwd(), '.astryx-v013-codemod-test-'),
+    );
+    try {
+      process.chdir(tmpDir);
+      fs.writeFileSync(
+        path.join(tmpDir, 'package.json'),
+        JSON.stringify({name: 'consumer'}),
+      );
+      fs.writeFileSync(
+        path.join(tmpDir, 'astryx.config.mjs'),
+        `export default {
+  layout: { components: { KpiCard: '@/components/KpiCard' } },
+};
+`,
+      );
+
+      const entry = {
+        id: 'migrate-layout-components-to-experimental',
+        type: 'config',
+        codemod: {title: meta.title, transform},
+        package: 'core',
+        version: '0.1.3',
+      };
+      const log = {
+        step() {},
+        info() {},
+        success() {},
+        warn() {},
+        error() {},
+        message() {},
+      };
+      const result = runConfigCodemod(entry, {apply: true, log, jscodeshift});
+
+      expect(result.errors).toHaveLength(0);
+      expect(result.filesChanged).toBe(1);
+      const rewritten = fs.readFileSync(
+        path.join(tmpDir, 'astryx.config.mjs'),
+        'utf-8',
+      );
+      expect(rewritten).toContain('experimental');
+      expect(rewritten).toContain('xle');
+      expect(rewritten).toMatch(/KpiCard:\s*\{\s*from:/);
+      expect(rewritten).not.toMatch(/layout\s*:/);
+    } finally {
+      process.chdir(originalCwd);
+      fs.rmSync(tmpDir, {recursive: true, force: true});
+    }
+  });
+
+  it('surfaces a thrown bail as a structured error through runConfigCodemod', async () => {
+    const {runConfigCodemod} = await import('../../../run-codemod.mjs');
+    const {default: transform, meta} = await import(
+      '../migrate-layout-components-to-experimental.mjs'
+    );
+    const jscodeshift = (await import('jscodeshift')).default;
+
+    const originalCwd = process.cwd();
+    const tmpDir = fs.mkdtempSync(
+      path.join(process.cwd(), '.astryx-v013-codemod-test-'),
+    );
+    try {
+      process.chdir(tmpDir);
+      fs.writeFileSync(
+        path.join(tmpDir, 'package.json'),
+        JSON.stringify({name: 'consumer'}),
+      );
+      fs.writeFileSync(
+        path.join(tmpDir, 'astryx.config.mjs'),
+        `export default {
+  experimental: { xle: { components: {} } },
+  layout: { components: { KpiCard: '@/components/KpiCard' } },
+};
+`,
+      );
+
+      const entry = {
+        id: 'migrate-layout-components-to-experimental',
+        type: 'config',
+        codemod: {title: meta.title, transform},
+        package: 'core',
+        version: '0.1.3',
+      };
+      const log = {
+        step() {},
+        info() {},
+        success() {},
+        warn() {},
+        error() {},
+        message() {},
+      };
+      const result = runConfigCodemod(entry, {apply: true, log, jscodeshift});
+
+      expect(result.filesChanged).toBe(0);
+      expect(result.errors).toHaveLength(1);
+      expect(result.errors[0].error).toMatch(/experimental\.xle/);
+    } finally {
+      process.chdir(originalCwd);
+      fs.rmSync(tmpDir, {recursive: true, force: true});
+    }
+  });
+});

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

@@ -0,0 +1,19 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file v0.1.3 transform manifest
+ *
+ * Lists all codemods for the v0.1.3 release in the order they should run.
+ */
+
+import migrateLayoutComponentsToExperimental, {
+  meta as migrateLayoutComponentsToExperimentalMeta,
+} from './migrate-layout-components-to-experimental.mjs';
+
+export default [
+  {
+    name: 'migrate-layout-components-to-experimental',
+    transform: migrateLayoutComponentsToExperimental,
+    meta: migrateLayoutComponentsToExperimentalMeta,
+  },
+];