@devxcrew/react-ui 0.0.0-stage → 0.1.7

package/src/blocks/dropzone/dropzone.tsx

@@ -0,0 +1,216 @@
+import { CloudUpload, FileCheck } from 'lucide-react'
+import { useRef, useState } from 'react'
+import { Button } from '../../components/button'
+import { cn } from '../../lib/utils'
+import { DropzoneFileItem, formatBytes } from './dropzone-file-item'
+import type { DropzoneProps } from './dropzone-types'
+
+function validateFile(
+  file: File,
+  accept?: readonly string[],
+  maxSizeBytes?: number,
+): string | null {
+  if (maxSizeBytes && file.size > maxSizeBytes) {
+    return `File exceeds max size of ${formatBytes(maxSizeBytes)}`
+  }
+
+  if (accept && accept.length > 0) {
+    const ext = '.' + file.name.split('.').pop()?.toLowerCase()
+    const mime = file.type.toLowerCase()
+    const isAccepted = accept.some((pattern) => {
+      const p = pattern.toLowerCase().trim()
+      if (p.startsWith('.')) return ext === p
+      if (p.endsWith('/*')) return mime.startsWith(p.replace('/*', '/'))
+      return mime === p
+    })
+    if (!isAccepted) {
+      return `File type not supported (expected ${accept.join(', ')})`
+    }
+  }
+
+  return null
+}
+
+export function Dropzone({
+  accept,
+  allowMultiple = true,
+  ariaLabel = 'File upload dropzone',
+  className,
+  disabled = false,
+  emptyMessage = 'No files staged for upload',
+  files = [],
+  hint,
+  maxFiles,
+  maxSizeBytes,
+  onClearFiles,
+  onFilesDrop,
+  onRemoveFile,
+  onRetryFile,
+  showFileList = true,
+  title = 'Drag and drop files here, or click to browse',
+}: DropzoneProps) {
+  const [isDragActive, setIsDragActive] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  function handleProcessFiles(incomingFiles: FileList | File[]) {
+    if (disabled) return
+    const fileArray = Array.from(incomingFiles)
+    const accepted: File[] = []
+    const rejected: { error: string; file: File }[] = []
+
+    for (const f of fileArray) {
+      if (maxFiles && files.length + accepted.length >= maxFiles) {
+        rejected.push({ error: `Exceeds max allowed file limit of ${maxFiles}`, file: f })
+        continue
+      }
+      const err = validateFile(f, accept, maxSizeBytes)
+      if (err) {
+        rejected.push({ error: err, file: f })
+      } else {
+        accepted.push(f)
+      }
+    }
+
+    onFilesDrop?.(accepted, rejected)
+  }
+
+  function handleDragOver(e: React.DragEvent) {
+    e.preventDefault()
+    e.stopPropagation()
+    if (!disabled && !isDragActive) {
+      setIsDragActive(true)
+    }
+  }
+
+  function handleDragLeave(e: React.DragEvent) {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragActive(false)
+  }
+
+  function handleDrop(e: React.DragEvent) {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragActive(false)
+    if (disabled || !e.dataTransfer.files) return
+    handleProcessFiles(e.dataTransfer.files)
+  }
+
+  function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {
+    if (e.target.files) {
+      handleProcessFiles(e.target.files)
+    }
+    if (inputRef.current) {
+      inputRef.current.value = ''
+    }
+  }
+
+  function handleBrowseClick() {
+    if (!disabled) {
+      inputRef.current?.click()
+    }
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-4', className)}>
+      <div
+        aria-disabled={disabled}
+        aria-label={ariaLabel}
+        className={cn(
+          'group relative flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-border/80 bg-muted/20 p-8 text-center transition-all cursor-pointer select-none',
+          isDragActive && 'border-primary bg-primary/5 ring-4 ring-primary/10',
+          disabled && 'cursor-not-allowed opacity-50',
+          !disabled && 'hover:border-foreground/30 hover:bg-muted/30',
+        )}
+        role="region"
+        tabIndex={disabled ? -1 : 0}
+        onClick={handleBrowseClick}
+        onDragLeave={handleDragLeave}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+        onKeyDown={(e) => {
+          if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
+            e.preventDefault()
+            handleBrowseClick()
+          }
+        }}
+      >
+        <input
+          accept={accept?.join(',')}
+          className="sr-only"
+          disabled={disabled}
+          multiple={allowMultiple}
+          ref={inputRef}
+          type="file"
+          onChange={handleInputChange}
+        />
+
+        <div
+          className={cn(
+            'flex size-12 items-center justify-center rounded-2xl bg-muted/80 text-muted-foreground transition-transform duration-200 group-hover:scale-105',
+            isDragActive && 'scale-110 bg-primary/15 text-primary',
+          )}
+        >
+          <CloudUpload className="size-6" />
+        </div>
+
+        <h4 className="mt-3 text-sm font-semibold tracking-tight text-foreground">{title}</h4>
+
+        <p className="mt-1 text-xs text-muted-foreground max-w-sm">
+          {hint ??
+            `Supports ${accept ? accept.join(', ') : 'any files'}${
+              maxSizeBytes ? ` up to ${formatBytes(maxSizeBytes)}` : ''
+            }`}
+        </p>
+
+        <Button
+          className="mt-4 pointer-events-none"
+          disabled={disabled}
+          size="sm"
+          variant="secondary"
+        >
+          Select from device
+        </Button>
+      </div>
+
+      {showFileList && (
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center justify-between px-1">
+            <span className="flex items-center gap-1.5 text-xs font-semibold text-foreground">
+              <FileCheck className="size-3.5 text-muted-foreground" />
+              Staged files ({files.length}
+              {maxFiles ? ` / ${maxFiles}` : ''})
+            </span>
+
+            {files.length > 0 && onClearFiles && (
+              <button
+                className="text-xs text-muted-foreground hover:text-foreground"
+                type="button"
+                onClick={onClearFiles}
+              >
+                Clear all
+              </button>
+            )}
+          </div>
+
+          {files.length > 0 ? (
+            <div className="flex flex-col gap-2">
+              {files.map((file) => (
+                <DropzoneFileItem
+                  file={file}
+                  key={file.id}
+                  onRemove={onRemoveFile}
+                  onRetry={onRetryFile}
+                />
+              ))}
+            </div>
+          ) : (
+            <div className="rounded-xl border border-dashed border-border/60 py-4 text-center text-xs text-muted-foreground/70">
+              {emptyMessage}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/blocks/dropzone/index.ts

@@ -0,0 +1,3 @@
+export { Dropzone } from './dropzone'
+export { DropzoneFileItem, formatBytes } from './dropzone-file-item'
+export type { DropzoneFile, DropzoneFileStatus, DropzoneProps } from './dropzone-types'

package/src/blocks/ecommerce/cart/cart-drawer.tsx

@@ -0,0 +1,228 @@
+import {
+  ArrowRightIcon,
+  MinusIcon,
+  PlusIcon,
+  ShoppingBagIcon,
+  Trash2Icon,
+  TruckIcon,
+  XIcon,
+} from 'lucide-react'
+import { cn } from '../../../lib/utils'
+import { Button } from '../../../components/button'
+import type { StorefrontCartProps } from './cart-types'
+
+export function StorefrontCart({
+  className,
+  currencySymbol = '$',
+  freeShippingThreshold = 75,
+  isDrawer = true,
+  items,
+  onCheckout,
+  onClose,
+  onQuantityChange,
+  onRemoveItem,
+  open = true,
+  promoDiscountValue = 0,
+}: StorefrontCartProps) {
+  if (isDrawer && !open) return null
+
+  const subtotal = items.reduce((acc, item) => acc + item.priceValue * item.quantity, 0)
+  const total = Math.max(0, subtotal - promoDiscountValue)
+  const freeShippingProgress = Math.min(100, Math.round((subtotal / freeShippingThreshold) * 100))
+  const remainingForFreeShipping = Math.max(0, freeShippingThreshold - subtotal)
+
+  const content = (
+    <div className="flex h-full flex-col justify-between bg-background">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-border/80 px-5 py-4">
+        <div className="flex items-center gap-2">
+          <ShoppingBagIcon className="size-5 text-primary" />
+          <h2 className="text-base font-bold text-foreground">Shopping Cart</h2>
+          <span className="rounded-full bg-muted px-2 py-0.5 text-xs font-semibold text-muted-foreground">
+            {items.reduce((acc, it) => acc + it.quantity, 0)}
+          </span>
+        </div>
+        {isDrawer && onClose && (
+          <Button
+            size="icon"
+            variant="ghost"
+            className="size-8"
+            onClick={onClose}
+            aria-label="Close cart"
+          >
+            <XIcon className="size-4" />
+          </Button>
+        )}
+      </div>
+
+      {/* Free Shipping Progress Meter */}
+      <div className="border-b border-border/40 bg-muted/30 px-5 py-3 text-xs">
+        <div className="flex items-center gap-2 text-foreground font-medium mb-1.5">
+          <TruckIcon className="size-4 text-primary" />
+          {remainingForFreeShipping > 0 ? (
+            <span>
+              Add{' '}
+              <strong className="text-primary">
+                {currencySymbol}
+                {remainingForFreeShipping.toFixed(2)}
+              </strong>{' '}
+              more to get Free Shipping!
+            </span>
+          ) : (
+            <span className="font-semibold text-emerald-600 dark:text-emerald-400">
+              🎉 Congratulations! You have unlocked Free Shipping!
+            </span>
+          )}
+        </div>
+        <div className="h-2 w-full rounded-full bg-border overflow-hidden">
+          <div
+            className="h-full bg-primary transition-all duration-300"
+            style={{ width: `${freeShippingProgress}%` }}
+          />
+        </div>
+      </div>
+
+      {/* Item List */}
+      <div className="flex-1 overflow-y-auto px-5 py-4 space-y-4">
+        {items.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 text-center text-muted-foreground">
+            <ShoppingBagIcon className="size-12 stroke-[1.2] mb-3 opacity-40" />
+            <p className="text-sm font-semibold text-foreground">Your cart is empty</p>
+            <p className="text-xs text-muted-foreground mt-1">
+              Add products to your cart to checkout.
+            </p>
+          </div>
+        ) : (
+          items.map((item) => (
+            <div
+              key={item.id}
+              className="flex items-center gap-3 rounded-xl border border-border/60 bg-card p-3 shadow-xs transition-colors hover:border-border"
+            >
+              <img
+                src={item.image}
+                alt={item.title}
+                className="size-18 rounded-lg object-cover bg-muted shrink-0 border border-border/40"
+              />
+
+              <div className="flex-1 min-w-0">
+                <h4 className="text-xs font-semibold text-foreground truncate">{item.title}</h4>
+                {item.variant && (
+                  <p className="text-[11px] text-muted-foreground truncate">{item.variant}</p>
+                )}
+                <div className="flex items-baseline gap-1.5 mt-1">
+                  <span className="text-xs font-bold text-foreground">{item.price}</span>
+                  {item.originalPrice && (
+                    <span className="text-[10px] text-muted-foreground line-through">
+                      {item.originalPrice}
+                    </span>
+                  )}
+                </div>
+
+                {/* Quantity Stepper */}
+                <div className="flex items-center gap-2 mt-2">
+                  <div className="flex items-center rounded-lg border border-border/80 bg-muted/40">
+                    <button
+                      type="button"
+                      disabled={item.quantity <= 1}
+                      onClick={() => onQuantityChange?.(item.id, item.quantity - 1)}
+                      className="flex size-6 items-center justify-center text-muted-foreground hover:text-foreground disabled:opacity-30"
+                    >
+                      <MinusIcon className="size-3" />
+                    </button>
+                    <span className="w-6 text-center text-xs font-bold text-foreground">
+                      {item.quantity}
+                    </span>
+                    <button
+                      type="button"
+                      onClick={() => onQuantityChange?.(item.id, item.quantity + 1)}
+                      className="flex size-6 items-center justify-center text-muted-foreground hover:text-foreground"
+                    >
+                      <PlusIcon className="size-3" />
+                    </button>
+                  </div>
+
+                  <button
+                    type="button"
+                    onClick={() => onRemoveItem?.(item.id)}
+                    className="text-muted-foreground hover:text-destructive p-1 transition-colors"
+                    aria-label={`Remove ${item.title}`}
+                  >
+                    <Trash2Icon className="size-3.5" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* Order Summary & Checkout */}
+      {items.length > 0 && (
+        <div className="border-t border-border/80 bg-muted/20 p-5 space-y-3">
+          <div className="space-y-1.5 text-xs">
+            <div className="flex justify-between text-muted-foreground">
+              <span>Subtotal</span>
+              <span className="font-semibold text-foreground">
+                {currencySymbol}
+                {subtotal.toFixed(2)}
+              </span>
+            </div>
+            {promoDiscountValue > 0 && (
+              <div className="flex justify-between text-emerald-600 dark:text-emerald-400">
+                <span>Discount</span>
+                <span className="font-semibold">
+                  -{currencySymbol}
+                  {promoDiscountValue.toFixed(2)}
+                </span>
+              </div>
+            )}
+            <div className="flex justify-between text-muted-foreground">
+              <span>Shipping</span>
+              <span className="font-semibold text-foreground">
+                {remainingForFreeShipping === 0 ? 'FREE' : `${currencySymbol}9.99`}
+              </span>
+            </div>
+            <div className="border-t border-border/60 pt-2 flex justify-between text-sm font-bold text-foreground">
+              <span>Estimated Total</span>
+              <span>
+                {currencySymbol}
+                {total.toFixed(2)}
+              </span>
+            </div>
+          </div>
+
+          <Button className="w-full gap-2 shadow-xs" onClick={onCheckout}>
+            <span>Proceed to Checkout</span>
+            <ArrowRightIcon className="size-4" />
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+
+  if (!isDrawer) {
+    return (
+      <div
+        className={cn(
+          'rounded-2xl border border-border/80 bg-card overflow-hidden shadow-xs',
+          className,
+        )}
+      >
+        {content}
+      </div>
+    )
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex justify-end bg-background/80 backdrop-blur-sm animate-in fade-in-0 duration-200">
+      <div
+        className={cn(
+          'w-full max-w-md border-l border-border/80 shadow-2xl animate-in slide-in-from-right duration-300',
+          className,
+        )}
+      >
+        {content}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,27 @@
+export type CartItem = {
+  readonly discount?: string
+  readonly id: string
+  readonly image: string
+  readonly inStock?: boolean
+  readonly originalPrice?: string
+  readonly price: string
+  readonly priceValue: number
+  readonly quantity: number
+  readonly title: string
+  readonly variant?: string
+}
+
+export type StorefrontCartProps = {
+  readonly className?: string
+  readonly currencySymbol?: string
+  readonly freeShippingThreshold?: number
+  readonly isDrawer?: boolean
+  readonly items: readonly CartItem[]
+  readonly onCheckout?: () => void
+  readonly onClose?: () => void
+  readonly onQuantityChange?: (itemId: string, newQuantity: number) => void
+  readonly onRemoveItem?: (itemId: string) => void
+  readonly open?: boolean
+  readonly promoCode?: string
+  readonly promoDiscountValue?: number
+}

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

@@ -0,0 +1,2 @@
+export * from './cart-drawer'
+export * from './cart-types'

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

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react'
+
+export type StoreCategoryCard = {
+  readonly badge?: string
+  readonly href: string
+  readonly icon?: ReactNode
+  readonly id: string
+  readonly image?: string
+  readonly itemCount?: number
+  readonly subtitle?: string
+  readonly tags?: readonly string[]
+  readonly title: string
+}
+
+export type CategoryShowcaseProps = {
+  readonly categories: readonly StoreCategoryCard[]
+  readonly className?: string
+  readonly columns?: 2 | 3 | 4 | 6
+  readonly description?: string
+  readonly onSelectCategory?: (categoryId: string) => void
+  readonly title?: string
+  readonly variant?: 'cards' | 'minimal' | 'pills'
+}

package/src/blocks/ecommerce/categories/category-showcase.tsx

@@ -0,0 +1,125 @@
+import { ArrowRightIcon } from 'lucide-react'
+import { cn } from '../../../lib/utils'
+import { Badge } from '../../../components/badge'
+import type { CategoryShowcaseProps } from './categories-types'
+
+export function CategoryShowcase({
+  categories,
+  className,
+  columns = 4,
+  description = 'Browse by catalog department and find curated essentials.',
+  onSelectCategory,
+  title = 'Shop by Category',
+  variant = 'cards',
+}: CategoryShowcaseProps) {
+  const colClass = {
+    2: 'grid-cols-1 sm:grid-cols-2',
+    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4',
+    6: 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6',
+  }[columns]
+
+  if (variant === 'pills') {
+    return (
+      <div className={cn('flex flex-wrap items-center gap-2', className)}>
+        {categories.map((cat) => (
+          <button
+            key={cat.id}
+            type="button"
+            onClick={() => onSelectCategory?.(cat.id)}
+            className="group flex items-center gap-2 rounded-full border border-border/80 bg-card px-3.5 py-1.5 text-xs font-semibold text-foreground shadow-xs transition-all hover:border-primary hover:bg-primary/5"
+          >
+            {cat.icon}
+            <span>{cat.title}</span>
+            {cat.itemCount !== undefined && (
+              <span className="rounded-full bg-muted px-1.5 py-0.2 text-[10px] text-muted-foreground group-hover:text-primary">
+                {cat.itemCount}
+              </span>
+            )}
+          </button>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('space-y-6', className)}>
+      {(title || description) && (
+        <div className="flex flex-col gap-1 sm:flex-row sm:items-end sm:justify-between">
+          <div>
+            {title && <h3 className="text-xl font-bold tracking-tight text-foreground">{title}</h3>}
+            {description && <p className="text-xs text-muted-foreground">{description}</p>}
+          </div>
+        </div>
+      )}
+
+      <div className={cn('grid gap-4', colClass)}>
+        {categories.map((cat) => (
+          <div
+            key={cat.id}
+            onClick={() => onSelectCategory?.(cat.id)}
+            className="group relative cursor-pointer overflow-hidden rounded-2xl border border-border/80 bg-card p-4 shadow-xs transition-all duration-200 hover:-translate-y-1 hover:border-primary/50 hover:shadow-md"
+          >
+            {cat.image ? (
+              <div className="aspect-4/3 w-full overflow-hidden rounded-xl bg-muted mb-3 relative">
+                <img
+                  src={cat.image}
+                  alt={cat.title}
+                  className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                />
+                {cat.badge && (
+                  <Badge variant="default" className="absolute top-2 left-2 text-[10px] font-bold">
+                    {cat.badge}
+                  </Badge>
+                )}
+              </div>
+            ) : (
+              <div className="flex items-center justify-between mb-3">
+                <div className="flex size-12 items-center justify-center rounded-xl bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
+                  {cat.icon}
+                </div>
+                {cat.badge && (
+                  <Badge variant="default" className="text-[10px] font-bold">
+                    {cat.badge}
+                  </Badge>
+                )}
+              </div>
+            )}
+
+            <div className="space-y-1">
+              <div className="flex items-center justify-between">
+                <h4 className="text-sm font-bold text-foreground group-hover:text-primary transition-colors">
+                  {cat.title}
+                </h4>
+                <ArrowRightIcon className="size-3.5 text-muted-foreground transition-transform group-hover:translate-x-1 group-hover:text-primary" />
+              </div>
+
+              {cat.subtitle && (
+                <p className="text-xs text-muted-foreground line-clamp-1">{cat.subtitle}</p>
+              )}
+
+              {cat.itemCount !== undefined && (
+                <p className="text-[11px] font-medium text-muted-foreground/80">
+                  {cat.itemCount.toLocaleString()} products
+                </p>
+              )}
+
+              {cat.tags && cat.tags.length > 0 && (
+                <div className="flex flex-wrap gap-1 pt-2">
+                  {cat.tags.slice(0, 3).map((tag) => (
+                    <span
+                      key={tag}
+                      className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,2 @@
+export * from './category-showcase'
+export * from './categories-types'

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

@@ -0,0 +1,48 @@
+export type CheckoutAddress = {
+  city: string
+  country: string
+  fullName: string
+  phone: string
+  postalCode: string
+  state: string
+  streetAddress: string
+}
+
+export type CheckoutShippingOption = {
+  deliveryEstimate: string
+  id: string
+  label: string
+  price: string
+  priceValue: number
+}
+
+export type CheckoutPaymentSelection = {
+  cvv?: string
+  method: 'card' | 'upi' | 'wallet' | 'cod'
+  savedCardId?: string
+  upiId?: string
+}
+
+export type CheckoutItemSummary = {
+  id: string
+  image: string
+  price: string
+  quantity: number
+  title: string
+  variant?: string
+}
+
+export type CheckoutWizardProps = {
+  readonly className?: string
+  readonly currencySymbol?: string
+  readonly defaultAddress?: Partial<CheckoutAddress>
+  readonly initialStep?: 1 | 2 | 3
+  readonly items: readonly CheckoutItemSummary[]
+  readonly onPlaceOrder?: (data: {
+    address: CheckoutAddress
+    payment: CheckoutPaymentSelection
+    shipping: CheckoutShippingOption
+  }) => void
+  readonly shippingOptions?: readonly CheckoutShippingOption[]
+  readonly subtotal: number
+}