@mohasinac/appkit 2.1.3 → 2.3.0

package/src/features/faq/components/RelatedFAQs.tsx

@@ -1,74 +0,0 @@
-"use client";
-
-import { Div, Heading, Text, TextLink } from "../../../ui";
-import type { FAQ } from "../types";
-
-interface RelatedFAQsProps {
-  relatedFAQs: FAQ[];
-  hrefForFaq?: (faq: FAQ) => string;
-  labels?: {
-    title?: string;
-  };
-}
-
-export function RelatedFAQs({
-  relatedFAQs,
-  hrefForFaq,
-  labels,
-}: RelatedFAQsProps) {
-  if (!relatedFAQs || relatedFAQs.length === 0) {
-    return null;
-  }
-
-  return (
-    <Div className="rounded-xl border border-zinc-200 bg-white p-6 dark:border-slate-700 dark:bg-slate-800/60">
-      <Heading level={3} className="mb-4 text-lg font-semibold">
-        {labels?.title ?? "Related Questions"}
-      </Heading>
-
-      <Div className="space-y-3">
-        {relatedFAQs.map((faq) => (
-          <TextLink
-            key={faq.id}
-            href={hrefForFaq ? hrefForFaq(faq) : `/faqs#${faq.id}`}
-            className="group block rounded-lg bg-zinc-100 p-4 transition-colors hover:bg-zinc-200 dark:bg-slate-700 dark:hover:bg-slate-600"
-          >
-            <Div className="flex items-start gap-3">
-              <svg
-                className="mt-0.5 h-5 w-5 flex-shrink-0 text-zinc-500 dark:text-zinc-400"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-
-              <Text className="text-sm text-zinc-800 transition-colors group-hover:text-primary dark:text-zinc-100">
-                {faq.question}
-              </Text>
-
-              <svg
-                className="ml-auto mt-0.5 h-4 w-4 flex-shrink-0 text-zinc-500 opacity-0 transition-opacity group-hover:opacity-100 dark:text-zinc-400"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M9 5l7 7-7 7"
-                />
-              </svg>
-            </Div>
-          </TextLink>
-        ))}
-      </Div>
-    </Div>
-  );
-}

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

@@ -1,9 +0,0 @@
-export { FAQAccordion, FAQCategoryTabs } from "./FAQAccordion";
-export { FAQCategorySidebar } from "./FAQCategorySidebar";
-export type { FAQCategoryItem } from "./FAQCategorySidebar";
-export { FAQSortDropdown } from "./FAQSortDropdown";
-export type { FAQSortOption } from "./FAQSortDropdown";
-export { FAQHelpfulButtons } from "./FAQHelpfulButtons";
-export { RelatedFAQs } from "./RelatedFAQs";
-export { ContactCTA } from "./ContactCTA";
-export { FAQPageContent } from "./FAQPageContent";

package/src/features/faq/hooks/useFAQs.ts

@@ -1,50 +0,0 @@
-"use client";
-import { useQuery } from "@tanstack/react-query";
-import { apiClient } from "../../../http";
-import type { FAQ, FAQListResponse, FAQListParams } from "../types";
-
-interface UseFAQsOptions {
-  initialData?: FAQListResponse;
-  enabled?: boolean;
-}
-
-export function useFAQs(params: FAQListParams = {}, opts?: UseFAQsOptions) {
-  const sp = new URLSearchParams();
-  if (params.category) sp.set("category", params.category);
-  if (params.homepage !== undefined)
-    sp.set("homepage", String(params.homepage));
-  if (params.q) sp.set("q", params.q);
-  if (params.page) sp.set("page", String(params.page));
-  if (params.perPage) sp.set("perPage", String(params.perPage));
-  const qs = sp.toString();
-
-  const query = useQuery<FAQListResponse>({
-    queryKey: ["faqs", qs],
-    queryFn: () =>
-      apiClient.get<FAQListResponse>(`/api/faqs${qs ? `?${qs}` : ""}`),
-    initialData: opts?.initialData,
-    enabled: opts?.enabled,
-    staleTime: 10 * 60 * 1000,
-  });
-
-  return {
-    faqs: query.data?.items ?? [],
-    total: query.data?.total ?? 0,
-    isLoading: query.isLoading,
-    error: query.error,
-  };
-}
-
-export function useFAQ(
-  id: string,
-  opts?: { initialData?: FAQ; enabled?: boolean },
-) {
-  const query = useQuery<FAQ>({
-    queryKey: ["faqs", id],
-    queryFn: () => apiClient.get<FAQ>(`/api/faqs/${id}`),
-    initialData: opts?.initialData,
-    enabled: opts?.enabled !== false && !!id,
-  });
-
-  return { faq: query.data, isLoading: query.isLoading, error: query.error };
-}

