@astryxdesign/cli 0.4.5-canary.bc34238 → 0.4.5-canary.c2bb31b

package/assets/codemods/transforms/v0.1.0/__tests__/drop-xds-prefix-imports.test.mjs

@@ -212,4 +212,95 @@ describe('drop-xds-prefix-imports', () => {
     const output = await applyTransform(input);
     expect(output).toBe(input);
   });
+
+  it('aliases a component wrapper collision in place (XDS -> Astryx), leaving the local fn untouched', async () => {
+    const input = [
+      `import {XDSLinkProvider} from '@xds/core/Link';`,
+      `export default function LinkProvider({children}) {`,
+      `  return <XDSLinkProvider component={NextLink}>{children}</XDSLinkProvider>;`,
+      `}`,
+    ].join('\n');
+    const output = await applyTransform(input);
+    // Import aliased in place, local wrapper + its name untouched.
+    expect(output).toContain('import {LinkProvider as AstryxLinkProvider}');
+    expect(output).toContain('function LinkProvider({children})');
+    // JSX rewritten to the alias -> no self-recursion.
+    expect(output).toContain('<AstryxLinkProvider component={NextLink}>');
+    expect(output).not.toContain('XDSLinkProvider');
+    // No duplicate bare LinkProvider import.
+    expect(output).not.toMatch(/import \{LinkProvider\}/);
+  });
+
+  it('aliases a hook collision as use<Astryx>Name (not <Astryx>use)', async () => {
+    const input = [
+      `import {useXDSToast} from '@xds/core';`,
+      `function useToast() {`,
+      `  return useXDSToast();`,
+      `}`,
+    ].join('\n');
+    const output = await applyTransform(input);
+    expect(output).toContain('import {useToast as useAstryxToast}');
+    expect(output).toContain('function useToast()');
+    expect(output).toContain('return useAstryxToast();');
+    expect(output).not.toContain('useXDSToast');
+    // Must not produce the malformed `Astryxuse...` form.
+    expect(output).not.toContain('AstryxuseToast');
+  });
+
+  it('aliases on collision with a local default import binding', async () => {
+    const input = [
+      `import Link from 'next/link';`,
+      `import {XDSLink} from '@xds/core';`,
+      `export const a = <XDSLink href="/" />;`,
+      `export const b = <Link href="/" />;`,
+    ].join('\n');
+    const output = await applyTransform(input);
+    expect(output).toContain('import {Link as AstryxLink}');
+    expect(output).toContain(`import Link from 'next/link';`);
+    expect(output).toContain('<AstryxLink href="/" />');
+    expect(output).toContain('<Link href="/" />');
+    expect(output).not.toContain('XDSLink');
+  });
+
+  it('aliases on collision with a local type alias', async () => {
+    const input = [
+      `import type {XDSTab} from '@xds/core';`,
+      `type Tab = {id: string};`,
+      `const active: XDSTab = null as any;`,
+      `const local: Tab = {id: '1'};`,
+    ].join('\n');
+    const output = await applyTransform(input);
+    expect(output).toContain('Tab as AstryxTab');
+    expect(output).toContain('type Tab = {id: string};');
+    expect(output).toContain('const active: AstryxTab');
+    expect(output).toContain('const local: Tab');
+    expect(output).not.toContain('XDSTab');
+  });
+
+  it('aliases on collision with a local interface', async () => {
+    const input = [
+      `import type {XDSTheme} from '@xds/core';`,
+      `interface Theme {}`,
+      `const t: XDSTheme = null as any;`,
+      `const local: Theme = {};`,
+    ].join('\n');
+    const output = await applyTransform(input);
+    expect(output).toContain('Theme as AstryxTheme');
+    expect(output).toContain('interface Theme {}');
+    expect(output).toContain('const t: AstryxTheme');
+    expect(output).not.toContain('XDSTheme');
+  });
+
+  it('still bare-renames when there is NO colliding local binding', async () => {
+    const input = [
+      `import {XDSButton} from '@xds/core';`,
+      `export const App = () => <XDSButton label="Hi" />;`,
+    ].join('\n');
+    const output = await applyTransform(input);
+    // No local `Button` binding -> existing blind bare-rename behavior kept.
+    expect(output).toContain(`import {Button} from '@xds/core';`);
+    expect(output).toContain('<Button label="Hi" />');
+    expect(output).not.toContain('AstryxButton');
+    expect(output).not.toContain('XDSButton');
+  });
 });

package/assets/codemods/transforms/v0.1.0/drop-xds-prefix-imports.mjs

