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.

Write

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

... and build:

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 features.
  • All valle-select features.
  • All 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.

Environment dependencies

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

• valle-input
• valle-select
• valle-speed-dial

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:

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:

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:

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