chore: rename app, configure microfrontends, update styling and docs (#1

)

* chore: rename app and configure microfrontends

* style: add mojaloop styling to shell

* chore: update docs

* chore: revert code

.env

@@ -2,5 +2,6 @@ REACT_APP_API_BASE_URL=/api
 REACT_APP_AUTH_ENABLED=true
 REACT_APP_MOCK_API=true
 REMOTE_1_URL=http://localhost:3012
-DEV_PORT=3001
-PUBLIC_PATH=http://localhost:3001/
+REMOTE_2_URL=http://localhost:3013
+DEV_PORT=3010
+PUBLIC_PATH=http://localhost:3010/

Dockerfile

@@ -1,6 +1,6 @@
 # First part, build the app
-FROM node:16-alpine as microfrontend-shell-boilerplate-builder
-LABEL stage=microfrontend-shell-boilerplate-builder
+FROM node:16-alpine as reporting-hub-bop-shell-builder
+LABEL stage=reporting-hub-bop-shell-builder
 
 COPY package.json .
 COPY yarn.lock .
@@ -56,4 +56,4 @@ EXPOSE 8080
 
 ENTRYPOINT ["/entrypoint.sh"]
 
-CMD ["caddy", "run", "--watch"]
+CMD ["caddy", "run", "--watch"]

README.md

