@mohasinac/appkit 2.1.3 → 2.3.0

package/src/features/reviews/components/ReviewsList.tsx

@@ -1,182 +0,0 @@
-"use client";
-
-import React from "react";
-import {
-  Button,
-  Div,
-  Heading,
-  Pagination,
-  Row,
-  Skeleton,
-  Span,
-  Text,
-} from "../../../ui";
-import { StarRating } from "../../../ui";
-import type { Review } from "../types";
-
-// ─── ReviewCard ───────────────────────────────────────────────────────────────
-
-export interface ReviewCardProps {
-  review: Review;
-  className?: string;
-}
-
-export function ReviewCard({ review, className = "" }: ReviewCardProps) {
-  const date = review.createdAt
-    ? new Date(review.createdAt).toLocaleDateString("en-US", {
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-      })
-    : "";
-
-  const initials = review.userName.charAt(0).toUpperCase();
-
-  return (
-    <Div
-      className={`rounded-xl border border-neutral-200 bg-white p-5 dark:border-zinc-700 dark:bg-zinc-900 ${className}`}
-    >
-      <Div className="flex items-start gap-3">
-        {review.userAvatar ? (
-          <Div
-            role="img"
-            aria-label={review.userName}
-            className="h-9 w-9 flex-shrink-0 rounded-full bg-center bg-cover"
-            style={{ backgroundImage: `url(${review.userAvatar})` }}
-          />
-        ) : (
-          <Div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-neutral-200 text-sm font-medium text-neutral-600 dark:bg-zinc-700 dark:text-zinc-300">
-            {initials}
-          </Div>
-        )}
-        <Div className="flex-1 min-w-0">
-          <Row wrap gap="sm">
-            <Span className="font-medium text-neutral-900 dark:text-white">
-              {review.userName}
-            </Span>
-            {review.verified && (
-              <Span className="rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400">
-                Verified
-              </Span>
-            )}
-            {date && (
-              <Span className="text-xs text-neutral-400 dark:text-zinc-500">
-                {date}
-              </Span>
-            )}
-          </Row>
-          <Div className="mt-1">
-            <StarRating value={review.rating} size="sm" readOnly />
-          </Div>
-        </Div>
-      </Div>
-
-      {review.title && (
-        <Heading
-          level={4}
-          className="mt-3 font-semibold text-neutral-900 dark:text-white"
-        >
-          {review.title}
-        </Heading>
-      )}
-
-      {review.comment && (
-        <Text className="mt-2 text-sm leading-relaxed text-neutral-600 dark:text-zinc-400">
-          {review.comment}
-        </Text>
-      )}
-
-      {review.images && review.images.length > 0 && (
-        <Row wrap gap="sm" className="mt-3">
-          {review.images.map((img, i) => (
-            <Div
-              key={i}
-              role="img"
-              aria-label={`Review image ${i + 1}`}
-              className="h-16 w-16 rounded-lg bg-center bg-cover border border-neutral-100 dark:border-zinc-700"
-              style={{ backgroundImage: `url(${img.thumbnailUrl ?? img.url})` }}
-            />
-          ))}
-        </Row>
-      )}
-
-      {(review.helpfulCount ?? 0) > 0 && (
-        <Text className="mt-3 text-xs text-neutral-400 dark:text-zinc-500">
-          {review.helpfulCount} found this helpful
-        </Text>
-      )}
-    </Div>
-  );
-}
-
-// ─── ReviewsList ──────────────────────────────────────────────────────────────
-
-export interface ReviewsListProps {
-  reviews: Review[];
-  isLoading?: boolean;
-  totalPages?: number;
-  currentPage?: number;
-  onPageChange?: (page: number) => void;
-  emptyLabel?: string;
-}
-
-export function ReviewsList({
-  reviews,
-  isLoading,
-  totalPages = 1,
-  currentPage = 1,
-  onPageChange,
-  emptyLabel = "No reviews yet",
-}: ReviewsListProps) {
-  if (isLoading) {
-    return (
-      <Div className="space-y-4">
-        {Array.from({ length: 4 }).map((_, i) => (
-          <Div
-            key={i}
-            className="rounded-xl border border-neutral-200 dark:border-zinc-700 p-5"
-          >
-            <Div className="flex gap-3">
-              <Skeleton className="h-9 w-9 rounded-full" />
-              <Div className="flex-1 space-y-2">
-                <Skeleton className="h-4 w-24 rounded" />
-                <Skeleton className="h-3 w-16 rounded" />
-              </Div>
-            </Div>
-            <Div className="mt-3 space-y-1">
-              <Skeleton className="h-3 w-full rounded" />
-              <Skeleton className="h-3 w-3/4 rounded" />
-            </Div>
-          </Div>
-        ))}
-      </Div>
-    );
-  }
-
-  if (reviews.length === 0) {
-    return (
-      <Text className="py-12 text-center text-sm text-neutral-500 dark:text-zinc-500">
-        {emptyLabel}
-      </Text>
-    );
-  }
-
-  return (
-    <Div className="space-y-6">
-      <Div className="space-y-4">
-        {reviews.map((review) => (
-          <ReviewCard key={review.id} review={review} />
-        ))}
-      </Div>
-      {totalPages > 1 && onPageChange && (
-        <Div className="flex justify-center">
-          <Pagination
-            currentPage={currentPage}
-            totalPages={totalPages}
-            onPageChange={onPageChange}
-          />
-        </Div>
-      )}
-    </Div>
-  );
-}

