Consider making a library

[Stouffi]

Hi!

I just open this issue to know if you would mind create a library based on the codebase you ported from purescript.

The context of my issue is that I have been struggling a long time building forms with typescript and the ant design library (could be another though) and I was trying to find or create a better solution than that other libraries do like Formik.

As we use a lot fp-ts in our projects and by luck, one of my coworker has stumble upon your repo suggested in the explore area of his github homepage :)

I decided to try the solution of using an Applicative Functor to achieve form composition. And I have been convinced of its benefits: Being able to compose together both the validation and the UI of a simple form to assemble more complex forms is really what I was looking for.

I have reworked a solution based on both Lumi and your port for internal use. Basically I have added combinators to allow validation using io-ts Types which can be very useful for codebase that use validation at system boundaries (API response, LocalStorage, and so on). Reusing io-ts Type for both form result validation and response from an API become possible. Also I have added with the help of Lumi codebase some combinators to build several form controls like a simple Select or a more complex Search Autocomplete control with a remote data.

So what I am thinking about is we could have all this logic of building forms tied to a UI library (react) alongside several collections of form controls tied to a components library (ant design, basic html, material, etc.) and of course collections of validation combinators and bindings with io-ts and io-ts-types (like NonEmptyString).

What do you think?

[Willmo36]

Hey there, thank you for reaching out!

It's nice to hear others have found this useful, I'm also using Formik + fp-ts at work!

My experience using this approach leads me to believe few missing features. For example; I had quite an adventure supporting dynamic form children in my codebase I'm using this in (I was planning on updating the examples with the Map based approach I got to in the end). Additionally implementing the debouncing Arthur Xavier mentioned in his original post is something I'd like to explore as it's pretty render heavy. A further quirk I've found in usage with React is focus dropping which I solved with a less elegant API.

So there's work to be done to solve common form cases in respect to the idea we're trying to follow (maybe Lumi's PS implementation does have all the answers). Publishing today, for example, would not be a fully complete form library in my opinion and I would not want to publish it promising that it is.

Having acknowledge there are shortcomings, I am happy to turn this is into a library in its current state for others to expand upon (myself included!). Perhaps a v0.x based on the current code first (README, comments, tests, publishing etc)? I'll look into how other fp-ts ecosystem libs are setup and take few days to do all this.

I'm very interested in the RemoteData example you mentioned and io-ts validation approach sounds like a great idea. Could you share these?

[Willmo36]

@Stouffi Existing code published under a new name; fp-ts-form (form-ts was taken)

[Stouffi]

@Willmo36 great! From my side I have collected stuff I've made for a private project in this repo: https://github.com/Stouffi/fp-ts-form-wip

There is one implementation of a Search field which uses rxjs internally to manage debouncing and subscription. There are also some utility function to provide an io-ts Type as Validator. I have also added a fixed type to manage some form options.

export interface FormState {
  showErrorsAfterSubmit: boolean
  submitted: boolean
}

Because I had a use case where I wanted validation errors shown only after the user did submit the form.

Finally I had written tests for Form with the ado-notation and Validator. So I've included them in the repo.