form

React component for convert the valle screens-api data structure to forms

Apr 06, 2021
React component for convert the valle screens-api data structure to forms

valleForm

React component for convert the valle screens-api data structure to web component based forms.

View Demo View Github

Write

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

... and build:

overview

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.
  • 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.

Environment dependencies

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


Installation

1 - Download the latest release.

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


Usage

Registration mode

  • Mounts all fields.
  • Allow POST with all values and custom params.
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


View mode

  • Mounts all fields with values.
  • Allow edit mode for submit a update.
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


Edit mode

  • Mounts all fields with values.
  • Allow UPDATE and DELETE for any consulting.
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


Props

  • tabs (array) - All form tabs with rows using the valle data structure.
  • buttons (array) - All form buttons using the valle 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.

Development

Install dependencies

$ 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.
  • yarn test - run all specs.
  • yarn test:tdd - run all specs and watch.
  • yarn test:coverage - run all specs and coverage.
  • yarn lint:js - lint all files searching for errors.
  • yarn lint:fix - fix some lint errors.

GitHub

https://github.com/valleweb/valleForm

Recommended