@astryxdesign/cli 0.1.2-canary.2149fa3 → 0.1.2-canary.22ccb69

package/templates/blocks/components/Lightbox/LightboxGallery.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: 'Lightbox',
+  name: 'Lightbox — Gallery',
+  displayName: 'Lightbox — Gallery',
+  description:
+    'A thumbnail grid that opens a fullscreen gallery. Clicking any thumbnail opens the lightbox at that index. Prev/next navigation lets users browse all images without closing.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Lightbox', 'Grid', 'Thumbnail'],
+};

package/templates/blocks/components/Lightbox/LightboxGallery.tsx

@@ -0,0 +1,53 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useLightbox} from '@astryxdesign/core/Lightbox';
+import {Grid} from '@astryxdesign/core/Grid';
+import {Thumbnail} from '@astryxdesign/core/Thumbnail';
+
+const PHOTOS = [
+  {
+    src: 'https://lookaside.facebook.com/assets/astryx/Neutral-Backpack.png',
+    alt: 'Backpack',
+    caption: 'A backpack displayed on a neutral background.',
+  },
+  {
+    src: 'https://lookaside.facebook.com/assets/astryx/building.png',
+    alt: 'Modern building',
+    caption: 'A modern building with a contemporary architectural design.',
+  },
+  {
+    src: 'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png',
+    alt: 'Coastal shoreline with ocean waves',
+    caption:
+      'A scenic coastline with waves rolling onto a sandy beach beneath a clear sky.',
+  },
+  {
+    src: 'https://lookaside.facebook.com/assets/astryx/illustrative-vertical-1.png',
+    alt: 'Illustrated lakeside landscape at sunset',
+    caption:
+      'A stylized landscape illustration featuring pink clouds reflected over a calm lake at sunset.',
+  },
+];
+
+export default function LightboxGallery() {
+  const lightbox = useLightbox({media: PHOTOS});
+
+  return (
+    <>
+      <Grid columns={2} gap={2} style={{width: 136}}>
+        {PHOTOS.map((photo, i) => (
+          <Thumbnail
+            key={photo.src}
+            src={photo.src}
+            alt={photo.alt}
+            label={photo.alt}
+            onClick={() => lightbox.open(i)}
+          />
+        ))}
+      </Grid>
+      {lightbox.element}
+    </>
+  );
+}

package/templates/blocks/components/Lightbox/LightboxShowcase.tsx

@@ -12,9 +12,10 @@ export default function LightboxShowcase() {
         isOpen={isOpen}
         onOpenChange={setIsOpen}
         media={{
-          src: 'https://picsum.photos/id/10/1200/800',
-          alt: 'Forest path',
-          caption: 'A winding path through the forest',
+          src: 'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png',
+          alt: 'Coastal shoreline with ocean waves',
+          caption:
+            'A scenic coastline with waves rolling onto a sandy beach beneath a clear sky.',
         }}
       />
     </>

package/templates/blocks/components/Lightbox/LightboxVideo.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: 'Lightbox',
+  name: 'Lightbox — Video',
+  displayName: 'Lightbox — Video',
+  description:
+    'Opens a video in the lightbox. Native browser controls are available. Zoom and pan are disabled for video items.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Lightbox'],
+};

package/templates/blocks/components/Lightbox/LightboxVideo.tsx

@@ -0,0 +1,27 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Lightbox} from '@astryxdesign/core/Lightbox';
+import {Button} from '@astryxdesign/core/Button';
+
+export default function LightboxVideo() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Button label="Play video" onClick={() => setIsOpen(true)} />
+      <Lightbox
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        media={{
+          src: 'https://lookaside.facebook.com/assets/?set=astryx&name=Nature-1&density=1',
+          alt: 'Flower blooming in time-lapse',
+          type: 'video',
+          caption: 'A flower blooming in time-lapse',
+        }}
+      />
+    </>
+  );
+}

package/templates/blocks/components/Lightbox/LightboxZoom.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: 'Lightbox',
+  name: 'Lightbox — Zoom',
+  displayName: 'Lightbox — Zoom',
+  description:
+    'A lightbox with zoom and pan enabled. Double-click the image to zoom in; drag to pan around. Double-click again or use the close button to exit.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Lightbox', 'Thumbnail'],
+};

package/templates/blocks/components/Lightbox/LightboxZoom.tsx

