@jhits/plugin-images 0.0.1

package/src/components/ImagePicker.tsx

@@ -0,0 +1,541 @@
+/**
+ * Image Picker Component
+ * Allows uploading, searching, and selecting images with brightness/blur controls
+ */
+
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import { Upload, Search, X, Image as ImageIcon, SlidersHorizontal, Check, Link as LinkIcon } from 'lucide-react';
+import type { ImageMetadata, ImagePickerProps } from '../types';
+
+export function ImagePicker({
+    value,
+    onChange,
+    darkMode = false,
+    showEffects = true,
+    brightness = 100,
+    blur = 0,
+    onBrightnessChange,
+    onBlurChange,
+}: ImagePickerProps) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [images, setImages] = useState<ImageMetadata[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [uploading, setUploading] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [selectedImage, setSelectedImage] = useState<ImageMetadata | null>(null);
+    const [page, setPage] = useState(1);
+    const [hasMore, setHasMore] = useState(true);
+    const [externalUrl, setExternalUrl] = useState('');
+    const [showUrlInput, setShowUrlInput] = useState(false);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const modalRef = useRef<HTMLDivElement>(null);
+
+    // Load images
+    const loadImages = async (reset = false) => {
+        if (loading) return;
+        
+        setLoading(true);
+        try {
+            const currentPage = reset ? 1 : page;
+            const response = await fetch(
+                `/api/plugin-images/list?page=${currentPage}&limit=20&search=${encodeURIComponent(searchQuery)}`
+            );
+            const data = await response.json();
+            
+            if (reset) {
+                setImages(data.images);
+                setPage(2);
+            } else {
+                setImages(prev => [...prev, ...data.images]);
+                setPage(prev => prev + 1);
+            }
+            
+            setHasMore(data.images.length === 20);
+        } catch (error) {
+            console.error('Failed to load images:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // Load images when modal opens
+    useEffect(() => {
+        if (isOpen) {
+            loadImages(true);
+        }
+    }, [isOpen, searchQuery]);
+
+    // Find selected image from value (can be ID or URL)
+    useEffect(() => {
+        if (value) {
+            // First, try to find by ID (preferred method)
+            let found = images.find(img => img.id === value);
+            
+            // If not found by ID, try to find by URL
+            if (!found) {
+                found = images.find(img => img.url === value);
+            }
+            
+            if (found) {
+                setSelectedImage(found);
+            } else if (!selectedImage) {
+                // Create a temporary image object from the value if not found in list
+                // This handles cases where the image was set externally or is an ID
+                const isUrl = value.startsWith('http://') || value.startsWith('https://') || value.startsWith('/');
+                const urlParts = isUrl ? value.split('/') : [];
+                const filename = isUrl ? urlParts[urlParts.length - 1] : value;
+                
+                setSelectedImage({
+                    id: isUrl ? filename : value, // Use value as ID if it's not a URL
+                    filename,
+                    url: isUrl ? value : `/api/uploads/${value}`, // Construct URL if value is an ID
+                    size: 0,
+                    mimeType: 'image/jpeg',
+                    uploadedAt: new Date().toISOString(),
+                });
+            }
+        } else {
+            setSelectedImage(null);
+        }
+    }, [value, images]);
+
+    // Handle file upload
+    const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        setUploading(true);
+        try {
+            const formData = new FormData();
+            formData.append('file', file);
+
+            const response = await fetch('/api/plugin-images/upload', {
+                method: 'POST',
+                body: formData,
+            });
+
+            const data = await response.json();
+            
+            if (data.success && data.image) {
+                // Reload images list
+                await loadImages(true);
+                // Select the newly uploaded image
+                setSelectedImage(data.image);
+                onChange(data.image);
+            } else {
+                alert(data.error || 'Failed to upload image');
+            }
+        } catch (error) {
+            console.error('Upload error:', error);
+            alert('Failed to upload image');
+        } finally {
+            setUploading(false);
+            if (fileInputRef.current) {
+                fileInputRef.current.value = '';
+            }
+        }
+    };
+
+    // Handle image selection
+    const handleSelectImage = (image: ImageMetadata) => {
+        setSelectedImage(image);
+        onChange(image);
+        // Reset effects when selecting a new image (optional - could preserve them)
+        // onBrightnessChange?.(100);
+        // onBlurChange?.(0);
+    };
+
+    // Handle remove image
+    const handleRemove = () => {
+        setSelectedImage(null);
+        onChange(null);
+    };
+
+    // Validate if URL is an image
+    const isValidImageUrl = (url: string): boolean => {
+        try {
+            const urlObj = new URL(url);
+            const pathname = urlObj.pathname.toLowerCase();
+            const imageExtensions = ['.jpg', '.jpeg', '.png', '.webp', '.gif', '.svg'];
+            return imageExtensions.some(ext => pathname.endsWith(ext)) || 
+                   urlObj.hostname.includes('unsplash.com') ||
+                   urlObj.hostname.includes('pixabay.com') ||
+                   urlObj.hostname.includes('pexels.com') ||
+                   url.includes('image') ||
+                   url.includes('img');
+        } catch {
+            return false;
+        }
+    };
+
+    // Handle external URL
+    const handleUseExternalUrl = () => {
+        if (!externalUrl.trim()) {
+            alert('Please enter an image URL');
+            return;
+        }
+
+        if (!isValidImageUrl(externalUrl)) {
+            if (!confirm('This might not be a valid image URL. Continue anyway?')) {
+                return;
+            }
+        }
+
+        // Create image metadata from external URL
+        const urlParts = externalUrl.split('/');
+        const filename = urlParts[urlParts.length - 1].split('?')[0] || 'external-image.jpg';
+        
+        const externalImage: ImageMetadata = {
+            id: `external-${Date.now()}`,
+            filename,
+            url: externalUrl,
+            size: 0,
+            mimeType: 'image/jpeg',
+            uploadedAt: new Date().toISOString(),
+        };
+
+        setSelectedImage(externalImage);
+        onChange(externalImage);
+        setExternalUrl('');
+        setShowUrlInput(false);
+        setIsOpen(false);
+    };
+
+    // Close modal on outside click
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
+                setIsOpen(false);
+            }
+        };
+
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => document.removeEventListener('mousedown', handleClickOutside);
+        }
+    }, [isOpen]);
+
+    return (
+        <div className="space-y-4">
+            {/* Current Image Preview */}
+            {selectedImage ? (
+                <div className="relative group">
+                    <div className="relative rounded-xl overflow-hidden border-2 border-dashboard-border aspect-video bg-dashboard-bg">
+                        <img
+                            src={selectedImage.url}
+                            alt={selectedImage.alt || selectedImage.filename}
+                            className="w-full h-full object-cover"
+                            style={{
+                                filter: `brightness(${brightness}%) blur(${blur}px)`,
+                            }}
+                        />
+                        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
+                            <button
+                                onClick={handleRemove}
+                                className="opacity-0 group-hover:opacity-100 p-2 bg-red-500 text-white rounded-full transition-opacity"
+                            >
+                                <X size={16} />
+                            </button>
+                        </div>
+                    </div>
+                    <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-2 truncate">
+                        {selectedImage.filename}
+                    </p>
+                </div>
+            ) : (
+                <div
+                    onClick={() => setIsOpen(true)}
+                    className="relative aspect-video bg-dashboard-bg rounded-xl border-2 border-dashed border-dashboard-border flex flex-col items-center justify-center text-neutral-400 dark:text-neutral-500 hover:bg-dashboard-card hover:border-primary cursor-pointer transition-all"
+                >
+                    <ImageIcon size={32} className="mb-2" />
+                    <span className="text-xs font-bold uppercase tracking-wider">Select Image</span>
+                </div>
+            )}
+
+            {/* Action Buttons */}
+            <div className="flex gap-2">
+                <button
+                    onClick={() => setIsOpen(true)}
+                    className="flex-1 px-4 py-2 bg-dashboard-card border border-dashboard-border rounded-xl text-sm font-bold text-dashboard-text hover:bg-dashboard-bg transition-colors flex items-center justify-center gap-2"
+                >
+                    <Search size={16} />
+                    Browse
+                </button>
+                <button
+                    onClick={() => fileInputRef.current?.click()}
+                    disabled={uploading}
+                    className="flex-1 px-4 py-2 bg-primary text-white rounded-xl text-sm font-bold hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2"
+                >
+                    <Upload size={16} />
+                    {uploading ? 'Uploading...' : 'Upload'}
+                </button>
+                <button
+                    onClick={() => setShowUrlInput(!showUrlInput)}
+                    className="px-4 py-2 bg-dashboard-card border border-dashboard-border rounded-xl text-sm font-bold text-dashboard-text hover:bg-dashboard-bg transition-colors flex items-center justify-center gap-2"
+                >
+                    <LinkIcon size={16} />
+                    URL
+                </button>
+            </div>
+
+            {/* External URL Input */}
+            {showUrlInput && (
+                <div className="p-4 bg-dashboard-bg rounded-xl border border-dashboard-border space-y-2">
+                    <label className="text-xs font-bold text-neutral-600 dark:text-neutral-400 uppercase">
+                        External Image URL
+                    </label>
+                    <div className="flex gap-2">
+                        <input
+                            type="url"
+                            value={externalUrl}
+                            onChange={(e) => setExternalUrl(e.target.value)}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter') {
+                                    handleUseExternalUrl();
+                                }
+                            }}
+                            placeholder="https://example.com/image.jpg"
+                            className="flex-1 px-3 py-2 bg-white dark:bg-neutral-900/50 border border-neutral-300 dark:border-neutral-700 rounded-lg text-sm font-bold outline-none focus:border-primary transition-all dark:text-neutral-100"
+                        />
+                        <button
+                            onClick={handleUseExternalUrl}
+                            className="px-4 py-2 bg-primary text-white rounded-lg text-sm font-bold hover:bg-primary/90 transition-colors"
+                        >
+                            Use
+                        </button>
+                        <button
+                            onClick={() => {
+                                setShowUrlInput(false);
+                                setExternalUrl('');
+                            }}
+                            className="px-4 py-2 bg-neutral-200 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-400 rounded-lg text-sm font-bold hover:bg-neutral-300 dark:hover:bg-neutral-600 transition-colors"
+                        >
+                            Cancel
+                        </button>
+                    </div>
+                </div>
+            )}
+
+            {/* Effects Controls */}
+            {showEffects && selectedImage && (
+                <div className="space-y-3 p-4 bg-dashboard-bg rounded-xl border border-dashboard-border">
+                    <div className="flex items-center gap-2 mb-3">
+                        <SlidersHorizontal size={14} className="text-neutral-500 dark:text-neutral-400" />
+                        <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold">
+                            Image Effects
+                        </label>
+                    </div>
+                    
+                    {/* Brightness */}
+                    <div>
+                        <div className="flex items-center justify-between mb-2">
+                            <label className="text-xs font-bold text-neutral-600 dark:text-neutral-400">
+                                Brightness
+                            </label>
+                            <span className="text-xs font-bold text-neutral-500 dark:text-neutral-500">
+                                {brightness}%
+                            </span>
+                        </div>
+                        <input
+                            type="range"
+                            min="0"
+                            max="200"
+                            value={brightness}
+                            onChange={(e) => onBrightnessChange?.(parseInt(e.target.value))}
+                            className="w-full h-2 bg-neutral-200 dark:bg-neutral-700 rounded-lg appearance-none cursor-pointer accent-primary"
+                        />
+                    </div>
+
+                    {/* Blur */}
+                    <div>
+                        <div className="flex items-center justify-between mb-2">
+                            <label className="text-xs font-bold text-neutral-600 dark:text-neutral-400">
+                                Blur
+                            </label>
+                            <span className="text-xs font-bold text-neutral-500 dark:text-neutral-500">
+                                {blur}px
+                            </span>
+                        </div>
+                        <input
+                            type="range"
+                            min="0"
+                            max="20"
+                            value={blur}
+                            onChange={(e) => onBlurChange?.(parseInt(e.target.value))}
+                            className="w-full h-2 bg-neutral-200 dark:bg-neutral-700 rounded-lg appearance-none cursor-pointer accent-primary"
+                        />
+                    </div>
+                </div>
+            )}
+
+            {/* Hidden file input */}
+            <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/*"
+                onChange={handleFileSelect}
+                className="hidden"
+            />
+
+            {/* Image Browser Modal */}
+            {isOpen && (
+                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+                    <div
+                        ref={modalRef}
+                        className={`w-full max-w-4xl max-h-[80vh] bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 shadow-2xl flex flex-col ${
+                            darkMode ? 'dark' : ''
+                        }`}
+                    >
+                        {/* Modal Header */}
+                        <div className="p-6 border-b border-dashboard-border flex items-center justify-between">
+                            <h2 className="text-lg font-black uppercase tracking-tighter text-dashboard-text">
+                                Select Image
+                            </h2>
+                            <button
+                                onClick={() => setIsOpen(false)}
+                                className="p-2 hover:bg-dashboard-bg rounded-lg transition-colors"
+                            >
+                                <X size={20} className="text-neutral-500 dark:text-neutral-400" />
+                            </button>
+                        </div>
+
+                        {/* Search Bar */}
+                        <div className="p-4 border-b border-dashboard-border">
+                            <div className="relative">
+                                <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400 dark:text-neutral-500" />
+                                <input
+                                    type="text"
+                                    value={searchQuery}
+                                    onChange={(e) => {
+                                        setSearchQuery(e.target.value);
+                                        setPage(1);
+                                    }}
+                                    placeholder="Search images..."
+                                    className="w-full pl-10 pr-4 py-2 bg-dashboard-card border border-dashboard-border rounded-xl text-sm font-bold outline-none focus:border-primary transition-all text-dashboard-text"
+                                />
+                            </div>
+                        </div>
+
+                        {/* Image Grid */}
+                        <div className="flex-1 overflow-y-auto p-4">
+                            {loading && images.length === 0 ? (
+                                <div className="text-center py-12">
+                                    <div className="animate-pulse text-neutral-400 dark:text-neutral-500">
+                                        Loading images...
+                                    </div>
+                                </div>
+                            ) : images.length === 0 ? (
+                                <div className="text-center py-12">
+                                    <ImageIcon size={48} className="mx-auto text-neutral-300 dark:text-neutral-700 mb-4" />
+                                    <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-2">
+                                        No images found
+                                    </p>
+                                    <button
+                                        onClick={() => fileInputRef.current?.click()}
+                                        className="text-sm font-bold text-primary hover:underline"
+                                    >
+                                        Upload your first image
+                                    </button>
+                                </div>
+                            ) : (
+                                <div className="grid grid-cols-4 gap-4">
+                                    {images.map((image) => (
+                                        <button
+                                            key={image.id}
+                                            onClick={() => {
+                                                handleSelectImage(image);
+                                                setIsOpen(false);
+                                            }}
+                                            className={`relative aspect-square rounded-xl overflow-hidden border-2 transition-all ${
+                                                selectedImage?.id === image.id
+                                                    ? 'border-primary ring-2 ring-primary/20'
+                                                    : 'border-neutral-200 dark:border-neutral-700 hover:border-primary/50'
+                                            }`}
+                                        >
+                                            <img
+                                                src={image.url}
+                                                alt={image.alt || image.filename}
+                                                className="w-full h-full object-cover"
+                                            />
+                                            {selectedImage?.id === image.id && (
+                                                <div className="absolute inset-0 bg-primary/20 flex items-center justify-center">
+                                                    <div className="bg-primary text-white rounded-full p-2">
+                                                        <Check size={16} />
+                                                    </div>
+                                                </div>
+                                            )}
+                                        </button>
+                                    ))}
+                                </div>
+                            )}
+
+                            {/* Load More */}
+                            {hasMore && !loading && (
+                                <div className="text-center mt-4">
+                                    <button
+                                        onClick={() => loadImages(false)}
+                                        className="px-4 py-2 bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 rounded-lg text-sm font-bold hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors"
+                                    >
+                                        Load More
+                                    </button>
+                                </div>
+                            )}
+                        </div>
+
+                        {/* External URL Input in Modal */}
+                        <div className="p-4 border-t border-neutral-200 dark:border-neutral-800">
+                            <label className="text-xs font-bold text-neutral-600 dark:text-neutral-400 uppercase mb-2 block">
+                                Or use external URL
+                            </label>
+                            <div className="flex gap-2">
+                                <input
+                                    type="url"
+                                    value={externalUrl}
+                                    onChange={(e) => setExternalUrl(e.target.value)}
+                                    onKeyDown={(e) => {
+                                        if (e.key === 'Enter') {
+                                            handleUseExternalUrl();
+                                        }
+                                    }}
+                                    placeholder="https://example.com/image.jpg"
+                                    className="flex-1 px-3 py-2 bg-white dark:bg-neutral-900/50 border border-neutral-300 dark:border-neutral-700 rounded-lg text-sm font-bold outline-none focus:border-primary transition-all dark:text-neutral-100"
+                                />
+                                <button
+                                    onClick={handleUseExternalUrl}
+                                    className="px-4 py-2 bg-primary text-white rounded-lg text-sm font-bold hover:bg-primary/90 transition-colors flex items-center gap-2"
+                                >
+                                    <LinkIcon size={16} />
+                                    Use URL
+                                </button>
+                            </div>
+                        </div>
+
+                        {/* Modal Footer */}
+                        <div className="p-4 border-t border-neutral-200 dark:border-neutral-800 flex items-center justify-between">
+                            <button
+                                onClick={() => fileInputRef.current?.click()}
+                                disabled={uploading}
+                                className="px-4 py-2 bg-primary text-white rounded-xl text-sm font-bold hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2"
+                            >
+                                <Upload size={16} />
+                                {uploading ? 'Uploading...' : 'Upload New Image'}
+                            </button>
+                            <button
+                                onClick={() => {
+                                    setIsOpen(false);
+                                    setExternalUrl('');
+                                }}
+                                className="px-4 py-2 bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 rounded-xl text-sm font-bold hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors"
+                            >
+                                Close
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
+

package/src/components/ImagesPluginInit.tsx

@@ -0,0 +1,31 @@
+/**
+ * Images Plugin Initialization Component
+ * 
+ * This component reads from window.__JHITS_PLUGIN_PROPS__['plugin-images']
+ * and renders the GlobalImageEditor if enabled.
+ * 
+ * Render this once in your app layout after calling initImagesPlugin().
+ */
+
+'use client';
+
+import { GlobalImageEditor } from './GlobalImageEditor';
+
+/**
+ * Images Plugin Initialization Component
+ * 
+ * Renders the global image editor if enabled in the plugin configuration.
+ * This component should be rendered in your app layout.
+ * 
+ * @example
+ * ```tsx
+ * import { ImagesPluginInit } from '@jhits/plugin-images';
+ * 
+ * // After calling initImagesPlugin() in a useEffect or script
+ * <ImagesPluginInit />
+ * ```
+ */
+export function ImagesPluginInit() {
+    return <GlobalImageEditor />;
+}
+

package/src/components/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Image Picker Component Exports
+ */
+
+export { ImagePicker } from './ImagePicker';
+export type { ImagePickerProps } from '../types';
+