{"id":19714663,"url":"https://github.com/quavedev/forms","last_synced_at":"2025-10-29T12:06:45.572Z","repository":{"id":119413534,"uuid":"332555003","full_name":"quavedev/forms","owner":"quavedev","description":"Create Formik forms automatically from a quave:definitions schema object.","archived":false,"fork":false,"pushed_at":"2021-08-20T02:00:48.000Z","size":173,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":16,"default_branch":"main","last_synced_at":"2025-02-27T21:45:25.114Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/quavedev.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":"2021-01-24T21:00:56.000Z","updated_at":"2021-08-20T02:00:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"83c79228-8fdc-4784-b047-d2f2175f47f2","html_url":"https://github.com/quavedev/forms","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/quavedev/forms","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quavedev%2Fforms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quavedev%2Fforms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quavedev%2Fforms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quavedev%2Fforms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quavedev","download_url":"https://codeload.github.com/quavedev/forms/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quavedev%2Fforms/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263339928,"owners_count":23451516,"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":[],"created_at":"2024-11-11T22:34:43.149Z","updated_at":"2025-10-29T12:06:45.560Z","avatar_url":"https://github.com/quavedev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# quave:forms\n\nQuickly create a form by only passing it's `definition`. The definition object\nhas to be created using our\n[definitions](https://github.com/quavedev/definitions) meteor package. This\npackage serves *practicity*. If you wish to standardize the forms of your\napplication or quickly make an admin dashboard, this is the package for you.\n\n## Dependencies\n\nThis package has these `npm` depencies. They're not enforced because this could\ncause [some problems](https://guide.meteor.com/writing-atmosphere-packages.html#peer-npm-dependencies)\n.\n\n* `formik`\n* `react`\n* `simpl-schema`\n\nAlso, it depends on the meteor package `quave:definitions`. Installation\ninstructions [here](https://github.com/quavedev/definitions#installation).\n\n## Installation\n\n```bash\nmeteor add quave:forms\n```\n\n## Quickstart\n\nPass a handler to `onSubmit` prop, the initial values to the `initialValues`\nprop and a definition to the `definition` prop. *Voilà*! You got yourself a\nform.\n\n```javascript\n// Import\nimport { Form } from 'meteor/quave:forms';\n\n// Use the Form component\n\u003cForm\n  onSubmit={handleSubmit}\n  initialValues={initialValues}\n  definition={PlayerDefinition}\n/\u003e\n```\n\nThe `Form` component can accept any of the properties of the\n[Formik](https://formik.org/docs/api/formik) component, plus these:\n\n* `definition`: object definition from our\n  [definitions](https://github.com/quavedev/definitions) package.\n* `submitLabel`: defaults to *SUBMIT*. It's used as child of the submit button.\n* `buttonComponent`: defaults to `\u003cbutton /\u003e`. The component used for buttons.\n  `type=\"submit\"` is passed as prop.\n* `definitionToComponent`: a function that receives `(fieldDefinition,\n  fieldName)` as arguments and return a\n  [Formik compatible](https://formik.org/docs/api/field#component) component to\n  be used for that field. `fieldDefinition` is the content of the `fields`\n  property of the definition passed as prop (`definition.fields`).\n* `actionButtons`: an array of objects with `label` and `handler` properties.\n  `label` will be passed as a child of the button component and `handler` is a\n  function to be called when the `onClick` event is triggered. It calls\n  `e.preventDefault()` before calling the handler.\n* `autoValidate`: defaults to `false`. Defines if `Form` should try to validate\n  the inputs automatically based on the schema. It has some limitations with\n  custom objects at the moment. It will work fine for simple definitions.\n* `autoClean`: defaults to `true`. Defines if we should call Simple Schema's\n  [clean](https://github.com/aldeed/simpl-schema#explicitly-clean-an-object)\n  method before passing the values to the `onSubmit` handler.\n* `isDebug`: defaults to `false`. When `true`, draws the form state bellow it\n  for debugging purposes.\n* `fieldContainerStyle`: style passed to a `div` that encloses each field.\n* `fieldContainerClassName`: class passed to a `div` that encloses each field.\n* `buttonsContainerStyle`: style passed to a `div` that encloses all buttons.\n* `buttonsContainerClassName`: class passed to a `div` that encloses all\n  buttons.\n\nIf you pass `style` or `className`, it will be forwarded to the `form`\ncomponent, working as the container for all fields and the buttons' container.\n\n## Layout\n\nIf you want to layout your form I recommend using `grid` and `flex` on the\navailable styles/classNames. This is not yet optimized to be an easy task, but\nyou can do this once and apply to all your forms. Bellow is an example of how\nthe props will look in the final HTML document.\n\n```html\n\u003cform class=\"className\" style=\"style\"\u003e\n  \u003cdiv class=\"fieldContainerClassName\" style=\"fieldContainerStyle\"\u003e\n    \u003clabel\u003eName\u003c/label\u003e\n    \u003cinput name=\"name\" type=\"text\" label=\"Name\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"fieldContainerClassName\" style=\"fieldContainerStyle\"\u003e\n    \u003clabel\u003eBirthday\u003c/label\u003e\n    \u003cinput name=\"birthday\" type=\"text\" label=\"Birthday\"\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"fieldContainerClassName\" style=\"fieldContainerStyle\"\u003e\n    \u003clabel\u003ePosition\u003c/label\u003e\n    \u003cselect name=\"position\" label=\"Position\"\u003e\n      \u003coption value=\"\"\u003eChoose one Position\u003c/option\u003e\n      \u003coption value=\"GOLEIRO\"\u003eGOLEIRO\u003c/option\u003e\n      \u003coption value=\"LATERAL_DIREITO\"\u003eLATERAL_DIREITO\u003c/option\u003e\n      \u003coption value=\"LATERAL_ESQUERDO\"\u003eLATERAL_ESQUERDO\u003c/option\u003e\n      \u003coption value=\"ZAGUEIRO\"\u003eZAGUEIRO\u003c/option\u003e\n      \u003coption value=\"VOLANTE\"\u003eVOLANTE\u003c/option\u003e\n      \u003coption value=\"MEIA\"\u003eMEIA\u003c/option\u003e\n      \u003coption value=\"ATACANTE\"\u003eATACANTE\u003c/option\u003e\n      \u003coption value=\"PONTA_DIREITA\"\u003ePONTA_DIREITA\u003c/option\u003e\n      \u003coption value=\"PONTA_ESQUERDA\"\u003ePONTA_ESQUERDA\u003c/option\u003e\n    \u003c/select\u003e\u003c/div\u003e\n  \u003cdiv class=\"buttonsContainerClassName\" style=\"buttonsContainerStyle\"\u003e\n    \u003cbutton class=\"quaveform\"\u003eERASE\u003c/button\u003e\n    \u003cbutton class=\"quaveform\"\u003eCANCEL\u003c/button\u003e\n    \u003cbutton class=\"quaveform-submit-button\" type=\"submit\"\u003eSAVE\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/form\u003e\n```\n\n### Default Layout\n\nOur default layout is decent (I think). You may take a look at the\n`defaultStyles` object at the top of the `definitionToComponent.js` file.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquavedev%2Fforms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquavedev%2Fforms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquavedev%2Fforms/lists"}