@devxcrew/react-ui 0.0.0-stage → 0.1.7

package/src/blocks/ecommerce/price-history/price-history-chart.tsx

@@ -0,0 +1,217 @@
+import { useState } from 'react'
+import { ArrowDownIcon, BellIcon, CheckIcon, TrendingDownIcon } from 'lucide-react'
+import { cn } from '../../../lib/utils'
+import { Button } from '../../../components/button'
+import { Badge } from '../../../components/badge'
+import type { PriceHistoryProps } from './price-history-types'
+
+export function PriceHistoryChart({
+  averagePrice: propAvg,
+  className,
+  currencySymbol = '$',
+  currentPrice,
+  history,
+  lowestPrice: propLow,
+  onSetPriceAlert,
+  peakPrice: propHigh,
+  productTitle,
+}: PriceHistoryProps) {
+  const [alertSet, setAlertSet] = useState(false)
+
+  const prices = history.map((h) => h.price)
+  const lowest = propLow ?? Math.min(...prices, currentPrice)
+  const peak = propHigh ?? Math.max(...prices, currentPrice)
+  const avg = propAvg ?? Math.round(prices.reduce((a, b) => a + b, 0) / (prices.length || 1))
+
+  const isAtLowest = currentPrice <= lowest
+  const savingsFromPeak = Math.max(0, peak - currentPrice)
+
+  // SVG dimensions
+  const width = 500
+  const height = 160
+  const padding = 24
+  const range = Math.max(1, peak - lowest)
+
+  // Points
+  const points = history.map((pt, idx) => {
+    const x = padding + (idx / Math.max(1, history.length - 1)) * (width - 2 * padding)
+    const y = height - padding - ((pt.price - lowest) / range) * (height - 2 * padding)
+    return { ...pt, x, y }
+  })
+
+  const pathD = points.reduce(
+    (acc, pt, idx) => `${acc} ${idx === 0 ? 'M' : 'L'} ${pt.x} ${pt.y}`,
+    '',
+  )
+  const areaD =
+    points.length > 0
+      ? `${pathD} L ${points[points.length - 1]!.x} ${height - padding} L ${points[0]!.x} ${height - padding} Z`
+      : ''
+
+  const handleAlert = () => {
+    setAlertSet(true)
+    onSetPriceAlert?.()
+  }
+
+  return (
+    <div
+      className={cn(
+        'space-y-4 rounded-2xl border border-border/80 bg-card p-5 shadow-xs',
+        className,
+      )}
+    >
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 border-b border-border/60 pb-4">
+        <div>
+          <div className="flex items-center gap-2">
+            <TrendingDownIcon className="size-4 text-emerald-600" />
+            <h4 className="text-sm font-bold text-foreground">Price History Tracker</h4>
+            {isAtLowest && (
+              <Badge
+                variant="default"
+                className="text-[10px] font-bold bg-emerald-600 hover:bg-emerald-700"
+              >
+                All-Time Low!
+              </Badge>
+            )}
+          </div>
+          {productTitle && (
+            <p className="text-xs text-muted-foreground mt-0.5 truncate">{productTitle}</p>
+          )}
+        </div>
+
+        <Button
+          size="sm"
+          variant={alertSet ? 'secondary' : 'outline'}
+          className="h-8 gap-1.5 text-xs self-start sm:self-auto"
+          onClick={handleAlert}
+        >
+          {alertSet ? (
+            <>
+              <CheckIcon className="size-3.5 text-emerald-600" />
+              <span>Alert Enabled</span>
+            </>
+          ) : (
+            <>
+              <BellIcon className="size-3.5 text-primary" />
+              <span>Notify Price Drops</span>
+            </>
+          )}
+        </Button>
+      </div>
+
+      {/* Stats row */}
+      <div className="grid grid-cols-3 gap-3 rounded-xl border border-border/60 bg-muted/20 p-3 text-center text-xs">
+        <div>
+          <span className="text-muted-foreground text-[11px]">Current</span>
+          <div className="font-bold text-foreground text-sm mt-0.5">
+            {currencySymbol}
+            {currentPrice}
+          </div>
+        </div>
+        <div>
+          <span className="text-muted-foreground text-[11px]">Lowest Recorded</span>
+          <div className="font-bold text-emerald-600 text-sm mt-0.5">
+            {currencySymbol}
+            {lowest}
+          </div>
+        </div>
+        <div>
+          <span className="text-muted-foreground text-[11px]">Average</span>
+          <div className="font-bold text-foreground text-sm mt-0.5">
+            {currencySymbol}
+            {avg}
+          </div>
+        </div>
+      </div>
+
+      {/* SVG Price Chart */}
+      <div className="relative w-full overflow-hidden rounded-xl border border-border/40 bg-muted/10 p-2">
+        <svg viewBox={`0 0 ${width} ${height}`} className="w-full h-40 overflow-visible">
+          <defs>
+            <linearGradient id="priceGrad" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="var(--primary, #3b82f6)" stopOpacity="0.25" />
+              <stop offset="100%" stopColor="var(--primary, #3b82f6)" stopOpacity="0.0" />
+            </linearGradient>
+          </defs>
+
+          {/* Grid lines */}
+          <line
+            x1={padding}
+            y1={padding}
+            x2={width - padding}
+            y2={padding}
+            stroke="currentColor"
+            strokeOpacity="0.1"
+            strokeDasharray="3 3"
+          />
+          <line
+            x1={padding}
+            y1={height / 2}
+            x2={width - padding}
+            y2={height / 2}
+            stroke="currentColor"
+            strokeOpacity="0.1"
+            strokeDasharray="3 3"
+          />
+          <line
+            x1={padding}
+            y1={height - padding}
+            x2={width - padding}
+            y2={height - padding}
+            stroke="currentColor"
+            strokeOpacity="0.1"
+          />
+
+          {/* Gradient area */}
+          {areaD && <path d={areaD} fill="url(#priceGrad)" />}
+
+          {/* Path line */}
+          {pathD && (
+            <path
+              d={pathD}
+              fill="none"
+              stroke="var(--primary, #3b82f6)"
+              strokeWidth="2.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          )}
+
+          {/* Data Points */}
+          {points.map((pt, i) => (
+            <g key={i}>
+              <circle
+                cx={pt.x}
+                cy={pt.y}
+                r="3.5"
+                className="fill-background stroke-primary stroke-2 hover:r-5 transition-all"
+              />
+            </g>
+          ))}
+        </svg>
+
+        {/* Date labels */}
+        <div className="flex justify-between px-4 text-[10px] text-muted-foreground font-mono">
+          <span>{history[0]?.date}</span>
+          <span>{history[history.length - 1]?.date}</span>
+        </div>
+      </div>
+
+      {savingsFromPeak > 0 && (
+        <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+          <ArrowDownIcon className="size-3.5 text-emerald-600 font-bold" />
+          <span>
+            Currently{' '}
+            <strong className="text-emerald-600">
+              {currencySymbol}
+              {savingsFromPeak} cheaper
+            </strong>{' '}
+            than its peak historical price of {currencySymbol}
+            {peak}.
+          </span>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/blocks/ecommerce/price-history/price-history-types.ts

@@ -0,0 +1,16 @@
+export type PriceDataPoint = {
+  readonly date: string
+  readonly price: number
+}
+
+export type PriceHistoryProps = {
+  readonly averagePrice?: number
+  readonly className?: string
+  readonly currencySymbol?: string
+  readonly currentPrice: number
+  readonly history: readonly PriceDataPoint[]
+  readonly lowestPrice?: number
+  readonly onSetPriceAlert?: () => void
+  readonly peakPrice?: number
+  readonly productTitle?: string
+}

package/src/blocks/ecommerce/reviews/index.ts

@@ -0,0 +1,2 @@
+export * from './reviews-section'
+export * from './reviews-types'

package/src/blocks/ecommerce/reviews/reviews-section.tsx

@@ -0,0 +1,309 @@
+import { useState } from 'react'
+import {
+  CheckCircle2Icon,
+  MessageSquareIcon,
+  PenToolIcon,
+  StarIcon,
+  ThumbsUpIcon,
+} from 'lucide-react'
+import { cn } from '../../../lib/utils'
+import { Button } from '../../../components/button'
+import { Badge } from '../../../components/badge'
+import type { ReviewsSectionProps } from './reviews-types'
+
+export function ReviewsSection({
+  averageRating,
+  className,
+  distribution,
+  onHelpfulVote,
+  onSubmitReview,
+  reviews,
+  totalReviews,
+}: ReviewsSectionProps) {
+  const [showWriteModal, setShowWriteModal] = useState(false)
+  const [selectedStarFilter, setSelectedStarFilter] = useState<number | null>(null)
+  const [newRating, setNewRating] = useState(5)
+  const [newTitle, setNewTitle] = useState('')
+  const [newComment, setNewComment] = useState('')
+  const [votedSet, setVotedSet] = useState<Set<string>>(new Set())
+
+  const filteredReviews = selectedStarFilter
+    ? reviews.filter((r) => r.rating === selectedStarFilter)
+    : reviews
+
+  const handleVote = (id: string) => {
+    if (votedSet.has(id)) return
+    setVotedSet(new Set(votedSet).add(id))
+    onHelpfulVote?.(id)
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!newComment.trim()) return
+    onSubmitReview?.({
+      comment: newComment,
+      rating: newRating,
+      title: newTitle,
+    })
+    setShowWriteModal(false)
+    setNewTitle('')
+    setNewComment('')
+  }
+
+  return (
+    <div
+      className={cn(
+        'space-y-8 rounded-2xl border border-border/80 bg-card p-6 shadow-xs',
+        className,
+      )}
+    >
+      {/* 1. Rating Summary Header */}
+      <div className="grid grid-cols-1 md:grid-cols-12 gap-8 border-b border-border/60 pb-8">
+        {/* Big Score */}
+        <div className="md:col-span-4 flex flex-col items-center justify-center p-6 rounded-2xl bg-muted/20 border border-border/60 text-center">
+          <span className="text-4xl font-black tracking-tight text-foreground">
+            {averageRating.toFixed(1)}
+          </span>
+          <div className="flex items-center gap-1 my-2">
+            {[1, 2, 3, 4, 5].map((s) => (
+              <StarIcon
+                key={s}
+                className={cn(
+                  'size-4',
+                  s <= Math.round(averageRating)
+                    ? 'fill-amber-400 text-amber-400'
+                    : 'fill-muted text-muted-foreground/30',
+                )}
+              />
+            ))}
+          </div>
+          <span className="text-xs text-muted-foreground">
+            Based on {totalReviews.toLocaleString()} verified ratings
+          </span>
+
+          <Button size="sm" className="gap-2 mt-4 text-xs" onClick={() => setShowWriteModal(true)}>
+            <PenToolIcon className="size-3.5" />
+            <span>Write a Review</span>
+          </Button>
+        </div>
+
+        {/* 5-Star Distribution Bars */}
+        <div className="md:col-span-8 flex flex-col justify-center space-y-2 text-xs">
+          {[5, 4, 3, 2, 1].map((star) => {
+            const count = distribution[star] ?? 0
+            const pct = totalReviews > 0 ? Math.round((count / totalReviews) * 100) : 0
+            const isSelected = selectedStarFilter === star
+
+            return (
+              <button
+                key={star}
+                type="button"
+                onClick={() => setSelectedStarFilter(isSelected ? null : star)}
+                className={cn(
+                  'flex items-center gap-3 rounded-lg px-2 py-1 transition-all text-left group',
+                  isSelected
+                    ? 'bg-primary/10 font-bold text-primary'
+                    : 'hover:bg-muted/40 text-muted-foreground',
+                )}
+              >
+                <div className="flex items-center gap-1 w-12 shrink-0">
+                  <span className="font-semibold text-foreground">{star}</span>
+                  <StarIcon className="size-3 fill-amber-400 text-amber-400" />
+                </div>
+
+                <div className="h-2 flex-1 rounded-full bg-border overflow-hidden">
+                  <div
+                    className={cn(
+                      'h-full transition-all duration-300',
+                      isSelected ? 'bg-primary' : 'bg-amber-400',
+                    )}
+                    style={{ width: `${pct}%` }}
+                  />
+                </div>
+
+                <span className="w-12 text-right text-[11px] font-mono text-muted-foreground">
+                  {pct}%
+                </span>
+              </button>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* 2. Write Review Modal / Inline Form */}
+      {showWriteModal && (
+        <form
+          onSubmit={handleSubmit}
+          className="rounded-xl border border-border/80 bg-muted/20 p-5 space-y-4 animate-in fade-in-0 duration-200"
+        >
+          <div className="flex items-center justify-between border-b border-border/60 pb-3">
+            <h4 className="text-sm font-bold text-foreground">Write Customer Review</h4>
+            <button
+              type="button"
+              onClick={() => setShowWriteModal(false)}
+              className="text-xs text-muted-foreground hover:text-foreground"
+            >
+              Cancel
+            </button>
+          </div>
+
+          <div className="space-y-1">
+            <label className="text-xs font-semibold text-foreground">Overall Rating</label>
+            <div className="flex items-center gap-1.5">
+              {[1, 2, 3, 4, 5].map((s) => (
+                <button
+                  key={s}
+                  type="button"
+                  onClick={() => setNewRating(s)}
+                  className="p-1 hover:scale-110 transition-transform"
+                >
+                  <StarIcon
+                    className={cn(
+                      'size-5',
+                      s <= newRating ? 'fill-amber-400 text-amber-400' : 'text-border',
+                    )}
+                  />
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="space-y-1">
+            <label className="text-xs font-semibold text-foreground">Review Title (optional)</label>
+            <input
+              type="text"
+              placeholder="e.g. Exceeded expectations! Great battery life."
+              value={newTitle}
+              onChange={(e) => setNewTitle(e.target.value)}
+              className="w-full rounded-lg border border-input bg-background px-3 py-2 text-xs focus:outline-none focus:ring-1 focus:ring-primary"
+            />
+          </div>
+
+          <div className="space-y-1">
+            <label className="text-xs font-semibold text-foreground">Your Feedback</label>
+            <textarea
+              rows={3}
+              required
+              placeholder="What did you like or dislike about this product?"
+              value={newComment}
+              onChange={(e) => setNewComment(e.target.value)}
+              className="w-full rounded-lg border border-input bg-background px-3 py-2 text-xs focus:outline-none focus:ring-1 focus:ring-primary"
+            />
+          </div>
+
+          <Button type="submit" size="sm" className="text-xs">
+            Submit Review
+          </Button>
+        </form>
+      )}
+
+      {/* 3. Reviews List */}
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <MessageSquareIcon className="size-4 text-primary" />
+            <h4 className="text-sm font-bold text-foreground">
+              Customer Feedback ({filteredReviews.length})
+            </h4>
+          </div>
+          {selectedStarFilter && (
+            <Badge
+              variant="outline"
+              className="cursor-pointer gap-1 text-xs"
+              onClick={() => setSelectedStarFilter(null)}
+            >
+              <span>Showing {selectedStarFilter}-star only</span>
+              <span>✕</span>
+            </Badge>
+          )}
+        </div>
+
+        <div className="space-y-4 divide-y divide-border/60">
+          {filteredReviews.map((rev) => {
+            const hasVoted = votedSet.has(rev.id)
+
+            return (
+              <div key={rev.id} className="pt-4 first:pt-0 space-y-2">
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex items-center gap-2.5">
+                    {rev.authorAvatar ? (
+                      <img
+                        src={rev.authorAvatar}
+                        alt={rev.author}
+                        className="size-8 rounded-full object-cover"
+                      />
+                    ) : (
+                      <div className="flex size-8 items-center justify-center rounded-full bg-primary/10 text-primary font-bold text-xs">
+                        {rev.author.charAt(0)}
+                      </div>
+                    )}
+                    <div>
+                      <div className="flex items-center gap-1.5">
+                        <span className="text-xs font-bold text-foreground">{rev.author}</span>
+                        {rev.isVerifiedBuyer && (
+                          <span className="inline-flex items-center gap-0.5 text-[10px] font-semibold text-emerald-600 dark:text-emerald-400">
+                            <CheckCircle2Icon className="size-3" />
+                            Verified Buyer
+                          </span>
+                        )}
+                      </div>
+                      <span className="text-[10px] text-muted-foreground">{rev.date}</span>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center gap-0.5">
+                    {[1, 2, 3, 4, 5].map((s) => (
+                      <StarIcon
+                        key={s}
+                        className={cn(
+                          'size-3.5',
+                          s <= rev.rating
+                            ? 'fill-amber-400 text-amber-400'
+                            : 'text-muted-foreground/30',
+                        )}
+                      />
+                    ))}
+                  </div>
+                </div>
+
+                {rev.title && <h5 className="text-xs font-bold text-foreground">{rev.title}</h5>}
+                <p className="text-xs text-muted-foreground leading-relaxed">{rev.comment}</p>
+
+                {rev.photos && rev.photos.length > 0 && (
+                  <div className="flex gap-2 pt-1">
+                    {rev.photos.map((ph, idx) => (
+                      <img
+                        key={idx}
+                        src={ph}
+                        alt="Customer photo"
+                        className="size-14 rounded-lg object-cover border border-border"
+                      />
+                    ))}
+                  </div>
+                )}
+
+                {/* Helpful Button */}
+                <div className="flex items-center gap-2 pt-1">
+                  <button
+                    type="button"
+                    disabled={hasVoted}
+                    onClick={() => handleVote(rev.id)}
+                    className={cn(
+                      'flex items-center gap-1.5 rounded-lg border px-2.5 py-1 text-[11px] font-medium transition-colors',
+                      hasVoted
+                        ? 'border-emerald-600/30 bg-emerald-500/10 text-emerald-600'
+                        : 'border-border/80 text-muted-foreground hover:bg-muted hover:text-foreground',
+                    )}
+                  >
+                    <ThumbsUpIcon className="size-3" />
+                    <span>Helpful ({(rev.helpfulCount ?? 0) + (hasVoted ? 1 : 0)})</span>
+                  </button>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/blocks/ecommerce/reviews/reviews-types.ts

@@ -0,0 +1,26 @@
+export type CustomerReview = {
+  readonly author: string
+  readonly authorAvatar?: string
+  readonly comment: string
+  readonly date: string
+  readonly helpfulCount?: number
+  readonly id: string
+  readonly isVerifiedBuyer?: boolean
+  readonly photos?: readonly string[]
+  readonly rating: number
+  readonly title?: string
+}
+
+export type RatingDistribution = {
+  readonly [star: number]: number
+}
+
+export type ReviewsSectionProps = {
+  readonly averageRating: number
+  readonly className?: string
+  readonly distribution: RatingDistribution
+  readonly onHelpfulVote?: (reviewId: string) => void
+  readonly onSubmitReview?: (review: { comment: string; rating: number; title: string }) => void
+  readonly reviews: readonly CustomerReview[]
+  readonly totalReviews: number
+}

package/src/blocks/ecommerce/wishlist/index.ts

@@ -0,0 +1,2 @@
+export * from './wishlist-grid'
+export * from './wishlist-types'