@mohasinac/appkit 2.1.3 → 2.3.0

package/src/features/stores/components/StoreHeader.tsx

@@ -1,115 +0,0 @@
-import {
-  Button,
-  Div,
-  Heading,
-  RichText,
-  Section,
-  Span,
-  Text,
-} from "../../../ui";
-import { proseMirrorToHtml } from "../../../utils/string.formatter";
-import type { StoreDetail } from "../types";
-
-interface StoreHeaderProps {
-  store: StoreDetail;
-  labels?: {
-    products?: string;
-    reviews?: string;
-    sold?: string;
-    vacationMode?: string;
-    follow?: string;
-  };
-  onFollow?: (storeSlug: string) => void;
-  className?: string;
-}
-
-export function StoreHeader({
-  store,
-  labels = {},
-  onFollow,
-  className = "",
-}: StoreHeaderProps) {
-  return (
-    <Section className={`bg-white border-b border-gray-200 ${className}`}>
-      {store.storeBannerURL && (
-        <Div className="h-40 md:h-56 overflow-hidden bg-gray-100">
-          <Div
-            role="img"
-            aria-label={`${store.storeName} banner`}
-            className="h-full w-full bg-center bg-cover"
-            style={{ backgroundImage: `url(${store.storeBannerURL})` }}
-          />
-        </Div>
-      )}
-      <Div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-        <Div className="flex items-end gap-4">
-          {store.storeLogoURL ? (
-            <Div
-              role="img"
-              aria-label={store.storeName}
-              className="-mt-8 h-16 w-16 rounded-xl border-2 border-white bg-center bg-cover shadow-sm"
-              style={{ backgroundImage: `url(${store.storeLogoURL})` }}
-            />
-          ) : (
-            <Div className="-mt-8 h-16 w-16 rounded-xl border-2 border-white bg-orange-100 flex items-center justify-center text-orange-600 font-bold text-2xl shadow-sm">
-              {store.storeName[0]?.toUpperCase()}
-            </Div>
-          )}
-          <Div className="flex-1 min-w-0">
-            <Heading
-              level={1}
-              className="text-xl font-bold text-gray-900 truncate"
-            >
-              {store.storeName}
-            </Heading>
-            {store.storeDescription && (
-              <RichText
-                html={proseMirrorToHtml(store.storeDescription)}
-                copyableCode
-                className="text-sm text-gray-500 mt-0.5"
-              />
-            )}
-          </Div>
-          {onFollow && (
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              onClick={() => onFollow(store.storeSlug)}
-              className="shrink-0 rounded-lg border border-orange-500 px-4 py-2 text-sm font-medium text-orange-500 hover:bg-orange-50 transition-colors"
-            >
-              {labels.follow ?? "Follow"}
-            </Button>
-          )}
-        </Div>
-
-        {store.isVacationMode && (
-          <Text className="mt-3 rounded-lg bg-yellow-50 border border-yellow-200 px-3 py-2 text-sm text-yellow-700">
-            {store.vacationMessage ??
-              labels.vacationMode ??
-              "Store is on vacation mode"}
-          </Text>
-        )}
-
-        <Div className="flex items-center gap-4 mt-3 text-sm text-gray-500">
-          {store.totalProducts != null && (
-            <Span>
-              {store.totalProducts} {labels.products ?? "products"}
-            </Span>
-          )}
-          {store.itemsSold != null && (
-            <Span>
-              {store.itemsSold} {labels.sold ?? "sold"}
-            </Span>
-          )}
-          {store.averageRating != null && (
-            <Span>
-              ★ {store.averageRating.toFixed(1)} ({store.totalReviews}{" "}
-              {labels.reviews ?? "reviews"})
-            </Span>
-          )}
-        </Div>
-      </Div>
-    </Section>
-  );
-}

package/src/features/stores/components/StoreNavTabs.tsx

