astryx-dracula 0.2.1 → 0.3.0

package/templates/table-page-chart.tsx

@@ -1,118 +1,58 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 // XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > (LH[divider] > H[a=center g=2] > (SI[size=fill] > Hd"Matcha Bar"[level=1]) + IB"Filter"[variant=ghost] + IB"Export"[variant=ghost] + B.primary"New order") + (LC[p=3] > V[g=4] > C[p=3] + (T[hover] > (TR > THC"Order" + THC"Product" + THC"Amount" + THC"Customer" + THC"Email" + THC"Status" + THC"Date") + (TR > TC"ORD-1001" + TC"Ceremonial Matcha Latte" + TC"$6" + TC"Sarah Chen" + TC"sarah.chen@acme.co" + (TC > Bd.green"Completed") + TC"2025-01-15")*6))
+//   L > (LH[divider] > H[a=center g=2] > (SI[size=fill] > Hd"Matcha Bar"[level=1]) + IB"Filter"[variant=ghost] + IB"Export"[variant=ghost] + B.primary"New order") + (LC[p=3] > V[g=4] > C[p=4] + (T[hover] > (TR > THC"Order" + THC"Product" + THC"Amount" + THC"Customer" + THC"Email" + THC"Status" + THC"Date") + (TR > TC"ORD-1001" + TC"Ceremonial Matcha Latte" + TC"$6" + TC"Sarah Chen" + TC"sarah.chen@acme.co" + (TC > Tk.green"Completed") + TC"2025-01-15")*6))
 
-import type {CSSProperties} from 'react';
-import {
-  VStack,
-  HStack,
-  StackItem,
-  Layout,
-  LayoutContent,
-  LayoutHeader,
-} from '@astryxdesign/core/Layout';
-import {Text, Heading} from '@astryxdesign/core/Text';
-import {Button} from '@astryxdesign/core/Button';
-import {IconButton} from '@astryxdesign/core/IconButton';
-import {Icon} from '@astryxdesign/core/Icon';
-import {Badge} from '@astryxdesign/core/Badge';
-import {Card} from '@astryxdesign/core/Card';
-import {Link} from '@astryxdesign/core/Link';
-import {Table, proportional, pixel} from '@astryxdesign/core/Table';
-import type {TableColumn} from '@astryxdesign/core/Table';
-import {Filter, Download, Plus, Square} from 'lucide-react';
+/**
+ * Matcha Bar — order desk: a daily revenue line over the full order log.  Frame: page header (title + icon actions) | content column (chart, t (Frame/responsive/container: see XLE header above.)
+ */
 
-// ============= ICONS (verified lucide-react exports) =============
-// Filter ← FunnelIcon, Download ← ArrowDownTrayIcon, Plus ← PlusIcon.
-// Square marks the chart legend swatch.
-
-// Per-product Dracula accent for the order thumbnail swatches.
-const PRODUCT_ACCENTS = [
-  'var(--dracula-green)',
-  'var(--dracula-orange)',
-  'var(--dracula-cyan)',
-  'var(--dracula-pink)',
-  'var(--dracula-purple)',
-  'var(--dracula-yellow)',
-] as const;
-
-const swatchStyle: CSSProperties = {flexShrink: 0};
-
-// Rounded product swatch: Dracula surface with a per-product accent glyph.
-function ProductSwatch({accent, label}: {accent: string; label: string}) {
-  return (
-    <svg
-      viewBox="0 0 36 36"
-      width={36}
-      height={36}
-      style={swatchStyle}
-      role="img"
-      aria-label={`${label} swatch`}>
-      <rect width={36} height={36} rx={5} fill="var(--dracula-bg-light)" />
-      <rect
-        x={1}
-        y={1}
-        width={34}
-        height={34}
-        rx={4}
-        fill="none"
-        stroke="var(--color-widget-content-border)"
-      />
-      <circle cx={18} cy={18} r={7} fill="none" stroke={accent} strokeWidth={3} />
-    </svg>
-  );
-}
+import {OrderDesk, type OrderDeskRow} from 'astryx-dracula/shared/order-desk';
+import type {SceneHue} from 'astryx-dracula/shared/scene-hues';
 
 // ============= DATA =============
 
 type ProductCategory = 'Matcha' | 'Coffee' | 'Tea' | 'Smoothie' | 'Specialty';
 
