@mohasinac/appkit 2.1.3 → 2.3.0

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

@@ -1,424 +0,0 @@
-import React from "react";
-import type { LayoutSlots } from "../../../contracts";
-import { Button, Div, Grid, Span, Text } from "../../../ui";
-import type { ViewMode } from "../../../ui";
-import type { ProductItem } from "../types";
-import { formatCurrency } from "../../../utils/number.formatter";
-
-// ─── ProductCard ──────────────────────────────────────────────────────────────
-
-interface ProductCardProps<T extends ProductItem = ProductItem> {
-  product: T;
-  onClick?: (product: T) => void;
-  onAddToWishlist?: (productId: string) => void;
-  isWishlisted?: boolean;
-  className?: string;
-}
-
-export function ProductCard<T extends ProductItem = ProductItem>({
-  product,
-  onClick,
-  onAddToWishlist,
-  isWishlisted,
-  className = "",
-}: ProductCardProps<T>) {
-  const discount =
-    product.originalPrice && product.originalPrice > product.price
-      ? Math.round(
-          ((product.originalPrice - product.price) / product.originalPrice) *
-            100,
-        )
-      : null;
-
-  return (
-    <Div
-      role={onClick ? "button" : undefined}
-      tabIndex={onClick ? 0 : undefined}
-      onKeyDown={
-        onClick
-          ? (e) => (e.key === "Enter" || e.key === " ") && onClick(product)
-          : undefined
-      }
-      onClick={onClick ? () => onClick(product) : undefined}
-      className={`group relative flex flex-col h-full overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-sm transition hover:shadow-md ${onClick ? "cursor-pointer" : ""} ${className}`}
-    >
-      <Div className="relative aspect-square overflow-hidden bg-neutral-100">
-        {product.mainImage ? (
-          <Div
-            role="img"
-            aria-label={product.title}
-            className="h-full w-full bg-center bg-cover transition-transform duration-300 group-hover:scale-105"
-            style={{ backgroundImage: `url(${product.mainImage})` }}
-          />
-        ) : (
-          <Div className="h-full w-full bg-neutral-200" />
-        )}
-        {discount && (
-          <Span className="absolute left-2 top-2 rounded-full bg-red-500 px-2 py-0.5 text-xs font-bold text-white">
-            -{discount}%
-          </Span>
-        )}
-        {product.isAuction && (
-          <Span className="absolute right-2 top-2 rounded-full bg-amber-500 px-2 py-0.5 text-xs font-bold text-white">
-            Auction
-          </Span>
-        )}
-        {onAddToWishlist && (
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            onClick={(e) => {
-              e.stopPropagation();
-              onAddToWishlist(product.id);
-            }}
-            aria-label={
-              isWishlisted ? "Remove from wishlist" : "Add to wishlist"
-            }
-            className="absolute bottom-2 right-2 flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-600 shadow transition hover:bg-white hover:text-red-500"
-          >
-            {isWishlisted ? "♥" : "♡"}
-          </Button>
-        )}
-      </Div>
-      <Div className="flex flex-1 flex-col p-3">
-        <Text className="line-clamp-2 text-sm font-medium text-neutral-900">
-          {product.title}
-        </Text>
-        {product.sellerName && (
-          <Text className="mt-0.5 text-xs text-neutral-400">
-            {product.sellerName}
-          </Text>
-        )}
-        <Div className="mt-2 flex items-baseline gap-2">
-          <Span className="font-semibold text-neutral-900">
-            {formatCurrency(product.price, product.currency ?? "INR")}
-          </Span>
-          {product.originalPrice && (
-            <Span className="text-xs text-neutral-400 line-through">
-              {formatCurrency(product.originalPrice, product.currency ?? "INR")}
-            </Span>
-          )}
-        </Div>
-        {product.rating !== undefined && (
-          <Div className="mt-1 flex items-center gap-1">
-            <Span className="text-xs text-yellow-500">★</Span>
-            <Span className="text-xs text-neutral-500">
-              {product.rating.toFixed(1)}
-              {product.reviewCount ? ` (${product.reviewCount})` : ""}
-            </Span>
-          </Div>
-        )}
-      </Div>
-    </Div>
-  );
-}
-
-// ─── ProductCardContext (passed to renderCard slot) ───────────────────────────
-
-export interface ProductCardContext<T extends ProductItem = ProductItem> {
-  onClick?: (product: T) => void;
-  onWishlistToggle?: (productId: string) => void;
-  isWishlisted: boolean;
-}
-
-// ─── ProductGrid ──────────────────────────────────────────────────────────────
-
-interface ProductGridProps<T extends ProductItem = ProductItem> {
-  products: T[];
-  /**
-   * Custom card renderer. When provided, replaces the built-in `ProductCard`.
-   * Receives the item and a context object with click/wishlist handlers.
-   *
-   * @example
-   * <ProductGrid<ProductDocument>
-   *   products={docs}
-   *   renderCard={(p, ctx) => (
-   *     <MyRichCard product={p} onWishlist={ctx.onWishlistToggle} />
-   *   )}
-   * />
-   */
-  renderCard?: (product: T, ctx: ProductCardContext<T>) => React.ReactNode;
-  onProductClick?: (product: T) => void;
-  onWishlistToggle?: (productId: string) => void;
-  wishlistedIds?: Set<string>;
-  /** Text shown when the list is empty and no `emptySlot` is provided. */
-  emptyLabel?: string;
-  /** Replaces the default empty-state paragraph. */
-  emptySlot?: React.ReactNode;
-  /** Rendered above the grid (e.g. filter bar, heading). */
-  headerSlot?: React.ReactNode;
-  /** Rendered below the grid (e.g. pagination). */
-  footerSlot?: React.ReactNode;
-  className?: string;
-  /**
-   * Render-prop slot overrides from a `FeatureExtension`.
-   * When both `slots` and the explicit `renderCard`/`headerSlot` props are
-   * provided, the explicit props take precedence.
-   *
-   * @example
-   * <ProductGrid products={products} {...extension.slots} />
-   * // or
-   * <ProductGrid products={products} slots={extension.slots} />
-   */
-  slots?: LayoutSlots<T>;
-  total?: number;
-  currentPage?: number;
-  totalPages?: number;
-  /**
-   * Layout mode for the product listing.
-   * - `"card"`  — fixed breakpoint columns (2→3→4→5) per Section 34 spec
-   * - `"fluid"` — CSS auto-fill columns, min 220 px each
-   * - `"list"`  — compact horizontal rows (thumbnail + title + price)
-   * @default "card"
-   */
-  view?: ViewMode;
-}
-
-// ─── Grid class maps ─────────────────────────────────────────────────────────
-
-const GRID_CLASSES: Record<"card", string> = {
-  card: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4",
-};
-
-// ─── ProductListRow (list-mode row) ──────────────────────────────────────────
-
-interface ProductListRowProps<T extends ProductItem = ProductItem> {
-  product: T;
-  onClick?: (product: T) => void;
-  onAddToWishlist?: (productId: string) => void;
-  isWishlisted?: boolean;
-}
-
-function ProductListRow<T extends ProductItem = ProductItem>({
-  product,
-  onClick,
-  onAddToWishlist,
-  isWishlisted,
-}: ProductListRowProps<T>) {
-  const discount =
-    product.originalPrice && product.originalPrice > product.price
-      ? Math.round(
-          ((product.originalPrice - product.price) / product.originalPrice) *
-            100,
-        )
-      : null;
-
-  return (
-    <Div
-      role={onClick ? "button" : undefined}
-      tabIndex={onClick ? 0 : undefined}
-      onKeyDown={
-        onClick
-          ? (e) => (e.key === "Enter" || e.key === " ") && onClick(product)
-          : undefined
-      }
-      onClick={onClick ? () => onClick(product) : undefined}
-      className={[
-        "flex items-center gap-3 p-3 rounded-lg",
-        "border-b border-zinc-100 dark:border-zinc-800 last:border-0",
-        "hover:bg-zinc-50 dark:hover:bg-zinc-800/60 transition-colors",
-        onClick ? "cursor-pointer" : "",
-      ]
-        .filter(Boolean)
-        .join(" ")}
-    >
-      {/* Thumbnail — 72×72 */}
-      <Div className="flex-shrink-0 w-[72px] h-[72px] rounded-lg overflow-hidden bg-neutral-100 dark:bg-zinc-800">
-        {product.mainImage ? (
-          <Div
-            role="img"
-            aria-label={product.title}
-            className="w-full h-full bg-center bg-cover"
-            style={{ backgroundImage: `url(${product.mainImage})` }}
-          />
-        ) : (
-          <Div className="w-full h-full bg-neutral-200 dark:bg-zinc-700" />
-        )}
-      </Div>
-
-      {/* Title — flex-1 */}
-      <Text className="flex-1 min-w-0 truncate text-sm font-medium text-neutral-900 dark:text-zinc-100">
-        {product.title}
-      </Text>
-
-      {/* Category — hidden on mobile */}
-      {product.categoryName && (
-        <Span className="hidden sm:block w-[110px] text-xs text-neutral-400 dark:text-zinc-500 truncate">
-          {product.categoryName}
-        </Span>
-      )}
-
-      {/* Rating — hidden on mobile */}
-      {product.rating !== undefined && (
-        <Span className="hidden sm:flex w-[72px] items-center gap-0.5 text-xs text-neutral-500">
-          <Span className="text-yellow-500">★</Span>
-          {product.rating.toFixed(1)}
-        </Span>
-      )}
-
-      {/* Price */}
-      <Div className="w-[80px] text-right flex-shrink-0">
-        <Span className="text-sm font-semibold text-neutral-900 dark:text-zinc-100">
-          {product.currency ?? "₹"}
-          {product.price.toLocaleString()}
-        </Span>
-        {discount && (
-          <Span className="block text-[10px] text-neutral-400 dark:text-zinc-500">
-            -{discount}%
-          </Span>
-        )}
-      </Div>
-
-      {/* Wishlist action */}
-      {onAddToWishlist && (
-        <Button
-          type="button"
-          variant="ghost"
-          size="sm"
-          onClick={(e) => {
-            e.stopPropagation();
-            onAddToWishlist(product.id);
-          }}
-          aria-label={isWishlisted ? "Remove from wishlist" : "Add to wishlist"}
-          className="flex-shrink-0 w-[36px] h-[36px] flex items-center justify-center rounded-lg text-neutral-400 hover:text-red-500 transition-colors"
-        >
-          {isWishlisted ? "♥" : "♡"}
-        </Button>
-      )}
-    </Div>
-  );
-}
-
-export function ProductGrid<T extends ProductItem = ProductItem>({
-  products,
-  renderCard,
-  onProductClick,
-  onWishlistToggle,
-  wishlistedIds,
-  emptyLabel = "No products found",
-  emptySlot,
-  headerSlot,
-  footerSlot,
-  className = "",
-  slots,
-  total = 0,
-  currentPage = 1,
-  totalPages = 1,
-  view = "card",
-}: ProductGridProps<T>) {
-  const isEmpty = products.length === 0;
-
-  // Slot resolution: explicit props win over `slots` object
-  const resolvedHeader =
-    headerSlot ??
-    (slots?.renderHeader
-      ? (slots.renderHeader({ total }) as React.ReactNode)
-      : null);
-  const resolvedFooter =
-    footerSlot ??
-    (slots?.renderFooter
-      ? (slots.renderFooter({
-          page: currentPage,
-          totalPages,
-        }) as React.ReactNode)
-      : null);
-  const resolvedEmpty =
-    emptySlot ??
-    (slots?.renderEmptyState
-      ? (slots.renderEmptyState() as React.ReactNode)
-      : null);
-
-  const renderItems = () => {
-    if (view === "list") {
-      return (
-        <Div
-          className={`flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800 ${className}`}
-        >
-          {products.map((p) => (
-            <ProductListRow<T>
-              key={p.id}
-              product={p}
-              onClick={onProductClick}
-              onAddToWishlist={onWishlistToggle}
-              isWishlisted={wishlistedIds?.has(p.id) ?? false}
-            />
-          ))}
-        </Div>
-      );
-    }
-
-    if (view === "fluid") {
-      return (
-        <Grid cols="productCardsCompact" className={className}>
-          {products.map((p, i) => {
-            const ctx: ProductCardContext<T> = {
-              onClick: onProductClick,
-              onWishlistToggle,
-              isWishlisted: wishlistedIds?.has(p.id) ?? false,
-            };
-            const cardRenderer = renderCard ?? slots?.renderCard;
-            return cardRenderer ? (
-              <React.Fragment key={p.id}>
-                {cardRenderer === renderCard
-                  ? (renderCard as NonNullable<typeof renderCard>)(p, ctx)
-                  : (slots!.renderCard!(p, i) as React.ReactNode)}
-              </React.Fragment>
-            ) : (
-              <ProductCard<T>
-                key={p.id}
-                product={p}
-                onClick={onProductClick}
-                onAddToWishlist={onWishlistToggle}
-                isWishlisted={ctx.isWishlisted}
-              />
-            );
-          })}
-        </Grid>
-      );
-    }
-
-    const gridClass = GRID_CLASSES.card;
-    return (
-      <Div className={`${gridClass} ${className}`}>
-        {products.map((p, i) => {
-          const ctx: ProductCardContext<T> = {
-            onClick: onProductClick,
-            onWishlistToggle,
-            isWishlisted: wishlistedIds?.has(p.id) ?? false,
-          };
-          const cardRenderer = renderCard ?? slots?.renderCard;
-          return cardRenderer ? (
-            <React.Fragment key={p.id}>
-              {cardRenderer === renderCard
-                ? (renderCard as NonNullable<typeof renderCard>)(p, ctx)
-                : (slots!.renderCard!(p, i) as React.ReactNode)}
-            </React.Fragment>
-          ) : (
-            <ProductCard<T>
-              key={p.id}
-              product={p}
-              onClick={onProductClick}
-              onAddToWishlist={onWishlistToggle}
-              isWishlisted={ctx.isWishlisted}
-            />
-          );
-        })}
-      </Div>
-    );
-  };
-
-  return (
-    <Div>
-      {resolvedHeader}
-      {isEmpty
-        ? (resolvedEmpty ?? (
-            <Text className="py-12 text-center text-sm text-neutral-500">
-              {emptyLabel}
-            </Text>
-          ))
-        : renderItems()}
-      {resolvedFooter}
-    </Div>
-  );
-}

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