@@ -1,77 +0,0 @@
-"use client";
-
-import React from "react";
-import { Div } from "../../../ui";
-
-export interface StoreTab {
-  value: string;
-  label: string;
-  href?: string;
-}
-
-export interface StoreNavTabsProps {
-  tabs: StoreTab[];
-  activeValue?: string;
-  onTabChange?: (value: string) => void;
-  /** Render-prop for full custom tab bar */
-  renderTabBar?: (
-    tabs: StoreTab[],
-    activeValue: string | undefined,
-    onChange: (v: string) => void,
-  ) => React.ReactNode;
-  className?: string;
-}
-
-export function StoreNavTabs({
-  tabs,
-  activeValue,
-  onTabChange,
-  renderTabBar,
-  className = "",
-}: StoreNavTabsProps) {
-  const handleChange = (v: string) => onTabChange?.(v);
-
-  if (renderTabBar) {
-    return <>{renderTabBar(tabs, activeValue, handleChange)}</>;
-  }
-
-  return (
-    <Div
-      role="tablist"
-      className={`flex gap-2 border-b border-neutral-200 overflow-x-auto ${className}`}
-    >
-      {tabs.map((tab) =>
-        tab.href ? (
-          <a
-            key={tab.value}
-            href={tab.href}
-            role="tab"
-            aria-selected={activeValue === tab.value}
-            className={`px-4 py-2 text-sm font-medium whitespace-nowrap border-b-2 -mb-px transition-colors ${
-              activeValue === tab.value
-                ? "border-primary text-primary"
-                : "border-transparent text-neutral-500 hover:text-neutral-800"
-            }`}
-          >
-            {tab.label}
-          </a>
-        ) : (
-          <button
-            key={tab.value}
-            type="button"
-            role="tab"
-            aria-selected={activeValue === tab.value}
-            onClick={() => handleChange(tab.value)}
-            className={`px-4 py-2 text-sm font-medium whitespace-nowrap border-b-2 -mb-px transition-colors ${
-              activeValue === tab.value
-                ? "border-primary text-primary"
-                : "border-transparent text-neutral-500 hover:text-neutral-800"
-            }`}
-          >
-            {tab.label}
-          </button>
-        ),
-      )}
-    </Div>
-  );
-}

package/src/features/stores/components/StoreProductsView.tsx

@@ -1,77 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import type { ReactNode } from "react";
-import { Div, Heading, Row } from "../../../ui";
-import type { StoreProductItem } from "../types";
-
-export interface StoreProductsViewProps {
-  storeSlug: string;
-  labels?: {
-    title?: string;
-    emptyTitle?: string;
-    emptyDescription?: string;
-  };
-  /** Render the products area (grid or list). */
-  renderProducts: (items: StoreProductItem[], isLoading: boolean) => ReactNode;
-  /** Render search input. */
-  renderSearch?: (value: string, onChange: (v: string) => void) => ReactNode;
-  /** Render sort dropdown. */
-  renderSort?: (value: string, onChange: (v: string) => void) => ReactNode;
-  /** Render filter panel. */
-  renderFilters?: () => ReactNode;
-  /** Render active filter chips. */
-  renderActiveFilters?: () => ReactNode;
-  /** Render view mode toggle. */
-  renderViewToggle?: (mode: string, onToggle: (m: string) => void) => ReactNode;
-  /** Render pagination controls. */
-  renderPagination?: (total: number) => ReactNode;
-  /** Raw product data when fetching is handled externally. */
-  items?: StoreProductItem[];
-  total?: number;
-  isLoading?: boolean;
-  className?: string;
-}
-
-export function StoreProductsView({
-  storeSlug,
-  labels = {},
-  renderProducts,
-  renderSearch,
-  renderSort,
-  renderFilters,
-  renderActiveFilters,
-  renderViewToggle,
-  renderPagination,
-  items = [],
-  total = 0,
-  isLoading = false,
-  className = "",
-}: StoreProductsViewProps) {
-  const [search, setSearch] = useState("");
-  const [sort, setSort] = useState("-createdAt");
-  const [viewMode, setViewMode] = useState("grid");
-
-  void storeSlug;
-
-  return (
-    <Div className={`py-4 ${className}`}>
-      {labels.title && (
-        <Heading level={2} className="mb-4 text-xl font-semibold">
-          {labels.title}
-        </Heading>
-      )}
-
-      <Row wrap gap="3" className="mb-4">
-        {renderSearch?.(search, setSearch)}
-        {renderSort?.(sort, setSort)}
-        {renderFilters?.()}
-        {renderViewToggle?.(viewMode, setViewMode)}
-      </Row>
-
-      {renderActiveFilters?.()}
-      {renderProducts(items, isLoading)}
-      {renderPagination?.(total)}
-    </Div>
-  );
-}

package/src/features/stores/components/StoreReviewsView.tsx

@@ -1,45 +0,0 @@
-"use client";
-
-import React from "react";
-import { Div, Heading } from "../../../ui";
-import type { Review } from "../../reviews/types";
-
-export interface StoreReviewsViewProps {
-  storeSlug: string;
-  labels?: {
-    title?: string;
-    emptyTitle?: string;
-  };
-  renderReviews: (items: Review[], isLoading: boolean) => React.ReactNode;
-  renderSummary?: () => React.ReactNode;
-  renderPagination?: (total: number) => React.ReactNode;
-  items?: Review[];
-  total?: number;
-  isLoading?: boolean;
-  className?: string;
-}
-
-export function StoreReviewsView({
-  labels = {},
-  renderReviews,
-  renderSummary,
-  renderPagination,
-  items = [],
-  total = 0,
-  isLoading = false,
-  className = "",
-}: StoreReviewsViewProps) {
-  return (
-    <Div className={`py-4 ${className}`}>
-      {labels.title && (
-        <Heading level={2} className="text-xl font-semibold mb-4">
-          {labels.title}
-        </Heading>
-      )}
-
-      {renderSummary?.()}
-      {renderReviews(items, isLoading)}
-      {renderPagination?.(total)}
-    </Div>
-  );
-}

package/src/features/stores/components/StoresListView.tsx

@@ -1,142 +0,0 @@
-import React from "react";
-import Link from "next/link";
-import type { LayoutSlots } from "../../../contracts";
-import { Div, Grid, Heading, Span, Text } from "../../../ui";
-import { stripHtml } from "../../../utils/string.formatter";
-import type { StoreListItem } from "../types";
-
-interface StoreCardProps {
-  store: StoreListItem;
-  labels?: { products?: string; reviews?: string; sold?: string };
-  className?: string;
-}
-
-function StoreCard({ store, labels = {}, className = "" }: StoreCardProps) {
-  return (
-    <Link
-      href={`/stores/${store.storeSlug}`}
-      className={`block rounded-xl border border-gray-200 bg-white overflow-hidden shadow-sm hover:shadow-md transition-shadow ${className}`}
-    >
-      {store.storeBannerURL ? (
-        <Div className="h-24 overflow-hidden bg-gray-100">
-          <Div
-            role="img"
-            aria-label={`${store.storeName} banner`}
-            className="h-full w-full bg-center bg-cover"
-            style={{ backgroundImage: `url(${store.storeBannerURL})` }}
-          />
-        </Div>
-      ) : (
-        <Div className="h-24 bg-gradient-to-br from-orange-50 to-orange-100" />
-      )}
-      <Div className="px-4 pb-4">
-        <Div className="-mt-6 mb-3">
-          {store.storeLogoURL ? (
-            <Div
-              role="img"
-              aria-label={store.storeName}
-              className="h-12 w-12 rounded-lg border-2 border-white bg-center bg-cover shadow-sm"
-              style={{ backgroundImage: `url(${store.storeLogoURL})` }}
-            />
-          ) : (
-            <Div className="h-12 w-12 rounded-lg border-2 border-white bg-orange-100 flex items-center justify-center text-orange-600 font-bold shadow-sm">
-              {store.storeName[0]?.toUpperCase()}
-            </Div>
-          )}
-        </Div>
-        <Heading
-          level={3}
-          className="font-semibold text-gray-900 text-sm truncate"
-        >
-          {store.storeName}
-        </Heading>
-        {store.storeDescription && (
-          <Text className="text-xs text-gray-500 mt-0.5 line-clamp-2">
-            {stripHtml(store.storeDescription)}
-          </Text>
-        )}
-        <Div className="flex items-center gap-3 mt-2 text-xs text-gray-400">
-          {store.totalProducts != null && (
-            <Span>
-              {store.totalProducts} {labels.products ?? "products"}
-            </Span>
-          )}
-          {store.itemsSold != null && (
-            <Span>
-              {store.itemsSold} {labels.sold ?? "sold"}
-            </Span>
-          )}
-          {store.averageRating != null && (
-            <Span>★ {store.averageRating.toFixed(1)}</Span>
-          )}
-        </Div>
-      </Div>
-    </Link>
-  );
-}
-
-interface StoresListViewProps<T extends StoreListItem = StoreListItem> {
-  stores: T[];
-  labels?: {
-    products?: string;
-    reviews?: string;
-    sold?: string;
-    empty?: string;
-  };
-  total?: number;
-  currentPage?: number;
-  totalPages?: number;
-  className?: string;
-  /** Render-prop slot overrides — pass via `FeatureExtension.slots`. */
-  slots?: LayoutSlots<T>;
-}
-
-export function StoresListView<T extends StoreListItem = StoreListItem>({
-  stores,
-  labels = {},
-  total = 0,
-  currentPage = 1,
-  totalPages = 1,
-  className = "",
-  slots,
-}: StoresListViewProps<T>) {
-  if (stores.length === 0) {
-    if (slots?.renderEmptyState) {
-      return <>{slots.renderEmptyState() as React.ReactNode}</>;
-    }
-    return (
-      <Text className="text-center text-gray-500 py-12">
-        {labels.empty ?? "No stores found."}
-      </Text>
-    );
-  }
-
-  return (
-    <Div className="space-y-4">
-      {slots?.renderHeader
-        ? (slots.renderHeader({ total }) as React.ReactNode)
-        : null}
-      <Grid cols="storeCards" gap="md" className={className}>
-        {stores.map((store, i) =>
-          slots?.renderCard ? (
-            <React.Fragment key={store.id}>
-              {slots.renderCard(store, i) as React.ReactNode}
-            </React.Fragment>
-          ) : (
-            <StoreCard
-              key={store.id}
-              store={store as StoreListItem}
-              labels={labels}
-            />
-          ),
-        )}
-      </Grid>
-      {slots?.renderFooter
-        ? (slots.renderFooter({
-            page: currentPage,
-            totalPages,
-          }) as React.ReactNode)
-        : null}
-    </Div>
-  );
-}

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

