@mohasinac/appkit 2.1.3 → 2.3.0

package/src/features/events/components/AdminEventsView.tsx

@@ -1,47 +0,0 @@
-import React from "react";
-
-export interface AdminEventsViewProps {
-  /** Toolbar: search + sort controls */
-  renderToolbar?: () => React.ReactNode;
-  /** Filter sidebar / drawer content */
-  renderFilters?: () => React.ReactNode;
-  /** Active filter chips row */
-  renderActiveFilters?: () => React.ReactNode;
-  /** Data table / grid */
-  renderTable: () => React.ReactNode;
-  /** Pagination footer */
-  renderPagination?: () => React.ReactNode;
-  /** Create / edit event form drawer */
-  renderFormDrawer?: () => React.ReactNode;
-  /** Page header (title + "New Event" button) */
-  renderHeader?: () => React.ReactNode;
-  /** Bulk action bar — shown when rows are selected */
-  renderBulkActions?: () => React.ReactNode;
-  isLoading?: boolean;
-  className?: string;
-}
-
-export function AdminEventsView({
-  renderToolbar,
-  renderFilters,
-  renderActiveFilters,
-  renderTable,
-  renderPagination,
-  renderFormDrawer,
-  renderHeader,
-  renderBulkActions,
-  className = "",
-}: AdminEventsViewProps) {
-  return (
-    <div className={`space-y-4 ${className}`}>
-      {renderHeader?.()}
-      {renderToolbar?.()}
-      {renderFilters?.()}
-      {renderActiveFilters?.()}
-      {renderBulkActions?.()}
-      {renderTable()}
-      {renderPagination?.()}
-      {renderFormDrawer?.()}
-    </div>
-  );
-}

package/src/features/events/components/EventCard.tsx

@@ -1,88 +0,0 @@
-import { Article, Button, Div, Heading, Span, Text } from "../../../ui";
-import { stripHtml } from "../../../utils/string.formatter";
-import type { EventItem, EventType } from "../types";
-import { EventStatusBadge } from "./EventStatusBadge";
-
-const TYPE_ICONS: Record<EventType, string> = {
-  sale: "🏷️",
-  offer: "🎁",
-  poll: "📊",
-  survey: "📝",
-  feedback: "💬",
-};
-
-interface EventCardProps {
-  event: EventItem;
-  labels?: {
-    participate?: string;
-    viewResults?: string;
-    entries?: string;
-  };
-  onParticipate?: (event: EventItem) => void;
-  className?: string;
-}
-
-export function EventCard({
-  event,
-  labels = {},
-  onParticipate,
-  className = "",
-}: EventCardProps) {
-  const now = new Date();
-  const endsAt = new Date(event.endsAt);
-  const msLeft = endsAt.getTime() - now.getTime();
-  const daysLeft = Math.max(0, Math.ceil(msLeft / (1000 * 60 * 60 * 24)));
-
-  return (
-    <Article
-      className={`flex flex-col h-full rounded-xl border border-gray-200 bg-white overflow-hidden shadow-sm hover:shadow-md transition-shadow ${className}`}
-    >
-      {event.coverImageUrl && (
-        <Div className="aspect-video overflow-hidden">
-          <Div
-            role="img"
-            aria-label={event.title}
-            className="h-full w-full bg-cover bg-center"
-            style={{ backgroundImage: `url(${event.coverImageUrl})` }}
-          />
-        </Div>
-      )}
-      <Div className="p-4 flex-1 flex flex-col">
-        <Div className="flex items-start justify-between gap-2 mb-2">
-          <Span className="text-lg" aria-hidden="true">
-            {TYPE_ICONS[event.type]}
-          </Span>
-          <EventStatusBadge status={event.status} />
-        </Div>
-        <Heading
-          level={3}
-          className="font-semibold text-gray-900 text-base leading-snug mb-1"
-        >
-          {event.title}
-        </Heading>
-        <Text className="text-sm text-gray-500 line-clamp-2 mb-3">
-          {stripHtml(event.description ?? "")}
-        </Text>
-
-        <Div className="flex items-center justify-between text-xs text-gray-400 mb-3">
-          {event.status === "active" && daysLeft > 0 && (
-            <Span>{daysLeft}d remaining</Span>
-          )}
-          <Span>
-            {event.stats.totalEntries} {labels.entries ?? "entries"}
-          </Span>
-        </Div>
-
-        {event.status === "active" && onParticipate && (
-          <Button
-            type="button"
-            onClick={() => onParticipate(event)}
-            className="w-full rounded-lg bg-orange-500 py-2 text-sm font-medium text-white hover:bg-orange-600 transition-colors"
-          >
-            {labels.participate ?? "Participate"}
-          </Button>
-        )}
-      </Div>
-    </Article>
-  );
-}

