search

json-tools / json-schema

JSON Schema draft-6 implementation for elm.
http://package.elm-lang.org/packages/1602/json-schema/latest
BSD 3-Clause "New" or "Revised" License
32 stars 3 forks source link

Demo forms generator #21

Closed 1602 closed 6 years ago

dhruvio commented 6 years ago

Is there a demo form generator available using this package?

1602 commented 6 years ago

Not at the moment. It seems like it has been ceased during some of the cleanups. I'll restore and let you know in this issue.

dhruvio commented 6 years ago

Sounds good, and thank you!

1602 commented 6 years ago

Hey @dhruvio , it's been a long time, so I wanted to provide an update on this. Unfortunately old (ceased) form generator update was not feasible to update, because json-schema advanced quite far since first iteration on forms generator and supports all features of JSON Schema, like allOf, anyOf, oneOf which make form generation considerably difficult, so I decided to take my time and implement form generation demo from scratch. It is work in progress, final result will close to something like that:

image

Please, forgive some badness in styling and example content, this is a very work in progress screenshot. The idea is that you see json schema editor on the left and a result on the right. Both sides rendered using form generator based on JSON Schema draft 6.

Note that this is not just a demo, but also a reusable component, which takes Value and Schema and renders form using material design guidelines.

This is a deviation from the initial idea for this demo to be a code snippet which could be reused rather than a dependency. This pivot has been made because of grown complexity of "snippet", which depends on complexity of JSON Schema standard.

If you have any ideas regarding demo capabilities or for component in general, please let me know, this is the right time to influence further direction of this piece of software. Thank you!

norpan commented 6 years ago

It may be worthwhile to look at how it's done at https://github.com/mozilla-services/react-jsonschema-form. We are using this component successfully embedded in Elm, but it would of course be great to have a pure Elm solution.

Basically, what they have is JSON schema, and an additional "uiSchema" that have more information about how the form should look, as there is not always a unique choice to be made for the fields.

dhruvio commented 6 years ago

Let me know how I can help @1602

1602 commented 6 years ago

@dhruvio thank you kindly.

I realised I took a wrong turn down the road, by choosing both style-elements and google's material design as a stack for this demo. It is technically possible to make them work together, but it has taken too much of my energy allocated for this task. So, as a next step I wanted to rollback to native html module, using BEM as stylesheet coding style, and rewrite the whole thing from ground up.

So, what I'm saying is that current codebase could be used as an example of most of the cases that needs to be covered in attempt to implement forms generation based on json schema, but whole view layer should be scraped.

I planned to dedicate some time this weekend to start this thing over, so if you have time and passion to work on this, we could catch up afterwards.

1602 commented 6 years ago

A quick status update here. I've started rewriting and covered basics:

Demo looks like this: image

Published in gh-pages: https://1602.github.io/json-form/

Next steps will be some of those (not necessarily in this order):

I'm going to close this issue, further feedback on json-form is very welcome here: https://github.com/1602/json-form