347 lines
13 KiB
TypeScript
347 lines
13 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import {
|
|
Github,
|
|
Loader2,
|
|
CheckCircle2,
|
|
Copy,
|
|
ExternalLink,
|
|
ChevronLeft
|
|
} from 'lucide-react';
|
|
import { toast } from 'sonner';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Separator } from '@/components/ui/separator';
|
|
|
|
interface ProjectCreationModalProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
initialWorkspacePath?: string;
|
|
workspace: string;
|
|
}
|
|
|
|
export function ProjectCreationModal({
|
|
open,
|
|
onOpenChange,
|
|
initialWorkspacePath,
|
|
workspace,
|
|
}: ProjectCreationModalProps) {
|
|
const router = useRouter();
|
|
|
|
const [step, setStep] = useState(1);
|
|
const [productName, setProductName] = useState('');
|
|
const [selectedRepo, setSelectedRepo] = useState<any>(null);
|
|
const [createdProjectId, setCreatedProjectId] = useState<string | null>(null);
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
const [githubConnected, setGithubConnected] = useState(false);
|
|
const [githubRepos, setGithubRepos] = useState<any[]>([]);
|
|
const [loadingGithub, setLoadingGithub] = useState(false);
|
|
|
|
useEffect(() => {
|
|
async function checkGitHub() {
|
|
if (!open || step !== 2) return;
|
|
setLoadingGithub(true);
|
|
try {
|
|
const statusResponse = await fetch('/api/github/connect');
|
|
if (statusResponse.ok) {
|
|
const statusData = await statusResponse.json();
|
|
const isConnected = statusData.connected || false;
|
|
setGithubConnected(isConnected);
|
|
if (isConnected) {
|
|
const reposResponse = await fetch('/api/github/repos');
|
|
if (reposResponse.ok) {
|
|
const repos = await reposResponse.json();
|
|
setGithubRepos(Array.isArray(repos) ? repos : []);
|
|
}
|
|
}
|
|
} else {
|
|
setGithubConnected(false);
|
|
}
|
|
} catch (error) {
|
|
console.error('GitHub check error:', error);
|
|
setGithubConnected(false);
|
|
} finally {
|
|
setLoadingGithub(false);
|
|
}
|
|
}
|
|
checkGitHub();
|
|
}, [open, step]);
|
|
|
|
useEffect(() => {
|
|
if (!open) setTimeout(resetModal, 200);
|
|
}, [open]);
|
|
|
|
const resetModal = () => {
|
|
setStep(1);
|
|
setProductName('');
|
|
setSelectedRepo(null);
|
|
setCreatedProjectId(null);
|
|
setLoading(false);
|
|
};
|
|
|
|
const handleCreateProject = async () => {
|
|
if (!productName.trim()) {
|
|
toast.error('Product name is required');
|
|
return;
|
|
}
|
|
setLoading(true);
|
|
try {
|
|
const projectData = {
|
|
projectName: productName.trim(),
|
|
projectType: selectedRepo ? 'existing' : 'scratch',
|
|
slug: productName.toLowerCase().replace(/[^a-z0-9]+/g, '-'),
|
|
product: { name: productName },
|
|
...(selectedRepo && {
|
|
githubRepo: selectedRepo.full_name,
|
|
githubRepoId: selectedRepo.id,
|
|
githubRepoUrl: selectedRepo.html_url,
|
|
githubDefaultBranch: selectedRepo.default_branch,
|
|
}),
|
|
};
|
|
|
|
const response = await fetch('/api/projects/create', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(projectData),
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setCreatedProjectId(data.projectId);
|
|
toast.success('Project created!');
|
|
setStep(3);
|
|
} else {
|
|
const error = await response.json();
|
|
toast.error(error.error || 'Failed to create project');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error creating project:', error);
|
|
toast.error('An error occurred');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const copyToClipboard = (text: string) => {
|
|
navigator.clipboard.writeText(text);
|
|
toast.success('Copied to clipboard!');
|
|
};
|
|
|
|
const handleFinish = () => {
|
|
onOpenChange(false);
|
|
if (createdProjectId) {
|
|
router.push(`/${workspace}/project/${createdProjectId}/v_ai_chat`);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="sm:max-w-[600px]">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{step === 1 && 'Create New Project'}
|
|
{step === 2 && 'Connect GitHub Repository'}
|
|
{step === 3 && 'Setup Complete!'}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{step === 1 && 'Give your project a name to get started.'}
|
|
{step === 2 && 'Select a GitHub repository to connect (optional).'}
|
|
{step === 3 && 'Add the .vibn file to your project to enable tracking.'}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-6 py-4">
|
|
{step === 1 && (
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="productName">Product Name *</Label>
|
|
<Input
|
|
id="productName"
|
|
placeholder="e.g., TaskMaster, HealthTracker, MyApp"
|
|
value={productName}
|
|
onChange={(e) => setProductName(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter' && productName.trim()) {
|
|
setStep(2);
|
|
}
|
|
}}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
<Button onClick={() => setStep(2)} disabled={!productName.trim()} className="w-full">
|
|
Next: {githubConnected ? 'Select Repository' : 'Connect GitHub'}
|
|
</Button>
|
|
<p className="text-xs text-muted-foreground text-center">
|
|
Connect GitHub or skip to continue
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{step === 2 && (
|
|
<div className="space-y-4">
|
|
<Button variant="ghost" size="sm" onClick={() => setStep(1)} className="mb-2">
|
|
<ChevronLeft className="mr-1 h-4 w-4" />
|
|
Back
|
|
</Button>
|
|
|
|
{loadingGithub ? (
|
|
<div className="flex flex-col items-center justify-center py-8 space-y-4">
|
|
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
|
<p className="text-sm text-muted-foreground">Checking GitHub connection...</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="space-y-2 max-h-[300px] overflow-y-auto">
|
|
<Button
|
|
variant={selectedRepo === null ? 'default' : 'outline'}
|
|
className="w-full justify-start"
|
|
onClick={() => setSelectedRepo(null)}
|
|
>
|
|
<CheckCircle2 className={`mr-2 h-4 w-4 ${selectedRepo === null ? '' : 'opacity-0'}`} />
|
|
Skip - No GitHub repository
|
|
</Button>
|
|
<Separator className="my-2" />
|
|
{githubRepos.length > 0 ? (
|
|
githubRepos.map((repo) => (
|
|
<Button
|
|
key={repo.id}
|
|
variant={selectedRepo?.id === repo.id ? 'default' : 'outline'}
|
|
className="w-full justify-start"
|
|
onClick={() => setSelectedRepo(repo)}
|
|
>
|
|
<CheckCircle2 className={`mr-2 h-4 w-4 ${selectedRepo?.id === repo.id ? '' : 'opacity-0'}`} />
|
|
<Github className="mr-2 h-4 w-4" />
|
|
<span className="truncate">{repo.full_name}</span>
|
|
</Button>
|
|
))
|
|
) : !githubConnected ? (
|
|
<div className="space-y-3 py-4">
|
|
<p className="text-sm text-muted-foreground text-center">GitHub not connected yet</p>
|
|
<Button
|
|
variant="outline"
|
|
className="w-full"
|
|
onClick={async () => {
|
|
try {
|
|
const response = await fetch('/api/github/oauth-url', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ returnTo: `/${workspace}/projects` }),
|
|
});
|
|
if (response.ok) {
|
|
const { authUrl } = await response.json();
|
|
window.location.href = authUrl;
|
|
} else {
|
|
toast.error('Failed to initiate GitHub OAuth');
|
|
}
|
|
} catch (error) {
|
|
toast.error('Error connecting to GitHub');
|
|
}
|
|
}}
|
|
>
|
|
<Github className="mr-2 h-4 w-4" />
|
|
Connect GitHub
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground text-center py-4">No repositories found</p>
|
|
)}
|
|
</div>
|
|
<Button onClick={handleCreateProject} disabled={loading} className="w-full" size="lg">
|
|
{loading ? (
|
|
<><Loader2 className="mr-2 h-4 w-4 animate-spin" />Creating...</>
|
|
) : (
|
|
'Create Project'
|
|
)}
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{step === 3 && createdProjectId && (
|
|
<div className="space-y-4">
|
|
<Card className="border-green-500/50 bg-green-500/5">
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-start gap-3">
|
|
<CheckCircle2 className="h-5 w-5 text-green-600 mt-0.5" />
|
|
<div>
|
|
<p className="font-medium text-green-900 dark:text-green-100">Project created successfully!</p>
|
|
<p className="text-sm text-green-700 dark:text-green-300 mt-1">
|
|
Project ID: <code className="font-mono">{createdProjectId}</code>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent className="pt-6 space-y-4">
|
|
<p className="text-sm text-muted-foreground">
|
|
Create a <code className="font-mono bg-muted px-1.5 py-0.5 rounded">.vibn</code> file in your project root:
|
|
</p>
|
|
<div className="relative">
|
|
<pre className="bg-muted p-4 rounded-lg text-sm font-mono overflow-x-auto">
|
|
{`{
|
|
"projectId": "${createdProjectId}",
|
|
"version": "1.0.0"
|
|
}`}
|
|
</pre>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
className="absolute top-2 right-2"
|
|
onClick={() => copyToClipboard(`{\n "projectId": "${createdProjectId}",\n "version": "1.0.0"\n}`)}
|
|
>
|
|
<Copy className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
{selectedRepo && (
|
|
<div className="flex items-center gap-2 pt-2">
|
|
<Github className="h-4 w-4 text-muted-foreground" />
|
|
<a
|
|
href={selectedRepo.html_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-sm text-primary hover:underline flex items-center gap-1"
|
|
>
|
|
Open {selectedRepo.full_name}
|
|
<ExternalLink className="h-3 w-3" />
|
|
</a>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="flex gap-3">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => copyToClipboard(`{\n "projectId": "${createdProjectId}",\n "version": "1.0.0"\n}`)}
|
|
className="flex-1"
|
|
>
|
|
<Copy className="mr-2 h-4 w-4" />
|
|
Copy .vibn Content
|
|
</Button>
|
|
<Button onClick={handleFinish} className="flex-1" size="lg">
|
|
Start AI Chat
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|