navbar: Init solutions navbar dev environment

It provides a web component navbar that solutions UIs can reuse to benefit from : - a centralized authentication method - a theme provider - a language provider
scality · Feb 10, 2021 · 2b78ff4 · 2b78ff4
1 parent 2498a7a
commit 2b78ff4
Show file tree

Hide file tree

Showing 13 changed files with 19,496 additions and 0 deletions.
diff --git a/solutions-ui-navbar/.flowconfig b/solutions-ui-navbar/.flowconfig
@@ -0,0 +1,24 @@
+[ignore]
+.*/node_modules/module-deps/.*
+.*/build/.*
+
+[include]
+src/.*
+
+[libs]
+
+[lints]
+all=error
+untyped-import=off
+unclear-type=off
+sketchy-null=off
+unsafe-getters-setters=warn
+
+[options]
+esproposal.optional_chaining=enable
+react.runtime=automatic
+
+[strict]
+
+[untyped]
+.*/node_modules/react-select/.*
diff --git a/solutions-ui-navbar/.gitignore b/solutions-ui-navbar/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/solutions-ui-navbar/.prettierrc b/solutions-ui-navbar/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all"
+}
diff --git a/solutions-ui-navbar/README.md b/solutions-ui-navbar/README.md
@@ -0,0 +1,56 @@
+# solutions-navbar
+
+Common navbar that can be integrated in metalk8s solution UI to provide the following features : 
+
+ - Authentication : token negociation, token renewal, claims provider
+ - Theming : provide the selected theme to solution UIs
+ - I18n : provide a language selector and expose selected language to solution UIs
+
+## Contribute
+
+```js
+$ npm run start
+```
+
+## Build
+
+```js
+$ npm run build
+```
+
+## Use
+
+```html
+<script src="./dist/main.js"></script>
+<solutions-navbar 
+    oidc-provider-url="https://oidc.provider/" 
+    scopes="openid mail scope"
+
+ />
+```
+
+### Attributes
+
+ - oidc-provider-url : string, required, the component will suffix it with .well-known/openid-configuration to retrieve OIDC configuration
+ - scopes : string, required, scopes negiciated with the oidc provider
+ - client-id : string, required  
+
+ - redirect-url : string, customized redirect uri
+ - options : {[url: string]: {en: string, fr: string}} -- eg : {"/": {en: "Overview", fr: "Vue generale"}, "/platform": {en: "Platform", fr: "Infrastructure"}, ...} - by default we display the full navbar in static mode, this attribute can be used if we want to extends the menu in a specific context
+
+## Methods 
+
+ - logOut(): void - force logOut, might be called when an UI receive a 401 or 403 status code for example
+ - getClaims(): Promise<Claims>
+ - getIdToken(): Promise<string> - jwtToken
+ - getLanguage(): "en" | "fr"
+ - getTheme(): Theme
+ - getOptions(): {[url: string]: {en: string, fr: string}}
+
+## Events 
+
+ - solutions--authenticated, payload: {token, claims: {roles, instanceIds, firstName, lastName, email, scopes, ...}} --- also called when the token is renewed
+ - solutions--logged-out, payload : {}
+ - solutions--theme-changed, payload: {theme}
+ - solutions--language-changed, payload: {language: "en" | "fr"}
+
diff --git a/solutions-ui-navbar/babel.config.json b/solutions-ui-navbar/babel.config.json
@@ -0,0 +1,5 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-flow", ["@babel/preset-react", {
+      "runtime": "automatic"
+    }]]
+}
diff --git a/solutions-ui-navbar/index-template.html b/solutions-ui-navbar/index-template.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>
+
diff --git a/solutions-ui-navbar/index.js b/solutions-ui-navbar/index.js
@@ -0,0 +1,4 @@
+import ReactDOM from "react-dom";
+import Mdx from "./src/index.mdx";
+
+ReactDOM.render(<Mdx />, document.getElementById("app"));