Introduce Drag-and-Drop Form Builder and Platform Foundation#29
Merged
Introduce Drag-and-Drop Form Builder and Platform Foundation#29
Conversation
- Implement builder page with sidebar and canvas - Add DnD components (Canvas, Container, NodeRenderer, Provider) using @dnd-kit - Setup Zustand store for builder state management - Add builder types and utility functions - Enable React Compiler in Next.js config
- Add schema builder and code generator logic
- Implement component registry for form fields
- Add code export dialog and builder header
- Enhance sidebar with field selection and canvas node rendering
- Update state management for schema and layout handling
- Add Row, Group, and Collapsible layout components - Update node renderer to handle specific layout rendering - Register layout fields in the component registry - Refactor field registry to use builder-specific renderers - Optimize schema generation property ordering
- Add properties panel for editing selected node configuration
- Implement dynamic property form generation based on registry
- Add node selection logic to canvas and node renderer
- Create FormWatcher for real-time property updates
- Update builder store to handle node updates
- Create NodeActionsToolbar component for node-level operations - Implement recursive node duplication with name collision handling in store - Add delete and duplicate actions to NodeRenderer - Refactor NodeRenderer styling for better selection and hover states - Update store to support node removal and duplication
- Enhance canvas with toolbar, device simulation, and zoom support - Implement empty state and improve node selection/hover styles - Add edit/preview mode switching and update store management
- Implement `deepClone` and `extractDefaults` to safely handle frozen store objects - Add `generateSchemaKey` to force form remounts on structural changes - Ensure correct default values are passed to the form instance
- Add mode toggle to toolbar and implement authentic `PreviewForm` rendering - Refactor `NodeRenderer` to `EditableNode` to isolate builder interactions - Integrate `BuilderFormProvider` with base `Form` component - Auto-collapse sidebars in preview mode and disable drag interactions
… types - Add detailed property definitions for all field types including validation, layout, and UI options - Refactor `PropertiesForm` to support nested object updates and debounced state synchronization - Implement property utilities for sanitizing field constraints and handling nested dot-notation paths - Enhance registry integration to provide type-specific configuration panels in the builder
- Switch builder form validation mode to `onBlur` - Disable browser validation in preview form to allow custom error handling
- Implement diagonal stripe pattern and reduced opacity for fields marked as hidden - Add "Hidden" status badge to field nodes to improve clarity during configuration - Ensure hidden fields remain visible and interactive within the builder canvas
- Implement `cleanEmptyValues` utility to remove redundant properties from exported schemas - Refactor `code-generator` template for cleaner, more modern component output - Standardize form action alignment and spacing across builder and preview views
… indicators - Add support for disabled sidebar items with visual "Coming Soon" badges - Registry updates: Reorder fields for better categorization and add placeholders for `tabs` and `array` layouts - Refactor `getSidebarGroups` to support disabled flags and improve type safety
- Integrate `zundo` middleware for temporal state management in builder store - Add undo/redo buttons to the canvas toolbar with keyboard shortcuts (Ctrl+Z, Ctrl+Shift+Z, Ctrl+Y) - Implement state synchronization in `PropertiesForm` to handle external updates
…header - Add editable form name input with draft state and blur/enter commit logic - Implement "New Form" functionality with confirmation dialog and temporal history reset - Add persistent auto-save status indicator with store subscription for status updates - Introduce `formId` and `formName` to builder state with enhanced persistence - Refactor SiteHeader to include new form management components and improved layout
- Add brand label "Buildnbuzz" next to the logo and improve link layout - Introduce vertical separators for better visual sectioning in the header - Standardize button sizes and adjust spacing for improved visual consistency
- Create `MobileOverlay` component to restrict access on small screens - Integrate overlay into builder page to prompt users to use desktop
- Add `BuilderCtaSection` to landing page to promote visual form building - Update `HeroSection` and `SiteHeader` with links to the builder - Add "Create Form" button to `ExamplesHeader` - Configure metadata and Open Graph image for the builder page - Update `SiteHeader` logo layout for consistency
- Add Supabase client and server utilities for authentication - Create middleware proxy client for cookie handling - Install @supabase/ssr and @supabase/supabase-js dependencie
- Create Privacy Policy and Terms of Service pages - Update footerSections in constants.ts to include legal links - Configure metadata for new legal pages
- Implement CloudSaveDialog for "Save & Sync" functionality - Create joinWaitlist server action with Supabase integration - Integrate CloudSaveDialog into the builder header - Add "Coming Soon" notification with early access incentive
- Refactor Privacy Policy and Terms of Service pages with improved UI/UX, including sidebar navigation and responsive design - Move legal pages to root app/privacy and app/terms for better routing structure - Update sitemap.ts to include new legal pages - Redesign SiteFooter for better responsiveness and layout - Reorder footer sections in constants.ts for better information hierarchy
- Add style.width property to all field types for responsive layout control - Update EditableNode to respect style.width when rendering - Adjust RowLayout to correctly handle child sizing and drop indicators - Fix schema-builder to robustly handle container fields with empty children
- Use the actual form name to generate the React component name (PascalCase) - Add "Required Setup" section to CodeExportDialog with installation command - Integrate ScrollArea and improve dialog layout for better code readability - Implement toComponentName utility for safe and consistent naming logic
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Key Changes
1. Drag-and-Drop Form Builder
2. Code Generation and Export
3. Builder UX and Field Management
4. Platform and Web Integration
5. Bug Fixes and Technical Refactors
6. UI Polish