@nextsparkjs/theme-blog 0.1.0-beta.1

package/components/ImportPostsDialog.tsx

@@ -0,0 +1,284 @@
+'use client'
+
+import { useState, useRef } from 'react'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@nextsparkjs/core/components/ui/dialog'
+import { Progress } from '@nextsparkjs/core/components/ui/progress'
+import { Badge } from '@nextsparkjs/core/components/ui/badge'
+import { ScrollArea } from '@nextsparkjs/core/components/ui/scroll-area'
+import { Upload, FileJson, AlertCircle, CheckCircle2, Loader2 } from 'lucide-react'
+import { useToast } from '@nextsparkjs/core/hooks/useToast'
+
+interface PostImport {
+  title: string
+  slug?: string
+  content?: string
+  excerpt?: string
+  featuredImage?: string
+  status?: string
+  publishedAt?: string
+  category?: string
+  tags?: string[]
+}
+
+interface ImportPostsDialogProps {
+  className?: string
+  onImportComplete?: () => void
+}
+
+export function ImportPostsDialog({ className, onImportComplete }: ImportPostsDialogProps) {
+  const [open, setOpen] = useState(false)
+  const [posts, setPosts] = useState<PostImport[]>([])
+  const [isImporting, setIsImporting] = useState(false)
+  const [progress, setProgress] = useState(0)
+  const [importResults, setImportResults] = useState<{ success: number; failed: number }>({ success: 0, failed: 0 })
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const { toast } = useToast()
+
+  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (!file) return
+
+    if (!file.name.endsWith('.json')) {
+      toast({
+        title: 'Invalid file type',
+        description: 'Please select a JSON file.',
+        variant: 'destructive',
+      })
+      return
+    }
+
+    try {
+      const text = await file.text()
+      const data = JSON.parse(text)
+      
+      // Validate structure
+      const postsArray = Array.isArray(data) ? data : [data]
+      const validPosts = postsArray.filter((p: unknown) => {
+        if (typeof p !== 'object' || p === null) return false
+        const post = p as Record<string, unknown>
+        return typeof post.title === 'string' && post.title.length > 0
+      })
+
+      if (validPosts.length === 0) {
+        toast({
+          title: 'No valid posts found',
+          description: 'The JSON file must contain posts with at least a title.',
+          variant: 'destructive',
+        })
+        return
+      }
+
+      setPosts(validPosts)
+      setImportResults({ success: 0, failed: 0 })
+    } catch (error) {
+      console.error('Parse error:', error)
+      toast({
+        title: 'Invalid JSON',
+        description: 'Could not parse the JSON file.',
+        variant: 'destructive',
+      })
+    }
+  }
+
+  const generateSlug = (title: string): string => {
+    return title
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-|-$/g, '')
+  }
+
+  const handleImport = async () => {
+    if (posts.length === 0) return
+
+    setIsImporting(true)
+    setProgress(0)
+    let success = 0
+    let failed = 0
+
+    for (let i = 0; i < posts.length; i++) {
+      const post = posts[i]
+      
+      try {
+        const response = await fetch('/api/v1/posts', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            title: post.title,
+            slug: post.slug || generateSlug(post.title),
+            content: post.content || '',
+            excerpt: post.excerpt || '',
+            featuredImage: post.featuredImage || null,
+            status: post.status || 'draft',
+            publishedAt: post.publishedAt || null,
+            category: post.category || null,
+            tags: post.tags || [],
+          }),
+        })
+
+        if (response.ok) {
+          success++
+        } else {
+          failed++
+        }
+      } catch (error) {
+        console.error('Import error for post:', post.title, error)
+        failed++
+      }
+
+      setProgress(Math.round(((i + 1) / posts.length) * 100))
+    }
+
+    setImportResults({ success, failed })
+    setIsImporting(false)
+
+    if (success > 0) {
+      toast({
+        title: 'Import complete',
+        description: `${success} posts imported successfully${failed > 0 ? `, ${failed} failed` : ''}.`,
+      })
+      onImportComplete?.()
+    } else {
+      toast({
+        title: 'Import failed',
+        description: 'No posts were imported.',
+        variant: 'destructive',
+      })
+    }
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+    setPosts([])
+    setProgress(0)
+    setImportResults({ success: 0, failed: 0 })
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen: boolean) => isOpen ? setOpen(true) : handleClose()}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm" className={className}>
+          <Upload className="h-4 w-4 mr-2" />
+          Import JSON
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Import Posts from JSON</DialogTitle>
+          <DialogDescription>
+            Upload a JSON file containing posts to import. Each post must have at least a title.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {/* File Input */}
+          <div
+            className="border-2 border-dashed rounded-lg p-8 text-center cursor-pointer hover:border-primary/50 transition-colors"
+            onClick={() => fileInputRef.current?.click()}
+          >
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".json"
+              onChange={handleFileSelect}
+              className="hidden"
+            />
+            <FileJson className="h-10 w-10 mx-auto mb-3 text-muted-foreground" />
+            <p className="text-sm text-muted-foreground">
+              Click to select a JSON file
+            </p>
+            <p className="text-xs text-muted-foreground mt-1">
+              or drag and drop
+            </p>
+          </div>
+
+          {/* Preview */}
+          {posts.length > 0 && (
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <span className="text-sm font-medium">
+                  {posts.length} posts found
+                </span>
+                {importResults.success > 0 && (
+                  <div className="flex gap-2">
+                    <Badge variant="default" className="bg-green-500">
+                      <CheckCircle2 className="h-3 w-3 mr-1" />
+                      {importResults.success}
+                    </Badge>
+                    {importResults.failed > 0 && (
+                      <Badge variant="destructive">
+                        <AlertCircle className="h-3 w-3 mr-1" />
+                        {importResults.failed}
+                      </Badge>
+                    )}
+                  </div>
+                )}
+              </div>
+
+              <ScrollArea className="h-[150px] rounded-md border p-3">
+                <div className="space-y-2">
+                  {posts.map((post, index) => (
+                    <div
+                      key={index}
+                      className="flex items-center justify-between text-sm py-1"
+                    >
+                      <span className="truncate flex-1 mr-2">{post.title}</span>
+                      <Badge variant="outline" className="text-xs">
+                        {post.status || 'draft'}
+                      </Badge>
+                    </div>
+                  ))}
+                </div>
+              </ScrollArea>
+
+              {isImporting && (
+                <div className="space-y-2">
+                  <Progress value={progress} className="h-2" />
+                  <p className="text-xs text-muted-foreground text-center">
+                    Importing... {progress}%
+                  </p>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleImport}
+            disabled={posts.length === 0 || isImporting}
+          >
+            {isImporting ? (
+              <>
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                Importing...
+              </>
+            ) : (
+              <>
+                <Upload className="h-4 w-4 mr-2" />
+                Import {posts.length} Posts
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+

package/components/PostsToolbar.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { PermissionGate } from '@nextsparkjs/core/components/permissions/PermissionGate'
+import { ExportPostsButton } from './ExportPostsButton'
+import { ImportPostsDialog } from './ImportPostsDialog'
+
+interface PostsToolbarProps {
+  onRefresh?: () => void
+}
+
+export function PostsToolbar({ onRefresh }: PostsToolbarProps) {
+  return (
+    <div className="flex items-center gap-2">
+      <PermissionGate permission="posts.export_json">
+        <ExportPostsButton />
+      </PermissionGate>
+      
+      <PermissionGate permission="posts.import_json">
+        <ImportPostsDialog onImportComplete={onRefresh} />
+      </PermissionGate>
+    </div>
+  )
+}
+

package/components/editor/FeaturedImageUpload.tsx

@@ -0,0 +1,185 @@
+'use client'
+
+/**
+ * Featured Image Upload Component
+ *
+ * A simple single-image upload component for blog post featured images.
+ * Supports drag & drop, click to upload, and preview.
+ */
+
+import * as React from 'react'
+import NextImage from 'next/image'
+import { X, Upload, Image as ImageIcon } from 'lucide-react'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { cn } from '@nextsparkjs/core/lib/utils'
+
+interface FeaturedImageUploadProps {
+  value: string // URL string
+  onChange: (url: string) => void
+  disabled?: boolean
+  className?: string
+}
+
+export function FeaturedImageUpload({
+  value,
+  onChange,
+  disabled = false,
+  className,
+}: FeaturedImageUploadProps) {
+  const [isDragOver, setIsDragOver] = React.useState(false)
+  const [isLoading, setIsLoading] = React.useState(false)
+  const [error, setError] = React.useState<string | null>(null)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  const handleFile = async (file: File) => {
+    if (disabled) return
+
+    // Validate file type
+    if (!file.type.startsWith('image/')) {
+      setError('Please select an image file')
+      return
+    }
+
+    // Validate file size (max 5MB)
+    if (file.size > 5 * 1024 * 1024) {
+      setError('Image must be less than 5MB')
+      return
+    }
+
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      // For now, create a local object URL
+      // In production, you would upload to a storage service
+      const objectUrl = URL.createObjectURL(file)
+      onChange(objectUrl)
+    } catch (err) {
+      setError('Failed to process image')
+      console.error('Image upload error:', err)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault()
+    if (!disabled) {
+      setIsDragOver(true)
+    }
+  }
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault()
+    setIsDragOver(false)
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    setIsDragOver(false)
+
+    if (!disabled && e.dataTransfer.files?.[0]) {
+      handleFile(e.dataTransfer.files[0])
+    }
+  }
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files?.[0]) {
+      handleFile(e.target.files[0])
+    }
+  }
+
+  const openFileDialog = () => {
+    if (!disabled) {
+      inputRef.current?.click()
+    }
+  }
+
+  const removeImage = () => {
+    if (!disabled) {
+      onChange('')
+      setError(null)
+    }
+  }
+
+  // Check if value is a valid URL or blob URL
+  const hasImage = value && (value.startsWith('http') || value.startsWith('blob:'))
+
+  return (
+    <div className={cn('w-full space-y-2', className)} data-cy="featured-image-container">
+      {hasImage ? (
+        // Image Preview
+        <div className="relative aspect-video rounded-lg overflow-hidden border border-border bg-muted" data-cy="featured-image-preview">
+          <NextImage
+            src={value}
+            alt="Featured image preview"
+            fill
+            className="object-cover"
+            unoptimized={value.startsWith('blob:')}
+          />
+          {/* Remove button */}
+          <Button
+            variant="destructive"
+            size="icon"
+            className="absolute top-2 right-2 h-8 w-8"
+            onClick={removeImage}
+            disabled={disabled}
+            data-cy="featured-image-remove"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      ) : (
+        // Upload Area
+        <div
+          className={cn(
+            'relative aspect-video border-2 border-dashed rounded-lg transition-colors cursor-pointer',
+            isDragOver && 'border-primary bg-primary/5',
+            !isDragOver && 'border-muted-foreground/25 hover:border-primary/50',
+            disabled && 'opacity-50 cursor-not-allowed',
+            isLoading && 'animate-pulse'
+          )}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          onClick={openFileDialog}
+          data-cy="featured-image-dropzone"
+        >
+          <div className="absolute inset-0 flex flex-col items-center justify-center">
+            {isLoading ? (
+              <div className="h-8 w-8 border-2 border-primary border-t-transparent rounded-full animate-spin" data-cy="featured-image-loading" />
+            ) : (
+              <>
+                <ImageIcon className="h-8 w-8 text-muted-foreground mb-2" />
+                <p className="text-sm text-muted-foreground text-center px-4">
+                  <span className="font-medium text-primary">Click to upload</span>
+                  {' '}or drag and drop
+                </p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  PNG, JPG, GIF up to 5MB
+                </p>
+              </>
+            )}
+          </div>
+
+          <input
+            ref={inputRef}
+            type="file"
+            accept="image/*"
+            onChange={handleInputChange}
+            className="sr-only"
+            disabled={disabled || isLoading}
+            data-cy="featured-image-input"
+          />
+        </div>
+      )}
+
+      {/* Error message */}
+      {error && (
+        <p className="text-xs text-destructive" data-cy="featured-image-error">{error}</p>
+      )}
+    </div>
+  )
+}
+
+export default FeaturedImageUpload