@jhits/plugin-blog 0.0.14 → 0.0.16

package/src/views/PostManager/PostActionsMenu.tsx

@@ -0,0 +1,112 @@
+/**
+ * Post Actions Menu Component
+ * Three-dot menu with actions for each post
+ */
+
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { MoreVertical, Edit, Eye, Copy, Trash2 } from 'lucide-react';
+
+export interface PostActionsMenuProps {
+    onEdit: () => void;
+    onPreview: () => void;
+    onDuplicate: () => void;
+    onDelete: () => void;
+}
+
+export function PostActionsMenu({
+    onEdit,
+    onPreview,
+    onDuplicate,
+    onDelete,
+}: PostActionsMenuProps) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [menuPosition, setMenuPosition] = useState({ top: 0, right: 0 });
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const menuRef = useRef<HTMLDivElement>(null);
+
+    // Calculate menu position when opening
+    useEffect(() => {
+        if (isOpen && buttonRef.current) {
+            const buttonRect = buttonRef.current.getBoundingClientRect();
+            setMenuPosition({
+                top: buttonRect.bottom + 8, // 8px = mt-2 equivalent
+                right: window.innerWidth - buttonRect.right,
+            });
+        }
+    }, [isOpen]);
+
+    useEffect(() => {
+        function handleClickOutside(event: MouseEvent) {
+            if (
+                menuRef.current &&
+                !menuRef.current.contains(event.target as Node) &&
+                buttonRef.current &&
+                !buttonRef.current.contains(event.target as Node)
+            ) {
+                setIsOpen(false);
+            }
+        }
+
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+
+    const actions = [
+        { label: 'Edit', icon: Edit, onClick: onEdit, color: 'text-neutral-600 dark:text-neutral-400' },
+        // { label: 'Preview', icon: Eye, onClick: onPreview, color: 'text-blue-600 dark:text-blue-400' },
+        { label: 'Duplicate', icon: Copy, onClick: onDuplicate, color: 'text-neutral-600 dark:text-neutral-400' },
+        { label: 'Delete', icon: Trash2, onClick: onDelete, color: 'text-red-600 dark:text-red-400' },
+    ];
+
+    const menuContent = isOpen && (
+        <div
+            ref={menuRef}
+            className="fixed w-48 bg-dashboard-card border border-dashboard-border rounded-2xl shadow-xl z-9999 overflow-hidden"
+            style={{
+                top: `${menuPosition.top}px`,
+                right: `${menuPosition.right}px`,
+            }}
+        >
+            {actions.map((action) => {
+                const Icon = action.icon;
+                return (
+                    <button
+                        key={action.label}
+                        onClick={() => {
+                            action.onClick();
+                            setIsOpen(false);
+                        }}
+                        className={`w-full flex items-center font-sans gap-3 px-4 py-3 text-sm hover:bg-dashboard-bg transition-colors ${action.color}`}
+                    >
+                        <Icon size={16} />
+                        <span>{action.label}</span>
+                    </button>
+                );
+            })}
+        </div>
+    );
+
+    return (
+        <>
+            <button
+                ref={buttonRef}
+                onClick={() => setIsOpen(!isOpen)}
+                className="p-2 text-neutral-400 hover:text-dashboard-text hover:bg-dashboard-bg rounded-full transition-colors"
+                title="Actions"
+            >
+                <MoreVertical size={18} />
+            </button>
+
+            {typeof window !== 'undefined' && isOpen && createPortal(menuContent, document.body)}
+        </>
+    );
+}
+

package/src/views/PostManager/PostCards.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Post Cards Component
+ * Card-based layout for displaying posts
+ */
+import { PostListItem } from '../../types/post';
+export interface PostCardsProps {
+    posts: PostListItem[];
+    locale: string;
+    onEdit: (postId: string) => void;
+    onPreview: (postId: string) => void;
+    onDuplicate: (postId: string) => void;
+    onDelete: (postId: string) => void;
+}
+export declare function PostCards({ posts, locale, onEdit, onPreview, onDuplicate, onDelete, }: PostCardsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PostCards.d.ts.map

package/src/views/PostManager/PostCards.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PostCards.d.ts","sourceRoot":"","sources":["PostCards.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,OAAO,EAAE,YAAY,EAAc,MAAM,kBAAkB,CAAC;AAI5D,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AA0BD,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,MAAM,EACN,MAAM,EACN,SAAS,EACT,WAAW,EACX,QAAQ,GACX,EAAE,cAAc,2CA6IhB"}

package/src/views/PostManager/PostCards.tsx

@@ -0,0 +1,197 @@
+/**
+ * Post Cards Component
+ * Card-based layout for displaying posts
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Calendar, User, UserCheck } from 'lucide-react';
+import { Image } from '@jhits/plugin-images';
+import { PostListItem, PostStatus } from '../../types/post';
+import { PostActionsMenu } from './PostActionsMenu';
+import { useSession } from 'next-auth/react';
+
+export interface PostCardsProps {
+    posts: PostListItem[];
+    locale: string;
+    onEdit: (postId: string) => void;
+    onPreview: (postId: string) => void;
+    onDuplicate: (postId: string) => void;
+    onDelete: (postId: string) => void;
+}
+
+function getStatusBadgeColor(status: PostStatus) {
+    switch (status) {
+        case 'published':
+            return 'bg-green-500/10 text-green-700 dark:text-green-400 border-green-500/20';
+        case 'draft':
+            return 'bg-amber-500/10 text-amber-700 dark:text-amber-400 border-amber-500/20';
+        case 'scheduled':
+            return 'bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-500/20';
+        case 'archived':
+            return 'bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 border-neutral-500/20';
+        default:
+            return 'bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 border-neutral-500/20';
+    }
+}
+
+function formatDate(dateString: string | undefined, locale: string) {
+    if (!dateString) return 'No date';
+    return new Date(dateString).toLocaleDateString(locale, {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+    });
+}
+
+export function PostCards({
+    posts,
+    locale,
+    onEdit,
+    onPreview,
+    onDuplicate,
+    onDelete,
+}: PostCardsProps) {
+    const { data: session, status: sessionStatus } = useSession();
+    const currentUserId = (session?.user as any)?.id;
+    const [userMap, setUserMap] = useState<Record<string, string>>({});
+    
+    // Helper function to check if user is the owner
+    const isPostOwner = (post: PostListItem): boolean => {
+        if (sessionStatus === 'loading') return false; // Don't show actions while loading
+        if (!currentUserId || !post.authorId) return false;
+        // Convert both to strings for comparison to handle ObjectId vs string
+        return String(currentUserId) === String(post.authorId);
+    };
+
+    // Fetch users to map IDs to names
+    useEffect(() => {
+        const fetchUsers = async () => {
+            try {
+                const response = await fetch('/api/users');
+                const users = await response.json();
+                if (Array.isArray(users)) {
+                    const map: Record<string, string> = {};
+                    users.forEach((user: { _id: string; name?: string; email?: string }) => {
+                        const id = user._id?.toString();
+                        if (id) {
+                            map[id] = user.name || user.email || 'Unknown';
+                        }
+                    });
+                    setUserMap(map);
+                }
+            } catch (error) {
+                console.error('Failed to fetch users:', error);
+            }
+        };
+        fetchUsers();
+    }, []);
+
+    const getAuthorName = (authorId?: string) => {
+        if (!authorId) return 'Unknown';
+        return userMap[authorId] || authorId;
+    };
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+            {posts.map((post) => (
+                <div
+                    key={post.id}
+                    className="bg-dashboard-card rounded-2xl border border-dashboard-border overflow-hidden hover:shadow-xl transition-all duration-300 group"
+                >
+                    {/* Featured Image */}
+                    <div className="relative w-full h-48 bg-neutral-200 dark:bg-neutral-800 overflow-hidden">
+                        {post.featuredImage ? (
+                            <Image
+                                id={post.featuredImage}
+                                alt={post.title}
+                                fill
+                                editable={false}
+                                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                            />
+                        ) : (
+                            <div className="w-full h-full flex items-center justify-center">
+                                <span className="text-sm text-neutral-400">No Image</span>
+                            </div>
+                        )}
+                        {/* Actions Menu - Top Left - Only show for own posts */}
+                        {isPostOwner(post) && (
+                            <div className="absolute top-4 left-4 z-10">
+                                <div className="bg-white/90 dark:bg-neutral-900/90 backdrop-blur-sm rounded-full p-1 shadow-lg border border-neutral-200 dark:border-neutral-700">
+                                    <PostActionsMenu
+                                        onEdit={() => onEdit(post.id)}
+                                        onPreview={() => onPreview(post.id)}
+                                        onDuplicate={() => onDuplicate(post.id)}
+                                        onDelete={() => onDelete(post.id)}
+                                    />
+                                </div>
+                            </div>
+                        )}
+                        {/* Status Badge Overlay */}
+                        <div className="absolute top-4 right-4">
+                            <span
+                                className={`inline-flex items-center px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-wider border backdrop-blur-sm ${getStatusBadgeColor(post.status)}`}
+                            >
+                                {post.status}
+                            </span>
+                        </div>
+                    </div>
+
+                    {/* Card Content */}
+                    <div className="p-6">
+                        {/* Title & Slug */}
+                        <div className="mb-4">
+                            <button 
+                                onClick={() => onEdit(post.id)}
+                                className="text-left w-full hover:cursor-pointer"
+                            >
+                                <h3 className="font-bold text-lg text-neutral-950 dark:text-white mb-2 line-clamp-2 group-hover:text-primary transition-colors hover:underline">
+                                    {post.title}
+                                </h3>
+                            </button>
+                            <p className="text-xs text-neutral-500 dark:text-neutral-400 font-mono">
+                                /{post.slug}
+                            </p>
+                        </div>
+
+                        {/* Excerpt */}
+                        {post.excerpt && (
+                            <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4 line-clamp-2">
+                                {post.excerpt}
+                            </p>
+                        )}
+
+                        {/* Meta Information */}
+                        <div className="space-y-3 pt-4 border-t border-neutral-200 dark:border-neutral-700">
+                            {/* Author */}
+                            <div className="flex items-center gap-2">
+                                {isPostOwner(post) ? (
+                                    <UserCheck size={14} className="text-primary" />
+                                ) : (
+                                    <User size={14} className="text-neutral-400" />
+                                )}
+                                <span className={`text-xs ${isPostOwner(post) ? 'text-primary font-semibold' : 'text-neutral-600 dark:text-neutral-400'}`}>
+                                    {getAuthorName(post.authorId)}
+                                    {isPostOwner(post) && (
+                                        <span className="ml-1">(You)</span>
+                                    )}
+                                </span>
+                            </div>
+
+                            {/* Last Modified */}
+                            <div className="flex items-center gap-2">
+                                <Calendar size={14} className="text-neutral-400" />
+                                <span className="text-xs text-neutral-600 dark:text-neutral-400">
+                                    {formatDate(post.updatedAt, locale)}
+                                </span>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}
+

