@coinbase/cds-web 8.66.2 → 9.0.0-rc.1

package/esm/visualizations/chart/utils/transition.js

@@ -0,0 +1,132 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useEffect, useRef } from 'react';
+import { interpolatePath } from 'd3-interpolate-path';
+import { animate, useMotionValue } from 'framer-motion';
+
+/**
+ * Default update transition used across all chart components.
+ * `{ type: 'spring', stiffness: 900, damping: 120, mass: 4 }`
+ */
+export const defaultTransition = {
+  type: 'spring',
+  stiffness: 900,
+  damping: 120,
+  mass: 4
+};
+
+/**
+ * Instant transition that completes immediately with no animation.
+ * Used when a transition is set to `null`.
+ */
+export const instantTransition = {
+  type: 'tween',
+  duration: 0
+};
+
+/**
+ * Duration in seconds for accessory elements to fade in.
+ */
+export const accessoryFadeTransitionDuration = 0.15;
+
+/**
+ * Delay in seconds before accessory elements fade in.
+ */
+export const accessoryFadeTransitionDelay = 0.35;
+
+/**
+ * Default enter transition for accessory elements (Point, Scrubber beacons).
+ * `{ type: 'tween', duration: 0.15, delay: 0.35 }`
+ */
+export const defaultAccessoryEnterTransition = {
+  type: 'tween',
+  duration: accessoryFadeTransitionDuration,
+  delay: accessoryFadeTransitionDelay
+};
+
+/**
+ * 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 !== void 0 ? value : defaultValue;
+};
+
+/**
+ * Hook for path animation state and transitions.
+ *
+ * @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 transitions - Transition configuration for enter and update animations
+ * @returns MotionValue containing the current interpolated path string
+ *
+ * @example
+ * // Simple path transition
+ * const animatedPath = usePathTransition({
+ *   currentPath: d ?? '',
+ *   transitions: {
+ *     update: { type: 'spring', stiffness: 300, damping: 20 },
+ *   },
+ * });
+ *
+ * @example
+ * // Enter animation with different initial config (like DefaultBar)
+ * const animatedPath = usePathTransition({
+ *   currentPath: targetPath,
+ *   initialPath: baselinePath,
+ *   transitions: {
+ *     enter: { type: 'tween', duration: 0.5 },
+ *     update: { type: 'spring', stiffness: 900, damping: 120, mass: 4 },
+ *   },
+ * });
+ */
+export const usePathTransition = _ref => {
+  let {
+    currentPath,
+    initialPath,
+    transitions,
+    transition = defaultTransition
+  } = _ref;
+  const transitionRef = useRef({
+    enter: transitions === null || transitions === void 0 ? void 0 : transitions.enter,
+    update: (transitions === null || transitions === void 0 ? void 0 : transitions.update) !== undefined ? transitions.update : transition
+  });
+  const isFirstAnimation = useRef(!!initialPath);
+  const animatedPath = useMotionValue(initialPath !== null && initialPath !== void 0 ? initialPath : currentPath);
+  transitionRef.current.enter = transitions === null || transitions === void 0 ? void 0 : transitions.enter;
+  transitionRef.current.update = (transitions === null || transitions === void 0 ? void 0 : transitions.update) !== undefined ? transitions.update : transition;
+  useEffect(() => {
+    const fromPath = animatedPath.get();
+    if (fromPath === currentPath) {
+      return;
+    }
+    const {
+      enter,
+      update
+    } = transitionRef.current;
+    const activeTransition = isFirstAnimation.current && enter !== undefined ? enter : update;
+    isFirstAnimation.current = false;
+    if (activeTransition === null) {
+      animatedPath.set(currentPath);
+      return;
+    }
+    const pathInterpolator = interpolatePath(fromPath, currentPath);
+    const playback = animate(0, 1, _objectSpread(_objectSpread({}, activeTransition), {}, {
+      onUpdate: latest => {
+        animatedPath.set(pathInterpolator(latest));
+      },
+      onComplete: () => {
+        animatedPath.set(currentPath);
+      }
+    }));
+    return () => {
+      playback === null || playback === void 0 || playback.stop();
+    };
+  }, [currentPath, animatedPath]);
+  return animatedPath;
+};

package/esm/visualizations/index.js

