@mohasinac/appkit 2.1.3 → 2.3.0

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

@@ -1,51 +0,0 @@
-import type { TableColumn, ColumnExtensionOpts } from "../../../contracts";
-import type { CategoryItem } from "../types";
-
-/**
- * Default admin column definitions for a category table.
- *
- * @example
- * const columns = buildCategoryColumns<MyCategory>({
- *   extras: [{ key: "colorHex", header: "Color", render: (c) => c.colorHex ?? "—" }],
- * });
- */
-export const categoryAdminColumns: TableColumn<CategoryItem>[] = [
-  { key: "name", header: "Name", sortable: true },
-  { key: "type", header: "Type", sortable: true },
-  { key: "slug", header: "Slug" },
-  { key: "tier", header: "Tier", sortable: true },
-  {
-    key: "isFeatured",
-    header: "Featured",
-    render: (c) => (c.isFeatured ? "Yes" : "No"),
-  },
-  {
-    key: "productCount",
-    header: "Products",
-    sortable: true,
-    render: (c) => c.metrics?.productCount.toLocaleString() ?? "—",
-  },
-  {
-    key: "isLeaf",
-    header: "Leaf",
-    render: (c) => (c.isLeaf ? "Yes" : "No"),
-  },
-  { key: "createdAt", header: "Created", sortable: true },
-];
-
-/**
- * Build a merged column list from the base category columns.
- */
-export function buildCategoryColumns<T extends CategoryItem = CategoryItem>(
-  opts?: ColumnExtensionOpts<T>,
-): TableColumn<T>[] {
-  const base = categoryAdminColumns 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/categories/components/BreadcrumbTrail.tsx

@@ -1,80 +0,0 @@
-"use client";
-
-import React from "react";
-import { Breadcrumb } from "../../../ui";
-import type { BreadcrumbItem } from "../../../ui";
-import type { CategoryItem, CategoryAncestor } from "../types";
-
-// ─── BreadcrumbTrail ──────────────────────────────────────────────────────────
-
-export interface BreadcrumbTrailProps {
-  /**
-   * The current (leaf) category whose ancestry should be shown as breadcrumbs.
-   * Uses `category.ancestors` if present, otherwise only the category itself.
-   */
-  category: CategoryItem;
-  /**
-   * Label for the implicit root item prepended to the trail.
-   * Default: "All Categories"
-   */
-  rootLabel?: string;
-  /**
-   * Href for the root breadcrumb item.
-   * Default: "/categories"
-   */
-  rootHref?: string;
-  /**
-   * Base path used to construct hrefs for ancestor items.
-   * Each ancestor's href becomes `${basePath}/${ancestor.id}`.
-   * Default: "/categories"
-   */
-  basePath?: string;
-  /**
-   * When true, the current (leaf) category is rendered as a non-link text item.
-   * Default: true
-   */
-  showCurrent?: boolean;
-  className?: string;
-}
-
-/**
- * BreadcrumbTrail — a category-aware breadcrumb component.
- *
- * Renders the full ancestor chain for a category using the `ancestors` array
- * stored on `CategoryItem`. Falls back gracefully when `ancestors` is absent
- * (shows only the root + current category).
- *
- * @example
- * ```tsx
- * <BreadcrumbTrail
- *   category={category}
- *   rootHref="/categories"
- *   basePath="/categories"
- * />
- * ```
- */
-export function BreadcrumbTrail({
-  category,
-  rootLabel = "All Categories",
-  rootHref = "/categories",
-  basePath = "/categories",
-  showCurrent = true,
-  className,
-}: BreadcrumbTrailProps) {
-  const items: BreadcrumbItem[] = [
-    // Root
-    { label: rootLabel, href: rootHref },
-    // Ancestors (sorted by tier ascending so root → leaf order)
-    ...(category.ancestors ?? [])
-      .slice()
-      .sort((a: CategoryAncestor, b: CategoryAncestor) => a.tier - b.tier)
-      .map((ancestor: CategoryAncestor) => ({
-        label: ancestor.name,
-        href: `${basePath}/${ancestor.id}`,
-      })),
-    // Current category (no href so it renders as the active item)
-    ...(showCurrent ? [{ label: category.name }] : []),
-  ];
-
-  return <Breadcrumb items={items} className={className} />;
-}

package/src/features/categories/components/CategoriesListView.tsx

@@ -1,77 +0,0 @@
-"use client";
-
-import React from "react";
-import { Container, Div, Heading, Text } from "../../../ui";
-import type { CategoryItem } from "../types";
-
-export interface CategoriesListViewProps {
-  initialData?: CategoryItem[];
-  labels?: {
-    title?: string;
-    subtitle?: string;
-    emptyTitle?: string;
-    emptyDescription?: string;
-  };
-  renderSearch?: (
-    value: string,
-    onChange: (v: string) => void,
-  ) => React.ReactNode;
-  renderCategories: (
-    items: CategoryItem[],
-    isLoading: boolean,
-  ) => React.ReactNode;
-  renderPagination?: (total: number) => React.ReactNode;
-  items?: CategoryItem[];
-  total?: number;
-  isLoading?: boolean;
-  className?: string;
-}
-
-export function CategoriesListView({
-  labels = {},
-  renderSearch,
-  renderCategories,
-  renderPagination,
-  items = [],
-  total = 0,
-  isLoading = false,
-  className = "",
-}: CategoriesListViewProps) {
-  const [search, setSearch] = React.useState("");
-
-  const filtered = React.useMemo(() => {
-    const q = search.trim().toLowerCase();
-    if (!q) return items;
-    return items.filter(
-      (c) =>
-        (c.name ?? "").toLowerCase().includes(q) ||
-        (c.description ?? "").toLowerCase().includes(q),
-    );
-  }, [items, search]);
-
-  return (
-    <Div className={`min-h-screen ${className}`}>
-      <Container size="full" className="py-8">
-        {(labels.title || labels.subtitle) && (
-          <Div className="mb-6">
-            {labels.title && (
-              <Heading level={1} className="text-2xl font-bold">
-                {labels.title}
-              </Heading>
-            )}
-            {labels.subtitle && (
-              <Text variant="secondary" className="mt-1">
-                {labels.subtitle}
-              </Text>
-            )}
-          </Div>
-        )}
-
-        {renderSearch?.(search, setSearch)}
-
-        {renderCategories(filtered, isLoading)}
-        {renderPagination?.(total)}
-      </Container>
-    </Div>
-  );
-}

package/src/features/categories/components/CategoryGrid.tsx

@@ -1,93 +0,0 @@
-"use client";
-
-import React from "react";
-import { Div, Grid, Text } from "../../../ui";
-import type { CategoryItem } from "../types";
-
-// ─── CategoryCard ─────────────────────────────────────────────────────────────
-
-export interface CategoryCardProps {
-  category: CategoryItem;
-  onClick?: (category: CategoryItem) => void;
-  className?: string;
-}
-
-export function CategoryCard({
-  category,
-  onClick,
-  className = "",
-}: CategoryCardProps) {
-  return (
-    <Div
-      role={onClick ? "button" : undefined}
-      tabIndex={onClick ? 0 : undefined}
-      onKeyDown={
-        onClick
-          ? (e) => (e.key === "Enter" || e.key === " ") && onClick(category)
-          : undefined
-      }
-      onClick={onClick ? () => onClick(category) : undefined}
-      className={`group relative overflow-hidden rounded-xl border border-neutral-200 bg-white dark:border-zinc-700 dark:bg-zinc-900 shadow-sm transition hover:shadow-md ${onClick ? "cursor-pointer" : ""} ${className}`}
-    >
-      {category.display?.coverImage ? (
-        <Div className="aspect-video w-full overflow-hidden bg-neutral-100 dark:bg-zinc-800">
-          <Div
-            role="img"
-            aria-label={category.name}
-            className="h-full w-full bg-center bg-cover transition-transform duration-300 group-hover:scale-105"
-            style={{ backgroundImage: `url(${category.display.coverImage})` }}
-          />
-        </Div>
-      ) : (
-        <Div className="aspect-video w-full bg-gradient-to-br from-neutral-100 to-neutral-200 dark:from-zinc-800 dark:to-zinc-700" />
-      )}
-      <Div className="p-4">
-        <Text className="font-semibold text-neutral-900 dark:text-white line-clamp-2">
-          {category.name}
-        </Text>
-        {category.description && (
-          <Text className="mt-1 text-sm text-neutral-500 dark:text-zinc-400 line-clamp-2">
-            {category.description}
-          </Text>
-        )}
-        {category.metrics && (
-          <Text className="mt-2 text-xs text-neutral-400 dark:text-zinc-500">
-            {category.metrics.productCount.toLocaleString()} items
-          </Text>
-        )}
-      </Div>
-    </Div>
-  );
-}
-
-// ─── CategoryGrid ─────────────────────────────────────────────────────────────
-
-export interface CategoryGridProps {
-  categories: CategoryItem[];
-  onCategoryClick?: (category: CategoryItem) => void;
-  emptyLabel?: string;
-  className?: string;
-}
-
-export function CategoryGrid({
-  categories,
-  onCategoryClick,
-  emptyLabel = "No categories found",
-  className = "",
-}: CategoryGridProps) {
-  if (categories.length === 0) {
-    return (
-      <Text className="py-12 text-center text-sm text-neutral-500 dark:text-zinc-500">
-        {emptyLabel}
-      </Text>
-    );
-  }
-
-  return (
-    <Grid cols="categoryCards" className={className}>
-      {categories.map((cat) => (
-        <CategoryCard key={cat.id} category={cat} onClick={onCategoryClick} />
-      ))}
-    </Grid>
-  );
-}

package/src/features/categories/components/CategoryProductsView.tsx

@@ -1,116 +0,0 @@
-"use client";
-
-import React from "react";
-import { Div, Heading, Row, Text } from "../../../ui";
-import type { CategoryItem } from "../types";
-
-export interface CategoryProductsViewProps {
-  /** Category slug */
-  slug: string;
-  /** Initial SSR category data */
-  initialCategory?: CategoryItem;
-  /** Initial SSR child categories */
-  initialChildren?: CategoryItem[];
-  labels?: {
-    emptyTitle?: string;
-    emptyDescription?: string;
-  };
-  /** Render breadcrumb trail */
-  renderBreadcrumbs?: (category: CategoryItem | null) => React.ReactNode;
-  /** Render child category chips/tabs */
-  renderChildCategories?: (children: CategoryItem[]) => React.ReactNode;
-  /** Render filter panel */
-  renderFilters?: () => React.ReactNode;
-  /** Render active filter chips */
-  renderActiveFilters?: () => React.ReactNode;
-  /** Render search */
-  renderSearch?: (
-    value: string,
-    onChange: (v: string) => void,
-  ) => React.ReactNode;
-  /** Render sort dropdown */
-  renderSort?: (
-    value: string,
-    onChange: (v: string) => void,
-  ) => React.ReactNode;
-  /** Render view mode toggle */
-  renderViewToggle?: (
-    mode: string,
-    onToggle: (m: string) => void,
-  ) => React.ReactNode;
-  /** Render the products grid */
-  renderProducts: (isLoading: boolean) => React.ReactNode;
-  /** Render pagination */
-  renderPagination?: (total: number) => React.ReactNode;
-  /** Provide category (when fetched externally / SSR) */
-  category?: CategoryItem | null;
-  children?: CategoryItem[];
-  total?: number;
-  isLoading?: boolean;
-  className?: string;
-}
-
-export function CategoryProductsView({
-  labels = {},
-  renderBreadcrumbs,
-  renderChildCategories,
-  renderFilters,
-  renderActiveFilters,
-  renderSearch,
-  renderSort,
-  renderViewToggle,
-  renderProducts,
-  renderPagination,
-  category = null,
-  children: childCategories = [],
-  total = 0,
-  isLoading = false,
-  className = "",
-}: CategoryProductsViewProps) {
-  const [search, setSearch] = React.useState("");
-  const [sort, setSort] = React.useState("-createdAt");
-  const [viewMode, setViewMode] = React.useState("grid");
-
-  return (
-    <Div className={`min-h-screen ${className}`}>
-      <Div className="py-6 px-4 max-w-screen-xl mx-auto space-y-4">
-        {/* Breadcrumbs */}
-        {category && renderBreadcrumbs?.(category)}
-
-        {/* Category title */}
-        {category && (
-          <Div>
-            <Heading level={1} className="text-2xl font-bold">
-              {category.name}
-            </Heading>
-            {category.description && (
-              <Text className="text-neutral-500 mt-1">
-                {category.description}
-              </Text>
-            )}
-          </Div>
-        )}
-
-        {/* Child categories */}
-        {childCategories.length > 0 && renderChildCategories?.(childCategories)}
-
-        {/* Toolbar */}
-        <Row wrap gap="3">
-          {renderSearch?.(search, setSearch)}
-          {renderSort?.(sort, setSort)}
-          {renderFilters?.()}
-          {renderViewToggle?.(viewMode, setViewMode)}
-        </Row>
-
-        {/* Active filters */}
-        {renderActiveFilters?.()}
-
-        {/* Products */}
-        {renderProducts(isLoading)}
-
-        {/* Pagination */}
-        {renderPagination?.(total)}
-      </Div>
-    </Div>
-  );
-}

package/src/features/categories/components/CategoryTree.tsx

@@ -1,156 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Div, Span, Text } from "../../../ui";
-import type { CategoryItem } from "../types";
-
-// ─── CategoryTreeNode ──────────────────────────────────────────────────────────
-
-interface CategoryTreeNodeProps {
-  item: CategoryItem;
-  children?: CategoryItem[];
-  activeId?: string;
-  onSelect?: (category: CategoryItem) => void;
-  depth?: number;
-}
-
-function CategoryTreeNode({
-  item,
-  children = [],
-  activeId,
-  onSelect,
-  depth = 0,
-}: CategoryTreeNodeProps) {
-  const hasChildren = children.length > 0;
-  const isActive = item.id === activeId;
-  const [expanded, setExpanded] = useState(true);
-
-  const indent = depth * 16;
-
-  return (
-    <Div>
-      <Div
-        role="treeitem"
-        aria-expanded={hasChildren ? expanded : undefined}
-        aria-selected={isActive}
-        tabIndex={0}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            if (hasChildren) setExpanded((p) => !p);
-            onSelect?.(item);
-            e.preventDefault();
-          }
-        }}
-        onClick={() => {
-          if (hasChildren) setExpanded((p) => !p);
-          onSelect?.(item);
-        }}
-        className={`flex cursor-pointer items-center gap-1 rounded-md px-2 py-1.5 text-sm transition select-none
-          ${isActive ? "bg-primary-50 font-semibold text-primary-700 dark:bg-primary-900/30 dark:text-primary-400" : "text-neutral-700 hover:bg-neutral-50 dark:text-zinc-300 dark:hover:bg-zinc-800"}`}
-        style={{ paddingLeft: `${8 + indent}px` }}
-      >
-        {hasChildren && (
-          <Span
-            aria-hidden="true"
-            className={`text-xs text-neutral-400 dark:text-zinc-500 transition-transform duration-150 ${expanded ? "rotate-90" : ""}`}
-          >
-            ▶
-          </Span>
-        )}
-        {!hasChildren && <Span className="w-3" />}
-
-        {item.display?.icon && (
-          <Span className="flex-shrink-0 text-base" aria-hidden="true">
-            {item.display.icon}
-          </Span>
-        )}
-
-        <Text className="flex-1 truncate">{item.name}</Text>
-
-        {item.metrics && (
-          <Span className="ml-auto flex-shrink-0 text-xs text-neutral-400 dark:text-zinc-500 tabular-nums">
-            {item.metrics.productCount}
-          </Span>
-        )}
-      </Div>
-
-      {hasChildren && expanded && (
-        <Div role="group">
-          {children.map((child) => (
-            <CategoryTreeNode
-              key={child.id}
-              item={child}
-              activeId={activeId}
-              onSelect={onSelect}
-              depth={depth + 1}
-            />
-          ))}
-        </Div>
-      )}
-    </Div>
-  );
-}
-
-// ─── CategoryTree ─────────────────────────────────────────────────────────────
-
-export interface CategoryTreeProps {
-  /** Flat list of categories; the tree is built from `parentIds`/`childrenIds`. */
-  categories: CategoryItem[];
-  activeId?: string;
-  onSelect?: (category: CategoryItem) => void;
-  className?: string;
-}
-
-/**
- * CategoryTree — hierarchical expandable navigation for categories.
- *
- * Builds a tree from a flat list by grouping on `rootId` and `parentIds`.
- * Root-level nodes have `tier === 0` or no `parentIds`.
- */
-export function CategoryTree({
-  categories,
-  activeId,
-  onSelect,
-  className = "",
-}: CategoryTreeProps) {
-  // Group children by parent
-  const childMap = new Map<string, CategoryItem[]>();
-  const roots: CategoryItem[] = [];
-
-  for (const cat of categories) {
-    const parent = cat.parentIds?.[cat.parentIds.length - 1];
-    if (parent) {
-      if (!childMap.has(parent)) childMap.set(parent, []);
-      childMap.get(parent)!.push(cat);
-    } else {
-      roots.push(cat);
-    }
-  }
-
-  if (roots.length === 0) {
-    return (
-      <Text className="py-4 text-center text-sm text-neutral-500 dark:text-zinc-500">
-        No categories
-      </Text>
-    );
-  }
-
-  return (
-    <Div
-      role="tree"
-      aria-label="Category navigation"
-      className={`select-none ${className}`}
-    >
-      {roots.map((root) => (
-        <CategoryTreeNode
-          key={root.id}
-          item={root}
-          children={childMap.get(root.id)}
-          activeId={activeId}
-          onSelect={onSelect}
-          depth={0}
-        />
-      ))}
-    </Div>
-  );
-}

