npm - @astryxdesign/cli - Versions diffs - 0.1.4 → 0.1.5-canary.76e6697 - Mend

@astryxdesign/cli 0.1.4 → 0.1.5-canary.76e6697

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (75) hide show

package/templates/pages/payment-form/page.tsx CHANGED Viewed

@@ -153,10 +153,6 @@ const fmt = (n: number) => `$${n.toFixed(2)}`;
 // :root by `@astryxdesign/core/astryx.css`). No StyleX compiler required.
 const fullWidth: CSSProperties = {width: '100%'};
-// LayoutContent clips overflow by default, which traps position:sticky
-// children (the sticky order summary). With height="auto" the page scrolls
-// at the window, so let overflow be visible here so sticky can pin.
-const visibleOverflow: CSSProperties = {overflow: 'visible'};
 // Form column flex-basis so the two checkout columns share width evenly.
 const formColBasis: CSSProperties = {flexBasis: 0};
 // Space the Order Summary content below its collapsible trigger title.
@@ -266,9 +262,9 @@ export default function PaymentFormPage() {
   return (
     <Layout
-      height="auto"
+      height="fill"
       content={
-        <LayoutContent padding={0} style={visibleOverflow}>
+        <LayoutContent padding={0}>
           <Center axis="horizontal">
             <Section
               variant="transparent"

package/templates/pages/product-detail/page.tsx CHANGED Viewed

@@ -3,12 +3,7 @@
 'use client';
 import {useState} from 'react';
-import {
-  VStack,
-  HStack,
-  Layout,
-  LayoutContent,
-} from '@astryxdesign/core/Layout';
+import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
 import {Center} from '@astryxdesign/core/Center';
 import {Grid} from '@astryxdesign/core/Grid';
 import {Text, Heading} from '@astryxdesign/core/Text';
@@ -203,10 +198,7 @@ function ProductInfo() {
       <VStack gap={2}>
         <Text type="label">Finish</Text>
         <VStack hAlign="start">
-          <SegmentedControl
-            value={finish}
-            onChange={setFinish}
-            label="Finish">
+          <SegmentedControl value={finish} onChange={setFinish} label="Finish">
             {FINISHES.map(f => (
               <SegmentedControlItem
                 key={f.value}
@@ -286,7 +278,7 @@ export default function ProductDetailTemplate() {
   return (
     <Layout
-      height="auto"
+      height="fill"
       contentWidth={1200}
       content={
         <LayoutContent padding={6}>

package/templates/pages/product-gallery/page.tsx CHANGED Viewed

@@ -119,7 +119,7 @@ function ProductCard({product}: {product: Product}) {
 export default function ProductGalleryTemplate() {
   return (
     <Layout
-      height="auto"
+      height="fill"
       contentWidth={1200}
       content={
         <LayoutContent padding={6}>

package/templates/pages/settings/page.tsx CHANGED Viewed

@@ -70,7 +70,7 @@ export default function SettingsTemplate() {
   return (
     <Layout
-      height="auto"
+      height="fill"
       contentWidth={1440}
       header={
         <LayoutHeader hasDivider>

package/templates/pages/side-gallery/page.tsx CHANGED Viewed

@@ -101,7 +101,7 @@ function ImageGrid() {
 export default function SideGalleryTemplate() {
   return (
     <Layout
-      height="auto"
+      height="fill"
       contentWidth={1400}
       content={
         <LayoutContent padding={6}>

package/templates/pages/table-page/page.tsx CHANGED Viewed

@@ -389,7 +389,7 @@ export default function TablePageTemplate() {
   return (
     <Layout
-      height="auto"
+      height="fill"
       header={
         <LayoutHeader hasDivider>
           <HStack gap={2} vAlign="center">

package/templates/pages/table-page-chart/page.tsx CHANGED Viewed

@@ -19,13 +19,7 @@ import {Link} from '@astryxdesign/core/Link';
 import {Thumbnail} from '@astryxdesign/core/Thumbnail';
 import {Table, proportional, pixel} from '@astryxdesign/core/Table';
 import type {TableColumn} from '@astryxdesign/core/Table';
-import {
-  ChartV2 as Chart,
-  ChartGrid,
-  ChartAxis,
-  area,
-  line,
-} from '@astryxdesign/lab';
+import {Chart, ChartGrid, ChartAxis, area, line} from '@astryxdesign/charts';
 import {
   FunnelIcon,
   ArrowDownTrayIcon,
@@ -481,17 +475,13 @@ const columns: TableColumn<OrderRow>[] = [
     key: 'amount',
     header: 'Amount',
     width: pixel(90),
-    renderCell: (item: OrderRow) => (
-      <Text type="body">${item.amount}</Text>
-    ),
+    renderCell: (item: OrderRow) => <Text type="body">${item.amount}</Text>,
   },
   {
     key: 'customer',
     header: 'Customer',
     width: proportional(2),
-    renderCell: (item: OrderRow) => (
-      <Text type="body">{item.customer}</Text>
-    ),
+    renderCell: (item: OrderRow) => <Text type="body">{item.customer}</Text>,
   },
   {
     key: 'email',
@@ -523,7 +513,7 @@ const columns: TableColumn<OrderRow>[] = [
 export default function TablePageChartTemplate() {
   return (
     <Layout
-      height="auto"
+      height="fill"
       header={
         <LayoutHeader hasDivider>
           <HStack gap={2} vAlign="center">

package/templates/pages/table-page-heatmap-status/page.tsx CHANGED Viewed

@@ -430,7 +430,7 @@ function OutageHeatmap() {
 export default function TablePageHeatmapStatusTemplate() {
   return (
     <Layout
-      height="auto"
+      height="fill"
       header={
         <LayoutHeader hasDivider>
           <HStack gap={2} vAlign="center">

package/templates/pages/table-page-shoe-store-heatmap/page.tsx CHANGED Viewed

@@ -19,13 +19,7 @@ import {Link} from '@astryxdesign/core/Link';
 import {Thumbnail} from '@astryxdesign/core/Thumbnail';
 import {Table, proportional, pixel} from '@astryxdesign/core/Table';
 import type {TableColumn} from '@astryxdesign/core/Table';
-import {
-  ChartV2 as Chart,
-  ChartGrid,
-  ChartAxis,
-  area,
-  line,
-} from '@astryxdesign/lab';
+import {Chart, ChartGrid, ChartAxis, area, line} from '@astryxdesign/charts';
 import {
   FunnelIcon,
   ArrowDownTrayIcon,
@@ -35,11 +29,7 @@ import {
 // ============= DATA =============
 type ProductCategory =
-  | 'Running'
-  | 'Lifestyle'
-  | 'Basketball'
-  | 'Training'
-  | 'Skateboarding';
+  'Running' | 'Lifestyle' | 'Basketball' | 'Training' | 'Skateboarding';
 function shoeSvg(bg: string, accent: string) {
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" rx="12" fill="${bg}"/><g transform="translate(22.5, 22.5) scale(2.29)" fill="none" stroke="${accent}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 10.42 4.8-5.07"/><path d="M19 18h3"/><path d="M9.5 22 21.414 9.415A2 2 0 0 0 21.2 6.4l-5.61-4.208A1 1 0 0 0 14 3v2a2 2 0 0 1-1.394 1.906L8.677 8.053A1 1 0 0 0 8 9c-.155 6.393-2.082 9-4 9a2 2 0 0 0 0 4h14"/></g></svg>`;
@@ -839,17 +829,13 @@ const columns: TableColumn<OrderRow>[] = [
     key: 'amount',
     header: 'Amount',
     width: pixel(90),
-    renderCell: (item: OrderRow) => (
-      <Text type="body">${item.amount}</Text>
-    ),
+    renderCell: (item: OrderRow) => <Text type="body">${item.amount}</Text>,
   },
   {
     key: 'customer',
     header: 'Customer',
     width: proportional(2),
-    renderCell: (item: OrderRow) => (
-      <Text type="body">{item.customer}</Text>
-    ),
+    renderCell: (item: OrderRow) => <Text type="body">{item.customer}</Text>,
   },
   {
     key: 'email',
@@ -881,7 +867,7 @@ const columns: TableColumn<OrderRow>[] = [
 export default function TablePageShoeStoreHeatmapTemplate() {
   return (
     <Layout
-      height="auto"
+      height="fill"
       header={
         <LayoutHeader hasDivider>
           <HStack gap={2} vAlign="center">