@astryxdesign/cli 0.1.0-canary.f94dd07 → 0.1.0

package/templates/pages/documentation-design/page.tsx

@@ -2,8 +2,14 @@
 
 'use client';
 
-import {useCallback, useState, useMemo} from 'react';
+import {useState, useMemo} from 'react';
 import * as stylex from '@stylexjs/stylex';
+import {
+  SideNav,
+  SideNavHeading,
+  SideNavItem,
+  SideNavSection,
+} from '@astryxdesign/core/SideNav';
 import {Heading, Text} from '@astryxdesign/core/Text';
 import {Button} from '@astryxdesign/core/Button';
 import {IconButton} from '@astryxdesign/core/IconButton';
@@ -14,10 +20,8 @@ import {Token} from '@astryxdesign/core/Token';
 import {Banner} from '@astryxdesign/core/Banner';
 import {CodeBlock} from '@astryxdesign/core/CodeBlock';
 import {TabList, Tab} from '@astryxdesign/core/TabList';
-import {Selector} from '@astryxdesign/core/Selector';
 import {HStack, VStack, StackItem} from '@astryxdesign/core/Stack';
 import {Layout, LayoutContent, LayoutPanel} from '@astryxdesign/core/Layout';
-import {useMediaQuery} from '@astryxdesign/core/hooks';
 import {Dialog, DialogHeader} from '@astryxdesign/core/Dialog';
 import {Divider} from '@astryxdesign/core/Divider';
 import {Tooltip} from '@astryxdesign/core/Tooltip';
@@ -25,7 +29,6 @@ import {Table, pixel} from '@astryxdesign/core/Table';
 import {Icon} from '@astryxdesign/core/Icon';
 import {Section} from '@astryxdesign/core/Section';
 import {Center} from '@astryxdesign/core/Center';
