@devxcrew/react-ui 0.0.0-stage → 0.1.7

package/src/blocks/mermaid-preview/mermaid-preview.tsx

@@ -0,0 +1,164 @@
+import { Download, Minus, Pencil, Plus, RotateCcw } from 'lucide-react'
+import { useEffect, useId, useState } from 'react'
+import { Button } from '../../components/button'
+import { Textarea } from '../../components/textarea'
+
+type MermaidRuntime = {
+  initialize: (config: Record<string, unknown>) => void
+  render: (id: string, source: string) => Promise<{ svg: string }>
+}
+
+let runtimePromise: Promise<MermaidRuntime> | undefined
+
+function loadRuntime() {
+  runtimePromise ??= import('mermaid').then(({ default: runtime }) => runtime as MermaidRuntime)
+  return runtimePromise
+}
+
+export function MermaidPreview({
+  interactive = false,
+  source,
+}: {
+  interactive?: boolean
+  source: string
+}) {
+  const id = useId().replace(/:/g, '-')
+  const [draft, setDraft] = useState(source)
+  const [editing, setEditing] = useState(false)
+  const [result, setResult] = useState<{ error?: string; svg?: string }>({})
+  const [zoom, setZoom] = useState(1)
+
+  useEffect(() => setDraft(source), [source])
+
+  useEffect(() => {
+    const value = draft.trim()
+    if (!value) {
+      setResult({})
+      return
+    }
+    let active = true
+    void loadRuntime()
+      .then((runtime) => {
+        runtime.initialize({ startOnLoad: false, securityLevel: 'strict', theme: 'neutral' })
+        return runtime.render(`mermaid-${id}`, value)
+      })
+      .then(({ svg }) => active && setResult({ svg }))
+      .catch(() => active && setResult({ error: 'Mermaid could not render this diagram.' }))
+    return () => {
+      active = false
+    }
+  }, [draft, id])
+
+  if (!draft.trim()) return null
+  if (result.error) return <p className="text-sm text-destructive">{result.error}</p>
+  if (!result.svg) return <p className="text-sm text-muted-foreground">Rendering diagram…</p>
+  return (
+    <section
+      aria-label="Mermaid diagram"
+      className="group/mermaid relative space-y-3 rounded-lg border bg-muted/20 p-3"
+    >
+      {interactive ? (
+        <div className="absolute right-3 top-3 z-10 flex gap-1 rounded-md border bg-background/95 p-1 opacity-0 shadow-sm transition-opacity group-focus-within/mermaid:opacity-100 group-hover/mermaid:opacity-100">
+          <Button
+            aria-label="Zoom out"
+            disabled={zoom <= 0.5}
+            onClick={() => setZoom((value) => Math.max(0.5, value - 0.25))}
+            size="icon-xs"
+            type="button"
+            variant="ghost"
+          >
+            <Minus />
+          </Button>
+          <Button
+            aria-label="Reset diagram zoom"
+            onClick={() => setZoom(1)}
+            size="icon-xs"
+            type="button"
+            variant="ghost"
+          >
+            <RotateCcw />
+          </Button>
+          <Button
+            aria-label="Zoom in"
+            disabled={zoom >= 2}
+            onClick={() => setZoom((value) => Math.min(2, value + 0.25))}
+            size="icon-xs"
+            type="button"
+            variant="ghost"
+          >
+            <Plus />
+          </Button>
+          <Button
+            aria-label="Download diagram as PNG"
+            onClick={() => void downloadPng(result.svg!, id)}
+            size="icon-xs"
+            type="button"
+            variant="ghost"
+          >
+            <Download />
+          </Button>
+          <Button
+            aria-label="Open Mermaid editor"
+            onClick={() => setEditing((value) => !value)}
+            size="icon-xs"
+            type="button"
+            variant="ghost"
+          >
+            <Pencil />
+          </Button>
+        </div>
+      ) : null}
+      {editing ? (
+        <div className="space-y-2">
+          <p className="text-xs text-muted-foreground">
+            Local draft. The saved chat response is unchanged.
+          </p>
+          <Textarea
+            aria-label="Mermaid source editor"
+            className="min-h-36 font-mono text-xs"
+            onChange={(event) => setDraft(event.target.value)}
+            value={draft}
+          />
+        </div>
+      ) : null}
+      <div
+        className="overflow-auto rounded-md"
+        style={{ maxHeight: interactive ? '34rem' : undefined }}
+      >
+        <div
+          className="min-w-max origin-top-left"
+          style={{ transform: `scale(${zoom})`, width: `${100 / zoom}%` }}
+          dangerouslySetInnerHTML={{ __html: result.svg }}
+        />
+      </div>
+    </section>
+  )
+}
+
+async function downloadPng(svg: string, id: string) {
+  const sourceUrl = URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml;charset=utf-8' }))
+  try {
+    const image = new Image()
+    await new Promise<void>((resolve, reject) => {
+      image.onload = () => resolve()
+      image.onerror = () => reject(new Error('The diagram could not be exported.'))
+      image.src = sourceUrl
+    })
+    const canvas = document.createElement('canvas')
+    canvas.width = Math.max(1, image.width * 2)
+    canvas.height = Math.max(1, image.height * 2)
+    const context = canvas.getContext('2d')
+    if (!context) throw new Error('The diagram could not be exported.')
+    context.scale(2, 2)
+    context.drawImage(image, 0, 0)
+    const png = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, 'image/png'))
+    if (!png) throw new Error('The diagram could not be exported.')
+    const link = document.createElement('a')
+    link.download = `mermaid-${id}.png`
+    link.href = URL.createObjectURL(png)
+    link.click()
+    URL.revokeObjectURL(link.href)
+  } finally {
+    URL.revokeObjectURL(sourceUrl)
+  }
+}

