@dxos/react-ui-geo 0.8.4-main.fd6878d → 0.8.4-staging.ac66bdf99f

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@dxos/react-ui-geo",
-  "version": "0.8.4-main.fd6878d",
+  "version": "0.8.4-staging.ac66bdf99f",
   "description": "Geo components.",
   "homepage": "https://github.com/dxos",
   "bugs": "https://github.com/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
   "sideEffects": true,
@@ -36,52 +40,52 @@
     "src"
   ],
   "dependencies": {
-    "@preact-signals/safe-react": "^0.9.0",
-    "@radix-ui/react-context": "^1.0.5",
+    "@radix-ui/react-compose-refs": "1.1.1",
+    "@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.fd6878d",
-    "@dxos/debug": "0.8.4-main.fd6878d",
-    "@dxos/log": "0.8.4-main.fd6878d",
-    "@dxos/node-std": "0.8.4-main.fd6878d",
-    "@dxos/util": "0.8.4-main.fd6878d"
+    "@dxos/log": "0.8.4-staging.ac66bdf99f",
+    "@dxos/async": "0.8.4-staging.ac66bdf99f",
+    "@dxos/debug": "0.8.4-staging.ac66bdf99f",
+    "@dxos/node-std": "0.8.4-staging.ac66bdf99f",
+    "@dxos/util": "0.8.4-staging.ac66bdf99f"
   },
   "devDependencies": {
-    "@react-three/drei": "^9.99.0",
-    "@react-three/fiber": "^8.15.0",
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.5.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.7",
+    "@types/react-dom": "~19.2.3",
     "@types/three": "0.165.0",
     "@types/topojson-client": "^3.1.4",
     "@types/topojson-simplify": "^3.0.3",
     "@types/topojson-specification": "^1.0.5",
     "JSONStream": "^1.3.5",
     "geojson2h3": "^1.2.0",
-    "leva": "^0.9.35",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "three": "0.165.0",
-    "@dxos/react-ui": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-theme": "0.8.4-main.fd6878d",
-    "@dxos/storybook-utils": "0.8.4-main.fd6878d"
+    "leva": "^0.10.1",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "three": "^0.178.0",
+    "@dxos/storybook-utils": "0.8.4-staging.ac66bdf99f",
+    "@dxos/react-ui": "0.8.4-staging.ac66bdf99f",
+    "@dxos/ui-theme": "0.8.4-staging.ac66bdf99f"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.4-main.fd6878d",
-    "@dxos/react-ui": "0.8.4-main.fd6878d"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-staging.ac66bdf99f",
+    "@dxos/ui-theme": "0.8.4-staging.ac66bdf99f"
   },
   "publishConfig": {
     "access": "public"

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

@@ -2,22 +2,19 @@
 // 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 { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { type Vector, useDrag, useGlobeZoomHandler, useSpinner, useTour } from '../../hooks';
 import { type LatLngLiteral } from '../../types';
 import { type StyleSet, closestPoint } from '../../util';
 import { type ControlProps } from '../Toolbar';
-
 import { Globe, type GlobeCanvasProps, type GlobeController, type GlobeRootProps } from './Globe';
 
 // TODO(burdon): Load from JSON at runtime?
@@ -130,7 +127,7 @@ const createTrip = (
   );
 };
 
-type StoryProps = Pick<GlobeRootProps, 'zoom' | 'translation' | 'rotation'> &
+type DefaultStoryProps = Pick<GlobeRootProps, 'zoom' | 'translation' | 'rotation'> &
   Pick<GlobeCanvasProps, 'projection' | 'styles'> & {
     drag?: boolean;
     spin?: boolean;
@@ -138,8 +135,8 @@ type StoryProps = Pick<GlobeRootProps, 'zoom' | 'translation' | 'rotation'> &
     xAxis?: boolean;
   };
 
