astryx-dracula 0.1.3 → 0.2.0

package/templates/library.template.mjs

@@ -0,0 +1,6 @@
+export default {
+  type: 'page',
+  name: 'Card Grid',
+  description: 'Browsable grid with tabs and filters',
+  category: 'marketing',
+};

package/templates/library.tsx

@@ -0,0 +1,489 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {useState, useMemo, type CSSProperties} from 'react';
+import {Layout, LayoutHeader, LayoutContent} from '@astryxdesign/core/Layout';
+import {Text, Heading} from '@astryxdesign/core/Text';
+import {Card} from '@astryxdesign/core/Card';
+import {ToggleButton, ToggleButtonGroup} from '@astryxdesign/core/ToggleButton';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {Divider} from '@astryxdesign/core/Divider';
+import {Section} from '@astryxdesign/core/Section';
+import {Grid} from '@astryxdesign/core/Grid';
+import {HStack, VStack, StackItem} from '@astryxdesign/core/Stack';
+import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
+import {OverflowList} from '@astryxdesign/core/OverflowList';
+import {AspectRatio} from '@astryxdesign/core/AspectRatio';
+import {Button} from '@astryxdesign/core/Button';
+import {EmptyState} from '@astryxdesign/core/EmptyState';
+import {Icon} from '@astryxdesign/core/Icon';
+import {Search} from 'lucide-react';
+
+interface LibraryItem {
+  id: string;
+  name: string;
+  description: string;
+  category: string;
+  type: 'Component' | 'Pattern' | 'Utility';
+}
+
+// Dracula accent per category shelf, drawn from the fixed badge vocabulary.
+const CATEGORY_HUES: Record<string, string> = {
+  Layout: 'var(--dracula-purple)',
+  Forms: 'var(--dracula-cyan)',
+  Navigation: 'var(--dracula-pink)',
+  Feedback: 'var(--dracula-yellow)',
+  Data: 'var(--dracula-green)',
+};
+
+const CATEGORIES = ['All', 'Layout', 'Forms', 'Navigation', 'Feedback', 'Data'];
+
+const ITEMS: LibraryItem[] = [
+  {
+    id: '1',
+    name: 'Stack',
+    description:
+      'Vertical and horizontal stack layouts with configurable gap and alignment.',
+    category: 'Layout',
+    type: 'Component',
+  },
+  {
+    id: '2',
+    name: 'Grid',
+    description:
+      'Responsive grid container with auto-fit columns and gap control.',
+    category: 'Layout',
+    type: 'Component',
+  },
+  {
+    id: '3',
+    name: 'Card',
+    description:
+      'Surface container with optional padding, border, and shadow variants.',
+    category: 'Layout',
+    type: 'Component',
+  },
+  {
+    id: '4',
+    name: 'Center',
+    description: 'Centers its child both horizontally and vertically.',
+    category: 'Layout',
+    type: 'Utility',
+  },
+  {
+    id: '5',
+    name: 'Section',
+    description: 'Semantic page section with optional heading and divider.',
+    category: 'Layout',
+    type: 'Pattern',
+  },
+  {
+    id: '6',
+    name: 'Collapsible',
+    description: 'Expandable region with animated height transition.',
+    category: 'Layout',
+    type: 'Component',
+  },
+  {
+    id: '7',
+    name: 'TextInput',
+    description:
+      'Single-line text field with label, placeholder, and validation states.',
+    category: 'Forms',
+    type: 'Component',
+  },
+  {
+    id: '8',
+    name: 'TextArea',
+    description: 'Multi-line text field with auto-resize and character count.',
+    category: 'Forms',
+    type: 'Component',
+  },
+  {
+    id: '9',
+    name: 'CheckboxInput',
+    description: 'Checkbox with label, indeterminate state, and group support.',
+    category: 'Forms',
+    type: 'Component',
+  },
+  {
+    id: '10',
+    name: 'RadioList',
+    description: 'Group of radio buttons with accessible fieldset wrapper.',
+    category: 'Forms',
+    type: 'Component',
+  },
+  {
+    id: '11',
+    name: 'Switch',
+    description: 'Toggle switch for binary on/off settings.',
+    category: 'Forms',
+    type: 'Component',
+  },
+  {
+    id: '12',
+    name: 'Selector',
+    description:
+      'Dropdown or inline option selector with single and multi-select modes.',
+    category: 'Forms',
+    type: 'Component',
+  },
+  {
+    id: '13',
+    name: 'TabList',
+    description:
+      'Horizontal tab navigation with underline indicator and keyboard support.',
+    category: 'Navigation',
+    type: 'Component',
+  },
+  {
+    id: '14',
+    name: 'TopNav',
+    description: 'Application top bar with logo, nav links, and action slots.',
+    category: 'Navigation',
+    type: 'Pattern',
+  },
+  {
+    id: '15',
+    name: 'SideNav',
+    description:
+      'Vertical sidebar navigation with collapsible groups and active states.',
+    category: 'Navigation',
+    type: 'Pattern',
+  },
+  {
+    id: '16',
+    name: 'Breadcrumbs',
+    description: 'Path trail navigation with separator and truncation support.',
+    category: 'Navigation',
+    type: 'Component',
+  },
+  {
+    id: '17',
+    name: 'Pagination',
+    description:
+      'Page navigation with prev/next controls and page count display.',
+    category: 'Navigation',
+    type: 'Component',
+  },
+  {
+    id: '18',
+    name: 'MobileNav',
+    description:
+      'Bottom tab bar for mobile viewports with icon and label slots.',
+    category: 'Navigation',
+    type: 'Pattern',
+  },
+  {
+    id: '19',
+    name: 'Badge',
+    description:
+      'Compact label for status, count, or category with semantic color variants.',
+    category: 'Feedback',
+    type: 'Component',
+  },
+  {
+    id: '20',
+    name: 'Banner',
+    description:
+      'Full-width alert bar for info, success, warning, and error messages.',
+    category: 'Feedback',
+    type: 'Component',
+  },
+  {
+    id: '21',
+    name: 'Spinner',
+    description: 'Animated loading indicator with size and color variants.',
+    category: 'Feedback',
+    type: 'Component',
+  },
+  {
+    id: '22',
+    name: 'ProgressBar',
+    description: 'Horizontal bar indicating task completion percentage.',
+    category: 'Feedback',
+    type: 'Component',
+  },
+  {
+    id: '23',
+    name: 'StatusDot',
+    description:
+      'Small dot indicator for presence, health, or pipeline status.',
+    category: 'Feedback',
+    type: 'Component',
+  },
+  {
+    id: '24',
+    name: 'Tooltip',
+    description:
+      'Contextual label that appears on hover with configurable placement.',
+    category: 'Feedback',
+    type: 'Component',
+  },
+  {
+    id: '25',
+    name: 'Table',
+    description:
+      'Feature-rich data table with sorting, selection, and column resizing.',
+    category: 'Data',
+    type: 'Component',
+  },
+  {
+    id: '26',
+    name: 'Avatar',
+    description:
+      'User profile image with fallback initials and status dot support.',
+    category: 'Data',
+    type: 'Component',
+  },
+  {
+    id: '27',
+    name: 'Skeleton',
+    description:
+      'Placeholder shimmer for loading states matching content shapes.',
+    category: 'Data',
+    type: 'Utility',
+  },
+  {
+    id: '28',
+    name: 'HoverCard',
+    description: 'Rich popover that appears on hover with arbitrary content.',
+    category: 'Data',
+    type: 'Component',
+  },
+  {
+    id: '29',
+    name: 'PowerSearch',
+    description:
+      'Command-palette style search with grouped results and keyboard nav.',
+    category: 'Data',
+    type: 'Pattern',
+  },
+  {
+    id: '30',
+    name: 'Typeahead',
+    description:
+      'Autocomplete input with async suggestion loading and selection.',
+    category: 'Data',
+    type: 'Component',
+  },
+];
+
+const thumbnailImage: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  display: 'block',
+};
+
+// =============================================================================
+// Side Nav
+// =============================================================================
+
+function LibraryCard({item}: {item: LibraryItem}) {
+  const hue = CATEGORY_HUES[item.category] ?? 'var(--dracula-purple)';
+  return (
+    <Card padding={0}>
+      <AspectRatio ratio={16 / 9}>
+        <svg
+          viewBox="0 0 400 300"
+          preserveAspectRatio="xMidYMid slice"
+          style={thumbnailImage}
+          role="img"
+          aria-label={`${item.name} thumbnail`}>
+          <rect width="400" height="300" fill="var(--dracula-bg-light)" />
+          <g
+            transform="translate(200 150)"
+            fill="none"
+            stroke="var(--dracula-comment)"
+            strokeWidth="5"
+            strokeLinecap="round"
+            strokeLinejoin="round">
+            <rect x="-44" y="-44" width="88" height="88" rx="5" />
+            <circle cx="18" cy="-18" r="2.5" fill={hue} stroke="none" />
+            <path d="M-34 30 L-8 0 L10 18 L20 8 L34 24" />
+          </g>
+        </svg>
+      </AspectRatio>
+      <Section variant="transparent" padding={4}>
+        <VStack gap={1}>
+          <Heading level={3}>{item.name}</Heading>
+          <Text type="body" color="secondary">
+            {item.description}
+          </Text>
+        </VStack>
+      </Section>
+    </Card>
+  );
+}
+
+function LibrarySection({
+  category,
+  items,
+}: {
+  category: string;
+  items: LibraryItem[];
+}) {
+  return (
+    <VStack gap={6}>
+      <HStack justify="between" vAlign="center">
+        <Heading level={2}>{category}</Heading>
+        <Text type="supporting" color="secondary" hasTabularNumbers>
+          {items.length} {items.length === 1 ? 'item' : 'items'}
+        </Text>
+      </HStack>
+      <Grid columns={{minWidth: 320}} gap={4}>
+        {items.map(item => (
+          <LibraryCard key={item.id} item={item} />
+        ))}
+      </Grid>
+    </VStack>
+  );
+}
+
+export default function LibraryGrid() {
+  const [activeTab, setActiveTab] = useState('All');
+  const [search, setSearch] = useState('');
+  const [sortOrder, setSortOrder] = useState('A-Z');
+
+  const filtered = useMemo(() => {
+    let items =
+      activeTab === 'All' ? ITEMS : ITEMS.filter(i => i.category === activeTab);
+    if (search.trim()) {
+      const q = search.toLowerCase();
+      items = items.filter(
+        i =>
+          i.name.toLowerCase().includes(q) ||
+          i.description.toLowerCase().includes(q),
+      );
+    }
+    const sorted = [...items];
+    if (sortOrder === 'A-Z') {
+      sorted.sort((a, b) => a.name.localeCompare(b.name));
+    } else if (sortOrder === 'Z-A') {
+      sorted.sort((a, b) => b.name.localeCompare(a.name));
+    } else if (sortOrder === 'Newest') {
+      sorted.sort((a, b) => Number(b.id) - Number(a.id));
+    }
+    return sorted;
+  }, [activeTab, search, sortOrder]);
+
+  const groupedSections = useMemo(() => {
+    if (activeTab !== 'All') {
+      return null;
+    }
+    const order = CATEGORIES.filter(c => c !== 'All');
+    const map = new Map<string, LibraryItem[]>();
+    for (const item of filtered) {
+      let group = map.get(item.category);
+      if (!group) {
+        group = [];
+        map.set(item.category, group);
+      }
+      group.push(item);
+    }
+    return order
+      .filter(cat => map.has(cat))
+      .map(cat => ({category: cat, items: map.get(cat) ?? []}));
+  }, [activeTab, filtered]);
+
+  return (
+    <Layout
+      header={
+        <LayoutHeader hasDivider padding={6}>
+          <Heading level={1}>Library</Heading>
+        </LayoutHeader>
+      }
+      content={
+        <LayoutContent padding={6}>
+          <VStack gap={6}>
+            <VStack gap={4}>
+              <TextInput
+                label="Search"
+                isLabelHidden
+                placeholder="Search the stacks..."
+                value={search}
+                onChange={setSearch}
+                startIcon={Search}
+                size="lg"
+              />
+              <HStack vAlign="center" gap={4}>
+                <StackItem size="fill">
+                  <VStack>
+                    <ToggleButtonGroup
+                      label="Filter by category"
+                      value={activeTab}
+                      onChange={v => setActiveTab(v ?? 'All')}>
+                      <OverflowList
+                        gap={1}
+                        behavior="observeParent"
+                        overflowRenderer={overflowItems => (
+                          <DropdownMenu
+                            button={{
+                              label: `+${overflowItems.length}`,
+                              variant: 'ghost',
+                              size: 'lg',
+                            }}
+                            items={overflowItems.map(({index}) => ({
+                              label: CATEGORIES[index],
+                              onClick: () => setActiveTab(CATEGORIES[index]),
+                            }))}
+                          />
+                        )}>
+                        {CATEGORIES.map(cat => (
+                          <ToggleButton
+                            key={cat}
+                            label={cat}
+                            value={cat}
+                            size="lg"
+                          />
+                        ))}
+                      </OverflowList>
+                    </ToggleButtonGroup>
+                  </VStack>
+                </StackItem>
+                <DropdownMenu
+                  button={{label: sortOrder, size: 'lg'}}
+                  items={[
+                    {label: 'A-Z', onClick: () => setSortOrder('A-Z')},
+                    {label: 'Z-A', onClick: () => setSortOrder('Z-A')},
+                    {label: 'Newest', onClick: () => setSortOrder('Newest')},
+                  ]}
+                />
+              </HStack>
+            </VStack>
+
+            {filtered.length === 0 ? (
+              <EmptyState
+                icon={<Icon icon={Search} size="lg" color="secondary" />}
+                title="Nothing stirs in the stacks"
+                description="No entries match this search and filter. Clear them to browse the full library."
+                actions={
+                  <Button
+                    label="Clear search & filters"
+                    variant="primary"
+                    onClick={() => {
+                      setSearch('');
+                      setActiveTab('All');
+                    }}
+                  />
+                }
+              />
+            ) : (
+              <VStack gap={6}>
+                {(
+                  groupedSections ?? [{category: activeTab, items: filtered}]
+                ).flatMap(section => [
+                  <Divider key={`d-${section.category}`} />,
+                  <LibrarySection
+                    key={section.category}
+                    category={section.category}
+                    items={section.items}
+                  />,
+                ])}
+              </VStack>
+            )}
+          </VStack>
+        </LayoutContent>
+      }
+    />
+  );
+}

