@mohasinac/appkit 2.1.3 → 2.3.0

package/src/features/homepage/components/HeroCarousel.tsx

@@ -1,442 +0,0 @@
-"use client";
-
-import React, { useState, useEffect, useRef, useCallback } from "react";
-import { useTranslations } from "next-intl";
-import { useMediaQuery } from "../../../react";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Button, Div, Heading, Row, Section, Span, Text } from "../../../ui";
-import { MediaImage } from "../../media/MediaImage";
-import { MediaVideo } from "../../media/MediaVideo";
-import { useHeroCarousel } from "../hooks/useHeroCarousel";
-import type { CarouselSlide, CarouselSlideCard } from "../types/index";
-
-const { flex, position, homepage } = THEME_CONSTANTS;
-
-export interface HeroCarouselProps {
-  initialSlides?: CarouselSlide[];
-  /**
-   * Navigate to an internal path.
-   * Pass `useRouter().push` from your locale-aware router (e.g. `@/i18n/navigation`).
-   * Falls back to `window.location.href` assignment when omitted.
-   */
-  push?: (href: string) => void;
-}
-
-function navigate(href: string, push?: (href: string) => void) {
-  if (push) {
-    push(href);
-  } else {
-    window.location.href = href;
-  }
-}
-
-export function HeroCarousel({ initialSlides, push }: HeroCarouselProps = {}) {
-  const tLoading = useTranslations("loading");
-  const tA11y = useTranslations("accessibility");
-  const [currentSlide, setCurrentSlide] = useState(0);
-  const [isPaused, setIsPaused] = useState(false);
-  const sectionRef = useRef<HTMLElement>(null);
-  const slidesRef = useRef<HTMLDivElement>(null);
-  const isScrollingRef = useRef(false);
-  const isMobile = useMediaQuery("(max-width: 767px)");
-  const prefersReducedMotion = useMediaQuery(
-    "(prefers-reduced-motion: reduce)",
-  );
-
-  const { data, isLoading } = useHeroCarousel({ initialData: initialSlides });
-
-  const slides =
-    data
-      ?.filter((s) => s.active)
-      ?.sort((a, b) => a.order - b.order)
-      ?.slice(0, 5) || [];
-
-  const goToSlide = useCallback((index: number) => {
-    const el = slidesRef.current;
-    if (!el) return;
-    setCurrentSlide(index);
-    isScrollingRef.current = true;
-    el.scrollTo({ left: index * el.offsetWidth, behavior: "smooth" });
-    setTimeout(() => {
-      isScrollingRef.current = false;
-    }, 600);
-  }, []);
-
-  const goNext = useCallback(
-    () => goToSlide((currentSlide + 1) % slides.length),
-    [currentSlide, slides.length, goToSlide],
-  );
-
-  const goPrev = useCallback(
-    () => goToSlide((currentSlide - 1 + slides.length) % slides.length),
-    [currentSlide, slides.length, goToSlide],
-  );
-
-  const handleSlidesScroll = useCallback(() => {
-    if (isScrollingRef.current) return;
-    const el = slidesRef.current;
-    if (!el || el.offsetWidth === 0) return;
-    const idx = Math.round(el.scrollLeft / el.offsetWidth);
-    if (idx >= 0 && idx < slides.length) setCurrentSlide(idx);
-  }, [slides.length]);
-
-  useEffect(() => {
-    if (slides.length <= 1 || isPaused || prefersReducedMotion) return;
-    const interval = setInterval(goNext, 4000);
-    return () => clearInterval(interval);
-  }, [slides.length, isPaused, prefersReducedMotion, goNext]);
-
-  if (isLoading) {
-    return (
-      <Div
-        className={`relative w-full ${homepage.heroMinH} ${THEME_CONSTANTS.themed.bgTertiary} animate-pulse`}
-      >
-        <Div className={`${position.fill} ${flex.center}`}>
-          <Text variant="secondary">{tLoading("default")}</Text>
-        </Div>
-      </Div>
-    );
-  }
-
-  if (!slides || slides.length === 0) {
-    return null;
-  }
-
-  const getBackgroundStyle = (card: CarouselSlideCard) => {
-    const { type, value } = card.background;
-    if (type === "transparent") return { background: "transparent" };
-    if (type === "color") return { backgroundColor: value };
-    if (type === "gradient") return { background: value };
-    return {};
-  };
-
-  const getGridPosition = (card: CarouselSlideCard) => ({
-    gridRow: String(card.gridRow),
-    gridColumn: isMobile ? "1" : String(card.gridCol),
-  });
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "ArrowRight") goNext();
-    if (e.key === "ArrowLeft") goPrev();
-    if (e.key === " ") {
-      e.preventDefault();
-      setIsPaused((p) => !p);
-    }
-  };
-
-  return (
-    <Section
-      ref={sectionRef}
-      className={`relative w-full ${homepage.heroMinH} overflow-hidden`}
-      aria-roledescription="carousel"
-      aria-label={tA11y("heroCarouselAriaLabel")}
-      onKeyDown={handleKeyDown}
-      onMouseEnter={() => setIsPaused(true)}
-      onMouseLeave={() => setIsPaused(false)}
-      onFocus={() => setIsPaused(true)}
-      onBlur={() => setIsPaused(false)}
-      tabIndex={0}
-    >
-      <Div aria-live="polite" aria-atomic="true" className="sr-only">
-        {tA11y("heroCarouselSlideOf", {
-          current: currentSlide + 1,
-          total: slides.length,
-        })}
-      </Div>
-
-      {/* Snap Scroll Rail */}
-      <Div className={position.fill}>
-        <Div
-          ref={slidesRef}
-          onScroll={handleSlidesScroll}
-          className="flex h-full overflow-x-auto scroll-smooth snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-          style={{ gap: 0 }}
-        >
-          {slides.map((slide, slideIndex) => (
-            <Div
-              key={slide.id}
-              className="snap-start flex-none w-full relative self-stretch bg-zinc-900"
-            >
-              {/* Background Media */}
-              <Div className={position.fill}>
-                {slide.media.type === "image" ? (
-                  <MediaImage
-                    src={
-                      isMobile && slide.mobileMedia
-                        ? slide.mobileMedia.url
-                        : slide.media.url
-                    }
-                    alt={slide.media.alt}
-                    size="hero"
-                    priority={slideIndex === 0}
-                  />
-                ) : (
-                  <MediaVideo
-                    src={
-                      isMobile && slide.mobileMedia
-                        ? slide.mobileMedia.url
-                        : slide.media.url
-                    }
-                    thumbnailUrl={slide.media.thumbnail}
-                    alt={slide.media.alt}
-                    autoPlayMuted
-                    loop
-                    controls={false}
-                  />
-                )}
-                <Div className={`${position.fill} bg-black/10`} />
-              </Div>
-
-              {/* Overlay mode — centred text + optional button */}
-              {slide.overlay ? (
-                <Div
-                  className={`${position.fill} ${flex.center} flex-col text-center px-6 md:px-16 lg:px-32`}
-                >
-                  {slide.overlay.subtitle && (
-                    <Text className="stagger-1 text-xs md:text-sm !text-white/80 mb-1 md:mb-2 drop-shadow-sm uppercase tracking-widest">
-                      {slide.overlay.subtitle}
-                    </Text>
-                  )}
-                  {slide.overlay.title && (
-                    <Heading
-                      level={1}
-                      className="stagger-2 font-display text-4xl md:text-6xl lg:text-8xl !text-white drop-shadow-2xl mb-2 md:mb-4"
-                    >
-                      {slide.overlay.title}
-                    </Heading>
-                  )}
-                  {slide.overlay.description && (
-                    <Text className="stagger-3 text-sm md:text-lg lg:text-xl !text-white/90 mb-4 md:mb-8 drop-shadow-sm max-w-2xl mx-auto">
-                      {slide.overlay.description}
-                    </Text>
-                  )}
-                  {slide.overlay.button && (
-                    <Div className="stagger-4">
-                      <Button
-                        variant={slide.overlay.button.variant}
-                        size="sm"
-                        onClick={() => {
-                          const btn = slide.overlay!.button!;
-                          if (btn.openInNewTab) {
-                            window.open(
-                              btn.link,
-                              "_blank",
-                              "noopener,noreferrer",
-                            );
-                          } else {
-                            navigate(btn.link, push);
-                          }
-                        }}
-                      >
-                        {slide.overlay.button.text}
-                      </Button>
-                    </Div>
-                  )}
-                </Div>
-              ) : (
-                /* Grid Overlay with Cards */
-                <Div
-                  className={`${position.fill} grid gap-2 md:gap-4 p-4 md:p-8`}
-                  style={{
-                    gridTemplateRows: "repeat(2, 1fr)",
-                    gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
-                    justifyItems: isMobile ? "center" : undefined,
-                    alignItems: isMobile ? "center" : undefined,
-                  }}
-                >
-                  {slide.cards.map((card) => (
-                    <Div
-                      key={card.id}
-                      className="relative rounded-lg overflow-hidden shadow-lg transition-transform hover:scale-105"
-                      style={{
-                        ...getGridPosition(card),
-                        ...getBackgroundStyle(card),
-                        width: card.sizing?.widthPct
-                          ? `${isMobile ? Math.min(card.sizing.widthPct, 65) : card.sizing.widthPct}%`
-                          : isMobile
-                            ? "65%"
-                            : "100%",
-                        height: card.sizing?.heightPct
-                          ? `${isMobile ? Math.min(card.sizing.heightPct, 55) : card.sizing.heightPct}%`
-                          : isMobile
-                            ? "55%"
-                            : "100%",
-                        justifySelf: "center",
-                        alignSelf: "center",
-                      }}
-                    >
-                      {card.background.type === "image" &&
-                        card.background.value && (
-                          <MediaImage
-                            src={card.background.value}
-                            alt=""
-                            size="card"
-                          />
-                        )}
-                      {!card.isButtonOnly && (
-                        <Div
-                          className={`${position.fill} flex flex-col justify-end bg-gradient-to-t from-black/80 via-black/30 to-transparent ${
-                            card.sizing?.padding === "none"
-                              ? "p-0"
-                              : card.sizing?.padding === "sm"
-                                ? "p-1.5 md:p-3"
-                                : card.sizing?.padding === "lg"
-                                  ? "p-3 md:p-8"
-                                  : "p-2 md:p-6"
-                          }`}
-                        >
-                          {card.content?.subtitle && (
-                            <Text className="hidden md:block text-xs md:text-sm !text-white/90 mb-0.5 md:mb-2 drop-shadow-sm">
-                              {card.content.subtitle}
-                            </Text>
-                          )}
-                          {card.content?.title && (
-                            <Heading
-                              level={2}
-                              className="text-[11px] md:text-2xl lg:text-3xl font-bold !text-white mb-0.5 md:mb-3 line-clamp-1 md:line-clamp-2 drop-shadow-md"
-                            >
-                              {card.content.title}
-                            </Heading>
-                          )}
-                          {card.content?.description && (
-                            <Text className="text-[10px] md:text-sm lg:text-base !text-white/80 mb-1 md:mb-4 line-clamp-1 drop-shadow-sm">
-                              {card.content.description}
-                            </Text>
-                          )}
-                          {(card.buttons?.length ?? 0) > 0 && (
-                            <Row wrap gap="xs" className="md:gap-2">
-                              {(card.buttons ?? []).map((btn) => (
-                                <Button
-                                  key={btn.id}
-                                  variant={btn.variant}
-                                  size="sm"
-                                  onClick={() => {
-                                    if (btn.openInNewTab) {
-                                      window.open(
-                                        btn.link,
-                                        "_blank",
-                                        "noopener,noreferrer",
-                                      );
-                                    } else {
-                                      navigate(btn.link, push);
-                                    }
-                                  }}
-                                >
-                                  {btn.text}
-                                </Button>
-                              ))}
-                            </Row>
-                          )}
-                        </Div>
-                      )}
-                      {card.isButtonOnly && card.buttons?.[0] && (
-                        <Button
-                          variant="ghost"
-                          className={`${position.fill} ${flex.center} font-semibold text-white hover:bg-black/20 transition-colors rounded-none p-0`}
-                          onClick={() => {
-                            const btn = card.buttons![0]!;
-                            if (btn.openInNewTab) {
-                              window.open(
-                                btn.link,
-                                "_blank",
-                                "noopener,noreferrer",
-                              );
-                            } else {
-                              navigate(btn.link, push);
-                            }
-                          }}
-                        >
-                          <Span className="text-lg md:text-2xl">
-                            {card.buttons![0]!.text}
-                          </Span>
-                        </Button>
-                      )}
-                    </Div>
-                  ))}
-                </Div>
-              )}
-            </Div>
-          ))}
-        </Div>
-      </Div>
-
-      {/* Navigation Dots */}
-      {slides.length > 1 && (
-        <Div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10">
-          {slides.map((_, index) => (
-            <Button
-              key={index}
-              variant="ghost"
-              className={`relative overflow-hidden rounded-full transition-all duration-500 p-0 !min-h-0 ${
-                index === currentSlide
-                  ? THEME_CONSTANTS.carousel.dotActive
-                  : `${THEME_CONSTANTS.carousel.dotInactive} hover:bg-white/75`
-              }`}
-              onClick={() => goToSlide(index)}
-              aria-label={tA11y("heroCarouselGoToSlide", { number: index + 1 })}
-            >
-              {index === currentSlide && (
-                <Span
-                  className="absolute inset-y-0 left-0 bg-black/20 rounded-full animate-[progress-fill_4s_linear_forwards]"
-                  aria-hidden="true"
-                />
-              )}
-            </Button>
-          ))}
-        </Div>
-      )}
-
-      {/* Bottom gradient bleed */}
-      <Div
-        className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-white dark:from-slate-950 to-transparent pointer-events-none z-[5]"
-        aria-hidden="true"
-      />
-
-      {/* Navigation Arrows */}
-      {slides.length > 1 && (
-        <Div className="absolute bottom-4 right-4 z-20 flex gap-2">
-          <Button
-            variant="ghost"
-            className={`p-0 ${THEME_CONSTANTS.carousel.arrow}`}
-            onClick={goPrev}
-            aria-label={tA11y("heroCarouselPrevSlide")}
-          >
-            <svg
-              className="w-7 h-7"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2.5}
-                d="M15 19l-7-7 7-7"
-              />
-            </svg>
-          </Button>
-          <Button
-            variant="ghost"
-            className={`p-0 ${THEME_CONSTANTS.carousel.arrow}`}
-            onClick={goNext}
-            aria-label={tA11y("heroCarouselNextSlide")}
-          >
-            <svg
-              className="w-7 h-7"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2.5}
-                d="M9 5l7 7-7 7"
-              />
-            </svg>
-          </Button>
-        </Div>
-      )}
-    </Section>
-  );
-}

