@realtimex/email-automator 2.2.0 → 2.3.0

package/src/components/SetupWizard.tsx

@@ -1,388 +0,0 @@
-import { useState } from 'react';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogHeader,
-    DialogTitle,
-    DialogFooter
-} from './ui/dialog';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
-import { Label } from './ui/label';
-import { Alert, AlertDescription } from './ui/alert';
-import {
-    Loader2,
-    Database,
-    CheckCircle,
-    AlertCircle,
-    ExternalLink,
-    Check,
-} from 'lucide-react';
-import {
-    saveSupabaseConfig,
-    validateSupabaseConnection,
-} from '../lib/supabase-config';
-import { Logo } from './Logo';
-
-type WizardStep = 'welcome' | 'credentials' | 'validating' | 'success';
-
-interface SetupWizardProps {
-    onComplete: () => void;
-    open?: boolean;
-    canClose?: boolean;
-}
-
-/**
- * Normalizes Supabase URL input - accepts either full URL or just project ID
- */
-function normalizeSupabaseUrl(input: string): string {
-    const trimmed = input.trim();
-    if (!trimmed) return '';
-
-    // If it starts with http:// or https://, treat as full URL
-    if (trimmed.startsWith('http://') || trimmed.startsWith('https://')) {
-        return trimmed;
-    }
-
-    // Otherwise, treat as project ID and construct full URL
-    return `https://${trimmed}.supabase.co`;
-}
-
-/**
- * Validates if input looks like a valid Supabase URL or project ID
- */
-function validateUrlFormat(input: string): {
-    valid: boolean;
-    message?: string;
-} {
-    const trimmed = input.trim();
-    if (!trimmed) return { valid: false };
-
-    // Check if it's a full URL
-    if (trimmed.startsWith('http://') || trimmed.startsWith('https://')) {
-        try {
-            const url = new URL(trimmed);
-            if (url.hostname.endsWith('.supabase.co')) {
-                return {
-                    valid: true,
-                    message: "Valid Supabase URL",
-                };
-            }
-            return {
-                valid: false,
-                message: "URL must be a supabase.co domain",
-            };
-        } catch {
-            return {
-                valid: false,
-                message: "Invalid URL format",
-            };
-        }
-    }
-
-    // Check if it's a project ID (alphanumeric, typically 20 chars)
-    if (/^[a-z0-9]+$/.test(trimmed)) {
-        return {
-            valid: true,
-            message: "Project ID detected",
-        };
-    }
-
-    return { valid: false, message: "Enter a URL or Project ID" };
-}
-
-/**
- * Validates if input looks like a valid Supabase API key
- */
-function validateKeyFormat(input: string): {
-    valid: boolean;
-    message?: string;
-} {
-    const trimmed = input.trim();
-    if (!trimmed) return { valid: false };
-
-    // New publishable keys start with "sb_publishable_" followed by key content
-    if (trimmed.startsWith("sb_publishable_")) {
-        // Check that there's actual key content after the prefix
-        if (trimmed.length > "sb_publishable_".length + 10) {
-            return {
-                valid: true,
-                message: "Valid Publishable Key",
-            };
-        }
-        return {
-            valid: false,
-            message: "Incomplete Publishable Key",
-        };
-    }
-
-    // Legacy anon keys are JWT tokens starting with "eyJ"
-    if (trimmed.startsWith("eyJ")) {
-        if (trimmed.length > 50) {
-            return {
-                valid: true,
-                message: "Valid Anon Key",
-            };
-        }
-        return {
-            valid: false,
-            message: "Incomplete Anon Key",
-        };
-    }
-
-    return {
-        valid: false,
-        message: "Invalid API Key format",
-    };
-}
-
-export function SetupWizard({ onComplete, open = true, canClose = false }: SetupWizardProps) {
-    const [step, setStep] = useState<WizardStep>('welcome');
-    const [url, setUrl] = useState('');
-    const [anonKey, setAnonKey] = useState('');
-    const [error, setError] = useState<string | null>(null);
-    const [urlTouched, setUrlTouched] = useState(false);
-    const [keyTouched, setKeyTouched] = useState(false);
-
-    const handleValidateAndSave = async () => {
-        setError(null);
-        setStep('validating');
-
-        // Normalize the URL before validation
-        const normalizedUrl = normalizeSupabaseUrl(url);
-        const trimmedKey = anonKey.trim();
-
-        const result = await validateSupabaseConnection(normalizedUrl, trimmedKey);
-
-        if (result.valid) {
-            saveSupabaseConfig({ url: normalizedUrl, anonKey: trimmedKey });
-            setStep('success');
-
-            // Completes the flow by reloading to pick up new config
-            setTimeout(() => {
-                window.location.reload();
-            }, 1000);
-        } else {
-            setError(result.error || 'Connection failed. Please check your credentials.');
-            setStep('credentials');
-        }
-    };
-
-    // Get validation states
-    const urlValidation = url ? validateUrlFormat(url) : { valid: false };
-    const keyValidation = anonKey ? validateKeyFormat(anonKey) : { valid: false };
-    const normalizedUrl = url ? normalizeSupabaseUrl(url) : '';
-    const showUrlExpansion = url && !url.startsWith('http') && urlValidation.valid;
-
-    return (
-        <Dialog open={open} onOpenChange={(val) => {
-            if (!val && canClose) onComplete();
-        }}>
-            <DialogContent
-                className="sm:max-w-md"
-                onPointerDownOutside={(e) => { if (!canClose) e.preventDefault() }}
-                onEscapeKeyDown={(e) => { if (!canClose) e.preventDefault() }}
-            >
-                {step === 'welcome' && (
-                    <>
-                        <DialogHeader>
-                            <div className="flex items-center gap-2 mb-2">
-                                <Logo className="w-9 h-9" />
-                                <DialogTitle>Welcome to Email Automator</DialogTitle>
-                            </div>
-                            <DialogDescription>
-                                This application requires a Supabase database to store your emails and automation rules.
-                            </DialogDescription>
-                        </DialogHeader>
-
-                        <div className="space-y-4 py-4">
-                            <Alert>
-                                <AlertDescription>
-                                    <strong>No Supabase Setup Detected</strong>
-                                    <br />
-                                    You can create a free project at{' '}
-                                    <a
-                                        href="https://supabase.com"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className="underline text-primary inline-flex items-center gap-1"
-                                    >
-                                        supabase.com
-                                        <ExternalLink className="h-3 w-3" />
-                                    </a>
-                                </AlertDescription>
-                            </Alert>
-
-                            <div className="space-y-2">
-                                <h4 className="font-medium text-sm">You will need:</h4>
-                                <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1">
-                                    <li>Project URL</li>
-                                    <li>Anon Public Key</li>
-                                </ul>
-                            </div>
-
-                            <div className="flex gap-2">
-                                {canClose && (
-                                    <Button variant="outline" onClick={onComplete} className="flex-1">
-                                        Close
-                                    </Button>
-                                )}
-                                <Button onClick={() => setStep('credentials')} className="flex-1">
-                                    Continue Setup
-                                </Button>
-                            </div>
-                        </div>
-                    </>
-                )}
-
-                {step === 'credentials' && (
-                    <>
-                        <DialogHeader>
-                            <DialogTitle>Connect to Supabase</DialogTitle>
-                            <DialogDescription>
-                                Enter your connection details below.
-                            </DialogDescription>
-                        </DialogHeader>
-
-                        <div className="space-y-4 py-4">
-                            {error && (
-                                <Alert variant="destructive">
-                                    <AlertCircle className="h-4 w-4" />
-                                    <AlertDescription>{error}</AlertDescription>
-                                </Alert>
-                            )}
-
-                            <div className="space-y-2">
-                                <Label htmlFor="supabase-url">Project URL or ID</Label>
-                                <div className="relative">
-                                    <Input
-                                        id="supabase-url"
-                                        placeholder="https://xxx.supabase.co or project-id"
-                                        value={url}
-                                        onChange={(e) => {
-                                            setUrl(e.target.value);
-                                            setUrlTouched(true);
-                                        }}
-                                        onBlur={() => setUrlTouched(true)}
-                                        className={
-                                            urlTouched && url
-                                                ? urlValidation.valid
-                                                    ? 'pr-8 border-green-500'
-                                                    : 'pr-8 border-destructive'
-                                                : ''
-                                        }
-                                    />
-                                    {urlTouched && url && urlValidation.valid && (
-                                        <Check className="absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 text-green-500" />
-                                    )}
-                                </div>
-                                {showUrlExpansion && (
-                                    <div className="flex items-start gap-1.5 text-xs text-green-600 dark:text-green-400">
-                                        <Check className="h-3 w-3 mt-0.5 flex-shrink-0" />
-                                        <span>Will use: {normalizedUrl}</span>
-                                    </div>
-                                )}
-                                {urlTouched && url && urlValidation.message && !urlValidation.valid && (
-                                    <p className="text-xs text-destructive">{urlValidation.message}</p>
-                                )}
-                            </div>
-
-                            <div className="space-y-2">
-                                <Label htmlFor="anon-key">Anon Public Key</Label>
-                                <div className="relative">
-                                    <Input
-                                        id="anon-key"
-                                        type="password"
-                                        placeholder="eyJ..."
-                                        value={anonKey}
-                                        onChange={(e) => {
-                                            setAnonKey(e.target.value);
-                                            setKeyTouched(true);
-                                        }}
-                                        onBlur={() => setKeyTouched(true)}
-                                        className={
-                                            keyTouched && anonKey
-                                                ? keyValidation.valid
-                                                    ? 'pr-8 border-green-500'
-                                                    : 'pr-8 border-destructive'
-                                                : ''
-                                        }
-                                    />
-                                    {keyTouched && anonKey && keyValidation.valid && (
-                                        <Check className="absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 text-green-500" />
-                                    )}
-                                </div>
-                                {keyTouched && anonKey && keyValidation.message && (
-                                    <p
-                                        className={`text-xs ${keyValidation.valid ? 'text-green-600 dark:text-green-400' : 'text-destructive'}`}
-                                    >
-                                        {keyValidation.message}
-                                    </p>
-                                )}
-                            </div>
-
-                            <div className="flex gap-2">
-                                <Button
-                                    variant="outline"
-                                    onClick={() => setStep('welcome')}
-                                    className="flex-1"
-                                >
-                                    Back
-                                </Button>
-                                {canClose && (
-                                    <Button
-                                        variant="outline"
-                                        onClick={onComplete}
-                                        className="flex-1"
-                                    >
-                                        Close
-                                    </Button>
-                                )}
-                                <Button
-                                    onClick={handleValidateAndSave}
-                                    disabled={!urlValidation.valid || !keyValidation.valid}
-                                    className="flex-1"
-                                >
-                                    Connect
-                                </Button>
-                            </div>
-                        </div>
-                    </>
-                )}
-
-                {step === 'validating' && (
-                    <>
-                        <DialogHeader>
-                            <DialogTitle>Validating Connection</DialogTitle>
-                            <DialogDescription>
-                                Verifying your credentials with Supabase...
-                            </DialogDescription>
-                        </DialogHeader>
-
-                        <div className="flex flex-col items-center justify-center py-8">
-                            <Loader2 className="h-12 w-12 animate-spin text-primary mb-4" />
-                            <p className="text-sm text-muted-foreground">Please wait...</p>
-                        </div>
-                    </>
-                )}
-
-                {step === 'success' && (
-                    <>
-                        <DialogHeader>
-                            <DialogTitle>Success!</DialogTitle>
-                            <DialogDescription>
-                                Your database is connected.
-                            </DialogDescription>
-                        </DialogHeader>
-
-                        <div className="flex flex-col items-center justify-center py-8">
-                            <CheckCircle className="h-12 w-12 text-green-500 mb-4" />
-                            <p className="text-sm text-muted-foreground">Restarting application...</p>
-                        </div>
-                    </>
-                )}
-            </DialogContent>
-        </Dialog>
-    );
-}