package/templates/login-card.template.mjs

@@ -0,0 +1,6 @@
+export default {
+  type: 'page',
+  name: 'Login Card',
+  description: 'Centered auth card with email and password',
+  category: 'auth',
+};

package/templates/login-card.tsx

@@ -0,0 +1,200 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {useState, type CSSProperties} from 'react';
+import {Moon} from 'lucide-react';
+import {VStack} from '@astryxdesign/core/Layout';
+import {Center} from '@astryxdesign/core/Center';
+import {Text, Heading} from '@astryxdesign/core/Text';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {Button} from '@astryxdesign/core/Button';
+import {Card} from '@astryxdesign/core/Card';
+import {Link} from '@astryxdesign/core/Link';
+import {Divider} from '@astryxdesign/core/Divider';
+import {Icon} from '@astryxdesign/core/Icon';
+
+// Brand sign-in marks — bespoke inline glyphs, no icon-library equivalent.
+const AppleIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    width={16}
+    height={16}
+    aria-hidden="true"
+    {...props}>
+    <path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" />
+  </svg>
+);
+
+const GoogleIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    width={16}
+    height={16}
+    aria-hidden="true"
+    {...props}>
+    <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" />
+    <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
+    <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
+    <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
+  </svg>
+);
+
+// Standalone auth page paints its own body background (no host shell).
+const pageStyle: CSSProperties = {
+  minHeight: '100%',
+  backgroundColor: 'var(--color-background-body)',
+  padding: 'var(--spacing-6)',
+};
+// Cap the column at 400px but let it shrink to fit narrow screens (Stack
+// has no maxWidth prop, so it's set here).
+const contentStyle: CSSProperties = {
+  width: '100%',
+  maxWidth: 400,
+};
+
+export default function LoginCard() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loginFailed, setLoginFailed] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleLogin = () => {
+    if (!email || !password) {
+      setLoginFailed(true);
+      return;
+    }
+    setIsLoading(true);
+    setLoginFailed(false);
+    setTimeout(() => {
+      setIsLoading(false);
+      setLoginFailed(true);
+    }, 2000);
+  };
+
+  return (
+    <Center axis="both" style={pageStyle}>
+      <VStack gap={4} hAlign="center" style={contentStyle}>
+        {/* Logo */}
+        <VStack gap={2} hAlign="center">
+          <Icon icon={Moon} size="lg" color="accent" />
+          <Text type="body" weight="bold" size="lg">
+            Castle Dracula
+          </Text>
+        </VStack>
+
+        {/* Card */}
+        <Card padding={8} width="100%">
+          <VStack gap={4} hAlign="stretch">
+            {/* Header */}
+            <VStack gap={1} hAlign="center">
+              <Heading level={2}>Welcome back to the night</Heading>
+              <Text type="body" color="secondary">
+                Sign in to your crypt
+              </Text>
+            </VStack>
+
+            {/* Form fields */}
+            <VStack gap={2}>
+              <TextInput
+                label="Email"
+                isLabelHidden
+                type="email"
+                placeholder="you@castle.dracula"
+                value={email}
+                onChange={setEmail}
+                size="lg"
+              />
+              <VStack gap={1}>
+                <TextInput
+                  label="Password"
+                  isLabelHidden
+                  placeholder="Whisper your password"
+                  type="password"
+                  value={password}
+                  onChange={(v: string) => {
+                    setPassword(v);
+                    setLoginFailed(false);
+                  }}
+                  size="lg"
+                  status={
+                    loginFailed
+                      ? {
+                          type: 'error',
+                          message: 'Wrong incantation. Try again.',
+                        }
+                      : undefined
+                  }
+                />
+                {loginFailed && (
+                  <VStack hAlign="end">
+                    <Link
+                      href="#/templates/login-card"
+                      size="sm"
+                      color="secondary"
+                      type="supporting">
+                      Forgot password?
+                    </Link>
+                  </VStack>
+                )}
+              </VStack>
+            </VStack>
+
+            {/* Login button */}
+            <Button
+              label="Enter the night"
+              variant="primary"
+              size="lg"
+              isLoading={isLoading}
+              onClick={handleLogin}
+            />
+
+            {/* Divider */}
+            <Divider label="Or continue with" />
+
+            {/* Social buttons */}
+            <VStack gap={3} hAlign="stretch">
+              <Button
+                label="Login with Apple"
+                variant="secondary"
+                icon={<AppleIcon />}
+                size="lg"
+              />
+              <Button
+                label="Login with Google"
+                variant="secondary"
+                icon={<GoogleIcon />}
+                size="lg"
+              />
+            </VStack>
+
+            {/* Sign up link */}
+            <VStack hAlign="center">
+              <Text type="supporting" color="secondary">
+                New to the castle?{' '}
+                <Link href="#/templates/login-card" type="supporting">
+                  Sign up
+                </Link>
+              </Text>
+            </VStack>
+          </VStack>
+        </Card>
+
+        {/* Terms */}
+        <VStack hAlign="center" width="100%">
+          <Text type="supporting" color="secondary" justify="center">
+            By clicking continue, you agree to our{' '}
+            <Link href="#/templates/login-card" type="supporting">
+              Terms of Service
+            </Link>{' '}
+            and{' '}
+            <Link href="#/templates/login-card" type="supporting">
+              Privacy Policy
+            </Link>
+            .
+          </Text>
+        </VStack>
+      </VStack>
+    </Center>
+  );
+}