@@ -1,12 +0,0 @@
-export { StoreHeader } from "./StoreHeader";
-export { StoresListView } from "./StoresListView";
-export { StoreNavTabs } from "./StoreNavTabs";
-export type { StoreNavTabsProps, StoreTab } from "./StoreNavTabs";
-export { StoreAboutView } from "./StoreAboutView";
-export type { StoreAboutViewProps } from "./StoreAboutView";
-export { StoreProductsView } from "./StoreProductsView";
-export type { StoreProductsViewProps } from "./StoreProductsView";
-export { StoreAuctionsView } from "./StoreAuctionsView";
-export type { StoreAuctionsViewProps } from "./StoreAuctionsView";
-export { StoreReviewsView } from "./StoreReviewsView";
-export type { StoreReviewsViewProps } from "./StoreReviewsView";

package/src/features/stores/hooks/useStores.ts

@@ -1,130 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { apiClient } from "../../../http";
-import type {
-  StoreListResponse,
-  StoreListParams,
-  StoreDetail,
-  StoreProductsResponse,
-  StoreAuctionsResponse,
-  StoreReviewsData,
-} from "../types";
-
-export function useStores(
-  params: StoreListParams = {},
-  opts?: { enabled?: boolean },
-) {
-  const sp = new URLSearchParams();
-  if (params.category) sp.set("category", params.category);
-  if (params.page) sp.set("page", String(params.page));
-  if (params.pageSize) sp.set("pageSize", String(params.pageSize));
-  if (params.sort) sp.set("sorts", params.sort);
-  if (params.filters) sp.set("filters", params.filters);
-  const qs = sp.toString();
-
-  const { data, isLoading, error, refetch } = useQuery<StoreListResponse>({
-    queryKey: ["stores", qs],
-    queryFn: () =>
-      apiClient.get<StoreListResponse>(`/api/stores${qs ? `?${qs}` : ""}`),
-    enabled: opts?.enabled ?? true,
-  });
-
-  return {
-    stores: data?.items ?? [],
-    total: data?.total ?? 0,
-    totalPages: data?.totalPages ?? 0,
-    hasMore: data?.hasMore ?? false,
-    isLoading,
-    error: error instanceof Error ? error.message : null,
-    refetch,
-  };
-}
-
-export function useStoreBySlug(
-  storeSlug: string,
-  opts?: { enabled?: boolean },
-) {
-  const { data, isLoading, error, refetch } = useQuery<StoreDetail | null>({
-    queryKey: ["store", storeSlug],
-    queryFn: () => apiClient.get<StoreDetail>(`/api/stores/${storeSlug}`),
-    enabled: (opts?.enabled ?? true) && !!storeSlug,
-  });
-
-  return {
-    store: data ?? null,
-    isLoading,
-    error: error instanceof Error ? error.message : null,
-    refetch,
-  };
-}
-
-export function useStoreProducts(
-  storeSlug: string,
-  params?: string,
-  opts?: { enabled?: boolean },
-) {
-  const { data, isLoading, error, refetch } = useQuery<StoreProductsResponse>({
-    queryKey: ["store-products", storeSlug, params ?? ""],
-    queryFn: () =>
-      apiClient.get<StoreProductsResponse>(
-        `/api/stores/${storeSlug}/products${params ? `?${params}` : ""}`,
-      ),
-    enabled: (opts?.enabled ?? true) && !!storeSlug,
-  });
-
-  return {
-    products: data?.items ?? [],
-    total: data?.total ?? 0,
-    totalPages: data?.totalPages ?? 0,
-    isLoading,
-    error: error instanceof Error ? error.message : null,
-    refetch,
-  };
-}
-
-export function useStoreAuctions(
-  storeSlug: string,
-  params?: string,
-  opts?: { enabled?: boolean },
-) {
-  const { data, isLoading, error, refetch } = useQuery<StoreAuctionsResponse>({
-    queryKey: ["store-auctions", storeSlug, params ?? ""],
-    queryFn: () =>
-      apiClient.get<StoreAuctionsResponse>(
-        `/api/stores/${storeSlug}/auctions${params ? `?${params}` : ""}`,
-      ),
-    enabled: (opts?.enabled ?? true) && !!storeSlug,
-  });
-
-  return {
-    auctions: data?.items ?? [],
-    total: data?.total ?? 0,
-    totalPages: data?.totalPages ?? 0,
-    isLoading,
-    error: error instanceof Error ? error.message : null,
-    refetch,
-  };
-}
-
-export function useStoreReviews(
-  storeSlug: string,
-  opts?: { enabled?: boolean },
-) {
-  const { data, isLoading, error, refetch } = useQuery<StoreReviewsData>({
-    queryKey: ["store-reviews", storeSlug],
-    queryFn: () =>
-      apiClient.get<StoreReviewsData>(`/api/stores/${storeSlug}/reviews`),
-    enabled: (opts?.enabled ?? true) && !!storeSlug,
-  });
-
-  return {
-    reviews: data?.reviews ?? [],
-    averageRating: data?.averageRating ?? 0,
-    totalReviews: data?.totalReviews ?? 0,
-    ratingDistribution: data?.ratingDistribution ?? {},
-    isLoading,
-    error: error instanceof Error ? error.message : null,
-    refetch,
-  };
-}

package/src/features/stores/index.ts

@@ -1,7 +0,0 @@
-export * from "./types";
-export * from "./hooks/useStores";
-export * from "./components";
-export * from "./schemas";
-export * from "./columns";
-export { StoresRepository } from "./repository/stores.repository";
-export { manifest } from "./manifest";

package/src/features/stores/manifest.ts

@@ -1,37 +0,0 @@
-import type { FeatureManifest } from "../../contracts";
-
-export const manifest: FeatureManifest = {
-  name: "stores",
-  i18nNamespace: "stores",
-  envKeys: [],
-  routes: [
-    { segment: "[locale]/stores", exports: { default: "StoresListView" } },
-    {
-      segment: "[locale]/stores/[storeSlug]",
-      exports: { default: "StoreStorefrontView" },
-    },
-    {
-      segment: "[locale]/stores/[storeSlug]/products",
-      exports: { default: "StoreProductsView" },
-    },
-    {
-      segment: "[locale]/stores/[storeSlug]/auctions",
-      exports: { default: "StoreAuctionsView" },
-    },
-    {
-      segment: "[locale]/stores/[storeSlug]/reviews",
-      exports: { default: "StoreReviewsView" },
-    },
-    {
-      segment: "[locale]/stores/[storeSlug]/about",
-      exports: { default: "StoreAboutView" },
-    },
-  ],
-  apiRoutes: [
-    { segment: "api/stores", methods: ["GET"] },
-    { segment: "api/stores/[storeSlug]", methods: ["GET"] },
-    { segment: "api/stores/[storeSlug]/products", methods: ["GET"] },
-    { segment: "api/stores/[storeSlug]/auctions", methods: ["GET"] },
-    { segment: "api/stores/[storeSlug]/reviews", methods: ["GET"] },
-  ],
-};

package/src/features/stores/messages/en.json

@@ -1,21 +0,0 @@
-{
-  "card": {
-    "products": "products",
-    "sold": "sold",
-    "reviews": "reviews",
-    "follow": "Follow"
-  },
-  "header": {
-    "vacationMode": "Store is currently on vacation. Orders are paused."
-  },
-  "list": {
-    "title": "Explore Stores",
-    "empty": "No stores found."
-  },
-  "tabs": {
-    "products": "Products",
-    "auctions": "Live Auctions",
-    "reviews": "Reviews",
-    "about": "About"
-  }
-}