package/src/features/events/components/EventDetailView.tsx

@@ -1,51 +0,0 @@
-import React from "react";
-
-export interface EventDetailViewProps {
-  isLoading?: boolean;
-  /** Render the cover image */
-  renderCoverImage?: () => React.ReactNode;
-  /** Render status badge + basic header (title, dates) */
-  renderHeader?: () => React.ReactNode;
-  /** Render the type-specific interactive section (poll / survey / feedback / offer CTA) */
-  renderContent?: () => React.ReactNode;
-  /** Render an optional leaderboard section */
-  renderLeaderboard?: () => React.ReactNode;
-  /** Render a "participate" / "enter now" call-to-action when the event is active */
-  renderParticipateAction?: () => React.ReactNode;
-  /** Loading skeleton — provided by caller for brand-consistent skeleton */
-  renderSkeleton?: () => React.ReactNode;
-  /** Not-found / error state */
-  renderNotFound?: () => React.ReactNode;
-  className?: string;
-}
-
-export function EventDetailView({
-  isLoading = false,
-  renderCoverImage,
-  renderHeader,
-  renderContent,
-  renderLeaderboard,
-  renderParticipateAction,
-  renderSkeleton,
-  renderNotFound,
-  className = "",
-}: EventDetailViewProps) {
-  if (isLoading) {
-    if (renderSkeleton) return <>{renderSkeleton()}</>;
-    return <div className="flex justify-center py-20">Loading…</div>;
-  }
-
-  if (renderNotFound) {
-    return <>{renderNotFound()}</>;
-  }
-
-  return (
-    <div className={`max-w-3xl mx-auto space-y-6 ${className}`}>
-      {renderCoverImage?.()}
-      {renderHeader?.()}
-      {renderContent?.()}
-      {renderParticipateAction?.()}
-      {renderLeaderboard?.()}
-    </div>
-  );
-}

package/src/features/events/components/EventFormDrawer.tsx

@@ -1,47 +0,0 @@
-import React from "react";
-import type { EventType } from "../types";
-
-export interface EventFormDrawerProps {
-  isOpen: boolean;
-  onClose: () => void;
-  mode?: "create" | "edit";
-  eventType?: EventType;
-  /** Render the drawer header (title and close button) */
-  renderHeader?: () => React.ReactNode;
-  /** Render the base fields (title, description, dates, cover image) */
-  renderBaseFields?: () => React.ReactNode;
-  /** Render the media fields (cover, gallery, winners, additional) */
-  renderMediaFields?: () => React.ReactNode;
-  /** Render the type-specific config form */
-  renderTypeConfig?: () => React.ReactNode;
-  /** Render the type selector (shown only in create mode) */
-  renderTypeSelector?: () => React.ReactNode;
-  /** Render the footer actions (save/cancel) */
-  renderFooter?: () => React.ReactNode;
-  className?: string;
-}
-
-export function EventFormDrawer({
-  isOpen,
-  onClose,
-  renderHeader,
-  renderBaseFields,
-  renderMediaFields,
-  renderTypeConfig,
-  renderTypeSelector,
-  renderFooter,
-  className = "",
-}: EventFormDrawerProps) {
-  if (!isOpen) return null;
-
-  return (
-    <div className={`space-y-6 ${className}`}>
-      {renderHeader?.()}
-      {renderTypeSelector?.()}
-      {renderBaseFields?.()}
-      {renderMediaFields?.()}
-      {renderTypeConfig?.()}
-      {renderFooter?.()}
-    </div>
-  );
-}

package/src/features/events/components/EventLeaderboard.tsx