package/src/features/homepage/components/HeroSection.tsx

@@ -1,50 +0,0 @@
-import { Button, Div, Heading, Section, Text } from "../../../ui";
-import type { HomepageSection } from "../types";
-
-interface HeroSectionProps {
-  section: HomepageSection;
-  onCtaClick?: () => void;
-}
-
-export function HeroSection({ section, onCtaClick }: HeroSectionProps) {
-  const { content } = section;
-  return (
-    <Section
-      className="relative flex min-h-[60vh] items-center overflow-hidden bg-neutral-900"
-      style={
-        content?.imageUrl
-          ? {
-              backgroundImage: `url(${content.imageUrl})`,
-              backgroundSize: "cover",
-              backgroundPosition: "center",
-            }
-          : undefined
-      }
-    >
-      <Div className="absolute inset-0 bg-black/40" />
-      <Div className="relative mx-auto max-w-7xl px-4 py-16 text-center text-white sm:px-6 lg:px-8">
-        {content?.title && (
-          <Heading
-            level={1}
-            className="text-4xl font-bold leading-tight sm:text-5xl lg:text-6xl"
-          >
-            {content.title}
-          </Heading>
-        )}
-        {content?.subtitle && (
-          <Text className="mx-auto mt-4 max-w-2xl text-lg opacity-90">
-            {content.subtitle}
-          </Text>
-        )}
-        {content?.ctaLabel && (
-          <Button
-            onClick={onCtaClick}
-            className="mt-8 inline-block rounded-full bg-white px-8 py-3 text-sm font-semibold text-neutral-900 transition hover:bg-neutral-100"
-          >
-            {content.ctaLabel}
-          </Button>
-        )}
-      </Div>
-    </Section>
-  );
-}

