@astryxdesign/cli 0.1.2 → 0.1.3

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

@@ -0,0 +1,224 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import * as stylex from '@stylexjs/stylex';
+import {AppShell} from '@astryxdesign/core/AppShell';
+import {
+  TopNav,
+  TopNavHeading,
+  TopNavItem,
+  TopNavMegaMenu,
+  TopNavMegaMenuItem,
+  TopNavMegaMenuFeaturedCard,
+} from '@astryxdesign/core/TopNav';
+import {NavIcon} from '@astryxdesign/core/NavIcon';
+import {Icon} from '@astryxdesign/core/Icon';
+import type {IconType} from '@astryxdesign/core/Icon';
+import {IconButton} from '@astryxdesign/core/IconButton';
+import {Button} from '@astryxdesign/core/Button';
+import {Badge} from '@astryxdesign/core/Badge';
+import {Card} from '@astryxdesign/core/Card';
+import {Grid} from '@astryxdesign/core/Grid';
+import {Stack, VStack} from '@astryxdesign/core/Stack';
+import {
+  ShoppingBagIcon,
+  ShoppingCartIcon,
+  MagnifyingGlassIcon,
+  SparklesIcon,
+  SwatchIcon,
+  TagIcon,
+  HomeModernIcon,
+  FaceSmileIcon,
+  ReceiptPercentIcon,
+  GiftIcon,
+  CloudIcon,
+  BoltIcon,
+  SunIcon,
+  StarIcon,
+  FireIcon,
+  GlobeAltIcon,
+  MoonIcon,
+} from '@heroicons/react/24/outline';
+
+const styles = stylex.create({
+  // Cap + center the page body so wide screens show whitespace gutters.
+  contentMax: {maxWidth: 1100, marginInline: 'auto'},
+  // Lock both mega-menu panels to an identical size. Without this, Shop and
+  // Brands size to their own content (different widths); since both anchor to
+  // the centered nav, switching between them resizes the panel — which reads
+  // as flashing/jumping. Fixed item + featured widths make the panels
+  // pixel-identical so the transition is seamless.
+  megaItems: {gridColumn: '1 / -1', width: 520},
+  megaFeatured: {width: 240},
+});
+
+type MegaItem = {name: string; tagline: string; icon: IconType};
+
+// Shop and Brands each render 8 items — the mega menu's built-in 2-column grid
+// lays them out as 2 columns × 4 rows, alongside a featured card.
+const SHOP_ITEMS: MegaItem[] = [
+  {name: 'New Arrivals', tagline: 'The latest drops', icon: SparklesIcon},
+  {name: 'Womenswear', tagline: 'Dresses, knitwear & more', icon: SwatchIcon},
+  {name: 'Menswear', tagline: 'Shirts, tailoring & more', icon: TagIcon},
+  {name: 'Home', tagline: 'Bedding, lighting & décor', icon: HomeModernIcon},
+  {
+    name: 'Beauty',
+    tagline: 'Skincare, fragrance & makeup',
+    icon: FaceSmileIcon,
+  },
+  {
+    name: 'Accessories',
+    tagline: 'Bags, hats & sunglasses',
+    icon: ShoppingBagIcon,
+  },
+  {name: 'Sale', tagline: 'Up to 50% off', icon: ReceiptPercentIcon},
+  {name: 'Gift Cards', tagline: 'The perfect present', icon: GiftIcon},
+];
+
+const BRAND_ITEMS: MegaItem[] = [
+  {name: 'Aether', tagline: 'Performance essentials', icon: SparklesIcon},
+  {name: 'Northwind', tagline: 'Outdoor & technical', icon: CloudIcon},
+  {name: 'Loomwell', tagline: 'Everyday knitwear', icon: BoltIcon},
+  {name: 'Verdant', tagline: 'Sustainable basics', icon: SunIcon},
+  {name: 'Studio Mara', tagline: 'Modern tailoring', icon: StarIcon},
+  {name: 'Atelier Kos', tagline: 'Limited ateliers', icon: FireIcon},
+  {name: 'Rue & Co', tagline: 'City streetwear', icon: GlobeAltIcon},
+  {name: 'Halden', tagline: 'Minimal staples', icon: MoonIcon},
+];
+
+const CATEGORY_TILES = [
+  'New Arrivals',
+  'Womenswear',
+  'Menswear',
+  'Home & Living',
+  'Beauty',
+  'Accessories',
+];
+
+// Wraps the 8 items in a fixed-width 2-column grid so every mega menu's item
+// area is exactly the same width regardless of its content.
+function MegaItems({items}: {items: MegaItem[]}) {
+  return (
+    <Stack xstyle={styles.megaItems}>
+      <Grid columns={2} gap={2}>
+        {items.map(item => (
+          <TopNavMegaMenuItem
+            key={item.name}
+            title={item.name}
+            description={item.tagline}
+            icon={<Icon icon={item.icon} size="md" color="secondary" />}
+            href="#"
+          />
+        ))}
+      </Grid>
+    </Stack>
+  );
+}
+
+// Pins the featured card to a fixed width so both panels match exactly.
+function MegaFeatured(props: {
+  title: string;
+  description: string;
+  image: string;
+  imageAlt: string;
+  linkLabel: string;
+  linkHref: string;
+}) {
+  return (
+    <Stack xstyle={styles.megaFeatured}>
+      <TopNavMegaMenuFeaturedCard {...props} />
+    </Stack>
+  );
+}
+
+export default function ShellTopNav() {
+  return (
+    <AppShell
+      variant="surface"
+      contentPadding={6}
+      topNav={
+        <TopNav
+          label="Lumen storefront navigation"
+          heading={
+            <TopNavHeading
+              heading="Lumen"
+              logo={
+                <NavIcon icon={<Icon icon={ShoppingBagIcon} size="sm" />} />
+              }
+              href="#"
+            />
+          }
+          centerContent={
+            <>
+              <TopNavMegaMenu
+                label="Shop"
+                items={<MegaItems items={SHOP_ITEMS} />}
+                featured={
+                  <MegaFeatured
+                    title="The Autumn Edit"
+                    description="Layering staples in warm, earthy tones."
+                    image="https://lookaside.facebook.com/assets/astryx/texture-beige-horizontal-1.png"
+                    imageAlt="Autumn collection lookbook"
+                    linkLabel="Shop the edit"
+                    linkHref="#autumn-edit"
+                  />
+                }
+              />
+              <TopNavMegaMenu
+                label="Brands"
+                items={<MegaItems items={BRAND_ITEMS} />}
+                featured={
+                  <MegaFeatured
+                    title="Meet Studio Mara"
+                    description="Modern tailoring, made to last."
+                    image="https://lookaside.facebook.com/assets/astryx/texture-beige-horizontal-2.png"
+                    imageAlt="Studio Mara lookbook"
+                    linkLabel="Discover the label"
+                    linkHref="#studio-mara"
+                  />
+                }
+              />
+              <TopNavItem label="Sale" href="#" />
+              <TopNavItem label="Service" href="#" />
+            </>
+          }
+          endContent={
+            <>
+              <IconButton
+                label="Search products"
+                tooltip="Search"
+                variant="ghost"
+                icon={<Icon icon={MagnifyingGlassIcon} size="sm" />}
+              />
+              <Button label="Sign in" variant="ghost" />
+              <Button
+                label="Checkout"
+                variant="primary"
+                icon={<Icon icon={ShoppingCartIcon} size="sm" />}
+                endContent={<Badge label={3} />}
+              />
+            </>
+          }
+        />
+      }>
+      <VStack gap={10} xstyle={styles.contentMax}>
+        <Card variant="muted" padding={0} width="100%" height={360} />
+
+        {[0, 1, 2].map(section => (
+          <VStack key={section} gap={4}>
+            <Card variant="muted" padding={0} width={200} height={24} />
+            <Grid minChildWidth={160} gap={4}>
+              {CATEGORY_TILES.map(tile => (
+                <VStack key={tile} gap={2}>
+                  <Card variant="muted" padding={0} width="100%" height={120} />
+                  <Card variant="muted" padding={0} width="60%" height={14} />
+                </VStack>
+              ))}
+            </Grid>
+          </VStack>
+        ))}
+      </VStack>
+    </AppShell>
+  );
+}

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

@@ -0,0 +1,12 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'page',
+  name: 'Top Nav',
+  displayName: 'Top Nav',
+  description:
+    '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',
+};

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