package/src/features/reviews/components/ReviewsListView.tsx

@@ -1,100 +0,0 @@
-"use client";
-
-import React from "react";
-import { Container, Div, Heading, Row, Text } from "../../../ui";
-import { useReviews } from "../hooks/useReviews";
-import type { Review, ReviewListParams, ReviewListResponse } from "../types";
-
-export interface ReviewsListViewProps {
-  /** Optional initial SSR data */
-  initialData?: ReviewListResponse;
-  /** Query params passed to useReviews */
-  params?: ReviewListParams;
-  /** Rendered inside the page header */
-  renderHeader?: (total: number) => React.ReactNode;
-  /** Render search input */
-  renderSearch?: (
-    value: string,
-    onChange: (v: string) => void,
-  ) => React.ReactNode;
-  /** Render sort dropdown */
-  renderSort?: (
-    value: string,
-    onChange: (v: string) => void,
-  ) => React.ReactNode;
-  /** Render filter panel */
-  renderFilters?: () => React.ReactNode;
-  /** Render active filter chips */
-  renderActiveFilters?: () => React.ReactNode;
-  /** Render the data table / grid */
-  renderResults: (items: Review[], isLoading: boolean) => React.ReactNode;
-  /** Render pagination */
-  renderPagination?: (total: number) => React.ReactNode;
-  /** Render empty state */
-  renderEmptyState?: () => React.ReactNode;
-  labels?: {
-    title?: string;
-    subtitle?: string;
-    subtitleWithCount?: (count: number) => string;
-  };
-  className?: string;
-}
-
-export function ReviewsListView({
-  initialData,
-  params = { status: "approved", perPage: 200 },
-  renderHeader,
-  renderSearch,
-  renderSort,
-  renderFilters,
-  renderActiveFilters,
-  renderResults,
-  renderPagination,
-  renderEmptyState,
-  labels = {},
-  className = "",
-}: ReviewsListViewProps) {
-  const [search, setSearch] = React.useState("");
-  const [sort, setSort] = React.useState("-rating");
-
-  const { reviews, total, isLoading } = useReviews(params, { initialData });
-
-  return (
-    <Div className={`min-h-screen ${className}`}>
-      <Container size="full" className="py-8">
-        {/* Header */}
-        {renderHeader ? (
-          renderHeader(total)
-        ) : (
-          <Div className="mb-6">
-            <Heading level={1}>{labels.title ?? "Reviews"}</Heading>
-            <Text variant="secondary" className="mt-1">
-              {total > 0
-                ? (labels.subtitleWithCount?.(total) ??
-                  `${total} reviews from our customers`)
-                : (labels.subtitle ?? "See what our customers say")}
-            </Text>
-          </Div>
-        )}
-
-        {/* Search + Sort + Filters */}
-        <Row wrap gap="3" className="mb-4">
-          {renderSearch?.(search, setSearch)}
-          {renderSort?.(sort, setSort)}
-          {renderFilters?.()}
-        </Row>
-
-        {/* Active filter chips */}
-        {renderActiveFilters?.()}
-
-        {/* Results */}
-        {!isLoading && total === 0 && renderEmptyState
-          ? renderEmptyState()
-          : renderResults(reviews, isLoading)}
-
-        {/* Pagination */}
-        {renderPagination?.(total)}
-      </Container>
-    </Div>
-  );
-}

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

