Context

We currently have a server code generation component that for a given configuration creates server code. It already includes a code templating mechanism, testing, connectivity to configuration models and static modules mechanism.

In addition to the server code generator, we need to build a new client code generator.

Schema

enum EnumEntityPageType {
  SingleRecord = "SingleRecord",
  List = "List",
}

type EntityPageSettings = {
  /** Whether to allow creating an entity though the page */
  allowCreation: boolean;
  /** Whether to allow deleting an entity though the page */
  allowDeletion: boolean;
};

type EntityPageSingleRecordSettings = EntityPageSettings & {
  /** Wether to allow updating an entity through the page */
  allowUpdate: boolean;
};

type EntityPageListSettings = EntityPageSettings & {
  /** Whether to display search */
  enableSearch: boolean;
  /** Which page to open when an entity is selected */
  navigateToPageId: string;
};

type EntityPage = {
    /** Whether the page display a list of entities or a single entity */
    pageType: EnumEntityPageType,
    /** Defined if pageType is set to SingleRecord */
    singleRecordSettings: EntityPageSingleRecordSettings | null,
    /** Defined if pageType is set to List */
    listSettings: EntityPageListSettings | null,
    /** Wether to display all the fields of the entity */
    showAllFields: boolean,
    /** If showAllFields set to false, speicifies which fields to display */
    showFieldList: string[]
};

enum EnumDataType {
  SingleLineText = 'SingleLineText',
  MultiLineText = 'MultiLineText',
  Email = 'Email',
  State = 'State',
  AutoNumber = 'AutoNumber',
  WholeNumber = 'WholeNumber',
  DateTime = 'DateTime',
  DecimalNumber = 'DecimalNumber',
  File = 'File',
  Image = 'Image',
  Lookup = 'Lookup',
  MultiSelectOptionSet = 'MultiSelectOptionSet',
  OptionSet = 'OptionSet',
  TwoOptions = 'TwoOptions',
  Boolean = 'Boolean',
  GeographicAddress = 'GeographicAddress',
  Id = 'Id',
  CreatedAt = 'CreatedAt',
  UpdatedAt = 'UpdatedAt'
}

type EntityField = {
	/** Programmatic name of the field */
	name: string,
	/** Human readable name of the field */
	displayName: string,
	/** Human readble description of the field */
	description: string,
	/** The type of the field, affects display and validation */
	dataType: EnumDataType,
	/** JSON Schema like object, differs according to dataType */
	properties: Object,
	/** Whether the field is required for the creation of the entity */
	required: boolean,
	/** Whether the field can be used to search for the entity */
	searchable: boolean,
}

type Entity = {
	/** Programmatic name of the entity */
	name: string,
	/** Human readable name of the entity */
	displayName: string,
	/** Human readable name of the entity, plural */
	pluralDisplayName: string,
	/** Human readble description of the entity */
	description: string
	/** The fields of the entity */
	fields: EntityField[]
}

Example Data

{
	"page": {
		"pageType": "SingleRecord",
		"singleRecordSettings": {
			"allowCreation": true,
			"allowDeletion": true,
			"allowUpdate": true,
		},
		"showAllFields": true
	},
	"entity": {
		"name": "Person",
		"displayName": "Person",
		"pluralDisplayName": "Persons",
		"description": "A person is a being that has certain capacities or attributes such as reason, morality, consciousness or self-consciousness, and being a part of a culturally established form of social relations such as kinship, ownership of property, or legal responsibility.",
		"fields": [
			{
				"name": "givenName",
				"displayName": "Given name",
				"description": "A given name is the part of a personal name that identifies a person, potentially with a middle name as well, and differentiates that person from the other members of a group who have a common surname."
				"dataType": "SingleLineText",
				"properties": {
					"minLength": 10,
				},
				"required": true,
				"searchable": true,
			}
		]
	}
}

Requirements

The client side generator gets a configuration as an input, and returns a React app as an output. It should be constructed of the following:

• Static structure (app folder tree and base files)
• Static components for base functionality (layout, menu, sign in page, header, footer...)
• Static components for UI elements (inputs, lists, labels, buttons...)
• Dynamic components based on the given configuration. one of the following:
  • Single-record page for CRUD operation on a given set of fields.
  • Multi-record page for search and navigation to other pages.

Mock Up

Preferred Libraries

• React
• Formik
• React Router DOM
• React Select