feat: new JSV design

[mallachari]

Resolves https://github.com/stoplightio/elements/issues/657 New JSE multi-row design replacing ui-kit with mosaic components.

Description and validations are displayed within a row and row height is calculated based on its number.

The naming format of validations is subject of different issue so I just put them the way they are in schema using similar method they are displayed in Elements. Number validations could be moved next to property and type.

Object types are displayed same way they were previously. The final goal is to include a dropdown next to type and allow selecting and displaying proper type but that's out of scope of this issue.

The remaining problem is multiline description and wrapped elements in validations that should make the row grow dynamically depending on their size - though there's separate issue for that.

[philsturgeon]

Amazing! So this is solving stoplightio/elements#657 and just happens to do a little bit of stoplightio/elements#667 and stoplightio/elements#668 but is leaving them to be finished separately?

Fantastic, works for me.

[mallachari]

Amazing! So this is solving #657 and just happens to do a little bit of #667 and #668 but is leaving them to be finished separately?

It does do part of #668 as those validations have big impact on way of rendering rows.

667 is separate thing (and quite complex one) so I just mentioned here that handling and displaying multitypes will change, but it's not touched here.

[philsturgeon]

Ok great, because an end goal for this epic will be to have no more oneOf, anyOf, or OpenAPI keywords showing here at all.

Keep up the awesome work!

[mallachari]

Not reviewing the entire thing or anything - but just dropped some comments re canonical usage of Mosaic for the first few files I looked at. We should start removing usage of tailwind classes as much as possible - instead opting for the typed props available on most mosaic components. Of course there are still areas we have to use tailwind classes, that's ok - but eventually we're going to want to remove ui-kit which means no non prefixed tailwind classes.

You can find a list of most of the core style props at https://mosaic.vercel.app/docs/style-props.

Yup, I'm doing that in my next comit. I just shared first draft so it could be checked.

[mallachari]

@marcelltoth speaking of ui-kit removal, I've noticed that TreeList component is using it as a peer dependency so even though we don't use it anymore we still need to keep that dependency or at least document its requirement.

[stoplight-bot]

:tada: This PR is included in version 4.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: