@instockng/storefront-ui 1.0.10 → 1.0.12

package/src/components/ShoppingCart.tsx

@@ -0,0 +1,263 @@
+'use client';
+
+/**
+ * ShoppingCart Component
+ *
+ * Animated sliding cart sidebar that opens from the right.
+ * Uses CartProvider for cart data.
+ */
+
+import { useEffect, useState } from 'react';
+import { useCart } from '../contexts/CartContext';
+import { CartItem } from './CartItem';
+import { DiscountCodeInput } from './DiscountCodeInput';
+import { Checkout } from './Checkout';
+import { Button } from './ui/button';
+import { X, Package, Loader2 } from 'lucide-react';
+import { formatCurrency, cn } from '../lib/utils';
+
+export interface ShoppingCartProps {
+  /** Whether the cart is open */
+  isOpen: boolean;
+  /** Callback when cart should close */
+  onClose: () => void;
+  /** Callback when checkout is clicked */
+  onCheckout?: () => void;
+  /** Callback when continue shopping is clicked */
+  onContinueShopping?: () => void;
+  /** Custom class name */
+  className?: string;
+  /** Show discount code input */
+  showDiscountCode?: boolean;
+  /** Checkout button text */
+  checkoutButtonText?: string;
+  /** Continue shopping button text */
+  continueShoppingText?: string;
+  /** Custom class for checkout button */
+  checkoutButtonClassName?: string;
+  /** Custom class for continue shopping button */
+  continueShoppingButtonClassName?: string;
+  /** Disable checkout */
+  disableCheckout?: boolean;
+  /** Empty cart message */
+  emptyMessage?: string;
+}
+
+export function ShoppingCart({
+  isOpen,
+  onClose,
+  onCheckout,
+  onContinueShopping,
+  className,
+  showDiscountCode = true,
+  checkoutButtonText = 'Checkout',
+  continueShoppingText = 'Continue Shopping',
+  checkoutButtonClassName,
+  continueShoppingButtonClassName,
+  disableCheckout = false,
+  emptyMessage = 'Your cart is empty',
+}: ShoppingCartProps) {
+  // Get cart from CartProvider context
+  const { cart, isLoading, error } = useCart();
+  
+  // State for checkout modal
+  const [isCheckoutOpen, setIsCheckoutOpen] = useState(false);
+
+  // Prevent body scroll when cart is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  // Close on escape key
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleEscape);
+    return () => window.removeEventListener('keydown', handleEscape);
+  }, [isOpen, onClose]);
+
+  // Calculate totals from cart pricing
+  const subtotal = cart?.pricing?.subtotal || 0;
+  const discount = cart?.pricing.discount?.amount || 0;
+
+  const handleCheckout = () => {
+    setIsCheckoutOpen(true);
+    onCheckout?.();
+  };
+
+  const handleContinueShopping = () => {
+    onContinueShopping?.();
+    onClose();
+  };
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className={cn(
+          'fixed inset-0 z-40 bg-black/50 transition-opacity duration-300',
+          isOpen ? 'opacity-100' : 'pointer-events-none opacity-0'
+        )}
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      {/* Sidebar */}
+      <div
+        className={cn(
+          'fixed right-0 top-0 z-50 h-full w-full bg-white shadow-2xl transition-transform duration-300 ease-in-out sm:w-[480px]',
+          isOpen ? 'translate-x-0' : 'translate-x-full',
+          className
+        )}
+      >
+        <div className="flex h-full flex-col">
+          {/* Header */}
+          <div className="border-b border-gray-300 px-4 py-2">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="bg-accent-500 text-white px-2 py-1 rounded-full text-sm aspect-square flex items-center justify-center w-8 h-8">{cart?.items?.length}</div>
+                <h2 className="text-lg font-medium">Your Cart</h2>
+              </div>
+              <button
+                onClick={onClose}
+                className="rounded-full p-2 transition-colors hover:bg-gray-100"
+                aria-label="Close cart"
+              >
+                <X className="h-6 w-6" />
+              </button>
+            </div>
+          </div>
+
+          {/* Loading State */}
+          {isLoading && (
+            <div className="flex flex-1 items-center justify-center">
+              <div className="text-center">
+                <Loader2 className="mx-auto mb-4 h-12 w-12 animate-spin text-accent-500" />
+                <p className="text-gray-600">Loading cart...</p>
+              </div>
+            </div>
+          )}
+
+          {/* Error State */}
+          {error && !isLoading && (
+            <div className="flex flex-1 items-center justify-center">
+              <div className="text-center">
+                <Package className="mx-auto mb-4 h-12 w-12 text-red-600" />
+                <p className="text-red-600">Failed to load cart. Please try again.</p>
+              </div>
+            </div>
+          )}
+
+          {/* Empty State */}
+          {!isLoading && !error && (!cart || !cart.items || cart.items.length === 0) && (
+            <div className="flex flex-1 items-center justify-center">
+              <div className="text-center">
+                <Package className="mx-auto mb-4 h-12 w-12 text-gray-400" />
+                <p className="text-gray-600">{emptyMessage}</p>
+              </div>
+            </div>
+          )}
+
+          {/* Cart Content */}
+          {!isLoading && !error && cart && cart.items && cart.items.length > 0 && (
+            <>
+              {/* Cart Items - Scrollable */}
+              <div className="flex-1 overflow-y-auto p-4">
+                <div className="space-y-4">
+                  {cart.items.map((item, index) => (
+                    <div key={item.id}>
+                      <CartItem
+                        item={item}
+                      />
+                      {index < cart.items.length - 1 && (
+                        <hr className="border-gray-200 mt-2" />
+                      )}
+                    </div>
+                  ))}
+                </div>
+
+                {/* Discount Code */}
+                {showDiscountCode && (
+                  <div className="mt-6">
+                    <DiscountCodeInput />
+                  </div>
+                )}
+              </div>
+
+              {/* Footer with Summary and Actions */}
+              <div className="border-t border-gray-300 bg-white">
+                {/* Summary */}
+                <div className=" text-base">
+                  <div className="p-4 space-y-2">
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">Subtotal</span>
+                      <span className="font-semibold">{formatCurrency(subtotal)}</span>
+                    </div>
+
+                    {discount > 0 && (
+                      <div className="flex justify-between text-green-600">
+                        <span>Discount</span>
+                        <span className="font-semibold">-{formatCurrency(discount)}</span>
+                      </div>
+                    )}
+
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">Shipping</span>
+                      <span className="font-semibold">
+                        {cart.pricing && cart.deliveryZone ? formatCurrency(cart.pricing.deliveryCharge) : '-'}
+                      </span>
+                    </div>
+
+                  </div>
+
+                  <div className="flex justify-between p-4 border-t border-gray-300 text-lg">
+                    <span className="font-bold">Total</span>
+                    <span className="font-bold">{formatCurrency(cart.pricing.total)}</span>
+                  </div>
+                </div>
+
+                {/* Action Buttons */}
+                <div className="p-4 space-y-2">
+                  <Button
+                    onClick={handleCheckout}
+                    disabled={disableCheckout || cart.items.length === 0}
+                    className={cn('w-full bg-accent-500 text-white hover:bg-accent-600', checkoutButtonClassName)}
+                    size="lg"
+                  >
+                    <Package className="h-5 w-5" />
+                    {checkoutButtonText}
+                  </Button>
+                  <Button
+                    onClick={handleContinueShopping}
+                    variant="outline"
+                    className={cn('w-full border-gray-300 text-gray-600 hover:bg-gray-100', continueShoppingButtonClassName)}
+                    size="lg"
+                  >
+                    {continueShoppingText}
+                  </Button>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Checkout Modal */}
+      <Checkout
+        isOpen={isCheckoutOpen}
+        onSuccess={() => onClose()}
+        onClose={() => setIsCheckoutOpen(false)}
+      />
+    </>
+  );
+}

