@astryxdesign/cli 0.1.4-canary.ff77e1c → 0.1.4

package/templates/blocks/components/CommandPaletteGroup/CommandPaletteGroupShowcase.tsx

@@ -3,45 +3,66 @@
 'use client';
 
 import {useMemo} from 'react';
-import {CommandPalette} from '@astryxdesign/core/CommandPalette';
+import {
+  CommandPalette,
+  CommandPaletteList,
+  CommandPaletteGroup,
+  CommandPaletteItem,
+} from '@astryxdesign/core/CommandPalette';
 import {createStaticSource} from '@astryxdesign/core/Typeahead';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
 
 export default function CommandPaletteGroupShowcase() {
   const source = useMemo(
     () =>
       createStaticSource([
-        {
-          id: 'index',
-          label: 'index.tsx',
-          auxiliaryData: {group: 'Recent Files'},
-        },
+        {id: 'index', label: 'index.tsx', auxiliaryData: {group: 'Recent Files'}},
         {id: 'app', label: 'App.tsx', auxiliaryData: {group: 'Recent Files'}},
-        {
-          id: 'settings',
-          label: 'Open Settings',
-          auxiliaryData: {group: 'Commands'},
-        },
-        {
-          id: 'terminal',
-          label: 'Toggle Terminal',
-          auxiliaryData: {group: 'Commands'},
-        },
-        {
-          id: 'theme',
-          label: 'Color Theme',
-          auxiliaryData: {group: 'Preferences'},
-        },
+        {id: 'settings', label: 'Open Settings', auxiliaryData: {group: 'Commands'}},
+        {id: 'terminal', label: 'Toggle Terminal', auxiliaryData: {group: 'Commands'}},
+        {id: 'theme', label: 'Color Theme', auxiliaryData: {group: 'Preferences'}},
         {id: 'font', label: 'Font Size', auxiliaryData: {group: 'Preferences'}},
       ]),
     [],
   );
 
   return (
-    <CommandPalette
-      isOpen
-      isInline
-      onOpenChange={() => {}}
-      searchSource={source}
-    />
+    <Stack direction="vertical" gap={4}>
+      <Stack direction="vertical" gap={1}>
+        <Text type="supporting" color="secondary">
+          Data-driven grouping (auxiliaryData.group)
+        </Text>
+        <CommandPalette
+          isOpen
+          isInline
+          onOpenChange={() => {}}
+          searchSource={source}
+        />
+      </Stack>
+      <Stack direction="vertical" gap={1}>
+        <Text type="supporting" color="secondary">
+          Composed form (CommandPaletteGroup + CommandPaletteItem)
+        </Text>
+        <CommandPaletteList>
+          <CommandPaletteGroup heading="Navigation">
+            <CommandPaletteItem value="home" onSelect={() => {}}>
+              Home
+            </CommandPaletteItem>
+            <CommandPaletteItem value="dashboard" onSelect={() => {}}>
+              Dashboard
+            </CommandPaletteItem>
+          </CommandPaletteGroup>
+          <CommandPaletteGroup heading="Actions">
+            <CommandPaletteItem value="new-file" onSelect={() => {}}>
+              New File
+            </CommandPaletteItem>
+            <CommandPaletteItem value="save" onSelect={() => {}}>
+              Save All
+            </CommandPaletteItem>
+          </CommandPaletteGroup>
+        </CommandPaletteList>
+      </Stack>
+    </Stack>
   );
 }

package/templates/blocks/components/CommandPaletteItem/CommandPaletteItemShowcase.tsx

@@ -3,10 +3,16 @@
 'use client';
 
 import {useMemo, type CSSProperties} from 'react';
-import {CommandPalette} from '@astryxdesign/core/CommandPalette';
+import {
+  CommandPalette,
+  CommandPaletteList,
+  CommandPaletteItem,
+} from '@astryxdesign/core/CommandPalette';
 import {Text} from '@astryxdesign/core/Text';
 import {Kbd} from '@astryxdesign/core/Kbd';
+import {Icon} from '@astryxdesign/core/Icon';
 import {createStaticSource} from '@astryxdesign/core/Typeahead';
+import {Stack} from '@astryxdesign/core/Layout';
 import type {SearchableItem} from '@astryxdesign/core/Typeahead';
 
 const itemLabel: CSSProperties = {
@@ -17,21 +23,9 @@ type CommandItem = SearchableItem<{shortcut?: string}>;
 
 const commands: CommandItem[] = [
   {id: 'save', label: 'Save File', auxiliaryData: {shortcut: 'mod+s'}},
-  {
-    id: 'find',
-    label: 'Find in Files',
-    auxiliaryData: {shortcut: 'mod+shift+f'},
-  },
-  {
-    id: 'palette',
-    label: 'Command Palette',
-    auxiliaryData: {shortcut: 'mod+shift+p'},
-  },
-  {
-    id: 'terminal',
-    label: 'Toggle Terminal',
-    auxiliaryData: {shortcut: 'ctrl+`'},
-  },
+  {id: 'find', label: 'Find in Files', auxiliaryData: {shortcut: 'mod+shift+f'}},
+  {id: 'palette', label: 'Command Palette', auxiliaryData: {shortcut: 'mod+shift+p'}},
+  {id: 'terminal', label: 'Toggle Terminal', auxiliaryData: {shortcut: 'ctrl+`'}},
   {id: 'sidebar', label: 'Toggle Sidebar', auxiliaryData: {shortcut: 'mod+b'}},
 ];
 
@@ -39,21 +33,50 @@ export default function CommandPaletteItemShowcase() {
   const source = useMemo(() => createStaticSource(commands), []);
 
   return (
-    <CommandPalette
-      isOpen
-      isInline
-      onOpenChange={() => {}}
-      searchSource={source}
-      renderItem={(item: CommandItem) => (
-        <>
-          <Text type="body" style={itemLabel}>
-            {item.label}
-          </Text>
-          {item.auxiliaryData?.shortcut && (
-            <Kbd keys={item.auxiliaryData.shortcut} />
+    <Stack direction="vertical" gap={4}>
+      <Stack direction="vertical" gap={1}>
+        <Text type="supporting" color="secondary">
+          Custom renderItem with keyboard shortcuts
+        </Text>
+        <CommandPalette
+          isOpen
+          isInline
+          onOpenChange={() => {}}
+          searchSource={source}
+          renderItem={(item: CommandItem) => (
+            <>
+              <Text type="body" style={itemLabel}>
+                {item.label}
+              </Text>
+              {item.auxiliaryData?.shortcut && (
+                <Kbd keys={item.auxiliaryData.shortcut} />
+              )}
+            </>
           )}
-        </>
-      )}
-    />
+        />
+      </Stack>
+      <Stack direction="vertical" gap={1}>
+        <Text type="supporting" color="secondary">
+          Composed items with icons and states
+        </Text>
+        <CommandPaletteList>
+          <CommandPaletteItem value="home" onSelect={() => {}}>
+            <Icon icon="externalLink" size="sm" />
+            <Text type="body" style={itemLabel}>Home</Text>
+          </CommandPaletteItem>
+          <CommandPaletteItem value="search" isHighlighted onSelect={() => {}}>
+            <Icon icon="search" size="sm" />
+            <Text type="body" style={itemLabel}>Search (highlighted)</Text>
+          </CommandPaletteItem>
+          <CommandPaletteItem value="selected" isSelected onSelect={() => {}}>
+            <Icon icon="check" size="sm" />
+            <Text type="body" style={itemLabel}>Selected item</Text>
+          </CommandPaletteItem>
+          <CommandPaletteItem value="disabled" isDisabled>
+            <Text type="body" style={itemLabel}>Disabled item</Text>
+          </CommandPaletteItem>
+        </CommandPaletteList>
+      </Stack>
+    </Stack>
   );
 }

package/templates/pages/classic-gallery/page.tsx

@@ -110,7 +110,7 @@ export default function ClassicGalleryTemplate() {
 
   return (
     <Layout
-      height="fill"
+      height="auto"
       content={
         <LayoutContent padding={0}>
           <Center axis="horizontal">

package/templates/pages/dashboard/page.tsx

@@ -729,7 +729,7 @@ function TableCard<T extends {id: string}>({
 export default function DashboardTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       content={
         <LayoutContent padding={6}>
           <VStack gap={6}>

package/templates/pages/documentation/page.tsx

@@ -209,7 +209,7 @@ const COMPONENT_CATEGORIES = [
 export default function DocumentationOverviewPage() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1200}
       content={
         <LayoutContent padding={8}>

package/templates/pages/kanban-board/page.tsx

@@ -439,11 +439,8 @@ export default function KanbanBoardTemplate() {
     let cb = columnRefCbs.current.get(id);
     if (!cb) {
       cb = el => {
-        if (el) {
-          columnEls.current.set(id, el);
-        } else {
-          columnEls.current.delete(id);
-        }
+        if (el) {columnEls.current.set(id, el);}
+        else {columnEls.current.delete(id);}
       };
       columnRefCbs.current.set(id, cb);
     }
@@ -454,11 +451,8 @@ export default function KanbanBoardTemplate() {
     let cb = cardRefCbs.current.get(id);
     if (!cb) {
       cb = el => {
-        if (el) {
-          cardEls.current.set(id, el);
-        } else {
-          cardEls.current.delete(id);
-        }
+        if (el) {cardEls.current.set(id, el);}
+        else {cardEls.current.delete(id);}
       };
       cardRefCbs.current.set(id, cb);
     }
@@ -493,9 +487,7 @@ export default function KanbanBoardTemplate() {
   ): DropTarget | null => {
     for (const [colId, el] of Array.from(columnEls.current.entries())) {
       const r = el.getBoundingClientRect();
-      if (px < r.left || px > r.right || py < r.top || py > r.bottom) {
-        continue;
-      }
+      if (px < r.left || px > r.right || py < r.top || py > r.bottom) {continue;}
 
       const ids = itemsByColumn[colId]
         .filter(it => it.id !== draggedId)
@@ -504,9 +496,7 @@ export default function KanbanBoardTemplate() {
       let index = ids.length;
       for (let i = 0; i < ids.length; i++) {
         const cardEl = cardEls.current.get(ids[i]);
-        if (!cardEl) {
-          continue;
-        }
+        if (!cardEl) {continue;}
         const cr = cardEl.getBoundingClientRect();
         if (py < cr.top + cr.height / 2) {
           index = i;
@@ -523,27 +513,21 @@ export default function KanbanBoardTemplate() {
   const commitDrag = (id: string, target: DropTarget) => {
     setItems(prev => {
       const moved = prev.find(it => it.id === id);
-      if (!moved) {
-        return prev;
-      }
+      if (!moved) {return prev;}
 
       const rest = prev.filter(it => it.id !== id);
       const updated: WorkItem = {...moved, column: target.column};
       const colItems = rest.filter(it => it.column === target.column);
       const anchor = colItems[target.index];
 
-      if (!anchor) {
-        return [...rest, updated];
-      }
+      if (!anchor) {return [...rest, updated];}
       const at = rest.indexOf(anchor);
       return [...rest.slice(0, at), updated, ...rest.slice(at)];
     });
   };
 
   const onCardPointerDown = (e: ReactPointerEvent, id: string) => {
-    if (e.button !== 0) {
-      return;
-    }
+    if (e.button !== 0) {return;}
     // Let the card's own controls (the actions menu) handle the press.
     if (
       (e.target as HTMLElement).closest(
@@ -554,9 +538,7 @@ export default function KanbanBoardTemplate() {
     }
 
     const el = cardEls.current.get(id);
-    if (!el) {
-      return;
-    }
+    if (!el) {return;}
 
     const rect = el.getBoundingClientRect();
     const startX = e.clientX;
@@ -592,9 +574,7 @@ export default function KanbanBoardTemplate() {
 
     const onUp = () => {
       teardownRef.current?.();
-      if (started && target) {
-        commitDrag(id, target);
-      }
+      if (started && target) {commitDrag(id, target);}
       setDrag(null);
     };
 
@@ -614,9 +594,7 @@ export default function KanbanBoardTemplate() {
 
   // Suppress selection while dragging and detach listeners on unmount.
   useEffect(() => {
-    if (!isDragging) {
-      return;
-    }
+    if (!isDragging) {return;}
     const previous = document.body.style.userSelect;
     document.body.style.userSelect = 'none';
     return () => {
@@ -634,9 +612,7 @@ export default function KanbanBoardTemplate() {
     const ghostTarget =
       drag && drag.target && drag.target.column === colId ? drag : null;
 
-    if (visible.length === 0 && !ghostTarget) {
-      return null;
-    }
+    if (visible.length === 0 && !ghostTarget) {return null;}
 
     const nodes: ReactNode[] = visible.map(it => (
       <BoardCard

package/templates/pages/mixed-gallery/page.tsx

@@ -112,7 +112,7 @@ function GalleryCard({
 export default function MixedGalleryTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1400}
       content={
         <LayoutContent padding={6}>

package/templates/pages/payment-form/page.tsx

@@ -153,6 +153,10 @@ const fmt = (n: number) => `$${n.toFixed(2)}`;
 // :root by `@astryxdesign/core/astryx.css`). No StyleX compiler required.
 
 const fullWidth: CSSProperties = {width: '100%'};
+// LayoutContent clips overflow by default, which traps position:sticky
+// children (the sticky order summary). With height="auto" the page scrolls
+// at the window, so let overflow be visible here so sticky can pin.
+const visibleOverflow: CSSProperties = {overflow: 'visible'};
 // Form column flex-basis so the two checkout columns share width evenly.
 const formColBasis: CSSProperties = {flexBasis: 0};
 // Space the Order Summary content below its collapsible trigger title.
@@ -262,9 +266,9 @@ export default function PaymentFormPage() {
 
   return (
     <Layout
-      height="fill"
+      height="auto"
       content={
-        <LayoutContent padding={0}>
+        <LayoutContent padding={0} style={visibleOverflow}>
           <Center axis="horizontal">
             <Section
               variant="transparent"

package/templates/pages/product-detail/page.tsx

@@ -3,7 +3,12 @@
 'use client';
 
 import {useState} from 'react';
-import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
+import {
+  VStack,
+  HStack,
+  Layout,
+  LayoutContent,
+} from '@astryxdesign/core/Layout';
 import {Center} from '@astryxdesign/core/Center';
 import {Grid} from '@astryxdesign/core/Grid';
 import {Text, Heading} from '@astryxdesign/core/Text';
@@ -198,7 +203,10 @@ function ProductInfo() {
       <VStack gap={2}>
         <Text type="label">Finish</Text>
         <VStack hAlign="start">
-          <SegmentedControl value={finish} onChange={setFinish} label="Finish">
+          <SegmentedControl
+            value={finish}
+            onChange={setFinish}
+            label="Finish">
             {FINISHES.map(f => (
               <SegmentedControlItem
                 key={f.value}
@@ -278,7 +286,7 @@ export default function ProductDetailTemplate() {
 
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1200}
       content={
         <LayoutContent padding={6}>

package/templates/pages/product-gallery/page.tsx

@@ -119,7 +119,7 @@ function ProductCard({product}: {product: Product}) {
 export default function ProductGalleryTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1200}
       content={
         <LayoutContent padding={6}>

package/templates/pages/settings/page.tsx

@@ -70,7 +70,7 @@ export default function SettingsTemplate() {
 
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1440}
       header={
         <LayoutHeader hasDivider>

package/templates/pages/side-gallery/page.tsx

@@ -101,7 +101,7 @@ function ImageGrid() {
 export default function SideGalleryTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       contentWidth={1400}
       content={
         <LayoutContent padding={6}>

package/templates/pages/table-page/page.tsx

@@ -389,7 +389,7 @@ export default function TablePageTemplate() {
 
   return (
     <Layout
-      height="fill"
+      height="auto"
       header={
         <LayoutHeader hasDivider>
           <HStack gap={2} vAlign="center">

package/templates/pages/table-page-chart/page.tsx

@@ -19,7 +19,13 @@ import {Link} from '@astryxdesign/core/Link';
 import {Thumbnail} from '@astryxdesign/core/Thumbnail';
 import {Table, proportional, pixel} from '@astryxdesign/core/Table';
 import type {TableColumn} from '@astryxdesign/core/Table';
-import {Chart, ChartGrid, ChartAxis, area, line} from '@astryxdesign/charts';
+import {
+  ChartV2 as Chart,
+  ChartGrid,
+  ChartAxis,
+  area,
+  line,
+} from '@astryxdesign/lab';
 import {
   FunnelIcon,
   ArrowDownTrayIcon,
@@ -475,13 +481,17 @@ const columns: TableColumn<OrderRow>[] = [
     key: 'amount',
     header: 'Amount',
     width: pixel(90),
-    renderCell: (item: OrderRow) => <Text type="body">${item.amount}</Text>,
+    renderCell: (item: OrderRow) => (
+      <Text type="body">${item.amount}</Text>
+    ),
   },
   {
     key: 'customer',
     header: 'Customer',
     width: proportional(2),
-    renderCell: (item: OrderRow) => <Text type="body">{item.customer}</Text>,
+    renderCell: (item: OrderRow) => (
+      <Text type="body">{item.customer}</Text>
+    ),
   },
   {
     key: 'email',
@@ -513,7 +523,7 @@ const columns: TableColumn<OrderRow>[] = [
 export default function TablePageChartTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       header={
         <LayoutHeader hasDivider>
           <HStack gap={2} vAlign="center">

package/templates/pages/table-page-heatmap-status/page.tsx

@@ -430,7 +430,7 @@ function OutageHeatmap() {
 export default function TablePageHeatmapStatusTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       header={
         <LayoutHeader hasDivider>
           <HStack gap={2} vAlign="center">

package/templates/pages/table-page-shoe-store-heatmap/page.tsx

@@ -19,7 +19,13 @@ import {Link} from '@astryxdesign/core/Link';
 import {Thumbnail} from '@astryxdesign/core/Thumbnail';
 import {Table, proportional, pixel} from '@astryxdesign/core/Table';
 import type {TableColumn} from '@astryxdesign/core/Table';
-import {Chart, ChartGrid, ChartAxis, area, line} from '@astryxdesign/charts';
+import {
+  ChartV2 as Chart,
+  ChartGrid,
+  ChartAxis,
+  area,
+  line,
+} from '@astryxdesign/lab';
 import {
   FunnelIcon,
   ArrowDownTrayIcon,
@@ -29,7 +35,11 @@ import {
 // ============= DATA =============
 
 type ProductCategory =
-  'Running' | 'Lifestyle' | 'Basketball' | 'Training' | 'Skateboarding';
+  | 'Running'
+  | 'Lifestyle'
+  | 'Basketball'
+  | 'Training'
+  | 'Skateboarding';
 
 function shoeSvg(bg: string, accent: string) {
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" rx="12" fill="${bg}"/><g transform="translate(22.5, 22.5) scale(2.29)" fill="none" stroke="${accent}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 10.42 4.8-5.07"/><path d="M19 18h3"/><path d="M9.5 22 21.414 9.415A2 2 0 0 0 21.2 6.4l-5.61-4.208A1 1 0 0 0 14 3v2a2 2 0 0 1-1.394 1.906L8.677 8.053A1 1 0 0 0 8 9c-.155 6.393-2.082 9-4 9a2 2 0 0 0 0 4h14"/></g></svg>`;
@@ -829,13 +839,17 @@ const columns: TableColumn<OrderRow>[] = [
     key: 'amount',
     header: 'Amount',
     width: pixel(90),
-    renderCell: (item: OrderRow) => <Text type="body">${item.amount}</Text>,
+    renderCell: (item: OrderRow) => (
+      <Text type="body">${item.amount}</Text>
+    ),
   },
   {
     key: 'customer',
     header: 'Customer',
     width: proportional(2),
-    renderCell: (item: OrderRow) => <Text type="body">{item.customer}</Text>,
+    renderCell: (item: OrderRow) => (
+      <Text type="body">{item.customer}</Text>
+    ),
   },
   {
     key: 'email',
@@ -867,7 +881,7 @@ const columns: TableColumn<OrderRow>[] = [
 export default function TablePageShoeStoreHeatmapTemplate() {
   return (
     <Layout
-      height="fill"
+      height="auto"
       header={
         <LayoutHeader hasDivider>
           <HStack gap={2} vAlign="center">

package/src/codemods/transforms/v0.1.5/__tests__/rename-switch-label-spacing-default-to-hug.test.mjs

@@ -1,93 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-import {describe, it, expect} from 'vitest';
-
-async function applyTransform(source) {
-  const {default: transform} =
-    await import('../rename-switch-label-spacing-default-to-hug.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-switch-label-spacing-default-to-hug', () => {
-  it('renames Switch labelSpacing="default" to labelSpacing="hug"', async () => {
-    const input = `<Switch label="Notify" value={on} labelSpacing="default" />`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'hug'");
-    expect(output).not.toContain('default');
-  });
-
-  it("renames expression-container labelSpacing={'default'}", async () => {
-    const input = `<Switch label="Notify" value={on} labelSpacing={'default'} />`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'hug'");
-    expect(output).not.toContain("'default'");
-  });
-
-  it('renames default inside a ternary labelSpacing expression', async () => {
-    const input = `<Switch label="Notify" value={on} labelSpacing={isRow ? 'spread' : 'default'} />`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'hug'");
-    expect(output).toContain("'spread'");
-    expect(output).not.toContain("'default'");
-  });
-
-  it('does not change labelSpacing="spread"', async () => {
-    const input = `<Switch label="Notify" value={on} labelSpacing="spread" />`;
-    const output = await applyTransform(input);
-    expect(output).toBe(input);
-  });
-
-  it('does not touch labelSpacing="default" on non-Switch components', async () => {
-    const input = `<LegacyToggle labelSpacing="default" />`;
-    const output = await applyTransform(input);
-    expect(output).toBe(input);
-  });
-
-  it('does not touch other props with a "default" value on Switch', async () => {
-    const input = `<Switch label="Notify" value={on} data-variant="default" />`;
-    const output = await applyTransform(input);
-    expect(output).toBe(input);
-  });
-
-  it('does not touch unrelated "default" string literals', async () => {
-    const input = `const theme = {mode: 'default', label: 'Default Mode'};`;
-    const output = await applyTransform(input);
-    expect(output).toBe(input);
-  });
-
-  it('renames object labelSpacing prop in files importing Switch', async () => {
-    const input = `import {Switch} from '@astryxdesign/core/Switch';
-const cfg = {labelSpacing: 'default'};`;
-    const output = await applyTransform(input);
-    expect(output).toContain("labelSpacing: 'hug'");
-    expect(output).not.toContain("'default'");
-  });
-
-  it("renames labelSpacing: 'default' as const in files importing Switch", async () => {
-    const input = `import {Switch} from '@astryxdesign/core/Switch';
-const ROWS = [{labelSpacing: 'default' as const, label: 'Adjacent'}];`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'hug' as const");
-    expect(output).not.toContain("'default'");
-  });
-
-  it('does not rename object labelSpacing prop when Switch is not imported', async () => {
-    const input = `const cfg = {labelSpacing: 'default'};`;
-    const output = await applyTransform(input);
-    expect(output).toBe(input);
-  });
-
-  it('renames Storybook argTypes options in files importing Switch', async () => {
-    const input = `import {Switch} from '@astryxdesign/core/Switch';
-const meta = {argTypes: {labelSpacing: {control: 'select', options: ['default', 'spread']}}};`;
-    const output = await applyTransform(input);
-    expect(output).toContain("'hug'");
-    expect(output).toContain("'spread'");
-    expect(output).not.toContain("'default'");
-  });
-});