package/src/features/homepage/components/HomepageSkeleton.tsx

@@ -1,88 +0,0 @@
-"use client";
-
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Grid, Section } from "../../../ui";
-
-/** Full-page skeleton shown while homepage data loads. */
-export function HomepageSkeleton() {
-  const { skeleton, flex, themed } = THEME_CONSTANTS;
-
-  // Hardcoded clamp values (extended THEME_CONSTANTS keys not in @mohasinac/tokens)
-  const heroSkeletonH = "h-[clamp(420px,72vh,680px)]";
-  const trustCardH = "h-[clamp(120px,18vh,170px)]";
-  const categoryTileH = "h-[clamp(112px,16vh,160px)]";
-  const newsletterH = "h-[clamp(220px,28vh,320px)]";
-
-  return (
-    <div className="w-full overflow-hidden">
-      {/* Hero Carousel skeleton */}
-      <div
-        className={`${skeleton.card} w-full ${heroSkeletonH}`}
-        aria-hidden="true"
-      />
-
-      {/* Trust Features skeleton — 4 cards */}
-      <Section className={`p-8 ${themed.bgPrimary}`}>
-        <Grid className="grid-cols-2 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4">
-          {Array.from({ length: 4 }).map((_, i) => (
-            <div
-              key={i}
-              className={`${skeleton.card} flex flex-col items-center gap-3 p-6 ${trustCardH}`}
-            />
-          ))}
-        </Grid>
-      </Section>
-
-      {/* Top Categories skeleton — 6 tiles */}
-      <Section className={`p-8 ${themed.bgSecondary}`}>
-        <div className={`${skeleton.heading} w-48 mx-auto mb-6`} />
-        <Grid className="grid-cols-2 sm:grid-cols-4">
-          {Array.from({ length: 6 }).map((_, i) => (
-            <div key={i} className={`${skeleton.card} ${categoryTileH}`} />
-          ))}
-        </Grid>
-      </Section>
-
-      {/* Featured Products skeleton — 5 cards */}
-      <Section className={`p-8 ${themed.bgPrimary}`}>
-        <div className={`${flex.between} mb-6`}>
-          <div className={`${skeleton.heading} w-52`} />
-          <div className={`${skeleton.text} w-24`} />
-        </div>
-        <Grid className="grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5">
-          {Array.from({ length: 5 }).map((_, i) => (
-            <div key={i} className="flex flex-col gap-2">
-              <div className={`${skeleton.image} w-full pb-[100%]`} />
-              <div className={`${skeleton.text} w-3/4`} />
-              <div className={`${skeleton.text} w-1/2`} />
-            </div>
-          ))}
-        </Grid>
-      </Section>
-
-      {/* Featured Auctions skeleton — 5 cards */}
-      <Section className={`p-8 ${themed.bgSecondary}`}>
-        <div className={`${flex.between} mb-6`}>
-          <div className={`${skeleton.heading} w-56`} />
-          <div className={`${skeleton.text} w-24`} />
-        </div>
-        <Grid className="grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5">
-          {Array.from({ length: 5 }).map((_, i) => (
-            <div key={i} className="flex flex-col gap-2">
-              <div className={`${skeleton.image} w-full pb-[100%]`} />
-              <div className={`${skeleton.text} w-3/4`} />
-              <div className={`${skeleton.text} w-1/2`} />
-            </div>
-          ))}
-        </Grid>
-      </Section>
-
-      {/* Newsletter skeleton */}
-      <Section className={`p-8 ${themed.bgPrimary}`}>
-        <div
-          className={`${skeleton.card} rounded-2xl max-w-2xl mx-auto ${newsletterH}`}
-        />
-      </Section>
-    </div>
-  );
-}

