@mohasinac/appkit 2.1.3 → 2.3.0

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

@@ -1,219 +0,0 @@
-import React from "react";
-import type { LayoutSlots } from "../../../contracts";
-import type { BlogPost, BlogPostCategory } from "../types";
-import { Article, Button, Div, Heading, Pagination, Span, Text } from "../../../ui";
-import { getMediaUrl } from "../../media/types/index";
-
-interface BlogCardProps {
-  post: BlogPost;
-  onClick?: (post: BlogPost) => void;
-  className?: string;
-}
-
-export function BlogCard({ post, onClick, className = "" }: BlogCardProps) {
-  const coverImageUrl = getMediaUrl(post.coverImage);
-  const date = post.publishedAt
-    ? new Date(post.publishedAt).toLocaleDateString("en-US", {
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-      })
-    : "";
-
-  return (
-    <Article
-      role={onClick ? "button" : undefined}
-      tabIndex={onClick ? 0 : undefined}
-      onKeyDown={
-        onClick
-          ? (e) => (e.key === "Enter" || e.key === " ") && onClick(post)
-          : undefined
-      }
-      onClick={onClick ? () => onClick(post) : undefined}
-      className={`group flex flex-col h-full overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-sm transition hover:shadow-md ${onClick ? "cursor-pointer" : ""} ${className}`}
-    >
-      {coverImageUrl && (
-        <Div className="aspect-video w-full overflow-hidden bg-neutral-100">
-          <Div
-            role="img"
-            aria-label={post.title}
-            className="h-full w-full bg-center bg-cover transition-transform duration-300 group-hover:scale-105"
-            style={{ backgroundImage: `url(${coverImageUrl})` }}
-          />
-        </Div>
-      )}
-      <Div className="flex flex-1 flex-col p-5">
-        <Div className="mb-2 flex items-center gap-2">
-          <Span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium capitalize text-primary">
-            {post.category}
-          </Span>
-          {post.readTimeMinutes && (
-            <Span className="text-xs text-neutral-400">
-              {post.readTimeMinutes} min read
-            </Span>
-          )}
-        </Div>
-        <Heading
-          level={3}
-          className="line-clamp-2 text-base font-semibold text-neutral-900 group-hover:text-primary"
-        >
-          {post.title}
-        </Heading>
-        {post.excerpt && (
-          <Text className="mt-2 line-clamp-3 flex-1 text-sm text-neutral-500">
-            {post.excerpt}
-          </Text>
-        )}
-        <Div className="mt-4 flex items-center gap-3">
-          {post.authorAvatar && (
-            <Div
-              role="img"
-              aria-label={post.authorName ?? "author"}
-              className="h-7 w-7 rounded-full bg-center bg-cover"
-              style={{ backgroundImage: `url(${post.authorAvatar})` }}
-            />
-          )}
-          <Text className="text-xs text-neutral-500">
-            {post.authorName && (
-              <Span className="font-medium text-neutral-700">
-                {post.authorName}
-              </Span>
-            )}
-            {date && <Span className="ml-1">· {date}</Span>}
-          </Text>
-        </Div>
-      </Div>
-    </Article>
-  );
-}
-
-interface BlogCategoryTabsProps {
-  categories: BlogPostCategory[];
-  active?: BlogPostCategory | null;
-  onSelect: (cat: BlogPostCategory | null) => void;
-  labels?: Record<string, string>;
-}
-
-export function BlogCategoryTabs({
-  categories,
-  active,
-  onSelect,
-  labels = {},
-}: BlogCategoryTabsProps) {
-  return (
-    <Div className="scrollbar-none flex gap-2 overflow-x-auto pb-1">
-      <Button
-        onClick={() => onSelect(null)}
-        variant={!active ? "primary" : "ghost"}
-        size="sm"
-        className={`whitespace-nowrap 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)}
-          variant={active === cat ? "primary" : "ghost"}
-          size="sm"
-          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}
-        </Button>
-      ))}
-    </Div>
-  );
-}
-
-interface BlogListViewProps<T extends BlogPost = BlogPost> {
-  posts: T[];
-  isLoading?: boolean;
-  totalPages?: number;
-  currentPage?: number;
-  total?: number;
-  onPageChange?: (page: number) => void;
-  onPostClick?: (post: T) => void;
-  emptyLabel?: string;
-  /** Render-prop slot overrides — pass via `FeatureExtension.slots`. */
-  slots?: LayoutSlots<T>;
-}
-
-export function BlogListView<T extends BlogPost = BlogPost>({
-  posts,
-  isLoading,
-  totalPages = 1,
-  currentPage = 1,
-  total = 0,
-  onPageChange,
-  onPostClick,
-  emptyLabel = "No posts found",
-  slots,
-}: BlogListViewProps<T>) {
-  if (isLoading) {
-    return (
-      <Div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-        {Array.from({ length: 6 }).map((_, i) => (
-          <Div
-            key={i}
-            className="animate-pulse overflow-hidden rounded-xl border border-neutral-200 bg-neutral-100"
-          >
-            <Div className="aspect-video bg-neutral-200" />
-            <Div className="space-y-2 p-5">
-              <Div className="h-4 w-16 rounded bg-neutral-200" />
-              <Div className="h-5 w-full rounded bg-neutral-200" />
-              <Div className="h-4 w-3/4 rounded bg-neutral-200" />
-            </Div>
-          </Div>
-        ))}
-      </Div>
-    );
-  }
-
-  if (posts.length === 0) {
-    if (slots?.renderEmptyState) {
-      return <>{slots.renderEmptyState() as React.ReactNode}</>;
-    }
-    return (
-      <Text className="py-12 text-center text-sm text-neutral-500">
-        {emptyLabel}
-      </Text>
-    );
-  }
-
-  return (
-    <Div className="space-y-8">
-      {slots?.renderHeader
-        ? (slots.renderHeader({ total }) as React.ReactNode)
-        : null}
-      <Div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-        {posts.map((post, i) =>
-          slots?.renderCard ? (
-            <React.Fragment key={post.id}>
-              {slots.renderCard(post, i) as React.ReactNode}
-            </React.Fragment>
-          ) : (
-            <BlogCard
-              key={post.id}
-              post={post}
-              onClick={onPostClick as ((post: BlogPost) => void) | undefined}
-            />
-          ),
-        )}
-      </Div>
-      {slots?.renderFooter ? (
-        (slots.renderFooter({
-          page: currentPage,
-          totalPages,
-        }) as React.ReactNode)
-      ) : totalPages > 1 && onPageChange ? (
-        <Div className="flex justify-center">
-          <Pagination
-            currentPage={currentPage}
-            totalPages={totalPages}
-            onPageChange={onPageChange}
-          />
-        </Div>
-      ) : null}
-    </Div>
-  );
-}

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

@@ -1,254 +0,0 @@
-"use client";
-
-import React from "react";
-import {
-  Div,
-  Input,
-  Label,
-  Select,
-  TagInput,
-  Text,
-  Textarea,
-} from "../../../ui";
-import { Checkbox } from "../../forms/index";
-import { MediaUploadField, MediaUploadList } from "../../media/index";
-import {
-  coerceMediaFieldArray,
-  getMediaUrl,
-  type MediaField,
-  type MediaFieldInput,
-} from "../../media/types/index";
-
-export interface BlogPostFormValue {
-  title?: string;
-  slug?: string;
-  excerpt?: string;
-  content?: string;
-  coverImage?: MediaFieldInput;
-  contentImages?: MediaField[];
-  additionalImages?: MediaField[];
-  category?: string;
-  tags?: string[];
-  isFeatured?: boolean;
-  status?: string;
-  readTimeMinutes?: number;
-}
-
-export interface BlogPostFormOption {
-  value: string;
-  label: string;
-}
-
-export interface BlogPostFormLabels {
-  title: string;
-  slug: string;
-  excerpt: string;
-  content: string;
-  coverImage: string;
-  coverImageHelper?: string;
-  contentImages: string;
-  contentImagesHelper?: string;
-  additionalImages: string;
-  additionalImagesHelper?: string;
-  category: string;
-  status: string;
-  tags: string;
-  readTime: string;
-  featured: string;
-}
-
-export interface BlogPostFormProps {
-  value: BlogPostFormValue;
-  onChange: (next: BlogPostFormValue) => void;
-  categoryOptions: BlogPostFormOption[];
-  statusOptions: BlogPostFormOption[];
-  labels: BlogPostFormLabels;
-  onUploadCover: (file: File) => Promise<string>;
-  onUploadContentImage: (file: File) => Promise<string>;
-  onUploadAdditionalImage: (file: File) => Promise<string>;
-  onAbort?: (stagedUrls: string[]) => void;
-  isReadonly?: boolean;
-  renderContentField?: (args: {
-    value: string;
-    onChange: (value: string) => void;
-    isReadonly: boolean;
-  }) => React.ReactNode;
-  renderContentReadonly?: (value: string) => React.ReactNode;
-}
-
-export function BlogPostForm({
-  value,
-  onChange,
-  categoryOptions,
-  statusOptions,
-  labels,
-  onUploadCover,
-  onUploadContentImage,
-  onUploadAdditionalImage,
-  onAbort,
-  isReadonly = false,
-  renderContentField,
-  renderContentReadonly,
-}: BlogPostFormProps) {
-  const coverImageUrl = getMediaUrl(value.coverImage);
-  const contentImages = coerceMediaFieldArray(value.contentImages);
-  const additionalImages = coerceMediaFieldArray(value.additionalImages);
-
-  const update = (partial: Partial<BlogPostFormValue>) => {
-    onChange({
-      ...value,
-      ...partial,
-    });
-  };
-
-  return (
-    <Div className="space-y-5">
-      <Div className="grid gap-4 md:grid-cols-2">
-        <Div className="space-y-1.5">
-          <Label htmlFor="blog-post-title">{labels.title}</Label>
-          <Input
-            id="blog-post-title"
-            value={value.title || ""}
-            onChange={(event) => update({ title: event.target.value })}
-            disabled={isReadonly}
-          />
-        </Div>
-
-        <Div className="space-y-1.5">
-          <Label htmlFor="blog-post-slug">{labels.slug}</Label>
-          <Input
-            id="blog-post-slug"
-            value={value.slug || ""}
-            onChange={(event) => update({ slug: event.target.value })}
-            disabled={isReadonly}
-          />
-        </Div>
-      </Div>
-
-      <Div className="space-y-1.5">
-        <Label htmlFor="blog-post-excerpt">{labels.excerpt}</Label>
-        <Textarea
-          id="blog-post-excerpt"
-          value={value.excerpt || ""}
-          onChange={(event) => update({ excerpt: event.target.value })}
-          rows={3}
-          disabled={isReadonly}
-        />
-      </Div>
-
-      <Div className="space-y-1.5">
-        <Label>{labels.content}</Label>
-        {renderContentField ? (
-          renderContentField({
-            value: value.content || "",
-            onChange: (content) => update({ content }),
-            isReadonly,
-          })
-        ) : isReadonly && renderContentReadonly ? (
-          renderContentReadonly(value.content || "")
-        ) : (
-          <Textarea
-            value={value.content || ""}
-            onChange={(event) => update({ content: event.target.value })}
-            rows={10}
-            disabled={isReadonly}
-          />
-        )}
-      </Div>
-
-      <MediaUploadField
-        label={labels.coverImage}
-        value={coverImageUrl || ""}
-        onChange={(url) =>
-          update({ coverImage: url ? { url, type: "image" } : null })
-        }
-        onChangeField={(media) => update({ coverImage: media })}
-        onUpload={onUploadCover}
-        onAbort={onAbort}
-        accept="image/*"
-        maxSizeMB={10}
-        disabled={isReadonly}
-        helperText={labels.coverImageHelper}
-      />
-
-      <MediaUploadList
-        label={labels.contentImages}
-        value={contentImages}
-        onChange={(media) => update({ contentImages: media })}
-        onUpload={onUploadContentImage}
-        onAbort={onAbort}
-        accept="image/*"
-        maxItems={10}
-        maxSizeMB={10}
-        disabled={isReadonly}
-        helperText={labels.contentImagesHelper}
-      />
-
-      <MediaUploadList
-        label={labels.additionalImages}
-        value={additionalImages}
-        onChange={(media) => update({ additionalImages: media })}
-        onUpload={onUploadAdditionalImage}
-        onAbort={onAbort}
-        accept="image/*"
-        maxItems={5}
-        maxSizeMB={10}
-        disabled={isReadonly}
-        helperText={labels.additionalImagesHelper}
-      />
-
-      <Div className="grid gap-4 md:grid-cols-2">
-        <Select
-          label={labels.category}
-          value={value.category}
-          onChange={(category) => update({ category })}
-          options={categoryOptions}
-          disabled={isReadonly}
-        />
-        <Select
-          label={labels.status}
-          value={value.status}
-          onChange={(status) => update({ status })}
-          options={statusOptions}
-          disabled={isReadonly}
-        />
-      </Div>
-
-      <Div className="grid gap-4 md:grid-cols-2">
-        <TagInput
-          label={labels.tags}
-          value={value.tags ?? []}
-          onChange={(tags) => update({ tags })}
-          disabled={isReadonly}
-        />
-        <Div className="space-y-1.5">
-          <Label htmlFor="blog-post-read-time">{labels.readTime}</Label>
-          <Input
-            id="blog-post-read-time"
-            type="number"
-            value={String(value.readTimeMinutes ?? 5)}
-            onChange={(event) =>
-              update({
-                readTimeMinutes: parseInt(event.target.value, 10) || 5,
-              })
-            }
-            disabled={isReadonly}
-          />
-        </Div>
-      </Div>
-
-      <Checkbox
-        label={labels.featured}
-        checked={value.isFeatured || false}
-        onChange={(event) => update({ isFeatured: event.target.checked })}
-        disabled={isReadonly}
-      />
-
-      {isReadonly && coverImageUrl && (
-        <Text size="xs" variant="secondary">
-          {coverImageUrl}
-        </Text>
-      )}
-    </Div>
-  );
-}

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

@@ -1,221 +0,0 @@
-"use client";
-
-import React from "react";
-import { Div, Heading, Row, Span, Text } from "../../../ui";
-import { useBlogPost } from "../hooks/useBlog";
-import { BlogCard } from "./BlogListView";
-import type { BlogPost, BlogPostCategory } from "../types";
-import type { BlogPostDetailResponse } from "../api/[slug]/route";
-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 BlogPostViewProps {
-  slug: string;
-  initialData?: BlogPostDetailResponse;
-  labels?: {
-    backToBlog?: string;
-    notFound?: string;
-    notFoundDescription?: string;
-    author?: string;
-    readTime?: string;
-    publishedOn?: string;
-    viewsLabel?: string;
-    featured?: string;
-    relatedTitle?: string;
-  };
-  /** Render the cover image */
-  renderImage?: (post: BlogPost) => React.ReactNode;
-  /** Render the HTML content (for custom sanitization/prosemirror) */
-  renderContent?: (post: BlogPost) => React.ReactNode;
-  /** Render a back button */
-  renderBackButton?: () => React.ReactNode;
-  /** Render loading state */
-  renderLoading?: () => React.ReactNode;
-  /** Render error/not-found state */
-  renderError?: (error: Error | null) => React.ReactNode;
-  /** Render a related post card */
-  renderRelatedCard?: (post: BlogPost, index: number) => React.ReactNode;
-  className?: string;
-}
-
-export function BlogPostView({
-  slug,
-  initialData,
-  labels = {},
-  renderImage,
-  renderContent,
-  renderBackButton,
-  renderLoading,
-  renderError,
-  renderRelatedCard,
-  className = "",
-}: BlogPostViewProps) {
-  const { post, related, isLoading, error } = useBlogPost(slug, {
-    initialData,
-  });
-
-  if (isLoading) {
-    if (renderLoading) return <>{renderLoading()}</>;
-    return (
-      <Div className="flex items-center justify-center min-h-screen">
-        <Div className="animate-pulse text-neutral-400">Loading…</Div>
-      </Div>
-    );
-  }
-
-  if (error || !post) {
-    if (renderError) return <>{renderError(error ?? null)}</>;
-    return (
-      <Div className="flex flex-col items-center justify-center min-h-screen gap-4 p-8">
-        <Heading level={1} className="text-xl font-semibold">
-          {labels.notFound ?? "Post not found"}
-        </Heading>
-        <Text className="text-neutral-500">
-          {labels.notFoundDescription ?? "This post is not available."}
-        </Text>
-        {renderBackButton?.()}
-      </Div>
-    );
-  }
-
-  const date = post.publishedAt
-    ? new Date(post.publishedAt).toLocaleDateString("en-US", {
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-      })
-    : "";
-  const coverImageUrl = getMediaUrl(post.coverImage);
-
-  return (
-    <Div className={`min-h-screen ${className}`}>
-      {/* Cover image */}
-      {coverImageUrl && (
-        <Div className="relative h-72 md:h-96 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 className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
-        </Div>
-      )}
-
-      <Div className="max-w-3xl mx-auto px-4 py-12">
-        {/* Header */}
-        <Div className="mb-8">
-          <Div className="flex items-center gap-2 mb-4">
-            <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.featured ?? "Featured"}
-              </Span>
-            )}
-          </Div>
-          <Heading level={1} className="text-3xl font-bold mb-4">
-            {post.title}
-          </Heading>
-          {post.excerpt && (
-            <Text className="text-lg text-neutral-500 mb-6">
-              {post.excerpt}
-            </Text>
-          )}
-          <Row wrap gap="md" className="text-sm text-neutral-400">
-            {post.authorName && (
-              <Span>
-                {labels.author ?? "By"}{" "}
-                <Span className="font-medium text-neutral-700">
-                  {post.authorName}
-                </Span>
-              </Span>
-            )}
-            {post.readTimeMinutes != null && (
-              <Span>
-                {post.readTimeMinutes} {labels.readTime ?? "min read"}
-              </Span>
-            )}
-            {date && (
-              <Span>
-                {labels.publishedOn ?? "Published"} {date}
-              </Span>
-            )}
-            {post.views != null && (
-              <Span>
-                {post.views} {labels.viewsLabel ?? "views"}
-              </Span>
-            )}
-          </Row>
-        </Div>
-
-        {/* Tags */}
-        {post.tags && post.tags.length > 0 && (
-          <Row wrap gap="sm" className="mb-8">
-            {post.tags.map((tag) => (
-              <Span
-                key={tag}
-                className="inline-block px-3 py-1 rounded-full bg-neutral-100 text-neutral-600 text-xs font-medium"
-              >
-                #{tag}
-              </Span>
-            ))}
-          </Row>
-        )}
-
-        {/* Content */}
-        <Div className="bg-white rounded-xl border border-neutral-200 p-8 mb-12">
-          {renderContent ? (
-            renderContent(post)
-          ) : (
-            <Div
-              className="prose max-w-none"
-              dangerouslySetInnerHTML={{ __html: post.content ?? "" }}
-            />
-          )}
-        </Div>
-
-        {/* Related posts */}
-        {related.length > 0 && (
-          <Div>
-            <Heading level={2} className="text-xl font-semibold mb-6">
-              {labels.relatedTitle ?? "Related Posts"}
-            </Heading>
-            <Div className="grid sm:grid-cols-3 gap-6">
-              {related.map((rel, i) =>
-                renderRelatedCard ? (
-                  <React.Fragment key={rel.id}>
-                    {renderRelatedCard(rel, i)}
-                  </React.Fragment>
-                ) : (
-                  <BlogCard key={rel.id} post={rel} />
-                ),
-              )}
-            </Div>
-          </Div>
-        )}
-
-        {/* Back button */}
-        {renderBackButton && (
-          <Div className="mt-10 pt-8 border-t border-neutral-200">
-            {renderBackButton()}
-          </Div>
-        )}
-      </Div>
-    </Div>
-  );
-}

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

@@ -1,12 +0,0 @@
-export { BlogCard, BlogCategoryTabs, BlogListView } from "./BlogListView";
-export { BlogFeaturedCard } from "./BlogFeaturedCard";
-export type { BlogFeaturedCardProps } from "./BlogFeaturedCard";
-export { BlogPostForm } from "./BlogPostForm";
-export type {
-	BlogPostFormLabels,
-	BlogPostFormOption,
-	BlogPostFormProps,
-	BlogPostFormValue,
-} from "./BlogPostForm";
-export { BlogPostView } from "./BlogPostView";
-export type { BlogPostViewProps } from "./BlogPostView";