@mohasinac/appkit 2.1.3 → 2.3.0

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

@@ -1,150 +0,0 @@
-import React, { useState } from "react";
-import { Button, Div, Row, Span, Text } from "../../../ui";
-import type { FAQ, FAQCategory } from "../types";
-
-interface FAQAccordionItemProps {
-  faq: FAQ;
-  isOpen: boolean;
-  onToggle: () => void;
-  renderExpandedFooter?: (faq: FAQ) => React.ReactNode;
-}
-
-function FAQAccordionItem({
-  faq,
-  isOpen,
-  onToggle,
-  renderExpandedFooter,
-}: FAQAccordionItemProps) {
-  return (
-    <Div className="border-b border-neutral-200 last:border-0">
-      <Button
-        onClick={onToggle}
-        aria-expanded={isOpen}
-        className="flex w-full items-center justify-between gap-4 py-4 text-left text-sm font-medium text-neutral-900 transition hover:text-primary"
-      >
-        <Span>{faq.question}</Span>
-        <Span
-          className={`flex-shrink-0 transition-transform ${isOpen ? "rotate-180" : ""}`}
-        >
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 16 16"
-            fill="none"
-            aria-hidden="true"
-          >
-            <path
-              d="M4 6l4 4 4-4"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </Span>
-      </Button>
-      {isOpen && (
-        <Div className="pb-4 text-sm text-neutral-600">
-          {faq.tags && faq.tags.length > 0 && (
-            <Row wrap gap="sm" className="mb-3">
-              {faq.tags.map((tag) => (
-                <Span
-                  key={tag}
-                  className="rounded-md bg-neutral-100 px-2 py-1 text-xs text-neutral-600"
-                >
-                  {tag}
-                </Span>
-              ))}
-            </Row>
-          )}
-          {faq.answer.format === "html" ? (
-            <Div
-              className="prose prose-sm max-w-none"
-              dangerouslySetInnerHTML={{ __html: faq.answer.text }}
-            />
-          ) : (
-            <Text className="whitespace-pre-line">{faq.answer.text}</Text>
-          )}
-          {renderExpandedFooter?.(faq)}
-        </Div>
-      )}
-    </Div>
-  );
-}
-
-export interface FAQAccordionProps {
-  faqs: FAQ[];
-  className?: string;
-  /** Render extra content inside the expanded panel (below the answer text). */
-  renderExpandedFooter?: (faq: FAQ) => React.ReactNode;
-  labels?: {
-    noResults?: string;
-  };
-}
-
-export function FAQAccordion({
-  faqs,
-  className = "",
-  renderExpandedFooter,
-  labels,
-}: FAQAccordionProps) {
-  const [openId, setOpenId] = useState<string | null>(null);
-
-  if (faqs.length === 0 && labels?.noResults) {
-    return (
-      <Div className="rounded-xl border border-neutral-200 bg-white p-8 text-center">
-        <Text className="text-neutral-600">{labels.noResults}</Text>
-      </Div>
-    );
-  }
-
-  return (
-    <Div
-      className={`divide-y divide-neutral-100 rounded-xl border border-neutral-200 bg-white px-5 ${className}`}
-    >
-      {faqs.map((faq) => (
-        <FAQAccordionItem
-          key={faq.id}
-          faq={faq}
-          isOpen={openId === faq.id}
-          onToggle={() => setOpenId(openId === faq.id ? null : faq.id)}
-          renderExpandedFooter={renderExpandedFooter}
-        />
-      ))}
-    </Div>
-  );
-}
-
-interface FAQCategoryTabsProps {
-  categories: FAQCategory[];
-  active?: FAQCategory | null;
-  onSelect: (cat: FAQCategory | null) => void;
-  labels?: Partial<Record<FAQCategory | "all", string>>;
-}
-
-export function FAQCategoryTabs({
-  categories,
-  active,
-  onSelect,
-  labels = {},
-}: FAQCategoryTabsProps) {
-  return (
-    <Row wrap gap="sm" className="scrollbar-none">
-      <Button
-        onClick={() => onSelect(null)}
-        className={`rounded-full px-4 py-1.5 text-sm font-medium transition ${!active ? "bg-neutral-900 text-white" : "bg-neutral-100 text-neutral-600 hover:bg-neutral-200"}`}
-      >
-        {labels.all ?? "All"}
-      </Button>
-      {categories.map((cat) => (
-        <Button
-          key={cat}
-          onClick={() => onSelect(cat)}
-          className={`whitespace-nowrap rounded-full px-4 py-1.5 text-sm font-medium capitalize transition ${active === cat ? "bg-neutral-900 text-white" : "bg-neutral-100 text-neutral-600 hover:bg-neutral-200"}`}
-        >
-          {labels[cat] ?? cat.replace(/_/g, " ")}
-        </Button>
-      ))}
-    </Row>
-  );
-}

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

