@panoramax/web-viewer 3.2.3-develop-d7e5a16d → 3.2.3-develop-6257391e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.2.3-develop-d7e5a16d",
+  "version": "3.2.3-develop-6257391e",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",
@@ -9,7 +9,7 @@
     "build": "node scripts/build.js",
     "test": "node scripts/test.js",
     "lint": "npx eslint --fix src/*.js src/**/*.js",
-    "doc": "documentation build src -f md --markdown-toc-max-depth 2 -o ./docs/02_Usage.md",
+    "doc": "node scripts/doc.js",
     "coverage": "node scripts/test.js --coverage --watchAll=false",
     "trypublish": "npm publish || true"
   },
@@ -60,6 +60,7 @@
     "jest": "^27.4.3",
     "jest-resolve": "^29.4.1",
     "jest-watch-typeahead": "^2.1.1",
+    "jsdoc-to-markdown": "^9.1.1",
     "mini-css-extract-plugin": "^2.7.2",
     "postcss": "^8.4.21",
     "postcss-flexbugs-fixes": "^5.0.2",
@@ -96,9 +97,10 @@
     "@photo-sphere-viewer/gallery-plugin": "5.11.0-beta.1",
     "@photo-sphere-viewer/markers-plugin": "5.11.0-beta.1",
     "@photo-sphere-viewer/virtual-tour-plugin": "5.11.0-beta.1",
-    "documentation": "^14.0.1",
+    "lit": "^3.2.1",
     "maplibre-gl": "^4.7.1",