package/src/features/categories/components/ConcernCard.tsx

@@ -1,45 +0,0 @@
-import type { CategoryItem } from "../types";
-import { Button, Div, Heading, Text } from "../../../ui";
-
-interface ConcernCardProps {
-  concern: CategoryItem;
-  onClick?: (concern: CategoryItem) => void;
-  className?: string;
-}
-
-export function ConcernCard({
-  concern,
-  onClick,
-  className = "",
-}: ConcernCardProps) {
-  return (
-    <Button
-      type="button"
-      variant="outline"
-      onClick={() => onClick?.(concern)}
-      className={`group flex flex-col items-center gap-3 rounded-xl border border-neutral-200 bg-white p-4 text-center shadow-sm transition hover:border-primary hover:shadow-md ${className}`}
-    >
-      {concern.display?.coverImage && (
-        <Div
-          role="img"
-          aria-label={concern.name}
-          className="h-16 w-16 rounded-full bg-center bg-cover"
-          style={{ backgroundImage: `url(${concern.display.coverImage})` }}
-        />
-      )}
-      <Div>
-        <Heading
-          level={3}
-          className="text-sm font-semibold text-neutral-900 group-hover:text-primary"
-        >
-          {concern.name}
-        </Heading>
-        {concern.description && (
-          <Text className="mt-1 text-xs text-neutral-500 line-clamp-2">
-            {concern.description}
-          </Text>
-        )}
-      </Div>
-    </Button>
-  );
-}