@@ -1,44 +0,0 @@
-import React from "react";
-
-export interface ProductInfoProps {
-  isLoading?: boolean;
-  /** Title, condition badge, brand */
-  renderTitle?: (isLoading: boolean) => React.ReactNode;
-  /** Price + original price + discount badge */
-  renderPrice?: (isLoading: boolean) => React.ReactNode;
-  /** Feature / promo badges row */
-  renderBadges?: () => React.ReactNode;
-  /** Short description / highlights */
-  renderDescription?: () => React.ReactNode;
-  /** Variant selectors (size, colour, etc.) */
-  renderVariants?: () => React.ReactNode;
-  /** Seller info row */
-  renderSeller?: () => React.ReactNode;
-  /** Rating / review summary row */
-  renderRating?: () => React.ReactNode;
-  className?: string;
-}
-
-export function ProductInfo({
-  isLoading = false,
-  renderTitle,
-  renderPrice,
-  renderBadges,
-  renderDescription,
-  renderVariants,
-  renderSeller,
-  renderRating,
-  className = "",
-}: ProductInfoProps) {
-  return (
-    <div className={`space-y-4 ${className}`}>
-      {renderTitle?.(isLoading)}
-      {renderRating?.()}
-      {renderPrice?.(isLoading)}
-      {renderBadges?.()}
-      {renderVariants?.()}
-      {renderDescription?.()}
-      {renderSeller?.()}
-    </div>
-  );
-}

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