package/src/features/homepage/components/HomepageView.tsx

@@ -1,77 +0,0 @@
-"use client";
-
-import React from "react";
-import { Div } from "../../../ui";
-
-export interface HomepageViewProps {
-  renderHero?: () => React.ReactNode;
-  renderWelcome?: () => React.ReactNode;
-  renderTrustFeatures?: () => React.ReactNode;
-  renderStats?: () => React.ReactNode;
-  renderTopCategories?: () => React.ReactNode;
-  renderTopBrands?: () => React.ReactNode;
-  renderFeaturedProducts?: () => React.ReactNode;
-  renderFeaturedAuctions?: () => React.ReactNode;
-  renderFeaturedPreOrders?: () => React.ReactNode;
-  renderFeaturedStores?: () => React.ReactNode;
-  renderFeaturedEvents?: () => React.ReactNode;
-  renderAdvertisement?: () => React.ReactNode;
-  renderCustomerReviews?: () => React.ReactNode;
-  renderCommunity?: () => React.ReactNode;
-  renderFaq?: () => React.ReactNode;
-  renderBlogArticles?: () => React.ReactNode;
-  renderHowItWorks?: () => React.ReactNode;
-  renderSecurity?: () => React.ReactNode;
-  renderNewsletter?: () => React.ReactNode;
-  renderFeaturedResults?: () => React.ReactNode;
-  className?: string;
-}
-
-export function HomepageView({
-  renderHero,
-  renderWelcome,
-  renderTrustFeatures,
-  renderStats,
-  renderTopCategories,
-  renderTopBrands,
-  renderFeaturedProducts,
-  renderFeaturedAuctions,
-  renderFeaturedPreOrders,
-  renderFeaturedStores,
-  renderFeaturedEvents,
-  renderAdvertisement,
-  renderCustomerReviews,
-  renderCommunity,
-  renderFaq,
-  renderBlogArticles,
-  renderHowItWorks,
-  renderSecurity,
-  renderNewsletter,
-  renderFeaturedResults,
-  className = "",
-}: HomepageViewProps) {
-  return (
-    <Div className={className}>
-      {renderHero?.()}
-      {renderWelcome?.()}
-      {renderTrustFeatures?.()}
-      {renderStats?.()}
-      {renderTopCategories?.()}
-      {renderTopBrands?.()}
-      {renderFeaturedProducts?.()}
-      {renderFeaturedAuctions?.()}
-      {renderFeaturedPreOrders?.()}
-      {renderFeaturedStores?.()}
-      {renderFeaturedEvents?.()}
-      {renderAdvertisement?.()}
-      {renderCustomerReviews?.()}
-      {renderCommunity?.()}
-      {renderFaq?.()}
-      {renderBlogArticles?.()}
-      {renderHowItWorks?.()}
-      {renderSecurity?.()}
-      {renderNewsletter?.()}
-      {renderFeaturedResults?.()}
-    </Div>
-  );
-}