@mohasinac/appkit 2.1.3 → 2.3.0

package/src/features/before-after/components/BeforeAfterSlider.tsx

@@ -1,89 +0,0 @@
-"use client";
-import React, { useRef, useState } from "react";
-import type { BeforeAfterItem } from "../types";
-import { Div, Span } from "../../../ui";
-
-interface BeforeAfterSliderProps {
-  item: BeforeAfterItem;
-  className?: string;
-}
-
-export function BeforeAfterSlider({
-  item,
-  className = "",
-}: BeforeAfterSliderProps) {
-  const [position, setPosition] = useState(50);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  function handlePointerMove(e: React.PointerEvent<HTMLDivElement>) {
-    if (!(e.buttons & 1)) return;
-    move(e.clientX);
-  }
-
-  function handleTouchMove(e: React.TouchEvent<HTMLDivElement>) {
-    move(e.touches[0].clientX);
-  }
-
-  function move(clientX: number) {
-    const rect = containerRef.current?.getBoundingClientRect();
-    if (!rect) return;
-    const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
-    setPosition((x / rect.width) * 100);
-  }
-
-  return (
-    <Div
-      ref={containerRef}
-      className={`relative aspect-square select-none overflow-hidden rounded-xl ${className}`}
-      onPointerMove={handlePointerMove}
-      onTouchMove={handleTouchMove}
-    >
-      {/* After image (base layer) */}
-      <Div
-        role="img"
-        aria-label="After"
-        className="absolute inset-0 h-full w-full bg-center bg-cover"
-        style={{ backgroundImage: `url(${item.afterImageUrl})` }}
-      />
-
-      {/* Before image (clipped layer) */}
-      <Div
-        className="absolute inset-0 overflow-hidden"
-        style={{ width: `${position}%` }}
-      >
-        <Div
-          role="img"
-          aria-label="Before"
-          className="h-full w-full bg-center bg-cover"
-          style={{
-            width: containerRef.current?.offsetWidth ?? "100%",
-            backgroundImage: `url(${item.beforeImageUrl})`,
-          }}
-        />
-      </Div>
-
-      {/* Divider handle */}
-      <Div
-        className="absolute inset-y-0 flex w-1 -translate-x-1/2 cursor-ew-resize flex-col items-center justify-center"
-        style={{ left: `${position}%` }}
-      >
-        <Div className="h-full w-0.5 bg-white/80 shadow" />
-        <Div className="absolute h-8 w-8 rounded-full border-2 border-white bg-white/80 shadow-md" />
-      </Div>
-
-      {/* Labels */}
-      <Span className="absolute left-2 top-2 rounded bg-black/40 px-2 py-0.5 text-xs font-medium text-white">
-        Before
-      </Span>
-      <Span className="absolute right-2 top-2 rounded bg-black/40 px-2 py-0.5 text-xs font-medium text-white">
-        After
-      </Span>
-
-      {item.durationWeeks && (
-        <Span className="absolute bottom-2 left-1/2 -translate-x-1/2 rounded bg-black/50 px-3 py-1 text-xs font-medium text-white">
-          {item.durationWeeks} weeks
-        </Span>
-      )}
-    </Div>
-  );
-}

package/src/features/before-after/components/index.ts

@@ -1,2 +0,0 @@
-export { BeforeAfterSlider } from "./BeforeAfterSlider";
-export { BeforeAfterGallery } from "./BeforeAfterGallery";

package/src/features/before-after/hooks/useBeforeAfter.ts

@@ -1,33 +0,0 @@
-"use client";
-import { useQuery } from "@tanstack/react-query";
-import { apiClient } from "../../../http";
-import type { BeforeAfterListResponse } from "../types";
-
-interface UseBeforeAfterOptions {
-  concern?: string;
-  initialData?: BeforeAfterListResponse;
-  enabled?: boolean;
-}
-
-export function useBeforeAfter(opts?: UseBeforeAfterOptions) {
-  const sp = new URLSearchParams();
-  if (opts?.concern) sp.set("concern", opts.concern);
-  const qs = sp.toString();
-
-  const query = useQuery<BeforeAfterListResponse>({
-    queryKey: ["before-after", qs],
-    queryFn: () =>
-      apiClient.get<BeforeAfterListResponse>(`/api/before-after${qs ? `?${qs}` : ""}`),
-    initialData: opts?.initialData,
-    enabled: opts?.enabled,
-    staleTime: 30 * 60 * 1000,
-  });
-
-  return {
-    items: query.data?.data ?? [],
-    total: query.data?.total ?? 0,
-    isLoading: query.isLoading,
-    isError: query.isError,
-    error: query.error,
-  };
-}

package/src/features/before-after/index.ts

@@ -1,7 +0,0 @@
-export * from "./types";
-export * from "./schemas";
-export * from "./columns";
-export * from "./hooks/useBeforeAfter";
-export * from "./components";
-export { BeforeAfterRepository } from "./repository/before-after.repository";
-export { manifest } from "./manifest";

package/src/features/before-after/manifest.ts

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

package/src/features/before-after/messages/en.json

@@ -1,8 +0,0 @@
-{
-    "title": "Real Results",
-    "subtitle": "See the transformation with our Ayurvedic products",
-    "labelBefore": "Before",
-    "labelAfter": "After",
-    "weeks": "{count} weeks",
-    "noItems": "No transformation stories yet"
-}

package/src/features/before-after/repository/before-after.repository.ts

@@ -1,44 +0,0 @@
-import type { IRepository, PagedResult, SieveQuery } from "../../../contracts";
-import type { BeforeAfterItem } from "../types";
-
-export class BeforeAfterRepository {
-  constructor(private readonly repo: IRepository<BeforeAfterItem>) {}
-
-  async findAll(query?: SieveQuery): Promise<PagedResult<BeforeAfterItem>> {
-    return this.repo.findAll(query);
-  }
-
-  async findActive(): Promise<BeforeAfterItem[]> {
-    const result = await this.repo.findAll({
-      filters: "isActive==true",
-      sort: "sortOrder",
-      perPage: 50,
-    });
-    return result.data;
-  }
-
-  async findByConcern(concern: string): Promise<BeforeAfterItem[]> {
-    const result = await this.repo.findAll({
-      filters: `isActive==true,concern==${concern}`,
-      sort: "sortOrder",
-      perPage: 50,
-    });
-    return result.data;
-  }
-
-  async findById(id: string): Promise<BeforeAfterItem | null> {
-    return this.repo.findById(id);
-  }
-
-  async create(data: Omit<BeforeAfterItem, "id">): Promise<BeforeAfterItem> {
-    return this.repo.create(data);
-  }
-
-  async update(id: string, data: Partial<Omit<BeforeAfterItem, "id">>): Promise<BeforeAfterItem> {
-    return this.repo.update(id, data);
-  }
-
-  async delete(id: string): Promise<void> {
-    return this.repo.delete(id);
-  }
-}

package/src/features/before-after/schemas/index.ts

@@ -1,25 +0,0 @@
-import { z } from "zod";
-
-/**
- * Base Zod schema for a before-after item.
- *
- * @example
- * import { beforeAfterItemSchema } from "@mohasinac/feat-before-after";
- *
- * const mySchema = beforeAfterItemSchema.extend({
- *   doctorName: z.string().optional(),
- * });
- */
-export const beforeAfterItemSchema = z.object({
-  id: z.string(),
-  title: z.string(),
-  description: z.string().optional(),
-  concern: z.string().optional(),
-  productId: z.string().optional(),
-  beforeImageUrl: z.string().optional(),
-  afterImageUrl: z.string().optional(),
-  durationWeeks: z.number().optional(),
-  isActive: z.boolean().default(true),
-  sortOrder: z.number().default(0),
-  createdAt: z.string().optional(),
-});

