@coinbase/cds-mobile-visualization 3.4.0-beta.9 → 3.4.0

package/esm/chart/utils/transition.js

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef } from 'react';
-import { useAnimatedReaction, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { useAnimatedReaction, useSharedValue, withDelay, withSpring, withTiming } from 'react-native-reanimated';
 import { notifyChange, Skia } from '@shopify/react-native-skia';
 import { interpolatePath } from 'd3-interpolate-path';
 
@@ -18,7 +18,8 @@ import { interpolatePath } from 'd3-interpolate-path';
  */
 
 /**
- * Default transition configuration used across all chart components.
+ * Default update transition used across all chart components.
+ * `{ type: 'spring', stiffness: 900, damping: 120 }`
  */
 export const defaultTransition = {
   type: 'spring',
@@ -26,6 +27,15 @@ export const defaultTransition = {
   damping: 120
 };
 
+/**
+ * Instant transition that completes immediately with no animation.
+ * Used when a transition is set to `null`.
+ */
+export const instantTransition = {
+  type: 'timing',
+  duration: 0
+};
+
 /**
  * Duration in milliseconds for accessory elements to fade in.
  */
@@ -37,41 +47,28 @@ export const accessoryFadeTransitionDuration = 150;
 export const accessoryFadeTransitionDelay = 350;
 
 /**
- * Custom hook that uses d3-interpolate-path for more robust path interpolation.
- * then use Skia's native interpolation in the worklet.
- *
- * @param progress - Shared value between 0 and 1
- * @param fromPath - Starting path as SVG string
- * @param toPath - Ending path as SVG string
- * @returns Interpolated SkPath as a shared value
+ * Default enter transition for accessory elements (Point, Scrubber beacons).
+ * `{ type: 'timing', duration: 150, delay: 350 }`
  */
-export const useD3PathInterpolation = (progress, fromPath, toPath) => {
-  // Pre-compute intermediate paths on JS thread using d3-interpolate-path
-  const {
-    fromSkiaPath,
-    i0,
-    i1,
-    toSkiaPath
-  } = useMemo(() => {
-    var _Skia$Path$MakeFromSV, _Skia$Path$MakeFromSV2, _Skia$Path$MakeFromSV3, _Skia$Path$MakeFromSV4;
-    const pathInterpolator = interpolatePath(fromPath, toPath);
-    const d = 1e-3;
-    return {
-      fromSkiaPath: (_Skia$Path$MakeFromSV = Skia.Path.MakeFromSVGString(fromPath)) != null ? _Skia$Path$MakeFromSV : Skia.Path.Make(),
-      i0: (_Skia$Path$MakeFromSV2 = Skia.Path.MakeFromSVGString(pathInterpolator(d))) != null ? _Skia$Path$MakeFromSV2 : Skia.Path.Make(),
-      i1: (_Skia$Path$MakeFromSV3 = Skia.Path.MakeFromSVGString(pathInterpolator(1 - d))) != null ? _Skia$Path$MakeFromSV3 : Skia.Path.Make(),
-      toSkiaPath: (_Skia$Path$MakeFromSV4 = Skia.Path.MakeFromSVGString(toPath)) != null ? _Skia$Path$MakeFromSV4 : Skia.Path.Make()
-    };
-  }, [fromPath, toPath]);
-  const result = useSharedValue(fromSkiaPath);
-  useAnimatedReaction(() => progress.value, t => {
-    'worklet';
+export const defaultAccessoryEnterTransition = {
+  type: 'timing',
+  duration: accessoryFadeTransitionDuration,
+  delay: accessoryFadeTransitionDelay
+};
 
-    var _i1$interpolate;
-    result.value = (_i1$interpolate = i1.interpolate(i0, t)) != null ? _i1$interpolate : toSkiaPath;
-    notifyChange(result);
-  }, [fromSkiaPath, i0, i1, toSkiaPath]);
-  return result;
+// Avoid exact endpoint samples, which can intermittently produce non-interpolatable
+// path pairs for SkPath.interpolate on complex morphs.
+// See https://github.com/wcandillon/can-it-be-done-in-react-native/blob/db8d6ee7024e37e8f8d2cb237c0b953b5fc766fe/season5/src/Headspace/Play.tsx
+const pathInterpolationEpsilon = 1e-3;
+
+/**
+ * Resolves a transition value based on the animation state and a default.
+ * @note Passing in null will disable an animation.
+ * @note Passing in undefined will use the provided default.
+ */
+export const getTransition = (value, animate, defaultValue) => {
+  if (!animate || value === null) return null;
+  return value != null ? value : defaultValue;
 };
 
 // Interpolator and useInterpolator are brought over from non exported code in @shopify/react-native-skia
@@ -114,21 +111,30 @@ export const useInterpolator = (factory, value, interpolator, input, output, opt
 export const buildTransition = (targetValue, transition) => {
   'worklet';
 
+  if (transition === null) return targetValue;
+  const delayMs = transition.delay;
+  let animation;
   switch (transition.type) {
     case 'timing':
       {
-        return withTiming(targetValue, transition);
+        animation = withTiming(targetValue, transition);
+        break;
       }
     case 'spring':
       {
-        return withSpring(targetValue, transition);
+        animation = withSpring(targetValue, transition);
+        break;
       }
     default:
       {
-        // Fallback to default transition config
-        return withSpring(targetValue, defaultTransition);
+        animation = withSpring(targetValue, defaultTransition);
+        break;
       }
   }
+  if (delayMs && delayMs > 0) {
+    return withDelay(delayMs, animation);
+  }
+  return animation;
 };
 
 /**
@@ -136,15 +142,16 @@ export const buildTransition = (targetValue, transition) => {
  *
  * @param currentPath - Current target path to animate to
  * @param initialPath - Initial path for enter animation. When provided, the first animation will go from initialPath to currentPath.
- * @param transition - Transition configuration
+ * @param transitions - Transition configuration for enter and update animations
  * @returns Animated SkPath as a shared value
  *
  * @example
  * // Simple path transition
  * const path = usePathTransition({
  *   currentPath: d ?? '',
- *   animate: shouldAnimate,
- *   transition: { type: 'timing', duration: 3000 }
+ *   transitions: {
+ *     update: { type: 'timing', duration: 3000 },
+ *   },
  * });
  *
  * @example
@@ -152,34 +159,75 @@ export const buildTransition = (targetValue, transition) => {
  * const path = usePathTransition({
  *   currentPath: targetPath,
  *   initialPath: baselinePath,
- *   animate: true,
- *   transition: { type: 'timing', duration: 300 }
+ *   transitions: {
+ *     enter: { type: 'tween', duration: 500 },
+ *     update: { type: 'spring', stiffness: 900, damping: 120 },
+ *   },
  * });
  */
 export const usePathTransition = _ref => {
+  var _Skia$Path$MakeFromSV;
   let {
     currentPath,
     initialPath,
+    transitions,
     transition = defaultTransition
   } = _ref;
-  // Track the previous path - updated in useEffect AFTER render,
-  // so during render it naturally holds the "from" path value
-  const previousPathRef = useRef(initialPath != null ? initialPath : currentPath);
+  const updateTransition = (transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition;
+  const enterTransition = transitions == null ? void 0 : transitions.enter;
+  const targetPathRef = useRef(initialPath != null ? initialPath : currentPath);
+  const isFirstAnimation = useRef(!!initialPath);
+  const interpolatorRef = useRef(null);
   const progress = useSharedValue(0);
-
-  // During render: previousPathRef still has old value, currentPath is new
-  const fromPath = previousPathRef.current;
-  const toPath = currentPath;
+  const initialSkiaPath = (_Skia$Path$MakeFromSV = Skia.Path.MakeFromSVGString(initialPath != null ? initialPath : currentPath)) != null ? _Skia$Path$MakeFromSV : Skia.Path.Make();
+  const normalizedStartShared = useSharedValue(initialSkiaPath);
+  const normalizedEndShared = useSharedValue(initialSkiaPath);
+  const fallbackPathShared = useSharedValue(initialSkiaPath);
+  const result = useSharedValue(initialSkiaPath);
   useEffect(() => {
-    const shouldAnimate = previousPathRef.current !== currentPath;
-    if (shouldAnimate) {
-      // Update ref for next path change (happens after this render)
-      previousPathRef.current = currentPath;
-
-      // Animate from old path to new path
+    if (targetPathRef.current !== currentPath) {
+      var _Skia$Path$MakeFromSV3, _Skia$Path$MakeFromSV4, _Skia$Path$MakeFromSV5;
+      let fromPath = targetPathRef.current;
+      if (interpolatorRef.current) {
+        const p = Math.min(Math.max(progress.value, 0), 1);
+        fromPath = interpolatorRef.current(p);
+      }
+      targetPathRef.current = currentPath;
+      const activeTransition = isFirstAnimation.current && enterTransition !== undefined ? enterTransition : updateTransition;
+      isFirstAnimation.current = false;
+      if (activeTransition === null) {
+        var _Skia$Path$MakeFromSV2;
+        const targetPath = (_Skia$Path$MakeFromSV2 = Skia.Path.MakeFromSVGString(currentPath)) != null ? _Skia$Path$MakeFromSV2 : Skia.Path.Make();
+        interpolatorRef.current = null;
+        normalizedStartShared.value = targetPath;
+        normalizedEndShared.value = targetPath;
+        fallbackPathShared.value = targetPath;
+        progress.value = 1;
+        result.value = targetPath;
+        notifyChange(result);
+        return;
+      }
+      const pathInterpolator = interpolatePath(fromPath, currentPath);
+      interpolatorRef.current = pathInterpolator;
+      normalizedStartShared.value = (_Skia$Path$MakeFromSV3 = Skia.Path.MakeFromSVGString(pathInterpolator(pathInterpolationEpsilon))) != null ? _Skia$Path$MakeFromSV3 : Skia.Path.Make();
+      normalizedEndShared.value = (_Skia$Path$MakeFromSV4 = Skia.Path.MakeFromSVGString(pathInterpolator(1 - pathInterpolationEpsilon))) != null ? _Skia$Path$MakeFromSV4 : Skia.Path.Make();
+      fallbackPathShared.value = (_Skia$Path$MakeFromSV5 = Skia.Path.MakeFromSVGString(currentPath)) != null ? _Skia$Path$MakeFromSV5 : Skia.Path.Make();
       progress.value = 0;
-      progress.value = buildTransition(1, transition);
+      progress.value = buildTransition(1, activeTransition);
     }
-  }, [currentPath, transition, progress]);
-  return useD3PathInterpolation(progress, fromPath, toPath);
+  }, [currentPath, updateTransition, enterTransition, progress, normalizedStartShared, normalizedEndShared, fallbackPathShared, result]);
+  useAnimatedReaction(() => ({
+    p: progress.value,
+    to: fallbackPathShared.value
+  }), _ref2 => {
+    'worklet';
+
+    var _normalizedEndShared$;
+    let {
+      p
+    } = _ref2;
+    result.value = (_normalizedEndShared$ = normalizedEndShared.value.interpolate(normalizedStartShared.value, p)) != null ? _normalizedEndShared$ : fallbackPathShared.value;
+    notifyChange(result);
+  }, []);
+  return result;
 };

package/esm/sparkline/Sparkline.js

@@ -12,7 +12,8 @@ import { generateSparklineAreaWithId } from './generateSparklineWithId';
 import { SparklineAreaPattern } from './SparklineAreaPattern';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
- * @deprecated Use LineChart instead.
+ * @deprecated Use LineChart instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v4
  */
 export const Sparkline = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {

package/esm/sparkline/SparklineArea.js

@@ -2,7 +2,8 @@ import React, { forwardRef, memo } from 'react';
 import { Path } from 'react-native-svg';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * @deprecated Use AreaChart instead.
+ * @deprecated Use AreaChart instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v4
  */
 export const SparklineArea = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {

package/esm/sparkline/SparklineGradient.js

@@ -11,7 +11,8 @@ import { generateSparklineAreaWithId } from './generateSparklineWithId';
 import { SparklineAreaPattern } from './SparklineAreaPattern';
 
 /**
- * @deprecated Use LineChart instead.
+ * @deprecated Use LineChart instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v4
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const SparklineGradient = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {

package/esm/sparkline/__figma__/Sparkline.figma.js

@@ -4,7 +4,7 @@ import { figma } from '@figma/code-connect';
 import { Sparkline } from '../Sparkline';
 import { jsx as _jsx } from "react/jsx-runtime";
 figma.connect(Sparkline, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=320%3A15040', {
-  imports: ["import { Sparkline } from '@coinbase/cds-mobile-visualization';", "import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';"],
+  imports: ["import { Sparkline } from '@coinbase/cds-mobile-visualization'", "import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath'"],
   example: function Example() {
     const data = [20, 30, 5, 45, 0];
     const path = useSparklinePath({

package/esm/sparkline/sparkline-interactive/SparklineInteractive.js

@@ -302,6 +302,7 @@ function SparklineInteractiveWithGeneric(_ref4) {
 }
 
 /**
- * @deprecated Use LineChart instead.
+ * @deprecated Use LineChart instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v4
  */
 export const SparklineInteractive = /*#__PURE__*/memo(SparklineInteractiveWithGeneric);

package/esm/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.js

@@ -4,7 +4,7 @@ import { figma } from '@figma/code-connect';
 import { SparklineInteractive } from '../SparklineInteractive';
 import { jsx as _jsx } from "react/jsx-runtime";
 figma.connect(SparklineInteractive, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=320-14858&m=dev', {
-  imports: ["import { SparklineInteractive } from '@coinbase/cds-web-visualization';"],
+  imports: ["import { SparklineInteractive } from '@coinbase/cds-mobile-visualization'"],
   props: {
     compact: figma.boolean('compact'),
     disableScrubbing: figma.boolean('scrubbing', {

package/esm/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.js

@@ -5,7 +5,7 @@ import { SparklineInteractive } from '../../sparkline-interactive/SparklineInter
 import { SparklineInteractiveHeader } from '../SparklineInteractiveHeader';
 import { jsx as _jsx } from "react/jsx-runtime";
 figma.connect(SparklineInteractiveHeader, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=320-14931&m=dev', {
-  imports: ["import { SparklineInteractiveHeader } from '@coinbase/cds-web-visualization';", "import { SparklineInteractive } from '@coinbase/cds-web-visualization';"],
+  imports: ["import { SparklineInteractiveHeader } from '@coinbase/cds-mobile-visualization'", "import { SparklineInteractive } from '@coinbase/cds-mobile-visualization'"],
   props: {
     compact: figma.boolean('compact'),
     disableScrubbing: figma.boolean('scrubbing', {

package/esm/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.js

@@ -453,11 +453,13 @@ const SparklineInteractiveHeaderScreen = () => {
       gap: 1,
       children: [/*#__PURE__*/_jsx(IconButton, {
         active: true,
+        accessibilityLabel: "Star",
         feedback: "heavy",
         name: "star",
         onPress: handlePress,
         variant: "secondary"
       }), /*#__PURE__*/_jsx(IconButton, {
+        accessibilityLabel: "Share",
         feedback: "heavy",
         name: "share",
         onPress: handlePress,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.4.0-beta.9",
+  "version": "3.4.0",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",
@@ -36,9 +36,9 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.32.3",
+    "@coinbase/cds-common": "^8.62.1",
     "@coinbase/cds-lottie-files": "^3.3.4",
-    "@coinbase/cds-mobile": "^8.32.3",
+    "@coinbase/cds-mobile": "^8.62.1",
     "@coinbase/cds-utils": "^2.3.5",
     "@shopify/react-native-skia": "^1.12.4 || ^2.0.0",
     "react": "^18.3.1",
@@ -57,11 +57,10 @@
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@coinbase/cds-common": "^8.32.3",
+    "@coinbase/cds-common": "^8.62.1",
     "@coinbase/cds-lottie-files": "^3.3.4",
-    "@coinbase/cds-mobile": "^8.32.3",
+    "@coinbase/cds-mobile": "^8.62.1",
     "@coinbase/cds-utils": "^2.3.5",
-    "@figma/code-connect": "^1.3.4",
     "@shopify/react-native-skia": "1.12.4",
     "@types/react": "^18.3.12",
     "react-native-gesture-handler": "2.16.2",

package/esm/chart/__stories__/Chart.stories.js

@@ -1,77 +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); }
-import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { CartesianChart, DottedArea, Line, LineChart, SolidLine } from '../';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const defaultChartHeight = 250;
-const BasicLineChart = () => {
-  const chartData = [65, 78, 45, 88, 92, 73, 69];
-  return /*#__PURE__*/_jsx(LineChart, {
-    showYAxis: true,
-    height: defaultChartHeight,
-    series: [{
-      id: 'monthly-growth',
-      data: chartData,
-      label: 'Monthly Growth',
-      color: '#2ca02c'
-    }],
-    yAxis: {
-      requestedTickCount: 2,
-      tickLabelFormatter: value => "$" + value,
-      showGrid: true
-    }
-  });
-};
-const LineStyles = () => {
-  const topChartData = [15, 28, 32, 44, 46, 36, 40, 45, 48, 38];
-  const upperMiddleChartData = [12, 23, 21, 29, 34, 28, 31, 38, 42, 35];
-  const lowerMiddleChartData = [8, 15, 14, 25, 20, 18, 22, 28, 24, 30];
-  const bottomChartData = [4, 8, 11, 15, 16, 14, 16, 10, 12, 14];
-  return /*#__PURE__*/_jsxs(CartesianChart, {
-    height: defaultChartHeight,
-    series: [{
-      id: 'top',
-      data: topChartData
-    }, {
-      id: 'upperMiddle',
-      data: upperMiddleChartData,
-      color: '#ef4444'
-    }, {
-      id: 'lowerMiddle',
-      data: lowerMiddleChartData,
-      color: '#f59e0b'
-    }, {
-      id: 'bottom',
-      data: bottomChartData,
-      color: '#800080'
-    }],
-    children: [/*#__PURE__*/_jsx(Line, {
-      seriesId: "top"
-    }), /*#__PURE__*/_jsx(Line, {
-      seriesId: "upperMiddle",
-      type: "dotted"
-    }), /*#__PURE__*/_jsx(Line, {
-      LineComponent: props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
-        strokeWidth: 4
-      })),
-      curve: "natural",
-      seriesId: "lowerMiddle"
-    }), /*#__PURE__*/_jsx(Line, {
-      showArea: true,
-      AreaComponent: DottedArea,
-      curve: "step",
-      seriesId: "bottom"
-    })]
-  });
-};
-const ChartStories = () => {
-  return /*#__PURE__*/_jsxs(ExampleScreen, {
-    children: [/*#__PURE__*/_jsx(Example, {
-      title: "Basic Line Chart",
-      children: /*#__PURE__*/_jsx(BasicLineChart, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Line Styles",
-      children: /*#__PURE__*/_jsx(LineStyles, {})
-    })]
-  });
-};
-export default ChartStories;