-interface OrderRow extends Record<string, unknown> {
-  id: string;
-  customer: string;
-  email: string;
-  product: string;
-  category: ProductCategory;
-  imageIndex: number;
-  amount: number;
-  status: 'completed' | 'processing' | 'shipped' | 'refunded';
-  date: string;
-}
-
-const PRODUCTS = [
+const PRODUCTS: Array<{name: string; category: string; accent: SceneHue; price: number}> = [
   {
     name: 'Ceremonial Matcha Latte',
     category: 'Matcha' as ProductCategory,
+    accent: 'var(--dracula-green)',
     price: 6,
   },
   {
     name: 'Oat Milk Cappuccino',
     category: 'Coffee' as ProductCategory,
+    accent: 'var(--dracula-orange)',
     price: 5,
   },
   {
     name: 'Jasmine Green Tea',
     category: 'Tea' as ProductCategory,
+    accent: 'var(--dracula-cyan)',
     price: 4,
   },
   {
     name: 'Mango Matcha Smoothie',
     category: 'Smoothie' as ProductCategory,
+    accent: 'var(--dracula-pink)',
     price: 8,
   },
   {
     name: 'Hojicha Latte',
     category: 'Specialty' as ProductCategory,
+    accent: 'var(--dracula-pink)',
     price: 7,
   },
   {
     name: 'Iced Yuzu Matcha',
     category: 'Matcha' as ProductCategory,
+    accent: 'var(--dracula-yellow)',
     price: 7,
   },
 ];
 
-const orders: OrderRow[] = [
+const orders: OrderDeskRow[] = [
   {
     id: 'ORD-1001',
     customer: 'Sarah Chen',
@@ -463,237 +403,18 @@ const revenueData = [
   {date: 'Jan 15', revenue: 138},
 ];
 
-const statusColor: Record<string, 'green' | 'blue' | 'orange' | 'red'> = {
-  completed: 'green',
-  shipped: 'blue',
-  processing: 'orange',
-  refunded: 'red',
-};
-
-const columns: TableColumn<OrderRow>[] = [
-  {
-    key: 'id',
-    header: 'Order',
-    width: pixel(110),
-    renderCell: (item: OrderRow) => (
-      <Link href="#/templates/table-page-chart" isStandalone>
-        {item.id}
-      </Link>
-    ),
-  },
-  {
-    key: 'product',
-    header: 'Product',
-    width: proportional(3),
-    renderCell: (item: OrderRow) => (
-      <HStack gap={3} vAlign="center">
-        <ProductSwatch
-          accent={PRODUCT_ACCENTS[item.imageIndex]}
-          label={item.product}
-        />
-        <VStack gap={0}>
-          <Text type="body">{item.product}</Text>
-          <Text type="supporting" color="secondary">
-            {item.category}
-          </Text>
-        </VStack>
-      </HStack>
-    ),
-  },
-  {
-    key: 'amount',
-    header: 'Amount',
-    width: pixel(90),
-    renderCell: (item: OrderRow) => (
-      <Text type="body" hasTabularNumbers>
-        ${item.amount}
-      </Text>
-    ),
-  },
-  {
-    key: 'customer',
-    header: 'Customer',
-    width: proportional(2),
-    renderCell: (item: OrderRow) => <Text type="body">{item.customer}</Text>,
-  },
-  {
-    key: 'email',
-    header: 'Email',
-    width: proportional(2),
-    renderCell: (item: OrderRow) => <Text type="body">{item.email}</Text>,
-  },
-  {
-    key: 'status',
-    header: 'Status',
-    width: pixel(120),
-    renderCell: (item: OrderRow) => (
-      <Badge
-        label={item.status.charAt(0).toUpperCase() + item.status.slice(1)}
-        variant={statusColor[item.status]}
-      />
-    ),
-  },
-  {
-    key: 'date',
-    header: 'Date',
-    width: pixel(110),
-    renderCell: (item: OrderRow) => (
-      <Text type="body" hasTabularNumbers>
-        {item.date}
-      </Text>
-    ),
-  },
-];
-
-// ============= REVENUE CHART (hand SVG, Dracula ramp) =============
-
-const revenueLine = 'var(--dracula-purple)';
-
-function RevenueChart() {
-  const W = 540;
-  const H = 200;
-  const padLeft = 40;
-  const padRight = 12;
-  const padTop = 12;
-  const baseline = 164;
-  const max = 160;
-  const plotW = W - padLeft - padRight;
-  const plotH = baseline - padTop;
-  const points = revenueData.map((d, i) => ({
-    ...d,
-    x: padLeft + (i / (revenueData.length - 1)) * plotW,
-    y: baseline - (d.revenue / max) * plotH,
-  }));
-  const linePath = points
-    .map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`)
-    .join(' ');
-  const areaPath = `${linePath} L${points[points.length - 1].x.toFixed(1)},${baseline} L${points[0].x.toFixed(1)},${baseline} Z`;
-  const gridTicks = [0, 50, 100, 150];
-  return (
-    <VStack gap={3}>
-      <Card
-        padding={3}
-        style={{
-          backgroundColor: 'var(--color-background)',
-          border: 'var(--border-width) solid var(--color-separator)',
-        }}>
-        <svg
-          viewBox={`0 0 ${W} ${H}`}
-          width="100%"
-          role="img"
-          aria-label="Daily revenue, January 1 to 15">
-          {gridTicks.map(tick => {
-            const y = baseline - (tick / max) * plotH;
-            return (
-              <g key={tick}>
-                <line
-                  x1={padLeft}
-                  y1={y}
-                  x2={W - padRight}
-                  y2={y}
-                  stroke="var(--color-separator)"
-                  strokeDasharray={tick === 0 ? undefined : '3 3'}
-                  opacity={tick === 0 ? 1 : 0.5}
-                />
-                <text
-                  x={padLeft - 6}
-                  y={y + 3}
-                  textAnchor="end"
-                  fontSize={9}
-                  fill="var(--color-text-paragraph)"
-                  fontFamily="var(--font-family-mono)">
-                  ${tick}
-                </text>
-              </g>
-            );
-          })}
-          <path d={areaPath} fill={revenueLine} opacity={0.25} />
-          <path
-            d={linePath}
-            fill="none"
-            stroke={revenueLine}
-            strokeWidth={2}
-            strokeLinejoin="round"
-            strokeLinecap="round"
-          />
-          {points.map(
-            (p, i) =>
-              (i % 3 === 0 || i === points.length - 1) && (
-                <text
-                  key={p.date}
-                  x={i === points.length - 1 ? W - padRight - 2 : p.x}
-                  y={H - 8}
-                  textAnchor={i === points.length - 1 ? 'end' : 'middle'}
-                  fontSize={9}
-                  fill="var(--color-text-paragraph)"
-                  fontFamily="var(--font-family-mono)">
-                  {p.date}
-                </text>
-              ),
-          )}
-        </svg>
-      </Card>
-      <Text type="supporting" color="secondary">
-        Daily revenue · Jan 1–15
-      </Text>
-      <HStack gap={2} vAlign="center">
-        <Icon icon={Square} size="xsm" style={{color: revenueLine}} />
-        <Text type="supporting" color="secondary">
-          Revenue
-        </Text>
-      </HStack>
-    </VStack>
-  );
-}
-
-// ============= PAGE =============
+// ============= PAGE (parametric OrderDesk; catalogue + rows + scale only) =============
 
 export default function ChartTable() {
   return (
-    <Layout
-      height="fill"
-      header={
-        <LayoutHeader hasDivider>
-          <HStack gap={2} vAlign="center">
-            <StackItem size="fill">
-              <Heading level={1}>Matcha Bar</Heading>
-            </StackItem>
-            <IconButton
-              label="Filter"
-              icon={<Icon icon={Filter} size="sm" />}
-              variant="ghost"
-              tooltip="Filter"
-            />
-            <IconButton
-              label="Export"
-              icon={<Icon icon={Download} size="sm" />}
-              variant="ghost"
-              tooltip="Export"
-            />
-            <Button
-              label="New order"
-              variant="primary"
-              icon={<Icon icon={Plus} size="sm" />}
-            />
-          </HStack>
-        </LayoutHeader>
-      }
-      content={
-        <LayoutContent padding={3}>
-          <VStack gap={4}>
-            <RevenueChart />
-
-            <Table<OrderRow>
-              data={orders}
-              columns={columns}
-              idKey="id"
-              density="balanced"
-              dividers="rows"
-              hasHover
-            />
-          </VStack>
-        </LayoutContent>
-      }
+    <OrderDesk
+      title="Matcha Bar"
+      selfHash="#/templates/table-page-chart"
+      products={PRODUCTS}
+      orders={orders}
+      revenueData={revenueData}
+      chartMax={160}
+      gridTicks={[0, 50, 100, 150]}
     />
   );
 }