Skip to content

Conversation

@pranavsaigandikota
Copy link

@pranavsaigandikota pranavsaigandikota commented Dec 19, 2025

Why

For the Blade Form Manager Question Editing. Built the frontend component that lets us create and edit questions, the form title and desc., and added the full drag-and-drop interface so we can reorder them like in Google Forms. It has both the question components and the actual page as a demo to show it working (and it looks cool).

What

I added the following:
The Editor Page
(apps/blade/src/app/admin/forms/test-editor/page.tsx)

  • Built the full list view where you can add, delete, and duplicate questions.
  • dnd-kit to handle drag-and-drop reordering. (required to install, but adds the feature)

QuestionEditCard Component:
(apps/blade/src/components/admin/forms/question-edit-card.tsx)

  • The main UI for editing a single question. (highlights based on the question you select with the purple accent on the side)
  • Supports switching between all our question types (Short Answer, Multiple Choice, Checkboxes, Dropdown, Date, Time).

Zod Types
Added in the Zod schemas (QuestionValidator from @forge/consts) to ensure strict type safety and validation. (got rid of the old forms file I created)

Fixed the form to display the name, banner question, and description on the console.
Has autosave on clicking outside of cards, and has a URL check for Banner and answer areas that cannot be edited.

Test Plan

Ran pnpm dev:blade and tested on http://localhost:3000/admin/forms/test-editor.
Drag & Drop reordering works smoothly.
Checked that changing types, editing text, and toggling "Required" should update the state.
Adding, duplicating, and deleting questions works.
Also, the Card layout works on smaller screens.

This is what it looks like:
image

FormsDemo.mp4

PS: Title and desc to be changed after, and extra features on the side are to be added after as well. Also, yes the title is a Doofenshmirtz reference lol.

@pranavsaigandikota pranavsaigandikota marked this pull request as draft December 19, 2025 22:40
@pranavsaigandikota pranavsaigandikota marked this pull request as ready for review December 20, 2025 03:09
@pranavsaigandikota pranavsaigandikota requested a review from a team as a code owner December 20, 2025 03:09
Copy link
Contributor

@DVidal1205 DVidal1205 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

along with the 1 const change, could you please comment a video of the following:

  • adding and modifying the form elements
  • print the form contents from page.tsx (not question-edit-card.tsx) in the console as u do this, include in the video

dragHandleProps?: DraggableSyntheticListeners;
}

const QUESTION_TYPES: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's move this to @forge/consts package. we want to store them there so they can be imported across the project.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I gotchu

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants