Auto-generate forms from typescript interface

formGenerator.ts

#!/usr/bin/env ts-node

import * as TJS from 'typescript-json-schema'
import path from 'path'
import fs from 'fs'
try {
	const filePath = path.join(__dirname, 'OptionsApp.tsx')
	const outputPath = path.join(__dirname, 'form.json')
	const program = TJS.getProgramFromFiles([filePath])
	const schema = TJS.generateSchema(program, 'OptionSettings', { ignoreErrors: true })
	fs.writeFileSync(outputPath, JSON.stringify(schema))
	console.log('Schema generated')
} catch (error) {
	console.error('Schema not generated', error)
}

OptionsApp.tsx

import * as React from 'react'
import styled from 'styled-components'
import schemaJson from './form.json'
// import Form from '@rjsf/material-ui'
import Form from '@rjsf/core'

// console.log('schema: ', schema)

export interface OptionSettings {
	whitelist: string[]

	/**
	 * @items {"type":"string","format":"email"}
	 * */
	blacklist: string[]
	enabled: boolean
}

console.log('schemaJson: ', schemaJson)

const OptionsApp = () => (
	<OptionsAppContainer>
		<Form
			schema={schemaJson}
		/>
	</OptionsAppContainer>
)

export default OptionsApp

const OptionsAppContainer = styled('div')`
	min-width: 400px;
	padding: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
`