@coinbase/cds-mobile-visualization 3.4.0-beta.2 → 3.4.0-beta.21

package/esm/chart/ChartContextBridge.js

@@ -0,0 +1,159 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * Simplified context bridge utilities for React Native.
+ * Adapted from its-fine to enable context sharing across React renderers
+ * https://github.com/pmndrs/its-fine/blob/598b81f02778c22ed21121c2b1a786bdefb14e23/src/index.tsx
+ */
+
+import * as React from 'react';
+import { ThemeContext } from '@coinbase/cds-mobile/system/ThemeProvider';
+import { ScrubberContext } from './utils/context';
+import { CartesianChartContext } from './ChartProvider';
+
+/**
+ * Whitelist of contexts that should be bridged to the Skia canvas.
+ * Only these contexts will be made available inside the chart's Skia tree.
+ * This improves performance by avoiding the overhead of rendering every bridged context.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const BRIDGED_CONTEXTS = [ThemeContext, CartesianChartContext, ScrubberContext];
+
+/**
+ * Represents a react-internal tree node.
+ */
+
+/**
+ * Represents a tree node selector for traversal.
+ */
+
+/**
+ * Traverses up or down a React tree, return `true` to stop and select a node.
+ */
+function traverseTreeNode(node, ascending, selector) {
+  if (!node) return;
+  if (selector(node) === true) return node;
+  let child = ascending ? node.return : node.child;
+  while (child) {
+    const match = traverseTreeNode(child, ascending, selector);
+    if (match) return match;
+    child = ascending ? null : child.sibling;
+  }
+}
+
+/**
+ * Wraps context to hide React development warnings about using contexts between renderers.
+ */
+function wrapContext(context) {
+  try {
+    return Object.defineProperties(context, {
+      _currentRenderer: {
+        get() {
+          return null;
+        },
+        set() {}
+      },
+      _currentRenderer2: {
+        get() {
+          return null;
+        },
+        set() {}
+      }
+    });
+  } catch (_) {
+    return context;
+  }
+}
+
+// In development, React will warn about using contexts between renderers.
+// Suppress the warning because our context bridge fixes this issue
+const error = console.error;
+console.error = function () {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  const message = args.join('');
+  if (message != null && message.startsWith('Warning:') && message.includes('useContext')) {
+    console.error = error;
+    return;
+  }
+  return error.apply(this, args);
+};
+const TreeNodeContext = wrapContext(/*#__PURE__*/React.createContext(null));
+
+/**
+ * A react-internal tree node provider that binds React children to the React tree for chart context bridging.
+ */
+export class ChartBridgeProvider extends React.Component {
+  render() {
+    return /*#__PURE__*/_jsx(TreeNodeContext.Provider, {
+      value: this._reactInternals,
+      children: this.props.children
+    });
+  }
+}
+
+/**
+ * Returns the current react-internal tree node.
+ */
+function useTreeNode() {
+  const root = React.useContext(TreeNodeContext);
+  if (root === null) throw new Error('useTreeNode must be called within a <ChartBridgeProvider />!');
+  const id = React.useId();
+  const treeNode = React.useMemo(() => {
+    for (const maybeNode of [root, root == null ? void 0 : root.alternate]) {
+      if (!maybeNode) continue;
+      const node = traverseTreeNode(maybeNode, false, node => {
+        let state = node.memoizedState;
+        while (state) {
+          if (state.memoizedState === id) return true;
+          state = state.next;
+        }
+      });
+      if (node) return node;
+    }
+  }, [root, id]);
+  return treeNode;
+}
+/**
+ * Returns a map of whitelisted contexts and their values.
+ */
+function useContextMap() {
+  const treeNode = useTreeNode();
+  const [contextMap] = React.useState(() => new Map());
+
+  // Collect live context
+  contextMap.clear();
+  let node = treeNode;
+  while (node) {
+    if (node.type && typeof node.type === 'object') {
+      // https://github.com/facebook/react/pull/28226
+      const enableRenderableContext = node.type._context === undefined && node.type.Provider === node.type;
+      const context = enableRenderableContext ? node.type : node.type._context;
+      if (context && context !== TreeNodeContext && BRIDGED_CONTEXTS.includes(context) && !contextMap.has(context)) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        contextMap.set(context, React.useContext(wrapContext(context)));
+      }
+    }
+    node = node.return;
+  }
+  return contextMap;
+}
+
+/**
+ * Represents a chart context bridge provider component.
+ */
+
+/**
+ * Returns a ChartContextBridge of live context providers to pierce Context across renderers.
+ * Pass ChartContextBridge as a component to a secondary renderer (e.g., Skia Canvas) to enable context-sharing in charts.
+ */
+export function useChartContextBridge() {
+  const contextMap = useContextMap();
+
+  // Flatten context and their memoized values into a `ChartContextBridge` provider
+  return React.useMemo(() => Array.from(contextMap.keys()).reduce((Prev, context) => props => /*#__PURE__*/_jsx(Prev, {
+    children: /*#__PURE__*/_jsx(context.Provider, _extends({}, props, {
+      value: contextMap.get(context)
+    }))
+  }), props => /*#__PURE__*/_jsx(ChartBridgeProvider, _extends({}, props))), [contextMap]);
+}

