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

package/doc/src/app/globals.css

@@ -1,38 +1,58 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@theme {
+  --font-sans: Lato, sans-serif;
+  --font-serif: Merriweather, serif;
 }
 
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-  margin: 0;
-  font-family: Lato, Arial, sans-serif;
-  color: #353535;
-  position: relative;
-  min-height: 100%;
-  overflow-y: scroll;
-  font-size: 18px;
-}
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
 
-a {
-  text-decoration: none;
-  color: #76b833;
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
 }
 
-a:focus-visible {
-  outline: 2px solid black;
-  outline-offset: 2px;
+@utility text-balance {
+  text-wrap: balance;
 }
 
-
 @layer utilities {
-  .text-balance {
-    text-wrap: balance;
+  :root {
+    --background: #ffffff;
+    --foreground: #171717;
+  }
+
+  body {
+    color: var(--foreground);
+    background: var(--background);
+    font-family: Arial, Helvetica, sans-serif;
+    margin: 0;
+    font-family: Lato, Arial, sans-serif;
+    color: #353535;
+    position: relative;
+    min-height: 100%;
+    overflow-y: scroll;
+    font-size: 18px;
+  }
+
+  a {
+    text-decoration: none;
+    color: #76b833;
+  }
+
+  a:focus-visible {
+    outline: 2px solid black;
+    outline-offset: 2px;
   }
 }

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",
     },
-  ),
+  },
 ];