@dxos/react-ui-geo 0.8.4-main.28f8d3d → 0.8.4-main.2c6827d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-geo",
-  "version": "0.8.4-main.28f8d3d",
+  "version": "0.8.4-main.2c6827d",
   "description": "Geo components.",
   "homepage": "https://github.com/dxos",
   "bugs": "https://github.com/dxos/issues",
@@ -37,32 +37,32 @@
   ],
   "dependencies": {
     "@preact-signals/safe-react": "^0.9.0",
-    "@radix-ui/react-context": "^1.0.5",
+    "@radix-ui/react-context": "1.1.1",
     "d3": "^7.9.0",
     "d3-geo-projection": "^4.0.0",
     "d3-hexbin": "^0.2.2",
     "geojson": "^0.5.0",
     "leaflet": "^1.9.4",
     "lodash.defaultsdeep": "^4.6.1",
-    "react-leaflet": "^4.2.1",
+    "react-leaflet": "^5.0.0",
     "react-resize-detector": "^11.0.1",
     "topojson-client": "^3.1.0",
     "topojson-simplify": "^3.0.3",
     "versor": "^0.2.0",
-    "@dxos/async": "0.8.4-main.28f8d3d",
-    "@dxos/debug": "0.8.4-main.28f8d3d",
-    "@dxos/log": "0.8.4-main.28f8d3d",
-    "@dxos/node-std": "0.8.4-main.28f8d3d",
-    "@dxos/util": "0.8.4-main.28f8d3d"
+    "@dxos/async": "0.8.4-main.2c6827d",
+    "@dxos/debug": "0.8.4-main.2c6827d",
+    "@dxos/log": "0.8.4-main.2c6827d",
+    "@dxos/util": "0.8.4-main.2c6827d",
+    "@dxos/node-std": "0.8.4-main.2c6827d"
   },
   "devDependencies": {
     "@react-three/drei": "^9.99.0",
-    "@react-three/fiber": "^8.15.0",
+    "@react-three/fiber": "^9.3.0",
     "@types/d3": "^7.4.3",
     "@types/geojson": "^7946.0.14",
     "@types/leaflet": "^1.9.16",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
     "@types/three": "0.165.0",
     "@types/topojson-client": "^3.1.4",
     "@types/topojson-simplify": "^3.0.3",
@@ -70,18 +70,18 @@
     "JSONStream": "^1.3.5",
     "geojson2h3": "^1.2.0",
     "leva": "^0.9.35",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
     "three": "0.165.0",
-    "@dxos/react-ui": "0.8.4-main.28f8d3d",
-    "@dxos/react-ui-theme": "0.8.4-main.28f8d3d",
-    "@dxos/storybook-utils": "0.8.4-main.28f8d3d"
+    "@dxos/react-ui": "0.8.4-main.2c6827d",
+    "@dxos/react-ui-theme": "0.8.4-main.2c6827d",
+    "@dxos/storybook-utils": "0.8.4-main.2c6827d"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.28f8d3d",
-    "@dxos/react-ui-theme": "0.8.4-main.28f8d3d"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.2c6827d",
+    "@dxos/react-ui-theme": "0.8.4-main.2c6827d"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Globe/Globe.stories.tsx

@@ -2,16 +2,14 @@
 // Copyright 2018 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { type FeatureCollection, type Geometry, type Position } from 'geojson';
 import { Leva } from 'leva';
 import React, { useMemo, useRef, useState } from 'react';
 import { type Topology } from 'topojson-specification';
 
 import { useAsyncState } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { type Vector, useDrag, useGlobeZoomHandler, useSpinner, useTour } from '../../hooks';
 import { type LatLngLiteral } from '../../types';
@@ -138,7 +136,7 @@ type StoryProps = Pick<GlobeRootProps, 'zoom' | 'translation' | 'rotation'> &
     xAxis?: boolean;
   };
 
-const Story = ({
+const DefaultStory = ({
   zoom: _zoom = 1,
   translation,
   rotation = [0, 0, 0],
@@ -159,6 +157,7 @@ const Story = ({
   });
   const [topology] = useTopology();
   const [airports] = useAsyncState(async () => (await import('../../../data/airports.ts')).default);
+
   const features = useMemo(() => {
     return airports ? createTrip(airports, routes, (dots?.objects.dots as any)?.geometries[0].coordinates) : undefined;
   }, [airports, routes, dots]);
@@ -215,7 +214,7 @@ const Story = ({
       <Globe.Zoom onAction={handleAction} />
       <Globe.Action onAction={handleAction} />
       <Globe.Debug />
-      <Globe.Panel position='topright' classNames='w-20 h-20'>
+      <Globe.Panel position='topright' classNames='is-20 bs-20'>
         <Leva />
       </Globe.Panel>
     </Globe.Root>
@@ -224,11 +223,15 @@ const Story = ({
 
 const initialRotation: Vector = [0, -40, 0];
 
-const meta: Meta = {
+const meta = {
   title: 'ui/react-ui-geo/Globe',
   component: Globe.Root,
-  decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'bg-[#000]' })],
-};
+  render: DefaultStory,
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
 
 export default meta;
 
@@ -295,26 +298,66 @@ export const Mercator = () => {
   );
 };
 
-export const Globe1 = () => {
-  return <Story drag projection='mercator' zoom={0.8} rotation={initialRotation} styles={defaultStyles} />;
+type Story = StoryObj<typeof DefaultStory>;
+
+export const Globe1: Story = {
+  args: {
+    drag: true,
+    projection: 'mercator',
+    zoom: 0.8,
+    rotation: initialRotation,
+    styles: defaultStyles,
+  },
 };
 
-export const Globe2 = () => {
-  return <Story drag projection='transverse-mercator' zoom={0.8} rotation={initialRotation} styles={defaultStyles} />;
+export const Globe2: Story = {
+  args: {
+    drag: true,
+    projection: 'transverse-mercator',
+    zoom: 0.8,
+    rotation: initialRotation,
+    styles: defaultStyles,
+  },
 };
 
-export const Globe3 = () => {
-  return <Story drag spin zoom={1.5} rotation={initialRotation} styles={defaultStyles} />;
+export const Globe3: Story = {
+  args: {
+    drag: true,
+    spin: true,
+    zoom: 1.5,
+    rotation: initialRotation,
+    styles: defaultStyles,
+  },
 };
 
-export const Globe4 = () => {
-  return <Story drag tour zoom={2} rotation={initialRotation} styles={defaultStyles} />;
+export const Globe4: Story = {
+  args: {
+    drag: true,
+    tour: true,
+    zoom: 2,
+    rotation: initialRotation,
+    styles: defaultStyles,
+  },
 };
 
-export const Globe5 = () => {
-  return <Story drag tour zoom={0.9} rotation={initialRotation} styles={dotStyles} />;
+export const Globe5: Story = {
+  args: {
+    drag: true,
+    tour: true,
+    zoom: 0.9,
+    rotation: initialRotation,
+    styles: dotStyles,
+  },
 };
 
-export const Globe6 = () => {
-  return <Story drag xAxis tour zoom={2} translation={{ x: 0, y: 600 }} rotation={[0, -20, 0]} styles={dotStyles} />;
+export const Globe6: Story = {
+  args: {
+    drag: true,
+    xAxis: true,
+    tour: true,
+    zoom: 2,
+    translation: { x: 0, y: 600 },
+    rotation: [0, -20, 0],
+    styles: dotStyles,
+  },
 };

package/src/components/Globe/Globe.tsx

@@ -130,6 +130,7 @@ type GlobeRootProps = PropsWithChildren<ThemedClassName<GlobeContextProviderProp
 
 const GlobeRoot = ({ classNames, children, ...props }: GlobeRootProps) => {
   const { ref, width, height } = useResizeDetector<HTMLDivElement>();
+
   return (
     <div ref={ref} className={mx('relative flex grow overflow-hidden', classNames)}>
       <GlobeContextProvider size={{ width, height }} {...props}>
@@ -156,16 +157,16 @@ type GlobeCanvasProps = {
  */
 // TODO(burdon): Move controller to root.
 const GlobeCanvas = forwardRef<GlobeController, GlobeCanvasProps>(
-  ({ projection: _projection, topology, features, styles: _styles }, forwardRef) => {
+  ({ projection: projectionParam, topology, features, styles: stylesParam }, forwardRef) => {
     const { themeMode } = useThemeContext();
-    const styles = useMemo(() => _styles ?? defaultStyles[themeMode], [_styles, themeMode]);
+    const styles = useMemo(() => stylesParam ?? defaultStyles[themeMode], [stylesParam, themeMode]);
 
     // Canvas.
     const [canvas, setCanvas] = useState<HTMLCanvasElement>(null);
     const canvasRef = (canvas: HTMLCanvasElement) => setCanvas(canvas);
 
     // Projection.
-    const projection = useMemo(() => getProjection(_projection), [_projection]);
+    const projection = useMemo(() => getProjection(projectionParam), [projectionParam]);
 
     // Layers.
     // TODO(burdon): Generate on the fly based on what is visible.
@@ -258,7 +259,7 @@ const GlobeDebug = ({ position = 'topleft' }: { position?: ControlPosition }) =>
   return (
     <div
       className={mx(
-        'z-10 absolute w-96 p-2 overflow-hidden border border-green-700 rounded',
+        'z-10 absolute is-96 p-2 overflow-hidden border border-green-700 rounded',
         controlPositions[position],
       )}
     >

package/src/components/Map/Map.stories.tsx

@@ -2,12 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { useMapZoomHandler } from '../../hooks';
 import { type GeoMarker } from '../../types';
@@ -28,15 +26,19 @@ const DefaultStory = ({ markers = [] }: { markers?: GeoMarker[] }) => {
   );
 };
 
-const meta: Meta<typeof DefaultStory> = {
+const meta = {
   title: 'ui/react-ui-geo/Map',
+  component: Map.Root as any,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-};
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj<typeof DefaultStory>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 

package/src/components/Map/Map.tsx

@@ -8,10 +8,8 @@ import { createContext } from '@radix-ui/react-context';
 import L, { Control, type ControlPosition, DomEvent, DomUtil, type LatLngLiteral, latLngBounds } from 'leaflet';
 import React, { type PropsWithChildren, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import type { MapContainerProps } from 'react-leaflet';
-import { MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet';
+import { MapContainer, type MapContainerProps, Marker, Popup, TileLayer, useMap, useMapEvents } from 'react-leaflet';
 
-import { debounce } from '@dxos/async';
 import { ThemeProvider, type ThemedClassName, Tooltip } from '@dxos/react-ui';
 import { defaultTx, mx } from '@dxos/react-ui-theme';
 
@@ -25,7 +23,7 @@ import { ActionControls, type ControlProps, ZoomControls, controlPositions } fro
 const defaults = {
   center: { lat: 51, lng: 0 } as L.LatLngLiteral,
   zoom: 4,
-};
+} as const;
 
 //
 // Controller
@@ -42,6 +40,7 @@ type MapController = {
 
 type MapContextValue = {
   attention?: boolean;
+  onChange?: (ev: { center: LatLngLiteral; zoom: number }) => void;
 };
 
 const [MapContextProvier, useMapContext] = createContext<MapContextValue>('Map');
@@ -50,27 +49,14 @@ const [MapContextProvier, useMapContext] = createContext<MapContextValue>('Map')
 // Root
 //
 
-type MapRootProps = ThemedClassName<
-  MapContainerProps & {
-    onChange?: (ev: { center: LatLngLiteral; zoom: number }) => void;
-  }
->;
+type MapRootProps = ThemedClassName<MapContainerProps & Pick<MapContextValue, 'onChange'>>;
 
 /**
  * https://react-leaflet.js.org/docs/api-map
  */
 const MapRoot = forwardRef<MapController, MapRootProps>(
   (
-    {
-      classNames,
-      scrollWheelZoom = true,
-      doubleClickZoom = true,
-      touchZoom = true,
-      center = defaults.center,
-      zoom = defaults.zoom,
-      onChange,
-      ...props
-    },
+    { classNames, scrollWheelZoom = true, doubleClickZoom = true, touchZoom = true, center, zoom, onChange, ...props },
     forwardedRef,
   ) => {
     const [attention, setAttention] = useState(false);
@@ -90,32 +76,6 @@ const MapRoot = forwardRef<MapController, MapRootProps>(
       [],
     );
 
-    // Events.
-    useEffect(() => {
-      if (!map) {
-        return;
-      }
-
-      const handler = debounce(() => {
-        setAttention(true);
-        onChange?.({
-          center: map.getCenter(),
-          zoom: map.getZoom(),
-        });
-      }, 100);
-
-      map.on('move', handler);
-      map.on('zoom', handler);
-      map.on('focus', () => setAttention(true));
-      map.on('blur', () => setAttention(false));
-      return () => {
-        map.off('move');
-        map.off('zoom');
-        map.off('focus');
-        map.off('blur');
-      };
-    }, [map, onChange]);
-
     // Enable/disable scroll wheel zoom.
     // TODO(burdon): Use attention:
     // const {hasAttention} = useAttention(props.id);
@@ -132,7 +92,7 @@ const MapRoot = forwardRef<MapController, MapRootProps>(
     }, [map, attention]);
 
     return (
-      <MapContextProvier attention={attention}>
+      <MapContextProvier attention={attention} onChange={onChange}>
         <MapContainer
           {...props}
           ref={mapRef}
@@ -142,8 +102,8 @@ const MapRoot = forwardRef<MapController, MapRootProps>(
           scrollWheelZoom={scrollWheelZoom}
           doubleClickZoom={doubleClickZoom}
           touchZoom={touchZoom}
-          center={center}
-          zoom={zoom}
+          center={center ?? defaults.center}
+          zoom={zoom ?? defaults.zoom}
           // whenReady={() => {}}
         />
       </MapContextProvier>
@@ -162,6 +122,16 @@ type MapTilesProps = {};
 
 const MapTiles = (_props: MapTilesProps) => {
   const ref = useRef<L.TileLayer>(null);
+  const { onChange } = useMapContext(MapTiles.displayName);
+
+  useMapEvents({
+    zoomstart: (ev) => {
+      onChange?.({
+        center: ev.target.getCenter(),
+        zoom: ev.target.getZoom(),
+      });
+    },
+  });
 
   // NOTE: Need to dynamically update data attribute since TileLayer doesn't update, but
   // Tailwind requires setting the property for static analysis.

package/src/components/Toolbar/Controls.tsx

@@ -5,7 +5,9 @@
 import { type ControlPosition } from 'leaflet';
 import React from 'react';
 
-import { IconButton, type ThemedClassName, Toolbar } from '@dxos/react-ui';
+import { IconButton, type ThemedClassName, Toolbar, useTranslation } from '@dxos/react-ui';
+
+import { translationKey } from '../../translations';
 
 export type ControlAction = 'toggle' | 'start' | 'zoom-in' | 'zoom-out';
 
@@ -21,22 +23,20 @@ export const controlPositions: Record<ControlPosition, string> = {
 };
 
 export const ZoomControls = ({ classNames, onAction }: ControlProps) => {
+  const { t } = useTranslation(translationKey);
+
   return (
     <Toolbar.Root classNames={['gap-2', classNames]}>
       <IconButton
         icon='ph--plus--regular'
-        label='zoom in'
         iconOnly
-        size={5}
-        classNames='px-0 aspect-square'
+        label={t('zoom in icon button')}
         onClick={() => onAction?.('zoom-in')}
       />
       <IconButton
         icon='ph--minus--regular'
-        label='zoom out'
         iconOnly
-        size={5}
-        classNames='px-0 aspect-square'
+        label={t('zoom out icon button')}
         onClick={() => onAction?.('zoom-out')}
       />
     </Toolbar.Root>
@@ -44,22 +44,20 @@ export const ZoomControls = ({ classNames, onAction }: ControlProps) => {
 };
 
 export const ActionControls = ({ classNames, onAction }: ControlProps) => {
+  const { t } = useTranslation(translationKey);
+
   return (
     <Toolbar.Root classNames={['gap-2', classNames]}>
       <IconButton
-        icon='ph--play--regular'
-        label='start'
+        icon='ph--path--regular'
         iconOnly
-        size={5}
-        classNames='px-0 aspect-square'
+        label={t('start icon button')}
         onClick={() => onAction?.('start')}
       />
       <IconButton
         icon='ph--globe-hemisphere-west--regular'
-        label='toggle'
         iconOnly
-        size={5}
-        classNames='px-0 aspect-square'
+        label={t('toggle icon button')}
         onClick={() => onAction?.('toggle')}
       />
     </Toolbar.Root>

package/src/hooks/context.tsx

@@ -26,6 +26,12 @@ export type GlobeContextType = {
   setRotation: Dispatch<SetStateAction<Vector>>;
 };
 
+const defaults = {
+  center: { lat: 51, lng: 0 } as LatLngLiteral,
+  zoom: 4,
+} as const;
+
+// TODO(burdon): Replace with radix.
 const GlobeContext = createContext<GlobeContextType>(undefined);
 
 export type GlobeContextProviderProps = PropsWithChildren<
@@ -35,15 +41,15 @@ export type GlobeContextProviderProps = PropsWithChildren<
 export const GlobeContextProvider = ({
   children,
   size,
-  center: _center,
-  zoom: _zoom,
-  translation: _translation,
-  rotation: _rotation,
+  center: centerParam = defaults.center,
+  zoom: zoomParam = defaults.zoom,
+  translation: translationParam,
+  rotation: rotationParam,
 }: GlobeContextProviderProps) => {
-  const [center, setCenter] = useControlledState(_center);
-  const [zoom, setZoom] = useControlledState(_zoom);
-  const [translation, setTranslation] = useControlledState<Point>(_translation);
-  const [rotation, setRotation] = useControlledState<Vector>(_rotation);
+  const [center, setCenter] = useControlledState(centerParam);
+  const [zoom, setZoom] = useControlledState(zoomParam);
+  const [translation, setTranslation] = useControlledState<Point>(translationParam);
+  const [rotation, setRotation] = useControlledState<Vector>(rotationParam);
 
   return (
     <GlobeContext.Provider

package/src/hooks/useGlobeZoomHandler.ts

@@ -6,6 +6,8 @@ import { useCallback } from 'react';
 
 import { type ControlProps, type GlobeController } from '../components';
 
+const ZOOM_FACTOR = 0.1;
+
 export const useGlobeZoomHandler = (controller: GlobeController | null | undefined): ControlProps['onAction'] => {
   return useCallback<ControlProps['onAction']>(
     (event) => {
@@ -15,11 +17,15 @@ export const useGlobeZoomHandler = (controller: GlobeController | null | undefin
 
       switch (event) {
         case 'zoom-in': {
-          controller.setZoom((zoom) => zoom * 1.1);
+          controller.setZoom((zoom) => {
+            return zoom * (1 + ZOOM_FACTOR);
+          });
           break;
         }
         case 'zoom-out': {
-          controller.setZoom((zoom) => zoom * 0.9);
+          controller.setZoom((zoom) => {
+            return zoom * (1 - ZOOM_FACTOR);
+          });
           break;
         }
       }

package/src/hooks/useTour.ts

@@ -34,6 +34,7 @@ export const useTour = (
   options: TourOptions = {},
 ): [boolean, Dispatch<SetStateAction<boolean>>] => {
   const selection = useMemo(() => d3Selection(), []);
+  // TODO(burdon): Redo controlled state.
   const [running, setRunning] = useState(options.running ?? false);
   useEffect(() => {
     if (!running) {

package/src/index.ts

@@ -5,5 +5,6 @@
 export * from './components';
 export * from './data';
 export * from './hooks';
+export * from './translations';
 export type * from './types';
 export * from './util';

package/src/translations.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Resource } from '@dxos/react-ui';
+
+export const translationKey = 'react-ui-geo';
+
+export const translations = [
+  {
+    'en-US': {
+      [translationKey]: {
+        'zoom in icon button': 'Zoom in',
+        'zoom out icon button': 'Zoom out',
+        'start icon button': 'Start',
+        'toggle icon button': 'Toggle',
+      },
+    },
+  },
+] as const satisfies Resource[];