@mohasinac/appkit 2.1.3 → 2.3.0

package/src/features/products/components/BidHistory.tsx

@@ -1,83 +0,0 @@
-import React from "react";
-import { Span, Text } from "../../../ui";
-
-export interface BidHistoryEntry {
-  id: string;
-  bidderId: string;
-  bidderName?: string;
-  amount: number;
-  placedAt: string;
-}
-
-export interface BidHistoryProps {
-  isLoading?: boolean;
-  isEmpty?: boolean;
-  /** Render the full list — caller owns layout */
-  renderList?: () => React.ReactNode;
-  /** Render a single bid row */
-  renderBid?: (bid: BidHistoryEntry, index: number) => React.ReactNode;
-  bids?: BidHistoryEntry[];
-  renderEmpty?: () => React.ReactNode;
-  renderSkeleton?: () => React.ReactNode;
-  labels?: {
-    title?: string;
-    noHistory?: string;
-    bidder?: string;
-    amount?: string;
-    time?: string;
-  };
-  className?: string;
-}
-
-export function BidHistory({
-  isLoading = false,
-  isEmpty = false,
-  renderList,
-  renderBid,
-  bids = [],
-  renderEmpty,
-  renderSkeleton,
-  labels = {},
-  className = "",
-}: BidHistoryProps) {
-  if (isLoading) {
-    if (renderSkeleton) return <>{renderSkeleton()}</>;
-    return (
-      <div className="animate-pulse space-y-2">
-        {Array.from({ length: 3 }).map((_, i) => (
-          <div key={i} className="h-10 rounded-lg bg-neutral-100" />
-        ))}
-      </div>
-    );
-  }
-
-  if (isEmpty) {
-    if (renderEmpty) return <>{renderEmpty()}</>;
-    return (
-      <Text variant="secondary" size="sm" className="py-4">
-        {labels.noHistory ?? "No bids yet."}
-      </Text>
-    );
-  }
-
-  if (renderList) return <div className={className}>{renderList()}</div>;
-
-  return (
-    <div className={`space-y-2 ${className}`}>
-      {bids.map((bid, i) =>
-        renderBid ? (
-          <React.Fragment key={bid.id}>{renderBid(bid, i)}</React.Fragment>
-        ) : (
-          <div
-            key={bid.id}
-            className="flex items-center justify-between p-3 rounded-lg border text-sm"
-          >
-            <Span>{bid.bidderName ?? bid.bidderId}</Span>
-            <Span className="font-medium">{bid.amount}</Span>
-            <Span className="text-neutral-500">{bid.placedAt}</Span>
-          </div>
-        ),
-      )}
-    </div>
-  );
-}

package/src/features/products/components/BuyBar.tsx

@@ -1,36 +0,0 @@
-"use client";
-
-import React from "react";
-import { Div } from "../../../ui";
-
-export interface BuyBarProps {
-  children: React.ReactNode;
-  /** Extra classes on the bar wrapper */
-  className?: string;
-}
-
-/**
- * BuyBar — sticky mobile purchase action bar.
- *
- * Fixed above the bottom navigation (`bottom-16`) on mobile screens.
- * Hidden on `lg:` and above — desktop uses inline CTAs on the PDP.
- *
- * @example
- * ```tsx
- * <BuyBar>
- *   <WishlistButton productId={product.id} />
- *   <AddToCartButton productId={product.id} className="flex-1" />
- * </BuyBar>
- * ```
- */
-export function BuyBar({ children, className }: BuyBarProps) {
-  return (
-    <Div
-      className={`fixed bottom-16 inset-x-0 z-40 flex items-center gap-2 px-4 py-3 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm border-t border-zinc-100 dark:border-zinc-800 lg:hidden pb-[env(safe-area-inset-bottom)]${className ? ` ${className}` : ""}`}
-      role="region"
-      aria-label="Purchase actions"
-    >
-      {children}
-    </Div>
-  );
-}

package/src/features/products/components/MakeOfferForm.tsx

