LifeSG Web Frontend Engine

Repository for the web frontend engine

• UI components based on React design system
• Form generation via JSON schema
• To see the schema and fields available, visit our Storybook documentation.

The intention of frontend engine is to take out the heavy lifting of form development and offer a collection of common fields so engineers can develop forms quickly. The form will be defined through a JSON schema so non-engineers can customise the form as well.

Dependencies

Developers are expected to have the following packages installed:

• @lifesg/react-design-system ^v4.0.0-alpha.6
• @lifesg/react-icons ^1.9.0
• react ^17.0.2 || ^18.0.0 || ^19.0.0
• react-dom 17.0.2 || ^18.0.0 || ^19.0.0
• styled-components ^6.1.19

Installation

npm i @lifesg/web-frontend-engine

Usage

import { FrontendEngine } from "@lifesg/web-frontend-engine";

const App = () => {
	return (
		<FrontendEngine
			data={{
				sections: {
					mySection: {
						uiType: "section",
						children: {
							myField: {
								uiType: "text-field",
								label: "My field",
							},
							submit: {
								uiType: "submit",
								label: "Submit",
							},
						},
					},
				},
			}}
		/>
	);
};

export default App;

Contributing to the repo

To contribute to the frontend engine

• Refer to Contributing
• Understand how it works
• Familiarise with the JSON schema