Implement forms row layout

[pinussilvestrus]

Closes #560
Depends on bpmn-io/properties-panel#230

Check out the demo here.

---

This includes

• Add Carbon grid under the hood
• Support columns in the viewer
• Refactor dragging into module
• Support columns in the editor
• Validating rows restrictions
  • prevent overflows: maximum 16 columns per row
  • maximum 4 fields per row

(Potential) follow ups

• Implement form field resizing on the grid #566
• Show columns on the grid (editor) #569
• Selection behavior of rows #571
• Redesign of delete field icon #572

[pinussilvestrus]

@RomanKostka I made some adjustments, let me know what you think.

the drag row icon could have a larger area.
it is really hard to hit it with the mouse at the moment. An area like this would be super nice

I fixed that by giving the area a bit more space (32x32px).

when changing the state of a component from idle to dragged it seems that the component + border is jumping a bit around (~1 or 2 px) - not sure why this happens but it would be so clean if that would not happen.

This is not super easy to fix as a) the drop preview is a fixed element with fixed styles, and b) the form fields are different in their styling. I would not go for implementing drop previews for each individual form element, but I adjusted the height and margins so that it shouldn't jump around now. Still, it could not be super perfect on some occasions.

i realised that the drop-preview of single components has a different height then the standard component. would be nice if we match the drop-preview to the standard height. currently it produces some weird look and feel

This is fixed with the preview adjustments mentioned above

when trying to place components into 'full' rows the 'not-able-to-drop' indicator is jumping around unexpectedly

dragula decides where to place the drop previews given on some coordinates calculation. I am not sure whether we can make this even more fine graines so I guess we have to deal with that.

[vsgoulart]

A small problem I found:

The cursor seems to be a bit weird, it only shows the dragging cursor if you grab on the left icon for the entire row. I think it should be any time you drag any element

[RomanKostka]

awesome!

i found some small misalignments:

1. the drop preview area is now off to the left side - could be because of the larger drag row indicator?
   

2. the drop preview border is overlapping with the select border - not important but a detail i saw
   

3. (future topic) we should have a look into the sizes of each component. It feels weird having elements with different sizes when they still need the same visual space in a row.
   

[pinussilvestrus]

The cursor seems to be a bit weird, it only shows the dragging cursor if you grab on the left icon for the entire row. I think it should be any time you drag any element

I think this makes sense, the only thing I could imagine is that it's quite weird that for most of the canvas, the dragging cursor will be active now. But semantic-wise, it makes much sense. /cc @RomanKostka

[pinussilvestrus]

@vsgoulart @RomanKostka I pushed some changes and adjusted most of the things you mentioned (otherwise, I left a comment). Let's hope we can merge it now 👍 (note that we will have chances for visual updates anyway with the follow-ups).

[RomanKostka]

looks good to me - lets iterate on the visuals after the release.

two things we should take care of in next iterations:
the 'not allowed' curser disappears for some components.
also the space between the rows seem a bit large and could be reduced.

Screen.Recording.2023-03-28.at.12.36.52.mov

[pinussilvestrus]

also the space between the rows seem a bit large and could be reduced.

I reduced it a bit, still, we need some space to make it easy to drag between rows.

For the cursor problem I opened a follow up: #576