@@ -1,124 +0,0 @@
-"use client";
-
-import { Div, Heading, Span, Text, TextLink } from "../../../ui";
-import type { FAQCategory } from "../types";
-
-export interface FAQCategoryItem {
-  key: FAQCategory;
-  icon?: string;
-  label: string;
-  description?: string;
-}
-
-interface FAQCategorySidebarProps {
-  selectedCategory: FAQCategory | "all";
-  onCategorySelect?: (category: FAQCategory | "all") => void;
-  categoryCounts: Record<FAQCategory, number>;
-  categories: FAQCategoryItem[];
-  allFaqsHref?: string;
-  categoryHref: (category: FAQCategory) => string;
-  contactHref?: string;
-  labels?: {
-    title?: string;
-    allFaqs?: string;
-    stillHaveQuestions?: string;
-    contactSupport?: string;
-  };
-}
-
-export function FAQCategorySidebar({
-  selectedCategory,
-  onCategorySelect,
-  categoryCounts,
-  categories,
-  allFaqsHref = "/faqs",
-  categoryHref,
-  contactHref,
-  labels,
-}: FAQCategorySidebarProps) {
-  const totalCount = Object.values(categoryCounts).reduce(
-    (sum, count) => sum + count,
-    0,
-  );
-
-  return (
-    <Div className="rounded-xl border border-zinc-200 bg-white p-6 dark:border-slate-700 dark:bg-slate-800/60">
-      <Heading level={2} className="mb-6 text-lg font-semibold">
-        {labels?.title ?? "Categories"}
-      </Heading>
-
-      <TextLink
-        href={allFaqsHref}
-        onClick={() => onCategorySelect?.("all")}
-        className={`mb-3 block w-full rounded-lg p-4 text-left transition-colors ${
-          selectedCategory === "all"
-            ? "bg-primary/10 text-zinc-900 dark:text-zinc-100"
-            : "text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-slate-700"
-        }`}
-      >
-        <Div className="flex items-center justify-between">
-          <Div className="flex items-center gap-3">
-            <Span className="text-2xl">FAQ</Span>
-            <Span className="text-sm font-medium">
-              {labels?.allFaqs ?? "All FAQs"}
-            </Span>
-          </Div>
-          <Span className="text-xs text-zinc-500 dark:text-zinc-400">
-            {totalCount}
-          </Span>
-        </Div>
-      </TextLink>
-
-      <Div className="mt-4 border-t border-zinc-200 pt-4 dark:border-slate-700">
-        {categories.map((category) => {
-          const isSelected = selectedCategory === category.key;
-          const count = categoryCounts[category.key] || 0;
-
-          return (
-            <TextLink
-              key={category.key}
-              href={categoryHref(category.key)}
-              onClick={() => onCategorySelect?.(category.key)}
-              className={`mb-3 block w-full rounded-lg p-4 text-left transition-colors ${
-                isSelected
-                  ? "bg-primary/10 text-zinc-900 dark:text-zinc-100"
-                  : "text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-slate-700"
-              }`}
-            >
-              <Div className="mb-1 flex items-center justify-between">
-                <Div className="flex items-center gap-3">
-                  {category.icon ? (
-                    <Span className="text-2xl">{category.icon}</Span>
-                  ) : null}
-                  <Span className="text-sm">{category.label}</Span>
-                </Div>
-                <Span className="text-xs text-zinc-500 dark:text-zinc-400">
-                  {count}
-                </Span>
-              </Div>
-              {isSelected && category.description ? (
-                <Text className="ml-11 text-xs text-zinc-500 dark:text-zinc-400">
-                  {category.description}
-                </Text>
-              ) : null}
-            </TextLink>
-          );
-        })}
-      </Div>
-
-      {contactHref ? (
-        <Div className="border-t border-zinc-200 pt-6 dark:border-slate-700">
-          <Text className="mb-3 text-sm text-zinc-600 dark:text-zinc-300">
-            {labels?.stillHaveQuestions ?? "Still have questions?"}
-          </Text>
-          <TextLink
-            href={contactHref}
-            className="block rounded-lg bg-primary p-4 text-center font-medium text-white transition-colors hover:bg-primary/90"
-          >
-            {labels?.contactSupport ?? "Contact Support"}
-          </TextLink>
-        </Div>
-      ) : null}
-    </Div>
-  );
-}

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