@@ -0,0 +1,33 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Lightbox} from '@astryxdesign/core/Lightbox';
+import {Thumbnail} from '@astryxdesign/core/Thumbnail';
+
+export default function LightboxZoom() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Thumbnail
+        src="https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png"
+        alt="Coastal shoreline with ocean waves"
+        label="Coastal shoreline with ocean waves"
+        onClick={() => setIsOpen(true)}
+      />
+      <Lightbox
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        media={{
+          src: 'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png',
+          alt: 'Coastal shoreline with ocean waves',
+          caption:
+            'A scenic coastline. Double-click to zoom in and drag to pan.',
+        }}
+        hasZoom
+      />
+    </>
+  );
+}

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/ToggleButtonGroup/ToggleButtonGroupVertical.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: 'ToggleButtonGroup',
+  name: 'ToggleButtonGroup — Vertical',
+  displayName: 'ToggleButtonGroup — Vertical',
+  description:
+    'A vertically stacked ToggleButtonGroup using the vertical orientation, shown with both single-select and multi-select behavior — ideal for sidebar-style option lists and vertical toolbars.',
+  isReady: true,
+  aspectRatio: 3 / 4,
+  componentsUsed: ['ToggleButton', 'ToggleButtonGroup', 'Layout', 'Text'],
+};

package/templates/blocks/components/ToggleButtonGroup/ToggleButtonGroupVertical.tsx