package/esm/chart/ChartProvider.js

@@ -1,9 +1,9 @@
 import { createContext, useContext } from 'react';
-const CartesianChartContext = /*#__PURE__*/createContext(undefined);
+export const CartesianChartContext = /*#__PURE__*/createContext(undefined);
 export const useCartesianChartContext = () => {
   const context = useContext(CartesianChartContext);
   if (!context) {
-    throw new Error('useCartesianChartContext must be used within a CartesianChart component. See http://cds.coinbase.com/components/graphs/CartesianChart.');
+    throw new Error('useCartesianChartContext must be used within a CartesianChart component. See https://cds.coinbase.com/components/charts/CartesianChart.');
   }
   return context;
 };

package/esm/chart/Path.js

@@ -1,133 +1,219 @@
-const _excluded = ["clipRect", "clipOffset", "d", "fill", "stroke", "strokeWidth", "strokeOpacity", "fillOpacity", "strokeDasharray", "testID", "animate"];
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const _excluded = ["d", "initialPath", "fill", "fillOpacity", "stroke", "strokeOpacity", "strokeWidth", "strokeCap", "strokeJoin", "children", "transitions"],
+  _excluded2 = ["animate", "clipRect", "clipPath", "clipOffset", "d", "initialPath", "fill", "fillOpacity", "stroke", "strokeOpacity", "strokeWidth", "strokeCap", "strokeJoin", "children", "transitions", "transition"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { memo, useCallback, useEffect, useId, useMemo, useRef } from 'react';
-import Reanimated, { runOnJS, useAnimatedProps, useAnimatedReaction, useSharedValue, withTiming } from 'react-native-reanimated';
-import { ClipPath, Defs, G, Path as SvgPath, Rect } from 'react-native-svg';
-import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
-import * as interpolate from 'd3-interpolate-path';
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo, useEffect, useMemo } from 'react';
+import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
+import { Group, Path as SkiaPath, Skia, usePathInterpolation } from '@shopify/react-native-skia';
+import { defaultPathEnterTransition } from './utils/path';
+import { buildTransition, defaultTransition, getTransition, usePathTransition } from './utils/transition';
 import { useCartesianChartContext } from './ChartProvider';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AnimatedRect = Reanimated.createAnimatedComponent(Rect);
