question: new material-mobx-react-form library?

[simpixelated]

First of all, huge thanks to you @foxhound87 for making this library. I just started using it and it was a great experience. I'd like to replace my usage of formsy-react/formsy-material-ui with your library. I'm thinking about creating a new repo similar to formsy-material-ui, but instead combining material-ui and mobx-react-form. I was planning to do this internally, but I thought it would make sense to create a public repo/npm package that maybe someone else can use.

My overall goal would be to create a library of material-ui components that can be passed a mobx-react-form field and automatically update the errorText, etc.

I was planning to start with the code you've already written in this demo:

• https://github.com/foxhound87/mobx-react-form-demo/blob/master/src/components/inputs/MaterialTextField.jsx
• https://github.com/foxhound87/mobx-react-form-demo/blob/master/src/components/inputs/MaterialToggle.jsx

Usage would be just like in your demo code:

<MaterialTextField field={form.$('fieldName')} />

My questions are:

• is there any reason I should not do this?
• are there any specific naming conventions or code conventions for mobx-react-form that I should be aware of when creating these wrapped components?
• when creating the demo, did you run into any hiccups with material-ui that I should know before I start?

[foxhound87]

Hi @simpixelated

I'm very interested to develop custom react components compatible with mobx-react-form. I think this can reduce the boilerplate and the weight of the bundle.

For example, I can have already started to use material-ui on a big project and I want to reduce the boilerplate, or I have to develop a small project and I want to use material-ui but I don't want to require the whole material-ui package, maybe I want a small set of text fields and a concise way to deal with styling, fieldsets and controls.

Another point of view can be to scale more and support others UI packages. So we can first create a generic mobx-react-form-components (which will have generic specs and can handle different kind of UI packages as plugins - as I have done with the validation packages).

In this way, anyone can also implement it's own components fully compatible with the mobx-react-form and mobx-react-form-components specs.

Imagine we can have specific plugins packages for each UI:

• Material-UI >>> mobx-react-form-components-material
• Grommet >>> mobx-react-form-components-grommet
• Elemental-UI >>> mobx-react-form-components-elemental
• React-Bootstrap >>> mobx-react-form-components-bootstrap
• Ant >>> mobx-react-form-components-ant
• or others...

initially we can start only supporting material-ui (so in the meantime we can focus on the generic specs) and develop the others packages afterwards when more users will begin to adopt this solution and ask for more integrations.

This can be very useful because I will never get all components I need from a single UI package, some components can be missing or broken or not working as we expect.

There are other points that should be considered, In summary they would be:

• modularize the support of the UI packages usable as plugins.
• support for SSR (server side rendering).
• props for easy inline/block and aligning components (without dealing with style).
• easy theming options and custom styles overriding (based on UI packages).
• ability to override some default props on the components of original UI packages.
• flexible, customizable and extensible form buttons and controls (submit, clear, reset, add, del) with options and actions.
• support for special actions (add/del) and special conditions (hide/show) for components blocks such as fieldsets and controls. (for example show that fieldset (with specific inputs) if the this checkbox is true, etc...).
• nice to have for quick CRUD development would be the ability to create form layouts defining inputs, validation and layout structure describing it in a simple javasacript object.
• follow the mobx-react-form naming conventions (we may discuss and align us during the development as I'm rethinking some apis for the next major release).
• follow the airbnb code style and automatic semantic-release.

Definitely I want to discuss the development in detail with you and anyone interested in the project.

If you want to reach me to chat, I'm available on this slack channel.

Thank You.

[simpixelated]

Wow, thanks for the lengthy reply! I like all of your suggestions. Here's what I'll do: I've created https://github.com/simpixelated/mobx-react-form-components-material and I'm going to focus on making it work for my app first as a proof of concept. As soon as you or someone else starts a spec for generic mobx-react-form-components, I'll do my best to match the spec and contribute as much as I can.