@@ -1,84 +0,0 @@
-import React from "react";
-
-export interface ProductTab {
-  value: string;
-  label: string;
-}
-
-export interface ProductTabsProps {
-  /** Render the description tab content */
-  renderDescription?: () => React.ReactNode;
-  /** Render the specifications / details tab content */
-  renderSpecs?: () => React.ReactNode;
-  /** Render the reviews tab content */
-  renderReviews?: () => React.ReactNode;
-  /** Render custom extra tabs; provide renderTabContent for each */
-  extraTabs?: ProductTab[];
-  renderExtraTab?: (value: string) => React.ReactNode;
-  /** Render the tab strip itself — when provided, replaces the default tab bar */
-  renderTabBar?: (
-    activeTab: string,
-    onChange: (t: string) => void,
-    tabs: ProductTab[],
-  ) => React.ReactNode;
-  defaultTab?: string;
-  className?: string;
-}
-
-const DEFAULT_TABS: ProductTab[] = [
-  { value: "description", label: "Description" },
-  { value: "specs", label: "Specifications" },
-  { value: "reviews", label: "Reviews" },
-];
-
-export function ProductTabs({
-  renderDescription,
-  renderSpecs,
-  renderReviews,
-  extraTabs = [],
-  renderExtraTab,
-  renderTabBar,
-  defaultTab = "description",
-  className = "",
-}: ProductTabsProps) {
-  const [activeTab, setActiveTab] = React.useState(defaultTab);
-
-  const allTabs: ProductTab[] = [
-    ...(renderDescription
-      ? [{ value: "description", label: "Description" }]
-      : []),
-    ...(renderSpecs ? [{ value: "specs", label: "Specifications" }] : []),
-    ...(renderReviews ? [{ value: "reviews", label: "Reviews" }] : []),
-    ...extraTabs,
-  ];
-
-  const tabs = allTabs.length > 0 ? allTabs : DEFAULT_TABS;
-
-  return (
-    <div className={className}>
-      {renderTabBar ? (
-        renderTabBar(activeTab, setActiveTab, tabs)
-      ) : (
-        <div className="flex gap-4 border-b mb-4">
-          {tabs.map((t) => (
-            <button
-              key={t.value}
-              onClick={() => setActiveTab(t.value)}
-              className={`pb-2 text-sm font-medium border-b-2 transition-colors ${
-                activeTab === t.value
-                  ? "border-current text-current"
-                  : "border-transparent text-neutral-500"
-              }`}
-            >
-              {t.label}
-            </button>
-          ))}
-        </div>
-      )}
-      {activeTab === "description" && renderDescription?.()}
-      {activeTab === "specs" && renderSpecs?.()}
-      {activeTab === "reviews" && renderReviews?.()}
-      {renderExtraTab?.(activeTab)}
-    </div>
-  );
-}

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

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

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