@@ -1,43 +0,0 @@
-import React from "react";
-
-export interface MakeOfferFormProps {
-  listedPrice?: number;
-  isLoading?: boolean;
-  isSubmitted?: boolean;
-  /** Render the offer amount input */
-  renderInput?: () => React.ReactNode;
-  /** Render the create / submit action button */
-  renderAction?: () => React.ReactNode;
-  /** Render terms acceptance checkbox or note */
-  renderTerms?: () => React.ReactNode;
-  /** Render success confirmation after offer is placed */
-  renderSuccess?: () => React.ReactNode;
-  /** Render auth gate when user is not authenticated */
-  renderAuthGate?: () => React.ReactNode;
-  /** Render validation error message */
-  renderError?: () => React.ReactNode;
-  className?: string;
-}
-
-export function MakeOfferForm({
-  isSubmitted = false,
-  renderInput,
-  renderAction,
-  renderTerms,
-  renderSuccess,
-  renderAuthGate,
-  renderError,
-  className = "",
-}: MakeOfferFormProps) {
-  if (renderAuthGate) return <>{renderAuthGate()}</>;
-  if (isSubmitted && renderSuccess) return <>{renderSuccess()}</>;
-
-  return (
-    <div className={`space-y-4 ${className}`}>
-      {renderError?.()}
-      {renderInput?.()}
-      {renderTerms?.()}
-      {renderAction?.()}
-    </div>
-  );
-}

package/src/features/products/components/PlaceBidForm.tsx

@@ -1,42 +0,0 @@
-import React from "react";
-
-export interface PlaceBidFormProps {
-  currentBid?: number;
-  minBidIncrement?: number;
-  isLoading?: boolean;
-  /** Render the bid amount input field */
-  renderInput?: () => React.ReactNode;
-  /** Render the submit button */
-  renderAction?: () => React.ReactNode;
-  /** Render the current bid / min bid info row */
-  renderBidInfo?: () => React.ReactNode;
-  /** Render an error message */
-  renderError?: () => React.ReactNode;
-  /** Render auth gate when user is not logged in */
-  renderAuthGate?: () => React.ReactNode;
-  /** Render countdown timer for auction end */
-  renderCountdown?: () => React.ReactNode;
-  className?: string;
-}
-
-export function PlaceBidForm({
-  renderInput,
-  renderAction,
-  renderBidInfo,
-  renderError,
-  renderAuthGate,
-  renderCountdown,
-  className = "",
-}: PlaceBidFormProps) {
-  if (renderAuthGate) return <>{renderAuthGate()}</>;
-
-  return (
-    <div className={`space-y-4 ${className}`}>
-      {renderCountdown?.()}
-      {renderBidInfo?.()}
-      {renderError?.()}
-      {renderInput?.()}
-      {renderAction?.()}
-    </div>
-  );
-}

package/src/features/products/components/PreOrderDetailView.tsx

@@ -1,50 +0,0 @@
-import React from "react";
-
-/**
- * PreOrderDetailView — shell for pre-order product detail pages.
- * Same slot structure as ProductDetailView; separate component so the
- * pre-order UX can diverge without coupling to the standard detail layout.
- */
-export interface PreOrderDetailViewProps {
-  isLoading?: boolean;
-  renderBreadcrumb?: () => React.ReactNode;
-  renderGallery?: (isLoading: boolean) => React.ReactNode;
-  renderInfo?: (isLoading: boolean) => React.ReactNode;
-  renderBuyBar?: () => React.ReactNode;
-  renderTabs?: () => React.ReactNode;
-  renderRelated?: () => React.ReactNode;
-  renderSkeleton?: () => React.ReactNode;
-  className?: string;
-}
-
-export function PreOrderDetailView({
-  isLoading = false,
-  renderBreadcrumb,
-  renderGallery,
-  renderInfo,
-  renderBuyBar,
-  renderTabs,
-  renderRelated,
-  renderSkeleton,
-  className = "",
-}: PreOrderDetailViewProps) {
-  if (isLoading) {
-    if (renderSkeleton) return <>{renderSkeleton()}</>;
-    return <div className="animate-pulse min-h-screen" />;
-  }
-
-  return (
-    <div className={className}>
-      {renderBreadcrumb?.()}
-      <div className="flex gap-8 my-6">
-        <div className="w-1/2">{renderGallery?.(isLoading)}</div>
-        <div className="flex-1">
-          {renderInfo?.(isLoading)}
-          {renderBuyBar?.()}
-        </div>
-      </div>
-      {renderTabs?.()}
-      {renderRelated?.()}
-    </div>
-  );
-}

package/src/features/products/components/PreOrdersView.tsx

