{"id":19687312,"url":"https://github.com/isqua/form-generator","last_synced_at":"2025-02-27T07:51:50.019Z","repository":{"id":59181380,"uuid":"535440615","full_name":"isqua/form-generator","owner":"isqua","description":"Demo Application in React \u0026 TypeScript where a user can generate forms from JSON declaration","archived":false,"fork":false,"pushed_at":"2023-07-23T11:15:43.000Z","size":1315,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-23T15:15:38.627Z","etag":null,"topics":["ajv","create-react-app","frontend","github-actions","github-pages","react","test-assignment"],"latest_commit_sha":null,"homepage":"https://isqua.github.io/form-generator/","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/isqua.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2022-09-11T22:22:28.000Z","updated_at":"2023-10-08T13:12:57.000Z","dependencies_parsed_at":"2024-11-11T18:48:34.473Z","dependency_job_id":null,"html_url":"https://github.com/isqua/form-generator","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/isqua%2Fform-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isqua%2Fform-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isqua%2Fform-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isqua%2Fform-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/isqua","download_url":"https://codeload.github.com/isqua/form-generator/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240993952,"owners_count":19890419,"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":["ajv","create-react-app","frontend","github-actions","github-pages","react","test-assignment"],"created_at":"2024-11-11T18:33:45.366Z","updated_at":"2025-02-27T07:51:49.993Z","avatar_url":"https://github.com/isqua.png","language":"TypeScript","readme":"# Form Generator\n\nWithout elaborating, check out [the demo](https://isqua.github.io/form-generator/).\n\nThis is a react app I created as a test assignment to show my front-end skills. The task was:\n\n\u003e Сreate an application in React \u0026 TypeScript where a user can generate forms from JSON declaration. They enter JSON and see the form. That’s it!\n\n## App Overview\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app), so I reuse what it offers.\n\nI also added [eslint](https://npmjs.com/package/eslint) with some popular presets, you may check out the full configuration in [.eslintrc.json](./.eslintrc.json). I use `@typescript-eslint`, `eslint` and `eslint-plugin-react` recommended presets mostly for code issues coverage, and `airbnb` presets mostly for code style. So I’m sticking to these rules, e.g. they [prefers](https://github.com/airbnb/javascript/blob/eslint-config-airbnb-v19.0.4/packages/eslint-config-airbnb/rules/react.js#L525-L530) function declaration over arrow functions for components.\n\nSo, from a bird's eye view, the structure is as follows:\n\n1. [index.tsx](./src/index.tsx) is an entrypoint. It finds the root DOM element and render the App.\n1. [app/](./src/app) contains any app-level code.\n    - [App.tsx](./src/app/App.tsx) is where the app is described. It can render several features and do the routing, but currently there is only one feature.\n1. [features/](./src/features/) contains feature-specific code, directory per feature:\n    - [FormGenerator](./src/features/FormGenerator/) is the main feature that allows a user to type in JSON and get a Form Preview.\n        - [FormGenerator.tsx](./src/features/FormGenerator/FormGenerator.tsx) implements the full feature, the user scenario\n        - [model/](./src/features/FormGenerator/model/) directory describes the data model and data flow of the feature. This is implemented with React [useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer) hook in a redux way.\n        - [widgets/](./src/features/FormGenerator/widgets/) directory contains feature-specific domain-oriented widgets.\n        - [types/](./src/features/FormGenerator/types/) directory describes feature-specific typings.\n1. [shared/](./src/shared/) directory contains utils and non-specific components.\n\n## Deep Dive into FormGenerator\n\nThe [FormGenerator](./src/features/FormGenerator/) feature workflow is as follows:\n1. The [FormParser](./src/features/FormGenerator/widgets/FormParser/FormParser.tsx) takes user input and dispatches state change.\n1. The [reducer](./src/features/FormGenerator/model/reducer.ts) handles this action and validates user input according to the [schema](./src/features/FormGenerator/schema/form.ts). Then it builds a new state with a *parsed* schema and/or validation errors. E.g., if there are some validation errors, we should not change or delete the schema, to show the last *valid* form.\n1. Finally, the [FormBuilder](./src/features/FormGenerator/widgets/FormBuilder/FormBuilder.tsx) renders a form by the schema from the state (last valid state, I mean).\n\n### How to add a new input type\n\n1. First of all, describe the new input type: [FormGenerator/types](./src/features/FormGenerator/types/form.ts).\n1. Then, write a schema in the [Ajv](https://ajv.js.org/guide/getting-started.html) to validate the input declaration. Don’t forget to add it to the general `formInputSchema`: [FormGenerator/schema](./src/features/FormGenerator/schema/input.ts) + [tests](./src/features/FormGenerator/schema/validate.test.ts).\n1. Then teach the FormBuilder to render your new component: [FormGenerator/widgets/FormBuilder/FormField](./src/features/FormGenerator/widgets/FormBuilder/FormField.tsx) + [tests](./src/features/FormGenerator/widgets/FormBuilder/FormBuilder.test.tsx).\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm start`\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\\\nYou will also see any lint errors in the console.\n\nUses [react-scripts](https://www.npmjs.com/package/react-scripts).\n\n### `npm test`\n\nLaunches the test runner in the interactive watch mode.\n\nUses [react-scripts](https://www.npmjs.com/package/react-scripts), [jest](https://www.npmjs.com/package/jest) and [React Testing Library](https://www.npmjs.com/package/@testing-library/react).\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.\n\nUses [react-scripts](https://www.npmjs.com/package/react-scripts).\n\n### `npm run lint`\n\nRuns code linters to check dumb errors and code style.\n\nUses [eslint](https://www.npmjs.com/package/eslint).\n\n### `npm run lint:fix`\n\nFixes code issues and style.\n\nUses [eslint](https://www.npmjs.com/package/eslint).\n\n## Learn More\n\nYou can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n\n## License\n\nThis app is [GPL licensed](./LICENSE).","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisqua%2Fform-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fisqua%2Fform-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisqua%2Fform-generator/lists"}