About forms

react.js form generation and validation libraries based on react-hook-form

N

Published by

README.md

Welcome to Forms 👋

:octocat: Monorepo exposing a set of form libraries we, BedrockStreaming, are using in our production react applications to handle dynamic forms generation and validation.

:package: Packages

@bedrockstreaming/form-builder :construction_worker:
@bedrockstreaming/form-validation-rule-list 🧑‍⚖️
@bedrockstreaming/form-redux :globe_with_meridians:
@bedrockstreaming/form-context :globe_with_meridians:

Why

The idea of this library came from the variety of requests our customers had in terms of forms. Thus, we wanted to be able to generate any form by simply passing some config and a dictionary of inputs to go with. As we were eager to keep some control over the process, but not willing to control the form state ourselves, we went with react-hook-form which has great capabilities. Unfortunately we were missing some features that we had to implement ourselves.

Complex validation with multiple visuals feedback (at the same time)
Steps handling

We believe that anyone using react could use our libraries to create and manage forms the way we do. We are still exposing - what we think are - the relevant parts of react-hook-form API so we think of the FormBuilder as an opinionated solution to industrialize forms across your application.

🤝 Contributing

First read the Contributing and Code of conduct sections.

:point_up: Note that this project was generated using Nx.

Getting started

Check each library's documentation.

To test each library development, we'll use the demo app and the docsite (dog-fooding strategy).

This project handles 4 libraries packages, which are used in two apps: demo and docsite (e2e apps are simply holding test code about those apps) The demo project is there to smoothe the dev experience The docsite project is the one used on https://bedrockstreaming.github.io/forms/

In order to start on the project, you can start with the demo project: yarn start demo

Generate an application

Run yarn nx g @nrwl/react:app my-app to generate an application.

You can use any of the plugins above to generate applications as well.

When using Nx, you can create multiple applications and libraries in the same workspace.

Generate a library

Run yarn nx g @nrwl/react:lib my-lib to generate a react library. Run yarn nx g @nrwl/react:web my-lib to generate a web library. Run yarn nx g @nrwl/react:node my-lib to generate a node library.

You can also use any of the plugins above to generate libraries as well.

Libraries are shareable across libraries and applications. They can be imported from @forms/mylib.

If you want the library to be publishable use:

yarn nx g @nrwl/react:lib my-lib --publishable --importPath="@bedrockstreaming/form-foo"

Development server

Run yarn nx serve my-app for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run yarn nx g @nrwl/react:component my-component --project=my-app to generate a new component.

Build

Run yarn nx build my-app to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run yarn nx test my-app to execute the unit tests via Jest.

Run yarn nx affected:test to execute the unit tests affected by a change.

Running end-to-end tests

Run yarn nx e2e my-app to execute the end-to-end tests via Cypress.

Run yarn nx affected:e2e to execute the end-to-end tests affected by a change.

Understand your workspace

Run yarn nx dep-graph to see a diagram of the dependencies of your projects.

Further help

Visit the Nx Documentation to learn more.

Contributors

This project follows the all-contributors specification.

_{Pierre Huyghe} 📖 💻 💡 🚧 🤔	_{Antoine Caron} 📖 💻 💡 🚧 🤔	_{Florent Dubost} 📖 💻 💡 🚧 🤔	_{renaudAmsellem} 📖 💻 💡 🚧 🤔	_jcoquet 📖 💻 💡 🚧 🤔	_UltiXstorm 📖 💻 🚧 🤔	_{Alves Mickaël} 📖 💻 🚧 🤔
_{Nicolas Castejon} 📖 💻 🚧 🤔	_{Maxime BOUNAAS-FERRET} 📖 💻 💡 🚧 🤔	_{Mehdi Kabab} 📖 💻 💡 🚧 🤔