@astryxdesign/cli 0.1.3 → 0.1.4-canary.01e5b29

package/templates/blocks/components/ContextMenuItem/ContextMenuItemShowcase.tsx

@@ -0,0 +1,107 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {ContextMenu, ContextMenuItem} from '@astryxdesign/core/ContextMenu';
+
+const PencilIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}>
+    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+  </svg>
+);
+
+const CopyIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}>
+    <rect x="9" y="9" width="13" height="13" rx="2" />
+    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+  </svg>
+);
+
+const ShareIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}>
+    <circle cx="18" cy="5" r="3" />
+    <circle cx="6" cy="12" r="3" />
+    <circle cx="18" cy="19" r="3" />
+    <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
+    <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
+  </svg>
+);
+
+const TrashIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}>
+    <polyline points="3 6 5 6 21 6" />
+    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+  </svg>
+);
+
+export default function ContextMenuItemShowcase() {
+  return (
+    <ContextMenu
+      menuContent={
+        <>
+          <ContextMenuItem
+            icon={PencilIcon}
+            label="Edit"
+            description="Modify this item"
+            onClick={() => {}}
+          />
+          <ContextMenuItem
+            icon={CopyIcon}
+            label="Duplicate"
+            description="Create a copy"
+            onClick={() => {}}
+          />
+          <ContextMenuItem icon={ShareIcon} label="Share" onClick={() => {}} />
+          <ContextMenuItem
+            icon={TrashIcon}
+            label="Delete"
+            description="This action cannot be undone"
+            onClick={() => {}}
+          />
+        </>
+      }>
+      <div
+        style={{
+          padding: '48px',
+          borderWidth: '2px',
+          borderStyle: 'dashed',
+          borderColor: 'var(--color-border)',
+          borderRadius: '8px',
+          textAlign: 'center',
+          color: 'var(--color-text-secondary)',
+          userSelect: 'none',
+        }}>
+        Right-click this area
+      </div>
+    </ContextMenu>
+  );
+}

package/templates/blocks/components/MetadataListItem/MetadataListItemBasic.doc.mjs

@@ -7,7 +7,7 @@ export const doc = {
   name: 'MetadataListItem — Basic',
   displayName: 'MetadataListItem — Basic',
   description:
-    'Labeled key–value rows inside a MetadataList. Values accept any content, from plain text to components like Badge.',
+    'Labeled key-value rows inside a MetadataList. Values accept any content, from plain text to components like Badge.',
   isReady: true,
   aspectRatio: 16 / 9,
   componentsUsed: ['MetadataList', 'MetadataListItem', 'Badge'],

package/templates/blocks/components/NavHeadingMenu/NavHeadingMenuShowcase.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'NavHeadingMenu',
+  name: 'NavHeadingMenu',
+  displayName: 'Nav Heading Menu',
+  description:
+    'NavHeadingMenu passed as the menu prop of SideNavHeading, letting the heading act as a product switcher popover trigger.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['SideNav', 'SideNavHeading', 'NavHeadingMenu', 'NavHeadingMenuItem'],
+};

package/templates/blocks/components/NavHeadingMenu/NavHeadingMenuShowcase.tsx

@@ -0,0 +1,47 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {SideNav, SideNavHeading} from '@astryxdesign/core/SideNav';
+import {NavHeadingMenu, NavHeadingMenuItem} from '@astryxdesign/core/NavMenu';
+
+function AppIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z"
+      />
+    </svg>
+  );
+}
+
+export default function NavHeadingMenuShowcase() {
+  return (
+    <div style={{height: 100}}>
+      <SideNav
+        header={
+          <SideNavHeading
+            heading="Acme Platform"
+            icon={<AppIcon />}
+            menu={
+              <NavHeadingMenu size="lg">
+                <NavHeadingMenuItem label="Dashboard" href="/dashboard" />
+                <NavHeadingMenuItem label="Analytics" href="/analytics" />
+                <NavHeadingMenuItem label="Settings" href="/settings" />
+              </NavHeadingMenu>
+            }
+          />
+        }>
+        {null}
+      </SideNav>
+    </div>
+  );
+}

package/templates/blocks/components/TabList/TabListTabsWithActions.doc.mjs

@@ -7,7 +7,7 @@ export const doc = {
   name: 'TabList — With Actions',
   displayName: 'TabList — With Actions',
   description:
-    'Page header pattern with tabs on the left and action buttons pushed to the right. When hasDivider is true, pair with a smaller button size (sm) so actions don\u2019t overpower the tab row.',
+    'Page header pattern with tabs on the left and action buttons pushed to the right. When hasDivider is true, pair with a smaller button size (sm) so actions don\'t overpower the tab row.',
   isReady: true,
   aspectRatio: 4 / 3,
   componentsUsed: ['TabList', 'Tab', 'Button'],

package/templates/blocks/components/Table/TableRowExpansionTable.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: 'useTableRowExpansion',
+  name: 'useTableRowExpansion — Tree Table',
+  displayName: 'useTableRowExpansion — Tree Table',
+  description:
+    'A tree table using useTableRowExpansion with inherited columns. Child rows use the same columns as parents, indented by depth. Click the chevron or right-click to expand/collapse.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Table'],
+};

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

@@ -0,0 +1,99 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {
+  Table,
+  useTableRowExpansion,
+  useTableRowExpansionState,
+  proportional,
+  pixel,
+} from '@astryxdesign/core/Table';
+
+interface FileNode extends Record<string, unknown> {
+  id: string;
+  name: string;
+  type: 'folder' | 'file';
+  size: string;
+  children?: FileNode[];
+}
+
+const fileTree: FileNode[] = [
+  {
+    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: 'package.json',
+    name: 'package.json',
+    type: 'file',
+    size: '1.8 KB',
+    children: [],
+  },
+];
+
+const columns = [
+  {key: 'name', header: 'Name', width: proportional(2)},
+  {key: 'type', header: 'Type', width: pixel(80)},
+  {key: 'size', header: 'Size', width: pixel(90)},
+];
+
+export default function TableRowExpansionTable() {
+  const [expandedKeys, setExpandedKeys] = useState<Set<string>>(
+    new Set(['src']),
+  );
+
+  const {data, expansionConfig} = useTableRowExpansionState<FileNode>({
+    baseData: fileTree,
+    getChildren: item => item.children ?? [],
+    getRowKey: item => item.id,
+    expandedKeys,
+    setExpandedKeys,
+  });
+
+  const expansion = useTableRowExpansion(expansionConfig);
+
+  return (
+    <Table
+      data={data}
+      columns={columns}
+      idKey="id"
+      hasHover
+      plugins={{expansion}}
+    />
+  );
+}

package/templates/blocks/components/ToggleButtonGroup/ToggleButtonGroupVertical.doc.mjs

@@ -7,7 +7,7 @@ export const doc = {
   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.',
+    '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/pages/classic-gallery/page.tsx

@@ -110,7 +110,7 @@ export default function ClassicGalleryTemplate() {
 
   return (
     <Layout
-      height="auto"
+      height="fill"
       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="auto"
+      height="fill"
       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="auto"
+      height="fill"
       contentWidth={1200}
       content={
         <LayoutContent padding={8}>