package/src/features/faq/hooks/useFaqList.ts

@@ -1,53 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { apiClient } from "../../../http";
-import type { FAQCategory, FAQListResponse } from "../types";
-
-interface UseFaqListOptions {
-  category?: FAQCategory;
-  search?: string;
-  tags?: string[];
-  showOnHomepage?: boolean;
-  page?: number;
-  pageSize?: number;
-  sorts?: string;
-  enabled?: boolean;
-  initialData?: FAQListResponse;
-}
-
-export function useFaqList(options: UseFaqListOptions = {}) {
-  const params = new URLSearchParams();
-
-  if (options.category) params.set("category", options.category);
-  if (options.search) params.set("search", options.search);
-  if (options.tags && options.tags.length > 0) {
-    params.set("tags", options.tags.join(","));
-  }
-  if (options.showOnHomepage !== undefined) {
-    params.set("showOnHomepage", String(options.showOnHomepage));
-  }
-  params.set("page", String(options.page ?? 1));
-  params.set("pageSize", String(options.pageSize ?? 20));
-  if (options.sorts) params.set("sorts", options.sorts);
-
-  const queryString = params.toString();
-
-  const query = useQuery<FAQListResponse>({
-    queryKey: ["faqs", queryString],
-    queryFn: () =>
-      apiClient.get<FAQListResponse>(
-        `/api/faqs${queryString ? `?${queryString}` : ""}`,
-      ),
-    enabled: options.enabled,
-    initialData: options.initialData,
-    staleTime: 5 * 60 * 1000,
-  });
-
-  return {
-    ...query,
-    faqs: query.data?.items ?? [],
-    total: query.data?.total ?? 0,
-    categories: query.data?.categories ?? [],
-  };
-}

package/src/features/faq/index.ts

@@ -1,8 +0,0 @@
-export * from "./types";
-export * from "./hooks/useFAQs";
-export * from "./hooks/useFaqList";
-export * from "./components";
-export * from "./schemas";
-export * from "./columns";
-export { FAQsRepository } from "./repository/faqs.repository";
-export { manifest } from "./manifest";

package/src/features/faq/manifest.ts

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

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

@@ -1,14 +0,0 @@
-{
-  "title": "Frequently Asked Questions",
-  "all": "All",
-  "noFAQs": "No questions found",
-  "category": {
-    "orders_payment": "Orders & Payment",
-    "shipping_delivery": "Shipping & Delivery",
-    "returns_refunds": "Returns & Refunds",
-    "product_information": "Product Information",
-    "account_security": "Account & Security",
-    "technical_support": "Technical Support",
-    "general": "General"
-  }
-}

package/src/features/faq/repository/faqs.repository.ts

