@astryxdesign/cli 0.3.0-canary.fbc60c5 → 0.3.0-canary.fcbc342

package/assets/templates/blocks/components/Stepper/StepperStatus.tsx

@@ -0,0 +1,50 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Stepper, Step} from '@astryxdesign/lab';
+
+export default function StepperStatus() {
+  const [active, setActive] = useState(3);
+  return (
+    <div style={{width: '100%', maxWidth: 400}}>
+      <Stepper
+        activeStep={active}
+        orientation="vertical"
+        onStepClick={setActive}>
+        <Step
+          step={0}
+          label="Email verified"
+          description="you@example.com"
+          status="success"
+        />
+        <Step
+          step={1}
+          label="Phone verified"
+          description="+1 (555) 012-3456"
+          status="success"
+        />
+        <Step
+          step={2}
+          label="Identity document"
+          description="Passport upload failed"
+          status="error"
+        />
+        <Step
+          step={3}
+          label="Address verification"
+          description="Pending review"
+          status="accent"
+        />
+        <Step
+          step={4}
+          label="Background check"
+          isOptional
+          description="Skipped"
+        />
+        <Step step={5} label="Account activated" />
+      </Stepper>
+    </div>
+  );
+}

package/assets/templates/blocks/components/Stepper/StepperVerticalOnboarding.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: 'Stepper',
+  name: 'Stepper — Vertical Onboarding',
+  displayName: 'Stepper — Vertical Onboarding',
+  description:
+    'A vertical stepper for an onboarding flow, with a label and description per step. The auto indicator shows a check for completed steps, a ring for the current step, and a number for upcoming ones.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Stepper'],
+};

package/assets/templates/blocks/components/Stepper/StepperVerticalOnboarding.tsx

@@ -0,0 +1,40 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Stepper, Step} from '@astryxdesign/lab';
+
+export default function StepperVerticalOnboarding() {
+  const [active, setActive] = useState(2);
+  return (
+    <div style={{width: '100%', maxWidth: 400}}>
+      <Stepper
+        activeStep={active}
+        orientation="vertical"
+        onStepClick={setActive}>
+        <Step
+          step={0}
+          label="Create workspace"
+          description="Name and configure your workspace"
+        />
+        <Step
+          step={1}
+          label="Invite team members"
+          description="Add collaborators by email"
+        />
+        <Step
+          step={2}
+          label="Set up integrations"
+          description="Connect Slack, GitHub, Jira"
+        />
+        <Step
+          step={3}
+          label="Import data"
+          description="Bring in existing projects"
+        />
+        <Step step={4} label="Launch" description="Go live with your team" />
+      </Stepper>
+    </div>
+  );
+}

package/assets/templates/blocks/components/Table/TableRowExpansionTable.tsx

@@ -6,90 +6,93 @@ import {useState} from 'react';
 import {
   Table,
   useTableRowExpansion,
-  useTableRowExpansionState,
   proportional,
   pixel,
 } from '@astryxdesign/core/Table';
+import {VStack, HStack} from '@astryxdesign/core/Stack';
+import {Text, Heading} from '@astryxdesign/core/Text';
+import {Badge} from '@astryxdesign/core/Badge';
 