@@ -1,7 +1,9 @@
+export * from './chart';
 export * from './DefaultProgressCircleContent';
 export * from './getProgressBarLabelParts';
 export * from './ProgressBar';
 export * from './ProgressBarWithFixedLabels';
 export * from './ProgressBarWithFloatLabel';
 export * from './ProgressCircle';
-export * from './ProgressContainerWithButtons';
+export * from './ProgressContainerWithButtons';
+export * from './sparkline';

package/esm/visualizations/sparkline/Counter.css

@@ -0,0 +1,3 @@
+@layer cds{.containerCss-c19sok6c{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.hiddenCss-hhdkiv3{visibility:hidden;}
+.visibleCss-v13bx5ak{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.visibleCss-v13bx5ak > *{width:100%;height:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}}

package/esm/visualizations/sparkline/Counter.js

@@ -0,0 +1,35 @@
+import React, { useMemo } from 'react';
+import { useCounter } from '@coinbase/cds-common/visualizations/useCounter';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const containerCss = "containerCss-c19sok6c";
+const hiddenCss = "hiddenCss-hhdkiv3";
+const visibleCss = "visibleCss-v13bx5ak";
+export const Counter = _ref => {
+  let {
+    startNum,
+    endNum,
+    renderNum,
+    durationInMillis
+  } = _ref;
+  const count = useCounter({
+    startNum,
+    endNum,
+    durationInMillis
+  });
+  const renderFunction = useMemo(() => {
+    return num => {
+      return renderNum ? renderNum(num) : num;
+    };
+  }, [renderNum]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: containerCss,
+    children: [/*#__PURE__*/_jsx("span", {
+      className: hiddenCss,
+      children: renderFunction(endNum)
+    }), /*#__PURE__*/_jsx("span", {
+      className: visibleCss,
+      children: renderFunction(count)
+    })]
+  });
+};
+import "./Counter.css";

package/esm/visualizations/sparkline/Sparkline.js

@@ -0,0 +1,165 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { forwardRef, memo, useId, useMemo, useRef } from 'react';
+import { getAccessibleForegroundGradient } from '@coinbase/cds-common/color/getAccessibleForegroundGradient';
+import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
+import { getSparklineRange } from '@coinbase/cds-common/visualizations/getSparklineRange';
+import { getSparklineTransform } from '@coinbase/cds-common/visualizations/getSparklineTransform';
+import { generateRandomId } from '@coinbase/cds-utils';
+import { useTheme } from '../../hooks/useTheme';
+import { generateSparklineAreaWithId } from './generateSparklineWithId';
+import { SparklineAreaPattern } from './SparklineAreaPattern';
+import { SparklinePath } from './SparklinePath';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * @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 {
+    background,
+    color,
+    height,
+    path,
+    width,
+    yAxisScalingFactor,
+    children,
+    strokeType = 'solid',
+    fillType = 'dotted'
+  } = _ref;
+  const theme = useTheme();
+  const patternId = useRef(generateRandomId());
+  const strokeColor = color !== 'auto' ? color : getAccessibleColor({
+    background: background !== null && background !== void 0 ? background : theme.color.bg,
+    foreground: 'auto',
+    usage: 'graphic'
+  });
+  const translateProps = getSparklineTransform(width, height, yAxisScalingFactor);
+  const hasChildren = !!children;
+  const useModernFill = fillType === 'gradient' || fillType === 'gradientDotted';
+
+  // Stroke gradient (for strokeType='gradient')
+  const strokeGradient = useMemo(() => {
+    if (strokeType !== 'gradient') return null;
+    return getAccessibleForegroundGradient({
+      background: background !== null && background !== void 0 ? background : theme.color.bg,
+      color,
+      colorScheme: theme.activeColorScheme,
+      usage: 'graphic'
+    });
+  }, [strokeType, background, color, theme]);
+
+  // Calculate gradient coordinates for modern fills
+  const {
+    gradientY1,
+    gradientY2
+  } = useMemo(() => {
+    if (!useModernFill) return {
+      gradientY1: 0,
+      gradientY2: 0
+    };
+    if (!Number.isFinite(yAxisScalingFactor)) {
+      return {
+        gradientY1: 2,
+        gradientY2: height - 2
+      };
+    }
+    const {
+      yRange
+    } = getSparklineRange({
+      height,
+      width,
+      yAxisScalingFactor
+    });
+    const pathHeight = Math.abs(yRange[0] - yRange[1]);
+    const yTranslate = height / 2 - pathHeight / 2;
+    return {
+      gradientY1: yRange[1],
+      gradientY2: height - yTranslate
+    };
+  }, [useModernFill, height, width, yAxisScalingFactor]);
+  const strokeGradientId = useId();
+  const maskGradientId = "".concat(patternId.current, "-mask-gradient");
+  const maskId = "".concat(patternId.current, "-mask");
+  const defs = useMemo(() => {
+    if (!strokeGradient && !hasChildren) return null;
+    return /*#__PURE__*/_jsxs("defs", {
+      children: [strokeGradient && /*#__PURE__*/_jsx("linearGradient", {
+        id: strokeGradientId,
+        x1: "0%",
+        x2: "100%",
+        y1: "0%",
+        y2: "0%",
+        children: strokeGradient.map((item, i) => /*#__PURE__*/_jsx("stop", {
+          offset: item.offset,
+          stopColor: item.color
+        }, "".concat(i, "_").concat(item)))
+      }), hasChildren && fillType === 'dotted' && /*#__PURE__*/_jsx(SparklineAreaPattern, {
+        color: strokeColor,
+        id: patternId.current
+      }), hasChildren && fillType === 'gradient' && /*#__PURE__*/_jsxs("linearGradient", {
+        gradientUnits: "userSpaceOnUse",
+        id: patternId.current,
+        x1: "0",
+        x2: "0",
+        y1: gradientY1,
+        y2: gradientY2,
+        children: [/*#__PURE__*/_jsx("stop", {
+          offset: "0%",
+          stopColor: strokeColor,
+          stopOpacity: 0.3
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: "100%",
+          stopColor: strokeColor,
+          stopOpacity: 0
+        })]
+      }), hasChildren && fillType === 'gradientDotted' && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(SparklineAreaPattern, {
+          color: strokeColor,
+          id: patternId.current,
+          opacity: 1
+        }), /*#__PURE__*/_jsxs("linearGradient", {
+          gradientUnits: "userSpaceOnUse",
+          id: maskGradientId,
+          x1: "0",
+          x2: "0",
+          y1: gradientY1,
+          y2: gradientY2,
+          children: [/*#__PURE__*/_jsx("stop", {
+            offset: "0%",
+            stopColor: "white",
+            stopOpacity: 1
+          }), /*#__PURE__*/_jsx("stop", {
+            offset: "100%",
+            stopColor: "white",
+            stopOpacity: 0
+          })]
+        }), /*#__PURE__*/_jsx("mask", {
+          id: maskId,
+          children: /*#__PURE__*/_jsx("rect", {
+            fill: "url(#".concat(maskGradientId, ")"),
+            height: height,
+            width: width
+          })
+        })]
+      })]
+    });
+  }, [strokeGradient, strokeGradientId, hasChildren, fillType, strokeColor, gradientY1, gradientY2, height, width, maskGradientId, maskId]);
+  const stroke = strokeType === 'gradient' ? "url(#".concat(strokeGradientId, ")") : strokeColor;
+  const shouldPlaceDefsInside = useModernFill;
+  return /*#__PURE__*/_jsxs("svg", {
+    height: height,
+    width: width,
+    children: [!shouldPlaceDefsInside && defs, /*#__PURE__*/_jsxs("g", _objectSpread(_objectSpread({}, translateProps), {}, {
+      children: [shouldPlaceDefsInside && defs, /*#__PURE__*/_jsx(SparklinePath, {
+        ref: ref,
+        path: path,
+        stroke: stroke
+      }), generateSparklineAreaWithId(patternId.current, children, fillType === 'gradientDotted' ? maskId : undefined)]
+    }))]
+  });
+}));
+Sparkline.displayName = 'Sparkline';

