{"id":19493573,"url":"https://github.com/fwextensions/dahlia-forml-test","last_synced_at":"2026-06-11T18:31:33.448Z","repository":{"id":239872252,"uuid":"800810532","full_name":"fwextensions/dahlia-forml-test","owner":"fwextensions","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-22T19:58:00.000Z","size":125,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-23T02:01:17.564Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/fwextensions.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":"2024-05-15T03:33:05.000Z","updated_at":"2024-05-22T19:58:03.000Z","dependencies_parsed_at":"2024-05-18T01:22:29.134Z","dependency_job_id":"f14effe5-9b39-48b2-a6db-ef8202549321","html_url":"https://github.com/fwextensions/dahlia-forml-test","commit_stats":null,"previous_names":["fwextensions/dahlia-forml-test"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fwextensions%2Fdahlia-forml-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fwextensions%2Fdahlia-forml-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fwextensions%2Fdahlia-forml-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fwextensions%2Fdahlia-forml-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fwextensions","download_url":"https://codeload.github.com/fwextensions/dahlia-forml-test/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240739065,"owners_count":19849711,"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-10T21:26:38.536Z","updated_at":"2026-06-11T18:31:33.431Z","avatar_url":"https://github.com/fwextensions.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🏠🎩 dahlia-forml-test\n\nUse YAML to create a Form.io version of the DAHLIA application form.\n\n\n## Install\n\n```shell\nnpm install\nnpm run dev\n```\n\n\n## Usage\n\nOpen the `localhost` address listed in the shell.  Then edit the [`form.yaml`](form.yaml) file and save it to see the rendered form update immediately.\n\n\n## Things to do and see\n\nVite converts the imported yaml file to a JS object, which is then passed to [`processComponents()`](src/form/processComponent.js).  That function walks the tree of components and \"inflates\" each one, adding required keys or converting the data to the format that Form.io expects.  It also handles some special components that don't exist in Form.io, like [`address`](src/form/address.js), which is a reusable component that renders the fields for a street address, or [`panelGroup`](src/form/panelGroup.js), which organizes panels into higher-level named groups.  Converting data in the form schema into different objects that Form.io supports can be a powerful approach for simplifying form generation and code reuse.\n\nThe box at the top of the page is rendered by [`Breadcrumbs`](src/components/Breadcrumbs.jsx), a React component that updates when the form page changes.  Its steps are defined by the `panelGroup` components in the `form.yaml` file.\n\nClicking Next on the Contact page shows a spinner while the entered address is verified.  This is handled via a [`beforeHook` function](src/form/hooks.js), which applies special handling for that particular page.\n\nThe (incomplete) summary of what the user entered on the final review page is actually implemented as a [React component](src/components/ReviewSummary.jsx).  It's rendered into the form markup via a portal when the user navigates to that page in the Form.io wizard.\n\nThe [`submission.yaml`](submission.yaml) file is passed into the form as existing data, as if it was a previously saved application from the user.\n\nThe [`listing.json`](listing.json) file represents the data for a DAHLIA rental listing.  Removing the NRHP preference from the `Listing_Lottery_Preferences` array and saving the file will also remove the *NRHP* panel, since we want the form flow to depend on the details of the listing.\n\nThe Form.io nav header is still being rendered below the `Breadcrumbs` element, but is made nearly transparent to make it less distracting (it would be hidden entirely in a real version of this form).  Hover over it to see it better, and click a page name to jump to that part of the form.\n\nThis is not a complete version of the DAHLIA application form, but hopefully demonstrates enough of the more complicated areas.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffwextensions%2Fdahlia-forml-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffwextensions%2Fdahlia-forml-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffwextensions%2Fdahlia-forml-test/lists"}