# valleform

> Valle forms made with easy.

Latest version **1.45.0** (published 2022-05-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install valleform
pnpm add valleform
yarn add valleform
bun add valleform
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.45.0 |
| Published | 2022-05-02 |
| First published | 2018-08-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 14 |
| Unpacked size | 5.8 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | afonsopacifer |
| Maintainers | afonsopacifer |
| Keywords | react, component, es6, storybook, babel, webpack |

## Links

- npm: https://www.npmjs.com/package/valleform
- Repository: https://github.com/lyef/valleForm
- Homepage: https://github.com/lyef/valleForm#readme
- Issues: https://github.com/lyef/valleForm/issues
- npm.io page: https://npm.io/package/valleform

## Dependencies (14)

- [react](https://npm.io/package/react.md) ^16.9.0
- [nanoid](https://npm.io/package/nanoid.md) ^3.1.16
- [shortid](https://npm.io/package/shortid.md) ^2.2.15
- [react-dom](https://npm.io/package/react-dom.md) ^16.9.0
- [file-saver](https://npm.io/package/file-saver.md) ^2.0.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [remark-gfm](https://npm.io/package/remark-gfm.md) ^1.0.0
- [gapi-script](https://npm.io/package/gapi-script.md) ^1.0.2
- [markdown-it](https://npm.io/package/markdown-it.md) ^12.2.0
- [react-markdown](https://npm.io/package/react-markdown.md) ^5.0.0
- [@valle/valle-card](https://npm.io/package/@valle/valle-card.md) ^1.0.0
- [@valle/valle-input](https://npm.io/package/@valle/valle-input.md) ^2.7.0
- [@valle/valle-select](https://npm.io/package/@valle/valle-select.md) ^1.5.0
- [@valle/valle-speed-dial](https://npm.io/package/@valle/valle-speed-dial.md) ^1.0.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.45.0 (latest) — 2022-05-02
- 1.44.0 — 2022-04-05
- 1.43.8 — 2022-03-08
- 1.43.7 — 2022-02-25
- 1.43.6 — 2022-02-10
- 1.43.5 — 2021-12-16
- 1.43.1 — 2021-12-07
- 1.43.0 — 2021-12-07
- 1.42.0 — 2021-12-07
- 1.41.0 — 2021-12-07
- 1.40.4 — 2021-11-05
- 1.40.3 — 2021-11-04
- 1.40.2 — 2021-10-19
- 1.40.1 — 2021-10-19
- 1.40.0 — 2021-10-15
- … 128 more at https://npm.io/package/valleform/versions

## README

# valleForm

*[React](https://reactjs.org/) component for convert the valle [screens-api data structure](https://github.com/valleweb/valle-screen-data-structure) to web component based forms.*

[![npm](https://img.shields.io/npm/v/valleform.svg)](https://www.npmjs.com/package/valleform)
[![dependencies Status](https://david-dm.org/valleweb/valleform/status.svg)](https://david-dm.org/valleweb/valleform)

***Write***

```jsx
<valleForm
    tabs = { [...] }
    buttons = { [...] }
    baseApi = ''
    canonicalApi = ''
    params = { {...} }
/>
```

***... and build:***

![valleForm overview](docs/overview.gif)

## Table of contents

- [Features](#features)
- [Environment dependencies](#environment-dependencies)
- [Installation](#installation)
- [Usage](#usage)
    - [Registration mode](#registration-mode)
    - [View mode](#view-mode)
    - [Edit mode](#edit-mode)
    - [Props](#props)
- [Development](#development)
    - [Tasks](#tasks)
    - [Architecture](#architecture)
- [Versioning](#versioning)
- [Contributing](#contributing)
- [History](#history)
- [License](#license)

<hr>

## Features

- Mounts `forms` with infinite `fields` combinations easy.
- Mounts `fields` with specific `validations` easy.
- Mounts dynamic actions for `Rest` integrations (`Post` | `Put` | `Delete`).
- `Registration` mode for dynamic `CREATE`.
- `View` mode for dynamic vizualization.
- `Edit` mode for dynamic `UPDATE` and `DELETE`.
- `Read only` automatic for all fields.
- `a11y` forms (by valle web components).
- `Responsive` forms.
- Dynamic speed dial buttons.
- Inherited features.
	- All [valle-input](https://github.com/valleweb/valle-input) features.
	- All [valle-select](https://github.com/valleweb/valle-select) features.
	- All [valle-speed-dial](https://github.com/valleweb/valle-speed-dial) features.
- Switch button for toggle `visible_screen` fields.
- User feedbacks:
	- Snackbar report for all fields `validation`.
	- Snackbar report for `CREATE` submit `success`.
	- Snackbar report for `CREATE` submit `error`.
	- Snackbar report for `UPDATE` submit `success`.
	- Snackbar report for `UPDATE` submit `error`.
	- Snackbar report for `DELETE` submit `success`.
	- Snackbar report for `DELETE` submit `error`.
- Keyboard controls:
	- Press `enter` for submit form.

<hr>

## Environment dependencies

Verify if you have this valle web components avaible in your project.

- [valle-input](https://github.com/valleweb/valle-input)
- [valle-select](https://github.com/valleweb/valle-select)
- [valle-speed-dial](https://github.com/valleweb/valle-speed-dial)

<hr>

## Installation

1 - [Download](https://github.com/valleweb/valleForm/releases) the latest release.

2 - Import the styles on `css/main.css` folder to your project.

<hr>

## Usage

### Registration mode

- Mounts all `fields`.
- Allow `POST` with all values and custom `params`.

```jsx
import valleForm from './<path>/valleForm';

...
render() {
    return (
        <valleForm
            tabs = { equipamentos }
            buttons = { equipamentos.buttons }
            baseApi = 'http://localhost:3000/'
            canonicalApi = 'api/equipamentos'
            params = { {empresa: '', estabelecimento: ''} }
        />
    );
}
...
```

**Result:**

![Registration mode example](docs/registration.gif)

<hr>

### View mode

- Mounts all `fields` with `values`.
- Allow `edit mode` for submit a `update`.

```jsx
import valleForm from './<path>/valleForm';

...
render() {
    return (
        <valleForm
            tabs = { equipamentos.lines }
            buttons = { equipamentos.buttons }
            baseApi = 'http://localhost:3000/'
            canonicalApi = 'api/equipamentos'
            params = { {empresa: '', estabelecimento: ''} }
            values = { {valuesObj} }
            _id = '123'
            readOnly
        />
    );
}
...
```

**Result:**

![View mode example](docs/view.gif)

<hr>

### Edit mode

- Mounts all `fields` with `values`.
- Allow `UPDATE` and `DELETE` for any consulting.

```jsx
import valleForm from './<path>/valleForm';

...
render() {
    return (
        <valleForm
            tabs = { equipamentos }
            buttons = { equipamentos.buttons }
            baseApi = 'http://localhost:3000/'
            canonicalApi = 'api/equipamentos'
            params = { {empresa: '', estabelecimento: ''} }
            values = { {valuesObj} }
            _id = '123'
            readOnly
        />
    );
}
...
```

**Result:**

![Edit mode example](docs/edit.gif)

<hr>

### Props

- `tabs` (array) - All form tabs with rows using the [valle data structure](https://github.com/valleweb/valle-screen-data-structure).
- `buttons` (array) - All form buttons using the [valle data structure](https://github.com/valleweb/valle-screen-data-structure).
- `baseApi` (string) - Base API url for RESTFul.
- `canonicalApi` (string) - Canonial API url for RESTFul.
- `params` (object) - Custom params that are added to all requests.
- `values` (object) - All values for populate a view/edit form.
- `_id` (string) - Unique Identifier for `UPDATE` and `DELETE`.
- `token` (string) - JWT for requests authorization.
- `readOnly` (boolean) - Make all fiels read only.

<hr>

## Development

### Install dependencies

```sh
$ yarn
```

### Tasks

* `yarn start` - launch storybook to develop your component.
* `yarn build` - build component to external use.
* `yarn pub` - build and publish the component to npm.
* `yarn storybook` - launch storybook to develop your component.
* `yarn build-storybook` - build an static storybook to `.out` folder.
* `yarn deploy-storybook` - build and deploy a storybook with component to gh-pages.
* <s>`yarn test` - run all specs.</s>
* <s>`yarn test:tdd` - run all specs and watch.</s>
* <s>`yarn test:coverage` - run all specs and coverage.</s>
* `yarn lint:js` - lint all files searching for errors.
* <s>`yarn lint:fix` - fix some lint errors.</s>

### Architecture

We've developed this component using the following boilerplate:
[lyef-react-component](https://github.com/lyef/lyef-react-component).

<hr>

## Versioning

To keep better organization of releases we follow the [Semantic Versioning 2.0.0](http://semver.org/) guidelines.

<hr>

## Contributing

Find on our [issues](https://github.com/valleweb/valleForm/issues/) the next steps of the project ;)
<br>
Want to contribute? [Follow these recommendations](https://github.com/valleweb/valleForm/blob/master/CONTRIBUTING.md).

<hr>

## History

See [Releases](https://github.com/valleweb/valleForm/releases) for detailed changelog.

<hr>

## License

[MIT License](https://github.com/valleweb/valleForm/blob/master/LICENSE.md) @ valleweb

---
_Source: https://npm.io/package/valleform · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._