package/esm/visualizations/sparkline/SparklineArea.js

@@ -0,0 +1,19 @@
+import React, { forwardRef, memo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @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 {
+    area,
+    patternId,
+    maskId
+  } = _ref;
+  return /*#__PURE__*/_jsx("path", {
+    ref: ref,
+    d: area,
+    fill: "url(#".concat(patternId, ")"),
+    mask: maskId ? "url(#".concat(maskId, ")") : undefined
+  });
+}));

package/esm/visualizations/sparkline/SparklineAreaPattern.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useSparklineAreaOpacity } from '@coinbase/cds-common/visualizations/useSparklineAreaOpacity';
+import { useTheme } from '../../hooks/useTheme';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SparklineAreaPattern = _ref => {
+  let {
+    color,
+    id,
+    opacity
+  } = _ref;
+  const {
+    activeColorScheme
+  } = useTheme();
+  const themeOpacity = useSparklineAreaOpacity(activeColorScheme);
+  const fillOpacity = opacity !== null && opacity !== void 0 ? opacity : themeOpacity;
+  return /*#__PURE__*/_jsx("pattern", {
+    height: "4",
+    id: id,
+    patternUnits: "userSpaceOnUse",
+    width: "4",
+    x: "0",
+    y: "0",
+    children: /*#__PURE__*/_jsxs("g", {
+      children: [/*#__PURE__*/_jsx("rect", {
+        fill: "transparent",
+        height: "4",
+        width: "4"
+      }), /*#__PURE__*/_jsx("circle", {
+        cx: "1",
+        cy: "1",
+        fill: color,
+        fillOpacity: fillOpacity,
+        r: "1"
+      })]
+    })
+  });
+};

