Generate (e.g. Orders List)

[jozef-slezak]

Goal: generating new master/detail (focus now only on tables table/list) from an existing enity (typescript type alias).
Keep in mind that we do not want only to generate new page but also adding/removing columns (later filters...). To achieve this we would reuse some parts of the generator (generate only a specific column for a specificy typescript alias property) and the generated output would be placed in a specific place in the original source code (think about it like intellisence/hints/refactoring).

Input for generator (user specifies those inputs, reasonable default would be fine):

• generated typescript code for graphql query (later directly graphql query string Generate List Page from graphql query and with urql graphql client #86)
• Add route to JSON for example-material-ui #42 later also page (for react router): uri and file name of a React component

Outputs:

• generated table component displaying typescript type alias:
  • material ui component names in the soure code: https://github.com/iteria-ui/lowcode/tree/master/packages/generator/src/react/material-ui (see the library component https://material-ui.com/components/tables/)
  • grommet ui component names in the soure code: https://github.com/iteria-ui/lowcode/tree/master/packages/generator/src/react/grommet (see the library component https://v2.grommet.io/table)
  • formated date, number react-intl, code https://github.com/iteria-ui/lowcode/blob/master/packages/generator/src/react/react-intl/formatted-tag.ts)
  • automated tests https://github.com/iteria-ui/lowcode/blob/master/packages/generator/src/ts/typeAlias.test.ts
• all generated output should work within the example projects:
  • https://github.com/iteria-ui/example-material-ui
  • https://github.com/iteria-ui/example-grommet
• generated data table component displaying typescript type alias (same
  • different (more advanced) ui component https://v2.grommet.io/datatable
• write files using https://github.com/iteria-app/lowcode/blob/v0.1.3/packages/react-lowcode/src/io/ interfaces

Inspiration:

• generated output could look like https://marmelab.com/react-admin-demo/#/commands
• https://github.com/api-platform/client-generator
• https://tabular.grommet.io/

FYI, related issue #68

https://ts-ast-viewer.com/

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

[jozef-slezak]

Once we integrate the generator into the UI we might inspire by https://tabular.grommet.io/

[jozef-slezak]

@mat-app, please improve the "graphics" of generate example-material-ui. The original customers page is nicer then the generated one.