@astryxdesign/cli 0.1.1 → 0.1.2-canary.043f3fd

package/templates/blocks/components/Typeahead/TypeaheadShowcase.tsx

@@ -1,5 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+'use client';
+
+import {useState} from 'react';
 import {Typeahead} from '@astryxdesign/core/Typeahead';
 import type {SearchableItem, SearchSource} from '@astryxdesign/core/Typeahead';
 
@@ -21,14 +24,15 @@ const fruitSource: SearchSource = {
 };
 
 export default function TypeaheadShowcase() {
+  const [value, setValue] = useState<SearchableItem | null>(null);
   return (
     <div style={{width: 320}}>
       <Typeahead
         label="Fruit"
         placeholder="Search fruits..."
         searchSource={fruitSource}
-        value={null}
-        onChange={() => {}}
+        value={value}
+        onChange={setValue}
       />
     </div>
   );

package/templates/pages/shell-nav/page.tsx

@@ -0,0 +1,321 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Fragment, useState, useMemo, useEffect} from 'react';
+import {AppShell} from '@astryxdesign/core/AppShell';
+import {Layout, LayoutHeader, LayoutContent} from '@astryxdesign/core/Layout';
+import {TopNav} from '@astryxdesign/core/TopNav';
+import {DropdownMenu, DropdownMenuItem} from '@astryxdesign/core/DropdownMenu';
+import {CommandPalette} from '@astryxdesign/core/CommandPalette';
+import {createStaticSource} from '@astryxdesign/core/Typeahead';
+import {Divider} from '@astryxdesign/core/Divider';
+import {Kbd} from '@astryxdesign/core/Kbd';
+import {SideNav} from '@astryxdesign/core/SideNav';
+import {TreeList} from '@astryxdesign/core/TreeList';
+import type {TreeListItemData} from '@astryxdesign/core/TreeList';
+import {Icon} from '@astryxdesign/core/Icon';
+import {Text} from '@astryxdesign/core/Text';
+import {IconButton} from '@astryxdesign/core/IconButton';
+import {Button} from '@astryxdesign/core/Button';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {Card} from '@astryxdesign/core/Card';
+import {Stack, VStack, HStack} from '@astryxdesign/core/Stack';
+import {
+  PlayIcon,
+  MagnifyingGlassIcon,
+  FolderIcon,
+  DocumentTextIcon,
+} from '@heroicons/react/24/outline';
+
+const noop = () => {};
+
+const folder = (
+  id: string,
+  children: TreeListItemData[],
+  isExpanded = true,
+): TreeListItemData => ({
+  id,
+  label: <Text maxLines={1}>{id}</Text>,
+  startContent: <Icon icon={FolderIcon} size="xsm" />,
+  isExpanded,
+  children,
+});
+
+const file = (id: string, isSelected = false): TreeListItemData => ({
+  id,
+  label: <Text maxLines={1}>{id}</Text>,
+  startContent: <Icon icon={DocumentTextIcon} size="xsm" />,
+  isSelected,
+});
+
+const FILE_TREE: TreeListItemData[] = [
+  folder('src', [
+    folder('components', [
+      file('AppShell.tsx', true),
+      file('TopNav.tsx'),
+      file('SideNav.tsx'),
+    ]),
+    folder('hooks', [file('useTheme.ts'), file('useResizable.ts')]),
+    file('index.tsx'),
+    file('App.tsx'),
+  ]),
+  folder('public', [file('favicon.ico'), file('robots.txt')], false),
+  file('package.json'),
+  file('tsconfig.json'),
+  file('README.md'),
+];
+
+// Each menu is split into groups; groups are separated by a divider.
+// `[label, shortcut]` — the shortcut renders as a single combined Kbd
+// (e.g. ⌘N); an empty shortcut renders no Kbd.
+type MenuEntry = [label: string, shortcut: string];
+
+const MENU_WIDTH = 280;
+
+const MENUS: {label: string; groups: MenuEntry[][]}[] = [
+  {
+    label: 'File',
+    groups: [
+      [
+        ['New File', '⌘N'],
+        ['New Window', '⇧⌘N'],
+      ],
+      [
+        ['Open...', '⌘O'],
+        ['Save', '⌘S'],
+        ['Save As...', '⇧⌘S'],
+      ],
+      [['Close Editor', '⌘W']],
+    ],
+  },
+  {
+    label: 'Edit',
+    groups: [
+      [
+        ['Undo', '⌘Z'],
+        ['Redo', '⇧⌘Z'],
+      ],
+      [
+        ['Cut', '⌘X'],
+        ['Copy', '⌘C'],
+        ['Paste', '⌘V'],
+      ],
+      [['Find', '⌘F']],
+    ],
+  },
+  {
+    label: 'View',
+    groups: [
+      [['Command Palette', '⇧⌘P']],
+      [
+        ['Explorer', '⇧⌘E'],
+        ['Search', '⇧⌘F'],
+      ],
+      [
+        ['Toggle Terminal', '⌃`'],
+        ['Zen Mode', '⌘K'],
+      ],
+    ],
+  },
+  {
+    label: 'Window',
+    groups: [
+      [
+        ['Minimize', '⌘M'],
+        ['Zoom', ''],
+      ],
+      [
+        ['Next Tab', '⌃⇥'],
+        ['Previous Tab', '⌃⇧⇥'],
+      ],
+      [['Bring All to Front', '']],
+    ],
+  },
+  {
+    label: 'Help',
+    groups: [
+      [
+        ['Documentation', ''],
+        ['Release Notes', ''],
+        ['Report Issue', ''],
+        ['About', ''],
+      ],
+    ],
+  },
+];
+
+const CODE_LINES = [
+  '38%',
+  '62%',
+  '54%',
+  '0%',
+  '46%',
+  '70%',
+  '58%',
+  '34%',
+  '0%',
+  '50%',
+  '66%',
+  '42%',
+  '60%',
+  '28%',
+];
+
+const EDITOR_TABS = ['AppShell.tsx', 'TopNav.tsx', 'theme.ts'];
+
+const COMMANDS = [
+  {id: 'new-file', label: 'New File'},
+  {id: 'open-file', label: 'Open File…'},
+  {id: 'save-all', label: 'Save All'},
+  {id: 'find-in-files', label: 'Find in Files'},
+  {id: 'toggle-terminal', label: 'Toggle Terminal'},
+  {id: 'go-to-symbol', label: 'Go to Symbol…'},
+  {id: 'appshell', label: 'AppShell.tsx'},
+  {id: 'topnav', label: 'TopNav.tsx'},
+  {id: 'sidenav', label: 'SideNav.tsx'},
+  {id: 'use-theme', label: 'useTheme.ts'},
+  {id: 'theme', label: 'theme.ts'},
+];
+
+export default function ShellNav() {
+  const [isPaletteOpen, setIsPaletteOpen] = useState(false);
+  const searchSource = useMemo(() => createStaticSource(COMMANDS), []);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+        e.preventDefault();
+        setIsPaletteOpen(true);
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  return (
+    <>
+      <AppShell
+        contentPadding={0}
+        topNav={
+          <TopNav
+            label="Astryx Studio menu bar"
+            startContent={
+              <>
+                {MENUS.map(menu => (
+                  <DropdownMenu
+                    key={menu.label}
+                    button={{label: menu.label, variant: 'ghost', size: 'sm'}}
+                    hasChevron={false}
+                    menuWidth={MENU_WIDTH}>
+                    {menu.groups.map((group, gi) => (
+                      <Fragment key={gi}>
+                        {gi > 0 && <Divider />}
+                        {group.map(([label, shortcut]) => (
+                          <DropdownMenuItem
+                            key={label}
+                            label={label}
+                            onClick={noop}
+                            endContent={
+                              shortcut ? <Kbd keys={shortcut} /> : undefined
+                            }
+                          />
+                        ))}
+                      </Fragment>
+                    ))}
+                  </DropdownMenu>
+                ))}
+              </>
+            }
+            endContent={
+              <>
+                <Stack onClick={() => setIsPaletteOpen(true)}>
+                  <TextInput
+                    label="Search files and commands"
+                    isLabelHidden
+                    size="sm"
+                    width={240}
+                    startIcon={MagnifyingGlassIcon}
+                    placeholder="Search files and commands…"
+                    value=""
+                    onChange={() => {}}
+                  />
+                </Stack>
+                <IconButton
+                  label="Run project"
+                  tooltip="Run"
+                  variant="ghost"
+                  icon={<Icon icon={PlayIcon} size="sm" />}
+                />
+                <Button label="Share" variant="secondary" />
+              </>
+            }
+          />
+        }
+        sideNav={
+          <SideNav
+            resizable={{defaultWidth: 240, minWidth: 180, maxWidth: 400}}>
+            <TreeList items={FILE_TREE} density="compact" />
+          </SideNav>
+        }>
+        <Layout
+          height="fill"
+          header={
+            <LayoutHeader hasDivider padding={6}>
+              <HStack gap={2}>
+                {EDITOR_TABS.map(tab => (
+                  <Card
+                    key={tab}
+                    variant="muted"
+                    padding={0}
+                    width={132}
+                    height={36}
+                  />
+                ))}
+              </HStack>
+            </LayoutHeader>
+          }
+          content={
+            <LayoutContent padding={6}>
+              <VStack gap={2}>
+                {CODE_LINES.map((width, i) =>
+                  width === '0%' ? (
+                    <Card
+                      key={i}
+                      variant="muted"
+                      padding={0}
+                      width={1}
+                      height={14}
+                    />
+                  ) : (
+                    <HStack key={i} gap={3} vAlign="center">
+                      <Card
+                        variant="muted"
+                        padding={0}
+                        width={20}
+                        height={14}
+                      />
+                      <Card
+                        variant="muted"
+                        padding={0}
+                        width={width}
+                        height={14}
+                      />
+                    </HStack>
+                  ),
+                )}
+              </VStack>
+            </LayoutContent>
+          }
+        />
+      </AppShell>
+      <CommandPalette
+        isOpen={isPaletteOpen}
+        onOpenChange={setIsPaletteOpen}
+        searchSource={searchSource}
+        label="Search files and commands"
+        onValueChange={() => setIsPaletteOpen(false)}
+      />
+    </>
+  );
+}

