Style Template creation page & input optional form values

[haydenrou]

• Add the updated styles to the template builder
• How do you specify options in a select box? Implement this
• How do you specify the min and max numbers for a number & range field? Implement this
• How do you specify radio + check-box options? Implement this
• Pass these to the back-end and save them to a templates questions
• Consider restructuring our components directory
• Stop the user from being able to drag and drop the inputs on the left-hand-side

[jonnyjones99]

@haydenrou

Looking at the current design, I think we might want to change how the template builder works. Instead of users dragging elements from the left to the right, perhaps they should click a button on the right and then be able to drag it around on the right side.

This is likely how it will work on mobile as well.

[haydenrou]

Will the button on the right open a popover with different options they can select? Kind of like how Notion lets you do it? If so, then I totally agree. We can make these changes in this PR or if its not quite code WIP yet, we could add another issue in and do that first.

Screen.Recording.2024-06-20.at.15.24.52.mov

[jonnyjones99]

That's how I envision it working on the right: when you click one of the inputs inside the form builder itself.

However, what I mean for the left side is that you click the input you want, and it will appear on the right. So users don't need to drag between the left and right, which would be difficult for mobile users.

Alternatively, we could show a mobile-friendly version of the page based on the device's view width.

Probably just keep it how we've done it for now, just thinking about it in the future for mobile users.

[haydenrou]

Ah I see what you mean. Yeah that makes sense, in the future we could just hide the left-sidebar on a certain width and have a little bubble icon that you press or something different for mobile.

I quite like ignoring drag-and-drop for the left-sidebar, and just pressing them. Rearchitecturing that won't be very difficult at all, it'll mainly just be removing code and adding an on-click with the function call that's currently being used in the onAdd I believe. If you want to do that in this PR that'd be good