astryx-dracula 0.1.3 → 0.2.0

package/templates/settings.template.mjs

@@ -0,0 +1,6 @@
+export default {
+  type: 'page',
+  name: 'Settings Form',
+  description: 'Single scrolling form with profile sections',
+  category: 'forms',
+};

package/templates/settings.tsx

@@ -0,0 +1,235 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {useState} from 'react';
+import {useMediaQuery} from '@astryxdesign/core/hooks';
+import {
+  VStack,
+  HStack,
+  StackItem,
+  Layout,
+  LayoutContent,
+  LayoutHeader,
+  LayoutPanel,
+} from '@astryxdesign/core/Layout';
+import {Grid} from '@astryxdesign/core/Grid';
+import {List, ListItem} from '@astryxdesign/core/List';
+import {TabList, Tab, TabMenu} from '@astryxdesign/core/TabList';
+import {Text, Heading} from '@astryxdesign/core/Text';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {Button} from '@astryxdesign/core/Button';
+import {Divider} from '@astryxdesign/core/Divider';
+import {CheckboxInput} from '@astryxdesign/core/CheckboxInput';
+import {Typeahead} from '@astryxdesign/core/Typeahead';
+import {Search} from 'lucide-react';
+import type {SearchableItem, SearchSource} from '@astryxdesign/core/Typeahead';
+
+const NAV_ITEMS = [
+  'Profile',
+  'Account',
+  'Members',
+  'Billing',
+  'Invoices',
+  'API',
+];
+
+const SETTINGS_ITEMS: SearchableItem[] = [
+  {id: '1', label: 'Username'},
+  {id: '2', label: 'First name'},
+  {id: '3', label: 'Last name'},
+  {id: '4', label: 'Email address'},
+  {id: '5', label: 'Change password'},
+  {id: '6', label: 'Data Export Access'},
+  {id: '7', label: 'Allow Admin to Add Members'},
+  {id: '8', label: 'Two-Factor Authentication'},
+];
+
+const settingsSearchSource: SearchSource<SearchableItem> = {
+  search: (query: string) =>
+    SETTINGS_ITEMS.filter(item =>
+      item.label.toLowerCase().includes(query.toLowerCase()),
+    ),
+  bootstrap: () => SETTINGS_ITEMS,
+};
+
+export default function SettingsTemplate() {
+  const isNarrow = useMediaQuery('(max-width: 768px)');
+  const [activeNav, setActiveNav] = useState('Profile');
+  const [username, setUsername] = useState('vlad_tepes');
+  const [firstName, setFirstName] = useState('Vlad');
+  const [lastName, setLastName] = useState('Tepes');
+  const [email, setEmail] = useState('vlad_tepes@castle-dracula.ro');
+  const [currentPw, setCurrentPw] = useState('password123');
+  const [newPw, setNewPw] = useState('password123');
+  const [confirmPw, setConfirmPw] = useState('password123');
+  const [dataExport, setDataExport] = useState(false);
+  const [adminMembers, setAdminMembers] = useState(false);
+  const [twoFactor, setTwoFactor] = useState(false);
+  const [searchValue, setSearchValue] = useState<SearchableItem | null>(null);
+
+  return (
+    <Layout
+      height="fill"
+      contentWidth={1440}
+      header={
+        <LayoutHeader hasDivider>
+          <HStack vAlign="center">
+            <StackItem size="fill">
+              <Heading level={1}>Settings</Heading>
+            </StackItem>
+            <Typeahead
+              label="Search"
+              isLabelHidden
+              placeholder="Search coven settings..."
+              searchSource={settingsSearchSource}
+              value={searchValue}
+              onChange={setSearchValue}
+              hasEntriesOnFocus
+              startIcon={Search}
+            />
+          </HStack>
+        </LayoutHeader>
+      }
+      start={
+        isNarrow ? undefined : (
+          <LayoutPanel hasDivider={false} width={260} padding={2}>
+            <List density="balanced">
+              {NAV_ITEMS.map(item => (
+                <ListItem
+                  key={item}
+                  label={item}
+                  isSelected={activeNav === item}
+                  onClick={() => setActiveNav(item)}
+                />
+              ))}
+            </List>
+          </LayoutPanel>
+        )
+      }
+      content={
+        <LayoutContent padding={4}>
+          <VStack gap={4}>
+            {/* Mobile: the sidebar nav collapses to a horizontal, centered
+                tab bar above the content. */}
+            {isNarrow && (
+              <VStack hAlign="center">
+                <TabList value={activeNav} onChange={setActiveNav}>
+                  {NAV_ITEMS.slice(0, 3).map(item => (
+                    <Tab key={item} value={item} label={item} />
+                  ))}
+                  <TabMenu
+                    label="More"
+                    options={NAV_ITEMS.slice(3).map(item => ({
+                      value: item,
+                      label: item,
+                    }))}
+                  />
+                </TabList>
+              </VStack>
+            )}
+            <Grid columns={{minWidth: 320}} gap={10}>
+              <VStack gap={1}>
+                <Heading level={3}>Basic information</Heading>
+                <Text type="body" color="secondary">
+                  View and update your crypt details and coven account information.
+                </Text>
+              </VStack>
+              <VStack gap={4}>
+                <TextInput
+                  label="Username"
+                  value={username}
+                  onChange={setUsername}
+                />
+                <TextInput
+                  label="First name"
+                  value={firstName}
+                  onChange={setFirstName}
+                />
+                <TextInput
+                  label="Last name"
+                  value={lastName}
+                  onChange={setLastName}
+                />
+                <TextInput
+                  label="Email address"
+                  value={email}
+                  onChange={setEmail}
+                />
+                <HStack>
+                  <Button label="Save" variant="primary" />
+                </HStack>
+              </VStack>
+            </Grid>
+
+            <Divider />
+
+            <Grid columns={{minWidth: 320}} gap={10}>
+              <VStack gap={1}>
+                <Heading level={3}>Change password</Heading>
+                <Text type="body" color="secondary">
+                  Update your password to keep your coffin sealed.
+                </Text>
+              </VStack>
+              <VStack gap={4}>
+                <TextInput
+                  label="Verify current password"
+                  type="password"
+                  value={currentPw}
+                  onChange={setCurrentPw}
+                />
+                <TextInput
+                  label="New password"
+                  type="password"
+                  value={newPw}
+                  onChange={setNewPw}
+                />
+                <TextInput
+                  label="Confirm password"
+                  type="password"
+                  value={confirmPw}
+                  onChange={setConfirmPw}
+                />
+                <HStack>
+                  <Button label="Save" variant="primary" />
+                </HStack>
+              </VStack>
+            </Grid>
+
+            <Divider />
+
+            <Grid columns={{minWidth: 320}} gap={10}>
+              <VStack gap={1}>
+                <Heading level={3}>Advanced settings</Heading>
+                <Text type="body" color="secondary">
+                  Configure detailed coven preferences and warding options.
+                </Text>
+              </VStack>
+              <VStack gap={5}>
+                <CheckboxInput
+                  label="Data Export Access"
+                  description="Allow export of personal data and backups."
+                  value={dataExport}
+                  onChange={setDataExport}
+                />
+                <CheckboxInput
+                  label="Allow Admin to Add Members"
+                  description="Admins can invite and manage members."
+                  value={adminMembers}
+                  onChange={setAdminMembers}
+                />
+                <CheckboxInput
+                  label="Enable Two-Factor Authentication"
+                  description="Require 2FA for added account security."
+                  value={twoFactor}
+                  onChange={setTwoFactor}
+                />
+                <HStack>
+                  <Button label="Save" variant="primary" />
+                </HStack>
+              </VStack>
+            </Grid>
+          </VStack>
+        </LayoutContent>
+      }
+    />
+  );
+}

package/templates/shell-nav.template.mjs

@@ -0,0 +1,6 @@
+export default {
+  type: 'page',
+  name: 'Shell Nav',
+  description: 'Top and side nav app shell with code editor',
+  category: 'tooling',
+};

package/templates/shell-nav.tsx

@@ -0,0 +1,306 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+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 {Button} from '@astryxdesign/core/Button';
+import {Card} from '@astryxdesign/core/Card';
+import {VStack, HStack} from '@astryxdesign/core/Stack';
+import {Search, Folder, FileText} from 'lucide-react';
+
+const noop = () => {};
+
+const folder = (
+  id: string,
+  children: TreeListItemData[],
+  isExpanded = true,
+): TreeListItemData => ({
+  id,
+  label: <Text maxLines={1}>{id}</Text>,
+  startContent: <Icon icon={Folder} size="xsm" />,
+  isExpanded,
+  children,
+});
+
+const file = (id: string, isSelected = false): TreeListItemData => ({
+  id,
+  label: <Text maxLines={1}>{id}</Text>,
+  startContent: <Icon icon={FileText} 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];
+
+// Wide enough that label + Kbd shortcut never clip at the menu edge —
+// "Previous Tab ⌃⇧⇥" is the widest row and touched the border at 280.
+const MENU_WIDTH = 300;
+
+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="Dracula 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={
+              // A real palette trigger, not a lookalike field: the previous
+              // TextInput swallowed keystrokes (fixed value, noop onChange)
+              // while a wrapper div opened the palette on click. The dead Run
+              // and Share buttons go with it — demo chrome must not ship
+              // controls that do nothing.
+              <Button
+                label="Search files and commands"
+                variant="secondary"
+                size="sm"
+                tooltip="Search files and commands (⌘K)"
+                icon={<Icon icon={Search} size="sm" />}
+                onClick={() => setIsPaletteOpen(true)}
+              />
+            }
+          />
+        }
+        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/shell-side-nav.template.mjs

@@ -0,0 +1,6 @@
+export default {
+  type: 'page',
+  name: 'Sidebar Shell',
+  description: 'Workspace sidebar with conversation list',
+  category: 'tooling',
+};