diff --git a/.spark-initial-sha b/.spark-initial-sha new file mode 100644 index 0000000..ffea877 --- /dev/null +++ b/.spark-initial-sha @@ -0,0 +1 @@ +HEAD diff --git a/PRD.md b/PRD.md new file mode 100644 index 0000000..50cf032 --- /dev/null +++ b/PRD.md @@ -0,0 +1,129 @@ +# Planning Guide + +A visual low-code platform for generating Next.js applications with Material UI styling, integrated Monaco code editor, and Prisma schema designer. + +**Experience Qualities**: +1. **Empowering** - Users feel in control with both visual and code-level editing capabilities +2. **Intuitive** - Complex application generation feels approachable through well-organized GUI tools +3. **Professional** - Output-ready code that follows modern best practices and conventions + +**Complexity Level**: Complex Application (advanced functionality, likely with multiple views) +This is a full-featured low-code IDE with multiple integrated tools (code editor, visual designers, schema builder), state management across views, and code generation capabilities that require sophisticated UI organization. + +## Essential Features + +### Monaco Code Editor Integration +- **Functionality**: Full-featured code editor with syntax highlighting, autocomplete, and multi-file editing +- **Purpose**: Allows direct code manipulation for users who want precise control +- **Trigger**: Clicking on files in the file tree or switching to code view +- **Progression**: Select file → Editor opens with syntax highlighting → Edit code → Changes auto-saved to state → Preview updates +- **Success criteria**: Code edits persist, syntax highlighting works for JS/TS/CSS, multiple files can be open in tabs + +### Prisma Schema Designer +- **Functionality**: Visual model designer for database schemas with drag-and-drop field creation +- **Purpose**: Simplifies database modeling without requiring Prisma syntax knowledge +- **Trigger**: Opening the Models tab +- **Progression**: Create model → Add fields with types → Define relations → Visual graph updates → Generate Prisma schema code +- **Success criteria**: Can create models, fields, relations; generates valid Prisma syntax; visual representation is clear + +### Component Tree Builder +- **Functionality**: Hierarchical tree view for building React component structure +- **Purpose**: Visual composition of component hierarchy without writing JSX +- **Trigger**: Opening the Components tab +- **Progression**: Select component type → Add to tree → Configure props → Nest children → View generated JSX → Export component +- **Success criteria**: Can add/remove/reorder components; props are editable; generates valid React code + +### Style Designer +- **Functionality**: Visual interface for Material UI theming and component styling +- **Purpose**: Configure colors, typography, spacing without manual theme object creation +- **Trigger**: Opening the Styling tab +- **Progression**: Select theme property → Adjust values with controls → Preview updates live → Export theme configuration +- **Success criteria**: Color pickers work; typography scales properly; generates valid MUI theme code + +### Project Generator +- **Functionality**: Exports complete Next.js project with all configurations +- **Purpose**: Converts visual designs into downloadable, runnable applications +- **Trigger**: Clicking "Generate Project" or "Export Code" +- **Progression**: User finalizes design → Clicks export → System bundles files → Downloads zip or shows code → User extracts and runs locally +- **Success criteria**: Generated project structure is valid; includes package.json; code runs without errors + +## Edge Case Handling +- **Empty Projects**: Show welcome screen with quick-start templates when no project exists +- **Invalid Prisma Schemas**: Validate models and show inline errors before generating code +- **Circular Component Dependencies**: Detect and warn when component tree has circular references +- **Missing Required Props**: Highlight components with missing required Material UI props +- **Large Files**: Implement virtual scrolling and lazy loading for large component trees and file lists + +## Design Direction +The design should evoke a professional IDE environment while remaining approachable - think Visual Studio Code meets Figma. Clean panels, clear hierarchy, and purposeful use of space to avoid overwhelming users with options. + +## Color Selection + +- **Primary Color**: Deep indigo `oklch(0.45 0.15 270)` - Communicates professionalism and technical capability +- **Secondary Colors**: Slate gray `oklch(0.35 0.02 250)` for UI chrome and panels; cool blue `oklch(0.55 0.12 240)` for secondary actions +- **Accent Color**: Bright cyan `oklch(0.70 0.15 200)` - Highlights active elements, code selections, and important CTAs +- **Foreground/Background Pairings**: + - Background (Dark slate #1a1d29 / oklch(0.14 0.02 250)): Light text (#e8eaed / oklch(0.93 0.005 250)) - Ratio 12.5:1 ✓ + - Primary (Deep indigo oklch(0.45 0.15 270)): White text (#ffffff / oklch(1 0 0)) - Ratio 6.8:1 ✓ + - Accent (Bright cyan oklch(0.70 0.15 200)): Dark text (#1a1d29 / oklch(0.14 0.02 250)) - Ratio 9.2:1 ✓ + - Card (Elevated slate #23273a / oklch(0.18 0.02 250)): Light text (#e8eaed / oklch(0.93 0.005 250)) - Ratio 10.1:1 ✓ + +## Font Selection +Typography should balance code readability with UI clarity, using a monospace font for the editor and a clean sans-serif for the interface. + +- **Typographic Hierarchy**: + - H1 (Panel Titles): Space Grotesk Bold/20px/tight letter spacing + - H2 (Section Headers): Space Grotesk Medium/16px/normal letter spacing + - Body (UI Text): Inter Regular/14px/normal letter spacing + - Code (Editor): JetBrains Mono Regular/14px/normal letter spacing with ligatures + - Labels: Inter Medium/12px/wide letter spacing/uppercase + +## Animations +Animations should feel responsive and purposeful - quick panel transitions (200ms) for switching views, smooth accordion expansions (250ms) for tree nodes, and subtle hover states (100ms) on interactive elements. Use elastic easing for drawer slides to add personality without slowing workflow. + +## Component Selection +- **Components**: + - Tabs for main navigation between Code/Models/Components/Styling views + - ResizablePanels for adjustable file tree, editor, and preview panes + - Accordion for collapsible sections in designers + - ScrollArea for file lists and component trees + - Select dropdowns for component type and field type pickers + - Input fields for text properties with real-time validation + - Button with variants (primary for generate/export, secondary for add/create) + - Card for model and component visual representations + - Dialog for configuration modals and confirmations + - Badge for type indicators and status labels + +- **Customizations**: + - Custom MonacoEditor wrapper component with theme integration + - Custom SchemaNode component for visual Prisma model representation + - Custom ComponentTreeItem with drag handles and inline editing + - Custom ColorPicker using native color input wrapped in Popover + +- **States**: + - Buttons: Subtle glow on hover, pressed state with scale, disabled with reduced opacity + - Inputs: Border highlight on focus with accent color, error state with red border + - Tree items: Background highlight on hover, bold text when selected + - Panels: Shadow increase when resizing, smooth opacity transitions + +- **Icon Selection**: + - Code (code icon) for editor view + - Database (database icon) for models + - Tree (tree-structure icon) for components + - PaintBrush (paint-brush icon) for styling + - FileCode (file-code icon) for individual files + - Plus (plus icon) for create actions + - Download (download icon) for export + +- **Spacing**: + - Panel padding: p-6 (24px) for main content areas + - Card padding: p-4 (16px) for nested items + - Gap between elements: gap-4 (16px) default, gap-2 (8px) for tight groups + - Section margins: mb-6 (24px) between major sections + +- **Mobile**: + - Stack panels vertically instead of resizable horizontal splits + - Convert main tabs to a drawer menu on mobile + - Full-screen editor mode as default on small screens + - Collapse file tree into slide-out sheet + - Touch-friendly hit areas (min 44px) for all tree items and buttons diff --git a/index.html b/index.html index f62002d..14b52f1 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,10 @@ - + CodeForge - Low-Code App Builder + diff --git a/package-lock.json b/package-lock.json index c92f18e..e5a1a68 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@github/spark": ">=0.43.1 <1", "@heroicons/react": "^2.2.0", "@hookform/resolvers": "^4.1.3", + "@monaco-editor/react": "^4.7.0", "@octokit/core": "^6.1.4", "@phosphor-icons/react": "^2.1.7", "@radix-ui/colors": "^3.0.0", @@ -1076,6 +1077,29 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@monaco-editor/loader": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.7.0.tgz", + "integrity": "sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==", + "license": "MIT", + "dependencies": { + "state-local": "^1.0.6" + } + }, + "node_modules/@monaco-editor/react": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz", + "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==", + "license": "MIT", + "dependencies": { + "@monaco-editor/loader": "^1.5.0" + }, + "peerDependencies": { + "monaco-editor": ">= 0.25.0 < 1", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -4404,6 +4428,14 @@ "@types/node": "*" } }, + "node_modules/@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", + "license": "MIT", + "optional": true, + "peer": true + }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "8.48.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.48.0.tgz", @@ -5992,6 +6024,16 @@ "csstype": "^3.0.2" } }, + "node_modules/dompurify": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz", + "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==", + "license": "(MPL-2.0 OR Apache-2.0)", + "peer": true, + "optionalDependencies": { + "@types/trusted-types": "^2.0.7" + } + }, "node_modules/dunder-proto": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", @@ -7953,6 +7995,30 @@ "node": "*" } }, + "node_modules/monaco-editor": { + "version": "0.55.1", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz", + "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==", + "license": "MIT", + "peer": true, + "dependencies": { + "dompurify": "3.2.7", + "marked": "14.0.0" + } + }, + "node_modules/monaco-editor/node_modules/marked": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz", + "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==", + "license": "MIT", + "peer": true, + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 18" + } + }, "node_modules/motion-dom": { "version": "12.23.23", "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz", @@ -9198,6 +9264,12 @@ "dev": true, "license": "MIT" }, + "node_modules/state-local": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz", + "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==", + "license": "MIT" + }, "node_modules/statuses": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz", diff --git a/package.json b/package.json index 165aec8..6fac6a5 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@github/spark": ">=0.43.1 <1", "@heroicons/react": "^2.2.0", "@hookform/resolvers": "^4.1.3", + "@monaco-editor/react": "^4.7.0", "@octokit/core": "^6.1.4", "@phosphor-icons/react": "^2.1.7", "@radix-ui/colors": "^3.0.0", diff --git a/src/App.tsx b/src/App.tsx index 98ef973..acbc05f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,251 @@ +import { useState } from 'react' +import { useKV } from '@github/spark/hooks' +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' +import { Button } from '@/components/ui/button' +import { Card } from '@/components/ui/card' +import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable' +import { Code, Database, Tree, PaintBrush, Download, Sparkle } from '@phosphor-icons/react' +import { ProjectFile, PrismaModel, ComponentNode, ThemeConfig } from '@/types/project' +import { CodeEditor } from '@/components/CodeEditor' +import { ModelDesigner } from '@/components/ModelDesigner' +import { ComponentTreeBuilder } from '@/components/ComponentTreeBuilder' +import { StyleDesigner } from '@/components/StyleDesigner' +import { FileExplorer } from '@/components/FileExplorer' +import { generateNextJSProject, generatePrismaSchema, generateMUITheme } from '@/lib/generators' +import { toast } from 'sonner' +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, +} from '@/components/ui/dialog' +import { ScrollArea } from '@/components/ui/scroll-area' +import { Textarea } from '@/components/ui/textarea' + +const DEFAULT_THEME: ThemeConfig = { + primaryColor: '#1976d2', + secondaryColor: '#dc004e', + errorColor: '#f44336', + warningColor: '#ff9800', + successColor: '#4caf50', + fontFamily: 'Roboto, Arial, sans-serif', + fontSize: { small: 12, medium: 14, large: 20 }, + spacing: 8, + borderRadius: 4, +} + +const DEFAULT_FILES: ProjectFile[] = [ + { + id: 'file-1', + name: 'page.tsx', + path: '/src/app/page.tsx', + content: `'use client'\n\nimport { ThemeProvider } from '@mui/material/styles'\nimport CssBaseline from '@mui/material/CssBaseline'\nimport { theme } from '@/theme'\nimport { Box, Typography, Button } from '@mui/material'\n\nexport default function Home() {\n return (\n \n \n \n \n Welcome to Your App\n \n \n \n \n )\n}`, + language: 'typescript', + }, + { + id: 'file-2', + name: 'layout.tsx', + path: '/src/app/layout.tsx', + content: `export const metadata = {\n title: 'My Next.js App',\n description: 'Generated with CodeForge',\n}\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode\n}) {\n return (\n \n {children}\n \n )\n}`, + language: 'typescript', + }, +] + function App() { - return
+ const [files, setFiles] = useKV('project-files', DEFAULT_FILES) + const [models, setModels] = useKV('project-models', []) + const [components, setComponents] = useKV('project-components', []) + const [theme, setTheme] = useKV('project-theme', DEFAULT_THEME) + const [activeFileId, setActiveFileId] = useState((files || [])[0]?.id || null) + const [activeTab, setActiveTab] = useState('code') + const [exportDialogOpen, setExportDialogOpen] = useState(false) + const [generatedCode, setGeneratedCode] = useState>({}) + + const safeFiles = files || [] + const safeModels = models || [] + const safeComponents = components || [] + const safeTheme = theme || DEFAULT_THEME + + const handleFileChange = (fileId: string, content: string) => { + setFiles((currentFiles) => + (currentFiles || []).map((f) => (f.id === fileId ? { ...f, content } : f)) + ) + } + + const handleFileAdd = (file: ProjectFile) => { + setFiles((currentFiles) => [...(currentFiles || []), file]) + setActiveFileId(file.id) + } + + const handleFileClose = (fileId: string) => { + if (activeFileId === fileId) { + const currentIndex = safeFiles.findIndex((f) => f.id === fileId) + const nextFile = safeFiles[currentIndex + 1] || safeFiles[currentIndex - 1] + setActiveFileId(nextFile?.id || null) + } + } + + const handleExportProject = () => { + const projectFiles = generateNextJSProject('my-nextjs-app', safeModels, safeComponents, safeTheme) + + const prismaSchema = generatePrismaSchema(safeModels) + const themeCode = generateMUITheme(safeTheme) + + const allFiles = { + ...projectFiles, + 'prisma/schema.prisma': prismaSchema, + 'src/theme.ts': themeCode, + ...safeFiles.reduce((acc, file) => { + acc[file.path] = file.content + return acc + }, {} as Record), + } + + setGeneratedCode(allFiles) + setExportDialogOpen(true) + toast.success('Project files generated!') + } + + const handleGenerateWithAI = async () => { + try { + toast.info('AI generation coming soon!') + } catch (error) { + toast.error('AI generation failed') + } + } + + return ( +
+
+
+
+
+ +
+
+

CodeForge

+

+ Low-Code Next.js App Builder +

+
+
+
+ + +
+
+
+ + +
+ + + + Code Editor + + + + Models + + + + Components + + + + Styling + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + Generated Project Files + + Copy these files to create your Next.js application + + + +
+ {Object.entries(generatedCode).map(([path, content]) => ( + +
+ + {path} + + +
+