@astryxdesign/cli 0.1.2-canary.2532766 → 0.1.2-canary.3063e75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.2-canary.2532766",
+  "version": "0.1.2-canary.3063e75",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -75,9 +75,9 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/core": "0.1.2-canary.2532766",
-    "@astryxdesign/lab": "0.1.2-canary.2532766",
-    "@astryxdesign/theme-neutral": "0.1.2-canary.2532766",
+    "@astryxdesign/core": "0.1.2-canary.3063e75",
+    "@astryxdesign/lab": "0.1.2-canary.3063e75",
+    "@astryxdesign/theme-neutral": "0.1.2-canary.3063e75",
     "gpt-tokenizer": "^2.0.0"
   },
   "peerDependenciesMeta": {
@@ -92,9 +92,9 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/core": "0.1.2-canary.2532766",
-    "@astryxdesign/lab": "0.1.2-canary.2532766",
-    "@astryxdesign/theme-neutral": "0.1.2-canary.2532766",
+    "@astryxdesign/core": "0.1.2-canary.3063e75",
+    "@astryxdesign/lab": "0.1.2-canary.3063e75",
+    "@astryxdesign/theme-neutral": "0.1.2-canary.3063e75",
     "gpt-tokenizer": "^2.0.0"
   },
   "scripts": {

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

@@ -34,10 +34,6 @@ import migrateSelectorChildrenToRenderOption, {
   meta as migrateSelectorChildrenToRenderOptionMeta,
 } from './migrate-selector-children-to-render-option.mjs';
 
-import dropXdsPrefixImports, {
-  meta as dropXdsPrefixImportsMeta,
-} from './drop-xds-prefix-imports.mjs';
-
 export default [
   {
     name: 'rename-date-picker-to-input',
@@ -75,13 +71,4 @@ export default [
     transform: migrateSelectorChildrenToRenderOption,
     meta: migrateSelectorChildrenToRenderOptionMeta,
   },
-  {
-    // XDS-prefix migration (P2380608025). Optional + not tied to a version
-    // bump: consumers run it explicitly during their migration, e.g.
-    //   astryx upgrade --codemod drop-xds-prefix-imports --codemod-only --apply
-    name: 'drop-xds-prefix-imports',
-    transform: dropXdsPrefixImports,
-    meta: dropXdsPrefixImportsMeta,
-    optional: true,
-  },
 ];

package/src/codemods/transforms/v0.1.0/__tests__/v0.1.0-ordering.test.mjs

@@ -0,0 +1,81 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+
+/**
+ * End-to-end test proving the v0.1.0 manifest ordering: the prefix-drop
+ * codemod runs BEFORE migrate-xds-module-specifiers, so a prefixed identifier
+ * imported from `@xds/core` is un-prefixed AND the module path is rewritten to
+ * `@astryxdesign/core` in a single upgrade pass.
+ */
+async function applyManifestInOrder(source, filePath = 'test.tsx') {
+  const {default: manifest} = await import('../index.mjs');
+  const jscodeshift = (await import('jscodeshift')).default;
+  const j = jscodeshift.withParser('tsx');
+  const api = {jscodeshift: j, stats: () => {}, report: () => {}};
+
+  let current = source;
+  for (const {transform} of manifest) {
+    const file = {source: current, path: filePath};
+    const result = transform(file, api);
+    current = result ?? current;
+  }
+  return current;
+}
+
+describe('v0.1.0 codemod manifest ordering', () => {
+  it('runs drop-xds-prefix-imports before migrate-xds-module-specifiers', async () => {
+    const {default: manifest} = await import('../index.mjs');
+    const names = manifest.map(entry => entry.name);
+    const prefixDropIdx = names.indexOf('drop-xds-prefix-imports');
+    const specifierIdx = names.indexOf('migrate-xds-module-specifiers');
+    expect(prefixDropIdx).toBeGreaterThanOrEqual(0);
+    expect(specifierIdx).toBeGreaterThanOrEqual(0);
+    expect(prefixDropIdx).toBeLessThan(specifierIdx);
+  });
+
+  it('drop-xds-prefix-imports is mandatory (not optional) in v0.1.0', async () => {
+    const {default: manifest} = await import('../index.mjs');
+    const entry = manifest.find(e => e.name === 'drop-xds-prefix-imports');
+    expect(entry).toBeDefined();
+    expect(entry.optional).toBeFalsy();
+  });
+
+  it('un-prefixes useXDSTheme from @xds/core/theme AND renames the scope to @astryxdesign', async () => {
+    const input = [
+      "import {useXDSTheme} from '@xds/core/theme';",
+      '',
+      'function App() {',
+      '  const theme = useXDSTheme();',
+      '  return theme;',
+      '}',
+    ].join('\n');
+
+    const output = await applyManifestInOrder(input);
+
+    expect(output).toMatch(/import\s*\{useTheme\}\s*from\s*['"]@astryxdesign\/core\/theme['"]/);
+    expect(output).toContain('const theme = useTheme();');
+    // The prefixed name and old scope must be fully gone.
+    expect(output).not.toContain('useXDSTheme');
+    expect(output).not.toContain('@xds/core');
+  });
+
+  it('un-prefixes XDSButton and XDSIconRegistry alongside the scope rename', async () => {
+    const input = [
+      "import {XDSButton, XDSIconRegistry} from '@xds/core';",
+      '',
+      'const registry = new XDSIconRegistry();',
+      'const el = <XDSButton />;',
+    ].join('\n');
+
+    const output = await applyManifestInOrder(input);
+
+    expect(output).toMatch(/from\s*['"]@astryxdesign\/core['"]/);
+    expect(output).toContain('Button');
+    expect(output).toContain('IconRegistry');
+    expect(output).toContain('new IconRegistry()');
+    expect(output).not.toContain('XDSButton');
+    expect(output).not.toContain('XDSIconRegistry');
+    expect(output).not.toContain('@xds/core');
+  });
+});

package/src/codemods/transforms/{v0.0.15 → v0.1.0}/drop-xds-prefix-imports.mjs

@@ -4,12 +4,23 @@
  * @file Codemod: Drop the `XDS` prefix from @xds/core imports and their usages
  *
  * Part of the XDS-prefix migration (P2380608025). Rewrites consumer code from
- * the prefixed names to the bare compatibility aliases shipped in P1:
+ * the prefixed names to their bare equivalents:
  *
  *   XDSButton      -> Button
  *   XDSButtonProps -> ButtonProps
  *   useXDSTheme    -> useTheme
  *   useXDSToast    -> useToast
+ *   XDSIconRegistry-> IconRegistry
+ *
+ * Mandatory in v0.1.0: the prefixed compatibility aliases (which made both
+ * prefixed and bare names valid during the 0.0.x compat window) were dropped
+ * in v0.1.0, so the un-prefixing is now required for code to keep type-
+ * checking against @astryxdesign/core.
+ *
+ * Ordering: within the v0.1.0 manifest this runs BEFORE
+ * migrate-xds-module-specifiers so it still matches `@xds/core` imports (its
+ * source matcher) and un-prefixes the identifiers first; the specifier codemod
+ * then rewrites the module paths `@xds/*` -> `@astryxdesign/*`.
  *
  * Safety: this codemod ONLY renames identifiers that are imported from
  * `@xds/core` (bare or subpath, e.g. `@xds/core/Button`). It tracks the local
@@ -36,9 +47,9 @@ export const meta = {
   title: 'Drop XDS prefix from @xds/core imports (XDSButton -> Button)',
   description:
     'Rewrites @xds/core imports and their usages from the prefixed names ' +
-    '(XDSButton, useXDSTheme, XDSButtonProps) to the bare compatibility ' +
-    'aliases (Button, useTheme, ButtonProps). Only renames bindings imported ' +
-    'from @xds/core, leaving unrelated identifiers untouched.',
+    '(XDSButton, useXDSTheme, XDSIconRegistry, XDSButtonProps) to their bare ' +
+    'names (Button, useTheme, IconRegistry, ButtonProps). Only renames ' +
+    'bindings imported from @xds/core, leaving unrelated identifiers untouched.',
   pr: '#2880',
 };
 

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

@@ -6,11 +6,29 @@
  * Lists all codemods for the v0.1.0 release in the order they should run.
  */
 
+import dropXdsPrefixImports, {
+  meta as dropXdsPrefixImportsMeta,
+} from './drop-xds-prefix-imports.mjs';
+
 import migrateXdsModuleSpecifiers, {
   meta as migrateXdsModuleSpecifiersMeta,
 } from './migrate-xds-module-specifiers.mjs';
 
 export default [
+  {
+    // XDS-prefix migration (P2380608025). Mandatory in v0.1.0: the release
+    // dropped the prefixed compatibility aliases (useXDSTheme, XDSButton,
+    // XDSIconRegistry, ...), so consumers upgrading from 0.0.x MUST rewrite
+    // prefixed imports to their bare names.
+    //
+    // Ordered BEFORE migrate-xds-module-specifiers so it sees `@xds/core`
+    // imports (its source matcher) and un-prefixes the identifiers first;
+    // the specifier codemod then rewrites the paths to `@astryxdesign/core`.
+    // The runner preserves this array order (see runner.mjs).
+    name: 'drop-xds-prefix-imports',
+    transform: dropXdsPrefixImports,
+    meta: dropXdsPrefixImportsMeta,
+  },
   {
     name: 'migrate-xds-module-specifiers',
     transform: migrateXdsModuleSpecifiers,

package/templates/blocks/components/DateRangeInput/DateRangeInputWithPresets.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'DateRangeInput',
+  name: 'DateRangeInput — With Presets',
+  displayName: 'DateRangeInput — With Presets',
+  description:
+    'Date range picker with quick-select presets for common periods. Use for analytics dashboards, report filters, or any context where users frequently select standard time windows.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['DateRangeInput', 'Layout', 'Text'],
+};

package/templates/blocks/components/DateRangeInput/DateRangeInputWithPresets.tsx

@@ -0,0 +1,46 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {DateRangeInput} from '@astryxdesign/core/DateRangeInput';
+import type {DateRange} from '@astryxdesign/core/DateRangeInput';
+import type {ISODateString} from '@astryxdesign/core/Calendar';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+function daysAgo(n: number): ISODateString {
+  const d = new Date();
+  d.setDate(d.getDate() - n);
+  return d.toISOString().slice(0, 10) as ISODateString;
+}
+
+function today(): ISODateString {
+  return new Date().toISOString().slice(0, 10) as ISODateString;
+}
+
+const presets = [
+  {label: 'Last 7 days', getRange: () => ({start: daysAgo(7), end: today()})},
+  {label: 'Last 14 days', getRange: () => ({start: daysAgo(14), end: today()})},
+  {label: 'Last 30 days', getRange: () => ({start: daysAgo(30), end: today()})},
+  {label: 'Last 90 days', getRange: () => ({start: daysAgo(90), end: today()})},
+];
+
+export default function DateRangeInputWithPresets() {
+  const [range, setRange] = useState<DateRange | null>(null);
+
+  return (
+    <Stack direction="vertical" gap={4} width="100%" style={{maxWidth: 400}}>
+      <Text type="supporting" color="secondary">
+        {range ? `${range.start} → ${range.end}` : 'No range selected'}
+      </Text>
+      <DateRangeInput
+        label="Report period"
+        description="Use a preset or pick a custom range"
+        value={range}
+        onChange={setRange}
+        presets={presets}
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/DateRangeInput/DateRangeInputWithValidation.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'DateRangeInput',
+  name: 'DateRangeInput — Validation',
+  displayName: 'DateRangeInput — Validation',
+  description:
+    'Date range input in all three status states: error, warning, and success. Use to surface booking conflicts, flag high-demand periods, or confirm an available range.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['DateRangeInput', 'Layout'],
+};

package/templates/blocks/components/DateRangeInput/DateRangeInputWithValidation.tsx

@@ -0,0 +1,52 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {DateRangeInput} from '@astryxdesign/core/DateRangeInput';
+import type {DateRange} from '@astryxdesign/core/DateRangeInput';
+import {Stack} from '@astryxdesign/core/Layout';
+
+export default function DateRangeInputWithValidation() {
+  const [errorRange, setErrorRange] = useState<DateRange | null>({
+    start: '2026-01-01',
+    end: '2026-01-31',
+  });
+  const [warningRange, setWarningRange] = useState<DateRange | null>({
+    start: '2026-06-01',
+    end: '2026-06-30',
+  });
+  const [successRange, setSuccessRange] = useState<DateRange | null>({
+    start: '2026-03-01',
+    end: '2026-03-31',
+  });
+
+  return (
+    <Stack direction="vertical" gap={4} width="100%" style={{maxWidth: 400}}>
+      <DateRangeInput
+        label="Booking period"
+        value={errorRange}
+        onChange={setErrorRange}
+        status={{
+          type: 'error',
+          message: 'Selected dates are no longer available',
+        }}
+      />
+      <DateRangeInput
+        label="Preferred period"
+        value={warningRange}
+        onChange={setWarningRange}
+        status={{
+          type: 'warning',
+          message: 'High demand — limited availability',
+        }}
+      />
+      <DateRangeInput
+        label="Confirmed period"
+        value={successRange}
+        onChange={setSuccessRange}
+        status={{type: 'success', message: 'Dates confirmed and available'}}
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/DateTimeInput/DateTimeInputWithValidation.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'DateTimeInput',
+  name: 'DateTimeInput — Validation',
+  displayName: 'DateTimeInput — Validation',
+  description:
+    'DateTimeInput in all three status states: error, warning, and success. Use to surface scheduling conflicts, caution the user about edge cases, or confirm a valid datetime.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['DateTimeInput', 'Layout'],
+};

package/templates/blocks/components/DateTimeInput/DateTimeInputWithValidation.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {DateTimeInput} from '@astryxdesign/core/DateTimeInput';
+import type {ISODateTimeString} from '@astryxdesign/core/DateTimeInput';
+import {Stack} from '@astryxdesign/core/Layout';
+
+export default function DateTimeInputWithValidation() {
+  const [errorVal, setErrorVal] = useState<ISODateTimeString | undefined>(
+    '2026-01-25T09:00' as ISODateTimeString,
+  );
+  const [warningVal, setWarningVal] = useState<ISODateTimeString | undefined>(
+    '2026-12-25T14:00' as ISODateTimeString,
+  );
+  const [successVal, setSuccessVal] = useState<ISODateTimeString | undefined>(
+    '2026-03-10T10:30' as ISODateTimeString,
+  );
+
+  return (
+    <Stack direction="vertical" gap={4} width="100%" style={{maxWidth: 400}}>
+      <DateTimeInput
+        label="Meeting time"
+        value={errorVal}
+        onChange={setErrorVal}
+        status={{type: 'error', message: 'This time slot is already booked'}}
+      />
+      <DateTimeInput
+        label="Preferred time"
+        value={warningVal}
+        onChange={setWarningVal}
+        status={{type: 'warning', message: 'This falls outside business hours'}}
+      />
+      <DateTimeInput
+        label="Start time"
+        value={successVal}
+        onChange={setSuccessVal}
+        status={{type: 'success', message: 'Time confirmed'}}
+      />
+    </Stack>
+  );
+}