Template for form inputs (prepare for graphql mutation)

[jozef-slezak]

Goal:

• refactoring of existing code: instead of typescript factory that create AST use templates + refactoring rules
• read template into AST and apply refactoring rules (using a script)

Templates

Read info/background from #138.

Let's have multiple templates and preserve existing logic using them:

• Template for input string
• Template for integer
• Template for decimal
• Template for date
• Template for time
• Template for date time

function StringInputTemplate({value, handleChange, error})
<TextField 
      label={T('label')} 
      placeholder={T('placeholder')} 
      value={value} 
      onChange={handleChange}
      error={error}
      helperText={error}
/>

Refactoring rules:

• [ ] try to replace translation T('label') if not missing with real messageID and T('messageID') with a particular translation framework (react-intl and potentially react-i18n)
• [ ] try to replace translation T('placeholder') if not missing with real messageID and T('messageID') with a particular translation framework (react-intl and potentially react-i18n)
• [ ] inline all prop value occurences with for example value={formik.values.email} (in case of using formik)
• [ ] inline all prop handleChange with for example onChange={formik.handleChange} (in case of using formik)
• [ ] inline all prop errorwith for example error={formik.touched.email && Boolean(formik.errors.email)} and in this case also helperText={formik.touched.email && formik.errors.email}

https://codesandbox.io/s/github/formik/formik/tree/master/examples/with-material-ui?from-embed

Next steps will be:

• template detail page that queries graphql by PK
• introduce graphql mutation in the template

[cunderlikp]

Creating an input field from the template is currently implemented here: https://github.com/mat-app/lowcode/blob/09c5e861a3c67358551e6280771b56026c5264ae/packages/react-lowcode/src/codegen/generation/generators/detail/mui-detail-generator.ts#L278