@@ -1,39 +0,0 @@
-"use client";
-
-import React from "react";
-import { Div, Heading } from "../../../ui";
-
-export interface PreOrdersViewProps {
-  labels?: { title?: string; emptyText?: string };
-  renderSearch?: (value: string, onChange: (v: string) => void) => React.ReactNode;
-  renderFilters?: () => React.ReactNode;
-  renderGrid: (isLoading: boolean) => React.ReactNode;
-  renderPagination?: (total: number) => React.ReactNode;
-  total?: number;
-  isLoading?: boolean;
-  className?: string;
-}
-
-export function PreOrdersView({
-  labels = {},
-  renderSearch,
-  renderFilters,
-  renderGrid,
-  renderPagination,
-  total = 0,
-  isLoading = false,
-  className = "",
-}: PreOrdersViewProps) {
-  const [search, setSearch] = React.useState("");
-  return (
-    <Div className={className}>
-      {labels.title && (
-        <Heading level={1} className="text-2xl font-bold mb-6">{labels.title}</Heading>
-      )}
-      {renderSearch?.(search, setSearch)}
-      {renderFilters?.()}
-      {renderGrid(isLoading)}
-      {renderPagination?.(total)}
-    </Div>
-  );
-}

package/src/features/products/components/ProductDetailView.tsx

@@ -1,52 +0,0 @@
-"use client";
-
-import React from "react";
-import { Div, Grid } from "../../../ui";
-
-export interface ProductDetailViewProps {
-  labels?: { title?: string };
-  renderGallery?: (isLoading: boolean) => React.ReactNode;
-  renderInfo?: (isLoading: boolean) => React.ReactNode;
-  /** Sticky actions sidebar (desktop col 3). Also used for mobile BuyBar. */
-  renderActions?: () => React.ReactNode;
-  renderTabs?: () => React.ReactNode;
-  renderRelated?: () => React.ReactNode;
-  renderBreadcrumb?: () => React.ReactNode;
-  renderSkeleton?: () => React.ReactNode;
-  renderNotFound?: () => React.ReactNode;
-  isLoading?: boolean;
-  className?: string;
-}
-
-export function ProductDetailView({
-  renderBreadcrumb,
-  renderGallery,
-  renderInfo,
-  renderActions,
-  renderTabs,
-  renderRelated,
-  renderSkeleton,
-  renderNotFound,
-  isLoading = false,
-  className = "",
-}: ProductDetailViewProps) {
-  if (isLoading && renderSkeleton) {
-    return <>{renderSkeleton()}</>;
-  }
-  if (renderNotFound) {
-    return <>{renderNotFound()}</>;
-  }
-  return (
-    <Div className={className}>
-      {renderBreadcrumb?.()}
-      {/* Responsive 3-column grid: gallery | info | actions-sidebar */}
-      <Grid cols="productDetailTriplet" className="mt-6">
-        <Div>{renderGallery?.(isLoading)}</Div>
-        <Div>{renderInfo?.(isLoading)}</Div>
-        {renderActions?.()}
-      </Grid>
-      {renderTabs?.()}
-      {renderRelated?.()}
-    </Div>
-  );
-}

package/src/features/products/components/ProductFeatureBadges.tsx

