@astryxdesign/cli 0.1.2-canary.b712653 → 0.1.2-canary.bbf77ea

package/src/utils/github.mjs

@@ -4,69 +4,9 @@
  * @file GitHub utilities for Astryx CLI
  *
  * Shared helpers for interacting with the GitHub CLI (`gh`).
- * Used by gap-report and swizzle commands.
- *
- * Gap reporting can be configured via astryx.config.mjs:
- *   gapReport: false                                — disable entirely
- *   gapReport: { command: './scripts/report-gap.sh' } — run custom script (receives JSON on stdin)
- *
- * Or via environment variable:
- *   ASTRYX_GAP_REPORT=off                              — disable entirely
- *   ASTRYX_GAP_REPORT=./scripts/report-gap.sh          — run custom script
  */
 
 import {execFileSync} from 'node:child_process';
-import * as path from 'node:path';
-import {loadConfig} from '../lib/config.mjs';
-
-/** Default target repository for gap report issues. */
-const DEFAULT_REPO = 'facebookexperimental/xds';
-
-/** Gap report category options. */
-export const GAP_CATEGORIES = [
-  {value: 'missing_component', label: 'Missing component'},
-  {value: 'missing_variant', label: 'Missing variant or prop'},
-  {value: 'layout_gap', label: 'Layout gap'},
-  {value: 'styling_gap', label: 'Styling gap'},
-  {value: 'a11y_gap', label: 'Accessibility gap'},
-  {value: 'api_friction', label: 'API friction'},
-  {value: 'docs_gap', label: 'Documentation gap'},
-  {value: 'other', label: 'Other'},
-];
-
-/**
- * Load gap report configuration.
- *
- * Priority: env var > astryx.config.mjs > default (GitHub issue)
- *
- * Returns { enabled: boolean, command?: string }
- *   - enabled: false → gap reporting disabled
- *   - command: string → run this script instead of creating a GitHub issue
- *   - neither → default behavior (GitHub issue to facebookexperimental/xds)
- */
-export async function loadGapReportConfig() {
-  // 1. Check environment variable
-  const envVar = process.env.ASTRYX_GAP_REPORT;
-  if (envVar) {
-    if (envVar === 'off' || envVar === 'false' || envVar === '0') {
-      return {enabled: false};
-    }
-    // Treat as custom command
-    return {enabled: true, command: envVar};
-  }
-
-  // 2. Check astryx.config.mjs + integration manifests
-  const config = await loadConfig(process.cwd());
-  if (config.gapReport !== undefined) {
-    if (config.gapReport === false) return {enabled: false};
-    if (config.gapReport?.command) {
-      return {enabled: true, command: config.gapReport.command};
-    }
-  }
-
-  // 3. Default
-  return {enabled: true};
-}
 
 /**
  * Check if `gh` CLI is installed and authenticated.
@@ -80,180 +20,3 @@ export function checkGhCli() {
     return false;
   }
 }
-
-/**
- * Idempotently create the `gap-report` and `gap-analysis` labels.
- * Uses `--force` to avoid errors if labels already exist.
- */
-function ensureGapReportLabel() {
-  try {
-    execFileSync(
-      'gh',
-      [
-        'label',
-        'create',
-        'gap-report',
-        '--repo',
-        DEFAULT_REPO,
-        '--color',
-        'D4C5F9',
-        '--description',
-        'Auto-filed gap report from swizzle/gap-report CLI',
-        '--force',
-      ],
-      {stdio: 'ignore'},
-    );
-    execFileSync(
-      'gh',
-      [
-        'label',
-        'create',
-        'gap-analysis',
-        '--repo',
-        DEFAULT_REPO,
-        '--color',
-        '0E8A16',
-        '--description',
-        'Curated gap analysis summary',
-        '--force',
-      ],
-      {stdio: 'ignore'},
-    );
-  } catch {
-    // Best-effort — labels may already exist or user may lack permissions
-  }
-}
-
-/**
- * Run a custom gap report command, piping report data as JSON to stdin.
- *
- * @param {string} command  Script path to execute
- * @param {object} report   Report data (component, category, intention, detail, source)
- * @returns {string} stdout from the command
- */
-function runCustomCommand(command, report) {
-  const resolved = path.resolve(process.cwd(), command);
-  const json = JSON.stringify(report, null, 2);
-
-  const result = execFileSync(resolved, [], {
-    input: json,
-    encoding: 'utf-8',
-  });
-
-  return result.trim();
-}
-
-/**
- * Build the report payload + rendered title/body for a gap report.
- * Pure function — no side effects, never calls `gh` or external scripts.
- *
- * @returns {{
- *   enabled: boolean,
- *   mode: 'disabled' | 'custom' | 'github',
- *   command?: string,
- *   report: object,
- *   title: string,
- *   body: string,
- *   repo: string,
- * }}
- */
-export async function buildGapReportPreview({
-  component,
-  category,
-  intention,
-  detail,
-  source = 'cli',
-}) {
-  const config = await loadGapReportConfig();
-  const categoryLabel =
-    GAP_CATEGORIES.find(c => c.value === category)?.label ?? category;
-
-  const report = {
-    component,
-    category,
-    categoryLabel,
-    intention,
-    detail: detail || null,
-    source,
-    timestamp: new Date().toISOString(),
-  };
-
-  const title = `[gap] ${component}: ${intention.slice(0, 70)}`;
-  const body = [
-    '| Field | Value |',
-    '|-------|-------|',
-    `| **Component** | ${component} |`,
-    `| **Category** | ${categoryLabel} |`,
-    `| **Source** | ${source} |`,
-    `| **Timestamp** | ${report.timestamp} |`,
-    '',
-    '## User Intention',
-    '',
-    intention,
-    ...(detail ? ['', '## Additional Context', '', detail] : []),
-  ].join('\n');
-
-  let mode = 'github';
-  if (!config.enabled) mode = 'disabled';
-  else if (config.command) mode = 'custom';
-
-  return {
-    enabled: config.enabled,
-    mode,
-    command: config.command,
-    report,
-    title,
-    body,
-    repo: DEFAULT_REPO,
-  };
-}
-
-/**
- * Create a gap report — either via GitHub issue or custom command.
- *
- * SAFETY: This actually invokes `gh issue create` (or runs the custom command).
- * Callers MUST gate this behind explicit user confirmation or a `--commit`-style
- * flag in non-interactive contexts. Use `buildGapReportPreview` for dry-run.
- *
- * @param {object} opts
- * @param {string} opts.component  Component name (e.g. "Button")
- * @param {string} opts.category   One of GAP_CATEGORIES values
- * @param {string} opts.intention  What the user was trying to achieve
- * @param {string} [opts.detail]   Additional context
- * @param {string} [opts.source]   Who filed it: "interactive", "llm-auto", "cli"
- * @returns {string|null} URL of the created issue (or custom command output), null if disabled
- */
-export async function createGapReport(opts) {
-  const preview = await buildGapReportPreview(opts);
-
-  if (!preview.enabled) {
-    return null;
-  }
-
-  // Custom command mode — pipe JSON to the script
-  if (preview.mode === 'custom') {
-    return runCustomCommand(preview.command, preview.report);
-  }
-
-  // Default mode — create GitHub issue
-  ensureGapReportLabel();
-
-  const result = execFileSync(
-    'gh',
-    [
-      'issue',
-      'create',
-      '--repo',
-      preview.repo,
-      '--title',
-      preview.title,
-      '--body',
-      preview.body,
-      '--label',
-      'gap-report',
-    ],
-    {encoding: 'utf-8'},
-  );
-
-  return result.trim();
-}

