# Exchange UI components migration

### Current Origin architecture

graph LR
	EX_UI[Exchange UI components <br>package: origin-backend-core]
	EX_API[Exchange API <br> package: exchange]
	EX_CL[Exchange API client <br> package: origin-backend-client]
	
	DE_UI[Device UI components <br>package: origin-backend-core]
	DE_API[Device API <br> package: origin-backend]
	DE_CL[Device API client <br> package: origin-backend-client]
	
	OTHER_UI[Other UI components... <br>package: origin-backend-core]
	OTHER_API[Other APIs...]
	OTHER_CL[Other API client... <br> package: origin-backend-client]
	
  
	API[Origin API Gateway <br>package: origin-backend-app]
	
	subgraph origin-ui
	EX_UI
	DE_UI
	OTHER_UI
	end
	
	EX_UI-->EX_CL-->API
	DE_UI-->DE_CL-->API
	OTHER_UI-->OTHER_CL-->API
	
	API-->EX_API
	API-->DE_API
	API-->OTHER_API

In our current approach the UI components used to build the `origin-ui` are stored together and published in `origin-ui-core` package.
The main motivation was to reuse the core components when building Origin SDK based projects like PTT, PJM or Foton. On the other hand `origin-ui` package is made as a container package to include `origin-ui-core` and allow slight UI customizations.

## Challenge
Now the challenge is to enable us to build projects that does not require all UI components and APIs to be present, a good example is PJM project where we would deploy Exchange only functionality.
### Exchange API

As far as the API implementation, since we greatly modularize it, it's faity easy to pick and chose required APIs and create specific Origin API Gateway (more on the modules and how to assemble the gateway https://energyweb.atlassian.net/wiki/spaces/OR/pages/885162114/Origin+NEST.js+modules)

### Exchange UI components

Right now the only way to provide the custom UI is to hide unnecessary components using feature toggles. While this approach could work, it does have drawbacks like for e.g a lot of unnecessary code is being loaded.

Onto the solutions

## Solution 1

1) Move all exchange components into a separate package
2) Create "Exchange" higher order component
3) Make sure components can be styled
4) Include the API client code
5) Create `origin-exchange-pjm-ui` as a container to host the "Exchange" component

#### Solution 2

1) Move all exchange components into a separate package (origin-exchange-ui-components), maybe we can have default higher order component
2) Create separate package which would host the micro-frontend compatible "Exchange UI" (`origin-exchange-pjm-ui`) with custom styles etc
3) Include the API client code
4) Create `pjm-origin-ui` for using `single-spa` framework to include pre-built components