@@ -1,192 +0,0 @@
-"use client";
-
-import { type ReactNode } from "react";
-import { Row, Span } from "../../../ui";
-
-interface ProductFeatureBadgeLabels {
-  featured: string;
-  fasterDelivery: string;
-  ratedSeller: string;
-  condition: string;
-  conditionNew: string;
-  conditionUsed: string;
-  conditionBroken: string;
-  conditionRefurbished: string;
-  returnable: string;
-  freeShipping: string;
-  codAvailable: string;
-  wishlistCount: (count: number) => string;
-  categoryProductCount: (count: string, category: string) => string;
-}
-
-interface ProductFeatureBadgesProps {
-  featured?: boolean;
-  fasterDelivery?: boolean;
-  ratedSeller?: boolean;
-  condition?: string;
-  returnable?: boolean;
-  freeShipping?: boolean;
-  wishlistCount?: number;
-  categoryProductCount?: number;
-  categoryName?: string;
-  codAvailable?: boolean;
-  labels: ProductFeatureBadgeLabels;
-  formatCount?: (value: number) => string;
-  categoryBadgeClassName?: string;
-}
-
-interface FeatureBadge {
-  key: string;
-  icon: ReactNode;
-  label: string;
-  colorClass: string;
-  bgClass: string;
-}
-
-export function ProductFeatureBadges({
-  featured,
-  fasterDelivery,
-  ratedSeller,
-  condition,
-  returnable,
-  freeShipping,
-  wishlistCount,
-  categoryProductCount,
-  categoryName,
-  codAvailable,
-  labels,
-  formatCount,
-  categoryBadgeClassName,
-}: ProductFeatureBadgesProps) {
-  const badges: FeatureBadge[] = [];
-
-  if (featured) {
-    badges.push({
-      key: "featured",
-      icon: <Span className="text-xs">★</Span>,
-      label: labels.featured,
-      colorClass: "text-amber-700 dark:text-amber-300",
-      bgClass:
-        "bg-amber-50 dark:bg-amber-900/30 border-amber-200 dark:border-amber-800",
-    });
-  }
-
-  if (fasterDelivery) {
-    badges.push({
-      key: "fasterDelivery",
-      icon: <Span className="text-xs">⚡</Span>,
-      label: labels.fasterDelivery,
-      colorClass: "text-orange-700 dark:text-orange-300",
-      bgClass:
-        "bg-orange-50 dark:bg-orange-900/30 border-orange-200 dark:border-orange-800",
-    });
-  }
-
-  if (ratedSeller) {
-    badges.push({
-      key: "ratedSeller",
-      icon: <Span className="text-xs">✓</Span>,
-      label: labels.ratedSeller,
-      colorClass: "text-primary",
-      bgClass: "bg-primary/5 dark:bg-primary/10 border-primary/20",
-    });
-  }
-
-  if (condition) {
-    const conditionLabel =
-      condition === "new"
-        ? labels.conditionNew
-        : condition === "used"
-          ? labels.conditionUsed
-          : condition === "broken"
-            ? labels.conditionBroken
-            : condition === "refurbished"
-              ? labels.conditionRefurbished
-              : labels.conditionNew;
-
-    badges.push({
-      key: "condition",
-      icon: <Span className="text-xs">▣</Span>,
-      label: `${labels.condition}: ${conditionLabel}`,
-      colorClass: "text-primary",
-      bgClass:
-        "bg-primary/5 dark:bg-primary/10 border-primary/20 dark:border-primary/30",
-    });
-  }
-
-  if (returnable && condition === "new") {
-    badges.push({
-      key: "returnable",
-      icon: <Span className="text-xs">↺</Span>,
-      label: labels.returnable,
-      colorClass: "text-teal-700 dark:text-teal-300",
-      bgClass:
-        "bg-teal-50 dark:bg-teal-900/30 border-teal-200 dark:border-teal-800",
-    });
-  }
-
-  if (freeShipping) {
-    badges.push({
-      key: "freeShipping",
-      icon: <Span className="text-xs">🚚</Span>,
-      label: labels.freeShipping,
-      colorClass: "text-emerald-700 dark:text-emerald-300",
-      bgClass:
-        "bg-emerald-50 dark:bg-emerald-900/30 border-emerald-200 dark:border-emerald-800",
-    });
-  }
-
-  if (codAvailable) {
-    badges.push({
-      key: "cod",
-      icon: <Span className="text-xs">₹</Span>,
-      label: labels.codAvailable,
-      colorClass: "text-purple-700 dark:text-purple-300",
-      bgClass:
-        "bg-purple-50 dark:bg-purple-900/30 border-purple-200 dark:border-purple-800",
-    });
-  }
-
-  if (wishlistCount && wishlistCount > 0) {
-    badges.push({
-      key: "wishlist",
-      icon: <Span className="text-xs">♥</Span>,
-      label: labels.wishlistCount(wishlistCount),
-      colorClass: "text-pink-700 dark:text-pink-300",
-      bgClass:
-        "bg-pink-50 dark:bg-pink-900/30 border-pink-200 dark:border-pink-800",
-    });
-  }
-
-  if (categoryProductCount && categoryProductCount > 0 && categoryName) {
-    const formattedCount = formatCount
-      ? formatCount(categoryProductCount)
-      : String(categoryProductCount);
-
-    badges.push({
-      key: "categoryCount",
-      icon: <Span className="text-xs">▦</Span>,
-      label: labels.categoryProductCount(formattedCount, categoryName),
-      colorClass: "text-zinc-700 dark:text-zinc-300",
-      bgClass:
-        categoryBadgeClassName ??
-        "bg-zinc-50 dark:bg-zinc-900 border-zinc-200 dark:border-zinc-700",
-    });
-  }
-
-  if (badges.length === 0) return null;
-
-  return (
-    <Row wrap gap="sm">
-      {badges.map((badge) => (
-        <Span
-          key={badge.key}
-          className={`inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium ${badge.bgClass} ${badge.colorClass}`}
-        >
-          <Span aria-hidden="true">{badge.icon}</Span>
-          {badge.label}
-        </Span>
-      ))}
-    </Row>
-  );
-}