@@ -1,51 +0,0 @@
-import React from "react";
-import { Heading } from "../../../ui";
-
-export interface RelatedProductsProps {
-  isLoading?: boolean;
-  isEmpty?: boolean;
-  /** Render the product cards grid */
-  renderGrid?: () => React.ReactNode;
-  /** Render loading skeleton */
-  renderSkeleton?: () => React.ReactNode;
-  /** Section title — rendered above the grid when provided */
-  renderTitle?: () => React.ReactNode;
-  labels?: { title?: string };
-  className?: string;
-}
-
-export function RelatedProducts({
-  isLoading = false,
-  isEmpty = false,
-  renderGrid,
-  renderSkeleton,
-  renderTitle,
-  labels = {},
-  className = "",
-}: RelatedProductsProps) {
-  if (isLoading) {
-    if (renderSkeleton) return <>{renderSkeleton()}</>;
-    return (
-      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 animate-pulse">
-        {Array.from({ length: 4 }).map((_, i) => (
-          <div key={i} className="aspect-square rounded-xl bg-neutral-100" />
-        ))}
-      </div>
-    );
-  }
-
-  if (isEmpty) return null;
-
-  return (
-    <div className={`space-y-4 ${className}`}>
-      {renderTitle ? (
-        renderTitle()
-      ) : labels.title ? (
-        <Heading level={2} className="text-xl font-bold" variant="none">
-          {labels.title}
-        </Heading>
-      ) : null}
-      {renderGrid?.()}
-    </div>
-  );
-}

