@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

package/esm/chart/ChartContextBridge.js

@@ -1,159 +0,0 @@
-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,10 +0,0 @@
-import { createContext, useContext } from 'react';
-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 https://cds.coinbase.com/components/charts/CartesianChart.');
-  }
-  return context;
-};
-export const CartesianChartProvider = CartesianChartContext.Provider;

package/esm/chart/Path.js

@@ -1,255 +0,0 @@
-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); }
-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, useRef } 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 { 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 {
-      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
-    }))]
-  });
-});
-export const Path = /*#__PURE__*/memo(props => {
-  const {
-      animate: animateProp,
-      clipRect,
-      clipPath: clipPathProp,
-      clipOffset = 0,
-      d = '',
-      initialPath,
-      fill,
-      fillOpacity,
-      stroke,
-      strokeOpacity,
-      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]);
-  const enterOpacityTransition = useMemo(() => {
-    if (!animate) return null;
-    return transitions == null ? void 0 : transitions.enterOpacity;
-  }, [animate, transitions == null ? void 0 : transitions.enterOpacity]);
-  const animateEnterOpacity = Boolean(enterOpacityTransition);
-  const enterOpacity = useSharedValue(animateEnterOpacity ? 0 : 1);
-  const hasAnimatedEnterOpacity = useRef(false);
-  useEffect(() => {
-    if (hasAnimatedEnterOpacity.current) {
-      return;
-    }
-    if (!animateEnterOpacity) {
-      hasAnimatedEnterOpacity.current = true;
-      enterOpacity.value = 1;
-      return;
-    }
-    if (!isReady) {
-      return;
-    }
-    if (enterOpacityTransition === undefined || enterOpacityTransition === null) {
-      enterOpacity.value = 1;
-      hasAnimatedEnterOpacity.current = true;
-      return;
-    }
-    hasAnimatedEnterOpacity.current = true;
-    enterOpacity.value = buildTransition(1, enterOpacityTransition);
-  }, [animateEnterOpacity, isReady, enterOpacityTransition, enterOpacity]);
-  const animateClip = animate && enterTransition !== null;
-
-  // 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
-
-  // Animation progress for clip path reveal
-  const clipProgress = useSharedValue(animateClip ? 0 : 1);
-  useEffect(() => {
-    if (animateClip && isReady) {
-      clipProgress.value = buildTransition(1, enterTransition);
-    }
-  }, [animateClip, isReady, clipProgress, enterTransition]);
-
-  // Create initial and target clip paths for animation
-  const {
-    initialClipPath,
-    targetClipPath
-  } = useMemo(() => {
-    if (!rect) return {
-      initialClipPath: null,
-      targetClipPath: null
-    };
-    const categoryAxisIsX = context.layout !== 'horizontal';
-    const fullWidth = rect.width + totalOffset;
-    const fullHeight = rect.height + totalOffset;
-
-    // Initial clip path starts collapsed on the category axis.
-    const initial = Skia.Path.Make();
-    initial.addRect({
-      x: rect.x - clipOffset,
-      y: rect.y - clipOffset,
-      width: categoryAxisIsX ? 0 : fullWidth,
-      height: categoryAxisIsX ? fullHeight : 0
-    });
-
-    // Target clip path is fully expanded.
-    const target = Skia.Path.Make();
-    target.addRect({
-      x: rect.x - clipOffset,
-      y: rect.y - clipOffset,
-      width: fullWidth,
-      height: fullHeight
-    });
-    return {
-      initialClipPath: initial,
-      targetClipPath: target
-    };
-  }, [rect, clipOffset, totalOffset, context.layout]);
-
-  // Use usePathInterpolation for animated clip path
-  const animatedClipPath = usePathInterpolation(clipProgress, [0, 1], animateClip && initialClipPath && targetClipPath ? [initialClipPath, targetClipPath] : targetClipPath ? [targetClipPath, targetClipPath] : [Skia.Path.Make(), Skia.Path.Make()]);
-
-  // 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 (!animateClip || !targetClipPath) {
-      return targetClipPath;
-    }
-
-    // Return undefined here since we'll use animatedClipPath directly
-    return undefined;
-  }, [clipPathProp, animateClip, 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,
-      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,
-      enterOpacity: enterOpacityTransition,
-      update: updateTransition
-    },
-    children: children
-  });
-
-  // Determine which clip path to use
-  const finalClipPath = animateClip && resolvedClipPath === undefined ? animatedClipPath : resolvedClipPath;
-
-  // If finalClipPath is null, render without clipping
-  if (finalClipPath === null) {
-    return /*#__PURE__*/_jsx(Group, {
-      opacity: animateEnterOpacity ? enterOpacity : undefined,
-      children: content
-    });
-  }
-  return /*#__PURE__*/_jsx(Group, {
-    clip: finalClipPath,
-    opacity: animateEnterOpacity ? enterOpacity : undefined,
-    children: content
-  });
-});