-const Story = ({
-  zoom: _zoom = 1,
+const DefaultStory = ({
+  zoom: zoomProp = 1,
   translation,
   rotation = [0, 0, 0],
   projection,
@@ -148,7 +145,7 @@ const Story = ({
   spin = false,
   tour = false,
   xAxis = false,
-}: StoryProps) => {
+}: DefaultStoryProps) => {
   const controller = useRef<GlobeController>(null);
   const [dots] = useAsyncState(async () => {
     const points = (await import('../../../data/countries-dots-3.ts')).default;
@@ -159,6 +156,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]);
@@ -204,13 +202,13 @@ const Story = ({
   };
 
   return (
-    <Globe.Root classNames='absolute inset-0' zoom={_zoom} translation={translation} rotation={rotation}>
+    <Globe.Root zoom={zoomProp} translation={translation} rotation={rotation}>
       <Globe.Canvas
-        ref={controller}
         topology={styles?.dots ? dots : topology}
         projection={projection}
         styles={styles}
         features={tour ? { points: features?.points ?? [] } : features}
+        ref={controller}
       />
       <Globe.Zoom onAction={handleAction} />
       <Globe.Action onAction={handleAction} />
@@ -224,11 +222,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(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
 
 export default meta;
 
@@ -295,26 +297,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

@@ -26,15 +26,17 @@ import React, {
 import { useResizeDetector } from 'react-resize-detector';
 import { type Topology } from 'topojson-specification';
 
-import { type ThemeMode, type ThemedClassName, useDynamicRef, useThemeContext } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
 import {
-  GlobeContextProvider,
-  type GlobeContextProviderProps,
-  type GlobeContextType,
-  useGlobeContext,
-} from '../../hooks';
+  type ThemeMode,
+  type ThemedClassName,
+  useComposedRefs,
+  useControlledState,
+  useDynamicRef,
+  useThemeContext,
+} from '@dxos/react-ui';
+import { composable, composableProps, mx } from '@dxos/ui-theme';
+
+import { GlobeContext, type GlobeContextType, type Point, type Vector, useGlobeContext } from '../../hooks';
 import {
   type Features,
   type StyleSet,
@@ -126,18 +128,43 @@ const getProjection = (type: GlobeCanvasProps['projection'] = 'orthographic'): G
 // Root
 //
 
-type GlobeRootProps = PropsWithChildren<ThemedClassName<GlobeContextProviderProps>>;
-
-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}>
-        {children}
-      </GlobeContextProvider>
-    </div>
-  );
-};
+type GlobeRootProps = Partial<Pick<GlobeContextType, 'center' | 'zoom' | 'translation' | 'rotation'>>;
+
+const GlobeRoot = composable<HTMLDivElement, GlobeRootProps>(
+  (
+    { children, center: centerProp, zoom: zoomProp, translation: translationProp, rotation: rotationProp, ...props },
+    forwardedRef,
+  ) => {
+    const localRef = useRef<HTMLDivElement>(null);
+    const composedRef = useComposedRefs<HTMLDivElement>(localRef, forwardedRef);
+    const { width, height } = useResizeDetector<HTMLDivElement>({ targetRef: localRef });
+
+    const [center, setCenter] = useControlledState(centerProp);
+    const [zoom, setZoom] = useControlledState(zoomProp ?? 4);
+    const [translation, setTranslation] = useControlledState<Point>(translationProp);
+    const [rotation, setRotation] = useControlledState<Vector>(rotationProp);
+
+    return (
+      <GlobeContext.Provider
+        value={{
+          size: { width, height },
+          center,
+          zoom,
+          translation,
+          rotation,
+          setCenter,
+          setZoom,
+          setTranslation,
+          setRotation,
+        }}
+      >
+        <div {...composableProps(props, { classNames: 'relative dx-container' })} ref={composedRef}>
+          {children}
+        </div>
+      </GlobeContext.Provider>
+    );
+  },
+);
 
 //
 // Canvas
@@ -156,16 +183,16 @@ type GlobeCanvasProps = {
  */
 // TODO(burdon): Move controller to root.
 const GlobeCanvas = forwardRef<GlobeController, GlobeCanvasProps>(
-  ({ projection: _projection, topology, features, styles: _styles }, forwardRef) => {
+  ({ projection: projectionProp, topology, features, styles: stylesProp }, forwardRef) => {
     const { themeMode } = useThemeContext();
-    const styles = useMemo(() => _styles ?? defaultStyles[themeMode], [_styles, themeMode]);
+    const styles = useMemo(() => stylesProp ?? defaultStyles[themeMode], [stylesProp, 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(projectionProp), [projectionProp]);
 
     // Layers.
     // TODO(burdon): Generate on the fly based on what is visible.
@@ -199,9 +226,9 @@ const GlobeCanvas = forwardRef<GlobeController, GlobeCanvasProps>(
         translation,
         rotation,
         setCenter,
-        setZoom: (s) => {
-          if (typeof s === 'function') {
-            const is = interpolateNumber(zoomRef.current, s(zoomRef.current));
+        setZoom: (state) => {
+          if (typeof state === 'function') {
+            const is = interpolateNumber(zoomRef.current, state(zoomRef.current));
             // Stop easing if already zooming.
             transition()
               .ease(zooming.current ? easeLinear : easeSinOut)
@@ -211,7 +238,7 @@ const GlobeCanvas = forwardRef<GlobeController, GlobeCanvasProps>(
                 zooming.current = false;
               });
           } else {
-            setZoom(s);
+            setZoom(state);
           }
         },
         setTranslation,
@@ -258,7 +285,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 w-96 p-2 overflow-hidden border border-green-700 rounded-sm',
         controlPositions[position],
       )}
     >

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

@@ -2,16 +2,13 @@
 // 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 { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { useMapZoomHandler } from '../../hooks';
 import { type GeoMarker } from '../../types';
-
 import { Map, type MapController } from './Map';
 
 const DefaultStory = ({ markers = [] }: { markers?: GeoMarker[] }) => {
@@ -19,24 +16,30 @@ const DefaultStory = ({ markers = [] }: { markers?: GeoMarker[] }) => {
   const handleZoomAction = useMapZoomHandler(controller);
 
   return (
-    <Map.Root ref={setController}>
-      <Map.Tiles />
-      <Map.Markers markers={markers} />
-      <Map.Zoom position='bottomleft' onAction={handleZoomAction} />
-      <Map.Action position='bottomright' />
+    <Map.Root>
+      <Map.Content ref={setController}>
+        <Map.Tiles />
+        <Map.Markers markers={markers} />
+        <Map.Zoom position='bottomleft' onAction={handleZoomAction} />
+        <Map.Action position='bottomright' />
+      </Map.Content>
     </Map.Root>
   );
 };
 
-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(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj<typeof DefaultStory>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};