@@ -1,61 +0,0 @@
-import type {
-  IRepository,
-  PagedResult,
-  SieveQuery,
-} from "../../../contracts";
-import type { FAQ, FAQCategory } from "../types";
-
-export class FAQsRepository {
-  constructor(private readonly repo: IRepository<FAQ>) {}
-
-  async findAll(query?: SieveQuery): Promise<PagedResult<FAQ>> {
-    const base: SieveQuery = { filters: "isActive==true", ...query };
-    if (query?.filters) {
-      base.filters = `isActive==true,${query.filters}`;
-    }
-    return this.repo.findAll(base);
-  }
-
-  async findByCategory(category: FAQCategory): Promise<FAQ[]> {
-    const result = await this.repo.findAll({
-      filters: `isActive==true,category==${category}`,
-      sort: "order",
-      perPage: 100,
-    });
-    return result.data;
-  }
-
-  async findForHomepage(): Promise<FAQ[]> {
-    const result = await this.repo.findAll({
-      filters: "isActive==true,showOnHomepage==true",
-      sort: "priority",
-      perPage: 10,
-    });
-    return result.data;
-  }
-
-  async findForFooter(): Promise<FAQ[]> {
-    const result = await this.repo.findAll({
-      filters: "isActive==true,showInFooter==true",
-      sort: "order",
-      perPage: 20,
-    });
-    return result.data;
-  }
-
-  async findById(id: string): Promise<FAQ | null> {
-    return this.repo.findById(id);
-  }
-
-  async create(data: Omit<FAQ, "id">): Promise<FAQ> {
-    return this.repo.create(data);
-  }
-
-  async update(id: string, data: Partial<FAQ>): Promise<FAQ> {
-    return this.repo.update(id, data);
-  }
-
-  async delete(id: string): Promise<void> {
-    return this.repo.delete(id);
-  }
-}

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

@@ -1,69 +0,0 @@
-import { z } from "zod";
-
-// ─── Sub-schemas ──────────────────────────────────────────────────────────────
-
-export const faqCategorySchema = z.enum([
-  "orders_payment",
-  "shipping_delivery",
-  "returns_refunds",
-  "product_information",
-  "account_security",
-  "technical_support",
-  "general",
-]);
-
-export const faqAnswerFormatSchema = z.enum(["plain", "markdown", "html"]);
-
-export const faqAnswerSchema = z.object({
-  text: z.string(),
-  format: faqAnswerFormatSchema,
-});
-
-export const faqStatsSchema = z.object({
-  views: z.number().optional(),
-  helpful: z.number().optional(),
-  notHelpful: z.number().optional(),
-});
-
-// ─── Base item schema ─────────────────────────────────────────────────────────
-
-/**
- * Base Zod schema for a FAQ item.
- * Apps can extend this to add their own fields:
- *
- * @example
- * import { faqSchema } from "@mohasinac/feat-faq";
- *
- * const myFaqSchema = faqSchema.extend({
- *   productId: z.string().optional(),
- *   videoUrl: z.string().optional(),
- * });
- * type MyFaq = z.infer<typeof myFaqSchema>;
- */
-export const faqSchema = z.object({
-  id: z.string(),
-  question: z.string(),
-  answer: faqAnswerSchema,
-  category: faqCategorySchema,
-  showOnHomepage: z.boolean().optional(),
-  showInFooter: z.boolean().optional(),
-  isPinned: z.boolean().optional(),
-  order: z.number().optional(),
-  priority: z.number().optional(),
-  tags: z.array(z.string()).optional(),
-  relatedFAQs: z.array(z.string()).optional(),
-  stats: faqStatsSchema.optional(),
-  seo: z.object({ slug: z.string().optional() }).optional(),
-  isActive: z.boolean().optional(),
-  createdAt: z.string().optional(),
-  updatedAt: z.string().optional(),
-});
-
-/** Base schema for list-query parameters. */
-export const faqListParamsSchema = z.object({
-  category: faqCategorySchema.optional(),
-  homepage: z.coerce.boolean().optional(),
-  q: z.string().optional(),
-  page: z.coerce.number().optional(),
-  perPage: z.coerce.number().optional(),
-});

package/src/features/faq/server.ts