package/src/features/before-after/types/index.ts

@@ -1,19 +0,0 @@
-export interface BeforeAfterItem {
-  id: string;
-  title: string;
-  description?: string;
-  concern?: string;
-  productId?: string;
-  beforeImageUrl: string;
-  afterImageUrl: string;
-  durationWeeks?: number;
-  isActive: boolean;
-  sortOrder: number;
-  createdAt: Date | string;
-  updatedAt?: Date | string;
-}
-
-export interface BeforeAfterListResponse {
-  data: BeforeAfterItem[];
-  total: number;
-}

package/src/features/blog/api/[slug]/route.ts

@@ -1,73 +0,0 @@
-/**
- * feat-blog — single-post route handler (GET /api/blog/[slug])
- *
- * Consuming projects create a 2-line stub:
- *
- * ```ts
- * // app/api/blog/[slug]/route.ts
- * export { GET } from "@mohasinac/feat-blog";   // re-exported as blogSlugGET
- * ```
- */
-
-import { NextResponse } from "next/server.js";
-import { getProviders } from "../../../../contracts";
-import { BlogRepository } from "../../repository/blog.repository";
-import type { BlogPost } from "../../types/index";
-
-type RouteContext = { params: Promise<{ slug: string }> };
-
-export interface BlogPostDetailResponse {
-  post: BlogPost;
-  related: BlogPost[];
-}
-
-// ─── GET /api/blog/[slug] ─────────────────────────────────────────────────────
-
-export async function GET(
-  _request: Request,
-  context: RouteContext,
-): Promise<NextResponse> {
-  try {
-    const { slug } = await context.params;
-
-    const { db } = getProviders();
-    if (!db) {
-      return NextResponse.json(
-        { success: false, error: "Database provider not registered" },
-        { status: 503 },
-      );
-    }
-
-    const blogRepo = new BlogRepository(
-      db.getRepository<BlogPost>("blogPosts"),
-    );
-
-    const post = await blogRepo.findBySlug(slug);
-    if (!post) {
-      return NextResponse.json(
-        { success: false, error: "Blog post not found" },
-        { status: 404 },
-      );
-    }
-
-    // Increment view count fire-and-forget — must not block response
-    db.getRepository<BlogPost>("blogPosts")
-      .update(post.id, { views: (post.views ?? 0) + 1 } as Partial<BlogPost>)
-      .catch(() => {});
-
-    // Related posts: same category, latest 3, excluding current
-    const relatedResult = await blogRepo.findByCategory(post.category, 1, 4);
-    const related = relatedResult.data
-      .filter((p) => p.id !== post.id)
-      .slice(0, 3);
-
-    const body: BlogPostDetailResponse = { post, related };
-    return NextResponse.json({ success: true, data: body });
-  } catch (error) {
-    console.error("[feat-blog] GET /api/blog/[slug] failed", error);
-    return NextResponse.json(
-      { success: false, error: "Failed to fetch blog post" },
-      { status: 500 },
-    );
-  }
-}

package/src/features/blog/api/route.ts

