npm - @astryxdesign/cli - Versions diffs - 0.1.0 → 0.1.1 - Mend

@astryxdesign/cli 0.1.0 → 0.1.1

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 (140) hide show

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

@@ -2,9 +2,7 @@
 'use client';
-import {useState, useCallback} from 'react';
-import * as stylex from '@stylexjs/stylex';
-import {colorVars} from '@astryxdesign/core/theme/tokens.stylex';
+import {useState, useCallback, type CSSProperties} from 'react';
 import {useMediaQuery} from '@astryxdesign/core/hooks';
 import {Button} from '@astryxdesign/core/Button';
 import {Card} from '@astryxdesign/core/Card';
@@ -307,42 +305,32 @@ function defaultProps(type: BlockType): Record<string, unknown> {
 // the responsive canvas max-width, a selection ring on the active block card,
 // and the circular icon chip's surface.
-const editorStyles = stylex.create({
-  // Fill the window. Layout height="fill" is height:100%, which only resolves
-  // against a definite height — and the host's <html>/<body> don't set one, so
-  // the layout anchors a definite viewport height itself. No background; the
-  // host owns the page surface.
-  page: {height: '100dvh'},
-  // Pin the panel to a fixed 320px on desktop (so it doesn't resize to its
-  // content when switching tabs) and full width on mobile, where it moves into
-  // the header slot. LayoutPanel width is a single fixed value with no
-  // responsive form, and this xstyle wins over the width prop.
-  panelWidth: {
-    width: {default: 320, '@media (max-width: 768px)': '100%'},
-    flexShrink: 0,
-  },
-  // Canvas reflows to the chosen viewport width; VStack has no maxWidth prop.
-  canvas: (maxWidth: number) => ({
-    maxWidth,
-    width: '100%',
-    marginInline: 'auto',
-  }),
-  clickable: {
-    cursor: 'pointer',
-  },
-  // Selection ring on the active block — Card has no `isSelected` state.
-  selectedCard: {
-    outline: '2px solid',
-    outlineColor: colorVars['--color-border-blue'],
-    outlineOffset: -2,
-  },
-  // Circular muted chip behind the CTA icon — Center handles the centering
-  // and sizing; only the surface (radius + fill) needs custom CSS.
-  iconCircle: {
-    borderRadius: '50%',
-    backgroundColor: colorVars['--color-background-muted'],
-  },
+// Fill the window. Layout height="fill" is height:100%, which only resolves
+// against a definite height — and the host's <html>/<body> don't set one, so
+// the layout anchors a definite viewport height itself. No background; the
+// host owns the page surface.
+const pageStyle: CSSProperties = {height: '100dvh'};
+// Canvas reflows to the chosen viewport width; VStack has no maxWidth prop.
+const canvasStyle = (maxWidth: number): CSSProperties => ({
+  maxWidth,
+  width: '100%',
+  marginInline: 'auto',
 });
+const clickable: CSSProperties = {
+  cursor: 'pointer',
+};
+// Selection ring on the active block — Card has no `isSelected` state.
+const selectedCard: CSSProperties = {
+  outline: '2px solid',
+  outlineColor: 'var(--color-border-blue)',
+  outlineOffset: -2,
+};
+// Circular muted chip behind the CTA icon — Center handles the centering
+// and sizing; only the surface (radius + fill) needs custom CSS.
+const iconCircle: CSSProperties = {
+  borderRadius: '50%',
+  backgroundColor: 'var(--color-background-muted)',
+};
 // ---------------------------------------------------------------------------
 // Properties Form
@@ -477,15 +465,15 @@ function BlockPreview({
   onSelect: () => void;
 }) {
   const {type, props} = block;
-  const cardXstyle = [
-    editorStyles.clickable,
-    isSelected && editorStyles.selectedCard,
-  ];
+  const cardStyle: CSSProperties = {
+    ...clickable,
+    ...(isSelected ? selectedCard : null),
+  };
   switch (type) {
     case 'hero':
       return (
-        <Card padding={6} xstyle={cardXstyle} onClick={onSelect}>
+        <Card padding={6} style={cardStyle} onClick={onSelect}>
           <VStack gap={4}>
             <Heading level={2}>
               {(props.heading as string) || 'Hero Heading'}
@@ -503,7 +491,7 @@ function BlockPreview({
     case 'text':
       if (props.heading) {
         return (
-          <Card padding={6} xstyle={cardXstyle} onClick={onSelect}>
+          <Card padding={6} style={cardStyle} onClick={onSelect}>
             <EmptyState
               title={props.heading as string}
               description={props.description as string}
@@ -521,7 +509,7 @@ function BlockPreview({
         );
       }
       return (
-        <Card xstyle={cardXstyle} onClick={onSelect}>
+        <Card style={cardStyle} onClick={onSelect}>
           <Text type="body">
             {(props.content as string) || 'Text content goes here'}
           </Text>
@@ -530,7 +518,7 @@ function BlockPreview({
     case 'image':
       return (
-        <Card xstyle={cardXstyle} onClick={onSelect}>
+        <Card style={cardStyle} onClick={onSelect}>
           <EmptyState
             title="Image Block"
             description="Drop an image or enter a URL"
@@ -542,7 +530,7 @@ function BlockPreview({
     case 'button':
       return (
-        <Card padding={6} xstyle={cardXstyle} onClick={onSelect}>
+        <Card padding={6} style={cardStyle} onClick={onSelect}>
           <Center>
             <Button
               label={(props.label as string) || 'Button'}
@@ -559,7 +547,7 @@ function BlockPreview({
     case 'features': {
       const items = (props.items as Transaction[]) || [];
       return (
-        <Card padding={6} xstyle={cardXstyle} onClick={onSelect}>
+        <Card padding={6} style={cardStyle} onClick={onSelect}>
           <VStack gap={4}>
             <HStack gap={3} vAlign="start" hAlign="between">
               <VStack gap={1}>
@@ -589,7 +577,7 @@ function BlockPreview({
       const cardItems =
         (props.cards as Array<{title: string; description: string}>) || [];
       return (
-        <Card xstyle={cardXstyle} onClick={onSelect}>
+        <Card style={cardStyle} onClick={onSelect}>
           <VStack gap={4}>
             <Heading level={3}>Cards</Heading>
             <Divider />
@@ -609,9 +597,9 @@ function BlockPreview({
     case 'cta':
       return (
-        <Card padding={6} xstyle={cardXstyle} onClick={onSelect}>
+        <Card padding={6} style={cardStyle} onClick={onSelect}>
           <HStack gap={4} vAlign="start">
-            <Center width={40} height={40} xstyle={editorStyles.iconCircle}>
+            <Center width={40} height={40} style={iconCircle}>
               <Icon icon={LockClosedIcon} color="secondary" />
             </Center>
             <VStack gap={1}>
@@ -828,7 +816,7 @@ export default function EditorPage() {
     <LayoutPanel
       hasDivider={!isMobile}
       padding={0}
-      xstyle={editorStyles.panelWidth}>
+      style={{width: isMobile ? '100%' : 320, flexShrink: 0}}>
       <VStack gap={4}>
         {/* Panel Header */}
         <Section variant="transparent" padding={4}>
@@ -919,7 +907,7 @@ export default function EditorPage() {
   return (
     <>
       <Layout
-        xstyle={editorStyles.page}
+        style={pageStyle}
         height="fill"
         header={isMobile ? sidebar : undefined}
         start={isMobile ? undefined : sidebar}
@@ -927,7 +915,7 @@ export default function EditorPage() {
           <LayoutContent padding={8}>
             <VStack
               gap={4}
-              xstyle={editorStyles.canvas(VIEWPORT_MAX[viewport])}>
+              style={canvasStyle(VIEWPORT_MAX[viewport])}>
               {blocks.length > 0 ? (
                 blocks.map(block => (
                   <BlockPreview

package/templates/pages/file-explorer/page.tsx CHANGED Viewed

@@ -2,8 +2,7 @@
 'use client';
-import {useState, useMemo} from 'react';
-import * as stylex from '@stylexjs/stylex';
+import {useState, useMemo, type CSSProperties} from 'react';
 import {Layout, LayoutContent} from '@astryxdesign/core/Layout';
 import {Toolbar} from '@astryxdesign/core/Toolbar';
 import {List, ListItem} from '@astryxdesign/core/List';
@@ -145,10 +144,10 @@ const FILESYSTEM: FileSystemItem[] = [
         children: [{id: 'react-index', name: 'index.js', type: 'file'}],
       },
       {
-        id: 'stylex',
-        name: '@stylexjs',
+        id: 'react-dom',
+        name: 'react-dom',
         type: 'folder',
-        children: [{id: 'stylex-index', name: 'stylex.js', type: 'file'}],
+        children: [{id: 'react-dom-index', name: 'index.js', type: 'file'}],
       },
     ],
   },
@@ -260,13 +259,11 @@ const FILESYSTEM: FileSystemItem[] = [
   },
 ];
-const styles = stylex.create({
-  page: {height: '100dvh'},
-  columnRow: {overflowX: 'auto', overflowY: 'hidden'},
-  scrollable: {overflowY: 'auto'},
-  fixedColumn: {flexShrink: 0},
-  detailColumn: {flexGrow: 1, flexShrink: 0, flexBasis: 320},
-});
+const page: CSSProperties = {height: '100dvh'};
+const columnRow: CSSProperties = {overflowX: 'auto', overflowY: 'hidden'};
+const scrollable: CSSProperties = {overflowY: 'auto'};
+const fixedColumn: CSSProperties = {flexShrink: 0};
+const detailColumn: CSSProperties = {flexGrow: 1, flexShrink: 0, flexBasis: 320};
 function findItem(items: FileSystemItem[], id: string): FileSystemItem | null {
   for (const item of items) {
@@ -348,7 +345,7 @@ export default function FileExplorerPage() {
   return (
     <Layout
-      xstyle={styles.page}
+      style={page}
       height="fill"
       header={
         <Toolbar
@@ -448,7 +445,7 @@ export default function FileExplorerPage() {
       }
       content={
         <LayoutContent padding={0} isScrollable={false}>
-          <HStack height="100%" xstyle={styles.columnRow}>
+          <HStack height="100%" style={columnRow}>
             {columns.map((col, colIndex) => {
               const showDivider =
                 colIndex < columns.length - 1 || selectedFile != null;
@@ -459,7 +456,7 @@ export default function FileExplorerPage() {
                   padding={2}
                   variant="transparent"
                   dividers={showDivider ? ['end'] : undefined}
-                  xstyle={[styles.scrollable, styles.fixedColumn]}>
+                  style={{...scrollable, ...fixedColumn}}>
                   <List density="compact" hasDividers={false}>
                     {col.items.map(item => {
                       const isSelected = col.selectedId === item.id;
@@ -506,7 +503,7 @@ export default function FileExplorerPage() {
               <Section
                 padding={6}
                 variant="transparent"
-                xstyle={[styles.scrollable, styles.detailColumn]}>
+                style={{...scrollable, ...detailColumn}}>
                 <VStack gap={4} hAlign="center">
                   <Avatar name={selectedFile.name} size={96} />
                   <VStack gap={1} hAlign="center">

package/templates/pages/form-two-column/page.tsx CHANGED Viewed

@@ -2,8 +2,7 @@
 'use client';
-import {useState} from 'react';
-import * as stylex from '@stylexjs/stylex';
+import {useState, type CSSProperties} from 'react';
 import {VStack, HStack} from '@astryxdesign/core/Layout';
 import {Center} from '@astryxdesign/core/Center';
 import {Section} from '@astryxdesign/core/Section';
@@ -18,7 +17,6 @@ import {Link} from '@astryxdesign/core/Link';
 import {Divider} from '@astryxdesign/core/Divider';
 import {Card} from '@astryxdesign/core/Card';
 import {Selector} from '@astryxdesign/core/Selector';
-import {radiusVars} from '@astryxdesign/core/theme/tokens.stylex';
 const ILLUSTRATION_URL =
   'https://lookaside.facebook.com/assets/astryx/light-working-vertical-2.png';
@@ -51,18 +49,16 @@ const CONTACT_COLUMNS = [
 // AspectRatio has no objectFit/radius prop and there's no Image primitive
 // (#2582), so the cover photo is styled directly. overflow:hidden masks the
 // cover crop to the rounded corners.
-const styles = stylex.create({
-  page: {
-    minHeight: '100%',
-  },
-  illustrationImg: {
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
-    borderRadius: radiusVars['--radius-container'],
-    overflow: 'hidden',
-  },
-});
+const pageStyle: CSSProperties = {
+  minHeight: '100%',
+};
+const illustrationImg: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  borderRadius: 'var(--radius-container)',
+  overflow: 'hidden',
+};
 /**
  * Form (Two-column) — marketing contact form template.
@@ -95,7 +91,7 @@ export default function FormTwoColumnPage() {
   const handleSubmit = () => setSubmitted(true);
   return (
-    <Center xstyle={styles.page}>
+    <Center style={pageStyle}>
       <Section maxWidth={1100} width="100%" padding={10} variant="transparent">
         <VStack gap={10}>
           {/* Two-column; stacks to one column below ~520px. */}
@@ -114,7 +110,7 @@ export default function FormTwoColumnPage() {
                 <img
                   src={ILLUSTRATION_URL}
                   alt="Two people working at a desk"
-                  {...stylex.props(styles.illustrationImg)}
+                  style={illustrationImg}
                 />
               </AspectRatio>
             </VStack>

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

@@ -2,7 +2,7 @@
 'use client';
-import * as stylex from '@stylexjs/stylex';
+import type {CSSProperties} from 'react';
 import {
   VStack,
   HStack,
@@ -35,18 +35,16 @@ const IMAGES = [
 // because Astryx has no image primitive — AspectRatio exposes no objectFit or
 // radius props and there's no Image. Tracked in issue #2582; replace these
 // with component props once it lands.
-const styles = stylex.create({
-  // Fills the AspectRatio box. No objectFit prop on AspectRatio (#2582).
-  galleryImage: {
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
-  },
-  // Rounds the image corners. No radius prop on AspectRatio (#2582).
-  galleryImageClip: {
-    borderRadius: 'var(--radius-container)',
-  },
-});
+// Fills the AspectRatio box. No objectFit prop on AspectRatio (#2582).
+const galleryImage: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+};
+// Rounds the image corners. No radius prop on AspectRatio (#2582).
+const galleryImageClip: CSSProperties = {
+  borderRadius: 'var(--radius-container)',
+};
 export default function GalleryHero() {
   return (
@@ -88,9 +86,9 @@ export default function GalleryHero() {
                 <AspectRatio
                   key={image.src}
                   ratio={4 / 5}
-                  xstyle={styles.galleryImageClip}>
+                  style={galleryImageClip}>
                   <img
-                    {...stylex.props(styles.galleryImage)}
+                    style={galleryImage}
                     src={image.src}
                     alt={image.alt}
                   />