{"id":13802952,"url":"https://github.com/jalal246/folio","last_synced_at":"2025-05-13T15:32:03.681Z","repository":{"id":57239695,"uuid":"161352666","full_name":"jalal246/folio","owner":"jalal246","description":"Legacy project.  Move out to  =\u003e","archived":true,"fork":false,"pushed_at":"2018-12-19T19:04:58.000Z","size":1633,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-18T19:42:04.802Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/jalal246/folo","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jalal246.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-11T15:15:26.000Z","updated_at":"2023-03-04T05:33:40.000Z","dependencies_parsed_at":"2022-08-29T22:22:33.568Z","dependency_job_id":null,"html_url":"https://github.com/jalal246/folio","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jalal246%2Ffolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jalal246%2Ffolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jalal246%2Ffolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jalal246%2Ffolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jalal246","download_url":"https://codeload.github.com/jalal246/folio/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253970373,"owners_count":21992480,"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-08-04T01:00:18.831Z","updated_at":"2025-05-13T15:32:03.293Z","avatar_url":"https://github.com/jalal246.png","language":"JavaScript","readme":"# Folio\n\n\u003e Dynamic Form Built With `React` \u0026 `CSS Grid` layout\n\n\u003chr /\u003e\n\n\u003c!-- gif made by: https://github.com/NickeManarin/ScreenToGif/wiki/help  --\u003e\n\n![live example](https://raw.githubusercontent.com/jalal246/folio/master/folio-demo.gif)\n\n[![Build Status](https://travis-ci.org/jalal246/folio.svg?branch=master)](https://travis-ci.org/jalal246/folio)\n[![Codecov](https://img.shields.io/codecov/c/github/jalal246/folio.svg)](https://codecov.io/gh/jalal246/folio)\n[![npm](https://img.shields.io/npm/v/folio-forms.svg)](https://www.npmjs.com/package/folio-forms)\n[![npm](https://img.shields.io/npm/dt/folio-forms.svg)](https://www.npmjs.com/package/folio-forms)\n[![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/jalal246/folio/blob/master/LICENSE)\n\n## Overview\n\n`Folio` has two major bases `Cells` for data and `Grid` for layout. With these components, making a form should be easier than ever. See full examples of folio :point_right: https://jalal246.github.io/folio/.\n\n## Installation\n\nRun locally:\n\n- `git clone https://github.com/jalal246/folio.git`\n- `npm install`\n- `npm run storybook`\n- Go to http://localhost:6006/\n\nUsing npm:\n\n```\nnpm install --save folio-forms\n```\n\n\u003e folio depends on `react` and `prop-types`. Please make sure you\n\u003e have those installed as well.\n\nunpkg\n\n```\nhttps://unpkg.com/folio-forms/dist/\n```\n\n## Usage\n\n#### Example\n\n```js\nconst myForm = ({ mySubmitFunc }) =\u003e (\n  \u003cFolio\u003e\n    \u003cForm onSubmit={mySubmitFunc}\u003e\n      \u003cGrid\u003e\n        \u003cGridItem row={1} col={1}\u003e\n          \u003cCell valueKey=\"myFullName\" type=\"text\" /\u003e\n        \u003c/GridItem\u003e\n        \u003cGridItem row={2} col={1}\u003e\n          \u003cCell valueKey=\"myEmail\" type=\"email\" /\u003e\n        \u003c/GridItem\u003e\n        \u003cbutton type=\"submit\"\u003esubmit\u003c/button\u003e\n      \u003c/Grid\u003e\n    \u003c/Form\u003e\n  \u003c/Folio\u003e\n);\n\n// mySubmitFunc will return: (event, {myFullName: \"\" myEmail: \"\"})\n```\n\n### Components\n\n```js\nimport Folio, { Form, Grid, Cell, CellItem, GridItem } from \"folio-forms\";\n```\n\n### Components Props\n\nAll components accept custom props + children which is required in all except `Cell`\n\n\u003c!-- all tables were generated via http://www.tablesgenerator.com/markdown_tables --\u003e\n\n#### Form\n\n| property  | type          | description                                                      | default |\n| --------- | ------------- | ---------------------------------------------------------------- | ------- |\n| component | node/function | custom render-component                                          | form    |\n| onSubmit  | function      | submit function returns values in all cells (event, {...values}) | () {}   |\n\n#### Grid\n\n| property    | type          | description               | default |\n| ----------- | ------------- | ------------------------- | ------- |\n| component   | node/function | custom render-component   | div     |\n| col         | number        | number of columns in grid |         |\n| colWidth    | string        | fixed column width        |         |\n| colMinWidth | string        | column minimum width      | auto    |\n| colMaxWidth | string        | column maximum width      | 1fr     |\n| row         | number        | number of rows in grid    |         |\n| rowWidth    | string        | fixed row width           |         |\n| rowMinWidth | string        | row minimum width         | auto    |\n| rowMaxWidth | string        | row maximum width         | 1fr     |\n\n#### GridItem\n\nUsed for implicit grid layout.\n\n| property     | type          | description               | default |\n| ------------ | ------------- | ------------------------- | ------- |\n| component    | node/function | custom render-component   | div     |\n| row          | number        | number of columns in grid |         |\n| toRow        | number        | column width              |         |\n| col          | number        | column minimum width      | 0       |\n| toCol        | number        | column maximum width      |         |\n| isCenter     | Boolean       | number of rows in grid    | false   |\n| isHorizontal | Boolean       |                           | true    |\n\n#### Cell\n\nEssential to register values in the store, return values it when submit.\n\n| property  | type          | description                              | default                        |\n| --------- | ------------- | ---------------------------------------- | ------------------------------ |\n| component | node/function | custom render-component                  | div                            |\n| valueKey  | string        | key used to store value in values object | type + id + groupname (if any) |\n| id        | string        |                                          | auto generated by function     |\n| value     | string        | if type not button                       | \"\"                             |\n| checked   | Boolean       | if type button                           | false                          |\n| type      | Boolean       |                                          | text                           |\n| groupName | string        | only for button toggle                   |                                |\n\n#### CellItem\n\nUsed with list to wrap children.\n\n| property  | type          | description             | default |\n| --------- | ------------- | ----------------------- | ------- |\n| component | node/function | custom render-component | option  |\n\n## What's next?\n\nEnable end-user to create, design and shape forms.\n\n## License\n\nThis project is licensed under the [MIT License](https://github.com/jalal246/folio/blob/master/LICENSE)\n","funding_links":[],"categories":["Libraries"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjalal246%2Ffolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjalal246%2Ffolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjalal246%2Ffolio/lists"}