@@ -1,81 +0,0 @@
-/**
- * feat-blog — Next.js App Router API handler (GET /api/blog)
- *
- * Consuming projects can create a 2-line stub:
- *
- * ```ts
- * // app/api/blog/route.ts
- * export { GET } from "@mohasinac/feat-blog";
- * ```
- */
-
-import { NextResponse } from "next/server.js";
-import { getProviders } from "../../../contracts";
-import type {
-  BlogPost,
-  BlogListResponse,
-  BlogListMeta,
-} from "../types/index";
-
-function param(url: URL, key: string): string | null {
-  return url.searchParams.get(key);
-}
-
-function numParam(url: URL, key: string, fallback: number): number {
-  const v = url.searchParams.get(key);
-  const n = v !== null ? Number(v) : NaN;
-  return Number.isFinite(n) ? n : fallback;
-}
-
-// ─── GET /api/blog ────────────────────────────────────────────────────────────
-
-export async function GET(request: Request): Promise<NextResponse> {
-  try {
-    const url = new URL(request.url);
-    const page = numParam(url, "page", 1);
-    const perPage = numParam(url, "perPage", 20);
-    const sort = param(url, "sort") ?? "-publishedAt";
-
-    const parts: string[] = [];
-    const category = param(url, "category");
-    if (category) parts.push(`category==${category}`);
-    const q = param(url, "q");
-    if (q) parts.push(`title@=*${q}`);
-    const featured = param(url, "featured");
-    if (featured === "true") parts.push("isFeatured==true");
-    const status = param(url, "status") ?? "published";
-    parts.push(`status==${status}`);
-    const filters = parts.join(",");
-
-    const { db } = getProviders();
-    if (!db) {
-      return NextResponse.json(
-        { success: false, error: "Database provider not registered" },
-        { status: 503 },
-      );
-    }
-
-    const repo = db.getRepository<BlogPost>("blogPosts");
-    const result = await repo.findAll({ filters, sort, page, perPage });
-
-    const meta: BlogListMeta = {
-      total: result.total,
-      page: result.page,
-      pageSize: result.perPage,
-      totalPages: result.totalPages,
-      hasMore: result.page < result.totalPages,
-    };
-    const body: BlogListResponse = {
-      posts: result.data,
-      meta,
-    };
-
-    return NextResponse.json({ success: true, data: body });
-  } catch (error) {
-    console.error("[feat-blog] GET /api/blog failed", error);
-    return NextResponse.json(
-      { success: false, error: "Failed to fetch blog posts" },
-      { status: 500 },
-    );
-  }
-}

package/src/features/blog/columns/index.ts

@@ -1,68 +0,0 @@
-import type { TableColumn, ColumnExtensionOpts } from "../../../contracts";
-import type { BlogPost } from "../types";
-
-/**
- * Default admin column definitions for a blog post table.
- *
- * @example — extend with app-specific columns
- * ```ts
- * import { buildBlogColumns } from "@mohasinac/feat-blog";
- *
- * const columns = buildBlogColumns<MyPost>({
- *   overrides: { title: { render: (p) => <Link href={p.slug}>{p.title}</Link> } },
- *   extras: [{ key: "series", header: "Series", render: (p) => p.series ?? "—" }],
- * });
- * ```
- */
-export const blogAdminColumns: TableColumn<BlogPost>[] = [
-  { key: "title", header: "Title", sortable: true },
-  { key: "category", header: "Category", sortable: true },
-  {
-    key: "status",
-    header: "Status",
-    sortable: true,
-  },
-  {
-    key: "isFeatured",
-    header: "Featured",
-    render: (p) => (p.isFeatured ? "Yes" : "No"),
-  },
-  {
-    key: "readTimeMinutes",
-    header: "Read Time",
-    render: (p) =>
-      p.readTimeMinutes !== undefined ? `${p.readTimeMinutes} min` : "—",
-  },
-  {
-    key: "views",
-    header: "Views",
-    sortable: true,
-    render: (p) => p.views?.toLocaleString() ?? "—",
-  },
-  { key: "authorName", header: "Author" },
-  { key: "publishedAt", header: "Published", sortable: true },
-];
-
-/**
- * Build a merged column list from the base blog columns.
- *
- * @example
- * const cols = buildBlogColumns<MyPost>({
- *   overrides: { title: { sortable: false } },
- *   extras: [{ key: "series", header: "Series", render: (p) => p.series }],
- *   omit: ["views"],
- * });
- */
-export function buildBlogColumns<T extends BlogPost = BlogPost>(
-  opts?: ColumnExtensionOpts<T>,
-): TableColumn<T>[] {
-  const base = blogAdminColumns as TableColumn<T>[];
-  const omit = new Set(opts?.omit ?? []);
-  const cols = base
-    .filter((col) => !omit.has(col.key))
-    .map((col) => {
-      const ovr = opts?.overrides?.[col.key];
-      return ovr ? { ...col, ...ovr } : col;
-    });
-  return opts?.extras ? [...cols, ...opts.extras] : cols;
-}