@@ -1,8 +1,6 @@
-![Build Status](https://github.com/modusintegration/microfrontend-shell-boilerplate/actions/workflows/node.js.yml/badge.svg)
+# Reporting Hub BizOps Shell
 
-# Microfrontend Shell Boilerplate
-
-This is the Shell application boilerplate project to create microfrontends.
+This is the Shell application that accommodates BizOps microfrontends.
 
 It's built in React / Redux / Typescript and it includes some other libraries.
 
@@ -38,7 +36,7 @@ You are now ready to develop :rocket:
 
 ## How to develop
 
-There are a number of rules that need to be followed to ensure good conding standards and keep the application structure compliant with the other Modusbox React applications.
+There are a number of rules that need to be followed to ensure good coding standards and keep the application structure compliant with the other Mojaloop React applications.
 
 Before starting writing code, make sure you follow the [coding guidelines](./docs/coding-guidelines.md).
 
@@ -59,7 +57,7 @@ For detailed instructions on how to contribute, please read the [contribution ru
 
 ## How to deploy
 
-The app is configured to run in a docker image served by an embedded webserver; that makes it portable and convenient when has to run in a kuberneters environment.
+The app is configured to run in a docker image served by an embedded webserver; that makes it portable and convenient when has to run in a kubernetes environment.
 
 For detailed instructions on the deployment process please read [deploying to production](./docs/deploying-to-production.md).
 
@@ -74,4 +72,4 @@ For more details read [configuring the tools](./docs/configuring-the-tools.md).
 - [Microfrontend setup](./docs/microfrontend-setup.md)
 - [Configuring the tools](./docs/configuring-the-tools.md)
 - [Environment variables](./docs/environment-variables.md)
-- [External API](./docs/external-api.md)
+- [External API](./docs/external-api.md)

api/remotes.ts

@@ -1,19 +1,19 @@
 const remotes = [
   {
-    path: '/dynamic-runtime-subpath',
-    label: 'Remote App 1',
+    path: '/iam',
+    label: 'Roles Microfrontend',
     menuComponent: 'Menu',
     appComponent: 'App',
     url: `${process.env.REMOTE_1_URL}/app.js`,
-    appName: 'app',
+    appName: 'reporting_hub_bop_role_ui',
   },
   {
-    path: '/app2',
-    label: 'Remote App 2',
+    path: '/transfers',
+    label: 'Transfers Microfrontend',
     menuComponent: 'Menu',
     appComponent: 'App',
-    url: `${process.env.REMOTE_2_URL}/app2.js`,
-    appName: 'app2',
+    url: `${process.env.REMOTE_2_URL}/app.js`,
+    appName: 'reporting_hub_bop_trx_ui',
   },
 ];
 

docs/docker.md

@@ -12,15 +12,15 @@ The app can be run in a docker container.
 The image can be easily built with `docker build` as follows:
 
 ```bash
-docker build -t microfrontend-shell-boilerplate:local .
+docker build -t reporting-hub-bop-shell:local .
 ```
 
 ### Running a local image
 
 You can run the app container as follows:
 
 ```bash
-docker run -p 8080:8080 microfrontend-shell-boilerplate:local
+docker run -p 8080:8080 reporting-hub-bop-shell:local
 ```
 
 ### Build time configuration
@@ -38,7 +38,7 @@ docker build \
   --build-arg REACT_APP_VERSION=`npm run version --silent` \
   --build-arg REACT_APP_COMMIT=`git rev-parse HEAD`\
   --build-arg PUBLIC_PATH=https://localhost:8080/\
-  -t microfrontend-shell-boilerplate \
+  -t reporting-hub-bop-shell \
   .
 ```
 
@@ -56,5 +56,5 @@ docker run --rm \
   -e LOGOUT_URL="https://your-logout-url" \
   -e AUTH_ENABLED="true" \
   -e MOCK_API="true" \
-   microfrontend-shell-boilerplate
-```
+   reporting-hub-bop-shell
+```

docs/microfrontend-setup.md

@@ -2,9 +2,9 @@
 
 This microfrontend setup is configured to have this project acting as the host.
 
-It is responsible to load the children modules/app at runtime and provide them with some context e.g. auth, routing. 
+It is responsible to load the children modules/app at runtime and provide them with some context e.g. auth, routing.
 
-`microfrontend-shell-boilerplate` is a default host(parent) boilerplate meant to consume one or more child microfrontends such as [microfrontend-boilerplate](https://github.com/modusintegration/microfrontend-boilerplate).
+`reporting-hub-bop-shell` is a default host(parent) boilerplate meant to consume one or more child microfrontends such as [microfrontend-boilerplate](https://github.com/mojaloop/microfrontend-boilerplate).
 
 - [Isolation And Defined Boundary](#isolation-and-defined-boundary)
 - [Webpack Module Federation](#webpack-module-federation)
@@ -42,7 +42,7 @@ You can choose to adopt a different state manager as long as you keep it isolate
 
 #### CSS Namespacing
 
-Due to the nature of the architecture, it's not possible to eliminate the issue of classnames collision. 
+Due to the nature of the architecture, it's not possible to eliminate the issue of classnames collision.
 
 It's good practice to namespace your css classnames in the remote children and keep the host ones very specific.
 
@@ -132,5 +132,5 @@ You can modify it accordingly to your needs. It's worth noting that you should a
 
  - [Module Federation Docs](https://webpack.js.org/concepts/module-federation/)
  - [Module Federation Examples](https://github.com/module-federation/module-federation-examples)
- - [Microfrontend Boilerplate](https://github.com/modusintegration/microfrontend-boilerplate)
+ - [Microfrontend Boilerplate](https://github.com/mojaloop/microfrontend-boilerplate)
  - [Jamstack](https://jamstack.org/)

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "microfrontend-shell-boilerplate",
+  "name": "@mojaloop/reporting-hub-bop-shell",
   "version": "1.5.0",
   "description": "",
   "main": "index.js",
@@ -103,6 +103,7 @@
     "stylelint-scss": "^3.20.1",
     "ts-loader": "8.1.0",
     "typescript": "4.1.2",
+    "url-loader": "^4.1.1",
     "webpack": "^5.48.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3"

src/App/App.scss

@@ -1,6 +1,6 @@
 .layout__container {
   .rc-layout__side-menu {
-    flex-basis: 240px;
+    flex-basis: 200px;
     transform: translateX(-100%);
     opacity: 0.5;
     animation: fadeInMenu 0.3s ease-out forwards;
@@ -10,6 +10,32 @@
     transform: translateY(-100%);
     opacity: 0.5;
     animation: fadeInNavbar 0.3s ease-out forwards;
+    flex: 0 0 55px;
+    width: 100%;
+    user-select: none;
+    height: 55px;
+    background: #00a3ff;
+    border-bottom: 5px solid #fde74c;
+    background-image: url('/public/hero-bg-interior.png');
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-origin: border-box;
+    display: flex;
+    align-items: center;
+  }
+
+  .rc-layout__navbar__controls {
+    margin-left: 140px;
+  }
+
+  .rc-layout__navbar__logo {
+    background-image: url('/public/mojaloop-white.png');
+    background-size: 141px 45px;
+    width: 141px;
+    height: 45px;
+    margin-left: 10px;
+    margin-top: 5px;
+    position: absolute;
   }
 }
 

src/App/App.tsx

@@ -21,7 +21,9 @@ function App({ onMount, remotes }: AppProps) {
 
   return (
     <Layout className="layout__container">
-      <Layout.Navbar username="Guest User" title="Shell Application Container" />
+      <Layout.Navbar username="Guest User" title="Business Operations Portal">
+        <div className="rc-layout__navbar__logo" />
+      </Layout.Navbar>
       <Layout.Content>{content}</Layout.Content>
     </Layout>
   );

src/App/Menu/Menu.scss

@@ -1,3 +1,3 @@
 .app__menu {
-  width: 300px;
+  width: 200px;
 }

src/App/_mockData.ts

@@ -1,11 +1,19 @@
 const remotes = [
   {
-    path: '/dynamic-runtime-subpath',
-    label: 'Remote App 1',
+    path: '/iam',
+    label: 'Roles Microfrontend',
     menuComponent: 'Menu',
     appComponent: 'App',
-    url: `${process.env.REMOTE_1_URL || 'https://localhost:8081'}/app.js`,
-    appName: 'app',
+    url: `${process.env.REMOTE_1_URL}/app.js`,
+    appName: 'reporting_hub_bop_role_ui',
+  },
+  {
+    path: '/transfers',
+    label: 'Transfers Microfrontend',
+    menuComponent: 'Menu',
+    appComponent: 'App',
+    url: `${process.env.REMOTE_2_URL}/app.js`,
+    appName: 'reporting_hub_bop_trx_ui',
   },
 ];
 

src/index.scss

@@ -8,6 +8,7 @@
   $themed-border-bottom: true,
   $themed-border-left: true,
   $themed-border-right: true,
+  $family: Ubuntu,
 );
 
 * {
@@ -20,7 +21,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-overflow-scrolling: touch;
-  font-family: Fira Sans, sans-serif;
+  font-family: Ubuntu, sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
@@ -62,7 +63,7 @@ h5,
 h6 {
   color: #3a3b3c;
   font-style: normal;
-  font-family: Fira Sans, sans-serif;
+  font-family: Ubuntu, sans-serif;
   font-weight: 100;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -102,7 +103,7 @@ p {
   margin: 20px 0;
   font-size: 1.4rem;
   letter-spacing: 0;
-  font-family: Fira Sans, sans-serif;
+  font-family: Ubuntu, sans-serif;
   font-style: normal;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;

webpack.config.js

@@ -50,6 +50,10 @@ module.exports = {
         target: 'http://localhost',
         secure: false,
       },
+      '/role-api': {
+        target: 'http://localhost:3012',
+        secure: false,
+      },
     },
   },
   output: {
@@ -106,6 +110,14 @@ module.exports = {
           },
         },
       },
+      {
+        test: /\.(png|jpg|gif)$/i,
+        use: [
+          {
+            loader: 'url-loader',
+          },
+        ],
+      },
     ],
   },
   plugins: [

yarn.lock

@@ -9387,7 +9387,7 @@ schema-utils@^2.6.5, schema-utils@^2.7.0:
     ajv "^6.12.4"
     ajv-keywords "^3.5.2"
 
-schema-utils@^3.1.0, schema-utils@^3.1.1:
+schema-utils@^3.0.0, schema-utils@^3.1.0, schema-utils@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281"
   integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==
@@ -10675,6 +10675,15 @@ urix@^0.1.0:
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
   integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
 
+url-loader@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.1.tgz#28505e905cae158cf07c92ca622d7f237e70a4e2"
+  integrity sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==
+  dependencies:
+    loader-utils "^2.0.0"
+    mime-types "^2.1.27"
+    schema-utils "^3.0.0"
+
 url-parse@^1.4.3, url-parse@^1.5.3:
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.3.tgz#71c1303d38fb6639ade183c2992c8cc0686df862"