-const AnimatedSvgRect = /*#__PURE__*/memo(_ref => {
+import { unwrapAnimatedValue } from './utils';
+
+/**
+ * Duration in milliseconds for path enter transition.
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const pathEnterTransitionDuration = 500;
+const AnimatedPath = /*#__PURE__*/memo(_ref => {
   let {
-    width,
-    totalOffset,
-    rectProps
-  } = _ref;
-  const animatedWidth = useSharedValue(width + totalOffset);
-  const animatedProps = useAnimatedProps(() => {
-    return {
-      width: animatedWidth.value
-    };
+      d = '',
+      initialPath,
+      fill,
+      fillOpacity,
+      stroke,
+      strokeOpacity,
+      strokeWidth,
+      strokeCap,
+      strokeJoin,
+      children,
+      transitions
+    } = _ref,
+    pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const isDAnimated = typeof d !== 'string';
+  const animatedPath = usePathTransition({
+    currentPath: isDAnimated ? '' : d,
+    initialPath,
+    transitions
+  });
+  const isFilled = fill !== undefined && fill !== 'none';
+  const isStroked = stroke !== undefined && stroke !== 'none';
+  const activePath = useDerivedValue(() => {
+    if (isDAnimated) {
+      var _d$value;
+      return (_d$value = d.value) != null ? _d$value : Skia.Path.Make();
+    }
+    return animatedPath.value;
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [isFilled && /*#__PURE__*/_jsx(SkiaPath, _extends({
+      color: fill,
+      opacity: fillOpacity,
+      path: activePath,
+      style: "fill"
+    }, pathProps, {
+      children: children
+    })), isStroked && /*#__PURE__*/_jsx(SkiaPath, _extends({
+      color: stroke,
+      opacity: strokeOpacity,
+      path: activePath,
+      strokeCap: strokeCap,
+      strokeJoin: strokeJoin,
+      strokeWidth: strokeWidth,
+      style: "stroke"
+    }, pathProps, {
+      children: children
+    }))]
   });
-  useEffect(() => {
-    animatedWidth.value = withTiming(width + totalOffset, {
-      duration: 1000
-    });
-  }, [animatedWidth, width, totalOffset]);
-  return /*#__PURE__*/_jsx(AnimatedRect, _extends({
-    animatedProps: animatedProps
-  }, rectProps));
 });
-export const Path = /*#__PURE__*/memo(_ref2 => {
-  let {
+export const Path = /*#__PURE__*/memo(props => {
+  const {
+      animate: animateProp,
       clipRect,
-      clipOffset,
+      clipPath: clipPathProp,
+      clipOffset = 0,
       d = '',
+      initialPath,
       fill,
+      fillOpacity,
       stroke,
-      strokeWidth,
       strokeOpacity,
-      fillOpacity,
-      strokeDasharray,
-      testID,
-      animate: animateProp
-    } = _ref2,
-    pathProps = _objectWithoutPropertiesLoose(_ref2, _excluded);
-  const pathRef = useRef(null);
-  const {
-    animate: animateContext,
-    drawingArea: contextRect
-  } = useCartesianChartContext();
-  const rect = clipRect != null ? clipRect : contextRect;
-  const animate = animateProp != null ? animateProp : animateContext;
-  const clipPathId = useId();
-  const animationProgress = useSharedValue(0);
-  const targetPath = useMemo(() => d, [d]);
-  const previousPath = usePreviousValue(targetPath);
-  const fromPath = useMemo(() => {
-    if (!animate) return targetPath;
-    return previousPath != null ? previousPath : targetPath;
-  }, [animate, previousPath, targetPath]);
-  const pathInterpolator = useMemo(() => interpolate.interpolatePath(fromPath, targetPath), [fromPath, targetPath]);
-  const updatePath = useCallback(progress => {
-    var _pathRef$current;
-    if (!pathInterpolator) return;
-    const val = Number(progress.toFixed(4));
-    (_pathRef$current = pathRef.current) == null || _pathRef$current.setNativeProps({
-      d: pathInterpolator(val)
-    });
-  }, [pathInterpolator]);
-  useAnimatedReaction(() => animationProgress.value, progress => {
-    'worklet';
+      strokeWidth,
+      strokeCap,
+      strokeJoin,
+      children,
+      transitions,
+      transition
+    } = props,
+    pathProps = _objectWithoutPropertiesLoose(props, _excluded2);
+  const context = useCartesianChartContext();
+  const rect = clipRect != null ? clipRect : context.drawingArea;
+  const animate = animateProp != null ? animateProp : context.animate;
+  const isReady = !!context.getXScale();
+  const enterTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultPathEnterTransition), [animate, transitions == null ? void 0 : transitions.enter]);
+  const updateTransition = useMemo(() => getTransition((transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), [animate, transitions == null ? void 0 : transitions.update, transition]);
+
+  // The clip offset provides extra padding to prevent path from being cut off
+  // Area charts typically use offset=0 for exact clipping, while lines use offset=2 for breathing room
+  const totalOffset = clipOffset * 2; // Applied on both sides
 
-    runOnJS(updatePath)(progress);
-  }, [updatePath]);
+  // Animation progress for clip path reveal
+  const clipProgress = useSharedValue(animate ? 0 : 1);
   useEffect(() => {
-    if (!pathRef.current) return;
-    if (!animate || !pathInterpolator) {
-      pathRef.current.setNativeProps({
-        d: targetPath
-      });
-      animationProgress.value = 1;
-      return;
+    if (animate && isReady) {
+      clipProgress.value = buildTransition(1, enterTransition);
     }
-    animationProgress.value = 0;
-    animationProgress.value = withTiming(1, {
-      duration: 200
+  }, [animate, isReady, clipProgress, enterTransition]);
+
+  // Create initial and target clip paths for animation
+  const {
+    initialClipPath,
+    targetClipPath
+  } = useMemo(() => {
+    if (!rect) return {
+      initialClipPath: null,
+      targetClipPath: null
+    };
+
+    // Initial clip path (width = 0)
+    const initial = Skia.Path.Make();
+    initial.addRect({
+      x: rect.x - clipOffset,
+      y: rect.y - clipOffset,
+      width: 0,
+      height: rect.height + totalOffset
     });
-  }, [animate, animationProgress, targetPath, pathInterpolator]);
-  if (!d || !rect) return;
 
-  // The clip offset provides extra padding to prevent path from being cut off
-  // Area charts typically use offset=0 for exact clipping, while lines use offset=2 for breathing room
-  const totalOffset = (clipOffset != null ? clipOffset : 0) * 2; // Applied on both sides
+    // Target clip path (full width)
+    const target = Skia.Path.Make();
+    target.addRect({
+      x: rect.x - clipOffset,
+      y: rect.y - clipOffset,
+      width: rect.width + totalOffset,
+      height: rect.height + totalOffset
+    });
+    return {
+      initialClipPath: initial,
+      targetClipPath: target
+    };
+  }, [rect, clipOffset, totalOffset]);
+
+  // Use usePathInterpolation for animated clip path
+  const animatedClipPath = usePathInterpolation(clipProgress, [0, 1], animate && initialClipPath && targetClipPath ? [initialClipPath, targetClipPath] : targetClipPath ? [targetClipPath, targetClipPath] : [Skia.Path.Make(), Skia.Path.Make()]);
 
-  return /*#__PURE__*/_jsxs(G, {
-    children: [/*#__PURE__*/_jsx(Defs, {
-      children: animate ? /*#__PURE__*/_jsx(ClipPath, {
-        id: clipPathId,
-        children: /*#__PURE__*/_jsx(AnimatedSvgRect, {
-          rectProps: {
-            height: rect.height + totalOffset,
-            x: rect.x - (clipOffset != null ? clipOffset : 0),
-            y: rect.y - (clipOffset != null ? clipOffset : 0)
-          },
-          totalOffset: totalOffset,
-          width: rect.width
-        })
-      }) : /*#__PURE__*/_jsx(ClipPath, {
-        id: clipPathId,
-        children: /*#__PURE__*/_jsx(Rect, {
-          height: contextRect.height + totalOffset,
-          width: contextRect.width + totalOffset,
-          x: contextRect.x - (clipOffset != null ? clipOffset : 0),
-          y: contextRect.y - (clipOffset != null ? clipOffset : 0)
-        })
-      })
-    }), /*#__PURE__*/_jsx(SvgPath, _extends({
-      ref: pathRef,
-      clipPath: "url(#" + clipPathId + ")",
-      clipRule: "nonzero",
-      d: fromPath,
-      fill: fill,
-      fillOpacity: fillOpacity,
-      stroke: stroke,
-      strokeDasharray: strokeDasharray,
-      strokeOpacity: strokeOpacity,
+  // Resolve the final clip path:
+  // 1. If clipPath prop was explicitly provided, use it (even if null = no clipping)
+  // 2. If animating, use the interpolated clip path
+  // 3. Otherwise, use static target clip path
+  const resolvedClipPath = useMemo(() => {
+    // If clipPath was explicitly provided (null or string), use it directly
+    if (clipPathProp !== undefined) {
+      return clipPathProp;
+    }
+
+    // If not animating or paths are null, return target clip path
+    if (!animate || !targetClipPath) {
+      return targetClipPath;
+    }
+
+    // Return undefined here since we'll use animatedClipPath directly
+    return undefined;
+  }, [clipPathProp, animate, targetClipPath]);
+
+  // Convert SVG path string to SkPath for static rendering
+  const staticPath = useDerivedValue(() => {
+    var _Skia$Path$MakeFromSV;
+    const dValue = unwrapAnimatedValue(d);
+    if (!dValue) return Skia.Path.Make();
+    return (_Skia$Path$MakeFromSV = Skia.Path.MakeFromSVGString(dValue)) != null ? _Skia$Path$MakeFromSV : Skia.Path.Make();
+  }, [d]);
+  const isFilled = fill !== undefined && fill !== 'none';
+  const isStroked = stroke !== undefined && stroke !== 'none';
+  const content = !animate ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [isFilled && /*#__PURE__*/_jsx(SkiaPath, _extends({
+      color: fill,
+      opacity: fillOpacity,
+      path: staticPath,
+      style: "fill"
+    }, pathProps, {
+      children: children
+    })), isStroked && /*#__PURE__*/_jsx(SkiaPath, _extends({
+      color: stroke,
+      opacity: strokeOpacity,
+      path: staticPath,
+      strokeCap: strokeCap,
+      strokeJoin: strokeJoin,
       strokeWidth: strokeWidth,
-      testID: testID
-    }, pathProps))]
+      style: "stroke"
+    }, pathProps, {
+      children: children
+    }))]
+  }) : /*#__PURE__*/_jsx(AnimatedPath, {
+    d: d,
+    fill: fill,
+    fillOpacity: fillOpacity,
+    initialPath: initialPath,
+    stroke: stroke,
+    strokeCap: strokeCap,
+    strokeJoin: strokeJoin,
+    strokeOpacity: strokeOpacity,
+    strokeWidth: strokeWidth,
+    transitions: {
+      enter: enterTransition,
+      update: updateTransition
+    },
+    children: children
+  });
+
+  // Determine which clip path to use
+  const finalClipPath = animate && resolvedClipPath === undefined ? animatedClipPath : resolvedClipPath;
+
+  // If finalClipPath is null, render without clipping
+  if (finalClipPath === null) {
+    return content;
+  }
+  return /*#__PURE__*/_jsx(Group, {
+    clip: finalClipPath,
+    children: content
   });
 });

package/esm/chart/PeriodSelector.js

@@ -9,7 +9,7 @@ import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { SegmentedTabs } from '@coinbase/cds-mobile/tabs';
 import { SegmentedTab } from '@coinbase/cds-mobile/tabs/SegmentedTab';
 import { tabsSpringConfig } from '@coinbase/cds-mobile/tabs/Tabs';
-import { Text } from '@coinbase/cds-mobile/typography/Text';
+import { Text } from '@coinbase/cds-mobile/typography';
 
 // Animated active indicator to support smooth transition of background color
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -24,7 +24,8 @@ export const PeriodSelectorActiveIndicator = _ref => {
   const {
     width,
     height,
-    x
+    x,
+    y
   } = activeTabRect;
 
   // Get the target background color
@@ -38,6 +39,7 @@ export const PeriodSelectorActiveIndicator = _ref => {
   // Combined animated value for position, size, and color
   const newAnimatedValues = {
     x,
+    y,
     width,
     backgroundColor: targetColor
   };
@@ -51,11 +53,13 @@ export const PeriodSelectorActiveIndicator = _ref => {
   const animatedStyles = useAnimatedStyle(() => ({
     transform: [{
       translateX: animatedValues.value.x
+    }, {
+      translateY: animatedValues.value.y
     }],
     width: animatedValues.value.width,
     backgroundColor: animatedValues.value.backgroundColor
   }), [animatedValues]);
-  if (!width) return null;
+  if (!width) return;
   return /*#__PURE__*/_jsx(Animated.View, {
     style: [{
       position: position,