@@ -1,7 +0,0 @@
-/**
- * @mohasinac/appkit/features/faq/server
- *
- * Server-only entry point for FAQ API route handlers.
- */
-
-export { GET as faqGET, GET } from "./api/route";

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

@@ -1,63 +0,0 @@
-export type FAQAnswerFormat = "plain" | "markdown" | "html";
-
-export type FAQCategory =
-  | "orders_payment"
-  | "shipping_delivery"
-  | "returns_refunds"
-  | "product_information"
-  | "account_security"
-  | "technical_support"
-  | "general";
-
-export interface FAQAnswer {
-  text: string;
-  format: FAQAnswerFormat;
-}
-
-export interface FAQStats {
-  views?: number;
-  helpful?: number;
-  notHelpful?: number;
-}
-
-export interface FAQ {
-  id: string;
-  question: string;
-  answer: FAQAnswer;
-  category: FAQCategory;
-  showOnHomepage?: boolean;
-  showInFooter?: boolean;
-  isPinned?: boolean;
-  order?: number;
-  priority?: number;
-  tags?: string[];
-  relatedFAQs?: string[];
-  stats?: FAQStats;
-  seo?: { slug?: string };
-  isActive?: boolean;
-  createdAt?: string;
-  updatedAt?: string;
-}
-
-export interface FAQListResponse {
-  items: FAQ[];
-  total: number;
-  page?: number;
-  pageSize?: number;
-  totalPages?: number;
-  hasMore?: boolean;
-  categories?: readonly string[];
-}
-
-export interface FAQListParams {
-  category?: FAQCategory;
-  homepage?: boolean;
-  q?: string;
-  search?: string;
-  tags?: string[];
-  showOnHomepage?: boolean;
-  page?: number;
-  perPage?: number;
-  pageSize?: number;
-  sorts?: string;
-}

package/src/features/filters/FilterFacetSection.tsx

@@ -1,205 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button, Div, Input, Span, Text } from "../../ui";
-import { cn } from "./filterUtils";
-import type { FilterOption } from "./filterUtils";
-
-export interface FacetOption extends FilterOption {
-  count?: number;
-}
-
-export interface FilterFacetSectionProps {
-  title: string;
-  options: FacetOption[];
-  selected: string[];
-  onChange: (selected: string[]) => void;
-  selectionMode?: "single" | "multi";
-  defaultCollapsed?: boolean;
-  searchable?: boolean;
-  /** Controlled open state */
-  isOpen?: boolean;
-  onToggle?: () => void;
-  onClear?: () => void;
-  className?: string;
-}
-
-/**
- * FilterFacetSection — collapsible checkbox/radio filter section.
- * Supports single-select and multi-select modes.
- */
-export function FilterFacetSection({
-  title,
-  options,
-  selected,
-  onChange,
-  selectionMode = "multi",
-  defaultCollapsed = true,
-  searchable = false,
-  isOpen: controlledOpen,
-  onToggle,
-  onClear,
-  className = "",
-}: FilterFacetSectionProps) {
-  const isControlled = controlledOpen !== undefined;
-  const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
-  const [search, setSearch] = useState("");
-
-  const isCollapsed = isControlled ? !controlledOpen : internalCollapsed;
-  const handleToggle = () => {
-    if (onToggle) onToggle();
-    else setInternalCollapsed((c) => !c);
-  };
-
-  const filtered = search
-    ? options.filter((o) =>
-        o.label.toLowerCase().includes(search.toLowerCase()),
-      )
-    : options;
-
-  const toggle = (value: string) => {
-    if (selectionMode === "single") {
-      onChange(selected.includes(value) ? [] : [value]);
-    } else {
-      onChange(
-        selected.includes(value)
-          ? selected.filter((v) => v !== value)
-          : [...selected, value],
-      );
-    }
-  };
-
-  const hasValue = selected.length > 0;
-
-  return (
-    <Div
-      className={cn(
-        "p-4 border-b border-zinc-200 dark:border-slate-700 last:border-b-0",
-        className,
-      )}
-    >
-      {/* Header */}
-      <Div className="flex items-center gap-2">
-        <Button
-          type="button"
-          onClick={handleToggle}
-          variant="ghost"
-          size="sm"
-          className="flex flex-1 items-center justify-between text-sm font-semibold text-zinc-900 dark:text-zinc-50 py-1 hover:opacity-80 transition-opacity"
-          aria-expanded={!isCollapsed}
-        >
-          <Span className="flex items-center gap-2">
-            {title}
-            {hasValue && (
-              <Span className="inline-flex items-center justify-center w-5 h-5 text-xs rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 ring-1 ring-emerald-600/20 dark:ring-emerald-400/20">
-                {selected.length}
-              </Span>
-            )}
-          </Span>
-          <svg
-            className={cn(
-              "w-4 h-4 text-zinc-500 dark:text-zinc-400 transition-transform duration-200",
-              isCollapsed ? "" : "rotate-180",
-            )}
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            strokeWidth={2}
-            aria-hidden="true"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M19 9l-7 7-7-7"
-            />
-          </svg>
-        </Button>
-        {onClear && hasValue && (
-          <Button
-            type="button"
-            onClick={onClear}
-            variant="ghost"
-            size="sm"
-            className="inline-flex items-center justify-center w-5 h-5 p-0 text-zinc-500 dark:text-zinc-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-zinc-100 dark:hover:bg-slate-700 transition-colors rounded-full"
-            aria-label="Clear filter"
-          >
-            <svg
-              className="w-3 h-3"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={2.5}
-              aria-hidden="true"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </Button>
-        )}
-      </Div>
-
-      {!isCollapsed && (
-        <Div className="mt-3 space-y-1">
-          {searchable && options.length > 8 && (
-            <Input
-              type="search"
-              placeholder="Search…"
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              className="w-full rounded-md border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-2.5 py-1.5 text-xs text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:focus:ring-secondary-400/20 mb-2"
-            />
-          )}
-          {filtered.map((option) => {
-            const isSelected = selected.includes(option.value);
-            return (
-              <Div
-                key={option.value}
-                className="flex items-center gap-2.5 py-1 cursor-pointer group"
-              >
-                {selectionMode === "single" ? (
-                  <input
-                    type="radio"
-                    checked={isSelected}
-                    onChange={() => toggle(option.value)}
-                    className={cn(
-                      "flex-shrink-0 border-zinc-300 dark:border-slate-600 cursor-pointer",
-                      "w-4 h-4 rounded-full text-primary-600 dark:text-secondary-500",
-                      "focus:ring-primary-500/30 dark:focus:ring-secondary-400/30",
-                    )}
-                  />
-                ) : (
-                  <input
-                    type="checkbox"
-                    checked={isSelected}
-                    onChange={() => toggle(option.value)}
-                    className={cn(
-                      "flex-shrink-0 border-zinc-300 dark:border-slate-600 cursor-pointer",
-                      "w-4 h-4 rounded text-primary-600 dark:text-secondary-500 checked:bg-primary-600 dark:checked:bg-secondary-500",
-                      "focus:ring-primary-500/30 dark:focus:ring-secondary-400/30",
-                    )}
-                  />
-                )}
-                <Span className="flex-1 text-sm text-zinc-700 dark:text-zinc-300 group-hover:text-zinc-900 dark:group-hover:text-zinc-100 transition-colors truncate">
-                  {option.label}
-                </Span>
-                {option.count !== undefined && (
-                  <Span className="text-xs text-zinc-400 dark:text-zinc-500 tabular-nums flex-shrink-0">
-                    {option.count}
-                  </Span>
-                )}
-              </Div>
-            );
-          })}
-          {filtered.length === 0 && (
-            <Text className="text-xs text-zinc-400 dark:text-zinc-500 py-1">
-              No results
-            </Text>
-          )}
-        </Div>
-      )}
-    </Div>
-  );
-}