package/src/components/Toast.tsx

@@ -1,109 +0,0 @@
-import { useEffect, useState } from 'react';
-import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react';
-import { cn } from '../lib/utils';
-
-export type ToastType = 'success' | 'error' | 'info' | 'warning';
-
-interface Toast {
-    id: string;
-    type: ToastType;
-    message: string;
-    duration?: number;
-}
-
-interface ToastContextType {
-    toasts: Toast[];
-    addToast: (type: ToastType, message: string, duration?: number) => void;
-    removeToast: (id: string) => void;
-}
-
-// Simple toast store
-let toasts: Toast[] = [];
-let listeners: Set<() => void> = new Set();
-
-function notify() {
-    listeners.forEach(listener => listener());
-}
-
-export const toast = {
-    success: (message: string, duration?: number) => addToast('success', message, duration),
-    error: (message: string, duration?: number) => addToast('error', message, duration),
-    info: (message: string, duration?: number) => addToast('info', message, duration),
-    warning: (message: string, duration?: number) => addToast('warning', message, duration),
-};
-
-function addToast(type: ToastType, message: string, duration = 5000) {
-    const id = Math.random().toString(36).substr(2, 9);
-    toasts = [...toasts, { id, type, message, duration }];
-    notify();
-    
-    if (duration > 0) {
-        setTimeout(() => removeToast(id), duration);
-    }
-}
-
-function removeToast(id: string) {
-    toasts = toasts.filter(t => t.id !== id);
-    notify();
-}
-
-export function useToasts() {
-    const [, setTick] = useState(0);
-    
-    useEffect(() => {
-        const listener = () => setTick(t => t + 1);
-        listeners.add(listener);
-        return () => { listeners.delete(listener); };
-    }, []);
-    
-    return toasts;
-}
-
-const icons = {
-    success: CheckCircle,
-    error: AlertCircle,
-    info: Info,
-    warning: AlertTriangle,
-};
-
-const styles = {
-    success: 'bg-emerald-500/10 border-emerald-500/20 text-emerald-600 dark:text-emerald-400',
-    error: 'bg-destructive/10 border-destructive/20 text-destructive',
-    info: 'bg-blue-500/10 border-blue-500/20 text-blue-600 dark:text-blue-400',
-    warning: 'bg-yellow-500/10 border-yellow-500/20 text-yellow-600 dark:text-yellow-400',
-};
-
-function ToastItem({ toast: t }: { toast: Toast }) {
-    const Icon = icons[t.type];
-    
-    return (
-        <div className={cn(
-            'flex items-start gap-3 p-4 rounded-lg border shadow-lg backdrop-blur-sm',
-            'animate-in slide-in-from-right-full duration-300',
-            styles[t.type]
-        )}>
-            <Icon className="w-5 h-5 flex-shrink-0 mt-0.5" />
-            <p className="text-sm flex-1">{t.message}</p>
-            <button 
-                onClick={() => removeToast(t.id)}
-                className="p-1 hover:bg-black/10 rounded transition-colors"
-            >
-                <X className="w-4 h-4" />
-            </button>
-        </div>
-    );
-}
-
-export function ToastContainer() {
-    const toastList = useToasts();
-    
-    if (toastList.length === 0) return null;
-    
-    return (
-        <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm w-full">
-            {toastList.map(t => (
-                <ToastItem key={t.id} toast={t} />
-            ))}
-        </div>
-    );
-}