package/src/blocks/notifications/README.md

@@ -0,0 +1,7 @@
+# Notification Blocks
+
+This folder owns the reusable, presentation-only notification center page. Applications supply
+records, read state, navigation actions, and persistence callbacks.
+
+The block does not fetch notifications, change server state, or own product routes. It renders a
+responsive inbox surface with unread indicators and an optional mark-all-read action.

package/src/blocks/notifications/index.ts

@@ -0,0 +1 @@
+export { NotificationCenterPage, type NotificationCenterItem } from './notification-center-page'

package/src/blocks/notifications/notification-center-page.tsx

@@ -0,0 +1,73 @@
+import { BellIcon, CheckCheckIcon } from 'lucide-react'
+import { Badge } from '../../components/badge'
+import { Button } from '../../components/button'
+import { cn } from '../../lib/utils'
+
+export type NotificationCenterItem = {
+  description: string
+  id: string
+  read?: boolean
+  time: string
+  title: string
+  onSelect?: () => void
+}
+
+export function NotificationCenterPage({
+  embedded = false,
+  items,
+  onMarkAllRead,
+}: {
+  embedded?: boolean
+  items: readonly NotificationCenterItem[]
+  onMarkAllRead?: () => void
+}) {
+  const unreadCount = items.filter(({ read }) => !read).length
+
+  return (
+    <main className={cn('bg-background px-6 py-10', embedded ? 'min-h-[620px]' : 'min-h-screen')}>
+      <div className="mx-auto grid w-full max-w-3xl gap-8">
+        <header className="flex flex-wrap items-start justify-between gap-4 border-b pb-6">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2">
+              <BellIcon className="size-5" />
+              <h1 className="text-2xl font-semibold tracking-tight">Notifications</h1>
+              {unreadCount > 0 ? <Badge>{unreadCount} new</Badge> : null}
+            </div>
+            <p className="text-sm text-muted-foreground">
+              Review activity from your connected CODEXSUN applications.
+            </p>
+          </div>
+          <Button onClick={onMarkAllRead} variant="outline">
+            <CheckCheckIcon /> Mark all as read
+          </Button>
+        </header>
+
+        <section className="divide-y" aria-label="Recent notifications">
+          {items.map((item) => (
+            <button
+              className="flex w-full cursor-pointer items-start gap-4 px-2 py-5 text-left transition-colors hover:bg-muted/50"
+              key={item.id}
+              onClick={item.onSelect}
+              type="button"
+            >
+              <span
+                aria-hidden="true"
+                className={cn(
+                  'mt-2 size-2 shrink-0 rounded-full',
+                  item.read ? 'bg-muted' : 'bg-primary',
+                )}
+              />
+              <span className="min-w-0 flex-1">
+                <span className="block font-medium">{item.title}</span>
+                <span className="mt-1 block text-sm leading-6 text-muted-foreground">
+                  {item.description}
+                </span>
+              </span>
+              <span className="shrink-0 text-sm text-muted-foreground">{item.time}</span>
+            </button>
+          ))}
+        </section>
+      </div>
+    </main>
+  )
+}