@@ -1,110 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button, Span, Text } from "../../../ui";
-
-interface FAQHelpfulButtonsProps {
-  faqId: string;
-  initialHelpful: number;
-  initialNotHelpful: number;
-  onVote: (input: {
-    faqId: string;
-    vote: "helpful" | "not-helpful";
-  }) => Promise<void>;
-  labels?: {
-    yes?: string;
-    no?: string;
-    wasThisHelpful?: string;
-    thanksForFeedback?: string;
-    voteFailed?: string;
-  };
-  onVoteError?: (message: string, error: unknown) => void;
-}
-
-export function FAQHelpfulButtons({
-  faqId,
-  initialHelpful,
-  initialNotHelpful,
-  onVote,
-  labels,
-  onVoteError,
-}: FAQHelpfulButtonsProps) {
-  const [helpful, setHelpful] = useState(initialHelpful);
-  const [notHelpful, setNotHelpful] = useState(initialNotHelpful);
-  const [userVote, setUserVote] = useState<"helpful" | "not-helpful" | null>(
-    null,
-  );
-  const [isPending, setIsPending] = useState(false);
-
-  const handleVote = async (isHelpful: boolean) => {
-    if (isPending || userVote) return;
-
-    try {
-      setIsPending(true);
-      await onVote({
-        faqId,
-        vote: isHelpful ? "helpful" : "not-helpful",
-      });
-
-      if (isHelpful) {
-        setHelpful((prev) => prev + 1);
-        setUserVote("helpful");
-      } else {
-        setNotHelpful((prev) => prev + 1);
-        setUserVote("not-helpful");
-      }
-    } catch (error) {
-      onVoteError?.(labels?.voteFailed ?? "Failed to record feedback", error);
-    } finally {
-      setIsPending(false);
-    }
-  };
-
-  return (
-    <div className="rounded-lg bg-zinc-100 p-6 dark:bg-slate-700">
-      <Text className="mb-3 text-sm text-zinc-600 dark:text-zinc-300">
-        {userVote
-          ? (labels?.thanksForFeedback ?? "Thanks for your feedback")
-          : (labels?.wasThisHelpful ?? "Was this helpful?")}
-      </Text>
-
-      <div className="flex gap-3">
-        <Button
-          variant="ghost"
-          onClick={() => handleVote(true)}
-          disabled={isPending || userVote !== null}
-          className={`flex-1 gap-2 rounded-lg p-4 transition-all ${
-            userVote === "helpful"
-              ? "bg-green-600 text-white"
-              : userVote
-                ? "cursor-not-allowed bg-zinc-200 text-zinc-500 opacity-50 dark:bg-slate-600 dark:text-zinc-400"
-                : "bg-white text-zinc-800 hover:bg-green-50 dark:bg-slate-800 dark:text-zinc-100 dark:hover:bg-green-900/20"
-          }`}
-        >
-          <Span className="text-sm">{labels?.yes ?? "Yes"}</Span>
-          <Span className="text-sm text-zinc-500 dark:text-zinc-400">
-            ({helpful})
-          </Span>
-        </Button>
-
-        <Button
-          variant="ghost"
-          onClick={() => handleVote(false)}
-          disabled={isPending || userVote !== null}
-          className={`flex-1 gap-2 rounded-lg p-4 transition-all ${
-            userVote === "not-helpful"
-              ? "bg-red-600 text-white"
-              : userVote
-                ? "cursor-not-allowed bg-zinc-200 text-zinc-500 opacity-50 dark:bg-slate-600 dark:text-zinc-400"
-                : "bg-white text-zinc-800 hover:bg-red-50 dark:bg-slate-800 dark:text-zinc-100 dark:hover:bg-red-900/20"
-          }`}
-        >
-          <Span className="text-sm">{labels?.no ?? "No"}</Span>
-          <Span className="text-sm text-zinc-500 dark:text-zinc-400">
-            ({notHelpful})
-          </Span>
-        </Button>
-      </div>
-    </div>
-  );
-}

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