@@ -1,76 +0,0 @@
-import React from "react";
-import { Span, Text } from "../../../ui";
-import type { LeaderboardEntry } from "../types";
-
-export interface EventLeaderboardProps {
-  isLoading?: boolean;
-  isEmpty?: boolean;
-  /** Render the full ranked list — caller provides entries via hook */
-  renderList?: () => React.ReactNode;
-  /** Render a single row; used when caller wants item-level control */
-  renderEntry?: (entry: LeaderboardEntry, index: number) => React.ReactNode;
-  /** Entries — used only when renderEntry is provided */
-  entries?: LeaderboardEntry[];
-  /** Empty state node */
-  renderEmpty?: () => React.ReactNode;
-  /** Loading spinner / skeleton */
-  renderSkeleton?: () => React.ReactNode;
-  labels?: {
-    title?: string;
-    noEntries?: string;
-    points?: string;
-  };
-  className?: string;
-}
-
-export function EventLeaderboard({
-  isLoading = false,
-  isEmpty = false,
-  renderList,
-  renderEntry,
-  entries = [],
-  renderEmpty,
-  renderSkeleton,
-  labels = {},
-  className = "",
-}: EventLeaderboardProps) {
-  if (isLoading) {
-    if (renderSkeleton) return <>{renderSkeleton()}</>;
-    return <div className="flex justify-center py-8">Loading…</div>;
-  }
-
-  if (isEmpty) {
-    if (renderEmpty) return <>{renderEmpty()}</>;
-    return (
-      <Text variant="secondary" size="sm" className="text-center py-4">
-        {labels.noEntries ?? "No entries yet."}
-      </Text>
-    );
-  }
-
-  if (renderList) return <div className={className}>{renderList()}</div>;
-
-  return (
-    <div className={`space-y-2 ${className}`}>
-      {entries.map((entry, i) =>
-        renderEntry ? (
-          <React.Fragment key={entry.userId}>
-            {renderEntry(entry, i)}
-          </React.Fragment>
-        ) : (
-          <div
-            key={entry.userId}
-            className="flex items-center justify-between p-3 rounded-xl border"
-          >
-            <Span className="font-medium">
-              #{entry.rank} {entry.userDisplayName}
-            </Span>
-            <Span>
-              {entry.points} {labels.points ?? "pts"}
-            </Span>
-          </div>
-        ),
-      )}
-    </div>
-  );
-}

package/src/features/events/components/EventParticipateView.tsx

@@ -1,48 +0,0 @@
-import React from "react";
-
-export interface EventParticipateViewProps {
-  isLoading?: boolean;
-  isSubmitted?: boolean;
-  /** Render the event title / summary at the top of the form */
-  renderEventInfo?: () => React.ReactNode;
-  /** Render the participation form fields (survey, poll options, etc.) */
-  renderForm?: () => React.ReactNode;
-  /** Render the submit button / action row */
-  renderAction?: () => React.ReactNode;
-  /** Render the success confirmation after submission */
-  renderSuccess?: () => React.ReactNode;
-  /** Loading skeleton */
-  renderSkeleton?: () => React.ReactNode;
-  /** Redirect/gate when user is not authenticated */
-  renderAuthGate?: () => React.ReactNode;
-  className?: string;
-}
-
-export function EventParticipateView({
-  isLoading = false,
-  isSubmitted = false,
-  renderEventInfo,
-  renderForm,
-  renderAction,
-  renderSuccess,
-  renderSkeleton,
-  renderAuthGate,
-  className = "",
-}: EventParticipateViewProps) {
-  if (isLoading) {
-    if (renderSkeleton) return <>{renderSkeleton()}</>;
-    return <div className="flex justify-center py-20">Loading…</div>;
-  }
-
-  if (renderAuthGate) return <>{renderAuthGate()}</>;
-
-  if (isSubmitted && renderSuccess) return <>{renderSuccess()}</>;
-
-  return (
-    <div className={`max-w-xl mx-auto space-y-6 ${className}`}>
-      {renderEventInfo?.()}
-      {renderForm?.()}
-      {renderAction?.()}
-    </div>
-  );
-}

package/src/features/events/components/EventStatusBadge.tsx