-import {Outline, type OutlineItem} from '@astryxdesign/core/Outline';
 import {
   ArrowTopRightOnSquareIcon,
   ArrowsPointingOutIcon,
@@ -34,25 +37,8 @@ import {
 
 const styles = stylex.create({
   tabListFlush: {marginInlineStart: '-12px'},
-  outlinePanel: {
-    position: 'sticky',
-    top: 24,
-    alignSelf: 'start',
-    paddingBlockStart: 120,
-  },
 });
 
-const COMPONENT_OUTLINE_ITEMS: OutlineItem[] = [
-  {id: 'usage', label: 'Usage', level: 2},
-  {id: 'best-practices', label: 'Best practices', level: 3},
-  {id: 'examples', label: 'Examples', level: 2},
-];
-
-const COMPONENT_OUTLINE_OPTIONS = COMPONENT_OUTLINE_ITEMS.map(item => ({
-  value: item.id,
-  label: item.label,
-}));
-
 // ---------------------------------------------------------------------------
 // DialogPreview — stateful dialog preview for component previews
 // ---------------------------------------------------------------------------
@@ -507,21 +493,14 @@ function getComponentDocs(key: string) {
 // ComponentDetailView
 // ---------------------------------------------------------------------------
 
-function ComponentDetailView({activeNav}: {activeNav: string}) {
+function ComponentDetailView({
+  activeNav,
+  nav,
+}: {
+  activeNav: string;
+  nav: React.ReactNode;
+}) {
   const [exampleTabs, setExampleTabs] = useState<Record<string, string>>({});
-  const [activeId, setActiveId] = useState<string | undefined>(
-    COMPONENT_OUTLINE_ITEMS[0]?.id,
-  );
-  const isMobile = useMediaQuery('(max-width: 768px)');
-
-  const scrollToId = useCallback((id: string) => {
-    setActiveId(id);
-    const target = document.getElementById(id);
-    if (target != null) {
-      target.scrollIntoView({behavior: 'smooth', block: 'start'});
-      window.history.pushState(null, '', `#${id}`);
-    }
-  }, []);
 
   const EXAMPLE_PREVIEWS: Record<string, React.ReactNode[]> = {
     button: [
@@ -577,42 +556,25 @@ function ComponentDetailView({activeNav}: {activeNav: string}) {
 
   return (
     <Layout
-      height="auto"
+      height="fill"
       contentWidth={960}
-      end={
-        isMobile ? undefined : (
-          <LayoutPanel
-            isScrollable={false}
-            label="On this page"
-            role="complementary"
-            xstyle={styles.outlinePanel}>
-            <Outline
-              items={COMPONENT_OUTLINE_ITEMS}
-              onActiveIdChange={setActiveId}
-            />
-          </LayoutPanel>
-        )
+      start={
+        <LayoutPanel hasDivider padding={0}>
+          {nav}
+        </LayoutPanel>
       }
       content={
-        <LayoutContent isScrollable={false} padding={8}>
+        <LayoutContent padding={8}>
           <VStack gap={8}>
             <VStack gap={2}>
               <Text type="display-1">{getComponentName(activeNav)}</Text>
               <Text type="supporting" color="secondary">
                 March 30, 2026 · Updated 5:40 p.m. PST
               </Text>
-              {isMobile && (
-                <Selector
-                  label="On this page"
-                  isLabelHidden
-                  options={COMPONENT_OUTLINE_OPTIONS}
-                  value={activeId}
-                  onChange={scrollToId}
-                  width="100%"
-                />
-              )}
             </VStack>
 
+            <Divider />
+
             <Card variant="muted" padding={0}>
               <Center height={360}>
                 {COMPONENT_PREVIEWS[activeNav] ?? (
@@ -624,18 +586,13 @@ function ComponentDetailView({activeNav}: {activeNav: string}) {
             </Card>
 
             <VStack gap={4}>
-              <Heading id="usage" level={2}>
-                Usage
-              </Heading>
+              <Heading level={2}>Usage</Heading>
               <Text type="large" weight="normal">
                 {docs.usage}
               </Text>
-              <Heading id="best-practices" level={3}>
-                Best practices
-              </Heading>
+              <Heading level={3}>Best practices</Heading>
               <Table
                 data={docs.bestPractices as Record<string, unknown>[]}
-                dividers="none"
                 columns={[
                   {
                     key: 'type',
@@ -659,15 +616,14 @@ function ComponentDetailView({activeNav}: {activeNav: string}) {
                   },
                 ]}
                 density="spacious"
+                dividers="rows"
               />
             </VStack>
 
             <Divider />
 
             <VStack gap={4}>
-              <Heading id="examples" level={2}>
-                Examples
-              </Heading>
+              <Heading level={2}>Examples</Heading>
               <Text type="large" weight="normal">
                 Explore common configurations, variations, and states for this
                 component.
@@ -719,10 +675,7 @@ function ComponentDetailView({activeNav}: {activeNav: string}) {
                         <TabList
                           value={activeTab}
                           onChange={value =>
-                            setExampleTabs(prev => ({
-                              ...prev,
-                              [tabKey]: value,
-                            }))
+                            setExampleTabs(prev => ({...prev, [tabKey]: value}))
                           }
                           size="sm"
                           xstyle={styles.tabListFlush}>
@@ -732,11 +685,7 @@ function ComponentDetailView({activeNav}: {activeNav: string}) {
                         {activeTab === 'description' ? (
                           <Text type="body">{example.description}</Text>
                         ) : (
-                          <CodeBlock
-                            code={example.code}
-                            language="tsx"
-                            width="100%"
-                          />
+                          <CodeBlock code={example.code} language="tsx" />
                         )}
                       </VStack>
                     </Section>
@@ -756,5 +705,31 @@ function ComponentDetailView({activeNav}: {activeNav: string}) {
 // ---------------------------------------------------------------------------
 
 export default function DesignDocumentationPage() {
-  return <ComponentDetailView activeNav="button" />;
+  const [activePage, setActivePage] = useState<string>('button');
+
+  return (
+    <ComponentDetailView
+      activeNav={activePage}
+      nav={
+        <SideNav header={<SideNavHeading heading="Product Name" />}>
+          {COMPONENT_CATEGORIES.map(category => (
+            <SideNavSection key={category.label} title={category.label}>
+              {category.items.map(item => (
+                <SideNavItem
+                  key={item.key}
+                  label={item.name}
+                  isSelected={activePage === item.key}
+                  onClick={
+                    item.key === 'button'
+                      ? () => setActivePage(item.key)
+                      : undefined
+                  }
+                />
+              ))}
+            </SideNavSection>
+          ))}
+        </SideNav>
+      }
+    />
+  );
 }

package/templates/pages/documentation-technical/page.tsx

@@ -2,21 +2,22 @@
 
 'use client';
 
-import {useCallback, useState} from 'react';
-import * as stylex from '@stylexjs/stylex';
+import {
+  SideNav,
+  SideNavHeading,
+  SideNavItem,
+  SideNavSection,
+} from '@astryxdesign/core/SideNav';
 import {Heading, Text} from '@astryxdesign/core/Text';
 import {Button} from '@astryxdesign/core/Button';
 import {Card} from '@astryxdesign/core/Card';
 import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
 import {List, ListItem} from '@astryxdesign/core/List';
 import {CodeBlock} from '@astryxdesign/core/CodeBlock';
-import {Selector} from '@astryxdesign/core/Selector';
 import {HStack, VStack, StackItem} from '@astryxdesign/core/Stack';
 import {Layout, LayoutContent, LayoutPanel} from '@astryxdesign/core/Layout';
 import {Divider} from '@astryxdesign/core/Divider';
 import {Icon} from '@astryxdesign/core/Icon';
-import {Outline, type OutlineItem} from '@astryxdesign/core/Outline';
-import {useMediaQuery} from '@astryxdesign/core/hooks';
 import {
   SparklesIcon,
   ClipboardDocumentIcon,
@@ -27,75 +28,35 @@ import {
 // Main component
 // ---------------------------------------------------------------------------
 
-const OUTLINE_ITEMS: OutlineItem[] = [
-  {id: 'prerequisites', label: 'Prerequisites', level: 2},
-  {id: 'install-package', label: 'Install the package', level: 2},
-  {id: 'configure-theming', label: 'Configure theming', level: 2},
-  {id: 'next-steps', label: 'Next steps', level: 2},
-];
-
-const OUTLINE_OPTIONS = OUTLINE_ITEMS.map(item => ({
-  value: item.id,
-  label: item.label,
-}));
-
-const styles = stylex.create({
-  outlinePanel: {
-    position: 'sticky',
-    top: 24,
-    alignSelf: 'start',
-    paddingBlockStart: 120,
-  },
-});
-
 export default function TechnicalDocumentationPage() {
-  const [activeId, setActiveId] = useState<string | undefined>(
-    OUTLINE_ITEMS[0]?.id,
-  );
-  const isMobile = useMediaQuery('(max-width: 768px)');
-
-  const scrollToId = useCallback((id: string) => {
-    setActiveId(id);
-    const target = document.getElementById(id);
-    if (target != null) {
-      target.scrollIntoView({behavior: 'smooth', block: 'start'});
-      window.history.pushState(null, '', `#${id}`);
-    }
-  }, []);
-
   return (
     <Layout
-      height="auto"
+      height="fill"
       contentWidth={960}
-      end={
-        isMobile ? undefined : (
-          <LayoutPanel
-            isScrollable={false}
-            label="On this page"
-            role="complementary"
-            xstyle={styles.outlinePanel}>
-            <Outline items={OUTLINE_ITEMS} onActiveIdChange={setActiveId} />
-          </LayoutPanel>
-        )
+      start={
+        <LayoutPanel hasDivider padding={0}>
+          <SideNav header={<SideNavHeading heading="Product Name" />}>
+            <SideNavSection title="Navigation" isHeaderHidden>
+              <SideNavItem label="Home" />
+              <SideNavItem label="Getting started" isSelected />
+            </SideNavSection>
+          </SideNav>
+        </LayoutPanel>
       }
       content={
-        <LayoutContent isScrollable={false} padding={8}>
+        <LayoutContent padding={8}>
           <VStack gap={8}>
             <VStack gap={2}>
-              <Text type="display-1">Getting started with Product Name</Text>
+              <Text type="display-1">
+                Getting started with Product Name
+              </Text>
               <Text type="supporting" color="secondary">
                 Last updated March 30, 2026
               </Text>
-              {isMobile && (
-                <Selector
-                  label="On this page"
-                  isLabelHidden
-                  options={OUTLINE_OPTIONS}
-                  value={activeId}
-                  onChange={scrollToId}
-                  width="100%"
-                />
-              )}
+              <Text type="body">
+                Install the package, configure your theme, and build your first
+                component in three steps.
+              </Text>
             </VStack>
 
             <Card>
@@ -103,7 +64,11 @@ export default function TechnicalDocumentationPage() {
                 <HStack gap={2} vAlign="center">
                   <StackItem size="fill">
                     <HStack gap={2} vAlign="center">
-                      <Icon icon={SparklesIcon} size="sm" color="secondary" />
+                      <Icon
+                        icon={SparklesIcon}
+                        size="sm"
+                        color="secondary"
+                      />
                       <Text type="body" weight="semibold">
                         AI Assistance
                       </Text>
@@ -138,17 +103,15 @@ export default function TechnicalDocumentationPage() {
                 </HStack>
                 <Text type="body" color="secondary">
                   Help me get set up with Product Name. Based on my project, do
-                  the following: 1. Install @astryxdesign/core and the StyleX
-                  compiler. 2. Wrap my app in ThemeProvider. 3. Replace one
-                  existing component with an Astryx equivalent.
+                  the following: 1. Install @astryxdesign/core and the StyleX compiler.
+                  2. Wrap my app in ThemeProvider. 3. Replace one existing
+                  component with an Astryx equivalent.
                 </Text>
               </VStack>
             </Card>
 
             <VStack gap={4}>
-              <Heading id="prerequisites" level={2}>
-                Prerequisites
-              </Heading>
+              <Heading level={2}>Prerequisites</Heading>
               <List density="compact" listStyle="disc">
                 <ListItem label="Node.js 18+" />
                 <ListItem label="React 18 or 19" />
@@ -159,9 +122,7 @@ export default function TechnicalDocumentationPage() {
             <Divider />
 
             <VStack gap={4}>
-              <Heading id="install-package" level={2}>
-                Install the package
-              </Heading>
+              <Heading level={2}>Install the package</Heading>
               <Text type="body">
                 Every project starts with installing the core package. This
                 gives you access to all components, tokens, and utilities.
@@ -170,55 +131,54 @@ export default function TechnicalDocumentationPage() {
                 <Text type="body" weight="bold">
                   Step 1: Install the core package
                 </Text>
-                <CodeBlock
-                  code="npm install @astryxdesign/core"
-                  language="bash"
-                  width="100%"
-                />
+                <Card padding={0}>
+                  <CodeBlock code="npm install @astryxdesign/core" language="bash" />
+                </Card>
               </VStack>
               <VStack gap={2}>
                 <Text type="body" weight="bold">
                   Step 2: Add the StyleX compiler
                 </Text>
                 <Text type="body" color="secondary">
-                  Astryx uses StyleX for styling. Add the compiler plugin to
-                  your build configuration.
+                  Astryx uses StyleX for styling. Add the compiler plugin to your
+                  build configuration.
                 </Text>
-                <CodeBlock
-                  code="npm install @stylexjs/babel-plugin"
-                  language="bash"
-                  width="100%"
-                />
+                <Card padding={0}>
+                  <CodeBlock
+                    code="npm install @stylexjs/babel-plugin"
+                    language="bash"
+                  />
+                </Card>
               </VStack>
               <VStack gap={2}>
                 <Text type="body" weight="bold">
                   Step 3: Import your first component
                 </Text>
-                <CodeBlock
-                  code={`import { Button } from '@astryxdesign/core/Button';
+                <Card padding={0}>
+                  <CodeBlock
+                    code={`import { Button } from '@astryxdesign/core/Button';
 
 export default function App() {
   return <Button label="Hello Astryx" variant="primary" />;
 }`}
-                  language="tsx"
-                  width="100%"
-                />
+                    language="tsx"
+                  />
+                </Card>
               </VStack>
             </VStack>
 
             <Divider />
 
             <VStack gap={4}>
-              <Heading id="configure-theming" level={2}>
-                Configure theming
-              </Heading>
+              <Heading level={2}>Configure theming</Heading>
               <Text type="body">
                 Astryx ships with a default theme that works out of the box. To
                 customize colors, typography, and spacing, wrap your app in a
                 theme provider.
               </Text>
-              <CodeBlock
-                code={`import { ThemeProvider } from '@astryxdesign/core/Theme';
+              <Card padding={0}>
+                <CodeBlock
+                  code={`import { ThemeProvider } from '@astryxdesign/core/Theme';
 
 export default function App({ children }) {
   return (
@@ -227,9 +187,9 @@ export default function App({ children }) {
     </ThemeProvider>
   );
 }`}
-                language="tsx"
-                width="100%"
-              />
+                  language="tsx"
+                />
+              </Card>
               <Text type="body" color="secondary">
                 See the theming guide for the full list of customizable tokens.
               </Text>
@@ -238,9 +198,7 @@ export default function App({ children }) {
             <Divider />
 
             <VStack gap={4}>
-              <Heading id="next-steps" level={2}>
-                Next steps
-              </Heading>
+              <Heading level={2}>Next steps</Heading>
               <List density="compact" listStyle="disc">
                 <ListItem label="Fundamental concepts — How theming, layout, and composition work" />
                 <ListItem label="Component API reference — Props, variants, and examples for every component" />