@mohasinac/appkit 2.1.3 → 2.3.0

package/src/features/layout/NavbarLayout.tsx

@@ -1,108 +0,0 @@
-import React from "react";
-import Link from "next/link";
-import { Div, Li, Nav, Span, Ul } from "../../ui";
-
-export interface NavbarLayoutItem {
-  href: string;
-  label: string;
-  icon: React.ReactNode;
-  highlighted?: boolean;
-}
-
-export interface NavbarLayoutProps {
-  items: NavbarLayoutItem[];
-  activeHref: string;
-  id?: string;
-  ariaLabel?: string;
-  /**
-   * When true, renders as an inline flex row without an outer Nav wrapper or sticky bg.
-   * Used when slotted inside TitleBarLayout for the slim double-nav pattern.
-   */
-  inline?: boolean;
-  /** Render a custom nav item — defaults to an <a> anchor link. */
-  renderItem?: (item: NavbarLayoutItem, isActive: boolean) => React.ReactNode;
-}
-
-function DefaultNavItem({
-  item,
-  isActive,
-}: {
-  item: NavbarLayoutItem;
-  isActive: boolean;
-}) {
-  const activeClasses = item.highlighted
-    ? "border border-primary-500/30 dark:border-secondary-400/30 text-primary-600 dark:text-secondary-400 bg-primary-50/60 dark:bg-secondary-900/30 px-3"
-    : isActive
-      ? "bg-zinc-100 dark:bg-slate-800 text-zinc-900 dark:text-zinc-50 font-semibold px-3"
-      : "text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-slate-800 hover:text-zinc-900 dark:hover:text-zinc-50 transition-colors px-3";
-
-  return (
-    <Link
-      href={item.href}
-      aria-current={isActive ? "page" : undefined}
-      className={`flex items-center gap-1.5 py-2 text-sm rounded-lg font-medium transition-colors duration-150 ${activeClasses}`}
-    >
-      {item.icon}
-      <Span>{item.label}</Span>
-    </Link>
-  );
-}
-
-/**
- * NavbarLayout — generic horizontal navigation bar shell.
- *
- * Zero domain imports. Receives all navigation items and the current
- * active href as props. Hidden on mobile (visible md+).
- */
-export function NavbarLayout({
-  items,
-  activeHref,
-  id = "main-navbar",
-  ariaLabel = "Main navigation",
-  inline = false,
-  renderItem,
-}: NavbarLayoutProps) {
-  if (inline) {
-    return (
-      <Ul
-        aria-label={ariaLabel}
-        className="hidden md:flex items-center gap-0.5 lg:gap-1"
-      >
-        {items.map((item) => (
-          <Li key={item.href}>
-            {renderItem ? (
-              renderItem(item, activeHref === item.href)
-            ) : (
-              <DefaultNavItem item={item} isActive={activeHref === item.href} />
-            )}
-          </Li>
-        ))}
-      </Ul>
-    );
-  }
-
-  return (
-    <Nav
-      id={id}
-      aria-label={ariaLabel}
-      className="hidden md:block bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-b border-zinc-200/80 dark:border-slate-800/80"
-    >
-      <Div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px]">
-        <Ul className="flex items-center gap-0.5 lg:gap-1 h-10 md:h-12">
-          {items.map((item) => (
-            <Li key={item.href}>
-              {renderItem ? (
-                renderItem(item, activeHref === item.href)
-              ) : (
-                <DefaultNavItem
-                  item={item}
-                  isActive={activeHref === item.href}
-                />
-              )}
-            </Li>
-          ))}
-        </Ul>
-      </Div>
-    </Nav>
-  );
-}

package/src/features/layout/SidebarLayout.tsx

