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

package/.prettierrc.js

@@ -1 +1,3 @@
-export default {};
+export default {
+  plugins: ["prettier-plugin-tailwindcss"],
+};

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.46](https://github.com/geops/rvf-mobility-web-component/compare/v0.1.45...v0.1.46) (2025-08-01)
+
+
+### Bug Fixes
+
+* use good style ([f54b312](https://github.com/geops/rvf-mobility-web-component/commit/f54b312c8bbedcbaa686aff08d69959a52d8fc6b))
+
 ### [0.1.45](https://github.com/geops/rvf-mobility-web-component/compare/v0.1.44...v0.1.45) (2025-07-30)
 
 

package/README.md

@@ -71,7 +71,7 @@ Here an exhaustive list of the `<geops-mobility>` web component attributes avail
 - [`mots="rail,bus"`](https://mobility-web-component.geops.io/?mots=rail,bus): list of commas separated mots to display on the Realtime layer ( rail, bus, coach, foot, tram, subway, gondola, funicular, ferry, car).
 - [`notification="false"`](https://mobility-web-component.geops.io/?notification=true): display the notification layer or not (true or false). Default to true.
 - [`notificationat="2025-01-01T12:00:00Z"`](https://mobility-web-component.geops.io/?notificationat=2025-01-01T12:00:00Z): a ISO date string used to display active notification at this date in the notification layer.
-- [`notificationbeforelayerid=`](https://mobility-web-component.geops.io/?notificationbeforelayerid=): the style layer's id before which the notification layer will be added. By default the layer will be added on top.
+- [`notificationtenant=`](https://mobility-web-component.geops.io/?notificationtenant=): the MOCO notification tenant to get the notifications from.
 - [`notificationurl=`](https://mobility-web-component.geops.io/?notificationurl=): the MOCO notification url to get the notifications from.
 - [`permalink="true"`](https://mobility-web-component.geops.io/?permalink=true): add automatically an `x`,`y` an `z` URL parameters to the URL to allow to share the current map view. Default to false.
 - [`realtime="false"`](https://mobility-web-component.geops.io/?realtime=false): display the realtime layer or not (true or false). Default to true.

package/doc/package.json

@@ -19,6 +19,7 @@
     "typeface-lato": "^1.1.13"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.11",
     "@types/node": "^22.10.1",
     "@types/react": "^18.3.13",
     "@types/react-dom": "^18",
@@ -27,9 +28,9 @@
     "eslint-config-next": "15.0.3",
     "eslint-config-prettier": "^9.1.0",
     "generact": "^0.4.0",
-    "postcss": "^8.4.49",
-    "tailwindcss": "^3.4.16",
-    "typescript": "^5.7.2"
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.11",
+    "typescript": "^5.8.3"
   },
   "scripts": {
     "build": "next build",

package/doc/postcss.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    "@tailwindcss/postcss": {},
   },
 };
 

package/doc/src/app/components/GeopsMobilityDoc.tsx

@@ -1,235 +1,24 @@
-import { Typography } from "@mui/material";
+"use client";
 import { Suspense } from "react";
 
 import useIsFullScreen from "../hooks/useIsFullScreen";
-import GeopsAPIKeyLink from "./GeopsAPIKeyLink";
-import GeopsMapsAPILink from "./GeopsMapsAPILink";
 import GeopsMobility from "./GeopsMobility";
-import GeopsRealtimeAPILink from "./GeopsRealtimeAPILink";
-import GeopsStopsAPILink from "./GeopsStopsAPILink";
-import Link from "./Link";
 import WebComponentDoc, { AttrConfig } from "./WebComponentDoc";
 
-const attrsConfig: Record<string, AttrConfig> = {
-  apikey: {
-    description: (
-      <Typography>
-        Your <GeopsAPIKeyLink />.
-      </Typography>
-    ),
-    type: "textfield",
-  },
-  baselayer: {
-    defaultValue: "travic_v2",
-    description: (
-      <Typography>
-        The style&apos;s name from the <GeopsMapsAPILink />
-        (base_dark_v2, base_bright_v2, ...).
-      </Typography>
-    ),
-    type: "select",
-  },
-  center: {
-    defaultValue: "831634,5933959",
-    description: (
-      <Typography>The center of the map in EPSG:3857 coordinates.</Typography>
-    ),
-    type: "textfield",
-  },
-  extent: {
-    description: (
-      <Typography>
-        The extent of the map in EPSG:3857 coordinates (ex:
-        830634,5923959,831634,5933959). It has the priority over center and zoom
-        attributes.
-      </Typography>
-    ),
-    type: "textfield",
-  },
-  geolocation: {
-    defaultValue: "true",
-    description: (
-      <Typography>
-        Display the geolocation button or not (true or false).
-      </Typography>
-    ),
-    type: "checkbox",
-  },
-  mapsurl: {
-    defaultValue: "https://maps.geops.io",
-    description: (
-      <Typography>
-        The <GeopsMapsAPILink /> url to use.
-      </Typography>
-    ),
-    type: "textfield",
-  },
-  maxextent: {
-    description: (
-      <Typography>
-        Constraint the map in a specific extent in EPSG:3857 coordinates, the
-        user can not navigate outside this extent.
-      </Typography>
-    ),
-    type: "textfield",
-  },
-  maxzoom: {
-    description: <Typography>Define the max zoom level of the map.</Typography>,
-    props: {
-      slotProps: {
-        input: {
-          max: 22,
-          min: 0,
-          step: 1,
-        },
-      },
-      type: "number",
-    },
-    type: "textfield",
-  },
-  minzoom: {
-    description: <Typography>Define the min zoom level of the map.</Typography>,
-    props: {
-      slotProps: {
-        input: {
-          max: 22,
-          min: 0,
-          step: 1,
-        },
-      },
-      type: "number",
-    },
-    type: "textfield",
-  },
-  mots: {
-    description: (
-      <Typography>
-        Commas separated list of mots to display on the Realtime layer (rail,
-        bus, coach, foot, tram, subway, gondola, funicular, ferry, car).
-      </Typography>
-    ),
-    type: "textfield",
-  },
-  notification: {
-    defaultValue: "true",
-    description: (
-      <Typography>
-        Display the notification layer or not (true or false). This layer will
-        display informations about disruptions on the network. Data comes from
-        our{" "}
-        <Link href="https://geops.com/en/solution/disruption-information">
-          geOps MOCO tool
-        </Link>
-        . It works it combination with `notificationurl`.
-      </Typography>
-    ),
-    type: "checkbox",
-  },
-  notificationat: {
-    description: (
-      <Typography>
-        An ISO date string used to display active notification at this date in
-        the notification layer. If not defined the current date will be used.
-      </Typography>
-    ),
-    type: "textfield",
-  },
-  notificationbeforelayerid: {
-    description: (
-      <Typography>
-        The style layer&apos;s id before which the notification layer will be
-        added. By default the layer will be added on top.
-      </Typography>
-    ),
-    type: "textfield",
-  },
-  notificationurl: {
-    description: (
-      <Typography>
-        The{" "}
-        <Link href="https://geops.com/en/solution/disruption-information">
-          geOps MOCO API
-        </Link>{" "}
-        url to get the notifications from.
-      </Typography>
-    ),
-    type: "textfield",
-  },
-  // x,y,z are not applies on refresh
-  // permalink: {
-  //   defaultValue: "false",
-  //   description: (
-  //     <Typography>
-  //       Add automatically an `x`,`y` an `z` URL parameters to the URL to allow
-  //       to share the current mapview. Default to false.
-  //     </Typography>
-  //   ),
-  //   type: "checkbox",
-  // },
-  realtime: {
-    defaultValue: "true",
-    description: (
-      <Typography>
-        Display the realtime layer or not (true or false). This layer display
-        realtime vehicles on the map using the <GeopsRealtimeAPILink />.
-      </Typography>
-    ),
-    type: "checkbox",
-  },
-  realtimeurl: {
-    defaultValue: "wss://api.geops.io/tracker-ws/v1/ws",
-    description: (
-      <Typography>
-        The <GeopsRealtimeAPILink /> url to use.
-      </Typography>
-    ),
-    type: "textfield",
-  },
-  search: {
-    defaultValue: "true",
-    description: (
-      <Typography>
-        Display the search stops input or not (true or false).
-      </Typography>
-    ),
-    type: "checkbox",
-  },
-  stopsurl: {
-    defaultValue: "https://api.geops.io/stops/v1/",
-    description: (
-      <Typography>
-        The <GeopsStopsAPILink /> url to use.
-      </Typography>
-    ),
-    type: "textfield",
-  },
-  tenant: {
-    description: (
-      <Typography>
-        The tenant name to use to filter the Realtime vehicles available.
-      </Typography>
-    ),
-    type: "textfield",
-  },
-  zoom: {
-    defaultValue: "13",
-    description: <Typography>The initial zoom level of the map.</Typography>,
-    props: {
-      slotProps: {
-        input: {
-          max: 22,
-          min: 0,
-          step: 1,
-        },
-      },
-      type: "number",
-    },
-    type: "textfield",
-  },
-};
+let attrsConfig: Record<string, AttrConfig>;
+
 function GeopsMobilityDoc() {
   const isFullScreen = useIsFullScreen();
 
+  if (typeof window !== undefined) {
+    // @ts-expect-error - MobilityMapAttributes is added via a script file.
+    attrsConfig = window.MobilityMapAttributes;
+  }
+
+  if (!attrsConfig) {
+    return null;
+  }
+
   return (
     <Suspense>
       <WebComponentDoc
@@ -238,7 +27,7 @@ function GeopsMobilityDoc() {
         Comp={GeopsMobility}
         compProps={{
           class: isFullScreen
-            ? "fixed inset-0 w-screen h-sccreen z-[9000] bg-white"
+            ? "fixed inset-0 w-screen h-sccreen z-9000 bg-white"
             : "block h-96 max-w-full resize overflow-auto  bg-white",
         }}
         tagName="geops-mobility"

package/doc/src/app/components/GeopsMobilitySearchDoc.tsx

@@ -1,117 +1,21 @@
-import { Typography } from "@mui/material";
+"use client";
 import { Suspense } from "react";
 
-import GeopsAPIKeyLink from "./GeopsAPIKeyLink";
 import GeopsMobilitySearch from "./GeopsMobilitySearch";
-import GeopsStopsAPILink from "./GeopsStopsAPILink";
 import WebComponentDoc, { AttrConfig } from "./WebComponentDoc";
 
-const attrsConfig: Record<string, AttrConfig> = {
-  apikey: {
-    description: (
-      <Typography>
-        Your <GeopsAPIKeyLink />.
-      </Typography>
-    ),
-    type: "textfield",
-  },
-  bbox: {
-    description: (
-      <Typography>
-        The extent where to search the stops (minx,miny,maxx,maxy).
-      </Typography>
-    ),
-    type: "textfield",
-  },
-  countrycode: {
-    description: (
-      <Typography>
-        The country code to filter the results (IT, DE, CH ...)
-      </Typography>
-    ),
-    type: "textfield",
-  },
-  event: {
-    defaultValue: "mwc:stopssearchselect",
-    description: (
-      <Typography>
-        The event&pos;s name to listen to when a stop is selected.
-      </Typography>
-    ),
-    type: "textfield",
-  },
-  field: {
-    description: (
-      <Typography>
-        Which field to look up, default all of them, Possible values:id, name,
-        coords.
-      </Typography>
-    ),
-    type: "textfield",
-  },
-  limit: {
-    defaultValue: "5",
-    description: <Typography>The number of suggestions to show.</Typography>,
-    props: {
-      slotProps: {
-        input: {
-          max: 100,
-          min: 0,
-          step: 1,
-        },
-      },
-      type: "number",
-    },
-    type: "textfield",
-  },
-  mots: {
-    description: (
-      <Typography>
-        Commas separated list of mots used to filter the results (rail, bus,
-        coach, foot, tram, subway, gondola, funicular, ferry, car).
-      </Typography>
-    ),
-    type: "textfield",
-  },
-  params: {
-    description: (
-      <Typography>
-        JSON string with additional parameters to pass to the request to the
-        API. Ex: {"{ 'key': 'value' }"}
-      </Typography>
-    ),
-    type: "textfield",
-  },
-  prefagencies: {
-    description: (
-      <Typography>
-        Comma seperated list, order chooses which agency will be preferred as
-        ident_source (for id and code fields). Possible values: sbb, db.
-      </Typography>
-    ),
-    type: "textfield",
-  },
-  reflocation: {
-    description: (
-      <Typography>
-        Coordinates in WGS84 (in lat,lon order) used to rank stops close to this
-        position higher
-      </Typography>
-    ),
-    type: "textfield",
-  },
-  url: {
-    defaultValue: "https://api.geops.io/stops/v1/",
-    description: (
-      <Typography>
-        The <GeopsStopsAPILink /> url to use.
-      </Typography>
-    ),
-    type: "textfield",
-  },
-};
+let attrsConfig: Record<string, AttrConfig>;
 
 function GeopsMobilitySearchDoc() {
+  if (typeof window !== undefined) {
+    // @ts-expect-error - MobilitySearchAttributes is added via a script file.
+    attrsConfig = window.MobilitySearchAttributes;
+  }
+
+  if (!attrsConfig) {
+    return null;
+  }
+
   return (
     <Suspense>
       <WebComponentDoc

package/doc/src/app/components/WebComponentDoc.tsx

@@ -2,8 +2,6 @@
 import {
   Button,
   Checkbox,
-  MenuItem,
-  Select,
   TextField,
   TextFieldProps,
   Typography,
@@ -26,7 +24,7 @@ export interface AttrConfig {
   defaultValue?: string;
   description: ReactNode;
   props?: TextFieldProps;
-  type: "checkbox" | "date" | "select" | "textfield";
+  type?: "boolean";
 }
 
 function WebComponentDoc({
@@ -175,7 +173,7 @@ function WebComponentDoc({
         HTML code
       </Typography>
       <br />
-      <SyntaxHighlighter className="!m-0" language="xml">
+      <SyntaxHighlighter className="m-0!" language="xml">
         {code}
       </SyntaxHighlighter>
       <br />
@@ -196,9 +194,8 @@ function WebComponentDoc({
       <table className="w-full">
         <thead>
           <tr>
-            <th className="w-[15%] border px-4 py-2">Name</th>
-            <th className="w-2/5 border px-4 py-2">Value</th>
-            <th className="w-[45%] border px-4 py-2">Description</th>
+            <th className="w-1/5 border px-4 py-2">Name</th>
+            <th className="w-4/5 border px-4 py-2">Description</th>
           </tr>
         </thead>
         <tbody>
@@ -218,21 +215,19 @@ function WebComponentDoc({
               } = attrsConfig[key] || {};
               return (
                 <tr key={key}>
-                  <td className="border px-4 py-2">{key}</td>
-                  <td className="border px-4 py-2">
-                    {type === "textfield" && (
-                      <div>
-                        <TextField
-                          defaultValue={attributes[key]}
-                          fullWidth
-                          id={key}
-                          placeholder={defaultValue}
-                          variant="standard"
-                          {...props}
-                        />
-                        <div className="mt-2">
+                  <td className="w-1/5 border p-4">{key}</td>
+                  <td className="w-2/5 border p-4">
+                    <div className="flex flex-col gap-4 justify-start">
+                      {!type && (
+                        <div className="flex gap-2">
+                          <TextField
+                            defaultValue={attributes[key]}
+                            id={key}
+                            placeholder={defaultValue}
+                            variant="outlined"
+                            {...props}
+                          />
                           <Button
-                            fullWidth
                             onClick={() => {
                               onChange(
                                 key,
@@ -247,42 +242,36 @@ function WebComponentDoc({
                             Apply
                           </Button>
                         </div>
+                      )}
+                      {type === "boolean" && (
+                        <Checkbox
+                          className="w-8"
+                          defaultChecked={
+                            (searchParams.get(key) || defaultValue) === "true"
+                          }
+                          onChange={(evt) => {
+                            onChange(
+                              key,
+                              evt.target.checked ? "true" : "false",
+                            );
+                          }}
+                        />
+                      )}
+                      <div>
+                        {typeof description !== "string" ? (
+                          description
+                        ) : (
+                          <Typography
+                            dangerouslySetInnerHTML={{ __html: description }}
+                          />
+                        )}{" "}
+                        {defaultValue && (
+                          <>
+                            <i>Default to &quot;{defaultValue}&quot;</i>
+                          </>
+                        )}
                       </div>
-                    )}
-
-                    {type === "checkbox" && (
-                      <Checkbox
-                        defaultChecked={
-                          (searchParams.get(key) || defaultValue) === "true"
-                        }
-                        onChange={(evt) => {
-                          onChange(key, evt.target.checked ? "true" : "false");
-                        }}
-                      />
-                    )}
-
-                    {type === "select" && (
-                      <Select
-                        defaultValue={searchParams.get(key) || defaultValue}
-                        fullWidth
-                        onChange={(evt) => {
-                          onChange(key, evt.target.value);
-                        }}
-                        variant="standard"
-                      >
-                        <MenuItem value="travic_v2">Travic v2</MenuItem>
-                        <MenuItem value="base_dark_v2">Dark v2</MenuItem>
-                      </Select>
-                    )}
-                  </td>
-                  <td className="border p-4">
-                    {description}{" "}
-                    {defaultValue && (
-                      <>
-                        <br />
-                        <i>Default to &quot;{defaultValue}&quot;</i>
-                      </>
-                    )}
+                    </div>
                   </td>
                 </tr>
               );

package/doc/src/app/geops-mobility/page.tsx

@@ -1,6 +1,11 @@
 "use client";
-import GeopsMobilityDoc from "../components/GeopsMobilityDoc";
+import dynamic from "next/dynamic";
+
+const DynamicComponentWithNoSSR = dynamic(
+  () => import("../components/GeopsMobilityDoc"),
+  { ssr: false },
+);
 
 export default function GeopsMobility() {
-  return <GeopsMobilityDoc />;
+  return <DynamicComponentWithNoSSR />;
 }

package/doc/src/app/geops-mobility-search/page.tsx

@@ -1,7 +1,11 @@
 "use client";
+import dynamic from "next/dynamic";
 
-import GeopsMobilitySearchDoc from "../components/GeopsMobilitySearchDoc";
+const DynamicComponentWithNoSSR = dynamic(
+  () => import("../components/GeopsMobilitySearchDoc"),
+  { ssr: false },
+);
 
 export default function GeopsMobilitySearch() {
-  return <GeopsMobilitySearchDoc />;
+  return <DynamicComponentWithNoSSR />;
 }