Valleform NPM | npm.io

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:

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

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 mode example

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 mode example

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 mode example

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.