package/src/views/PostManager/PostFilters.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Post Filters Component
+ * Search and filter controls for posts
+ */
+import { PostStatus } from '../../types/post';
+export interface PostFiltersProps {
+    search: string;
+    onSearchChange: (value: string) => void;
+    statusFilter: PostStatus | 'all';
+    onStatusFilterChange: (value: PostStatus | 'all') => void;
+    categoryFilter: string;
+    onCategoryFilterChange: (value: string) => void;
+    categories: string[];
+}
+export declare function PostFilters({ search, onSearchChange, statusFilter, onStatusFilterChange, categoryFilter, onCategoryFilterChange, categories, }: PostFiltersProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PostFilters.d.ts.map

package/src/views/PostManager/PostFilters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PostFilters.d.ts","sourceRoot":"","sources":["PostFilters.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,UAAU,GAAG,KAAK,CAAC;IACjC,oBAAoB,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,KAAK,KAAK,IAAI,CAAC;IAC1D,cAAc,EAAE,MAAM,CAAC;IACvB,sBAAsB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,UAAU,EAAE,MAAM,EAAE,CAAC;CACxB;AAED,wBAAgB,WAAW,CAAC,EACxB,MAAM,EACN,cAAc,EACd,YAAY,EACZ,oBAAoB,EACpB,cAAc,EACd,sBAAsB,EACtB,UAAU,GACb,EAAE,gBAAgB,2CAgElB"}

package/src/views/PostManager/PostFilters.tsx

@@ -0,0 +1,95 @@
+/**
+ * Post Filters Component
+ * Search and filter controls for posts
+ */
+
+'use client';
+
+import React from 'react';
+import { Search, Filter, Tag } from 'lucide-react';
+import { PostStatus } from '../../types/post';
+
+export interface PostFiltersProps {
+    search: string;
+    onSearchChange: (value: string) => void;
+    statusFilter: PostStatus | 'all';
+    onStatusFilterChange: (value: PostStatus | 'all') => void;
+    categoryFilter: string;
+    onCategoryFilterChange: (value: string) => void;
+    categories: string[];
+}
+
+export function PostFilters({
+    search,
+    onSearchChange,
+    statusFilter,
+    onStatusFilterChange,
+    categoryFilter,
+    onCategoryFilterChange,
+    categories,
+}: PostFiltersProps) {
+    return (
+        <div className="flex flex-col sm:flex-row gap-4 mb-6">
+            {/* Search Input */}
+            <div className="relative flex-1">
+                <label htmlFor="blog-post-search" className="absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0" style={{ clip: 'rect(0, 0, 0, 0)', clipPath: 'inset(50%)' }}>
+                    Search posts by title or content
+                </label>
+                <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400 size-4" />
+                <input
+                    id="blog-post-search"
+                    name="blog-post-search"
+                    type="text"
+                    value={search}
+                    onChange={(e) => onSearchChange(e.target.value)}
+                    placeholder="Search posts by title or content..."
+                    className="w-full pl-11 pr-4 py-3 bg-neutral-100 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 rounded-2xl text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all"
+                />
+            </div>
+
+            {/* Status Filter */}
+            <div className="relative">
+                <label htmlFor="blog-post-status-filter" className="absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0" style={{ clip: 'rect(0, 0, 0, 0)', clipPath: 'inset(50%)' }}>
+                    Filter by status
+                </label>
+                <Filter className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400 size-4 pointer-events-none" />
+                <select
+                    id="blog-post-status-filter"
+                    name="blog-post-status-filter"
+                    value={statusFilter}
+                    onChange={(e) => onStatusFilterChange(e.target.value as PostStatus | 'all')}
+                    className="pl-11 pr-8 py-3 bg-neutral-100 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 rounded-2xl text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary appearance-none outline-none cursor-pointer min-w-[160px]"
+                >
+                    <option value="all">All Statuses</option>
+                    <option value="published">Published</option>
+                    <option value="draft">Draft</option>
+                    <option value="scheduled">Scheduled</option>
+                    <option value="archived">Archived</option>
+                </select>
+            </div>
+
+            {/* Category Filter */}
+            <div className="relative">
+                <label htmlFor="blog-post-category-filter" className="absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0" style={{ clip: 'rect(0, 0, 0, 0)', clipPath: 'inset(50%)' }}>
+                    Filter by category
+                </label>
+                <Tag className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400 size-4 pointer-events-none" />
+                <select
+                    id="blog-post-category-filter"
+                    name="blog-post-category-filter"
+                    value={categoryFilter}
+                    onChange={(e) => onCategoryFilterChange(e.target.value)}
+                    className="pl-11 pr-8 py-3 bg-neutral-100 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 rounded-2xl text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary appearance-none outline-none cursor-pointer min-w-[160px]"
+                >
+                    <option value="all">All Categories</option>
+                    {categories.map((category) => (
+                        <option key={category} value={category}>
+                            {category}
+                        </option>
+                    ))}
+                </select>
+            </div>
+        </div>
+    );
+}
+

package/src/views/PostManager/PostManagerView.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Post Manager View
+ * Production-ready listing page for managing blog posts
+ * Follows dashboard earth-tone design system
+ */
+export interface PostManagerViewProps {
+    siteId: string;
+    locale: string;
+}
+export declare function PostManagerView({ siteId, locale }: PostManagerViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PostManagerView.d.ts.map

package/src/views/PostManager/PostManagerView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PostManagerView.d.ts","sourceRoot":"","sources":["PostManagerView.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAcH,MAAM,WAAW,oBAAoB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAMD,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,oBAAoB,2CAqQvE"}