https://github.com/quavedev/forms
Create Formik forms automatically from a quave:definitions schema object.
https://github.com/quavedev/forms
Last synced: 9 months ago
JSON representation
Create Formik forms automatically from a quave:definitions schema object.
- Host: GitHub
- URL: https://github.com/quavedev/forms
- Owner: quavedev
- Created: 2021-01-24T21:00:56.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-08-20T02:00:48.000Z (almost 5 years ago)
- Last Synced: 2025-02-27T21:45:25.114Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 169 KB
- Stars: 0
- Watchers: 16
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# quave:forms
Quickly create a form by only passing it's `definition`. The definition object
has to be created using our
[definitions](https://github.com/quavedev/definitions) meteor package. This
package serves *practicity*. If you wish to standardize the forms of your
application or quickly make an admin dashboard, this is the package for you.
## Dependencies
This package has these `npm` depencies. They're not enforced because this could
cause [some problems](https://guide.meteor.com/writing-atmosphere-packages.html#peer-npm-dependencies)
.
* `formik`
* `react`
* `simpl-schema`
Also, it depends on the meteor package `quave:definitions`. Installation
instructions [here](https://github.com/quavedev/definitions#installation).
## Installation
```bash
meteor add quave:forms
```
## Quickstart
Pass a handler to `onSubmit` prop, the initial values to the `initialValues`
prop and a definition to the `definition` prop. *Voilà*! You got yourself a
form.
```javascript
// Import
import { Form } from 'meteor/quave:forms';
// Use the Form component
```
The `Form` component can accept any of the properties of the
[Formik](https://formik.org/docs/api/formik) component, plus these:
* `definition`: object definition from our
[definitions](https://github.com/quavedev/definitions) package.
* `submitLabel`: defaults to *SUBMIT*. It's used as child of the submit button.
* `buttonComponent`: defaults to ``. The component used for buttons.
`type="submit"` is passed as prop.
* `definitionToComponent`: a function that receives `(fieldDefinition,
fieldName)` as arguments and return a
[Formik compatible](https://formik.org/docs/api/field#component) component to
be used for that field. `fieldDefinition` is the content of the `fields`
property of the definition passed as prop (`definition.fields`).
* `actionButtons`: an array of objects with `label` and `handler` properties.
`label` will be passed as a child of the button component and `handler` is a
function to be called when the `onClick` event is triggered. It calls
`e.preventDefault()` before calling the handler.
* `autoValidate`: defaults to `false`. Defines if `Form` should try to validate
the inputs automatically based on the schema. It has some limitations with
custom objects at the moment. It will work fine for simple definitions.
* `autoClean`: defaults to `true`. Defines if we should call Simple Schema's
[clean](https://github.com/aldeed/simpl-schema#explicitly-clean-an-object)
method before passing the values to the `onSubmit` handler.
* `isDebug`: defaults to `false`. When `true`, draws the form state bellow it
for debugging purposes.
* `fieldContainerStyle`: style passed to a `div` that encloses each field.
* `fieldContainerClassName`: class passed to a `div` that encloses each field.
* `buttonsContainerStyle`: style passed to a `div` that encloses all buttons.
* `buttonsContainerClassName`: class passed to a `div` that encloses all
buttons.
If you pass `style` or `className`, it will be forwarded to the `form`
component, working as the container for all fields and the buttons' container.
## Layout
If you want to layout your form I recommend using `grid` and `flex` on the
available styles/classNames. This is not yet optimized to be an easy task, but
you can do this once and apply to all your forms. Bellow is an example of how
the props will look in the final HTML document.
```html
Name
Birthday
Position
Choose one Position
GOLEIRO
LATERAL_DIREITO
LATERAL_ESQUERDO
ZAGUEIRO
VOLANTE
MEIA
ATACANTE
PONTA_DIREITA
PONTA_ESQUERDA
```
### Default Layout
Our default layout is decent (I think). You may take a look at the
`defaultStyles` object at the top of the `definitionToComponent.js` file.