@@ -1,11 +0,0 @@
-export type { ReviewCardProps, ReviewsListProps } from "./ReviewsList";
-export { ReviewCard, ReviewsList } from "./ReviewsList";
-
-export type { ReviewSummaryProps } from "./ReviewSummary";
-export { ReviewSummary } from "./ReviewSummary";
-
-export type { ViewReviewModalProps } from "./ReviewModal";
-export { ViewReviewModal } from "./ReviewModal";
-
-export { ReviewsListView } from "./ReviewsListView";
-export type { ReviewsListViewProps } from "./ReviewsListView";

package/src/features/reviews/hooks/useReviews.ts

@@ -1,67 +0,0 @@
-"use client";
-import { useQuery } from "@tanstack/react-query";
-import { apiClient } from "../../../http";
-import type { ReviewListResponse, ReviewListParams } from "../types";
-
-interface UseReviewsOptions {
-  initialData?: ReviewListResponse;
-  enabled?: boolean;
-}
-
-export function useReviews(
-  params: ReviewListParams = {},
-  opts?: UseReviewsOptions,
-) {
-  const sp = new URLSearchParams();
-  if (params.productId) sp.set("productId", params.productId);
-  if (params.userId) sp.set("userId", params.userId);
-  if (params.status) sp.set("status", params.status);
-  if (params.rating) sp.set("rating", String(params.rating));
-  if (params.featured !== undefined)
-    sp.set("featured", String(params.featured));
-  if (params.page) sp.set("page", String(params.page));
-  if (params.perPage) sp.set("perPage", String(params.perPage));
-  if (params.sort) sp.set("sort", params.sort);
-  const qs = sp.toString();
-
-  const query = useQuery<ReviewListResponse>({
-    queryKey: ["reviews", qs],
-    queryFn: () =>
-      apiClient.get<ReviewListResponse>(`/api/reviews${qs ? `?${qs}` : ""}`),
-    initialData: opts?.initialData,
-    enabled: opts?.enabled,
-  });
-
-  return {
-    reviews: query.data?.items ?? [],
-    total: query.data?.total ?? 0,
-    totalPages: query.data?.totalPages ?? 1,
-    hasMore: query.data?.hasMore ?? false,
-    averageRating: query.data?.averageRating,
-    ratingDistribution: query.data?.ratingDistribution,
-    isLoading: query.isLoading,
-    error: query.error,
-    refetch: query.refetch,
-  };
-}
-
-interface UseProductReviewsOptions {
-  page?: number;
-  pageSize?: number;
-  enabled?: boolean;
-}
-
-export function useProductReviews(
-  productId: string,
-  opts?: UseProductReviewsOptions,
-) {
-  return useReviews(
-    {
-      productId,
-      status: "approved",
-      page: opts?.page,
-      perPage: opts?.pageSize,
-    },
-    { enabled: opts?.enabled },
-  );
-}

package/src/features/reviews/index.ts