@@ -0,0 +1,47 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {ToggleButton, ToggleButtonGroup} from '@astryxdesign/core/ToggleButton';
+import {VStack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function ToggleButtonGroupVertical() {
+  const [view, setView] = useState<string | null>('grid');
+  const [filters, setFilters] = useState<string[]>(['active']);
+
+  return (
+    <VStack gap={4}>
+      <VStack gap={1}>
+        <Text type="label" color="secondary">
+          Single select
+        </Text>
+        <ToggleButtonGroup
+          orientation="vertical"
+          value={view}
+          onChange={setView}
+          label="View mode">
+          <ToggleButton value="list" label="List" />
+          <ToggleButton value="grid" label="Grid" />
+          <ToggleButton value="board" label="Board" />
+        </ToggleButtonGroup>
+      </VStack>
+      <VStack gap={1}>
+        <Text type="label" color="secondary">
+          Multi select
+        </Text>
+        <ToggleButtonGroup
+          orientation="vertical"
+          type="multiple"
+          value={filters}
+          onChange={setFilters}
+          label="Status filters">
+          <ToggleButton value="active" label="Active" />
+          <ToggleButton value="pending" label="Pending" />
+          <ToggleButton value="closed" label="Closed" />
+        </ToggleButtonGroup>
+      </VStack>
+    </VStack>
+  );
+}

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/src/codemods/transforms/v0.1.0/__tests__/migrate-xds-config-surfaces.test.mjs

@@ -1,116 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-import {describe, it, expect} from 'vitest';
-
-async function applyConfigCodemod(files) {
-  const {default: transform} =
-    await import('../migrate-xds-config-surfaces.mjs');
-  const config = {
-    packageJson: files['package.json']
-      ? {path: 'package.json', source: files['package.json']}
-      : null,
-    astryxConfig: files['astryx.config.mjs']
-      ? {path: 'astryx.config.mjs', source: files['astryx.config.mjs']}
-      : null,
-    xdsConfig: files['xds.config.mjs']
-      ? {path: 'xds.config.mjs', source: files['xds.config.mjs']}
-      : null,
-  };
-  return transform({path: process.cwd(), source: ''}, {config});
-}
-
-describe('migrate-xds-config-surfaces', () => {
-  it('extracts package.json xds config into astryx.config.mjs and removes the package key in place', async () => {
-    const input = `{
-    "dependencies": {"@xds/core":"^0.0.15"},
-    "xds"  : {"theme":"neutral","docs":"./src"}
-}
-`;
-
-    const result = await applyConfigCodemod({'package.json': input});
-    expect(result.errors ?? []).toEqual([]);
-    expect(result.changes).toEqual([
-      {
-        path: 'package.json',
-        source: `{
-    "dependencies": {"@xds/core":"^0.0.15"}
-}
-`,
-      },
-      {
-        path: 'astryx.config.mjs',
-        source: `export default {
-  "theme": "neutral",
-  "docs": "./src"
-};
-`,
-      },
-    ]);
-  });
-
-  it('extracts package.json astryx config into astryx.config.mjs too', async () => {
-    const result = await applyConfigCodemod({
-      'package.json': `{"astryx":{"theme":"neutral"}}\n`,
-    });
-    expect(result.changes).toEqual([
-      {path: 'package.json', source: `{}\n`},
-      {
-        path: 'astryx.config.mjs',
-        source: `export default {
-  "theme": "neutral"
-};
-`,
-      },
-    ]);
-  });
-
-  it('bails when package.json contains both xds and astryx config keys', async () => {
-    const result = await applyConfigCodemod({
-      'package.json': `{"xds":{"theme":"default"},"astryx":{"theme":"neutral"}}\n`,
-    });
-    expect(result.errors?.[0]?.error).toMatch(/both xds and astryx/);
-  });
-
-  it('does not rewrite dependency keys in package.json', async () => {
-    const input = `{"dependencies":{"@xds/core":"^0.0.15"}}\n`;
-    const result = await applyConfigCodemod({'package.json': input});
-    expect(result.changes).toEqual([]);
-  });
-
-  it('bails when package config and astryx.config.mjs both exist', async () => {
-    const result = await applyConfigCodemod({
-      'package.json': `{"xds":{"theme":"neutral"}}\n`,
-      'astryx.config.mjs': `export default {};\n`,
-    });
-    expect(result.errors?.[0]?.error).toMatch(/migrate the config manually/);
-  });
-
-  it('bails when package config and xds.config.mjs both exist', async () => {
-    const result = await applyConfigCodemod({
-      'package.json': `{"xds":{"theme":"neutral"}}\n`,
-      'xds.config.mjs': `export default {};\n`,
-    });
-    expect(result.errors?.[0]?.error).toMatch(/migrate the config manually/);
-  });
-
-  it('renames xds.config.mjs to astryx.config.mjs when no package config exists', async () => {
-    const result = await applyConfigCodemod({
-      'xds.config.mjs': "export default { theme: 'neutral' };\n",
-    });
-    expect(result.changes).toEqual([
-      {
-        path: 'astryx.config.mjs',
-        source: "export default { theme: 'neutral' };\n",
-      },
-      {path: 'xds.config.mjs', delete: true},
-    ]);
-  });
-
-  it('bails when xds.config.mjs and astryx.config.mjs both exist', async () => {
-    const result = await applyConfigCodemod({
-      'xds.config.mjs': `export default {};\n`,
-      'astryx.config.mjs': `export default {};\n`,
-    });
-    expect(result.errors?.[0]?.error).toMatch(/migrate the config manually/);
-  });
-});

package/src/codemods/transforms/v0.1.0/migrate-xds-config-surfaces.mjs

@@ -1,230 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Codemod: migrate XDS config surfaces to Astryx v0.1.0
- *
- * The v0.1.0 CLI reads astryx.config.mjs. This config codemod migrates
- * legacy xds.config.mjs and package.json's top-level `xds` config without
- * changing dependency names or versions.
- */
-
-export const meta = {
-  title: 'Migrate xds config surfaces to astryx',
-  description:
-    'Moves legacy package.json xds config into astryx.config.mjs, or renames ' +
-    'xds.config.mjs when no package.json config exists. Bails out if both exist.',
-  pr: '#3092',
-  codemodType: 'config',
-};
-
-function findTopLevelKey(source, targetKey) {
-  let depth = 0;
-  let inString = false;
-  let escaped = false;
-  let stringStart = -1;
-
-  for (let i = 0; i < source.length; i++) {
-    const ch = source[i];
-
-    if (inString) {
-      if (escaped) {
-        escaped = false;
-        continue;
-      }
-      if (ch === '\\') {
-        escaped = true;
-        continue;
-      }
-      if (ch !== '"') continue;
-
-      inString = false;
-      const rawKey = source.slice(stringStart + 1, i);
-      if (depth !== 1 || rawKey !== targetKey) continue;
-
-      let j = i + 1;
-      while (/\s/.test(source[j] ?? '')) j++;
-      if (source[j] !== ':') continue;
-
-      const valueStart = j + 1;
-      const value = readJsonValue(source, valueStart);
-      if (!value) return null;
-      return {keyStart: stringStart, keyEnd: i + 1, colon: j, ...value};
-    }
-
-    if (ch === '"') {
-      inString = true;
-      stringStart = i;
-      continue;
-    }
-    if (ch === '{' || ch === '[') depth++;
-    else if (ch === '}' || ch === ']') depth--;
-  }
-  return null;
-}
-
-function readJsonValue(source, start) {
-  let i = start;
-  while (/\s/.test(source[i] ?? '')) i++;
-  const valueStart = i;
-  let inString = false;
-  let escaped = false;
-  let depth = 0;
-
-  for (; i < source.length; i++) {
-    const ch = source[i];
-    if (inString) {
-      if (escaped) {
-        escaped = false;
-        continue;
-      }
-      if (ch === '\\') {
-        escaped = true;
-        continue;
-      }
-      if (ch === '"') inString = false;
-      continue;
-    }
-    if (ch === '"') {
-      inString = true;
-      continue;
-    }
-    if (ch === '{' || ch === '[') {
-      depth++;
-      continue;
-    }
-    if (ch === '}' || ch === ']') {
-      if (depth === 0) break;
-      depth--;
-      continue;
-    }
-    if (depth === 0 && ch === ',') break;
-  }
-
-  const valueEnd = i;
-  const rawValue = source.slice(valueStart, valueEnd).trim();
-  try {
-    JSON.parse(rawValue);
-  } catch {
-    return null;
-  }
-  return {valueStart, valueEnd, rawValue, terminator: source[i]};
-}
-
-function removeTopLevelProperty(source, property) {
-  let removeStart = property.keyStart;
-  let removeEnd = property.valueEnd;
-
-  if (source[removeEnd] === ',') {
-    removeEnd++;
-    if (source[removeEnd] === '\n') removeEnd++;
-    return source.slice(0, removeStart) + source.slice(removeEnd);
-  }
-
-  let i = removeStart - 1;
-  while (/\s/.test(source[i] ?? '')) i--;
-  if (source[i] === ',') {
-    const whitespaceBetweenCommaAndKey = source.slice(i + 1, removeStart);
-    const preservedWhitespace = whitespaceBetweenCommaAndKey.includes('\n')
-      ? '\n'
-      : '';
-    return source.slice(0, i) + preservedWhitespace + source.slice(removeEnd);
-  }
-
-  return source.slice(0, removeStart) + source.slice(removeEnd);
-}
-
-function formatConfigSource(rawConfig) {
-  const parsed = JSON.parse(rawConfig);
-  return `export default ${JSON.stringify(parsed, null, 2)};\n`;
-}
-
-function migratePackageJsonConfig(config) {
-  if (!config.packageJson) return {changes: []};
-
-  const packageJson = config.packageJson.source;
-  const xdsConfig = findTopLevelKey(packageJson, 'xds');
-  const astryxConfig = findTopLevelKey(packageJson, 'astryx');
-  if (!xdsConfig && !astryxConfig) return {changes: []};
-
-  if (config.astryxConfig) {
-    return {
-      errors: [
-        {
-          file: 'package.json',
-          error:
-            'package.json contains xds/astryx config and astryx.config.mjs already exists; migrate the config manually.',
-        },
-      ],
-    };
-  }
-
-  if (xdsConfig && astryxConfig) {
-    return {
-      errors: [
-        {
-          file: 'package.json',
-          error:
-            'package.json contains both xds and astryx config keys; migrate the config manually.',
-        },
-      ],
-    };
-  }
-
-  const configProperty = astryxConfig ?? xdsConfig;
-  const packageJsonWithoutConfig = removeTopLevelProperty(
-    packageJson,
-    configProperty,
-  );
-  return {
-    changes: [
-      {path: 'package.json', source: packageJsonWithoutConfig},
-      {
-        path: 'astryx.config.mjs',
-        source: formatConfigSource(configProperty.rawValue),
-      },
-    ],
-  };
-}
-
-function migrateXdsConfigFile(config) {
-  if (!config.xdsConfig) return {changes: []};
-  if (config.astryxConfig) {
-    return {
-      errors: [
-        {
-          file: 'xds.config.mjs',
-          error:
-            'xds.config.mjs and astryx.config.mjs both exist; migrate the config manually.',
-        },
-      ],
-    };
-  }
-  return {
-    changes: [
-      {path: 'astryx.config.mjs', source: config.xdsConfig.source},
-      {path: 'xds.config.mjs', delete: true},
-    ],
-  };
-}
-
-export default function transformer(_file, api) {
-  const config = api.config ?? {};
-  const packageResult = migratePackageJsonConfig(config);
-  if (packageResult.errors?.length) return packageResult;
-  if (packageResult.changes?.length) {
-    if (config.xdsConfig) {
-      return {
-        errors: [
-          {
-            file: 'package.json',
-            error:
-              'package.json contains xds/astryx config and xds.config.mjs exists; migrate the config manually.',
-          },
-        ],
-      };
-    }
-    return packageResult;
-  }
-
-  return migrateXdsConfigFile(config);
-}