mirror of
https://github.com/leonvanzyl/autocoder.git
synced 2026-02-02 07:23:35 +00:00
add claude spec generation
This commit is contained in:
Auto
315
ui/src/components/NewProjectModal.tsx
Normal file
315
ui/src/components/NewProjectModal.tsx
Normal file
@@ -0,0 +1,315 @@
|
||||
/**
|
||||
* New Project Modal Component
|
||||
*
|
||||
* Multi-step modal for creating new projects:
|
||||
* 1. Enter project name
|
||||
* 2. Choose spec method (Claude or manual)
|
||||
* 3a. If Claude: Show SpecCreationChat
|
||||
* 3b. If manual: Create project and close
|
||||
*/
|
||||
|
||||
import { useState } from 'react'
|
||||
import { X, Bot, FileEdit, ArrowRight, ArrowLeft, Loader2, CheckCircle2 } from 'lucide-react'
|
||||
import { useCreateProject } from '../hooks/useProjects'
|
||||
import { SpecCreationChat } from './SpecCreationChat'
|
||||
|
||||
type Step = 'name' | 'method' | 'chat' | 'complete'
|
||||
type SpecMethod = 'claude' | 'manual'
|
||||
|
||||
interface NewProjectModalProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
onProjectCreated: (projectName: string) => void
|
||||
}
|
||||
|
||||
export function NewProjectModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
onProjectCreated,
|
||||
}: NewProjectModalProps) {
|
||||
const [step, setStep] = useState<Step>('name')
|
||||
const [projectName, setProjectName] = useState('')
|
||||
const [_specMethod, setSpecMethod] = useState<SpecMethod | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// Suppress unused variable warning - specMethod may be used in future
|
||||
void _specMethod
|
||||
|
||||
const createProject = useCreateProject()
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
const handleNameSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
const trimmed = projectName.trim()
|
||||
|
||||
if (!trimmed) {
|
||||
setError('Please enter a project name')
|
||||
return
|
||||
}
|
||||
|
||||
if (!/^[a-zA-Z0-9_-]+$/.test(trimmed)) {
|
||||
setError('Project name can only contain letters, numbers, hyphens, and underscores')
|
||||
return
|
||||
}
|
||||
|
||||
setError(null)
|
||||
setStep('method')
|
||||
}
|
||||
|
||||
const handleMethodSelect = async (method: SpecMethod) => {
|
||||
setSpecMethod(method)
|
||||
|
||||
if (method === 'manual') {
|
||||
// Create project immediately with manual method
|
||||
try {
|
||||
const project = await createProject.mutateAsync({
|
||||
name: projectName.trim(),
|
||||
specMethod: 'manual',
|
||||
})
|
||||
setStep('complete')
|
||||
setTimeout(() => {
|
||||
onProjectCreated(project.name)
|
||||
handleClose()
|
||||
}, 1500)
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to create project')
|
||||
}
|
||||
} else {
|
||||
// Create project then show chat
|
||||
try {
|
||||
await createProject.mutateAsync({
|
||||
name: projectName.trim(),
|
||||
specMethod: 'claude',
|
||||
})
|
||||
setStep('chat')
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to create project')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleSpecComplete = () => {
|
||||
setStep('complete')
|
||||
setTimeout(() => {
|
||||
onProjectCreated(projectName.trim())
|
||||
handleClose()
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
const handleChatCancel = () => {
|
||||
// Go back to method selection but keep the project
|
||||
setStep('method')
|
||||
setSpecMethod(null)
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
setStep('name')
|
||||
setProjectName('')
|
||||
setSpecMethod(null)
|
||||
setError(null)
|
||||
onClose()
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
if (step === 'method') {
|
||||
setStep('name')
|
||||
setSpecMethod(null)
|
||||
}
|
||||
}
|
||||
|
||||
// Full-screen chat view
|
||||
if (step === 'chat') {
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 bg-[var(--color-neo-bg)]">
|
||||
<SpecCreationChat
|
||||
projectName={projectName.trim()}
|
||||
onComplete={handleSpecComplete}
|
||||
onCancel={handleChatCancel}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="neo-modal-backdrop" onClick={handleClose}>
|
||||
<div
|
||||
className="neo-modal w-full max-w-lg"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b-3 border-[var(--color-neo-border)]">
|
||||
<h2 className="font-display font-bold text-xl text-[#1a1a1a]">
|
||||
{step === 'name' && 'Create New Project'}
|
||||
{step === 'method' && 'Choose Setup Method'}
|
||||
{step === 'complete' && 'Project Created!'}
|
||||
</h2>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="neo-btn neo-btn-ghost p-2"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
{/* Step 1: Project Name */}
|
||||
{step === 'name' && (
|
||||
<form onSubmit={handleNameSubmit}>
|
||||
<div className="mb-6">
|
||||
<label className="block font-bold mb-2 text-[#1a1a1a]">
|
||||
Project Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={projectName}
|
||||
onChange={(e) => setProjectName(e.target.value)}
|
||||
placeholder="my-awesome-app"
|
||||
className="neo-input"
|
||||
pattern="^[a-zA-Z0-9_-]+$"
|
||||
autoFocus
|
||||
/>
|
||||
<p className="text-sm text-[var(--color-neo-text-secondary)] mt-2">
|
||||
Use letters, numbers, hyphens, and underscores only.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 p-3 bg-[var(--color-neo-danger)] text-white text-sm border-2 border-[var(--color-neo-border)]">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
className="neo-btn neo-btn-primary"
|
||||
disabled={!projectName.trim()}
|
||||
>
|
||||
Next
|
||||
<ArrowRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{/* Step 2: Spec Method */}
|
||||
{step === 'method' && (
|
||||
<div>
|
||||
<p className="text-[var(--color-neo-text-secondary)] mb-6">
|
||||
How would you like to define your project?
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Claude option */}
|
||||
<button
|
||||
onClick={() => handleMethodSelect('claude')}
|
||||
disabled={createProject.isPending}
|
||||
className={`
|
||||
w-full text-left p-4
|
||||
border-3 border-[var(--color-neo-border)]
|
||||
bg-white
|
||||
shadow-[4px_4px_0px_rgba(0,0,0,1)]
|
||||
hover:translate-x-[-2px] hover:translate-y-[-2px]
|
||||
hover:shadow-[6px_6px_0px_rgba(0,0,0,1)]
|
||||
transition-all duration-150
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
`}
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-2 bg-[var(--color-neo-progress)] border-2 border-[var(--color-neo-border)] shadow-[2px_2px_0px_rgba(0,0,0,1)]">
|
||||
<Bot size={24} className="text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-bold text-lg text-[#1a1a1a]">Create with Claude</span>
|
||||
<span className="neo-badge bg-[var(--color-neo-done)] text-xs">
|
||||
Recommended
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-[var(--color-neo-text-secondary)] mt-1">
|
||||
Interactive conversation to define features and generate your app specification automatically.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Manual option */}
|
||||
<button
|
||||
onClick={() => handleMethodSelect('manual')}
|
||||
disabled={createProject.isPending}
|
||||
className={`
|
||||
w-full text-left p-4
|
||||
border-3 border-[var(--color-neo-border)]
|
||||
bg-white
|
||||
shadow-[4px_4px_0px_rgba(0,0,0,1)]
|
||||
hover:translate-x-[-2px] hover:translate-y-[-2px]
|
||||
hover:shadow-[6px_6px_0px_rgba(0,0,0,1)]
|
||||
transition-all duration-150
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
`}
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-2 bg-[var(--color-neo-pending)] border-2 border-[var(--color-neo-border)] shadow-[2px_2px_0px_rgba(0,0,0,1)]">
|
||||
<FileEdit size={24} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<span className="font-bold text-lg text-[#1a1a1a]">Edit Templates Manually</span>
|
||||
<p className="text-sm text-[var(--color-neo-text-secondary)] mt-1">
|
||||
Edit the template files directly. Best for developers who want full control.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mt-4 p-3 bg-[var(--color-neo-danger)] text-white text-sm border-2 border-[var(--color-neo-border)]">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{createProject.isPending && (
|
||||
<div className="mt-4 flex items-center justify-center gap-2 text-[var(--color-neo-text-secondary)]">
|
||||
<Loader2 size={16} className="animate-spin" />
|
||||
<span>Creating project...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-start mt-6">
|
||||
<button
|
||||
onClick={handleBack}
|
||||
className="neo-btn neo-btn-ghost"
|
||||
disabled={createProject.isPending}
|
||||
>
|
||||
<ArrowLeft size={16} />
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 3: Complete */}
|
||||
{step === 'complete' && (
|
||||
<div className="text-center py-8">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 bg-[var(--color-neo-done)] border-3 border-[var(--color-neo-border)] shadow-[4px_4px_0px_rgba(0,0,0,1)] mb-4">
|
||||
<CheckCircle2 size={32} />
|
||||
</div>
|
||||
<h3 className="font-display font-bold text-xl mb-2">
|
||||
{projectName}
|
||||
</h3>
|
||||
<p className="text-[var(--color-neo-text-secondary)]">
|
||||
Your project has been created successfully!
|
||||
</p>
|
||||
<div className="mt-4 flex items-center justify-center gap-2">
|
||||
<Loader2 size={16} className="animate-spin" />
|
||||
<span className="text-sm">Redirecting...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user