List of Cards

[Jozef Slezak]

Goal: generate list of https://material-ui.com/components/cards/ (something like https://material-ui.com/components/grid-list/#grid-list-with-titlebars) using template. Current implementation is able to generate data grid https://example-material-ui.onrender.com/app/generated-customers for e Entity. In certain situation is better to generate list of cards.

Motivation: we use code templates help us to customize codegen without writing a code.

How it works?

• we parse template (source code) to AST and apply some refactoring rules (rename, inline, replace a placeholder); inspire by:

  lowcode/packages/react-lowcode/src/codegen/generation/generators/template/template-resolver.ts

  Line 17 in b1d1a0e

   generateListPage(template: string): string | undefined { 

• template is normal running code; inspire by:

  lowcode/packages/react-lowcode/src/codegen/tests/template/template.test.ts

  Line 11 in d5739cc

   const template = ` 

• placeholders are real react components or react hooks; inspire by:

  lowcode/packages/react-lowcode/src/codegen/tests/template/template.test.ts

  Line 27 in d5739cc

           <ListPlaceholder customers={data?.customers} /> 

What to do?

• prepare a template
• write script that applies refactoring rules
• manual test in https://github.com/iteria-app/example-material-ui/ (prepare a pull request for new genrated page for demonstration)
• automated jest tests

Template

Inspire by: https://material-ui.com/components/cards/#complex-interaction

Refactoring rules:

• rename exported component name (e.g. ComponentXY - not just replace string but find exported function)
• rename row variable to lowercase entity name (using AST - not using string replace)
• replace all occurences of row like this (try to match row field):
  • replace row.title with a proper entity field (check first if entity contains name, title and if so use it - if not fallback to a first string)
  • replace row.subheader with a proper entity field (check first if entity contains name, title and if so use it - if not fallback to a first date/time/dateTime/timestamp and format it)
  • replace row.description (check description if not fallback to a first string)

imports ...

export ComponentXY = ({data}) => data.map((row) => (
  <Card>
      <CardHeader title={row.title} subheader={row.subheader} />
      ...
  </Card>
))