@@ -1,217 +0,0 @@
-"use client";
-
-import React from "react";
-
-import { Heading, Text } from "../../../ui";
-import type { FAQCategory, FAQ } from "../types";
-import { FAQCategorySidebar, type FAQCategoryItem } from "./FAQCategorySidebar";
-import { FAQSortDropdown, type FAQSortOption } from "./FAQSortDropdown";
-import { FAQAccordion } from "./FAQAccordion";
-import { ContactCTA } from "./ContactCTA";
-import { useFaqList } from "../hooks/useFaqList";
-
-interface FAQPageContentProps {
-  initialCategory?: FAQCategory | "all";
-  categories: FAQCategoryItem[];
-  routeHelpers: {
-    allFaqsHref: string;
-    faqCategoryHref: (category: FAQCategory) => string;
-    contactHref: string;
-    navigateToCategory: (category: FAQCategory | "all") => void;
-  };
-  labels: {
-    title: string;
-    subtitle: string;
-    searchPlaceholder: string;
-    categoriesTitle: string;
-    allFaqs: string;
-    stillHaveQuestions: string;
-    contactSupport: string;
-    sortLabel: string;
-    sortHelpful: string;
-    sortNewest: string;
-    sortAlphabetical: string;
-    resultCount: (count: number) => string;
-    inCategory: (categoryLabel: string) => string;
-    loading: string;
-    contactTitle: string;
-    contactDescription: string;
-    contactEmailUs: string;
-    contactCallUs: string;
-    contactForm: string;
-    contactSubmitRequest: string;
-    contactTeam: string;
-  };
-  contact: {
-    email: string;
-    phone: string;
-  };
-  searchValue: string;
-  onSearchChange: (value: string) => void;
-  sortOption: FAQSortOption;
-  onSortChange: (sort: FAQSortOption) => void;
-  renderMobileCategoryTabs: (input: {
-    selectedCategory: FAQCategory | "all";
-    total: number;
-    categoryCounts: Record<FAQCategory, number>;
-    onSelect: (value: FAQCategory | "all") => void;
-  }) => React.ReactNode;
-  renderAccordion?: (faqs: FAQ[]) => React.ReactNode;
-}
-
-export function FAQPageContent({
-  initialCategory = "all",
-  categories,
-  routeHelpers,
-  labels,
-  contact,
-  searchValue,
-  onSearchChange,
-  sortOption,
-  onSortChange,
-  renderMobileCategoryTabs,
-  renderAccordion,
-}: FAQPageContentProps) {
-  const selectedCategory = initialCategory;
-
-  const sorts =
-    sortOption === "helpful"
-      ? "-stats.helpful,-priority,order"
-      : sortOption === "alphabetical"
-        ? "question"
-        : "-createdAt";
-
-  const { faqs, total, isLoading } = useFaqList({
-    category: selectedCategory === "all" ? undefined : selectedCategory,
-    search: searchValue.trim() || undefined,
-    sorts,
-    page: 1,
-    pageSize: 100,
-  });
-
-  const { faqs: allMatchingFaqs } = useFaqList({
-    search: searchValue.trim() || undefined,
-    sorts: "-priority,order",
-    page: 1,
-    pageSize: 200,
-  });
-
-  const categoryCounts = categories.reduce(
-    (acc, category) => {
-      acc[category.key] = 0;
-      return acc;
-    },
-    {} as Record<FAQCategory, number>,
-  );
-
-  allMatchingFaqs.forEach((faq) => {
-    if (faq.category in categoryCounts) {
-      categoryCounts[faq.category] += 1;
-    }
-  });
-
-  const handleCategorySelect = (category: FAQCategory | "all") => {
-    routeHelpers.navigateToCategory(category);
-  };
-
-  return (
-    <div className="py-12">
-      <div className="mb-12 text-center">
-        <Heading level={1} className="mb-4 text-3xl font-bold sm:text-4xl">
-          {labels.title}
-        </Heading>
-        <Text className="mx-auto max-w-2xl text-zinc-600 dark:text-zinc-300">
-          {labels.subtitle}
-        </Text>
-      </div>
-
-      <div className="mb-8">
-        <input
-          value={searchValue}
-          onChange={(e) => onSearchChange(e.target.value)}
-          placeholder={labels.searchPlaceholder}
-          className="h-11 w-full rounded-lg border border-zinc-200 bg-white px-4 text-sm text-zinc-900 outline-none ring-primary/20 transition focus:ring-2 dark:border-slate-700 dark:bg-slate-800 dark:text-zinc-100"
-        />
-      </div>
-
-      <div className="mb-8 lg:hidden">
-        {renderMobileCategoryTabs({
-          selectedCategory,
-          total,
-          categoryCounts,
-          onSelect: handleCategorySelect,
-        })}
-      </div>
-
-      <div className="grid grid-cols-1 gap-8 lg:grid-cols-12">
-        <div className="hidden lg:col-span-4 lg:block xl:col-span-3">
-          <FAQCategorySidebar
-            selectedCategory={selectedCategory}
-            onCategorySelect={handleCategorySelect}
-            categoryCounts={categoryCounts}
-            categories={categories}
-            allFaqsHref={routeHelpers.allFaqsHref}
-            categoryHref={routeHelpers.faqCategoryHref}
-            contactHref={routeHelpers.contactHref}
-            labels={{
-              title: labels.categoriesTitle,
-              allFaqs: labels.allFaqs,
-              stillHaveQuestions: labels.stillHaveQuestions,
-              contactSupport: labels.contactSupport,
-            }}
-          />
-        </div>
-
-        <div className="col-span-1 lg:col-span-8 xl:col-span-9">
-          <div className="mb-8 flex items-center justify-between gap-4">
-            <Text className="text-sm text-zinc-600 dark:text-zinc-300">
-              {labels.resultCount(total)}
-              {selectedCategory !== "all"
-                ? ` ${labels.inCategory(categories.find((c) => c.key === selectedCategory)?.label ?? selectedCategory)}`
-                : ""}
-            </Text>
-            <FAQSortDropdown
-              selectedSort={sortOption}
-              onSortChange={onSortChange}
-              labels={{
-                label: labels.sortLabel,
-                helpful: labels.sortHelpful,
-                newest: labels.sortNewest,
-                alphabetical: labels.sortAlphabetical,
-              }}
-            />
-          </div>
-
-          {isLoading ? (
-            <Text className="text-zinc-500 dark:text-zinc-400">
-              {labels.loading}
-            </Text>
-          ) : renderAccordion ? (
-            renderAccordion(faqs)
-          ) : (
-            <FAQAccordion faqs={faqs} />
-          )}
-
-          {faqs.length > 0 ? (
-            <div className="mt-12">
-              <ContactCTA
-                email={contact.email}
-                phone={contact.phone}
-                contactHref={routeHelpers.contactHref}
-                labels={{
-                  title: labels.contactTitle,
-                  description: labels.contactDescription,
-                  emailUs: labels.contactEmailUs,
-                  callUs: labels.contactCallUs,
-                  contactForm: labels.contactForm,
-                  submitRequest: labels.contactSubmitRequest,
-                  contactTeam: labels.contactTeam,
-                }}
-              />
-            </div>
-          ) : null}
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,43 +0,0 @@
-"use client";
-
-import { Select, Span } from "../../../ui";
-
-export type FAQSortOption = "helpful" | "newest" | "alphabetical";
-
-interface FAQSortDropdownProps {
-  selectedSort: FAQSortOption;
-  onSortChange: (sort: FAQSortOption) => void;
-  labels?: {
-    label?: string;
-    helpful?: string;
-    newest?: string;
-    alphabetical?: string;
-  };
-}
-
-export function FAQSortDropdown({
-  selectedSort,
-  onSortChange,
-  labels,
-}: FAQSortDropdownProps) {
-  const sortOptions: { value: FAQSortOption; label: string }[] = [
-    { value: "helpful", label: labels?.helpful ?? "Most Helpful" },
-    { value: "newest", label: labels?.newest ?? "Newest" },
-    { value: "alphabetical", label: labels?.alphabetical ?? "Alphabetical" },
-  ];
-
-  return (
-    <div className="flex items-center gap-3">
-      <Span className="text-sm text-zinc-600 dark:text-zinc-400">
-        {labels?.label ?? "Sort"}
-      </Span>
-      <div className="min-w-44">
-        <Select
-          value={selectedSort}
-          onChange={(value) => onSortChange(value as FAQSortOption)}
-          options={sortOptions}
-        />
-      </div>
-    </div>
-  );
-}