@@ -1,75 +0,0 @@
-"use client";
-
-import React, { forwardRef } from "react";
-import { Aside, Div } from "../../ui";
-
-export interface SidebarLayoutProps {
-  isOpen: boolean;
-  ariaLabel: string;
-  onClose: () => void;
-  /** Content pinned inside a fixed (non-scrolling) header strip */
-  header: React.ReactNode;
-  /** Scrollable body content */
-  children: React.ReactNode;
-  id?: string;
-}
-
-/**
- * SidebarLayout — generic slide-out sidebar shell.
- *
- * Renders:
- *  - Backdrop overlay when open (closes on click)
- *  - Aside container with transform animation (right-side slide)
- *  - Fixed header slot (no-scroll, pinned at top)
- *  - Scrollable body slot (fills remaining height)
- *
- * Uses `forwardRef` so the parent can attach a swipe-detection ref
- * to the rendered `aside` element.
- */
-export const SidebarLayout = forwardRef<HTMLElement, SidebarLayoutProps>(
-  function SidebarLayout(
-    { isOpen, ariaLabel, onClose, header, children, id = "secondary-sidebar" },
-    ref,
-  ) {
-    return (
-      <>
-        {/* Backdrop overlay */}
-        {isOpen && (
-          <Div
-            className="fixed inset-0 bg-black/40 backdrop-blur-[2px] z-[45] transition-opacity duration-300"
-            onClick={onClose}
-            aria-hidden="true"
-          />
-        )}
-
-        <Aside
-          ref={ref as React.RefObject<HTMLElement>}
-          id={id}
-          aria-label={ariaLabel}
-          className={`
-            fixed inset-y-0 right-0
-            w-80
-            bg-white dark:bg-slate-900 border-l border-zinc-200 dark:border-slate-800
-            shadow-2xl
-            transform duration-300 ease-in-out
-            z-50
-            ${isOpen ? "translate-x-0" : "translate-x-full"}
-            flex flex-col
-          `}
-        >
-          {/* Fixed (non-scrolling) header strip */}
-          <Div className="flex-shrink-0 px-6 py-5 border-b border-zinc-200 dark:border-slate-800 bg-zinc-50 dark:bg-slate-900/80">
-            {header}
-          </Div>
-
-          {/* Scrollable body */}
-          <Div className="flex-1 overflow-y-auto scrollbar-thin px-6 py-4">
-            {children}
-          </Div>
-        </Aside>
-      </>
-    );
-  },
-);
-
-SidebarLayout.displayName = "SidebarLayout";

package/src/features/layout/TitleBarLayout.tsx

@@ -1,285 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import Link from "next/link";
-import React from "react";
-import { BlockHeader, Button, Div, Span } from "../../ui";
-
-/** Minimal user shape required by the title bar. */
-export interface TitleBarUser {
-  displayName: string | null;
-  email: string | null;
-  photoURL: string | null;
-  /** Role string — used for display only. */
-  role?: string;
-}
-
-export interface TitleBarLayoutProps {
-  onToggleSidebar: () => void;
-  sidebarOpen: boolean;
-  onSearchToggle: () => void;
-  searchOpen: boolean;
-  brandName: string;
-  brandShortName?: string;
-  logoHref: string;
-  cartHref?: string;
-  cartCount?: number;
-  profileHref?: string;
-  user?: TitleBarUser | null;
-  /** Slot rendered between the search button and profile link (e.g. NotificationBell). */
-  notificationSlot?: React.ReactNode;
-  /** Optional nav slot rendered between logo and right action icons (desktop only). */
-  navSlot?: React.ReactNode;
-  /** When set, renders a dismissable promo micro-strip above the header. */
-  promoStripText?: string;
-  isDark?: boolean;
-  onToggleTheme?: () => void;
-  id?: string;
-  className?: string;
-}
-
-/**
- * TitleBarLayout — generic top sticky title-bar shell.
- *
- * Receives all domain data as props — zero domain imports.
- * Domain shell reads useAuth() and SITE_CONFIG and passes values in.
- */
-export function TitleBarLayout({
-  onToggleSidebar,
-  sidebarOpen,
-  onSearchToggle,
-  searchOpen,
-  brandName,
-  brandShortName,
-  logoHref,
-  cartHref,
-  cartCount = 0,
-  profileHref,
-  user,
-  notificationSlot,
-  navSlot,
-  promoStripText,
-  isDark = false,
-  onToggleTheme,
-  id = "titlebar",
-  className = "",
-}: TitleBarLayoutProps) {
-  void searchOpen;
-
-  return (
-    <BlockHeader
-      id={id}
-      className={`sticky top-0 z-50 bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-b border-zinc-200/80 dark:border-slate-800/80 ${className}`}
-    >
-      {/* Promo strip */}
-      {promoStripText && (
-        <Div className="bg-gradient-to-r from-primary-700 to-blue-700 dark:from-secondary-700 dark:to-blue-700 text-white text-xs py-1 text-center font-medium">
-          {promoStripText}
-        </Div>
-      )}
-
-      <Div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px]">
-        <Div className="flex items-center justify-between h-12">
-          {/* Left: hamburger (mobile) + logo */}
-          <Div className="flex items-center gap-3">
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              aria-label={sidebarOpen ? "Close menu" : "Open menu"}
-              aria-expanded={sidebarOpen}
-              aria-controls="secondary-sidebar"
-              onClick={onToggleSidebar}
-              className="flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors"
-            >
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                {sidebarOpen ? (
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                ) : (
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M4 6h16M4 12h16M4 18h16"
-                  />
-                )}
-              </svg>
-            </Button>
-
-            <Link
-              href={logoHref}
-              className="font-bold text-lg text-zinc-900 dark:text-zinc-50 hover:opacity-80 transition-opacity"
-            >
-              {brandShortName ? (
-                <>
-                  <Span className="md:hidden">{brandShortName}</Span>
-                  <Span className="hidden md:inline">{brandName}</Span>
-                </>
-              ) : (
-                brandName
-              )}
-            </Link>
-          </Div>
-
-          {/* Centre: nav slot (desktop only) */}
-          {navSlot && <Div className="hidden md:flex">{navSlot}</Div>}
-
-          {/* Right: actions */}
-          <Div className="flex items-center gap-1">
-            {/* Search toggle */}
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              aria-label="Search"
-              onClick={onSearchToggle}
-              className="flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors"
-            >
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"
-                />
-              </svg>
-            </Button>
-
-            {/* Notification slot */}
-            {notificationSlot}
-
-            {/* Theme toggle */}
-            {onToggleTheme && (
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                aria-label={
-                  isDark ? "Switch to light mode" : "Switch to dark mode"
-                }
-                onClick={onToggleTheme}
-                className="flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors"
-              >
-                {isDark ? (
-                  <svg
-                    className="w-5 h-5"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    aria-hidden="true"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M12 3v1m0 16v1m8.66-9h-1M4.34 12h-1m15.07-6.07-.71.71M6.34 17.66l-.71.71m12.73 0-.71-.71M6.34 6.34l-.71-.71M12 5a7 7 0 1 0 0 14A7 7 0 0 0 12 5z"
-                    />
-                  </svg>
-                ) : (
-                  <svg
-                    className="w-5 h-5"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    aria-hidden="true"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 1 0 9.79 9.79z"
-                    />
-                  </svg>
-                )}
-              </Button>
-            )}
-
-            {/* Cart */}
-            {cartHref && (
-              <Link
-                href={cartHref}
-                aria-label={`Cart${cartCount > 0 ? `, ${cartCount} items` : ""}`}
-                className="relative flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors"
-              >
-                <svg
-                  className="w-5 h-5"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  aria-hidden="true"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0z"
-                  />
-                </svg>
-                {cartCount > 0 && (
-                  <Span className="absolute -top-0.5 -right-0.5 flex items-center justify-center w-4 h-4 rounded-full bg-red-500 text-white text-[10px] font-bold leading-none">
-                    {cartCount > 9 ? "9+" : cartCount}
-                  </Span>
-                )}
-              </Link>
-            )}
-
-            {/* Profile */}
-            {profileHref && (
-              <Link
-                href={profileHref}
-                aria-label={
-                  user
-                    ? `Profile — ${user.displayName ?? user.email}`
-                    : "Sign in"
-                }
-                className="flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors"
-              >
-                {user?.photoURL ? (
-                  <Image
-                    src={user.photoURL}
-                    alt={user.displayName ?? "Profile"}
-                    width={28}
-                    height={28}
-                    className="w-7 h-7 rounded-full object-cover"
-                  />
-                ) : (
-                  <svg
-                    className="w-5 h-5"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    aria-hidden="true"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0zM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632z"
-                    />
-                  </svg>
-                )}
-              </Link>
-            )}
-          </Div>
-        </Div>
-      </Div>
-    </BlockHeader>
-  );
-}

package/src/features/layout/index.ts

@@ -1,46 +0,0 @@
-// @mohasinac/feat-layout
-// Generic layout shell components for any Next.js project.
-
-export { NavbarLayout } from "./NavbarLayout";
-export type { NavbarLayoutProps, NavbarLayoutItem } from "./NavbarLayout";
-
-export { FooterLayout } from "./FooterLayout";
-export type {
-  FooterLayoutProps,
-  FooterLinkGroup,
-  FooterSocialLink,
-  TrustBarItem,
-} from "./FooterLayout";
-
-export { SidebarLayout } from "./SidebarLayout";
-export type { SidebarLayoutProps } from "./SidebarLayout";
-
-export { BottomNavLayout } from "./BottomNavLayout";
-export type { BottomNavLayoutProps } from "./BottomNavLayout";
-
-export { BottomNavItem } from "./BottomNavItem";
-export type { BottomNavItemProps } from "./BottomNavItem";
-
-export { BottomSheet } from "./BottomSheet";
-export type { BottomSheetProps } from "./BottomSheet";
-
-export { TitleBarLayout } from "./TitleBarLayout";
-export type { TitleBarLayoutProps, TitleBarUser } from "./TitleBarLayout";
-
-export { AutoBreadcrumbs } from "./AutoBreadcrumbs";
-export type { AutoBreadcrumbsProps } from "./AutoBreadcrumbs";
-
-export { Breadcrumbs, BreadcrumbItem } from "./Breadcrumbs";
-export type { BreadcrumbsProps, BreadcrumbItemProps } from "./Breadcrumbs";
-
-export { LocaleSwitcher } from "./LocaleSwitcher";
-export type {
-  LocaleSwitcherProps,
-  LocaleSwitcherOption,
-} from "./LocaleSwitcher";
-
-export { BackToTop, SkipToMain } from "./BackToTop";
-export type { BackToTopProps } from "./BackToTop";
-
-export { ListingLayout } from "./ListingLayout";
-export type { ListingLayoutProps, ListingLayoutLabels } from "./ListingLayout";

package/src/features/loyalty/api/admin/loyalty/grant/route.ts

@@ -1,51 +0,0 @@
-/**
- * feat-loyalty — POST /api/admin/loyalty/grant
- *
- * Admin endpoint to grant loyalty points.
- *
- * Consumer stub:
- * ```ts
- * export { adminLoyaltyGrantPOST as POST } from "@mohasinac/feat-loyalty";
- * ```
- */
-
-import { NextResponse } from "next/server.js";
-import { getProviders } from "../../../../../../contracts";
-
-export async function POST(request: Request): Promise<NextResponse> {
-  try {
-    const body = await request.json();
-
-    const { db } = getProviders();
-    if (!db)
-      return NextResponse.json(
-        { success: false, error: "DB not configured" },
-        { status: 503 },
-      );
-
-    const repo = db.getRepository<Record<string, unknown>>(
-      "loyalty_transactions",
-    );
-    const created = await repo.create({
-      ...body,
-      type: "admin_grant",
-      createdAt: new Date(),
-    });
-
-    return NextResponse.json(
-      {
-        success: true,
-        data: created,
-      },
-      { status: 201 },
-    );
-  } catch (error) {
-    return NextResponse.json(
-      {
-        success: false,
-        error: error instanceof Error ? error.message : "Internal server error",
-      },
-      { status: 500 },
-    );
-  }
-}

package/src/features/loyalty/api/balance/route.ts

@@ -1,53 +0,0 @@
-/**
- * feat-loyalty — GET /api/loyalty/balance
- *
- * User loyalty points balance.
- *
- * Consumer stub:
- * ```ts
- * export { loyaltyBalanceGET as GET } from "@mohasinac/feat-loyalty";
- * ```
- */
-
-import { NextResponse } from "next/server.js";
-import { getProviders } from "../../../../contracts";
-
-export async function GET(request: Request): Promise<NextResponse> {
-  try {
-    const url = new URL(request.url);
-    const userId = url.searchParams.get("userId");
-
-    if (!userId) {
-      return NextResponse.json(
-        { success: false, error: "User ID required" },
-        { status: 400 },
-      );
-    }
-
-    const { db } = getProviders();
-    if (!db)
-      return NextResponse.json(
-        { success: false, error: "DB not configured" },
-        { status: 503 },
-      );
-
-    const repo = db.getRepository<Record<string, unknown>>("loyalty_balance");
-    const result = await repo.findAll({
-      filters: `userId==${userId}`,
-      perPage: 1,
-    });
-
-    return NextResponse.json({
-      success: true,
-      data: result.data[0] ?? { userId, balance: 0 },
-    });
-  } catch (error) {
-    return NextResponse.json(
-      {
-        success: false,
-        error: error instanceof Error ? error.message : "Internal server error",
-      },
-      { status: 500 },
-    );
-  }
-}

package/src/features/loyalty/api/earn/route.ts

@@ -1,51 +0,0 @@
-/**
- * feat-loyalty — POST /api/loyalty/earn
- *
- * Record loyalty points earned on transactions.
- *
- * Consumer stub:
- * ```ts
- * export { loyaltyEarnPOST as POST } from "@mohasinac/feat-loyalty";
- * ```
- */
-
-import { NextResponse } from "next/server.js";
-import { getProviders } from "../../../../contracts";
-
-export async function POST(request: Request): Promise<NextResponse> {
-  try {
-    const body = await request.json();
-
-    const { db } = getProviders();
-    if (!db)
-      return NextResponse.json(
-        { success: false, error: "DB not configured" },
-        { status: 503 },
-      );
-
-    const repo = db.getRepository<Record<string, unknown>>(
-      "loyalty_transactions",
-    );
-    const created = await repo.create({
-      ...body,
-      type: "earn",
-      createdAt: new Date(),
-    });
-
-    return NextResponse.json(
-      {
-        success: true,
-        data: created,
-      },
-      { status: 201 },
-    );
-  } catch (error) {
-    return NextResponse.json(
-      {
-        success: false,
-        error: error instanceof Error ? error.message : "Internal server error",
-      },
-      { status: 500 },
-    );
-  }
-}