Set up type safe client server communication

[raix]

Summary & Motivation

We want the front-end development environment to use modern React APIs, adding the accessibility and styling ergonomics while keeping type safety when calling the API.

Accessibility can be difficult to add if it's an afterthought. The React Aria Components are based on solid ground and years of hard work and effort to create the best in class components.

Forms in React have always been hard, often involving a ton of libraries - we decided to go for the latest React APIs useFormState as it brings simplicity and readability. The code should feel familiar to developers using the latest React APIs in NextJS.

Zod is one of the best schema validation libraries out there, providing common validations and the ability to validate and parse complex and even nested structures. Infer allows developers to infer the TypeScript type from a Zod Schema.

OpenAPI-fetch is an ultra-slim and performant wrapper for fetch, enabling type-safe usage of API endpoints. Use Swashbuckle CLI to generate a swagger.json when building the WebApi, and use openapi-typescript CLI to generate a TypeScript definition file that can be used for the fetch API.

• Add WebApp.esproj file enabling web development in Rider and Visual Studio. .esproj is the new project config and will be replacing .njsproj files
• Set up build of Api typings, creating a generated typings file to be used by the API client
• Configure openapi-fetch to call the Api
• Configure React to enable useFormState APIs. This API is part of NextJS v14 server actions and an official to be React API for handling form data
• Create an example using the latest React Aria Components form validation support. This greatly simplifies browser, client and server validation in forms and plays nicely with useFormState and zod
• Configure CORS support in the API for development mode for now (Planning to set up a reverse proxy)

Finally, update the GitHub workflow to install Bun and node modules, and ensure that the WebApi can generate the TypeScript type definition in the GitHub runner.

Checklist

• I have added a Label to the pull-request
• I have added tests, and done manual regression tests
• I have updated the documentation, if necessary

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

100.0% Coverage
0.0% Duplication

The version of Java (11.0.21) you have used to run this analysis is deprecated and we will stop accepting it soon. Please update to at least Java 17.
Read more here