@reventlessdev/reventless-map 0.1.0-alpha.1

package/README.md

@@ -0,0 +1,62 @@
+# @reventlessdev/reventless-map
+
+The **geo view mode** for Reventless AutoUI, built on the framework-agnostic
+[`@reventlessdev/rescript-maplibre`](../../rescript/maplibre) bindings:
+
+- `ReventlessMap.MapMode.init()` — registers the `"map"` view mode (clustered
+  point layer per source, accent colors, click → drill detail). Offered
+  automatically wherever a read model's schema resolves a numeric
+  `lat`/`lng` pair (see `AutoSemantics`), both as a list toggle and as a
+  per-plugin "Map" canvas page.
+- `ReventlessMap.GeoInput` — click-to-place picker for the geo semantic, with an
+  optional provider-agnostic `geocoder` adapter (`search: string =>
+  promise<array<{label, lat, lng}>>`; the AWS Location implementation lives
+  in reventless-aws).
+- `ReventlessMap.MapView` — the underlying map component the `"map"` mode renders.
+
+The maplibre-gl bindings themselves live in the sibling
+`@reventlessdev/rescript-maplibre` package (`Maplibre.MaplibreBindings`), which
+carries no Reventless dependency and can be reused on its own.
+
+This package is an **optional add-on**: reventless-ui never imports it, so
+apps without geo data pay no bundle cost.
+
+## Setup
+
+```bash
+pnpm add @reventlessdev/reventless-map maplibre-gl
+```
+
+`rescript.json`:
+
+```json
+"dependencies": ["@reventlessdev/reventless-map"]
+```
+
+App entry (once, before the first auto page renders):
+
+```rescript
+// maplibre-gl's stylesheet — import it once in your app entry (JS/Vite):
+//   import "maplibre-gl/dist/maplibre-gl.css"
+ReventlessMap.MapMode.init(~mapStyle="https://your-tiles.example/style.json", ())
+```
+
+The default style is MapLibre's demo tiles — development only; pass a real
+style URL (tiles + glyphs) in production.
+
+## Building in this repo
+
+`pnpm run build` here uses `rescript-legacy`: the ReScript v12 build
+orchestrator still panics (UTF-8 underline bug) when invoked from a
+downstream package that walks into reventless-ui's bs-dependencies. Build
+reventless-ui first (`rescript build` from `reventless/ui`), then this
+package.
+
+## Stories
+
+Storybook lives in `reventless/ui`, but this package sits **downstream** of
+reventless-ui, so its stories compile without the build cycle that a story
+placed inside ui would create. Author map stories under `stories/` here; ui's
+Storybook picks them up via a glob that also scans `../../map/stories`, and ui
+carries maplibre-gl + this package as **dev**-only dependencies so the bundler
+resolves them (the published ui surface stays maplibre-free).

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@reventlessdev/reventless-map",
+  "version": "0.1.0-alpha.1",
+  "description": "Geo view mode (MapView, MapMode, GeoInput) for Reventless AutoUI, built on @reventlessdev/rescript-maplibre. Optional add-on: non-geo apps never load it.",
+  "license": "MIT",
+  "files": [
+    "src/**/*.res",
+    "src/**/*.res.mjs",
+    "rescript.json"
+  ],
+  "scripts": {
+    "build": "rescript-legacy build",
+    "start": "rescript-legacy build -w",
+    "clean": "rescript-legacy clean",
+    "test": "echo \"no test specified\""
+  },
+  "devDependencies": {
+    "@rescript/react": "^0.13.1",
+    "@reventlessdev/rescript-maplibre": "0.1.0-alpha.3",
+    "@reventlessdev/reventless-ui": "3.0.0-alpha.40",
+    "maplibre-gl": "^5.6.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rescript": "^12.3.0"
+  },
+  "peerDependencies": {
+    "@rescript/react": "^0.13.1",
+    "@reventlessdev/rescript-maplibre": ">=0.1.0-alpha.2",
+    "@reventlessdev/reventless-ui": ">=3.0.0-alpha.37",
+    "maplibre-gl": ">=4.0.0",
+    "react": "^18.3.1",
+    "rescript": "^12.3.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "gitHead": "ee9a72b1a1f76e7fdeab58922e4fb653a1b20cec"
+}