-interface FileNode extends Record<string, unknown> {
+interface Order extends Record<string, unknown> {
   id: string;
-  name: string;
-  type: 'folder' | 'file';
-  size: string;
-  children?: FileNode[];
+  customer: string;
+  status: string;
+  total: string;
+  items: {name: string; qty: number; price: string}[];
 }
 
-const fileTree: FileNode[] = [
+const orders: Order[] = [
   {
-    id: 'src',
-    name: 'src',
-    type: 'folder',
-    size: '—',
-    children: [
-      {
-        id: 'src/components',
-        name: 'components',
-        type: 'folder',
-        size: '—',
-        children: [
-          {
-            id: 'src/components/Button.tsx',
-            name: 'Button.tsx',
-            type: 'file',
-            size: '4.2 KB',
-            children: [],
-          },
-          {
-            id: 'src/components/Table.tsx',
-            name: 'Table.tsx',
-            type: 'file',
-            size: '12.8 KB',
-            children: [],
-          },
-        ],
-      },
-      {
-        id: 'src/index.ts',
-        name: 'index.ts',
-        type: 'file',
-        size: '0.4 KB',
-        children: [],
-      },
+    id: 'ord-1001',
+    customer: 'Ada Lovelace',
+    status: 'Shipped',
+    total: '$248.00',
+    items: [
+      {name: 'Mechanical keyboard', qty: 1, price: '$180.00'},
+      {name: 'Wrist rest', qty: 2, price: '$34.00'},
     ],
   },
   {
-    id: 'package.json',
-    name: 'package.json',
-    type: 'file',
-    size: '1.8 KB',
-    children: [],
+    id: 'ord-1002',
+    customer: 'Alan Turing',
+    status: 'Processing',
+    total: '$52.00',
+    items: [{name: 'USB-C cable', qty: 4, price: '$13.00'}],
+  },
+  {
+    id: 'ord-1003',
+    customer: 'Grace Hopper',
+    status: 'Delivered',
+    total: '$1,200.00',
+    items: [{name: 'Standing desk', qty: 1, price: '$1,200.00'}],
   },
 ];
 
 const columns = [
-  {key: 'name', header: 'Name', width: proportional(2)},
-  {key: 'type', header: 'Type', width: pixel(80)},
-  {key: 'size', header: 'Size', width: pixel(90)},
+  {key: 'customer', header: 'Customer', width: proportional(2)},
+  {key: 'status', header: 'Status', width: pixel(130)},
+  {key: 'total', header: 'Total', width: pixel(110)},
 ];
 
 export default function TableRowExpansionTable() {
   const [expandedKeys, setExpandedKeys] = useState<Set<string>>(
-    new Set(['src']),
+    new Set(['ord-1001']),
   );
 
-  const {data, expansionConfig} = useTableRowExpansionState<FileNode>({
-    baseData: fileTree,
-    getChildren: item => item.children ?? [],
-    getRowKey: item => item.id,
+  const expansion = useTableRowExpansion<Order>({
     expandedKeys,
-    setExpandedKeys,
+    onToggle: key =>
+      setExpandedKeys(prev => {
+        const next = new Set(prev);
+        if (next.has(key)) {
+          next.delete(key);
+        } else {
+          next.add(key);
+        }
+        return next;
+      }),
+    getRowKey: item => item.id,
+    // The detail panel renders arbitrary content below the row: here, the
+    // order's line items. Any component composes here (charts, forms, tables).
+    renderExpanded: item => (
+      <VStack gap={2}>
+        <Heading level={4}>Line items</Heading>
+        {item.items.map(line => (
+          <HStack key={line.name} gap={3}>
+            <Badge label={`x${line.qty}`} variant="info" />
+            <Text type="body">{line.name}</Text>
+            <Text type="body" color="secondary">
+              {line.price}
+            </Text>
+          </HStack>
+        ))}
+      </VStack>
+    ),
   });
 
-  const expansion = useTableRowExpansion(expansionConfig);
-
   return (
     <Table
-      data={data}
+      data={orders}
       columns={columns}
       idKey="id"
       hasHover

package/assets/templates/blocks/components/TextArea/TextAreaStates.tsx

@@ -20,7 +20,7 @@ export default function TextAreaStates() {
       />
       <TextArea
         label="Disabled field"
-        value="This field is read-only and cannot be edited."
+        value="This field is disabled and cannot be edited."
         onChange={() => {}}
         isDisabled
       />

package/assets/templates/blocks/components/TopNav/TopNavMegaMenu.tsx

@@ -75,7 +75,7 @@ export default function TopNavMegaMenuBlock() {
               <TopNavMegaMenuFeaturedCard
                 title="What's new in v4.0"
                 description="AI-powered analytics and real-time collaboration."
-                image="https://lookaside.facebook.com/assets/astryx/light-working-horizontal-1.png"
+                image="/template-assets/light-working-horizontal-1.png"
                 imageAlt="Team collaboration"
                 linkLabel="Read the announcement"
                 linkHref="#announcement"

package/assets/templates/pages/centered-hero/page.tsx

@@ -12,7 +12,7 @@ import {Section} from '@astryxdesign/core/Section';
 import {ArrowRightIcon} from '@heroicons/react/20/solid';
 
 const IMAGE_URL =
-  'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png';
+  '/template-assets/light-scene-horizontal-1.png';
 
 const heroImage: CSSProperties = {
   width: '100%',

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

@@ -47,52 +47,52 @@ interface GalleryImage {
 
 const GALLERY_IMAGES: GalleryImage[] = [
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/moody-scene-horizontal-1.png',
+    src: '/template-assets/moody-scene-horizontal-1.png',
     alt: 'Moody scene landscape',
     category: 'scene',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/moody-lifestyle-vertical-1.png',
+    src: '/template-assets/moody-lifestyle-vertical-1.png',
     alt: 'Moody lifestyle portrait',
     category: 'lifestyle',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/moody-home-vertical-1.png',
+    src: '/template-assets/moody-home-vertical-1.png',
     alt: 'Moody home interior',
     category: 'home',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/moody-scene-horizontal-2.png',
+    src: '/template-assets/moody-scene-horizontal-2.png',
     alt: 'Moody scene vista',
     category: 'scene',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/moody-lifestyle-vertical-2.png',
+    src: '/template-assets/moody-lifestyle-vertical-2.png',
     alt: 'Moody lifestyle scene',
     category: 'lifestyle',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/moody-lifestyle-horizontal-1.png',
+    src: '/template-assets/moody-lifestyle-horizontal-1.png',
     alt: 'Moody lifestyle horizontal',
     category: 'lifestyle',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/moody-scene-vertical-1.png',
+    src: '/template-assets/moody-scene-vertical-1.png',
     alt: 'Moody scene vertical',
     category: 'scene',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/moody-home-vertical-2.png',
+    src: '/template-assets/moody-home-vertical-2.png',
     alt: 'Moody home vertical',
     category: 'home',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/moody-home-horizontal-1.png',
+    src: '/template-assets/moody-home-horizontal-1.png',
     alt: 'Moody home horizontal',
     category: 'home',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/moody-scene-vertical-2.png',
+    src: '/template-assets/moody-scene-vertical-2.png',
     alt: 'Moody scene vertical',
     category: 'scene',
   },

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

@@ -64,11 +64,11 @@ const itemsList: CSSProperties = {
 
 // ─── Product data ───────────────────────────────────────────────────────────
 const PRODUCT_IMAGES = [
-  'https://lookaside.facebook.com/assets/astryx/light-product-1.png',
-  'https://lookaside.facebook.com/assets/astryx/light-product-2.png',
-  'https://lookaside.facebook.com/assets/astryx/light-product-3.png',
-  'https://lookaside.facebook.com/assets/astryx/light-product-4.png',
-  'https://lookaside.facebook.com/assets/astryx/light-product-5.png',
+  '/template-assets/light-product-1.png',
+  '/template-assets/light-product-2.png',
+  '/template-assets/light-product-3.png',
+  '/template-assets/light-product-4.png',
+  '/template-assets/light-product-5.png',
 ];
 
 const PRODUCTS = [

package/assets/templates/pages/form-two-column/page.tsx

@@ -19,7 +19,7 @@ import {Card} from '@astryxdesign/core/Card';
 import {Selector} from '@astryxdesign/core/Selector';
 
 const ILLUSTRATION_URL =
-  'https://lookaside.facebook.com/assets/astryx/light-working-vertical-2.png';
+  '/template-assets/light-working-vertical-2.png';
 
 const INQUIRY_REASONS = [
   'New business',

package/assets/templates/pages/gallery-hero/page.tsx

@@ -13,15 +13,15 @@ import {ArrowRightIcon} from '@heroicons/react/20/solid';
 
 const IMAGES = [
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/colorful-home-horizontal-1.png',
+    src: '/template-assets/colorful-home-horizontal-1.png',
     alt: 'Colorful home interior with vibrant decor',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/colorful-lifestyle-horizontal-1.png',
+    src: '/template-assets/colorful-lifestyle-horizontal-1.png',
     alt: 'Colorful lifestyle portrait with natural lighting',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/colorful-lifestyle-horizontal-2.png',
+    src: '/template-assets/colorful-lifestyle-horizontal-2.png',
     alt: 'Colorful lifestyle scene with warm tones',
   },
 ];

package/assets/templates/pages/library/page.tsx

@@ -37,7 +37,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Layout',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/colorful-home-horizontal-1.png',
+      '/template-assets/colorful-home-horizontal-1.png',
   },
   {
     id: '2',
@@ -47,7 +47,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Layout',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-3.png',
+      '/template-assets/illustrative-horizontal-3.png',
   },
   {
     id: '3',
@@ -57,7 +57,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Layout',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/light-working-horizontal-2.png',
+      '/template-assets/light-working-horizontal-2.png',
   },
   {
     id: '4',
@@ -66,7 +66,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Layout',
     type: 'Utility',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/moody-scene-horizontal-1.png',
+      '/template-assets/moody-scene-horizontal-1.png',
   },
   {
     id: '5',
@@ -75,7 +75,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Layout',
     type: 'Pattern',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/colorful-lifestyle-horizontal-2.png',
+      '/template-assets/colorful-lifestyle-horizontal-2.png',
   },
   {
     id: '6',
@@ -84,7 +84,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Layout',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png',
+      '/template-assets/light-scene-horizontal-1.png',
   },
   {
     id: '7',
@@ -94,7 +94,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Forms',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/moody-working-horizontal-1.png',
+      '/template-assets/moody-working-horizontal-1.png',
   },
   {
     id: '8',
@@ -103,7 +103,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Forms',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/colorful-working-horizontal-3.png',
+      '/template-assets/colorful-working-horizontal-3.png',
   },
   {
     id: '9',
@@ -112,7 +112,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Forms',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-1.png',
+      '/template-assets/illustrative-horizontal-1.png',
   },
   {
     id: '10',
@@ -121,7 +121,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Forms',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/light-home-horizontal-1.png',
+      '/template-assets/light-home-horizontal-1.png',
   },
   {
     id: '11',
@@ -130,7 +130,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Forms',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/moody-home-horizontal-2.png',
+      '/template-assets/moody-home-horizontal-2.png',
   },
   {
     id: '12',
@@ -140,7 +140,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Forms',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/colorful-product-1.png',
+      '/template-assets/colorful-product-1.png',
   },
   {
     id: '13',
@@ -150,7 +150,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Navigation',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-5.png',
+      '/template-assets/illustrative-horizontal-5.png',
   },
   {
     id: '14',
@@ -159,7 +159,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Navigation',
     type: 'Pattern',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/light-working-horizontal-1.png',
+      '/template-assets/light-working-horizontal-1.png',
   },
   {
     id: '15',
@@ -169,7 +169,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Navigation',
     type: 'Pattern',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/moody-lifestyle-horizontal-1.png',
+      '/template-assets/moody-lifestyle-horizontal-1.png',
   },
   {
     id: '16',
@@ -178,7 +178,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Navigation',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/colorful-home-horizontal-2.png',
+      '/template-assets/colorful-home-horizontal-2.png',
   },
   {
     id: '17',
@@ -188,7 +188,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Navigation',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/colorful-working-horizontal-1.png',
+      '/template-assets/colorful-working-horizontal-1.png',
   },
   {
     id: '18',
@@ -198,7 +198,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Navigation',
     type: 'Pattern',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/light-working-horizontal-3.png',
+      '/template-assets/light-working-horizontal-3.png',
   },
   {
     id: '19',
@@ -208,7 +208,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Feedback',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/moody-working-horizontal-2.png',
+      '/template-assets/moody-working-horizontal-2.png',
   },
   {
     id: '20',
@@ -218,7 +218,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Feedback',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-2.png',
+      '/template-assets/illustrative-horizontal-2.png',
   },
   {
     id: '21',
@@ -227,7 +227,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Feedback',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/colorful-lifestyle-horizontal-1.png',
+      '/template-assets/colorful-lifestyle-horizontal-1.png',
   },
   {
     id: '22',
@@ -236,7 +236,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Feedback',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/light-lifestyle-horizontal-1.png',
+      '/template-assets/light-lifestyle-horizontal-1.png',
   },
   {
     id: '23',
@@ -246,7 +246,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Feedback',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/moody-home-horizontal-1.png',
+      '/template-assets/moody-home-horizontal-1.png',
   },
   {
     id: '24',
@@ -256,7 +256,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Feedback',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/colorful-working-horizontal-2.png',
+      '/template-assets/colorful-working-horizontal-2.png',
   },
   {
     id: '25',
@@ -266,7 +266,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Data',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-4.png',
+      '/template-assets/illustrative-horizontal-4.png',
   },
   {
     id: '26',
@@ -276,7 +276,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Data',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/light-working-horizontal-4.png',
+      '/template-assets/light-working-horizontal-4.png',
   },
   {
     id: '27',
@@ -286,7 +286,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Data',
     type: 'Utility',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/moody-lifestyle-horizontal-2.png',
+      '/template-assets/moody-lifestyle-horizontal-2.png',
   },
   {
     id: '28',
@@ -295,7 +295,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Data',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/moody-scene-horizontal-2.png',
+      '/template-assets/moody-scene-horizontal-2.png',
   },
   {
     id: '29',
@@ -305,7 +305,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Data',
     type: 'Pattern',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/colorful-product-2.png',
+      '/template-assets/colorful-product-2.png',
   },
   {
     id: '30',
@@ -315,7 +315,7 @@ const ITEMS: LibraryItem[] = [
     category: 'Data',
     type: 'Component',
     imageUrl:
-      'https://lookaside.facebook.com/assets/astryx/moody-working-horizontal-3.png',
+      '/template-assets/moody-working-horizontal-3.png',
   },
 ];