package/src/features/categories/components/ConcernGrid.tsx

@@ -1,25 +0,0 @@
-import { Grid } from "../../../ui";
-import type { CategoryItem } from "../types";
-import { ConcernCard } from "./ConcernCard";
-
-interface ConcernGridProps {
-  concerns: CategoryItem[];
-  onSelect?: (concern: CategoryItem) => void;
-  className?: string;
-}
-
-export function ConcernGrid({
-  concerns,
-  onSelect,
-  className = "",
-}: ConcernGridProps) {
-  if (concerns.length === 0) return null;
-
-  return (
-    <Grid cols="categoryCards" className={className}>
-      {concerns.map((concern) => (
-        <ConcernCard key={concern.id} concern={concern} onClick={onSelect} />
-      ))}
-    </Grid>
-  );
-}

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

@@ -1,17 +0,0 @@
-export type { CategoryCardProps, CategoryGridProps } from "./CategoryGrid";
-export { CategoryCard, CategoryGrid } from "./CategoryGrid";
-
-export type { CategoryTreeProps } from "./CategoryTree";
-export { CategoryTree } from "./CategoryTree";
-
-export type { BreadcrumbTrailProps } from "./BreadcrumbTrail";
-export { BreadcrumbTrail } from "./BreadcrumbTrail";
-
-export { ConcernCard } from "./ConcernCard";
-export { ConcernGrid } from "./ConcernGrid";
-
-export { CategoriesListView } from "./CategoriesListView";
-export type { CategoriesListViewProps } from "./CategoriesListView";
-
-export { CategoryProductsView } from "./CategoryProductsView";
-export type { CategoryProductsViewProps } from "./CategoryProductsView";