package/rescript.json

@@ -0,0 +1,13 @@
+{
+  "name": "@reventlessdev/reventless-map",
+  "namespace": "ReventlessMap",
+  "jsx": { "version": 4 },
+  "sources": [
+    { "dir": "src", "subdirs": true },
+    { "dir": "stories", "subdirs": true, "type": "dev" }
+  ],
+  "package-specs": { "module": "esmodule", "in-source": true },
+  "suffix": ".res.mjs",
+  "warnings": { "number": "-3" },
+  "dependencies": ["@rescript/react", "@reventlessdev/reventless-ui", "@reventlessdev/rescript-maplibre"]
+}

package/src/GeoInput.res

@@ -0,0 +1,177 @@
+// Phase 5 — click-to-place input for the geo semantic: click or drag the
+// marker to pick a (lat, lng); optional geocoding search through a
+// provider-agnostic adapter (the AWS Location implementation belongs to
+// reventless-aws — separate core-repo plan).
+//
+// SchemaForm doesn't yet expose pluggable field inputs, so command forms
+// can't auto-adopt this; apps use it in custom forms today. The SchemaForm
+// input registry is noted as follow-up in the plan.
+
+open Maplibre.MaplibreBindings
+
+type geocodeResult = {
+  label: string,
+  lat: float,
+  lng: float,
+}
+
+// Provider-agnostic geocoder adapter.
+type geocoder = {search: string => promise<array<geocodeResult>>}
+
+@react.component
+let make = (
+  ~lat: option<float>=?,
+  ~lng: option<float>=?,
+  ~onChange: ((float, float)) => unit, // (lat, lng)
+  ~mapStyle: string="https://demotiles.maplibre.org/style.json",
+  ~geocoder: option<geocoder>=?,
+) => {
+  let containerRef = React.useRef(Js.Nullable.null)
+  let mapRef: React.ref<option<map>> = React.useRef(None)
+  let markerRef: React.ref<option<marker>> = React.useRef(None)
+  let (query, setQuery) = React.useState(() => "")
+  let (results, setResults) = React.useState(() => [])
+
+  let placeMarker = (map: map, ~lng: float, ~lat: float): unit =>
+    switch markerRef.current {
+    | Some(m) => {
+        let _ = m->setLngLat((lng, lat))
+      }
+    | None => {
+        let m = makeMarker({draggable: true})
+        let _ = m->setLngLat((lng, lat))
+        let _ = m->addTo(map)
+        m->onMarker("dragend", () => {
+          let pos = m->getLngLat
+          onChange((pos.lat, pos.lng))
+        })
+        markerRef.current = Some(m)
+      }
+    }
+
+  React.useEffect0(() => {
+    switch containerRef.current->Js.Nullable.toOption {
+    | None => None
+    | Some(el) =>
+      let center = switch (lng, lat) {
+      | (Some(lngV), Some(latV)) => (lngV, latV)
+      | _ => (0.0, 20.0)
+      }
+      let map = makeMap({
+        container: el,
+        style: mapStyle,
+        center,
+        zoom: lat->Option.isSome ? 12.0 : 1.5,
+      })
+      let _ = map->addControl(makeNavigationControl())
+      map->onMouse("click", e => {
+        placeMarker(map, ~lng=e.lngLat.lng, ~lat=e.lngLat.lat)
+        onChange((e.lngLat.lat, e.lngLat.lng))
+      })
+      switch (lng, lat) {
+      | (Some(lngV), Some(latV)) =>
+        map->on("load", () => placeMarker(map, ~lng=lngV, ~lat=latV))
+      | _ => ()
+      }
+      mapRef.current = Some(map)
+      Some(
+        () => {
+          mapRef.current = None
+          markerRef.current = None
+          map->remove
+        },
+      )
+    }
+  })
+
+  let pick = (r: geocodeResult): unit =>
+    switch mapRef.current {
+    | Some(map) => {
+        map->flyTo({center: (r.lng, r.lat), zoom: 13.0})
+        placeMarker(map, ~lng=r.lng, ~lat=r.lat)
+        onChange((r.lat, r.lng))
+        setResults(_ => [])
+      }
+    | None => ()
+    }
+
+  let runSearch = (): unit =>
+    switch geocoder {
+    | Some(g) if query != "" =>
+      let _p =
+        g.search(query)
+        ->Promise.then(rs => {
+          setResults(_ => rs)
+          Promise.resolve()
+        })
+        ->Promise.catch(_ => Promise.resolve())
+      ()
+    | _ => ()
+    }
+
+  <div style={ReactDOM.Style.make(~display="flex", ~flexDirection="column", ~gap="6px", ())}>
+    {switch geocoder {
+    | None => React.null
+    | Some(_) =>
+      <div style={ReactDOM.Style.make(~display="flex", ~gap="6px", ())}>
+        <input
+          type_="text"
+          placeholder="Search address…"
+          value=query
+          onChange={e => setQuery(ReactEvent.Form.target(e)["value"])}
+          onKeyDown={e =>
+            if ReactEvent.Keyboard.key(e) == "Enter" {
+              ReactEvent.Keyboard.preventDefault(e)
+              runSearch()
+            }}
+          style={ReactDOM.Style.make(~flex="1", ())}
+        />
+        <button type_="button" onClick={_ => runSearch()}> {React.string("Search")} </button>
+      </div>
+    }}
+    {Array.length(results) > 0
+      ? <ul style={ReactDOM.Style.make(~margin="0", ~paddingLeft="16px", ())}>
+          {results
+          ->Array.map(r =>
+            <li key=r.label>
+              <button
+                type_="button"
+                style={ReactDOM.Style.make(
+                  ~background="none",
+                  ~border="none",
+                  ~padding="0",
+                  ~cursor="pointer",
+                  ~textDecoration="underline",
+                  (),
+                )}
+                onClick={_ => pick(r)}>
+                {React.string(r.label)}
+              </button>
+            </li>
+          )
+          ->React.array}
+        </ul>
+      : React.null}
+    <div
+      ref={ReactDOM.Ref.domRef(containerRef)}
+      style={ReactDOM.Style.make(
+        ~height="280px",
+        ~borderRadius="8px",
+        ~overflow="hidden",
+        (),
+      )}
+    />
+    {switch (lat, lng) {
+    | (Some(latV), Some(lngV)) =>
+      <span style={ReactDOM.Style.make(~fontSize="12px", ~opacity="0.7", ())}>
+        {React.string(
+          `Selected: ${Float.toString(latV)}, ${Float.toString(lngV)} (click map or drag marker to change)`,
+        )}
+      </span>
+    | _ =>
+      <span style={ReactDOM.Style.make(~fontSize="12px", ~opacity="0.7", ())}>
+        {React.string("Click the map to place a location")}
+      </span>
+    }}
+  </div>
+}

