{"id":19961446,"url":"https://github.com/vwapplications/vwapp-react-form","last_synced_at":"2025-03-01T16:41:02.470Z","repository":{"id":82151655,"uuid":"255457564","full_name":"VWApplications/vwapp-react-form","owner":"VWApplications","description":"Campo para uso em projetos com a biblioteca react-final-form (React e ReactNative)","archived":false,"fork":false,"pushed_at":"2024-04-23T02:17:50.000Z","size":4169,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-24T08:31:14.237Z","etag":null,"topics":["bootstrap","components","fields","final-form","form","react","vwapp"],"latest_commit_sha":null,"homepage":"https://victordeon.github.io/vwapp-react-form/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/VWApplications.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-13T22:45:44.000Z","updated_at":"2020-11-08T18:37:11.000Z","dependencies_parsed_at":"2024-11-13T06:00:54.901Z","dependency_job_id":null,"html_url":"https://github.com/VWApplications/vwapp-react-form","commit_stats":null,"previous_names":["victordeon/vwapp-react-form"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VWApplications%2Fvwapp-react-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VWApplications%2Fvwapp-react-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VWApplications%2Fvwapp-react-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VWApplications%2Fvwapp-react-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VWApplications","download_url":"https://codeload.github.com/VWApplications/vwapp-react-form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241396733,"owners_count":19956404,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","components","fields","final-form","form","react","vwapp"],"created_at":"2024-11-13T02:07:31.805Z","updated_at":"2025-03-01T16:41:02.442Z","avatar_url":"https://github.com/VWApplications.png","language":"JavaScript","readme":"# vwapp-react-form\n\nComponentes relacionados a criação de formulários. Usado em conjunto com libs como [react-final-form](https://github.com/final-form/react-final-form), [redux-form](https://github.com/redux-form/redux-form) e [formik](https://github.com/jaredpalmer/formik).\n\nO mais aconselhado é o **react-final-form**.\n\n[![NPM](https://img.shields.io/npm/v/vwapp-react-form.svg)](https://www.npmjs.com/package/vwapp-react-form) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Instalação.\n\n```bash\nnpm install --save vwapp-react-form\n```\n\n## Uso\n\n```jsx\nimport React from 'react';\nimport { Form as FinalForm, Field } from 'react-final-form';\nimport { InputField, Fieldset, Json } from 'vwapp-react-form';\nimport { Form, Button } from 'react-bootstrap';\n\nclass Example extends Component {\n  __onSubmit = data =\u003e {\n    console.log(data);\n  }\n\n  __validate = values =\u003e {\n    const errors = {};\n\n    if (!values.first_name)\n      errors.first_name = \"Nome é obrigatório.\";\n\n    return errors;\n  }\n\n  render() {\n    return (\n      \u003cFinalForm\n        onSubmit={this.__onSubmit}\n        initialValues={{first_name: \"Pedro\"}}\n        validate={this.__validate}\n        render={({ handleSubmit, submitting, pristine, values }) =\u003e (\n          \u003cForm noValidate onSubmit={handleSubmit}\u003e\n            \u003cFieldset title=\"Formulário principal\"\u003e\n              \u003cForm.Row\u003e\n                \u003cForm.Group as={Col} md=\"12\"\u003e\n                  \u003cField\n                    column\n                    name=\"first_name\"\n                    placeholder=\"Primeiro Nome\"\n                    label=\"Primeiro Nome\"\n                    component={InputField}\n                  /\u003e\n                \u003c/Form.Group\u003e\n              \u003c/Form.Row\u003e\n            \u003c/Fieldset\u003e\n\n            \u003cJson values={values} /\u003e\n\n            \u003cButton variant=\"dark\" type=\"submit\" disabled={submitting || pristine}\u003eEnviar\u003c/Button\u003e\n          \u003c/Form\u003e\n        )}\n      /\u003e\n    )\n  }\n}\n\nexport default Example;\n```\n\n## Documentação\n\n### 1. InputField\n\nCampo de pequenos textos.\n\n#### Propriedades especificas:\n\n* **name**: Nome do atributo que irá ser populado pelo usuário. É esse atributo que irá para a submissão do formulário, ele deve ser único. (String - Obrigatório)\n\n* **id**: Identificado do campo no formulário. (String - Para o CheckField é obrigatório, para os outros ele é o atributo name.)\n\n* **label**: Label que acompanhará o input. (String - Opcional)\n\n* **component**: Componente do input. É aqui que fica os componentes citados acima. (Component - Obrigatório.)\n\n* **disabled**: Desativa o component. (Booleano - Opcional)\n\n* **className**: Conjunto de classes dos campos. (String - Opcional)\n\n* **column**: Faz a label ficar em cima do campo. (Booleano - defaul false)\n\n* **placeholder**: Leve descrição do campo. (String - Opcional)\n\n* **size**: Tamanho do input: \"sm\", \"md\", \"lg\". (String - padrão \"mg\")\n\n* **readOnly**: Fazer o campo ser um texto só de leitura. (Booleano - default false)\n\n#### Exemplo:\n\n```jsx\n\u003cForm noValidate onSubmit={handleSubmit}\u003e\n  \u003cForm.Row\u003e\n    \u003cForm.Group as={Col} md=\"12\" controlId=\"formFirstName\"\u003e\n      \u003cField\n        column\n        name=\"first_name\"\n        placeholder=\"Primeiro Nome\"\n        label=\"Primeiro Nome\"\n        component={InputField}\n      /\u003e\n    \u003c/Form.Group\u003e\n  \u003c/Form.Row\u003e\n\n  \u003cButton variant=\"dark\" type=\"submit\" disabled={submitting || pristine}\u003eEnviar\u003c/Button\u003e\n\u003c/Form\u003e\n```\n\n### 2. InputGroupField\n\nCampo de pequenos textos com componentes laterais.\n\n#### Propriedades especificas:\n\n* **name**: Nome do atributo que irá ser populado pelo usuário. É esse atributo que irá para a submissão do formulário, ele deve ser único. (String - Obrigatório)\n\n* **id**: Identificado do campo no formulário. (String - Para o CheckField é obrigatório, para os outros ele é o atributo name.)\n\n* **label**: Label que acompanhará o input. (String - Opcional)\n\n* **component**: Componente do input. É aqui que fica os componentes citados acima. (Component - Obrigatório.)\n\n* **disabled**: Desativa o component. (Booleano - Opcional)\n\n* **className**: Conjunto de classes dos campos. (String - Opcional)\n\n* **column**: Faz a label ficar em cima do campo. (Booleano - defaul false)\n\n* **placeholder**: Leve descrição do campo. (String - Opcional)\n\n* **left**: Insere componentes do lado esquerdo do input. Por exemplo: ```InputGroup.Text```. (Component - Opcional)\n\n* **right**: Insere componentes do lado direiro do input. Por exemplo: ```Button```. (Component - Opcional)\n\n#### Exemplo:\n\n```jsx\n\u003cForm noValidate onSubmit={handleSubmit}\u003e\n  \u003cForm.Row\u003e\n    \u003cForm.Group as={Col} md=\"6\" controlId=\"formLastName\"\u003e\n      \u003cField\n        column\n        name=\"last_name\"\n        placeholder=\"Último Nome\"\n        label=\"Último Nome\"\n        left={\u003cInputGroup.Text\u003e$\u003c/InputGroup.Text\u003e}\n        right={\n          \u003cDropdownButton\n            variant=\"outline-secondary\"\n            title=\"Dropdown\"\n            id=\"input-group-dropdown-1\"\u003e\n            \u003cDropdown.Item onClick={() =\u003e console.log(\"Action 1\")}\u003eAction 1\u003c/Dropdown.Item\u003e\n            \u003cDropdown.Item onClick={() =\u003e console.log(\"Action 2\")}\u003eAction 2\u003c/Dropdown.Item\u003e\n            \u003cDropdown.Divider /\u003e\n            \u003cDropdown.Item onClick={() =\u003e console.log(\"Action 3\")}\u003eAction 3\u003c/Dropdown.Item\u003e\n          \u003c/DropdownButton\u003e\n        }\n        component={InputGroupField}\n      /\u003e\n    \u003c/Form.Group\u003e\n  \u003c/Form.Row\u003e\n\n  \u003cButton variant=\"dark\" type=\"submit\" disabled={submitting || pristine}\u003eEnviar\u003c/Button\u003e\n\u003c/Form\u003e\n```\n\n### 3. CheckField\n\nCampos de checkbox, switch e radio\n\n#### Propriedades especificas:\n\n* **name**: Nome do atributo que irá ser populado pelo usuário. É esse atributo que irá para a submissão do formulário, ele deve ser único. (String - Obrigatório)\n\n* **id**: Identificado do campo no formulário. (String - Para o CheckField é obrigatório, para os outros ele é o atributo name.)\n\n* **label**: Label que acompanhará o input. (String - Opcional)\n\n* **component**: Componente do input. É aqui que fica os componentes citados acima. (Component - Obrigatório.)\n\n* **disabled**: Desativa o component. (Booleano - Opcional)\n\n* **className**: Conjunto de classes dos campos. (String - Opcional)\n\n* **column**: Faz a label ficar em cima do campo. (Booleano - defaul false)\n\n* **inline**: Coloca o conjunto de campos com esse atributo na horizontal. (Booleano - Opcional)\n\n* **type**: Tipo do input. (String - Obrigatória)\n\n  - **checkbox**: Input do tipo checkbox, retorna true ou false.\n  - **radio**: Input do tipo radio, retorna o valor inserido no atributo **value** do radio.\n  - **switch** Input do tipo switch, retorna true ou false.\n\n#### Exemplo:\n\n```jsx\n\u003cForm noValidate onSubmit={handleSubmit}\u003e\n  \u003cForm.Row\u003e\n    \u003cForm.Group as={Col} md=\"4\" controlId=\"formCheckbox\"\u003e\n        \u003cField\n          name=\"check\"\n          type=\"checkbox\"\n          label=\"Teste Checkbox\"\n          id=\"check\"\n          component={CheckField}\n        /\u003e\n        \u003cField\n          name=\"switch\"\n          type=\"switch\"\n          label=\"Teste Switch\"\n          id=\"switch\"\n          component={CheckField}\n        /\u003e\n      \u003c/Form.Group\u003e\n\n      \u003cForm.Group as={Col} md=\"4\" controlId=\"formRadioButton\"\u003e\n        \u003cField\n          name=\"choice\"\n          type=\"radio\"\n          label=\"Teste Radio 01\"\n          value=\"teste01\"\n          id=\"radio1\"\n          component={CheckField}\n        /\u003e\n        \u003cField\n          name=\"choice\"\n          type=\"radio\"\n          label=\"Teste Radio 02\"\n          value=\"teste02\"\n          id=\"radio2\"\n          component={CheckField}\n        /\u003e\n      \u003c/Form.Group\u003e\n  \u003c/Form.Row\u003e\n\n  \u003cButton variant=\"dark\" type=\"submit\" disabled={submitting || pristine}\u003eEnviar\u003c/Button\u003e\n\u003c/Form\u003e\n```\n\n### 4. SelectField\n\nCampo de seleção e seleção multipla\n\n#### Propriedades especificas:\n\n* **name**: Nome do atributo que irá ser populado pelo usuário. É esse atributo que irá para a submissão do formulário, ele deve ser único. (String - Obrigatório)\n\n* **id**: Identificado do campo no formulário. (String - Para o CheckField é obrigatório, para os outros ele é o atributo name.)\n\n* **label**: Label que acompanhará o input. (String - Opcional)\n\n* **component**: Componente do input. É aqui que fica os componentes citados acima. (Component - Obrigatório.)\n\n* **disabled**: Desativa o component. (Booleano - Opcional)\n\n* **className**: Conjunto de classes dos campos. (String - Opcional)\n\n* **column**: Faz a label ficar em cima do campo. (Booleano - defaul false)\n\n* **placeholder**: Leve descrição do campo. (String - Opcional - defalt \"Selecione uma opção\")\n\n* **size**: Tamanho do input: \"sm\", \"md\", \"lg\". (String - padrão \"mg\")\n\n* **options**: Lista de opções. (Lista de Objetos (title, value) - Obrigatório)\n\n* **type**: É obrigatório colocar o type como \"select\" nesse input. (String - Obrigatório - valor \"select\")\n\n* **multiple**: Transforma o select em escolhas multiplas. (Booleano - default false)\n\n#### Exemplo:\n\n```jsx\n\u003cForm noValidate onSubmit={handleSubmit}\u003e\n  \u003cForm.Row\u003e\n    \u003cForm.Group as={Col} md=\"4\" controlId=\"formSelect\"\u003e\n        \u003cField\n          column\n          multiple\n          name=\"multiselect\"\n          type=\"select\"\n          label=\"Selecione as melhores opções\"\n          options={[\n            {title: \"1\", value: 1},\n            {title: \"2\", value: 2},\n            {title: \"3\", value: 3},\n            {title: \"4\", value: 4},\n          ]}\n          component={SelectField}\n        /\u003e\n        \u003cLine /\u003e\n        \u003cField\n          name=\"select\"\n          type=\"select\"\n          placeholder=\"Selecione a melhor opção\"\n          options={[\n            {title: \"1\", value: 1},\n            {title: \"2\", value: 2},\n            {title: \"3\", value: 3},\n            {title: \"4\", value: 4},\n          ]}\n          component={SelectField}\n        /\u003e\n      \u003c/Form.Group\u003e\n  \u003c/Form.Row\u003e\n\n  \u003cButton variant=\"dark\" type=\"submit\" disabled={submitting || pristine}\u003eEnviar\u003c/Button\u003e\n\u003c/Form\u003e\n```\n\n### 5. TextAreaField\n\nCampo de grandes textos.\n\n#### Propriedades especificas:\n\n* **name**: Nome do atributo que irá ser populado pelo usuário. É esse atributo que irá para a submissão do formulário, ele deve ser único. (String - Obrigatório)\n\n* **id**: Identificado do campo no formulário. (String - Para o CheckField é obrigatório, para os outros ele é o atributo name.)\n\n* **label**: Label que acompanhará o input. (String - Opcional)\n\n* **component**: Componente do input. É aqui que fica os componentes citados acima. (Component - Obrigatório.)\n\n* **disabled**: Desativa o component. (Booleano - Opcional)\n\n* **className**: Conjunto de classes dos campos. (String - Opcional)\n\n* **column**: Faz a label ficar em cima do campo. (Booleano - defaul false)\n\n* **placeholder**: Leve descrição do campo. (String - Opcional)\n\n* **size**: Tamanho do input: \"sm\", \"md\", \"lg\". (String - padrão \"mg\")\n\n* **readOnly**: Fazer o campo ser um texto só de leitura. (Booleano - default false)\n\n* **rows**: Tamanho da caixa do campos. (Inteiro - Opcional)\n\n#### Exemplo:\n\n```jsx\n\u003cForm noValidate onSubmit={handleSubmit}\u003e\n  \u003cForm.Row\u003e\n    \u003cForm.Group as={Col} md=\"12\" controlId=\"formDescription\"\u003e\n      \u003cField\n        name=\"description\"\n        placeholder=\"Descrição\"\n        rows={5}\n        component={TextAreaField}\n      /\u003e\n    \u003c/Form.Group\u003e\n  \u003c/Form.Row\u003e\n\n  \u003cButton variant=\"dark\" type=\"submit\" disabled={submitting || pristine}\u003eEnviar\u003c/Button\u003e\n\u003c/Form\u003e\n```\n\n### 6. DateTimeField\n\nCampo de data e hora.\n\n#### Propriedades especificas:\n\n* **name**: Nome do atributo que irá ser populado pelo usuário. É esse atributo que irá para a submissão do formulário, ele deve ser único. (String - Obrigatório)\n\n* **id**: Identificado do campo no formulário. (String - Para o CheckField é obrigatório, para os outros ele é o atributo name.)\n\n* **label**: Label que acompanhará o input. (String - Opcional)\n\n* **component**: Componente do input. É aqui que fica os componentes citados acima. (Component - Obrigatório.)\n\n* **disabled**: Desativa o component. (Booleano - Opcional)\n\n* **className**: Conjunto de classes dos campos. (String - Opcional)\n\n* **column**: Faz a label ficar em cima do campo. (Booleano - defaul false)\n\n* **maxDate**: Data limite de inserção. Só funciona nos tipos **date** e **datetime**. (Date, Opcional)\n\n* **minDate**: Data mínima de inserção. Só funciona nos tipos **date** e **datetime**. (Date, Opcional)\n\n* **type**: Tipo do input. (String - Padrão \"datetime\")\n\n  - **date**: Inserir somente a data.\n  - **time**: Inserir somente a hora.\n  - **datetime**: Inserir hora e data.\n\n#### Exemplo:\n\n```jsx\n\u003cForm noValidate onSubmit={handleSubmit}\u003e\n  \u003cForm.Row\u003e\n    \u003cForm.Group as={Col} md=\"4\" controlId=\"formDateTime\"\u003e\n        \u003cField\n          column\n          name=\"datetime\"\n          label=\"Date e Hora:\"\n          type=\"datetime\"\n          minDate={new Date()}\n          component={DateTimePicker}\n        /\u003e\n      \u003c/Form.Group\u003e\n      \u003cForm.Group as={Col} md=\"4\" controlId=\"formDate\"\u003e\n        \u003cField\n          name=\"date\"\n          label=\"Data:\"\n          type=\"date\"\n          minDate={new Date()}\n          component={DateTimePicker}\n        /\u003e\n      \u003c/Form.Group\u003e\n      \u003cForm.Group as={Col} md=\"4\" controlId=\"formTime\"\u003e\n        \u003cField\n          name=\"time\"\n          label=\"Hora:\"\n          type=\"time\"\n          component={DateTimePicker}\n        /\u003e\n      \u003c/Form.Group\u003e\n  \u003c/Form.Row\u003e\n\n  \u003cButton variant=\"dark\" type=\"submit\" disabled={submitting || pristine}\u003eEnviar\u003c/Button\u003e\n\u003c/Form\u003e\n```\n\n### 7. ImageField\n\nCampo de imagens\n\n#### Propriedades especificas:\n\n* **name**: Nome do atributo que irá ser populado pelo usuário. É esse atributo que irá para a submissão do formulário, ele deve ser único. (String - Obrigatório)\n\n* **id**: Identificado do campo no formulário. (String - Para o CheckField é obrigatório, para os outros ele é o atributo name.)\n\n* **label**: Label que acompanhará o input. (String - Opcional)\n\n* **component**: Componente do input. É aqui que fica os componentes citados acima. (Component - Obrigatório.)\n\n* **disabled**: Desativa o component. (Booleano - Opcional)\n\n* **className**: Conjunto de classes dos campos. (String - Opcional)\n\n* **column**: Faz a label ficar em cima do campo. (Booleano - defaul false)\n\n* **type**: Tipo do input. (String - Obrigatória - valor \"file\")\n\n* **placeholder**: Leve descrição do campo. (String - Opcional)\n\n#### Exemplo:\n\n```jsx\n\u003cForm noValidate onSubmit={handleSubmit}\u003e\n  \u003cForm.Row\u003e\n    \u003cForm.Group as={Col} md=\"4\" controlId=\"formImage\"\u003e\n      \u003cField\n        name=\"image\"\n        type='file'\n        label=\"Imagem\"\n        placeholder=\"Clique aqui para inserir a imagem.\"\n        component={ImageField}\n      /\u003e\n    \u003c/Form.Group\u003e\n  \u003c/Form.Row\u003e\n\n  \u003cButton variant=\"dark\" type=\"submit\" disabled={submitting || pristine}\u003eEnviar\u003c/Button\u003e\n\u003c/Form\u003e\n```\n\n### 8. FileField\n\nCampo de arquivos\n\n#### Propriedades especificas:\n\n* **name**: Nome do atributo que irá ser populado pelo usuário. É esse atributo que irá para a submissão do formulário, ele deve ser único. (String - Obrigatório)\n\n* **id**: Identificado do campo no formulário. (String - Para o CheckField é obrigatório, para os outros ele é o atributo name.)\n\n* **label**: Label que acompanhará o input. (String - Opcional)\n\n* **component**: Componente do input. É aqui que fica os componentes citados acima. (Component - Obrigatório.)\n\n* **disabled**: Desativa o component. (Booleano - Opcional)\n\n* **className**: Conjunto de classes dos campos. (String - Opcional)\n\n* **column**: Faz a label ficar em cima do campo. (Booleano - defaul false)\n\n* **type**: Tipo do input. (String - Obrigatória - valor \"file\")\n\n* **placeholder**: Leve descrição do campo. (String - Opcional)\n\n#### Exemplo:\n\n```jsx\n\u003cForm noValidate onSubmit={handleSubmit}\u003e\n  \u003cForm.Row\u003e\n    \u003cForm.Group as={Col} md=\"4\" controlId=\"formFile\"\u003e\n      \u003cField\n          name=\"file\"\n          label=\"Arquivo:\"\n          type='file'\n          placeholder=\"Clique para inserir o arquivo.\"\n          component={FileField}\n        /\u003e\n      \u003c/Form.Group\u003e\n  \u003c/Form.Row\u003e\n\n  \u003cButton variant=\"dark\" type=\"submit\" disabled={submitting || pristine}\u003eEnviar\u003c/Button\u003e\n\u003c/Form\u003e\n```\n\n### 9. RangeField\n\nCampo de range númerico\n\n#### Propriedades especificas:\n\n* **name**: Nome do atributo que irá ser populado pelo usuário. É esse atributo que irá para a submissão do formulário, ele deve ser único. (String - Obrigatório)\n\n* **id**: Identificado do campo no formulário. (String - Para o CheckField é obrigatório, para os outros ele é o atributo name.)\n\n* **label**: Label que acompanhará o input. (String - Opcional)\n\n* **component**: Componente do input. É aqui que fica os componentes citados acima. (Component - Obrigatório.)\n\n* **disabled**: Desativa o component. (Booleano - Opcional)\n\n* **className**: Conjunto de classes dos campos. (String - Opcional)\n\n* **column**: Faz a label ficar em cima do campo. (Booleano - defaul false)\n\n* **max**: Valor máximo que o range pode alcançar. (Inteiro - default 100)\n\n* **min**: Valor mínimo que o range pode alcançar. (Inteiro - default 0)\n\n#### Exemplo:\n\n```jsx\n\u003cForm noValidate onSubmit={handleSubmit}\u003e\n  \u003cForm.Row\u003e\n    \u003cForm.Group as={Col} md=\"8\" controlId=\"formRange\" className=\"d-flex flex-column justify-content-between\"\u003e\n      \u003cField\n        column\n        name=\"range\"\n        label=\"Range\"\n        max={80}\n        component={RangeField}\n      /\u003e\n    \u003c/Form.Group\u003e\n  \u003c/Form.Row\u003e\n\n  \u003cButton variant=\"dark\" type=\"submit\" disabled={submitting || pristine}\u003eEnviar\u003c/Button\u003e\n\u003c/Form\u003e\n```\n\n### 10. ColorField\n\nCampo de cores.\n\n#### Propriedades especificas:\n\n* **name**: Nome do atributo que irá ser populado pelo usuário. É esse atributo que irá para a submissão do formulário, ele deve ser único. (String - Obrigatório)\n\n* **id**: Identificado do campo no formulário. (String - Para o CheckField é obrigatório, para os outros ele é o atributo name.)\n\n* **label**: Label que acompanhará o input. (String - Opcional)\n\n* **component**: Componente do input. É aqui que fica os componentes citados acima. (Component - Obrigatório.)\n\n* **disabled**: Desativa o component. (Booleano - Opcional)\n\n* **className**: Conjunto de classes dos campos. (String - Opcional)\n\n* **column**: Faz a label ficar em cima do campo. (Booleano - defaul false)\n\n#### Exemplo:\n\n```jsx\n\u003cForm noValidate onSubmit={handleSubmit}\u003e\n  \u003cForm.Row\u003e\n    \u003cForm.Group as={Col} md=\"4\" controlId=\"formCheckbox\"\u003e\n      \u003cField\n        column\n        name=\"color\"\n        label=\"Teste Color\"\n        component={ColorField}\n      /\u003e\n    \u003c/Form.Group\u003e\n  \u003c/Form.Row\u003e\n\n  \u003cButton variant=\"dark\" type=\"submit\" disabled={submitting || pristine}\u003eEnviar\u003c/Button\u003e\n\u003c/Form\u003e\n```\n\n\n### 11. DateListField\n\nCampo de inserção de texto com autocomplete.\n\n#### Propriedades especificas:\n\n* **name**: Nome do atributo que irá ser populado pelo usuário. É esse atributo que irá para a submissão do formulário, ele deve ser único. (String - Obrigatório)\n\n* **id**: Identificado do campo no formulário. (String - Para o CheckField é obrigatório, para os outros ele é o atributo name.)\n\n* **label**: Label que acompanhará o input. (String - Opcional)\n\n* **component**: Componente do input. É aqui que fica os componentes citados acima. (Component - Obrigatório.)\n\n* **disabled**: Desativa o component. (Booleano - Opcional)\n\n* **className**: Conjunto de classes dos campos. (String - Opcional)\n\n* **column**: Faz a label ficar em cima do campo. (Booleano - defaul false)\n\n* **placeholder**: Leve descrição do campo. (String - Opcional)\n\n* **size**: Tamanho do input: \"sm\", \"md\", \"lg\". (String - padrão \"mg\")\n\n#### Exemplo:\n\n```jsx\n\u003cForm noValidate onSubmit={handleSubmit}\u003e\n    \u003cForm.Row className=\"d-flex flex-row\"\u003e\n      \u003cForm.Group as={Col} md=\"4\" controlId=\"formRadioButton\"\u003e\n        \u003cField\n          column\n          name=\"browsers\"\n          label=\"Data List\"\n          placeholder=\"Insira um navegador.\"\n          options={[\n            {title: \"Internet Explore\", value: \"Internet Explore\"},\n            {title: \"Firefox\", value: \"Firefox\"},\n            {title: \"Chrome\", value: \"Chrome\"},\n            {title: \"Safari\", value: \"Safari\"},\n          ]}\n          component={DataListField}\n        /\u003e\n      \u003c/Form.Group\u003e\n    \u003c/Form.Row\u003e\n\n  \u003cJson values={values} /\u003e\n\n  \u003cButton variant=\"dark\" type=\"submit\" disabled={submitting || pristine}\u003eEnviar\u003c/Button\u003e\n\u003c/Form\u003e\n```\n\n### 12. Json\n\nComponente para printar na tela dicionários/Json.\n\n#### Propriedades especificas:\n\n* **values**: Dicionário Json para ser inserido na tela (Json - Obrigatório)\n\n#### Exemplo:\n\n```jsx\n\u003cJson values={{...}} /\u003e\n```\n\n### 13. Fieldset\n\nComponente para encapsular Campos de formulários.\n\n#### Propriedades especificas:\n\n* **title**: Nome do formulário dos campos inseridos (String - Obrigatório)\n\n#### Exemplo:\n\n```jsx\n\u003cFieldset title=\"Formulário de pagamento\"\u003e\n  \u003cForm.Row\u003e...\u003c/Form.Row\u003e\n\u003c/Fieldset\u003e\n```\n\n## Contribuir\n\n#### 1. Como rodar o ambiente de desenvolvimento:\n\nRode os dois comandos abaixo em 2 abas diferentes. O primeiro comando vai ficar observando modificações do seu pacote e o segundo\ncomando consome essas modificações no html.\n\nNo diretorio raiz rode o npm start\n\n```\nnpm start\n```\n\nNo diretorio example rode o npm start.\n\n```\ncd example\nnpm start\n```\n\n#### 2. Como instalar ou remove um pacote.\n\nPara instalar um novo pacote tem que fazer o seguinte comando:\n\n```\nnpm install --save-dev nome-do-pacote\n```\n\nCom ele instalado tem que coloca-lo no package.json\n\n```json\n\"dependencies\": {\n  \"nome-do-pacote\": \"^versao\",\n  \"...\": \"...\"\n},\n\"peerDependencies\": {\n  \"nome-do-pacote\": \"^versao\",\n  \"...\": \"...\"\n}\n```\n\nCom isso, teste se esse pacote está sendo utilizado, caso não rode o npm install e reinicie os servidores.\n\n#### 3. Publicar no npmjs\n\n1. Crie uma conta no https://www.npmjs.com/\n2. Execute no terminal ```npm login``` e logar com as credenciais criadas no npmjs\n3. Execute ```npm publish``` na pasta do projeto\n4. E então use em outros projetos!\n\n#### 4. Publicar documentação github pages\n\nRode o comando para criar uma pagina com a build do projeto example do seu repositório.\n\n```\nnpm run deploy\n```\n\n#### 5. Atualizando um projeto.\n\nVersões: MAJOR.MINOR.PATCH\n\n* **MAJOR**: Versão em que fizeste modificações incompatives com versões anteriores, ou seja, que irá quebrar algo anteriormente feito.\n* **MINOR**: Quando você adicionar funcionalidades que são compativeis com versões anteriores.\n* **PATCH**: Correções de erros/bugs compativeis com versões anteriores.\n\n## Licença\n\nMIT © [VictorDeon](https://github.com/VictorDeon)\n\nCriado a partir do pacote: [Create React Library](https://github.com/transitive-bullshit/create-react-library)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvwapplications%2Fvwapp-react-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvwapplications%2Fvwapp-react-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvwapplications%2Fvwapp-react-form/lists"}