package/templates/pages/shell-nav/template.doc.mjs

@@ -0,0 +1,12 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'page',
+  name: 'Shell Nav',
+  displayName: 'Shell Nav',
+  description:
+    'A top + side nav app shell with a File/Edit/View/Window/Help menu bar plus command-palette search, a resizable file-tree SideNav, and a static grey-card tabbed code editor.',
+  isReady: true,
+  category: 'Shell - Top Nav + Left Sidebar',
+};

package/templates/pages/shell-side-nav/page.tsx

@@ -0,0 +1,242 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {AppShell} from '@astryxdesign/core/AppShell';
+import {Divider} from '@astryxdesign/core/Divider';
+import {Layout, LayoutContent, LayoutFooter} from '@astryxdesign/core/Layout';
+import {
+  SideNav,
+  SideNavHeading,
+  SideNavItem,
+  SideNavSection,
+} from '@astryxdesign/core/SideNav';
+import {NavIcon} from '@astryxdesign/core/NavIcon';
+import {Icon} from '@astryxdesign/core/Icon';
+import type {IconType} from '@astryxdesign/core/Icon';
+import {MoreMenu} from '@astryxdesign/core/MoreMenu';
+import {StatusDot} from '@astryxdesign/core/StatusDot';
+import type {StatusDotVariant} from '@astryxdesign/core/StatusDot';
+import {Card} from '@astryxdesign/core/Card';
+import {Stack, VStack, HStack} from '@astryxdesign/core/Stack';
+import {
+  SparklesIcon,
+  PlusIcon,
+  MagnifyingGlassIcon,
+  BookOpenIcon,
+  Cog6ToothIcon,
+  UserCircleIcon,
+  UserIcon,
+  BuildingOffice2Icon,
+  CodeBracketIcon,
+} from '@heroicons/react/24/outline';
+
+type Conversation = {
+  label: string;
+  status: StatusDotVariant;
+  statusLabel: string;
+};
+
+type Workspace = {
+  name: string;
+  icon: IconType;
+  chats: Conversation[];
+};
+
+const WORKSPACES: Workspace[] = [
+  {
+    name: 'Personal',
+    icon: UserIcon,
+    chats: [
+      {
+        label: 'Weekend trip planning',
+        status: 'success',
+        statusLabel: 'Active',
+      },
+      {
+        label: 'Recipe ideas for the week',
+        status: 'neutral',
+        statusLabel: 'Idle',
+      },
+      {
+        label: 'Book recommendations',
+        status: 'warning',
+        statusLabel: 'Needs review',
+      },
+      {label: 'Home workout plan', status: 'neutral', statusLabel: 'Idle'},
+    ],
+  },
+  {
+    name: 'Acme Corp',
+    icon: BuildingOffice2Icon,
+    chats: [
+      {label: 'Q3 roadmap draft', status: 'accent', statusLabel: 'In progress'},
+      {
+        label: 'Customer onboarding flow',
+        status: 'success',
+        statusLabel: 'Active',
+      },
+      {
+        label: 'Pricing strategy review',
+        status: 'warning',
+        statusLabel: 'Needs review',
+      },
+      {label: 'Standup summary', status: 'neutral', statusLabel: 'Idle'},
+    ],
+  },
+  {
+    name: 'Open Source',
+    icon: CodeBracketIcon,
+    chats: [
+      {
+        label: 'StyleX migration notes',
+        status: 'accent',
+        statusLabel: 'In progress',
+      },
+      {
+        label: 'Skeleton loading states',
+        status: 'success',
+        statusLabel: 'Active',
+      },
+      {label: 'Accessibility audit', status: 'error', statusLabel: 'Blocked'},
+      {label: 'Release notes v4.0', status: 'neutral', statusLabel: 'Idle'},
+    ],
+  },
+];
+
+const SELECTED_CHAT = 'StyleX migration notes';
+
+const MESSAGES = [
+  {role: 'assistant', width: '78%', height: 104},
+  {role: 'user', width: '48%', height: 48},
+  {role: 'assistant', width: '64%', height: 132},
+  {role: 'user', width: '38%', height: 40},
+];
+
+function ConversationItem({
+  label,
+  status,
+  statusLabel,
+  isSelected,
+}: {
+  label: string;
+  status: StatusDotVariant;
+  statusLabel: string;
+  isSelected?: boolean;
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const showMenu = isHovered || isMenuOpen;
+
+  return (
+    <Stack
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}>
+      <SideNavItem
+        label={label}
+        href="#"
+        isSelected={isSelected}
+        endContent={
+          showMenu ? (
+            <MoreMenu
+              size="sm"
+              label="Conversation options"
+              hasAutoFocus={false}
+              onOpenChange={setIsMenuOpen}
+              items={[
+                {label: 'Pin', onClick: () => {}},
+                {label: 'Rename', onClick: () => {}},
+                {label: 'Archive', onClick: () => {}},
+                {label: 'Delete', onClick: () => {}},
+              ]}
+            />
+          ) : (
+            <StatusDot variant={status} label={statusLabel} />
+          )
+        }
+      />
+    </Stack>
+  );
+}
+
+export default function ShellSideNav() {
+  return (
+    <AppShell
+      contentPadding={0}
+      sideNav={
+        <SideNav
+          collapsible
+          resizable={{defaultWidth: 300, minWidth: 220, maxWidth: 420}}
+          header={
+            <SideNavHeading
+              heading="AI Assistant"
+              icon={<NavIcon icon={<Icon icon={SparklesIcon} size="sm" />} />}
+              headingHref="#"
+            />
+          }
+          footer={
+            <SideNavSection title="Account" isHeaderHidden>
+              <SideNavItem label="Settings" icon={Cog6ToothIcon} href="#" />
+              <SideNavItem label="Sarah Chen" icon={UserCircleIcon} href="#" />
+            </SideNavSection>
+          }>
+          <SideNavSection title="Menu" isHeaderHidden>
+            <SideNavItem label="New chat" icon={PlusIcon} href="#" />
+            <SideNavItem label="Search" icon={MagnifyingGlassIcon} href="#" />
+            <SideNavItem label="Library" icon={BookOpenIcon} href="#" />
+          </SideNavSection>
+          <Divider />
+          <SideNavSection title="Workspaces" isHeaderHidden>
+            {WORKSPACES.map(workspace => (
+              <SideNavItem
+                key={workspace.name}
+                label={workspace.name}
+                icon={workspace.icon}
+                collapsible={{defaultIsCollapsed: false}}>
+                <VStack gap={0.5}>
+                  {workspace.chats.map(chat => (
+                    <ConversationItem
+                      key={chat.label}
+                      label={chat.label}
+                      status={chat.status}
+                      statusLabel={chat.statusLabel}
+                      isSelected={chat.label === SELECTED_CHAT}
+                    />
+                  ))}
+                </VStack>
+              </SideNavItem>
+            ))}
+          </SideNavSection>
+        </SideNav>
+      }>
+      <Layout
+        height="fill"
+        contentWidth={768}
+        content={
+          <LayoutContent padding={6}>
+            <VStack gap={5}>
+              {MESSAGES.map((message, mi) => (
+                <HStack
+                  key={mi}
+                  hAlign={message.role === 'assistant' ? 'start' : 'end'}>
+                  <Card
+                    variant="muted"
+                    padding={0}
+                    width={message.width}
+                    height={message.height}
+                  />
+                </HStack>
+              ))}
+            </VStack>
+          </LayoutContent>
+        }
+        footer={
+          <LayoutFooter>
+            <Card variant="muted" padding={0} width="100%" height={56} />
+          </LayoutFooter>
+        }
+      />
+    </AppShell>
+  );
+}

package/templates/pages/shell-side-nav/template.doc.mjs

@@ -0,0 +1,12 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'page',
+  name: 'Side Nav',
+  displayName: 'Side Nav',
+  description:
+    'A side-nav app shell with a collapsible, resizable SideNav (new chat, search, library, and workspace-grouped conversations with status dots) over static grey-card conversation and composer placeholders.',
+  isReady: true,
+  category: 'Shell - Left Sidebar',
+};