RFC: Simple Form Builder
Having the knowledge of the previous version of form Builder, the need of a simpler version is imperative.As a starting point we need to focus on extensibility rather than features that will be time consuming to maintain. So to start with, our current goal is to create a component which creates a form with three basic elements, Label, Label + Text , Label + Radio Box. This implementation is only focused on the frontEnd this has nothing to do with the saving and retrieving the form from the Database. The main parts of a Form that we should consider first are :
-
"UI Library" which represent the actual Elements of The Form The actual elements that will be shown in the form. We should have a tank of Elements to use for the Form Builder. For now we will have only 3 kinds of UI Elements Label, Label with TextField, Label with RadioBox. A good option for that purpose could be the pubsweet-ui Package.
-
Library that will be used for the form Builder ( Formik , redux-form etc. ) This is not important for now i just wanted to have the whole idea of the basic Steps we need to build a Form.
-
Settings of each UI Element. (we definitely not care, which those settings should be for now) An ui Element may has many properties in order to fulfill the requirements of a form. An example could be Validation / Placeholder / Visibility etc. For now the only think that we need is to have a way to have independent and different settings per UI Elements. An example in our Case is : For the Label UI Element we need some settings in order to be shown correctly to the end user and that setting as a start is an Editor (text area) where the administrator could save the actual Value of the Label to be shown. Even those settings at that point are Hard-coded.
-
Layout The actual Component that will host the UI Elements. Mechanism based on "Strategy pattern" that will load different Component Views. At the current Point will be only a default Layout or a custom layout that the developer will create. Everything will be hard-coded it but the mechanism should exist to serve the extensibility requirement
-
Minimal configuration from developer's perspective to show the Form. Just a starting point for a developer to show the Form in the Page Something like : new SimpleForm({ layout: 'myForm' }) if no layout is specified a default predefined layout should be shown.
The idea is to create Each of those Parts and be based on patterns having in mind the extensibility.