package/src/components/ui/badge.tsx

@@ -0,0 +1,37 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
+

package/src/components/ui/button.tsx

@@ -0,0 +1,71 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Loader2 } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  loading = false,
+  children,
+  disabled,
+  type,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+    loading?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      disabled={disabled || loading}
+      type={type ?? "button"}
+      {...props}
+    >
+      {loading && <Loader2 className="size-4 animate-spin" />}
+      {children}
+    </Comp>
+  )
+}
+
+export { Button, buttonVariants }

package/src/components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/src/components/ui/form-input.tsx

@@ -0,0 +1,78 @@
+/**
+ * FormInput Component
+ *
+ * A styled input field with label, error handling, and optional icon.
+ */
+
+import React from 'react';
+import { cn } from '../../lib/utils';
+
+export interface FormInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  /** Input label */
+  label?: string;
+  /** Error message to display */
+  error?: string;
+  /** Optional icon to display inside the input */
+  icon?: React.ReactNode;
+  /** Callback when input value changes */
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  /** Additional CSS class for the container */
+  containerClassName?: string;
+}
+
+export const FormInput = React.forwardRef<HTMLInputElement, FormInputProps>(
+  (
+    {
+      label,
+      error,
+      icon,
+      className,
+      containerClassName,
+      required,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div className={cn('w-full', containerClassName)}>
+        {label && (
+          <label className="mb-1.5 block text-sm font-medium text-gray-700">
+            {label}
+            {required && <span className="ml-1 text-red-600">*</span>}
+          </label>
+        )}
+        <div className="relative">
+          {icon && (
+            <div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
+              {icon}
+            </div>
+          )}
+          <input
+            ref={ref}
+            disabled={disabled}
+            className={cn(
+              'w-full rounded-lg border px-3 py-2.5 text-sm transition-colors',
+              'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50',
+              icon && 'pl-10',
+              error
+                ? 'border-red-500 focus:border-red-500 focus:ring-red-500'
+                : 'border-gray-300 focus:border-blue-500',
+              disabled && 'bg-gray-50 text-gray-500 cursor-not-allowed',
+              className
+            )}
+            {...props}
+          />
+        </div>
+        {error && (
+          <p className="mt-1.5 text-sm text-red-600" role="alert">
+            {error}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+FormInput.displayName = 'FormInput';

package/src/components/ui/form-select.tsx

@@ -0,0 +1,73 @@
+/**
+ * FormSelect Component
+ *
+ * A styled select dropdown with label and error handling.
+ */
+
+import React from 'react';
+import { cn } from '../../lib/utils';
+
+export interface FormSelectProps
+  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> {
+  /** Select label */
+  label?: string;
+  /** Error message to display */
+  error?: string;
+  /** Callback when select value changes */
+  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  /** Additional CSS class for the container */
+  containerClassName?: string;
+}
+
+export const FormSelect = React.forwardRef<HTMLSelectElement, FormSelectProps>(
+  (
+    {
+      label,
+      error,
+      className,
+      containerClassName,
+      required,
+      disabled,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div className={cn('w-full', containerClassName)}>
+        {label && (
+          <label className="mb-1.5 block text-sm font-medium text-gray-700">
+            {label}
+            {required && <span className="ml-1 text-red-600">*</span>}
+          </label>
+        )}
+        <select
+          ref={ref}
+          disabled={disabled}
+          className={cn(
+            'w-full rounded-lg border px-3 py-2.5 text-sm transition-colors',
+            'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50',
+            'appearance-none bg-white',
+            'bg-[url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'12\' height=\'12\' viewBox=\'0 0 12 12\'%3E%3Cpath fill=\'%23666\' d=\'M6 9L1 4h10z\'/%3E%3C/svg%3E")] bg-no-repeat bg-[right_0.75rem_center]',
+            'pr-10',
+            error
+              ? 'border-red-500 focus:border-red-500 focus:ring-red-500'
+              : 'border-gray-300 focus:border-blue-500',
+            disabled && 'bg-gray-50 text-gray-500 cursor-not-allowed',
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </select>
+        {error && (
+          <p className="mt-1.5 text-sm text-red-600" role="alert">
+            {error}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+FormSelect.displayName = 'FormSelect';