-    "pmtiles": "^3.2.0"
+    "pmtiles": "^3.2.0",
+    "query-selector-shadow-dom": "^1.0.1"
   },
   "eslintConfig": {
     "env": {
@@ -188,10 +190,11 @@
     "setupFiles": [
       "react-app-polyfill/jsdom"
     ],
-    "setupFilesAfterEnv": [],
+    "setupFilesAfterEnv": [
+      "<rootDir>/config/jest/mocks.js"
+    ],
     "testMatch": [
-      "<rootDir>/tests/**/__tests__/**/*.{js,jsx,ts,tsx}",
-      "<rootDir>/tests/**/*.{spec,test}.{js,jsx,ts,tsx}"
+      "<rootDir>/tests/**/*.test.js"
     ],
     "testEnvironment": "jsdom",
     "transform": {

package/public/editor.html

@@ -13,10 +13,7 @@
     }
     #editor.fullpage {
       position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
+      inset: 0;
       height: unset;
       width: unset;
       margin: 0;
@@ -27,30 +24,25 @@
 <noscript>
   You need to enable JavaScript to run this app.
 </noscript>
-<div id="editor" class="fullpage"></div>
-<script>
-  var editor;
-  window.onload = () => {
-    editor = new Panoramax.Editor(
-      "editor",
-      "https://panoramax.openstreetmap.fr/api",
-      {
-        selectedSequence: "ecfe4b2c-0acd-4d3a-a10d-c3e6818755c8",
-        selectedPicture:  "329af5c6-4761-4a6d-9c1e-674fd6daa8b6",
-        background: "aerial",
-        raster: {
-          type: "raster",
-          tiles: [
-            "https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&STYLE=normal&FORMAT=image/jpeg&TILEMATRIXSET=PM_0_21&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
-          ],
-          minzoom: 0,
-          maxzoom: 21,
-          attribution: "&copy; IGN",
-          tileSize: 256
-        }
-      }
-    );
-  };
-</script>
+
+<pnx-editor
+  id="editor"
+  class="fullpage"
+  endpoint="https://panoramax.openstreetmap.fr/api"
+  sequence="ecfe4b2c-0acd-4d3a-a10d-c3e6818755c8"
+  picture="329af5c6-4761-4a6d-9c1e-674fd6daa8b6"
+  background="aerial"
+  raster='{
+    "type": "raster",
+    "tiles": [
+      "https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&STYLE=normal&FORMAT=image/jpeg&TILEMATRIXSET=PM_0_21&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
+    ],
+    "minzoom": 0,
+    "maxzoom": 21,
+    "attribution": "&copy; IGN",
+    "tileSize": 256
+  }'
+></pnx-editor>
+
 </body>
 </html>

package/public/index.html

@@ -34,7 +34,7 @@
     You need to enable JavaScript to run this app.
   </noscript>
   <h1>Panoramax JavaScript Client</h1>
-  <p>Panoramax JS library offers different views to suit your needs.</p>
+  <p>Panoramax JS library offers different views to suit your needs.<br />You can also give a look at the <a href="./widgets.html">widgets test page</a>.</p>
 
   <div class="allViews">
     <div class="oneView">
@@ -44,8 +44,8 @@
     </div>
 
     <div class="oneView">
-      <h2 id="map">Standalone Map</h2>
-      <p>A map-only view, to locate sequences and pictures.<br /><a href="./map.html">Full page</a> | <a href="https://gitlab.com/panoramax/clients/web-viewer/-/blob/develop/docs/02_Usage.md#standalonemap">Docs</a></p>
+      <h2 id="map">Coverage Map</h2>
+      <p>A map-only view, to locate sequences and pictures.<br /><a href="./map.html">Full page</a> | <a href="https://gitlab.com/panoramax/clients/web-viewer/-/blob/develop/docs/02_Usage.md#CoverageMap">Docs</a></p>
       <iframe src="./map.html"></iframe>
     </div>
 

package/public/map.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <title>Panoramax Standalone Map</title>
+  <title>Panoramax Coverage Map</title>
   <style>
     #map {
       position: relative;
@@ -27,27 +27,28 @@
 <noscript>
   You need to enable JavaScript to run this app.
 </noscript>
-<div id="map" class="fullpage"></div>
+
+<pnx-coverage-map
+  id="coverage"
+  class="fullpage"
+  endpoint="https://api.panoramax.xyz/api"
+/>
+
 <script>
-  var map;
-  window.onload = () => {
-    map = new Panoramax.StandaloneMap(
-      "map",
-      "https://api.panoramax.xyz/api",
-    );
+  // Retrieve component from DOM
+  var coverage = document.getElementById("coverage");
 
-    map.addEventListener("ready", () => {
-      // Show in console selected seq/pic
-      map.addEventListener("select", e => {
-        console.log("Selected sequence", e.detail.seqId, "picture", e.detail.picId);
-      });
+  coverage.addEventListener("ready", () => {
+    // Listen to sequence hovered on map
+    coverage.map.on("sequence-hover", e => {
+      console.log("Hovered sequence", e.seqId);
+    });
 
-      // Show in console hovered seq
-      map.addEventListener("map:sequence-hover", e => {
-        console.log("Hovered sequence", e.detail.seqId);
-      });
+    // Listen to user clicks on map
+    coverage.addEventListener("select", e => {
+      console.log("Selected sequence", e.detail.seqId, "picture", e.detail.picId);
     });
-  };
+  }, {once: true});
 </script>
 </body>
 </html>

package/public/viewer.html

@@ -27,9 +27,23 @@
 <noscript>
   You need to enable JavaScript to run this app.
 </noscript>
-<div id="viewer" class="fullpage"></div>
+
+<pnx-viewer
+  id="viewer"
+  class="fullpage"
+  map='{"raster": {
+    "type": "raster",
+    "tiles": [
+      "https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&STYLE=normal&FORMAT=image/jpeg&TILEMATRIXSET=PM_0_21&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
+    ],
+    "minzoom": 0,
+    "maxzoom": 21,
+    "attribution": "&copy; IGN",
+    "tileSize": 256
+  }}'
+/>
+
 <script>
-  var viewer;
   var servers = {
     meta: "https://api.panoramax.xyz/api",
     ign: "https://panoramax.ign.fr/api",
@@ -41,28 +55,8 @@
   var server = servers[urlParams.get("server") || "meta"];
 
   window.onload = () => {
-    viewer = new Panoramax.Viewer(
-      "viewer",
-      server,
-      {
-        widgets: {
-          iframeBaseURL: "https://api.panoramax.xyz/"
-        },
-        map: {
-          startWide: true,
-          raster: {
-            type: "raster",
-            tiles: [
-              "https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&STYLE=normal&FORMAT=image/jpeg&TILEMATRIXSET=PM_0_21&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
-            ],
-            minzoom: 0,
-            maxzoom: 21,
-            attribution: "&copy; IGN",
-            tileSize: 256
-          }
-        }
-      }
-    );
+    var viewer = document.getElementById("viewer");
+    viewer.setAttribute("endpoint", server);
   };
 </script>
 </body>

package/public/widgets.html

@@ -0,0 +1,265 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<title>Panoramax Widgets</title>
+	<style>
+		body {
+			font-family: sans-serif;
+			padding-bottom: 100px;
+		}
+		h2 { text-align: center; }
+		.test-bench {
+			display: flex;
+			width: 100%;
+			max-width: 600px;
+			margin: 7px auto;
+			justify-content: space-between;
+			align-items: center;
+		}
+		.test-bench h3 { margin: 0; }
+		hr.test-sep {
+			width: 100%;
+			max-width: 600px;
+		}
+	</style>
+</head>
+<body>
+	<noscript>You need to enable JavaScript to run this app.</noscript>
+	<h1>Panoramax widgets</h1>
+	<p>Test page for common Panoramax viewer widgets</p>
+
+	<h2>Button</h2>
+	<div class="test-bench"><h3>Text + click</h3><pnx-button onclick="alert('Stuff')">Click to do stuff</pnx-button></div>
+	<div class="test-bench"><h3>Icon</h3><pnx-button>⚙️ Settings</pnx-button></div>
+	<div class="test-bench"><h3>Active</h3><pnx-button active="true">Settings</pnx-button></div>
+	<div class="test-bench">
+		<h3>CSS override</h3>
+		<div style="width: 50%; display: flex; gap: 5px; max-width: 300px">
+			<pnx-button style="width: 50%;">⚙️ Settings</pnx-button>
+			<pnx-button style="width: 50%;">🖨️ Print</pnx-button>
+		</div>
+	</div>
+	<hr class="test-sep" />
+	<div class="test-bench"><h3>Full</h3><pnx-button kind="full">⚙️ Settings</pnx-button></div>
+	<div class="test-bench"><h3>Full active</h3><pnx-button kind="full" active>⚙️ Settings</pnx-button></div>
+	<div class="test-bench"><h3>Full L</h3><pnx-button kind="full" size="l">⚙️</pnx-button></div>
+	<div class="test-bench"><h3>Full XXL</h3><pnx-button kind="full" size="xxl">⚙️</pnx-button></div>
+	<div class="test-bench"><h3>Outline</h3><pnx-button kind="outline">⚙️ Settings</pnx-button></div>
+	<div class="test-bench"><h3>Outline active</h3><pnx-button kind="outline" active>⚙️ Settings</pnx-button></div>
+	<div class="test-bench"><h3>Outline L</h3><pnx-button kind="outline" size="l">⚙️</pnx-button></div>
+	<div class="test-bench"><h3>Outline XXL</h3><pnx-button kind="outline" size="xxl">⚙️</pnx-button></div>
+	<div class="test-bench"><h3>Flat</h3><pnx-button kind="flat">⚙️ Settings</pnx-button></div>
+	<div class="test-bench"><h3>Flat active</h3><pnx-button kind="flat" active>⚙️ Settings</pnx-button></div>
+	<div class="test-bench"><h3>Flat L</h3><pnx-button kind="flat" size="l">⚙️</pnx-button></div>
+	<div class="test-bench"><h3>Flat XXL</h3><pnx-button kind="flat" size="xxl">⚙️</pnx-button></div>
+
+	<h2>Link Button</h2>
+	<div class="test-bench"><h3>None set</h3><pnx-link-button>Click for nothing</pnx-link-button></div>
+	<div class="test-bench"><h3>All set</h3><pnx-link-button target="_blank" href="https://panoramax.fr" title="Do stuff">Click to do stuff</pnx-link-button></div>
+
+	<h2>Copy button</h2>
+	<div class="test-bench"><h3>Default + text</h3><pnx-copy-button text="copypasta1"></pnx-copy-button></div>
+	<div class="test-bench"><h3>Custom + text</h3><pnx-copy-button text="copypasta2">🌐 Share URL</pnx-copy-button></div>
+	<div class="test-bench">
+		<h3>Default + input</h3>
+		<div style="display: flex; gap: 5px; align-items: center;">
+			<input type="text" value="copypasta3" id="copy-input-1" />
+			<pnx-copy-button input="copy-input-1"></pnx-copy-button>
+		</div>
+	</div>
+
+	<h2>Button Group</h2>
+	<div class="test-bench">
+		<h3>Full Row x2</h3>
+		<div>
+			<pnx-button-group dir="row">
+				<pnx-button>☹️</pnx-button>
+				<pnx-button>🙂</pnx-button>
+			</pnx-button-group>
+		</div>
+	</div>
+	<div class="test-bench">
+		<h3>Full Row x3</h3>
+		<div>
+			<pnx-button-group dir="row">
+				<pnx-button>☹️</pnx-button>
+				<pnx-button>😐</pnx-button>
+				<pnx-button>🙂</pnx-button>
+			</pnx-button-group>
+		</div>
+	</div>
+	<div class="test-bench">
+		<h3>Full Row mixed</h3>
+		<div>
+			<pnx-button-group dir="row">
+				<pnx-button>☹️</pnx-button>
+				<pnx-link-button>😐</pnx-link-button>
+				<pnx-copy-button>🙂</pnx-copy-button>
+			</pnx-button-group>
+		</div>
+	</div>
+	<div class="test-bench">
+		<h3>Full Column x2</h3>
+		<div>
+			<pnx-button-group dir="column">
+				<pnx-button>☹️</pnx-button>
+				<pnx-button>🙂</pnx-button>
+			</pnx-button-group>
+		</div>
+	</div>
+	<div class="test-bench">
+		<h3>Full Column x3</h3>
+		<div>
+			<pnx-button-group dir="column">
+				<pnx-button>☹️</pnx-button>
+				<pnx-button>😐</pnx-button>
+				<pnx-button>🙂</pnx-button>
+			</pnx-button-group>
+		</div>
+	</div>
+	<div class="test-bench">
+		<h3>Full Column mixed</h3>
+		<div>
+			<pnx-button-group dir="column">
+				<pnx-button>☹️</pnx-button>
+				<pnx-link-button>😐</pnx-link-button>
+				<pnx-copy-button>🙂</pnx-copy-button>
+			</pnx-button-group>
+		</div>
+	</div>
+	<hr class="test-sep" />
+	<div class="test-bench">
+		<h3>Outline Row x2</h3>
+		<div>
+			<pnx-button-group dir="row">
+				<pnx-button kind="outline">☹️</pnx-button>
+				<pnx-button kind="outline">🙂</pnx-button>
+			</pnx-button-group>
+		</div>
+	</div>
+	<div class="test-bench">
+		<h3>Outline Row x3</h3>
+		<div>
+			<pnx-button-group dir="row">
+				<pnx-button kind="outline">☹️</pnx-button>
+				<pnx-button kind="outline">😐</pnx-button>
+				<pnx-button kind="outline">🙂</pnx-button>
+			</pnx-button-group>
+		</div>
+	</div>
+	<div class="test-bench">
+		<h3>Outline Column x2</h3>
+		<div>
+			<pnx-button-group dir="column">
+				<pnx-button kind="outline">☹️</pnx-button>
+				<pnx-button kind="outline">🙂</pnx-button>
+			</pnx-button-group>
+		</div>
+	</div>
+	<div class="test-bench">
+		<h3>Outline Column x3</h3>
+		<div>
+			<pnx-button-group dir="column">
+				<pnx-button kind="outline">☹️</pnx-button>
+				<pnx-button kind="outline">😐</pnx-button>
+				<pnx-button kind="outline">🙂</pnx-button>
+			</pnx-button-group>
+		</div>
+	</div>
+	<hr class="test-sep" />
+	<div class="test-bench">
+		<h3>Flat Row x2</h3>
+		<div>
+			<pnx-button-group dir="row">
+				<pnx-button kind="flat">☹️</pnx-button>
+				<pnx-button kind="flat">🙂</pnx-button>
+			</pnx-button-group>
+		</div>
+	</div>
+	<div class="test-bench">
+		<h3>Flat Row x3</h3>
+		<div>
+			<pnx-button-group dir="row">
+				<pnx-button kind="flat">☹️</pnx-button>
+				<pnx-button kind="flat">😐</pnx-button>
+				<pnx-button kind="flat">🙂</pnx-button>
+			</pnx-button-group>
+		</div>
+	</div>
+	<div class="test-bench">
+		<h3>Flat Column x2</h3>
+		<div>
+			<pnx-button-group dir="column">
+				<pnx-button kind="flat">☹️</pnx-button>
+				<pnx-button kind="flat">🙂</pnx-button>
+			</pnx-button-group>
+		</div>
+	</div>
+	<div class="test-bench">
+		<h3>Flat Column x3</h3>
+		<div>
+			<pnx-button-group dir="column">
+				<pnx-button kind="flat">☹️</pnx-button>
+				<pnx-button kind="flat">😐</pnx-button>
+				<pnx-button kind="flat">🙂</pnx-button>
+			</pnx-button-group>
+		</div>
+	</div>
+	<hr class="test-sep" />
+	<div class="test-bench">
+		<h3>Row XL</h3>
+		<div>
+			<pnx-button-group size="xl" dir="row">
+				<pnx-button kind="flat">☹️</pnx-button>
+				<pnx-button kind="flat">😐</pnx-button>
+				<pnx-button kind="flat">🙂</pnx-button>
+			</pnx-button-group>
+		</div>
+	</div>
+	<div class="test-bench">
+		<h3>Column XL</h3>
+		<div>
+			<pnx-button-group size="xl" dir="column">
+				<pnx-button kind="flat">☹️</pnx-button>
+				<pnx-button kind="flat">😐</pnx-button>
+				<pnx-button kind="flat">🙂</pnx-button>
+			</pnx-button-group>
+		</div>
+	</div>
+
+	<h2>5-stars grade</h2>
+	<div class="test-bench"><h3>With a grade</h3><pnx-grade stars="5" /></div>
+	<div class="test-bench"><h3>Without a grade</h3><pnx-grade /></div>
+
+	<h2>Quality Score</h2>
+	<div class="test-bench"><h3>Classic no grade</h3><pnx-quality-score /></div>
+	<div class="test-bench"><h3>Classic 1/5</h3><pnx-quality-score grade="1" /></div>
+	<div class="test-bench"><h3>Classic 2/5</h3><pnx-quality-score grade="2" /></div>
+	<div class="test-bench"><h3>Classic 3/5</h3><pnx-quality-score grade="3" /></div>
+	<div class="test-bench"><h3>Classic 4/5</h3><pnx-quality-score grade="4" /></div>
+	<div class="test-bench"><h3>Classic 5/5</h3><pnx-quality-score grade="5" /></div>
+	<hr class="test-sep" />
+	<div class="test-bench"><h3>Input</h3><pnx-quality-score input="qs" /></div>
+	<div class="test-bench"><h3>Input 1/5</h3><pnx-quality-score input="qs" grade="1" /></div>
+	<div class="test-bench"><h3>Input 2/5</h3><pnx-quality-score input="qs" grade="2" /></div>
+	<div class="test-bench"><h3>Input 3/5</h3><pnx-quality-score input="qs" grade="3" /></div>
+	<div class="test-bench"><h3>Input 4/5</h3><pnx-quality-score input="qs" grade="4" /></div>
+	<div class="test-bench"><h3>Input 5/5</h3><pnx-quality-score input="qs" grade="5" /></div>
+	<div class="test-bench"><h3>Input many</h3><pnx-quality-score input="qs" grade="1,3,5" /></div>
+
+	<h2>Search bar</h2>
+	<div class="test-bench"><h3>Simple</h3><pnx-search-bar placeholder="Start your search"></pnx-search-bar></div>
+	<div class="test-bench"><h3>With pre</h3><pnx-search-bar placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div>
+	<div class="test-bench">
+		<h3>Reduced</h3>
+		<pnx-search-bar reduceable reduced placeholder="Look for a place"></pnx-search-bar>
+	</div>
+	<hr class="test-sep" />
+	<div class="test-bench"><h3>Size md full</h3><pnx-search-bar size="md" placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div>
+	<div class="test-bench"><h3>Size md reduced</h3><pnx-search-bar size="md" reduceable reduced placeholder="Look for a place"></pnx-search-bar></div>
+	<div class="test-bench"><h3>Size xxl full</h3><pnx-search-bar size="xxl" placeholder="Look for a place"><span slot="pre">🗺️</span></pnx-search-bar></div>
+	<div class="test-bench"><h3>Size xxl reduced</h3><pnx-search-bar size="xxl" reduceable reduced placeholder="Look for a place"></pnx-search-bar></div>
+</body>
+</html>

package/scripts/doc.js

@@ -0,0 +1,77 @@
+/*
+ * Widely based on https://github.com/jsdoc2md/jsdoc-to-markdown/wiki/How-to-create-one-output-file-per-class
+ */
+
+const jsdoc2md = require("jsdoc-to-markdown");
+const fs = require("node:fs").promises;
+const path = require("path");
+
+const SRC_FOLDER = path.resolve(__dirname, "..", "src");
+const OUTPUT_FOLDER = path.resolve(__dirname, "..", "docs", "reference");
+const MD_LINK_RGX = /\[([^\]]+)\]\(#([^+)]+)\+?([^)]+)?\)/g;
+
+// Remove all stuff in docs/reference/ folder
+async function cleanupDocFolder(folder) {
+	await fs.rm(folder, {recursive: true, force: true});
+}
+
+// Create subfolders in docs/reference/ to match JS files folder tree
+async function createSubFolders(fullFolder) {
+	const relPath = path.relative(SRC_FOLDER, fullFolder);
+	const docPath = path.join(OUTPUT_FOLDER, relPath);
+	await fs.mkdir(docPath, {recursive: true});
+	return docPath;
+}
+
+// Replace links in generated Markdown to go to relative file instead of same file
+function cleanupMdLinks(clid, md) {
+	return md.replace(MD_LINK_RGX, (match, text, link, plus) => {
+		if(link == clid || link == `new_${clid}_new` || link.startsWith(clid+".")) { return match; }
+
+		const linkClassPath = link.split("+")[0].split(".").slice(1);
+		const currentClassPath = clid.split(".").slice(1);
+		const relPath = path.relative(
+			path.dirname(currentClassPath.join("/")+".md"),
+			linkClassPath.join("/")+".md"
+		);
+		return `[${text}](${relPath}/#${link}${plus ? "+"+plus : ""})`;
+	});
+}
+
+// Create MD file for a single JS file
+async function writeDocs(templateData) {
+	const classes = templateData.filter(i => i.kind === "class" && i.name !== "exports");
+	for(let cl of classes) {
+		console.log("Generating doc for", cl.name);
+		const docPath = await createSubFolders(cl.meta.path);
+		const template = `{{#class name="${cl.name}"}}{{>docs}}{{/class}}`;
+		let output = await jsdoc2md.render({ data: templateData, template: template });
+		output = cleanupMdLinks(cl.id, output);
+		await fs.writeFile(path.resolve(docPath, `${cl.name}.md`), output);
+	}
+}
+
+// Recursive load of JS files
+async function readSingleFolder(folder) {
+	console.log("Searching in folder", path.basename(folder));
+	let jsfiles = [];
+	const files = await fs.readdir(folder);
+	for(let file of files) {
+		const filepath = path.join(folder, file);
+		const stat = await fs.stat(filepath);
+
+		if(stat.isDirectory()) {
+			jsfiles = jsfiles.concat(await readSingleFolder(filepath));
+		}
+		else if(stat.isFile() && path.extname(filepath) === ".js") {
+			jsfiles.push(filepath);
+		}
+	}
+	return jsfiles;
+}
+
+// Main code execution
+cleanupDocFolder(OUTPUT_FOLDER)
+	.then(() => readSingleFolder(SRC_FOLDER))
+	.then(files => jsdoc2md.getTemplateData({ files }))
+	.then(writeDocs);

package/src/components/core/Basic.css

@@ -0,0 +1,44 @@
+/* Colors */
+:root {
+	--white: #ffffff;
+	--black: #181818;
+	--black-pale: #1b1a17;
+	--red: #f70000;
+	--red-pale: #ff726f;
+	--grey: #f5f5f5;
+	--grey-pale: #cfd2cf;
+	--grey-semi-dark: #808080;
+	--grey-dark: #3e3e3e;
+	--blue: #2954e9;
+	--blue-dark: #0a1f69;
+	--blue-semi: #d7dffc;
+	--blue-pale: #f2f5ff;
+	--blue-geovisio: #34495e;
+	--beige: #f5f3ec;
+	--yellow: #fec868;
+	--orange: #ff6f00;
+	--orange-pale: #fffafa;
+	--green: #7ec636;
+	--green-pale: #f0ffee;
+	--widget-bg: var(--white);
+	--widget-bg-hover: var(--grey);
+	--widget-bg-active: var(--blue);
+	--widget-bg-inactive: var(--grey-pale);
+	--widget-bg-primary: var(--blue-semi);
+	--widget-bg-primary-hover: #e0e7ff;
+	--widget-border-div: var(--grey-pale);
+	--widget-border-btn: var(--blue);
+	--widget-font: var(--grey-dark);
+	--widget-font-active: var(--white);
+	--widget-font-direct: var(--blue);
+}
+
+/* Hidden elements on mobile */
+@container (max-width: 576px) {
+	.pnx-mobile-hidden { display: none !important; }
+}
+
+/* Hidden elements on print */
+@media print {
+	.pnx-print-hidden { display: none !important; }
+}