@@ -1,7 +0,0 @@
-export * from "./types";
-export * from "./hooks/useReviews";
-export * from "./components";
-export * from "./schemas";
-export * from "./columns";
-export { ReviewsRepository } from "./repository/reviews.repository";
-export { manifest } from "./manifest";

package/src/features/reviews/manifest.ts

@@ -1,12 +0,0 @@
-import type { FeatureManifest } from "../../contracts";
-
-export const manifest: FeatureManifest = {
-  name: "reviews",
-  i18nNamespace: "reviews",
-  envKeys: [],
-  routes: [],
-  apiRoutes: [
-    { segment: "api/reviews", methods: ["GET", "POST"] },
-    { segment: "api/reviews/[id]", methods: ["GET", "PATCH", "DELETE"] },
-  ],
-};

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

@@ -1,10 +0,0 @@
-{
-  "title": "Reviews",
-  "noReviews": "No reviews yet",
-  "verified": "Verified Purchase",
-  "helpful": "{{count}} found this helpful",
-  "writeReview": "Write a Review",
-  "rating": "Rating",
-  "yourReview": "Your Review",
-  "submit": "Submit Review"
-}

package/src/features/reviews/repository/reviews.repository.ts

@@ -1,69 +0,0 @@
-import type {
-  IRepository,
-  PagedResult,
-  SieveQuery,
-} from "../../../contracts";
-import type { Review, ReviewStatus } from "../types";
-
-export class ReviewsRepository {
-  constructor(private readonly repo: IRepository<Review>) {}
-
-  async findAll(query?: SieveQuery): Promise<PagedResult<Review>> {
-    return this.repo.findAll(query ?? {});
-  }
-
-  async findByProduct(
-    productId: string,
-    page = 1,
-    perPage = 10,
-  ): Promise<PagedResult<Review>> {
-    return this.repo.findAll({
-      filters: `productId==${productId},status==approved`,
-      sort: "-createdAt",
-      page,
-      perPage,
-    });
-  }
-
-  async findByUser(
-    userId: string,
-    page = 1,
-    perPage = 10,
-  ): Promise<PagedResult<Review>> {
-    return this.repo.findAll({
-      filters: `userId==${userId}`,
-      sort: "-createdAt",
-      page,
-      perPage,
-    });
-  }
-
-  async findPending(page = 1, perPage = 20): Promise<PagedResult<Review>> {
-    return this.repo.findAll({
-      filters: "status==pending",
-      sort: "createdAt",
-      page,
-      perPage,
-    });
-  }
-
-  async findById(id: string): Promise<Review | null> {
-    return this.repo.findById(id);
-  }
-
-  async create(data: Omit<Review, "id">): Promise<Review> {
-    return this.repo.create(data);
-  }
-
-  async update(id: string, data: Partial<Review>): Promise<Review> {
-    return this.repo.update(id, data);
-  }
-
-  async delete(id: string): Promise<void> {
-    return this.repo.delete(id);
-  }
-
-  async updateStatus(id: string, status: ReviewStatus): Promise<Review> {
-    return this.repo.update(id, { status });
-  }
-}

package/src/features/reviews/schemas/index.ts

