@geops/rvf-mobility-web-component 0.1.46 → 0.1.47-beta.0

package/doc/src/app/layout.tsx

@@ -1,5 +1,3 @@
-import type { Metadata } from "next";
-
 import { Container } from "@mui/material";
 import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter";
 import { ThemeProvider } from "@mui/material/styles";
@@ -7,8 +5,11 @@ import Script from "next/script";
 import { Suspense } from "react";
 
 import { Footer, geopsTheme, Header } from "../geops-ui";
+
 import "./globals.css";
 
+import type { Metadata } from "next";
+
 const tabs = [
   {
     component: "a",
@@ -45,6 +46,7 @@ export default function RootLayout({
           </ThemeProvider>
         </AppRouterCacheProvider>
         <Script src="index.js" />
+        <Script src="indexDoc.js" />
       </body>
     </html>
   );

package/docutils.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 function applyPermalinkParameters(wc) {
   const params = new URLSearchParams(window.location.search);
@@ -7,14 +6,15 @@ function applyPermalinkParameters(wc) {
   if (params.get("fullscreen") === "true") {
     wc.parentElement.removeChild(wc);
     wc.className = "absolute w-full h-full inset-0";
-    document.body.className = "absolute w-full h-full inset-0 p-0";
     document.body.appendChild(wc);
+    document.body.style = "padding:0;";
   } else {
     const doc = document.querySelectorAll("#doc");
     doc.forEach((d) => {
       return (d.style.display = "block");
     });
   }
+
   // Apply x,y,z
   if (
     params.get("permalink") === "true" &&
@@ -46,15 +46,15 @@ function applyPermalinkParameters(wc) {
 
   // Get an apikey if there is none defined
   if (!wc.getAttribute("apikey")) {
-    // fetch("https://backend.developer.geops.io/publickey")
-    //   .then((response) => {
-    //     return response.json();
-    //   })
-    //   .then((data) => {
-    //     if (data && data.success) {
-    //       // wc.setAttribute("apikey", data.key);
-    //     }
-    //   });
+    fetch("https://backend.developer.geops.io/publickey")
+      .then((response) => {
+        return response.json();
+      })
+      .then((data) => {
+        if (data && data.success) {
+          wc.setAttribute("apikey", data.key);
+        }
+      });
   }
 }
 
@@ -65,6 +65,7 @@ function generateAttributesTable(
   booleanAttrs = [],
   booleanTrueByDefault = [],
   descriptionByAttr = {},
+  defaultValueByAttr = {},
 ) {
   let innerHMTL = `<table class="table-auto w-full" >
     <thead>
@@ -78,6 +79,7 @@ function generateAttributesTable(
     <tbody>`;
   innerHMTL += attrs
     .sort()
+    .filter((key) => descriptionByAttr[key])
     .map((key) => {
       const isBoolean = booleanAttrs.includes(key);
       const defaultChecked = booleanTrueByDefault.includes(key)
@@ -110,6 +112,7 @@ function generateAttributesTable(
           class="border"
           name="${key}"
           value="${wc.getAttribute(key) || ""}" 
+          placeholder="${defaultValueByAttr[key] || ""}"
           />
         <button class="border p-2 bg-black hover:bg-gray-700 text-white" onclick="document.querySelector('${wc.localName}').setAttribute('${key}', this.previousElementSibling.value);onAttributeUpdate(document.querySelector('${wc.localName}'),this.previousElementSibling.name, this.previousElementSibling.value);">Update</button>`
       }
@@ -135,12 +138,19 @@ function generateCodeText(
   let codeText = "";
   codeText = `&lt;script\n\ttype="module"\n\tsrc="${pkgSrc}"&gt;
 &lt;/script&gt;
-&lt;${wc.localName} style="display:block;width:100%;height:500px;border:1px solid #e5e7eb;border-radius:16px;"`;
+&lt;${wc.localName}\n\tid="map"\n\tstyle="display:block;width:100%;height:500px;border:1px solid #e5e7eb;border-radius:16px;"`;
 
   attrs.forEach((key) => {
     const attributeValue = wc.getAttribute(key);
-    const inputValue = document.querySelector(`[name=${key}]`)?.value;
-    if (attributeValue !== null && attributeValue === inputValue) {
+    const input = document.querySelector(`[name=${key}]`);
+    const inputValue =
+      input?.type === "checkbox" ? input.checked : input?.value;
+    if (
+      attributeValue !== null &&
+      (attributeValue === inputValue ||
+        (attributeValue === "true" && inputValue === true) ||
+        (attributeValue === "false" && inputValue === false))
+    ) {
       codeText += `\n\t${[key, '"' + wc.getAttribute(key) + '"'].join("=")}`;
     }
   });
@@ -149,7 +159,7 @@ function generateCodeText(
 }
 
 // Generates a HTML table with all events of a web component
-function generateEventsTable(wc, events) {
+function generateEventsTable(wc, events, descriptionByEvent = {}) {
   let innerHMTL = `<table class="table-auto w-full" >
     <thead>
       <tr>
@@ -184,10 +194,16 @@ function generateEventsTable(wc, events) {
         <tr>
           <td class="border px-4 py-2">${key}</td>
           <td class="border px-4 py-2">
-            <div class="flex gap-4">
+            <div class="flex flex-col gap-4">
+              <p>
+              ${descriptionByEvent[key] || ""}
+              </p>
+              <p>
+              Last event received:
+              </p>
               <textarea
                 type="text"
-                class="border w-full h-300"
+                class="border h-300 w-full"
                 style="height:300px;"
                 name="${key}"
               ></textarea>

package/eslint.config.mjs

@@ -1,40 +1,34 @@
-import { FlatCompat } from "@eslint/eslintrc";
-import eslint from "@eslint/js";
-import jsxA11y from "eslint-plugin-jsx-a11y";
-import perfectionist from "eslint-plugin-perfectionist";
-import prettier from "eslint-plugin-prettier/recommended";
-import react from "eslint-plugin-react";
-import tailwind from "eslint-plugin-tailwindcss";
-import ts from "typescript-eslint";
+import flat from "@geops/eslint-config-react/flat";
 
-// FlatCompat convert old definition to the new ones
-const compat = new FlatCompat();
+// tailwind@4 only supported in beta channel
+// import tailwind from "eslint-plugin-tailwindcss";
 
 export default [
+  ...flat,
+  // tailwind@4 only supported in beta channel
+  // ...tailwind.configs["flat/recommended"],
+  // {
+  //   settings: {
+  //     react: {
+  //       version: "18.3.1",
+  //     },
+  //   },
+  // },
   {
-    ignores: ["build/*", "node_modules/*"],
-  },
-  ...ts.config(
-    eslint.configs.recommended,
-    ...ts.configs.strict,
-    ...ts.configs.stylistic,
-    react.configs.flat.recommended,
-    react.configs.flat["jsx-runtime"], // Avoid having the React-in-jsx-scope rule activated
-    ...compat.config({
-      extends: ["plugin:react-hooks/recommended"],
-      rules: {
-        "react-hooks/exhaustive-deps": "error",
-      },
-    }),
-    jsxA11y.flatConfigs.recommended,
-    perfectionist.configs["recommended-alphabetical"],
-    prettier,
-    ...tailwind.configs["flat/recommended"],
-    {
-      rules: {
-        "arrow-body-style": ["error", "always"],
-        curly: "error",
-      },
+    rules: {
+      "@typescript-eslint/no-empty-function": "off",
+      "@typescript-eslint/no-unsafe-call": "off",
+      "@typescript-eslint/no-unsafe-member-access": "off",
+      "@typescript-eslint/no-unsafe-assignment": "off",
+      "@typescript-eslint/no-unsafe-return": "off",
+      "@typescript-eslint/unbound-method": "off",
+      "@typescript-eslint/no-unsafe-argument": "off",
+      "mocha/no-setup-in-describe": "off",
+      "mocha/consistent-spacing-between-blocks": "off",
+      "@typescript-eslint/no-redundant-type-constituents": "off",
+      "mocha/no-pending-tests": "off",
+      "@typescript-eslint/prefer-nullish-coalescing": "off",
+      "react-compiler/react-compiler": "off",
     },
-  ),
+  },
 ];