https://github.com/bedrockstreaming/forms

react.js form generation and validation libraries based on react-hook-form
https://github.com/bedrockstreaming/forms

form-builder form-validation forms react react-hook-form

Last synced: 12 months ago
JSON representation

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

Host: GitHub
URL: https://github.com/bedrockstreaming/forms
Owner: BedrockStreaming
License: mit
Created: 2021-11-26T11:28:33.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2024-07-01T09:13:25.000Z (almost 2 years ago)
Last Synced: 2025-03-28T22:08:24.674Z (about 1 year ago)
Topics: form-builder, form-validation, forms, react, react-hook-form
Language: TypeScript
Homepage: https://bedrockstreaming.github.io/forms/
Size: 2.71 MB
Stars: 14
Watchers: 22
Forks: 2
Open Issues: 22
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

Welcome to Forms 👋

:octocat: Monorepo exposing a set of form libraries we, [BedrockStreaming](https://www.bedrockstreaming.com/), are using in our production react applications to handle dynamic forms generation and validation.

## :package: Packages

- [@bedrockstreaming/form-builder](libs/form-builder/README.md) :construction_worker:
- [@bedrockstreaming/form-validation-rule-list](libs/form-validation-rule-list/README.md) 🧑‍⚖️
- [@bedrockstreaming/form-redux](libs/form-redux/README.md) :globe_with_meridians:
- [@bedrockstreaming/form-context](libs/form-context/README.md) :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](https://react-hook-form.com/) 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](.github/CONTRIBUTING.md) and [Code of conduct](.github/CODE_OF_CONDUCT.md) sections.

:point_up: Note that this project was generated using [Nx](https://nx.dev).

### 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:

```bash
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/](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](https://jestjs.io).

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](https://www.cypress.io).

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](https://nx.dev) to learn more.

## Contributors

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification.