@gunjo/ui 0.0.1-alpha.0 → 0.0.1-alpha.2

package/src/components/organisms/ShareModal.tsx

@@ -1,182 +0,0 @@
-"use client"
-import React, { useState, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { X, Copy, Globe, Lock, Check, ExternalLink } from 'lucide-react';
-import { cn } from '../../lib/utils';
-
-export interface ShareData {
-    isPublic: boolean;
-    token?: string;
-    accessCount?: number;
-    createdAt?: string;
-}
-
-export interface ShareableItem {
-    id: string;
-    share?: ShareData;
-    [key: string]: any;
-}
-
-interface ShareModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    item: ShareableItem;
-    onUpdate: (id: string, updates: Partial<ShareableItem>) => void;
-    apiEndpoint?: string; // Allow customizing API endpoint
-}
-
-export const ShareModal = ({ isOpen, onClose, item, onUpdate, apiEndpoint = '/api/share' }: ShareModalProps) => {
-    const [isPublic, setIsPublic] = useState(item.share?.isPublic || false);
-    const [isLoading, setIsLoading] = useState(false);
-    const [copied, setCopied] = useState(false);
-    const [shareData, setShareData] = useState<ShareData | undefined>(item.share);
-    const [mounted, setMounted] = useState(false);
-
-    useEffect(() => {
-        setMounted(true);
-    }, []);
-
-    useEffect(() => {
-        setIsPublic(item.share?.isPublic || false);
-        setShareData(item.share);
-    }, [item.id, item.share]);
-
-    if (!isOpen || !mounted) return null;
-
-    const handleToggleShare = async () => {
-        setIsLoading(true);
-        try {
-            const res = await fetch(apiEndpoint, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    id: item.id,
-                    enable: !isPublic
-                })
-            });
-
-            if (res.ok) {
-                const json = await res.json();
-                setIsPublic(!isPublic);
-                setShareData(json.share);
-                // Optimistic update for parent
-                onUpdate(item.id, { share: json.share });
-            }
-        } catch (error) {
-            console.error('Failed to toggle share', error);
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const shareUrl = shareData?.token
-        ? `${window.location.origin}/share/${shareData.token}`
-        : '';
-
-    const handleCopy = () => {
-        if (shareUrl) {
-            navigator.clipboard.writeText(shareUrl);
-            setCopied(true);
-            setTimeout(() => setCopied(false), 2000);
-        }
-    };
-
-    return createPortal(
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-overlay/50 backdrop-blur-sm animate-in fade-in duration-200" onClick={(e) => { e.stopPropagation(); onClose(); }}>
-            <div className="bg-background border border-border rounded-xl shadow-2xl w-[448px] w-full max-w-md overflow-hidden animate-in zoom-in-95 duration-200" onClick={e => e.stopPropagation()}>
-                {/* Header */}
-                <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-muted/50">
-                    <h3 className="text-sm font-semibold text-foreground flex items-center gap-2">
-                        <Globe size={16} className="text-primary" />
-                        Share Image
-                    </h3>
-                    <button onClick={onClose} className="text-muted-foreground hover:text-foreground transition-colors">
-                        <X size={18} />
-                    </button>
-                </div>
-
-                {/* Content */}
-                <div className="p-6 space-y-6">
-
-                    {/* Toggle Switch */}
-                    <div className="flex items-center justify-between">
-                        <div className="space-y-1">
-                            <div className="text-sm font-medium text-foreground">Public Link</div>
-                            <div className="text-xs text-muted-foreground">
-                                {isPublic
-                                    ? "Anyone with the link can view this image."
-                                    : "Only you can view this image."}
-                            </div>
-                        </div>
-
-                        <button
-                            onClick={handleToggleShare}
-                            disabled={isLoading}
-                            className={cn(
-                                "relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background",
-                                isPublic ? "bg-primary" : "bg-muted",
-                                isLoading && "opacity-50 cursor-not-allowed"
-                            )}
-                        >
-                            <span
-                                className={cn(
-                                    "inline-block h-4 w-4 transform rounded-full bg-background transition-transform",
-                                    isPublic ? "translate-x-6" : "translate-x-1"
-                                )}
-                            />
-                        </button>
-                    </div>
-
-                    {/* URL Display */}
-                    {isPublic && shareData && (
-                        <div className="space-y-2 animate-in slide-in-from-top-2 duration-200">
-                            <label className="text-xs font-medium text-muted-foreground">Public URL</label>
-                            <div className="flex items-center gap-2">
-                                <div className="flex-1 bg-muted border border-border rounded-md px-3 py-2 text-xs text-muted-foreground font-mono truncate select-all">
-                                    {shareUrl}
-                                </div>
-                                <button
-                                    onClick={handleCopy}
-                                    className="p-2 bg-background hover:bg-muted text-muted-foreground rounded-md transition-colors border border-border"
-                                    title="Copy to clipboard"
-                                >
-                                    {copied ? <Check size={16} className="text-primary" /> : <Copy size={16} />}
-                                </button>
-                                <a
-                                    href={shareUrl}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="p-2 bg-background hover:bg-muted text-muted-foreground rounded-md transition-colors border border-border"
-                                    title="Open in new tab"
-                                >
-                                    <ExternalLink size={16} />
-                                </a>
-                            </div>
-
-                            {/* Stats */}
-                            <div className="flex items-center gap-4 pt-2">
-                                <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                                    <Globe size={12} />
-                                    <span>Access Count: <span className="text-foreground font-mono">{shareData.accessCount || 0}</span></span>
-                                </div>
-                                <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                                    <Lock size={12} />
-                                    <span>Token: <span className="text-foreground font-mono">{shareData.token?.slice(0, 8)}...</span></span>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-
-                    {!isPublic && (
-                        <div className="flex flex-col items-center justify-center py-4 text-muted-foreground space-y-2 border-2 border-dashed border-border rounded-lg bg-muted/50">
-                            <Lock size={24} />
-                            <span className="text-xs">Sharing is disabled</span>
-                        </div>
-                    )}
-
-                </div>
-            </div>
-        </div>,
-        document.body
-    );
-};

package/src/components/organisms/ToastProvider.tsx

@@ -1,49 +0,0 @@
-"use client"
-import React, { createContext, useContext, useState, useCallback } from 'react';
-import { Toast, ToastType } from '../molecules/Toast';
-
-interface ToastContextType {
-    showToast: (message: string, type: ToastType, duration?: number) => void;
-}
-
-const ToastContext = createContext<ToastContextType | undefined>(undefined);
-
-export const ToastProvider = ({ children }: { children: React.ReactNode }) => {
-    const [toasts, setToasts] = useState<{ id: number, message: string, type: ToastType, duration: number, isVisible: boolean }[]>([]);
-
-    const showToast = useCallback((message: string, type: ToastType, duration = 3000) => {
-        const id = Date.now();
-        setToasts(prev => [...prev, { id, message, type, duration, isVisible: true }]);
-    }, []);
-
-    const closeToast = useCallback((id: number) => {
-        setToasts(prev => prev.map(t => t.id === id ? { ...t, isVisible: false } : t));
-        setTimeout(() => {
-            setToasts(prev => prev.filter(t => t.id !== id));
-        }, 300);
-    }, []);
-
-    return (
-        <ToastContext.Provider value={{ showToast }}>
-            {children}
-            <div className="fixed top-6 right-6 z-[100] flex flex-col items-center w-[320px] gap-2 pointer-events-none">
-                {toasts.map(toast => (
-                    <Toast
-                        key={toast.id}
-                        message={toast.message}
-                        type={toast.type}
-                        isVisible={toast.isVisible}
-                        onClose={() => closeToast(toast.id)}
-                        duration={toast.duration}
-                    />
-                ))}
-            </div>
-        </ToastContext.Provider>
-    );
-};
-
-export const useToast = () => {
-    const context = useContext(ToastContext);
-    if (!context) throw new Error('useToast must be used within a ToastProvider');
-    return context;
-};