create-manifest 1.3.4 → 2.0.1

package/starter/src/web/components/payment-methods.tsx

@@ -0,0 +1,201 @@
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { CreditCard, Lock, Plus } from 'lucide-react'
+import { useState } from 'react'
+
+export interface PaymentMethod {
+  id: string
+  type: 'card' | 'apple_pay' | 'google_pay' | 'paypal'
+  brand?: 'visa' | 'mastercard' | 'amex' | 'cb'
+  last4?: string
+  isDefault?: boolean
+}
+
+export interface PaymentMethodsProps {
+  methods?: PaymentMethod[]
+  amount?: number
+  currency?: string
+  selectedMethodId?: string
+  onSelectMethod?: (methodId: string) => void
+  onAddCard?: () => void
+  onPay?: (methodId: string) => void
+  isLoading?: boolean
+}
+
+const defaultMethods: PaymentMethod[] = [
+  { id: '1', type: 'card', brand: 'visa', last4: '4242' },
+  {
+    id: '2',
+    type: 'card',
+    brand: 'mastercard',
+    last4: '8888',
+    isDefault: true
+  },
+  { id: '3', type: 'apple_pay' }
+]
+
+const BrandLogo = ({ brand }: { brand?: string }) => {
+  switch (brand) {
+    case 'visa':
+      return (
+        <svg viewBox="0 0 48 32" className="h-5 w-auto">
+          <rect width="48" height="32" rx="4" fill="#fff" stroke="#e5e5e5" />
+          <g transform="translate(5, 10) scale(0.15)">
+            <polygon points="116.145,95.719 97.858,95.719 109.296,24.995 127.582,24.995" fill="#00579f" />
+            <path d="M182.437,26.724c-3.607-1.431-9.328-3.011-16.402-3.011c-18.059,0-30.776,9.63-30.854,23.398c-0.15,10.158,9.105,15.8,16.027,19.187c7.075,3.461,9.48,5.72,9.48,8.805c-0.072,4.738-5.717,6.922-10.982,6.922c-7.301,0-11.213-1.126-17.158-3.762l-2.408-1.13l-2.559,15.876c4.289,1.954,12.191,3.688,20.395,3.764c19.188,0,31.68-9.481,31.828-24.153c0.073-8.051-4.814-14.22-15.35-19.261c-6.396-3.236-10.313-5.418-10.313-8.729c0.075-3.01,3.313-6.093,10.533-6.093c5.945-0.151,10.313,1.278,13.622,2.708l1.654,0.751l2.487-15.272z" fill="#00579f" />
+            <path d="M206.742,70.664c1.506-4.063,7.301-19.788,7.301-19.788c-0.076,0.151,1.503-4.138,2.406-6.771l1.278,6.094c0,0,3.463,16.929,4.215,20.465c-2.858,0-11.588,0-15.2,0zm22.573-45.669l-14.145,0c-4.362,0-7.676,1.278-9.558,5.868l-27.163,64.855l19.188,0c0,0,3.159-8.729,3.838-10.609c2.105,0,20.771,0,23.479,0c0.525,2.483,2.182,10.609,2.182,10.609l16.932,0l-14.753-70.723z" fill="#00579f" />
+            <path d="M82.584,24.995l-17.909,48.227l-1.957-9.781c-3.311-11.286-13.695-23.548-25.283-29.645l16.404,61.848l19.338,0l28.744-70.649l-19.337,0z" fill="#00579f" />
+            <path d="M48.045,24.995l-29.422,0l-0.301,1.429c22.951,5.869,38.151,20.016,44.396,37.02l-6.396-32.523c-1.053-4.517-4.289-5.796-8.277-5.926z" fill="#faa61a" />
+          </g>
+        </svg>
+      )
+    case 'mastercard':
+      return (
+        <svg viewBox="0 0 48 32" className="h-5 w-auto">
+          <rect width="48" height="32" rx="4" fill="#fff" stroke="#e5e5e5" />
+          <g transform="translate(7, 5) scale(0.22)">
+            <rect x="60.4" y="25.7" width="31.5" height="56.6" fill="#FF5F00" />
+            <path d="M62.4,54c0-11,5.1-21.5,13.7-28.3c-15.6-12.3-38.3-9.6-50.6,6.1C13.3,47.4,16,70,31.7,82.3c13.1,10.3,31.4,10.3,44.5,0C67.5,75.5,62.4,65,62.4,54z" fill="#EB001B" />
+            <path d="M134.4,54c0,19.9-16.1,36-36,36c-8.1,0-15.9-2.7-22.2-7.7c15.6-12.3,18.3-34.9,6-50.6c-1.8-2.2-3.8-4.3-6-6c15.6-12.3,38.3-9.6,50.5,6.1C131.7,38.1,134.4,45.9,134.4,54z" fill="#F79E1B" />
+          </g>
+        </svg>
+      )
+    case 'amex':
+      return (
+        <svg viewBox="0 0 48 32" className="h-5 w-auto">
+          <rect width="48" height="32" rx="4" fill="#006FCF" />
+          <path
+            d="M10 12h4l.8 2 .8-2h4v8h-3v-5l-1.3 3h-2l-1.3-3v5h-2v-8zm14 0h6v2h-3v1h3v2h-3v1h3v2h-6v-8zm8 0h3l2 3 2-3h3l-3.5 4 3.5 4h-3l-2-3-2 3h-3l3.5-4-3.5-4z"
+            fill="white"
+          />
+        </svg>
+      )
+    case 'cb':
+      return (
+        <svg viewBox="0 0 48 32" className="h-5 w-auto">
+          <rect width="48" height="32" rx="4" fill="#1E4B9E" />
+          <rect x="4" y="10" width="18" height="12" rx="2" fill="#49A942" />
+          <text x="28" y="20" fill="white" fontSize="10" fontWeight="bold">
+            CB
+          </text>
+        </svg>
+      )
+    default:
+      return <CreditCard className="h-5 w-5 text-muted-foreground" />
+  }
+}
+
+const MethodIcon = ({ method }: { method: PaymentMethod }) => {
+  if (method.type === 'apple_pay') {
+    return (
+      <div className="h-5 w-8 rounded bg-black flex items-center justify-center">
+        <img src="/images/apple-pay.svg" alt="Apple Pay" className="h-2 w-auto invert" />
+      </div>
+    )
+  }
+  if (method.type === 'google_pay') {
+    return (
+      <svg viewBox="0 0 48 32" className="h-5 w-auto">
+        <rect width="48" height="32" rx="4" fill="#fff" stroke="#ddd" />
+        <text x="8" y="20" fontSize="10" fontWeight="500" fill="#5F6368">
+          G Pay
+        </text>
+      </svg>
+    )
+  }
+  if (method.type === 'paypal') {
+    return (
+      <svg viewBox="0 0 48 32" className="h-5 w-auto">
+        <rect width="48" height="32" rx="4" fill="#003087" />
+        <text x="8" y="20" fontSize="9" fontWeight="bold" fill="#fff">
+          PayPal
+        </text>
+      </svg>
+    )
+  }
+  return <BrandLogo brand={method.brand} />
+}
+
+export function PaymentMethods({
+  methods = defaultMethods,
+  amount = 279.0,
+  currency = 'EUR',
+  selectedMethodId,
+  onSelectMethod,
+  onAddCard,
+  onPay,
+  isLoading = false
+}: PaymentMethodsProps) {
+  const [selected, setSelected] = useState(
+    selectedMethodId || methods.find((m) => m.isDefault)?.id || methods[0]?.id
+  )
+
+  const handleSelect = (methodId: string) => {
+    setSelected(methodId)
+    onSelectMethod?.(methodId)
+  }
+
+  const formatCurrency = (value: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency
+    }).format(value)
+  }
+
+  const getMethodLabel = (method: PaymentMethod) => {
+    if (method.type === 'apple_pay') return 'Apple Pay'
+    if (method.type === 'google_pay') return 'Google Pay'
+    if (method.type === 'paypal') return 'PayPal'
+    return `•••• ${method.last4}`
+  }
+
+  return (
+    <div className="w-full rounded-md sm:rounded-lg bg-card p-2 space-y-4">
+      <div className="flex flex-wrap items-center gap-2">
+        {methods.map((method) => (
+          <button
+            key={method.id}
+            onClick={() => handleSelect(method.id)}
+            className={cn(
+              'inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm transition-colors',
+              selected === method.id
+                ? 'border-foreground ring-1 ring-foreground'
+                : 'border-border  hover:border-foreground/50'
+            )}
+          >
+            <MethodIcon method={method} />
+            <span>{getMethodLabel(method)}</span>
+            {method.isDefault && (
+              <span className="rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
+                Default
+              </span>
+            )}
+          </button>
+        ))}
+        <button
+          onClick={onAddCard}
+          className="inline-flex items-center gap-1.5 rounded-full border border-dashed border-border px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+        >
+          <Plus className="h-4 w-4" />
+          Add
+        </button>
+      </div>
+
+      <div className="flex flex-col-reverse sm:flex-row sm:items-center sm:justify-between gap-2">
+        <span className="flex items-center justify-center sm:justify-start gap-1.5 text-xs text-muted-foreground">
+          <Lock className="h-3 w-3" />
+          Secure encrypted transaction
+        </span>
+        <Button
+          size="sm"
+          className="w-full sm:w-auto"
+          onClick={() => selected && onPay?.(selected)}
+          disabled={!selected || isLoading}
+        >
+          <Lock className="mr-1.5 h-3.5 w-3.5" />
+          {isLoading ? 'Processing...' : `Pay ${formatCurrency(amount)}`}
+        </Button>
+      </div>
+    </div>
+  )
+}

package/starter/src/web/components/table.tsx

@@ -0,0 +1,478 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { Check, ChevronDown, ChevronUp, Download, Minus, Send } from 'lucide-react'
+import { useCallback, useMemo, useState } from 'react'
+
+export interface TableColumn<T = Record<string, unknown>> {
+  header: string
+  accessor: keyof T | string
+  sortable?: boolean
+  width?: string
+  align?: 'left' | 'center' | 'right'
+  render?: (value: unknown, row: T, index: number) => React.ReactNode
+}
+
+export interface TableProps<T = Record<string, unknown>> {
+  columns?: TableColumn<T>[]
+  data?: T[]
+  selectable?: 'none' | 'single' | 'multi'
+  onSelectionChange?: (selectedRows: T[]) => void
+  loading?: boolean
+  emptyMessage?: string
+  stickyHeader?: boolean
+  compact?: boolean
+  selectedRows?: T[]
+  showActions?: boolean
+  onDownload?: (selectedRows: T[]) => void
+  onSend?: (selectedRows: T[]) => void
+}
+
+// Default demo data for the table
+const defaultColumns: TableColumn[] = [
+  { header: 'Model', accessor: 'model', sortable: true },
+  {
+    header: 'Input (w/ Cache)',
+    accessor: 'inputCache',
+    sortable: true,
+    align: 'right'
+  },
+  { header: 'Output', accessor: 'output', sortable: true, align: 'right' },
+  {
+    header: 'Total Tokens',
+    accessor: 'totalTokens',
+    sortable: true,
+    align: 'right'
+  },
+  {
+    header: 'API Cost',
+    accessor: 'apiCost',
+    sortable: true,
+    align: 'right',
+    render: (value) => `$${(value as number).toFixed(2)}`
+  }
+]
+
+const defaultData = [
+  {
+    model: 'gpt-5',
+    inputCache: 0,
+    output: 103271,
+    totalTokens: 2267482,
+    apiCost: 0.0
+  },
+  {
+    model: 'claude-3.5-sonnet',
+    inputCache: 176177,
+    output: 8326,
+    totalTokens: 647528,
+    apiCost: 1.0
+  },
+  {
+    model: 'gemini-2.0-flash-exp',
+    inputCache: 176100,
+    output: 8326,
+    totalTokens: 647528,
+    apiCost: 0.0
+  },
+  {
+    model: 'gemini-2.5-pro',
+    inputCache: 176177,
+    output: 7000,
+    totalTokens: 647528,
+    apiCost: 0.0
+  },
+  {
+    model: 'claude-4-sonnet',
+    inputCache: 68415,
+    output: 12769,
+    totalTokens: 946536,
+    apiCost: 0.71
+  }
+]
+
+function SkeletonRow({
+  columns,
+  compact
+}: {
+  columns: number
+  compact?: boolean
+}) {
+  return (
+    <tr className="border-b border-border">
+      {Array.from({ length: columns }).map((_, i) => (
+        <td key={i} className={cn('px-3', compact ? 'py-2' : 'py-3')}>
+          <div className="h-4 bg-muted animate-pulse rounded" />
+        </td>
+      ))}
+    </tr>
+  )
+}
+
+export function Table<T extends Record<string, unknown>>({
+  columns = defaultColumns as unknown as TableColumn<T>[],
+  data = defaultData as unknown as T[],
+  selectable = 'none',
+  onSelectionChange,
+  loading = false,
+  emptyMessage = 'No data available',
+  stickyHeader = false,
+  compact = false,
+  selectedRows: controlledSelectedRows,
+  showActions = false,
+  onDownload,
+  onSend
+}: TableProps<T>) {
+  const [sortConfig, setSortConfig] = useState<{
+    key: string
+    direction: 'asc' | 'desc'
+  } | null>(null)
+  const [internalSelectedRows, setInternalSelectedRows] = useState<Set<number>>(
+    new Set()
+  )
+
+  const selectedRowsSet = controlledSelectedRows
+    ? new Set(controlledSelectedRows.map((row) => data.indexOf(row)))
+    : internalSelectedRows
+
+  const handleSort = useCallback((accessor: string) => {
+    setSortConfig((current) => {
+      if (current?.key === accessor) {
+        if (current.direction === 'asc') {
+          return { key: accessor, direction: 'desc' }
+        }
+        return null
+      }
+      return { key: accessor, direction: 'asc' }
+    })
+  }, [])
+
+  const sortedData = useMemo(() => {
+    if (!sortConfig) return data
+
+    return [...data].sort((a, b) => {
+      const aValue = a[sortConfig.key as keyof T]
+      const bValue = b[sortConfig.key as keyof T]
+
+      if (aValue === bValue) return 0
+
+      let comparison = 0
+      if (typeof aValue === 'number' && typeof bValue === 'number') {
+        comparison = aValue - bValue
+      } else {
+        comparison = String(aValue).localeCompare(String(bValue))
+      }
+
+      return sortConfig.direction === 'asc' ? comparison : -comparison
+    })
+  }, [data, sortConfig])
+
+  const handleRowSelect = useCallback(
+    (index: number) => {
+      if (selectable === 'none') return
+
+      const newSelected = new Set(selectedRowsSet)
+
+      if (selectable === 'single') {
+        if (newSelected.has(index)) {
+          newSelected.clear()
+        } else {
+          newSelected.clear()
+          newSelected.add(index)
+        }
+      } else {
+        if (newSelected.has(index)) {
+          newSelected.delete(index)
+        } else {
+          newSelected.add(index)
+        }
+      }
+
+      setInternalSelectedRows(newSelected)
+      onSelectionChange?.(sortedData.filter((_, i) => newSelected.has(i)))
+    },
+    [selectable, selectedRowsSet, sortedData, onSelectionChange]
+  )
+
+  const handleSelectAll = useCallback(() => {
+    if (selectable !== 'multi') return
+
+    const allSelected = selectedRowsSet.size === sortedData.length
+    const newSelected = allSelected
+      ? new Set<number>()
+      : new Set(sortedData.map((_, i) => i))
+
+    setInternalSelectedRows(newSelected)
+    onSelectionChange?.(allSelected ? [] : sortedData)
+  }, [selectable, selectedRowsSet.size, sortedData, onSelectionChange])
+
+  const getValue = (row: T, accessor: string): unknown => {
+    const keys = accessor.split('.')
+    let value: unknown = row
+    for (const key of keys) {
+      value = (value as Record<string, unknown>)?.[key]
+    }
+    return value
+  }
+
+  const formatNumber = (value: unknown): string => {
+    if (typeof value === 'number') {
+      return new Intl.NumberFormat('en-US').format(value)
+    }
+    return String(value ?? '')
+  }
+
+  const getSortIcon = (accessor: string) => {
+    if (sortConfig?.key !== accessor) {
+      return <Minus className="h-3 w-3 opacity-0 group-hover:opacity-30" />
+    }
+    return sortConfig.direction === 'asc' ? (
+      <ChevronUp className="h-3 w-3" />
+    ) : (
+      <ChevronDown className="h-3 w-3" />
+    )
+  }
+
+  return (
+    <div className="w-full">
+      {/* Mobile: Card view */}
+      <div className="sm:hidden space-y-2">
+        {loading ? (
+          Array.from({ length: 3 }).map((_, i) => (
+            <div key={i} className="rounded-md sm:rounded-lg border bg-card p-3 space-y-2">
+              {columns.slice(0, 4).map((_, j) => (
+                <div
+                  key={j}
+                  className="h-4 bg-muted animate-pulse rounded w-3/4"
+                />
+              ))}
+            </div>
+          ))
+        ) : sortedData.length === 0 ? (
+          <div className="rounded-md sm:rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground">
+            {emptyMessage}
+          </div>
+        ) : (
+          sortedData.map((row, rowIndex) => (
+            <button
+              key={rowIndex}
+              type="button"
+              onClick={() => handleRowSelect(rowIndex)}
+              disabled={selectable === 'none'}
+              className={cn(
+                'w-full rounded-md sm:rounded-lg border bg-card p-3 text-left transition-all',
+                selectable !== 'none' &&
+                  'cursor-pointer hover:border-foreground/30',
+                selectedRowsSet.has(rowIndex) &&
+                  'border-foreground ring-1 ring-foreground'
+              )}
+            >
+              <div className="space-y-1.5">
+                {columns.map((column, colIndex) => {
+                  const value = getValue(row, column.accessor as string)
+                  const displayValue = column.render
+                    ? column.render(value, row, rowIndex)
+                    : formatNumber(value)
+
+                  return (
+                    <div
+                      key={colIndex}
+                      className="flex justify-between items-center"
+                    >
+                      <span className="text-xs text-muted-foreground">
+                        {column.header}
+                      </span>
+                      <span
+                        className={cn(
+                          'text-xs font-medium',
+                          colIndex === 0 && 'font-semibold'
+                        )}
+                      >
+                        {displayValue}
+                      </span>
+                    </div>
+                  )
+                })}
+              </div>
+            </button>
+          ))
+        )}
+      </div>
+
+      {/* Desktop: Table view */}
+      <div className="hidden sm:block overflow-x-auto rounded-md sm:rounded-lg">
+        <table className="w-full text-sm" role="grid">
+          <thead
+            className={cn(
+              'border-b bg-muted/50',
+              stickyHeader && 'sticky top-0 z-10'
+            )}
+          >
+            <tr>
+              {selectable === 'multi' && (
+                <th className={cn('w-10 px-3', compact ? 'py-2' : 'py-3')}>
+                  <button
+                    type="button"
+                    onClick={handleSelectAll}
+                    className={cn(
+                      'flex h-4 w-4 items-center justify-center rounded border transition-colors',
+                      selectedRowsSet.size === sortedData.length &&
+                        sortedData.length > 0
+                        ? 'bg-foreground border-foreground text-background'
+                        : 'border-border hover:border-foreground/50'
+                    )}
+                    aria-label="Select all rows"
+                  >
+                    {selectedRowsSet.size === sortedData.length &&
+                      sortedData.length > 0 && <Check className="h-3 w-3" />}
+                  </button>
+                </th>
+              )}
+              {selectable === 'single' && (
+                <th className={cn('w-10 px-3', compact ? 'py-2' : 'py-3')} />
+              )}
+              {columns.map((column, index) => (
+                <th
+                  key={index}
+                  className={cn(
+                    'px-3 font-medium text-muted-foreground group text-left',
+                    compact ? 'py-2' : 'py-3',
+                    column.align === 'right' && 'text-right',
+                    column.sortable &&
+                      'cursor-pointer select-none hover:text-foreground'
+                  )}
+                  style={{ width: column.width }}
+                  onClick={() =>
+                    column.sortable && handleSort(column.accessor as string)
+                  }
+                  role={
+                    column.sortable ? 'columnheader button' : 'columnheader'
+                  }
+                  aria-sort={
+                    sortConfig?.key === column.accessor
+                      ? sortConfig.direction === 'asc'
+                        ? 'ascending'
+                        : 'descending'
+                      : undefined
+                  }
+                >
+                  <span
+                    className={cn(
+                      'inline-flex items-center gap-1',
+                      column.align === 'right' && 'justify-end'
+                    )}
+                  >
+                    {column.header}
+                    {column.sortable && getSortIcon(column.accessor as string)}
+                  </span>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              Array.from({ length: 5 }).map((_, i) => (
+                <SkeletonRow
+                  key={i}
+                  columns={columns.length + (selectable !== 'none' ? 1 : 0)}
+                  compact={compact}
+                />
+              ))
+            ) : sortedData.length === 0 ? (
+              <tr>
+                <td
+                  colSpan={columns.length + (selectable !== 'none' ? 1 : 0)}
+                  className="px-3 py-8 text-center text-muted-foreground"
+                >
+                  {emptyMessage}
+                </td>
+              </tr>
+            ) : (
+              sortedData.map((row, rowIndex) => (
+                <tr
+                  key={rowIndex}
+                  onClick={() => handleRowSelect(rowIndex)}
+                  className={cn(
+                    'border-b border-border last:border-0 transition-colors',
+                    selectable !== 'none' && 'cursor-pointer hover:bg-muted/30'
+                  )}
+                  role="row"
+                  aria-selected={selectedRowsSet.has(rowIndex)}
+                >
+                  {selectable !== 'none' && (
+                    <td className={cn('px-3', compact ? 'py-2' : 'py-3')}>
+                      <div
+                        className={cn(
+                          'flex h-4 w-4 items-center justify-center rounded border transition-colors',
+                          selectedRowsSet.has(rowIndex)
+                            ? 'bg-foreground border-foreground text-background'
+                            : 'border-border'
+                        )}
+                      >
+                        {selectedRowsSet.has(rowIndex) && (
+                          <Check className="h-3 w-3" />
+                        )}
+                      </div>
+                    </td>
+                  )}
+                  {columns.map((column, colIndex) => {
+                    const value = getValue(row, column.accessor as string)
+                    const displayValue = column.render
+                      ? column.render(value, row, rowIndex)
+                      : formatNumber(value)
+
+                    return (
+                      <td
+                        key={colIndex}
+                        className={cn(
+                          'px-3',
+                          compact ? 'py-2' : 'py-3',
+                          column.align === 'center' && 'text-center',
+                          column.align === 'right' && 'text-right',
+                          colIndex === 0 && 'font-medium'
+                        )}
+                      >
+                        {displayValue}
+                      </td>
+                    )
+                  })}
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Action buttons for multi-select */}
+      {showActions && selectable === 'multi' && (
+        <div className="mt-3 flex items-center justify-between border-t pt-3">
+          <span className="text-sm text-muted-foreground">
+            {selectedRowsSet.size > 0
+              ? `${selectedRowsSet.size} item${selectedRowsSet.size > 1 ? 's' : ''} selected`
+              : 'Select items'}
+          </span>
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={selectedRowsSet.size === 0}
+              onClick={() => onDownload?.(sortedData.filter((_, i) => selectedRowsSet.has(i)))}
+            >
+              <Download className="mr-1.5 h-3.5 w-3.5" />
+              Download
+            </Button>
+            <Button
+              size="sm"
+              disabled={selectedRowsSet.size === 0}
+              onClick={() => onSend?.(sortedData.filter((_, i) => selectedRowsSet.has(i)))}
+            >
+              <Send className="mr-1.5 h-3.5 w-3.5" />
+              Send
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}