@@ -1,28 +0,0 @@
-import { Span } from "../../../ui";
-import type { EventStatus } from "../types";
-
-const STATUS_MAP: Record<EventStatus, { label: string; color: string }> = {
-  draft: { label: "Draft", color: "bg-gray-100 text-gray-700" },
-  active: { label: "Active", color: "bg-green-100 text-green-700" },
-  paused: { label: "Paused", color: "bg-yellow-100 text-yellow-700" },
-  ended: { label: "Ended", color: "bg-red-100 text-red-600" },
-};
-
-interface EventStatusBadgeProps {
-  status: EventStatus;
-  className?: string;
-}
-
-export function EventStatusBadge({
-  status,
-  className = "",
-}: EventStatusBadgeProps) {
-  const { label, color } = STATUS_MAP[status] ?? STATUS_MAP.draft;
-  return (
-    <Span
-      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${color} ${className}`}
-    >
-      {label}
-    </Span>
-  );
-}

package/src/features/events/components/EventsListView.tsx

@@ -1,100 +0,0 @@
-import React from "react";
-import { Div, Pagination, Text } from "../../../ui";
-import type { LayoutSlots } from "../../../contracts";
-import type { EventItem } from "../types";
-import { EventCard } from "./EventCard";
-
-interface EventsListViewProps<T extends EventItem = EventItem> {
-  events: T[];
-  isLoading?: boolean;
-  totalPages?: number;
-  currentPage?: number;
-  total?: number;
-  onPageChange?: (page: number) => void;
-  onParticipate?: (event: T) => void;
-  emptyLabel?: string;
-  /** Render-prop slot overrides — pass via `FeatureExtension.slots`. */
-  slots?: LayoutSlots<T>;
-}
-
-export function EventsListView<T extends EventItem = EventItem>({
-  events,
-  isLoading,
-  totalPages = 1,
-  currentPage = 1,
-  total = 0,
-  onPageChange,
-  onParticipate,
-  emptyLabel = "No events found",
-  slots,
-}: EventsListViewProps<T>) {
-  if (isLoading) {
-    return (
-      <Div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-        {Array.from({ length: 6 }).map((_, i) => (
-          <Div
-            key={i}
-            className="animate-pulse overflow-hidden rounded-xl border border-neutral-200 bg-neutral-100"
-          >
-            <Div className="aspect-video bg-neutral-200" />
-            <Div className="space-y-2 p-4">
-              <Div className="h-4 w-16 rounded bg-neutral-200" />
-              <Div className="h-5 w-full rounded bg-neutral-200" />
-              <Div className="h-4 w-3/4 rounded bg-neutral-200" />
-            </Div>
-          </Div>
-        ))}
-      </Div>
-    );
-  }
-
-  if (events.length === 0) {
-    if (slots?.renderEmptyState) {
-      return <>{slots.renderEmptyState() as React.ReactNode}</>;
-    }
-    return (
-      <Text className="py-12 text-center text-sm text-neutral-500">
-        {emptyLabel}
-      </Text>
-    );
-  }
-
-  return (
-    <Div className="space-y-8">
-      {slots?.renderHeader
-        ? (slots.renderHeader({ total }) as React.ReactNode)
-        : null}
-      <Div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-        {events.map((event, i) =>
-          slots?.renderCard ? (
-            <React.Fragment key={event.id}>
-              {slots.renderCard(event, i) as React.ReactNode}
-            </React.Fragment>
-          ) : (
-            <EventCard
-              key={event.id}
-              event={event as EventItem}
-              onParticipate={
-                onParticipate ? (e) => onParticipate(e as T) : undefined
-              }
-            />
-          ),
-        )}
-      </Div>
-      {slots?.renderFooter ? (
-        (slots.renderFooter({
-          page: currentPage,
-          totalPages,
-        }) as React.ReactNode)
-      ) : totalPages > 1 && onPageChange ? (
-        <Div className="flex justify-center">
-          <Pagination
-            currentPage={currentPage}
-            totalPages={totalPages}
-            onPageChange={onPageChange}
-          />
-        </Div>
-      ) : null}
-    </Div>
-  );
-}

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

@@ -1,15 +0,0 @@
-export { EventStatusBadge } from "./EventStatusBadge";
-export { EventCard } from "./EventCard";
-export { EventsListView } from "./EventsListView";
-export { EventDetailView } from "./EventDetailView";
-export type { EventDetailViewProps } from "./EventDetailView";
-export { EventParticipateView } from "./EventParticipateView";
-export type { EventParticipateViewProps } from "./EventParticipateView";
-export { EventLeaderboard } from "./EventLeaderboard";
-export type { EventLeaderboardProps } from "./EventLeaderboard";
-export { AdminEventsView } from "./AdminEventsView";
-export type { AdminEventsViewProps } from "./AdminEventsView";
-export { AdminEventEntriesView } from "./AdminEventEntriesView";
-export type { AdminEventEntriesViewProps } from "./AdminEventEntriesView";
-export { EventFormDrawer } from "./EventFormDrawer";
-export type { EventFormDrawerProps } from "./EventFormDrawer";

package/src/features/events/hooks/useEvent.ts

@@ -1,94 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { apiClient } from "../../../http";
-import type {
-  EventItem,
-  EventEntryListResponse,
-  LeaderboardEntry,
-} from "../types";
-
-interface UseEventOptions<T extends EventItem = EventItem> {
-  enabled?: boolean;
-  initialData?: EventItem;
-  /**
-   * Map the API item to a richer app-level type without forking the package.
-   * @example
-   * const { event } = useEvent<EventDocument>(id, {
-   *   transform: (raw) => ({ ...raw, registrationCount: 0 }),
-   * });
-   */
-  transform?: (item: EventItem) => T;
-}
-
-export function useEvent<T extends EventItem = EventItem>(
-  id: string,
-  opts?: UseEventOptions<T>,
-) {
-  const { data, isLoading, error, refetch } = useQuery<EventItem | null>({
-    queryKey: ["event", id],
-    queryFn: () => apiClient.get<EventItem>(`/api/events/${id}`),
-    enabled: (opts?.enabled ?? true) && !!id,
-    initialData: opts?.initialData,
-  });
-
-  const event =
-    data && opts?.transform ? opts.transform(data) : (data as T | null);
-
-  return {
-    event: event ?? null,
-    isLoading,
-    error: error instanceof Error ? error.message : null,
-    refetch,
-  };
-}
-
-export function useEventEntries(
-  eventId: string,
-  params: { page?: number; pageSize?: number; reviewStatus?: string } = {},
-  opts?: { enabled?: boolean },
-) {
-  const sp = new URLSearchParams();
-  if (params.page) sp.set("page", String(params.page));
-  if (params.pageSize) sp.set("pageSize", String(params.pageSize));
-  if (params.reviewStatus) sp.set("reviewStatus", params.reviewStatus);
-  const qs = sp.toString();
-
-  const { data, isLoading, error, refetch } = useQuery<EventEntryListResponse>({
-    queryKey: ["event-entries", eventId, qs],
-    queryFn: () =>
-      apiClient.get<EventEntryListResponse>(
-        `/api/events/${eventId}/entries${qs ? `?${qs}` : ""}`,
-      ),
-    enabled: (opts?.enabled ?? true) && !!eventId,
-  });
-
-  return {
-    entries: data?.items ?? [],
-    total: data?.total ?? 0,
-    isLoading,
-    error: error instanceof Error ? error.message : null,
-    refetch,
-  };
-}
-
-export function useEventLeaderboard(
-  eventId: string,
-  limit = 10,
-  opts?: { enabled?: boolean },
-) {
-  const { data, isLoading, error } = useQuery<LeaderboardEntry[]>({
-    queryKey: ["event-leaderboard", eventId, limit],
-    queryFn: () =>
-      apiClient.get<LeaderboardEntry[]>(
-        `/api/events/${eventId}/leaderboard?limit=${limit}`,
-      ),
-    enabled: (opts?.enabled ?? true) && !!eventId,
-  });
-
-  return {
-    leaderboard: data ?? [],
-    isLoading,
-    error: error instanceof Error ? error.message : null,
-  };
-}

package/src/features/events/hooks/useEvents.ts

@@ -1,59 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { apiClient } from "../../../http";
-import type { EventItem, EventListResponse, EventListParams } from "../types";
-
-interface UseEventsOptions<T extends EventItem = EventItem> {
-  enabled?: boolean;
-  initialData?: EventListResponse;
-  /**
-   * Map each API item to a richer app-level type.
-   * The API always returns `EventItem`; use this to project it to your own
-   * extended type without forking the package.
-   *
-   * @example
-   * const { events } = useEvents<EventDocument>(params, {
-   *   transform: (raw) => ({ ...raw, localizedTitle: t(raw.title) }),
-   * });
-   */
-  transform?: (item: EventItem) => T;
-}
-
-export function useEvents<T extends EventItem = EventItem>(
-  params: EventListParams = {},
-  opts?: UseEventsOptions<T>,
-) {
-  const sp = new URLSearchParams();
-  if (params.status) sp.set("status", params.status);
-  if (params.type) sp.set("type", params.type);
-  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<EventListResponse>({
-    queryKey: ["events", qs],
-    queryFn: () =>
-      apiClient.get<EventListResponse>(`/api/events${qs ? `?${qs}` : ""}`),
-    enabled: opts?.enabled ?? true,
-    initialData: opts?.initialData,
-  });
-
-  const rawItems = data?.items ?? [];
-  const events = (
-    opts?.transform ? rawItems.map(opts.transform) : rawItems
-  ) as T[];
-
-  return {
-    events,
-    total: data?.total ?? 0,
-    totalPages: data?.totalPages ?? 0,
-    hasMore: data?.hasMore ?? false,
-    isLoading,
-    error: error instanceof Error ? error.message : null,
-    refetch,
-  };
-}

package/src/features/events/index.ts

@@ -1,11 +0,0 @@
-export * from "./types";
-export * from "./hooks/useEvents";
-export * from "./hooks/useEvent";
-export * from "./components";
-export * from "./schemas";
-export * from "./columns";
-export {
-  EventsRepository,
-  EventEntriesRepository,
-} from "./repository/events.repository";
-export { manifest } from "./manifest";