Generate Entity Detail (CRUD Form)

[Jozef Slezak]

Generete react page containing a genarated form (inputs, selects) form Material-UI, Grommet and Ionic.
Generate code that uses libraries:

• https://formik.org/ (design new typescript generator interfaces because later we would like to switch between implementations https://react-hook-form.com/, https://final-form.org/react) (inspire with interfaces introduced in #45)
• https://formatjs.io/docs/react-intl for input labels (useIntl() hook is also used in #45)
  FYI, later generated page will use graphql query and mutation #87
• view component (without fetches / network calls) holds the form inputs, selects ...

Generator Inputs:

• Typescript data type (Typescript class or type alias with properties)
• customizable page name and ur

How to:

• use typescript ast, compiler and/or ts-morph to list properties https://ts-morph.com/navigation/example
• use factory code of the typescript compiler (see bottom left in https://ts-ast-viewer.com/#code/DwIwfALgpgHhwHpxA)

Outputs:

• generated TSX code (form inputs selects... for each property of a typescript object)

Deliverables:

• generator code and automated tests (using jest)
• nice to have: integrate the generator to the browser extension ui
• updated README.md (mention the feature)
• animated GIF (user interaction with the generator)

Inspiration:

• build same graphical output as would form schema builder would (e.g. https://blog.logrocket.com/quickly-build-schema-based-forms-in-react-with-uniforms/) but by generating the code
• https://github.com/api-platform/client-generator

Deliverables:

• code generation implementation according above requirements
• markdown how to generate files in to example-material-ui and example-grommet using CLI on your localhost
• demo integration