Skip to content

Latest commit

 

History

History
105 lines (68 loc) · 3.19 KB

DEVELOPER.md

File metadata and controls

105 lines (68 loc) · 3.19 KB
Raw

Keip Canvas UI Overview

The UI is built around a canvas that allows you to drag, drop, and connect EIP nodes to create integration flows. In addition to being a design and documentation tool, the UI allows you to configure the behavior of the individual EIP nodes, thus providing the ability to generate deployable integration flow artifacts (e.g. XML).

Requirements

For local development, the following must be installed:

  • Node.js v20
  • npm v10 (other package managers should work as well)

Volta is recommended for setting up your JS environment.

Run the dev server

Clone the repository:

git clone https://github.com/OctoConsulting/keip-canvas.git && cd keip-canvas/ui

Install dependencies:

npm install

Run the development web server:

npm run dev

Dependencies

The UI is mostly written in Typescript and relies heavily on the following libraries:

Structure

The source code is spread across multiple modules, some important ones are highlighted below:

api

Defines the types and interfaces used across the UI components. Notably, the api/generated subdirectory contains code generated from the EIP Json schemas. To use updated source schemas, the code-generation script must be updated to point to the desired schema versions. The API files can then be generated by running npm run codegen. In this specific case, the generated files should be checked into version control to avoid the need to constantly rebuild them.

assets

Holds static assets such as the EIP icon SVGs.

components

Contains all the UI's React components. Developers will likely spend the majority of their time working in here.

json

Stores the EIP Component Definition JSON, which populates the catalog of EIP nodes that a user is able to drag and drop onto the canvas.

singletons

Initializes singleton instances that are required across the application, most notable is the store module. The store module manages the React application's global state, through the use of a Zustand store. The module does not provide direct access to the app store, rather several use-case/event specific custom hooks are exported for use by components. This helps us keep stateful business logic encapsulated inside the store.

Formatting and Linting

Formatting and linting is handled by Prettier and ESLint respectively.

Formatting commands:

# check only
npm run check-format

# apply formatting
npm run format

Run linter:

npm run lint

Rules are configured in:

Consult your IDE's documentation on how to integrate these rules.