package/esm/chart/PeriodSelector.js

@@ -1,139 +0,0 @@
-const _excluded = ["color", "label", "font", "hideDot", "style"],
-  _excluded2 = ["background", "activeBackground", "activeColor", "width", "justifyContent", "TabComponent", "TabsActiveIndicatorComponent"];
-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); }
-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 React, { forwardRef, memo, useMemo } from 'react';
-import { StyleSheet, View } from 'react-native';
-import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
-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';
-
-// Animated active indicator to support smooth transition of background color
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const PeriodSelectorActiveIndicator = _ref => {
-  let {
-    activeTabRect,
-    background = 'bgPrimaryWash',
-    position = 'absolute',
-    borderRadius = 1000
-  } = _ref;
-  const theme = useTheme();
-  const {
-    width,
-    height,
-    x,
-    y
-  } = activeTabRect;
-
-  // Get the target background color
-  const backgroundColorKey = background;
-  const targetColor = theme.color[backgroundColorKey] || background;
-
-  // Track previous values for first render detection
-  const previousActiveTabRect = React.useRef(activeTabRect);
-  const previousColor = React.useRef(targetColor);
-
-  // Combined animated value for position, size, and color
-  const newAnimatedValues = {
-    x,
-    y,
-    width,
-    backgroundColor: targetColor
-  };
-  const animatedValues = useSharedValue(newAnimatedValues);
-  const isFirstRenderWithWidth = previousActiveTabRect.current.width === 0 && activeTabRect.width > 0;
-  if (previousActiveTabRect.current !== activeTabRect || previousColor.current !== targetColor) {
-    previousActiveTabRect.current = activeTabRect;
-    previousColor.current = targetColor;
-    animatedValues.value = isFirstRenderWithWidth ? newAnimatedValues : withSpring(newAnimatedValues, tabsSpringConfig);
-  }
-  const animatedStyles = useAnimatedStyle(() => ({
-    transform: [{
-      translateX: animatedValues.value.x
-    }, {
-      translateY: animatedValues.value.y
-    }],
-    width: animatedValues.value.width,
-    backgroundColor: animatedValues.value.backgroundColor
-  }), [animatedValues]);
-  if (!width) return;
-  return /*#__PURE__*/_jsx(Animated.View, {
-    style: [{
-      position: position,
-      height,
-      borderRadius
-    }, animatedStyles],
-    testID: "period-selector-active-indicator"
-  });
-};
-const styles = StyleSheet.create({
-  liveContainer: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  }
-});
-export const LiveTabLabel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
-  let {
-      color = 'fgNegative',
-      label = 'LIVE',
-      font = 'label1',
-      hideDot,
-      style
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded);
-  const theme = useTheme();
-  const colorKey = color;
-  const textColor = theme.color[colorKey] || color;
-  const dotStyle = useMemo(() => ({
-    width: theme.space[1],
-    height: theme.space[1],
-    borderRadius: 1000,
-    marginRight: theme.space[0.75],
-    backgroundColor: textColor
-  }), [theme.space, textColor]);
-  return /*#__PURE__*/_jsxs(View, {
-    ref: ref,
-    style: [styles.liveContainer, style],
-    children: [!hideDot && /*#__PURE__*/_jsx(View, {
-      style: dotStyle
-    }), /*#__PURE__*/_jsx(Text, _extends({
-      color: color,
-      font: font
-    }, props, {
-      children: label
-    }))]
-  });
-}));
-const PeriodSelectorTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(SegmentedTab, _extends({
-  ref: ref,
-  font: "label1"
-}, props))));
-/**
- * PeriodSelector is a specialized version of SegmentedTabs optimized for chart period selection.
- * It provides transparent background, primary wash active state, and full-width layout by default.
- */
-export const PeriodSelector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) => {
-  let {
-      background = 'transparent',
-      activeBackground = 'bgPrimaryWash',
-      activeColor = 'fgPrimary',
-      width = '100%',
-      justifyContent = 'space-between',
-      TabComponent = PeriodSelectorTab,
-      TabsActiveIndicatorComponent = PeriodSelectorActiveIndicator
-    } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
-  return /*#__PURE__*/_jsx(SegmentedTabs, _extends({
-    ref: ref,
-    TabComponent: TabComponent,
-    TabsActiveIndicatorComponent: TabsActiveIndicatorComponent,
-    activeBackground: activeBackground,
-    activeColor: activeColor,
-    background: background,
-    justifyContent: justifyContent,
-    width: width
-  }, props));
-}));