package/src/blocks/pricing/index.ts

@@ -0,0 +1,7 @@
+export { PricingTable } from './pricing-table'
+export type {
+  BillingInterval,
+  PricingFeatureItem,
+  PricingTableProps,
+  PricingTierItem,
+} from './pricing-types'

package/src/blocks/pricing/pricing-table.tsx

@@ -0,0 +1,173 @@
+import { Check, Sparkles, X } from 'lucide-react'
+import { useState } from 'react'
+import { Badge } from '../../components/badge'
+import { Button } from '../../components/button'
+import { cn } from '../../lib/utils'
+import type { BillingInterval, PricingTableProps, PricingTierItem } from './pricing-types'
+
+export function PricingTable({
+  allowIntervalToggle = true,
+  annualDiscountLabel = 'Save 20%',
+  className,
+  defaultInterval = 'monthly',
+  onSelectTier,
+  subtitle = 'Simple, transparent pricing. No hidden fees.',
+  tiers,
+  title = 'Choose your plan',
+}: PricingTableProps) {
+  const [interval, setInterval] = useState<BillingInterval>(defaultInterval)
+
+  return (
+    <div className={cn('flex flex-col items-center gap-8 py-4', className)}>
+      {/* Header */}
+      <div className="flex flex-col items-center text-center max-w-xl gap-2">
+        <h3 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">{title}</h3>
+        {subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
+
+        {/* Interval Switcher */}
+        {allowIntervalToggle && (
+          <div className="mt-4 flex items-center gap-1 rounded-xl border border-border/80 bg-muted/40 p-1">
+            <button
+              className={cn(
+                'rounded-lg px-3 py-1.5 text-xs font-semibold transition-all',
+                interval === 'monthly'
+                  ? 'bg-background text-foreground shadow-2xs'
+                  : 'text-muted-foreground hover:text-foreground',
+              )}
+              type="button"
+              onClick={() => setInterval('monthly')}
+            >
+              Monthly billing
+            </button>
+            <button
+              className={cn(
+                'flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold transition-all',
+                interval === 'annual'
+                  ? 'bg-background text-foreground shadow-2xs'
+                  : 'text-muted-foreground hover:text-foreground',
+              )}
+              type="button"
+              onClick={() => setInterval('annual')}
+            >
+              <span>Annual billing</span>
+              <span className="rounded-full bg-emerald-500/15 px-1.5 py-0.2 text-[10px] font-bold text-emerald-600 dark:text-emerald-400">
+                {annualDiscountLabel}
+              </span>
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Tiers Grid */}
+      <div className="grid w-full max-w-6xl grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 items-stretch">
+        {tiers.map((tier) => (
+          <PricingTierCard
+            interval={interval}
+            key={tier.id}
+            tier={tier}
+            onSelect={() => onSelectTier?.(tier, interval)}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function PricingTierCard({
+  interval,
+  onSelect,
+  tier,
+}: {
+  interval: BillingInterval
+  onSelect?: () => void
+  tier: PricingTierItem
+}) {
+  const currency = tier.currency ?? '$'
+  const isAnnual = interval === 'annual'
+  const price = isAnnual && tier.annualPrice !== undefined ? tier.annualPrice : tier.monthlyPrice
+  const period = tier.periodLabel ?? (isAnnual ? '/yr' : '/mo')
+
+  return (
+    <div
+      className={cn(
+        'relative flex flex-col justify-between rounded-2xl border bg-card p-6 shadow-2xs transition-all duration-200 hover:shadow-md',
+        tier.isPopular
+          ? 'border-primary ring-2 ring-primary/20 shadow-sm'
+          : 'border-border/80 hover:border-foreground/25',
+      )}
+    >
+      {tier.isPopular && (
+        <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+          <Badge className="bg-primary text-primary-foreground font-bold shadow-xs px-3 py-0.5">
+            <Sparkles className="size-3 mr-1" />
+            {tier.badge ?? 'Most Popular'}
+          </Badge>
+        </div>
+      )}
+
+      <div>
+        <div className="flex items-center justify-between gap-2">
+          <h4 className="text-lg font-bold tracking-tight text-foreground">{tier.name}</h4>
+          {!tier.isPopular && tier.badge && <Badge variant="secondary">{tier.badge}</Badge>}
+        </div>
+
+        <p className="mt-1 text-xs text-muted-foreground leading-relaxed">{tier.description}</p>
+
+        {/* Price display */}
+        <div className="mt-5 flex items-baseline gap-1">
+          <span className="text-3xl font-extrabold text-foreground sm:text-4xl">
+            {currency}
+            {price}
+          </span>
+          <span className="text-xs font-medium text-muted-foreground">{period}</span>
+        </div>
+
+        {/* Features List */}
+        <div className="mt-6 flex flex-col gap-2.5 border-t border-border/40 pt-5">
+          <span className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">
+            Features included:
+          </span>
+          <ul className="flex flex-col gap-2">
+            {tier.features.map((feat, idx) => (
+              <li className="flex items-start gap-2 text-xs" key={idx}>
+                {feat.excluded ? (
+                  <X className="size-3.5 text-muted-foreground/50 shrink-0 mt-0.5" />
+                ) : (
+                  <Check
+                    className={cn(
+                      'size-3.5 shrink-0 mt-0.5',
+                      feat.highlight ? 'text-primary font-bold' : 'text-emerald-500',
+                    )}
+                  />
+                )}
+                <span
+                  className={cn(
+                    feat.excluded
+                      ? 'text-muted-foreground/60 line-through'
+                      : feat.highlight
+                        ? 'text-foreground font-semibold'
+                        : 'text-foreground/90',
+                  )}
+                >
+                  {feat.label}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+
+      {/* CTA Button */}
+      <div className="mt-8 pt-2">
+        <Button
+          className="w-full rounded-xl font-semibold"
+          render={tier.ctaHref ? <a href={tier.ctaHref} /> : undefined}
+          variant={tier.ctaVariant ?? (tier.isPopular ? 'default' : 'outline')}
+          onClick={onSelect}
+        >
+          {tier.ctaLabel ?? 'Get Started'}
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/blocks/pricing/pricing-types.ts

@@ -0,0 +1,34 @@
+export type BillingInterval = 'monthly' | 'annual'
+
+export interface PricingFeatureItem {
+  excluded?: boolean
+  highlight?: boolean
+  label: string
+}
+
+export interface PricingTierItem {
+  annualPrice?: number
+  badge?: string
+  ctaHref?: string
+  ctaLabel?: string
+  ctaVariant?: 'default' | 'outline' | 'secondary'
+  currency?: string
+  description: string
+  features: readonly PricingFeatureItem[]
+  id: string
+  isPopular?: boolean
+  monthlyPrice: number
+  name: string
+  periodLabel?: string
+}
+
+export interface PricingTableProps {
+  allowIntervalToggle?: boolean
+  annualDiscountLabel?: string
+  className?: string
+  defaultInterval?: BillingInterval
+  onSelectTier?: (tier: PricingTierItem, interval: BillingInterval) => void
+  subtitle?: string
+  tiers: readonly PricingTierItem[]
+  title?: string
+}

package/src/blocks/product-card/index.ts

@@ -0,0 +1,2 @@
+export { ProductCard } from './product-card'
+export type { ProductCardProps, ProductColorSwatch, ProductItem } from './product-card-types'

package/src/blocks/product-card/product-card-types.ts

@@ -0,0 +1,35 @@
+export interface ProductColorSwatch {
+  hex: string
+  id: string
+  name: string
+}
+
+export interface ProductItem {
+  badge?: string
+  brand?: string
+  category?: string
+  colors?: readonly ProductColorSwatch[]
+  currency?: string
+  description?: string
+  discountPercent?: number
+  id: string
+  imageUrl: string
+  inStock?: boolean
+  isNew?: boolean
+  originalPrice?: number
+  price: number
+  rating?: number
+  reviewCount?: number
+  secondaryImageUrl?: string
+  title: string
+}
+
+export interface ProductCardProps {
+  className?: string
+  onAddToCart?: (product: ProductItem, selectedColor?: ProductColorSwatch) => void
+  onQuickView?: (product: ProductItem) => void
+  onToggleWishlist?: (product: ProductItem, isWishlisted: boolean) => void
+  product: ProductItem
+  showQuickView?: boolean
+  showWishlist?: boolean
+}

package/src/blocks/product-card/product-card.tsx

@@ -0,0 +1,183 @@
+import { Eye, Heart, ShoppingBag, Star } from 'lucide-react'
+import { useState } from 'react'
+import { Badge } from '../../components/badge'
+import { Button } from '../../components/button'
+import { cn } from '../../lib/utils'
+import type { ProductCardProps, ProductColorSwatch } from './product-card-types'
+
+export function ProductCard({
+  className,
+  onAddToCart,
+  onQuickView,
+  onToggleWishlist,
+  product,
+  showQuickView = true,
+  showWishlist = true,
+}: ProductCardProps) {
+  const [isHovered, setIsHovered] = useState(false)
+  const [isWishlisted, setIsWishlisted] = useState(false)
+  const [selectedColor, setSelectedColor] = useState<ProductColorSwatch | undefined>(
+    product.colors?.[0],
+  )
+
+  const currency = product.currency ?? '$'
+  const inStock = product.inStock ?? true
+
+  function handleWishlistToggle(e: React.MouseEvent) {
+    e.stopPropagation()
+    const next = !isWishlisted
+    setIsWishlisted(next)
+    onToggleWishlist?.(product, next)
+  }
+
+  function handleAddToCart(e: React.MouseEvent) {
+    e.stopPropagation()
+    if (!inStock) return
+    onAddToCart?.(product, selectedColor)
+  }
+
+  return (
+    <div
+      className={cn(
+        'group relative flex flex-col overflow-hidden rounded-2xl border border-border/80 bg-card text-card-foreground shadow-2xs transition-all duration-200 hover:-translate-y-1 hover:border-foreground/25 hover:shadow-md select-none',
+        className,
+      )}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {/* Product Image Area */}
+      <div className="relative aspect-square w-full overflow-hidden bg-muted/40">
+        <img
+          alt={product.title}
+          className="size-full object-cover transition-transform duration-300 group-hover:scale-105"
+          loading="lazy"
+          src={
+            isHovered && product.secondaryImageUrl ? product.secondaryImageUrl : product.imageUrl
+          }
+        />
+
+        {/* Badges */}
+        <div className="absolute left-2.5 top-2.5 flex flex-col gap-1">
+          {product.discountPercent ? (
+            <Badge className="bg-destructive text-destructive-foreground font-bold shadow-xs">
+              -{product.discountPercent}%
+            </Badge>
+          ) : product.isNew ? (
+            <Badge className="bg-primary text-primary-foreground font-bold shadow-xs">NEW</Badge>
+          ) : product.badge ? (
+            <Badge variant="secondary">{product.badge}</Badge>
+          ) : null}
+
+          {!inStock && (
+            <Badge className="bg-muted text-muted-foreground font-medium" variant="outline">
+              Out of stock
+            </Badge>
+          )}
+        </div>
+
+        {/* Floating Actions */}
+        <div className="absolute right-2.5 top-2.5 flex flex-col gap-1.5">
+          {showWishlist && (
+            <button
+              aria-label={isWishlisted ? 'Remove from wishlist' : 'Add to wishlist'}
+              className={cn(
+                'flex size-8 items-center justify-center rounded-full bg-background/85 backdrop-blur-xs text-foreground shadow-xs transition-colors hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                isWishlisted && 'text-destructive',
+              )}
+              type="button"
+              onClick={handleWishlistToggle}
+            >
+              <Heart
+                className={cn('size-4', isWishlisted && 'fill-destructive text-destructive')}
+              />
+            </button>
+          )}
+
+          {showQuickView && onQuickView && (
+            <button
+              aria-label="Quick view product"
+              className="flex size-8 items-center justify-center rounded-full bg-background/85 backdrop-blur-xs text-muted-foreground shadow-xs transition-colors hover:bg-background hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              type="button"
+              onClick={() => onQuickView(product)}
+            >
+              <Eye className="size-4" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Product Content Details */}
+      <div className="flex flex-1 flex-col p-4">
+        {product.brand && (
+          <span className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">
+            {product.brand}
+          </span>
+        )}
+
+        <h4 className="mt-0.5 line-clamp-1 text-sm font-semibold tracking-tight text-foreground">
+          {product.title}
+        </h4>
+
+        {/* Rating */}
+        {product.rating !== undefined && (
+          <div className="mt-1.5 flex items-center gap-1 text-xs text-muted-foreground">
+            <div className="flex items-center text-amber-500">
+              <Star className="size-3.5 fill-amber-500 text-amber-500" />
+            </div>
+            <span className="font-semibold text-foreground text-[11px]">{product.rating}</span>
+            {product.reviewCount !== undefined && (
+              <span className="text-[11px] text-muted-foreground">({product.reviewCount})</span>
+            )}
+          </div>
+        )}
+
+        {/* Color Swatches */}
+        {product.colors && product.colors.length > 0 && (
+          <div className="mt-2.5 flex items-center gap-1.5">
+            {product.colors.map((color) => (
+              <button
+                aria-label={`Select color ${color.name}`}
+                className={cn(
+                  'size-4.5 rounded-full border border-border/80 transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                  selectedColor?.id === color.id && 'ring-2 ring-primary ring-offset-1',
+                )}
+                key={color.id}
+                style={{ backgroundColor: color.hex }}
+                title={color.name}
+                type="button"
+                onClick={() => setSelectedColor(color)}
+              />
+            ))}
+          </div>
+        )}
+
+        {/* Price & Add to Cart */}
+        <div className="mt-auto pt-3 flex items-center justify-between gap-2 border-t border-border/40">
+          <div className="flex items-baseline gap-1.5">
+            <span className="text-base font-bold text-foreground">
+              {currency}
+              {product.price.toFixed(2)}
+            </span>
+            {product.originalPrice && product.originalPrice > product.price && (
+              <span className="text-xs text-muted-foreground line-through">
+                {currency}
+                {product.originalPrice.toFixed(2)}
+              </span>
+            )}
+          </div>
+
+          <Button
+            className="rounded-xl px-2.5 py-1 text-xs font-semibold"
+            disabled={!inStock}
+            size="sm"
+            variant="secondary"
+            onClick={handleAddToCart}
+          >
+            <ShoppingBag className="size-3.5" />
+            <span className="hidden xs:inline">Add</span>
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}