package/src/features/blog/components/BlogFeaturedCard.tsx

@@ -1,108 +0,0 @@
-"use client";
-
-import React from "react";
-import { Article, Div, Heading, Span, Text } from "../../../ui";
-import type { BlogPost, BlogPostCategory } from "../types";
-import { getMediaUrl } from "../../media/types/index";
-
-const CATEGORY_BADGE: Record<BlogPostCategory, string> = {
-  news: "bg-blue-100 text-blue-800",
-  tips: "bg-emerald-100 text-emerald-800",
-  guides: "bg-indigo-100 text-indigo-800",
-  updates: "bg-purple-100 text-purple-800",
-  community: "bg-orange-100 text-orange-800",
-};
-
-export interface BlogFeaturedCardProps {
-  post: BlogPost;
-  /** Full URL/path to the post */
-  href: string;
-  labels?: {
-    featuredBadge?: string;
-    readTime?: string;
-  };
-  /** Render-prop for wrapping in a link */
-  renderLink?: (href: string, children: React.ReactNode) => React.ReactNode;
-  /** Render-prop for the cover image slot */
-  renderImage?: (post: BlogPost) => React.ReactNode;
-  className?: string;
-}
-
-export function BlogFeaturedCard({
-  post,
-  href,
-  labels = {},
-  renderLink,
-  renderImage,
-  className = "",
-}: BlogFeaturedCardProps) {
-  const coverImageUrl = getMediaUrl(post.coverImage);
-  const date = post.publishedAt
-    ? new Date(post.publishedAt).toLocaleDateString("en-US", {
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-      })
-    : "";
-
-  const inner = (
-    <Article
-      className={`overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-sm hover:shadow-lg transition-shadow duration-200 md:flex ${className}`}
-    >
-      {coverImageUrl && (
-        <Div className="md:w-1/2 relative h-64 md:min-h-[320px] overflow-hidden">
-          {renderImage ? (
-            renderImage(post)
-          ) : (
-            <Div
-              role="img"
-              aria-label={post.title}
-              className="h-full w-full bg-cover bg-center"
-              style={{ backgroundImage: `url(${coverImageUrl})` }}
-            />
-          )}
-        </Div>
-      )}
-      <Div className="p-8 md:w-1/2 flex flex-col justify-center">
-        <Div className="flex items-center gap-2 mb-3">
-          <Span
-            className={`inline-block px-2 py-0.5 rounded-full text-xs font-medium capitalize ${CATEGORY_BADGE[post.category] ?? ""}`}
-          >
-            {post.category}
-          </Span>
-          {post.isFeatured && (
-            <Span className="bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded-full text-xs font-medium">
-              {labels.featuredBadge ?? "Featured"}
-            </Span>
-          )}
-        </Div>
-        <Heading
-          level={2}
-          className="text-xl font-semibold text-neutral-900 mb-3 leading-snug"
-        >
-          {post.title}
-        </Heading>
-        {post.excerpt && (
-          <Text className="text-neutral-500 mb-4 line-clamp-3 text-sm">
-            {post.excerpt}
-          </Text>
-        )}
-        <Div className="flex items-center gap-4 text-xs text-neutral-400">
-          {post.authorName && <Span>{post.authorName}</Span>}
-          {post.readTimeMinutes != null && (
-            <Span>
-              {post.readTimeMinutes} {labels.readTime ?? "min read"}
-            </Span>
-          )}
-          {date && <Span>{date}</Span>}
-        </Div>
-      </Div>
-    </Article>
-  );
-
-  return (
-    <Div className="mb-10">
-      {renderLink ? renderLink(href, inner) : inner}
-    </Div>
-  );
-}