package/esm/visualizations/sparkline/SparklineGradient.js

@@ -0,0 +1,31 @@
+import React, { forwardRef, memo } from 'react';
+import { Sparkline } from './Sparkline';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use LineChart instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v4
+ */
+export const SparklineGradient = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    background,
+    color,
+    path,
+    height,
+    width,
+    yAxisScalingFactor,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(Sparkline, {
+    ref: ref,
+    background: background,
+    color: color,
+    fillType: "dotted",
+    height: height,
+    path: path,
+    strokeType: "gradient",
+    width: width,
+    yAxisScalingFactor: yAxisScalingFactor,
+    children: children
+  });
+}));
+SparklineGradient.displayName = 'SparklineGradient';

package/esm/visualizations/sparkline/SparklinePath.js

@@ -0,0 +1,19 @@
+import React, { forwardRef, memo } from 'react';
+import { borderWidth } from '@coinbase/cds-common/tokens/sparkline';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SparklinePath = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+    path,
+    stroke
+  } = _ref;
+  return /*#__PURE__*/_jsx("path", {
+    ref: forwardedRef,
+    d: path,
+    fill: "transparent",
+    stroke: stroke,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: borderWidth
+  });
+}));
+SparklinePath.displayName = 'SparklinePath';

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

@@ -0,0 +1,24 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import React from 'react';
+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/✨-CDS-Components?node-id=320-15040&m=dev', {
+  imports: ["import { Sparkline } from '@coinbase/cds-web/visualizations/sparkline'", "import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath'"],
+  example: () => {
+    const data = [20, 30, 5, 45, 0];
+    // @ts-expect-error: useSparklinePath is not typed correctly
+    const path = useSparklinePath({
+      height: 200,
+      width: 200,
+      data
+    });
+    return /*#__PURE__*/_jsx(Sparkline, {
+      color: "auto",
+      height: 200,
+      path: path,
+      width: 400
+    });
+  }
+});

package/esm/visualizations/sparkline/generateSparklineWithId.js

@@ -0,0 +1,7 @@
+import { cloneElement } from 'react';
+export function generateSparklineAreaWithId(id, children, maskId) {
+  return children ? /*#__PURE__*/cloneElement(children, {
+    patternId: id,
+    maskId
+  }) : undefined;
+}

package/esm/visualizations/sparkline/index.js

@@ -0,0 +1,5 @@
+export * from './Sparkline';
+export * from './sparkline-interactive/SparklineInteractive';
+export * from './sparkline-interactive-header/SparklineInteractiveHeader';
+export * from './SparklineArea';
+export * from './SparklineGradient';

package/esm/visualizations/sparkline/sparkline-interactive/InnerSparklineInteractiveProvider.js

@@ -0,0 +1,21 @@
+import React, { useEffect } from 'react';
+import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const InnerSparklineInteractiveProvider = _ref => {
+  let {
+    width,
+    height,
+    children
+  } = _ref;
+  const {
+    setWidth,
+    setHeight
+  } = useSparklineInteractiveContext();
+  useEffect(() => {
+    setWidth(width);
+    setHeight(height);
+  }, [width, height, setWidth, setHeight]);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  });
+};