package/src/GeoInput.res.mjs

@@ -0,0 +1,216 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as React from "react";
+import * as MaplibreGl from "maplibre-gl";
+import * as Stdlib_Option from "@rescript/runtime/lib/es6/Stdlib_Option.js";
+import * as Stdlib_Promise from "@rescript/runtime/lib/es6/Stdlib_Promise.js";
+import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
+import * as JsxRuntime from "react/jsx-runtime";
+
+function GeoInput(props) {
+  let geocoder = props.geocoder;
+  let __mapStyle = props.mapStyle;
+  let onChange = props.onChange;
+  let lng = props.lng;
+  let lat = props.lat;
+  let __mapStyle_value = __mapStyle !== undefined ? __mapStyle : "https://demotiles.maplibre.org/style.json";
+  let containerRef = React.useRef(null);
+  let mapRef = React.useRef(undefined);
+  let markerRef = React.useRef(undefined);
+  let match = React.useState(() => "");
+  let setQuery = match[1];
+  let query = match[0];
+  let match$1 = React.useState(() => []);
+  let setResults = match$1[1];
+  let results = match$1[0];
+  let placeMarker = (map, lng, lat) => {
+    let m = markerRef.current;
+    if (m !== undefined) {
+      Primitive_option.valFromOption(m).setLngLat([
+        lng,
+        lat
+      ]);
+      return;
+    }
+    let m$1 = new MaplibreGl.Marker({
+      draggable: true
+    });
+    m$1.setLngLat([
+      lng,
+      lat
+    ]);
+    m$1.addTo(map);
+    m$1.on("dragend", () => {
+      let pos = m$1.getLngLat();
+      onChange([
+        pos.lat,
+        pos.lng
+      ]);
+    });
+    markerRef.current = Primitive_option.some(m$1);
+  };
+  React.useEffect(() => {
+    let el = containerRef.current;
+    if (el == null) {
+      return;
+    }
+    let center = lng !== undefined ? (
+        lat !== undefined ? [
+            lng,
+            lat
+          ] : [
+            0.0,
+            20.0
+          ]
+      ) : [
+        0.0,
+        20.0
+      ];
+    let map = new MaplibreGl.Map({
+      container: el,
+      style: __mapStyle_value,
+      center: center,
+      zoom: Stdlib_Option.isSome(lat) ? 12.0 : 1.5
+    });
+    map.addControl(new MaplibreGl.NavigationControl());
+    map.on("click", e => {
+      placeMarker(map, e.lngLat.lng, e.lngLat.lat);
+      onChange([
+        e.lngLat.lat,
+        e.lngLat.lng
+      ]);
+    });
+    if (lng !== undefined && lat !== undefined) {
+      map.on("load", () => placeMarker(map, lng, lat));
+    }
+    mapRef.current = Primitive_option.some(map);
+    return () => {
+      mapRef.current = undefined;
+      markerRef.current = undefined;
+      map.remove();
+    };
+  }, []);
+  let runSearch = () => {
+    if (geocoder !== undefined && query !== "") {
+      Stdlib_Promise.$$catch(geocoder.search(query).then(rs => {
+        setResults(param => rs);
+        return Promise.resolve();
+      }), param => Promise.resolve());
+      return;
+    }
+  };
+  let tmp;
+  let exit = 0;
+  if (lat !== undefined && lng !== undefined) {
+    tmp = JsxRuntime.jsx("span", {
+      children: `Selected: ` + lat.toString() + `, ` + lng.toString() + ` (click map or drag marker to change)`,
+      style: {
+        fontSize: "12px",
+        opacity: "0.7"
+      }
+    });
+  } else {
+    exit = 1;
+  }
+  if (exit === 1) {
+    tmp = JsxRuntime.jsx("span", {
+      children: "Click the map to place a location",
+      style: {
+        fontSize: "12px",
+        opacity: "0.7"
+      }
+    });
+  }
+  return JsxRuntime.jsxs("div", {
+    children: [
+      geocoder !== undefined ? JsxRuntime.jsxs("div", {
+          children: [
+            JsxRuntime.jsx("input", {
+              style: {
+                flex: "1"
+              },
+              placeholder: "Search address…",
+              type: "text",
+              value: query,
+              onKeyDown: e => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  return runSearch();
+                }
+              },
+              onChange: e => setQuery(e.target.value)
+            }),
+            JsxRuntime.jsx("button", {
+              children: "Search",
+              type: "button",
+              onClick: param => runSearch()
+            })
+          ],
+          style: {
+            display: "flex",
+            gap: "6px"
+          }
+        }) : null,
+      results.length !== 0 ? JsxRuntime.jsx("ul", {
+          children: results.map(r => JsxRuntime.jsx("li", {
+            children: JsxRuntime.jsx("button", {
+              children: r.label,
+              style: {
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                padding: "0",
+                textDecoration: "underline"
+              },
+              type: "button",
+              onClick: param => {
+                let map = mapRef.current;
+                if (map === undefined) {
+                  return;
+                }
+                let map$1 = Primitive_option.valFromOption(map);
+                map$1.flyTo({
+                  center: [
+                    r.lng,
+                    r.lat
+                  ],
+                  zoom: 13.0
+                });
+                placeMarker(map$1, r.lng, r.lat);
+                onChange([
+                  r.lat,
+                  r.lng
+                ]);
+                setResults(param => []);
+              }
+            })
+          }, r.label)),
+          style: {
+            margin: "0",
+            paddingLeft: "16px"
+          }
+        }) : null,
+      JsxRuntime.jsx("div", {
+        ref: Primitive_option.some(containerRef),
+        style: {
+          height: "280px",
+          overflow: "hidden",
+          borderRadius: "8px"
+        }
+      }),
+      tmp
+    ],
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "6px"
+    }
+  });
+}
+
+let make = GeoInput;
+
+export {
+  make,
+}
+/* react Not a pure module */

package/src/Geocoder.res

@@ -0,0 +1,41 @@
+// Constructs a `GeoInput.geocoder` from a deploy-time endpoint URL. AWS
+// Location Service needs SigV4-signed requests, so a browser can't call it
+// directly; the deployment exposes a thin proxy endpoint (a Lambda / API
+// route, owned by reventless-aws) that the shell reads from config.json and
+// hands here. The proxy takes a `?q=` query string and returns a JSON array
+// of `{label, lat, lng}` — exactly `GeoInput.geocodeResult`.
+//
+// Kept endpoint-shaped (not SDK-shaped) on purpose: the UI never holds AWS
+// credentials, and swapping the geocoding provider is a server-side change
+// with no UI rebuild.
+
+@val external fetch: string => promise<{..}> = "fetch"
+@val @scope("global") external encodeURIComponent: string => string = "encodeURIComponent"
+
+let decodeResult = (json: Js.Json.t): option<GeoInput.geocodeResult> =>
+  json
+  ->Js.Json.decodeObject
+  ->Option.flatMap(o =>
+    switch (
+      Js.Dict.get(o, "label")->Option.flatMap(Js.Json.decodeString),
+      Js.Dict.get(o, "lat")->Option.flatMap(Js.Json.decodeNumber),
+      Js.Dict.get(o, "lng")->Option.flatMap(Js.Json.decodeNumber),
+    ) {
+    | (Some(label), Some(lat), Some(lng)) => Some({GeoInput.label, lat, lng})
+    | _ => None
+    }
+  )
+
+let decodeResults = (json: Js.Json.t): array<GeoInput.geocodeResult> =>
+  json->Js.Json.decodeArray->Option.getOr([])->Array.filterMap(decodeResult)
+
+// Any failure (network, non-2xx, malformed body) resolves to `[]` — the map
+// input degrades to click-to-place rather than throwing into the form.
+let fromEndpoint = (endpoint: string): GeoInput.geocoder => {
+  search: query =>
+    fetch(`${endpoint}?q=${encodeURIComponent(query)}`)
+    ->Promise.then(res =>
+      res["ok"] ? res["json"]()->Promise.thenResolve(decodeResults) : Promise.resolve([])
+    )
+    ->Promise.catch(_ => Promise.resolve([])),
+}

package/src/Geocoder.res.mjs

@@ -0,0 +1,45 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Js_dict from "@rescript/runtime/lib/es6/Js_dict.js";
+import * as Js_json from "@rescript/runtime/lib/es6/Js_json.js";
+import * as Stdlib_Array from "@rescript/runtime/lib/es6/Stdlib_Array.js";
+import * as Stdlib_Option from "@rescript/runtime/lib/es6/Stdlib_Option.js";
+import * as Stdlib_Promise from "@rescript/runtime/lib/es6/Stdlib_Promise.js";
+
+function decodeResult(json) {
+  return Stdlib_Option.flatMap(Js_json.decodeObject(json), o => {
+    let match = Stdlib_Option.flatMap(Js_dict.get(o, "label"), Js_json.decodeString);
+    let match$1 = Stdlib_Option.flatMap(Js_dict.get(o, "lat"), Js_json.decodeNumber);
+    let match$2 = Stdlib_Option.flatMap(Js_dict.get(o, "lng"), Js_json.decodeNumber);
+    if (match !== undefined && match$1 !== undefined && match$2 !== undefined) {
+      return {
+        label: match,
+        lat: match$1,
+        lng: match$2
+      };
+    }
+  });
+}
+
+function decodeResults(json) {
+  return Stdlib_Array.filterMap(Stdlib_Option.getOr(Js_json.decodeArray(json), []), decodeResult);
+}
+
+function fromEndpoint(endpoint) {
+  return {
+    search: query => Stdlib_Promise.$$catch(fetch(endpoint + `?q=` + global.encodeURIComponent(query)).then(res => {
+      if (res.ok) {
+        return res.json().then(decodeResults);
+      } else {
+        return Promise.resolve([]);
+      }
+    }), param => Promise.resolve([]))
+  };
+}
+
+export {
+  decodeResult,
+  decodeResults,
+  fromEndpoint,
+}
+/* No side effect */