Add more Luigi Container examples (#3670)

* added webcomponent container example

* added iframe container example

* added compound container example

* changed compound container example

* fixed compound container example + clean up

* change container README

* added simple navigation for the 3 container examples, added script to start examples

* added README to container/examples, updated the docu website

* applied suggested changes + clean up

* applied suggestions

* Update container/README.md

Co-authored-by: Ndricim <ndricim.rrapi@sap.com>

* Update container/README.md

Co-authored-by: Ndricim <ndricim.rrapi@sap.com>

---------

Co-authored-by: Ndricim <ndricim.rrapi@sap.com>

container/.gitignore

@@ -1,4 +1,6 @@
 /node_modules/
+
+/examples/bundle.js
 /public/bundle.js
 /public/bundle.js.map
 /public/bundle.d.ts

container/README.md

@@ -2,9 +2,9 @@
 # Luigi Container 
 
 ## Overview
-Luigi Container is a [web component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) that can be included in an arbitrary application, in order to render a Luigi micro frontend (iframe or web component based) without the need of being a Luigi Core application.
+[Luigi Container](https://docs.luigi-project.io/docs/luigi-container) is a [web component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) that can be included in an arbitrary application, in order to render a Luigi micro frontend (iframe or web component based) without the need of being a Luigi Core application.
 
-## Usage
+## Installation
 1. Install the container package: `@luigi-project/container` 
 
 ```
@@ -13,40 +13,29 @@ npm install @luigi-project/container
 
 2. Import it into your project:
 
-
 ```
 import '@luigi-project/container';
 ```
 
-3. You can now use the Luigi container as follows anywhere in your application:
+## Usage
+You can now use the Luigi container as follows anywhere in your application:
 
 ```
     <luigi-container 
         viewURL="https://www.example-microfronted.com" 
-        webcomponent="false" 
+        webcomponent="false"
         label="my label"
         context='{"label": "Calendar"}'>
     </luigi-container>
 ```
+You can find simple examples that use [webcomponents](https://github.com/SAP/luigi/tree/main/container/examples/container-wc) and [iframes](https://github.com/SAP/luigi/tree/main/container/examples/container-iframe).
 
-4. In a similar way you can use the Luigi compound container as follows:
+4. In a similar way you can use the Luigi **compound container** to insert multiple microfrontends as follows:
 
 ```
     <luigi-compound-container 
         context='{"label": "Dashboard"}'
         compoundConfig = { your config here }>
     </luigi-compound-container>
 ```
-
-
-## Development 
-
-Build the bundle and start an example app: 
-
-```bash
-npm install
-npm run build
-npm start
-```
-
-Check `./test-app/index.html` for how it is used.
+An example can be found at [./examples/compound-container/index.html](https://github.com/SAP/luigi/tree/main/container/examples/compound-container).

container/examples/README.md

@@ -0,0 +1,68 @@
+
+# Luigi Container Examples
+
+## Usage
+To run the examples, go to `../container` and run the following commands:
+
+```bash
+npm install
+npm run build
+npm run start-examples
+```
+This will load a page with 3 different Luigi container examples:
+
+1. A **webcomponent** based microfrontend container:
+```
+    <luigi-container
+      viewURL="./myWebComponent.js"
+      webcomponent="true"
+      context='{"content":"some extra content"}'
+    ></luigi-container>
+```
+When using web components the [viewURL](https://docs.luigi-project.io/docs/navigation-parameters-reference?section=viewurl) parameter expects a javacript file that contains the web component.
+
+2. An **iframe** based microfrontend container:
+```
+    <luigi-container
+      viewURL="./microfrontend.html"
+    ></luigi-container>
+```
+When using iframes the [viewURL](https://docs.luigi-project.io/docs/navigation-parameters-reference?section=viewurl) parameter expects a HTML file that contains the iframe.
+
+3. A **compound container** that inserts 4 microfrontends in one page:
+```
+    <luigi-compound-container
+      id="compound1"
+      webcomponent="true"
+      context='{"content":"some extra content"}'
+    ></luigi-compound-container>
+```
+The *compoundConfig* parameter works similar to the [compound parameter](https://docs.luigi-project.io/docs/navigation-parameters-reference?section=compound). It lets you arrange microfrontends in a customizable grid layout. In this example we have 2 columns and 4 web components.
+
+```
+    yourCompoundContainerElement.compoundConfig = {
+      renderer: { 
+        use: 'grid', 
+        config: { 
+          columns: '1fr 1fr', 
+          gap: '20px',
+        } 
+      },
+      children: [
+        {
+          id: 'input1',
+          viewUrl: './myCompoundWebComponent1.js',
+        },
+        {
+          viewUrl: './myCompoundWebComponent2.js',
+        },
+        {
+          viewUrl: './myCompoundWebComponent3.js',
+        },
+        {
+          viewUrl: './myCompoundWebComponent4.js',
+        },
+      ]
+    };
+```
+

container/examples/compound-container/index.html

@@ -0,0 +1,46 @@
+<!-- .js => webcomponent -->
+<!-- .html => iFrame -->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Luigi Compound Container</title>
+  </head>
+
+  <body>
+    <luigi-compound-container
+      id="compound1"
+      webcomponent="true"
+      context='{"content":"some extra content"}'
+    ></luigi-compound-container>
+  </body>
+
+  <script type="module">
+    // simple Luigi Container pacakge bundle import
+    import '../bundle.js';
+    document.getElementById('compound1').compoundConfig = {
+      renderer: { 
+        use: 'grid', 
+        config: {
+          columns: '1fr 1fr', 
+          gap: '20px'
+        } 
+      },
+      children: [
+        {
+          viewUrl: "./compound-container/myCompoundWebComponent1.js",
+        },
+        {
+          viewUrl: "./compound-container/myCompoundWebComponent2.js",
+        },
+        {
+          viewUrl: "./compound-container/myCompoundWebComponent3.js",
+        },
+        {
+          viewUrl: "./compound-container/myCompoundWebComponent4.js",
+        },
+      ]
+    };
+  </script>
+</html>

container/examples/compound-container/myCompoundWebComponent1.js

@@ -0,0 +1,17 @@
+/**
+ * This class is used to test LuigiClient webcomponent based functionality
+ */
+export default class extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    const template = document.createElement('template');
+    template.innerHTML = `<section><h2 style="border: solid blue 2px;" id="paragraph"> Hello From Web Component 1 </h2></section>`;
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.$paragraph = shadowRoot.getElementById('paragraph');
+  }
+
+  set context(ctx) {
+    this.$paragraph.innerHTML += ctx.content;
+  }
+}

container/examples/compound-container/myCompoundWebComponent2.js

@@ -0,0 +1,13 @@
+/**
+ * This class is used to test LuigiClient webcomponent based functionality
+ */
+export default class extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    const template = document.createElement('template');
+    template.innerHTML = `<section><h2 style="border: solid blue 2px;" id="paragraph"> Hello From Web Component 2 </h2></section>`;
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.$paragraph = shadowRoot.getElementById('paragraph');
+  }
+}

container/examples/compound-container/myCompoundWebComponent3.js

@@ -0,0 +1,13 @@
+/**
+ * This class is used to test LuigiClient webcomponent based functionality
+ */
+export default class extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    const template = document.createElement('template');
+    template.innerHTML = `<section><h2 style="border: solid blue 2px;" id="paragraph"> Hello From Web Component 3 </h2></section>`;
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.$paragraph = shadowRoot.getElementById('paragraph');
+  }
+}

container/examples/compound-container/myCompoundWebComponent4.js

@@ -0,0 +1,13 @@
+/**
+ * This class is used to test LuigiClient webcomponent based functionality
+ */
+export default class extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    const template = document.createElement('template')
+    template.innerHTML = `<section><h2 style="border: solid blue 2px;" id="paragraph"> Hello From Web Component 4 </h2></section>`;
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.$paragraph = shadowRoot.getElementById('paragraph');
+  }
+}

container/examples/container-iframe/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Luigi iFrame Container</title>
+  </head>
+
+  <script type="module">
+    // simple Luigi Container pacakge bundle import
+    import '../bundle.js';
+  </script>
+
+  <body>
+    <luigi-container
+      viewURL="./microfrontend.html"
+    ></luigi-container>
+  </body>
+</html>

container/examples/container-iframe/microfrontend.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title></title>
+    <meta charset="utf-8" />
+  </head>
+
+  <body style="border: solid blue 2px;">
+    <div>
+      <h1>This is an iframe based microfrontend container</h1>
+    </div>
+  </body>
+
+</html>

container/examples/container-wc/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Luigi Webcomponent Container</title>
+  </head>
+
+  <script type="module">
+    // simple Luigi Container pacakge bundle import
+    import '../bundle.js';
+  </script>
+
+  <body>
+    <luigi-container
+      viewURL="./container-wc/myWebcomponent.js"
+      webcomponent="true"
+      context='{"content":" -- some content --"}'
+    ></luigi-container>
+  </body>
+</html>

container/examples/container-wc/myWebComponent.js

@@ -0,0 +1,17 @@
+/**
+ * This class is used to test LuigiClient webcomponent based functionality
+ */
+export default class extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    const template = document.createElement('template');
+    template.innerHTML = `<h1 style="border: solid blue 2px;" id="paragraph">This is a webcomponent based microfrontend container </h1>`;
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.$paragraph = shadowRoot.getElementById('paragraph');
+  }
+
+  set context(ctx) {
+    this.$paragraph.innerHTML += ctx.content;
+  }
+}

container/examples/index.html

@@ -0,0 +1,63 @@
+ <!-- This file is only used as a fast way to showcase different Luigi Container examples in one page.  -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Simple Navigation</title>
+<style>
+  /* Simple CSS for navigation */
+  body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+  }
+  nav {
+    background-color: rgb(191, 189, 189);
+    padding: 10px 0;
+    color: black;
+    text-align: center;
+  }
+  nav ul {
+    list-style-type: none;
+    padding: 0;
+  }
+  nav ul li {
+    display: inline;
+    padding: 10px;
+    background-color: rgb(251, 251, 251);
+  }
+  nav ul li a {
+    color: black;
+    text-decoration: none;
+  }
+  nav ul li a:hover {
+    text-decoration: underline;
+  }
+
+  iframe {
+    width: 100%;
+    height: calc(100vh - 70px); 
+    border: none;
+  }
+</style>
+</head>
+<body>
+
+<nav>
+  <ul>
+    <li><a href="javascript:void(0);" onclick="loadPage('container-iframe/index.html')">Container Iframe Example</a></li>
+    <li><a href="javascript:void(0);" onclick="loadPage('container-wc/index.html')">Container Web Component Example</a></li>
+    <li><a href="javascript:void(0);" onclick="loadPage('compound-container/index.html')">Compound Container Example</a></li>
+  </ul>
+</nav>
+
+<iframe id="contentFrame" src="container-wc/index.html"></iframe>
+
+<script>
+ function loadPage(pageUrl) {
+    document.getElementById('contentFrame').src = pageUrl;
+  }
+</script>
+</body>
+</html>