@@ -1,74 +0,0 @@
-import { z } from "zod";
-
-// ─── Sub-schemas ──────────────────────────────────────────────────────────────
-
-export const reviewStatusSchema = z.enum(["pending", "approved", "rejected"]);
-
-export const reviewImageSchema = z.object({
-  url: z.string(),
-  thumbnailUrl: z.string().optional(),
-});
-
-export const reviewVideoSchema = z.object({
-  url: z.string(),
-  thumbnailUrl: z.string().optional(),
-  duration: z.number().optional(),
-  trimStart: z.number().optional(),
-  trimEnd: z.number().optional(),
-});
-
-// ─── Base item schema ─────────────────────────────────────────────────────────
-
-/**
- * Base Zod schema for a review.
- * Apps can extend this to add their own fields:
- *
- * @example
- * import { reviewSchema } from "@mohasinac/feat-reviews";
- *
- * const myReviewSchema = reviewSchema.extend({
- *   purchaseVerifiedAt: z.string().optional(),
- *   loyaltyPointsAwarded: z.number().optional(),
- * });
- * type MyReview = z.infer<typeof myReviewSchema>;
- */
-export const reviewSchema = z.object({
-  id: z.string(),
-  productId: z.string(),
-  productTitle: z.string().optional(),
-  sellerId: z.string().optional(),
-  userId: z.string(),
-  userName: z.string(),
-  userAvatar: z.string().optional(),
-  rating: z.union([
-    z.literal(1),
-    z.literal(2),
-    z.literal(3),
-    z.literal(4),
-    z.literal(5),
-  ]),
-  title: z.string().optional(),
-  comment: z.string().optional(),
-  images: z.array(reviewImageSchema).optional(),
-  video: reviewVideoSchema.optional(),
-  status: reviewStatusSchema,
-  helpfulCount: z.number().optional(),
-  reportCount: z.number().optional(),
-  verified: z.boolean().optional(),
-  featured: z.boolean().optional(),
-  createdAt: z.string().optional(),
-  updatedAt: z.string().optional(),
-});
-
-/** Base schema for list-query parameters. */
-export const reviewListParamsSchema = z.object({
-  productId: z.string().optional(),
-  userId: z.string().optional(),
-  sellerId: z.string().optional(),
-  status: reviewStatusSchema.optional(),
-  rating: z.coerce.number().optional(),
-  featured: z.coerce.boolean().optional(),
-  page: z.coerce.number().optional(),
-  perPage: z.coerce.number().optional(),
-  sort: z.string().optional(),
-});

package/src/features/reviews/server.ts

@@ -1,12 +0,0 @@
-/**
- * @mohasinac/appkit/features/reviews/server
- *
- * Server-only entry point — exports only the API route handlers.
- */
-
-export { GET as reviewsGET, GET, POST } from "./api/route";
-export {
-  reviewItemGET,
-  reviewItemPATCH,
-  reviewItemDELETE,
-} from "./api/[id]/route";

package/src/features/reviews/types/index.ts

@@ -1,68 +0,0 @@
-export type ReviewStatus = "pending" | "approved" | "rejected";
-
-export interface ReviewImage {
-  url: string;
-  thumbnailUrl?: string;
-}
-
-export interface ReviewVideo {
-  url: string;
-  thumbnailUrl?: string;
-  duration?: number;
-  trimStart?: number;
-  trimEnd?: number;
-}
-
-export interface Review {
-  id: string;
-  productId: string;
-  productTitle?: string;
-  sellerId?: string;
-  userId: string;
-  userName: string;
-  userAvatar?: string;
-  rating: 1 | 2 | 3 | 4 | 5;
-  title?: string;
-  comment?: string;
-  images?: ReviewImage[];
-  video?: ReviewVideo;
-  status: ReviewStatus;
-  helpfulCount?: number;
-  reportCount?: number;
-  verified?: boolean;
-  featured?: boolean;
-  createdAt?: string;
-  updatedAt?: string;
-}
-
-export interface ReviewListResponse {
-  items: Review[];
-  total: number;
-  page: number;
-  pageSize: number;
-  totalPages: number;
-  hasMore: boolean;
-  averageRating?: number;
-  ratingDistribution?: Record<number, number>;
-}
-
-export interface ReviewListParams {
-  productId?: string;
-  userId?: string;
-  sellerId?: string;
-  status?: ReviewStatus;
-  rating?: number;
-  featured?: boolean;
-  page?: number;
-  perPage?: number;
-  sort?: string;
-}
-
-export interface CreateReviewInput {
-  productId: string;
-  rating: number;
-  title?: string;
-  comment?: string;
-  images?: ReviewImage[];
-  video?: ReviewVideo;
-}