package/src/features/products/components/index.ts

@@ -1,28 +0,0 @@
-export { ProductCard, ProductGrid } from "./ProductGrid";
-export { ProductFeatureBadges } from "./ProductFeatureBadges";
-export { BuyBar } from "./BuyBar";
-export type { BuyBarProps } from "./BuyBar";
-export { ProductsView } from "./ProductsView";
-export type { ProductsViewProps } from "./ProductsView";
-export { AuctionsView } from "./AuctionsView";
-export type { AuctionsViewProps } from "./AuctionsView";
-export { ProductDetailView } from "./ProductDetailView";
-export type { ProductDetailViewProps } from "./ProductDetailView";
-export { AuctionDetailView } from "./AuctionDetailView";
-export type { AuctionDetailViewProps } from "./AuctionDetailView";
-export { PreOrdersView } from "./PreOrdersView";
-export type { PreOrdersViewProps } from "./PreOrdersView";
-export { PreOrderDetailView } from "./PreOrderDetailView";
-export type { PreOrderDetailViewProps } from "./PreOrderDetailView";
-export { ProductInfo } from "./ProductInfo";
-export type { ProductInfoProps } from "./ProductInfo";
-export { ProductTabs } from "./ProductTabs";
-export type { ProductTabsProps, ProductTab } from "./ProductTabs";
-export { BidHistory } from "./BidHistory";
-export type { BidHistoryProps, BidHistoryEntry } from "./BidHistory";
-export { PlaceBidForm } from "./PlaceBidForm";
-export type { PlaceBidFormProps } from "./PlaceBidForm";
-export { MakeOfferForm } from "./MakeOfferForm";
-export type { MakeOfferFormProps } from "./MakeOfferForm";
-export { RelatedProducts } from "./RelatedProducts";
-export type { RelatedProductsProps } from "./RelatedProducts";