package/src/utils/interactive.mjs

@@ -18,8 +18,8 @@
  *     fail fast (exit 1) with actionable, non-interactive guidance.
  *
  *   - `isInteractive()` — for commands with an OPTIONAL secondary prompt
- *     (e.g. swizzle's post-copy "report a gap?"). The primary work already
- *     succeeded; callers use this to skip the prompt gracefully.
+ *     that runs after the primary work has already succeeded; callers use
+ *     this to skip the prompt gracefully in non-interactive contexts.
  */
 
 /**

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>
+  );
+}

package/templates/blocks/components/DropdownMenu/DropdownMenuShowcase.tsx

@@ -12,7 +12,6 @@ export default function DropdownMenuShowcase() {
     <DropdownMenu
       isMenuOpen={isMenuOpen}
       onOpenChange={setIsMenuOpen}
-      hasAutoFocus={false}
       button={{label: 'Actions'}}
       items={[
         {label: 'Edit', onClick: () => {}},

package/templates/blocks/components/DropdownMenuItem/DropdownMenuItemShowcase.tsx

@@ -68,7 +68,6 @@ export default function DropdownMenuItemShowcase() {
     <DropdownMenu
       button={{label: 'Actions'}}
       isMenuOpen
-      hasAutoFocus={false}
       onOpenChange={() => {}}>
       <DropdownMenuItem
         icon={PencilIcon}

package/templates/blocks/components/HoverCard/HoverCardInteractiveContent.doc.mjs

@@ -10,5 +10,5 @@ export const doc = {
     'Shows a page summary when hovering a link: title, description, and URL. Use for documentation links, article references, or any URL where a preview helps the user decide whether to click.',
   isReady: true,
   aspectRatio: 16 / 9,
-  componentsUsed: ['HoverCard', 'Icon', 'Layout', 'Text'],
+  componentsUsed: ['HoverCard', 'Icon', 'Layout', 'Link', 'Text'],
 };

package/templates/blocks/components/HoverCard/HoverCardInteractiveContent.tsx

@@ -5,12 +5,14 @@
 import {HoverCard} from '@astryxdesign/core/HoverCard';
 import {Icon} from '@astryxdesign/core/Icon';
 import {VStack, HStack} from '@astryxdesign/core/Layout';
+import {Link} from '@astryxdesign/core/Link';
 import {Text} from '@astryxdesign/core/Text';
 import {LinkIcon} from '@heroicons/react/24/outline';
 
 export default function HoverCardInteractiveContent() {
   return (
-    <Text type="body">Read more in the{' '}
+    <Text type="body">
+      Read more in the{' '}
       <HoverCard
         placement="below"
         content={
@@ -30,8 +32,11 @@ export default function HoverCardInteractiveContent() {
             </HStack>
           </VStack>
         }>
-        Getting Started Guide
-      </HoverCard>.
-          </Text>
+        <Link href="#" hasUnderline>
+          Getting Started Guide
+        </Link>
+      </HoverCard>
+      .
+    </Text>
   );
 }

package/templates/blocks/components/LinkProvider/LinkProviderCustomLink.doc.mjs

@@ -7,7 +7,7 @@ export const doc = {
   name: 'Link Provider — Custom Link Component',
   displayName: 'Link Provider — Custom Link Component',
   description:
-    'Routes every Astryx link through a custom component that intercepts the click — the hook frameworks like Next.js use for client-side navigation. Click the link to see the custom handler fire instead of a full-page load.',
+    'Routes every Astryx link through a custom component that intercepts the click, the hook frameworks like Next.js use for client-side navigation. Click the link to see the custom handler fire instead of a full-page load.',
   isReady: true,
   aspectRatio: 4 / 3,
   componentsUsed: ['LinkProvider', 'Link'],

package/templates/blocks/components/MoreMenu/MoreMenuShowcase.tsx

@@ -12,7 +12,6 @@ export default function MoreMenuShowcase() {
     <MoreMenu
       isMenuOpen={isMenuOpen}
       onOpenChange={setIsMenuOpen}
-      hasAutoFocus={false}
       items={[
         {label: 'Edit', onClick: () => {}},
         {label: 'Duplicate', onClick: () => {}},

package/templates/blocks/components/Tab/TabWithSelectedIcon.doc.mjs

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Tab',
+  name: 'Tab — Selected Icon',
+  displayName: 'Tab — Selected Icon',
+  description: 'A tab that changes its icon when selected.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['TabList', 'Tab'],
+};

package/templates/blocks/components/Tab/TabWithSelectedIcon.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {TabList, Tab} from '@astryxdesign/core/TabList';
+
+const StarIcon = (
+  <svg
+    viewBox="0 0 16 16"
+    fill="none"
+    stroke="currentColor"
+    width="100%"
+    height="100%">
+    <path d="m8 1.5 2 4.1 4.5.7-3.3 3.2.8 4.5-4-2.1L4 14l.8-4.5-3.3-3.2 4.5-.7L8 1.5Z" />
+  </svg>
+);
+
+const SelectedStarIcon = (
+  <svg viewBox="0 0 16 16" fill="currentColor" width="100%" height="100%">
+    <path d="m8 1.5 2 4.1 4.5.7-3.3 3.2.8 4.5-4-2.1L4 14l.8-4.5-3.3-3.2 4.5-.7L8 1.5Z" />
+  </svg>
+);
+
+export default function TabWithSelectedIcon() {
+  const [value, setValue] = useState('favorites');
+
+  return (
+    <TabList value={value} onChange={setValue}>
+      <Tab
+        value="favorites"
+        label="Favorites"
+        icon={StarIcon}
+        selectedIcon={SelectedStarIcon}
+      />
+      <Tab value="recent" label="Recent" />
+    </TabList>
+  );
+}

package/templates/blocks/components/Table/StickyColumnsHookUsage.doc.mjs

@@ -7,7 +7,7 @@ export const doc = {
   name: 'useTableStickyColumns — Pinned Columns',
   displayName: 'useTableStickyColumns — Pinned Columns',
   description:
-    'A Table using useTableStickyColumns to pin the Name column to the start edge and Status to the end edge. Scroll horizontally — pinned columns stay in view with a soft shadow over the scrolling content.',
+    'A Table using useTableStickyColumns to pin the Name column to the start edge and Status to the end edge. Scroll horizontally; pinned columns stay in view with a soft shadow over the scrolling content.',
   isReady: true,
   aspectRatio: 16 / 9,
   componentsUsed: ['Table'],

package/templates/pages/shell-side-nav/page.tsx

@@ -142,7 +142,6 @@ function ConversationItem({
             <MoreMenu
               size="sm"
               label="Conversation options"
-              hasAutoFocus={false}
               onOpenChange={setIsMenuOpen}
               items={[
                 {label: 'Pin', onClick: () => {}},

package/templates/pages/shell-side-nav/template.doc.mjs

@@ -6,7 +6,7 @@ export const doc = {
   name: 'Side Nav',
   displayName: 'Side Nav',
   description:
-    'A side-nav app shell with a collapsible, resizable SideNav — new chat, search, library, and workspace-grouped conversations with status dots — over static grey-card conversation and composer placeholders.',
+    'A side-nav app shell with a collapsible, resizable SideNav (new chat, search, library, and workspace-grouped conversations with status dots) over static grey-card conversation and composer placeholders.',
   isReady: true,
   category: 'Shell - Left Sidebar',
 };

package/templates/pages/shell-top-nav/template.doc.mjs

@@ -6,7 +6,7 @@ export const doc = {
   name: 'Top Nav',
   displayName: 'Top Nav',
   description:
-    'A top-nav app shell with a centered TopNav — Shop and Brands mega menus (a 2x4 item grid plus a featured card each), Sale/Service links, and a Checkout button — over static grey-card hero and category sections.',
+    'A top-nav app shell with a centered TopNav (Shop and Brands mega menus with a 2x4 item grid plus a featured card each, Sale/Service links, and a Checkout button) over static grey-card hero and category sections.',
   isReady: true,
   category: 'Shell - Top Nav',
 };