package/src/components/migration/MigrationBanner.tsx

@@ -1,97 +0,0 @@
-/**
- * MigrationBanner Component
- *
- * Displays a compact floating notification in top-right corner when migration is required.
- * Non-blocking: allows users to continue using the app while showing the reminder.
- */
-
-import { useState } from "react";
-import { AlertTriangle, X } from "lucide-react";
-import { Button } from "../ui/button";
-import { toast } from "../Toast";
-import {
-    dismissMigrationReminder,
-    type MigrationStatus,
-} from "../../lib/migration-check";
-
-interface MigrationBannerProps {
-    /** Migration status from checkMigrationStatus */
-    status: MigrationStatus;
-    /** Callback when banner is dismissed */
-    onDismiss?: () => void;
-    /** Callback when user clicks to open modal */
-    onLearnMore?: () => void;
-}
-
-export function MigrationBanner({
-    status,
-    onDismiss,
-    onLearnMore,
-}: MigrationBannerProps) {
-    const [isVisible, setIsVisible] = useState(true);
-
-    if (!isVisible) return null;
-
-    const handleDismiss = () => {
-        dismissMigrationReminder();
-        setIsVisible(false);
-        onDismiss?.();
-    };
-
-    const handleClick = () => {
-        if (onLearnMore) {
-            onLearnMore();
-        } else {
-            // Fallback: copy command
-            navigator.clipboard.writeText("npx email-automator migrate");
-            toast.success("Command copied to clipboard");
-        }
-    };
-
-    return (
-        <div className="fixed right-4 top-16 z-50 max-w-sm animate-in slide-in-from-top-5">
-            <div className="rounded-lg border border-yellow-500 bg-yellow-50 p-4 shadow-lg dark:bg-yellow-950/90 dark:border-yellow-600">
-                <div className="flex items-start gap-3">
-                    <AlertTriangle className="h-5 w-5 flex-shrink-0 text-yellow-600 dark:text-yellow-500 mt-0.5" />
-                    <div className="flex-1 space-y-2">
-                        <div className="flex items-start justify-between gap-2">
-                            <p className="text-sm font-medium text-yellow-900 dark:text-yellow-100">
-                                Database Update Required
-                            </p>
-                            <Button
-                                size="icon"
-                                variant="ghost"
-                                className="h-5 w-5 -mr-1 -mt-1 text-yellow-900 hover:bg-yellow-100 dark:text-yellow-100 dark:hover:bg-yellow-900/30"
-                                onClick={handleDismiss}
-                            >
-                                <X className="h-3 w-3" />
-                                <span className="sr-only">Dismiss</span>
-                            </Button>
-                        </div>
-                        <p className="text-xs text-yellow-800 dark:text-yellow-200">
-                            Your app version ({status.appVersion}) requires a database schema update.
-                        </p>
-                        <div className="flex gap-2">
-                            <Button
-                                size="sm"
-                                variant="default"
-                                className="h-7 text-xs bg-yellow-600 hover:bg-yellow-700 dark:bg-yellow-500 dark:hover:bg-yellow-600"
-                                onClick={handleClick}
-                            >
-                                Update Now
-                            </Button>
-                            <Button
-                                size="sm"
-                                variant="ghost"
-                                className="h-7 text-xs text-yellow-900 hover:bg-yellow-100 dark:text-yellow-100 dark:hover:bg-yellow-900/30"
-                                onClick={handleDismiss}
-                            >
-                                Remind Later
-                            </Button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}