@@ -64,6 +64,22 @@ export const meta = {
 
 const XDS_CORE_SOURCE = /^@xds\/core(\/.*)?$/;
 
+/**
+ * Compute a collision alias for an XDS-prefixed identifier by replacing the
+ * `XDS` segment IN PLACE with `Astryx` (as opposed to prefixing the bare name).
+ * This keeps hook names well-formed:
+ *
+ *   XDSButton       -> AstryxButton
+ *   XDSLinkProvider -> AstryxLinkProvider
+ *   useXDSToast     -> useAstryxToast   (NOT AstryxuseToast)
+ *
+ * Only the first `XDS` occurrence is replaced, matching how `bareName` strips a
+ * single leading prefix.
+ */
+function aliasName(/** @type {any} */ name) {
+  return name.replace('XDS', 'Astryx');
+}
+
 /**
  * Compute the bare (unprefixed) name for an XDS-prefixed identifier.
  * Returns null if the name is not XDS-prefixed in a renameable way.
@@ -190,7 +206,12 @@ export default function transformer(file, api) {
     if (!node) return;
     if (
       (node.type === 'FunctionDeclaration' ||
-        node.type === 'ClassDeclaration') &&
+        node.type === 'ClassDeclaration' ||
+        // Type-only bindings share the module namespace for our purposes: a
+        // `type Tab`/`interface Theme` collides with an un-prefixed `XDSTab`/
+        // `XDSTheme` type import and would create a duplicate declaration.
+        node.type === 'TSTypeAliasDeclaration' ||
+        node.type === 'TSInterfaceDeclaration') &&
       node.id
     ) {
       existingBindings.add(node.id.name);
@@ -239,10 +260,13 @@ export default function transformer(file, api) {
       if (bare !== importedName && existingBindings.has(bare)) {
         // COLLISION: the bare name is already a top-level binding in this file
         // (e.g. a local `export function CodeBlock` alongside imported
-        // `XDSCodeBlock`). Un-prefixing directly would create a duplicate
-        // declaration, so alias the import to `Astryx<Name>` and rename the
+        // `XDSCodeBlock`, or a `type Tab` alongside `XDSTab`). Un-prefixing
+        // directly would create a duplicate declaration (TS2451), so alias the
+        // import by replacing `XDS` with `Astryx` in place and rename the
         // import's references to that alias, leaving the local binding intact.
-        const alias = `Astryx${bare}`;
+        // In-place replacement keeps hooks well-formed: `useXDSToast` becomes
+        // `useAstryxToast`, not `AstryxuseToast`.
+        const alias = aliasName(importedName);
         localRenames.set(importedName, alias);
         existingBindings.add(alias);
         hasChanges = true;

package/assets/templates/blocks/components/Selector/SelectorOptionDescriptions.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Selector',
+  name: 'Selector — Option descriptions',
+  displayName: 'Selector — Option descriptions',
+  description:
+    'Options carry a description, so the dropdown draws a two-line row. The closed trigger is sized by padding, so it is the size token for a one-line value and exactly one line taller for a two-line one — both on the 4px rhythm. An InputGroup pins the row, so the value folds back onto one line there.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Selector', 'SelectorOption', 'InputGroup', 'Button', 'Stack'],
+};

package/assets/templates/blocks/components/Selector/SelectorOptionDescriptions.tsx

@@ -0,0 +1,76 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Selector, SelectorOption} from '@astryxdesign/core/Selector';
+import {InputGroup} from '@astryxdesign/core/InputGroup';
+import {Button} from '@astryxdesign/core/Button';
+import {Stack} from '@astryxdesign/core/Layout';
+import {LockClosedIcon, GlobeAltIcon} from '@heroicons/react/24/outline';
+
+const VISIBILITY = [
+  {
+    value: 'private',
+    label: 'Private',
+    icon: LockClosedIcon,
+    description: 'Only members can access this space and its content.',
+  },
+  {
+    value: 'public',
+    label: 'Public',
+    icon: GlobeAltIcon,
+    description: 'Anyone at the company can find and join this space.',
+  },
+];
+
+export default function SelectorOptionDescriptions() {
+  const [condensed, setCondensed] = useState<string | undefined>('private');
+  const [full, setFull] = useState<string | undefined>('private');
+  const [grouped, setGrouped] = useState<string | undefined>('private');
+
+  return (
+    <Stack direction="vertical" gap={6}>
+      <Selector
+        style={{width: 320}}
+        label="Visibility"
+        description="Default trigger: one line at the size token."
+        options={VISIBILITY}
+        value={condensed}
+        onChange={setCondensed}
+      />
+      <Selector
+        style={{width: 320}}
+        label="Visibility"
+        description="A stacked SelectorOption: the description gets its own line, and the trigger grows by exactly one line."
+        options={VISIBILITY}
+        value={full}
+        onChange={setFull}
+        renderValue={option => (
+          <SelectorOption
+            icon={option.icon}
+            label={option.label ?? option.value}
+            description={option.description}
+          />
+        )}
+      />
+      <InputGroup label="Visibility">
+        <Selector
+          label="Visibility"
+          isLabelHidden
+          options={VISIBILITY}
+          value={grouped}
+          onChange={setGrouped}
+          renderValue={option => (
+            <SelectorOption
+              icon={option.icon}
+              label={option.label ?? option.value}
+              description={option.description}
+            />
+          )}
+        />
+        <Button label="Save" />
+      </InputGroup>
+    </Stack>
+  );
+}

package/package.json

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