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

package/esm/visualizations/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.js

@@ -0,0 +1,226 @@
+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, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
+import { subheadIconSignMap } from '@coinbase/cds-common/tokens/sparkline';
+import { debounce } from '@coinbase/cds-common/utils/debounce';
+import { AccessibilityAnnouncer } from '../../../AccessibilityAnnouncer/AccessibilityAnnouncer';
+import { VStack } from '../../../layout';
+import { Text } from '../../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export * from '@coinbase/cds-common/types/SparklineInteractiveHeaderBaseProps';
+const variantColorMap = {
+  positive: 'bgPositive',
+  negative: 'bgNegative',
+  foregroundMuted: 'fgMuted'
+};
+export const interpolateSubHeadText = subHead => {
+  if (subHead.priceChange && subHead.percent) {
+    return "".concat(subHead.priceChange, " (").concat(subHead.percent, ")");
+  }
+  if (subHead.priceChange) {
+    return subHead.priceChange;
+  }
+  return '';
+};
+const SparklineInteractiveHeaderStable = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+    defaultLabel,
+    defaultTitle,
+    defaultSubHead,
+    testID,
+    labelNode,
+    compact
+  } = _ref;
+  const labelRef = useRef(null);
+  const titleRef = useRef(null);
+  const subHeadIconRef = useRef(null);
+  const subHeadA11yRef = useRef(null);
+  const subHeadRef = useRef(null);
+  const subHeadAccessoryRef = useRef(null);
+  const valuesRef = useRef({
+    title: defaultTitle,
+    label: defaultLabel,
+    subHead: defaultSubHead
+  });
+  const updateLabel = useCallback(label => {
+    var _valuesRef$current;
+    const prevLabel = (_valuesRef$current = valuesRef.current) === null || _valuesRef$current === void 0 ? void 0 : _valuesRef$current.label;
+    if (prevLabel !== label) {
+      if (labelRef.current) {
+        labelRef.current.innerText = label;
+      }
+      valuesRef.current = _objectSpread(_objectSpread({}, valuesRef.current), {}, {
+        label
+      });
+    }
+  }, []);
+  const updateTitle = useCallback(title => {
+    var _valuesRef$current2;
+    const prevTitle = (_valuesRef$current2 = valuesRef.current) === null || _valuesRef$current2 === void 0 ? void 0 : _valuesRef$current2.title;
+    if (prevTitle !== title && typeof title === 'string') {
+      if (titleRef.current) {
+        titleRef.current.innerText = title;
+      }
+      valuesRef.current = _objectSpread(_objectSpread({}, valuesRef.current), {}, {
+        title
+      });
+    }
+  }, []);
+
+  // To make sure we don't spam the screen reader, we debounce this update
+  const debouncedUpdateMessage = useMemo(() => debounce(subHead => {
+    if (subHeadA11yRef.current) {
+      const message = "".concat(valuesRef.current.label, " was ").concat(valuesRef.current.title, " ").concat(subHead.accessibilityLabel, " ").concat(interpolateSubHeadText(subHead));
+      subHeadA11yRef.current.innerText = message;
+    }
+  }, 500), []);
+  // eslint-disable-next-line react-hooks/use-memo
+  const safelyUpdateSubHeadA11yRef = useCallback(debouncedUpdateMessage, [debouncedUpdateMessage]);
+  const updateSubHead = useCallback(subHead => {
+    var _valuesRef$current3;
+    const prevSubHead = (_valuesRef$current3 = valuesRef.current) === null || _valuesRef$current3 === void 0 ? void 0 : _valuesRef$current3.subHead;
+    if (prevSubHead !== subHead) {
+      if (subHeadIconRef.current) {
+        subHeadIconRef.current.innerText = subheadIconSignMap[subHead.sign];
+        subHeadIconRef.current.style.color = "var(--color-".concat(variantColorMap[subHead.variant], ")");
+      }
+      if (subHeadRef.current) {
+        subHeadRef.current.innerText = interpolateSubHeadText(subHead);
+        subHeadRef.current.style.color = "var(--color-".concat(variantColorMap[subHead.variant], ")");
+      }
+      if (subHeadAccessoryRef.current) {
+        var _subHead$accessoryTex;
+        subHeadAccessoryRef.current.innerText = (_subHead$accessoryTex = subHead.accessoryText) !== null && _subHead$accessoryTex !== void 0 ? _subHead$accessoryTex : '';
+      }
+
+      // Update a11y message
+      if (subHeadA11yRef.current) {
+        safelyUpdateSubHeadA11yRef(subHead);
+      }
+      valuesRef.current = _objectSpread(_objectSpread({}, valuesRef.current), {}, {
+        subHead
+      });
+    }
+  }, [safelyUpdateSubHeadA11yRef]);
+
+  // update is triggered from a parent component.
+  // We track the values of each input in a valuesRef object
+  // so that we can avoid updating unnecessarily if previous
+  // value is the same as the new value
+  const update = useCallback(_ref2 => {
+    let {
+      label,
+      title,
+      subHead
+    } = _ref2;
+    if (label) {
+      updateLabel(label);
+    }
+    if (title) {
+      updateTitle(title);
+    }
+    if (subHead) {
+      updateSubHead(subHead);
+    }
+  }, [updateLabel, updateSubHead, updateTitle]);
+  useImperativeHandle(forwardedRef, () => {
+    return {
+      update
+    };
+  }, [update]);
+  const label = !!defaultLabel && /*#__PURE__*/_jsx(Text, {
+    as: "div",
+    color: "fgMuted",
+    font: "headline",
+    children: /*#__PURE__*/_jsx("span", {
+      ref: labelRef,
+      children: defaultLabel
+    })
+  });
+  const subHeadColorStyles = defaultSubHead ? {
+    color: "var(--color-".concat(variantColorMap[defaultSubHead.variant], ")"),
+    marginRight: 'var(--space-0_5)'
+  } : {
+    marginRight: 'var(--space-0_5)'
+  };
+  const subHead = !!defaultSubHead && /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Text, {
+      tabularNumbers: true,
+      as: "span",
+      font: compact ? 'label1' : 'title4',
+      children: [/*#__PURE__*/_jsx("span", {
+        ref: subHeadIconRef,
+        style: subHeadColorStyles,
+        children: subheadIconSignMap[defaultSubHead.sign]
+      }), /*#__PURE__*/_jsx("span", {
+        ref: subHeadRef,
+        style: subHeadColorStyles,
+        children: interpolateSubHeadText(defaultSubHead)
+      })]
+    }), !!defaultSubHead.accessoryText && /*#__PURE__*/_jsx(Text, {
+      "aria-hidden": true,
+      tabularNumbers: true,
+      as: "span",
+      color: "fgMuted",
+      paddingStart: 1,
+      children: /*#__PURE__*/_jsx("span", {
+        ref: subHeadAccessoryRef,
+        children: defaultSubHead.accessoryText
+      })
+    })]
+  });
+  const title = /*#__PURE__*/_jsxs(VStack, {
+    alignItems: "baseline",
+    padding: 0,
+    children: [typeof defaultTitle === 'string' ? /*#__PURE__*/_jsx(Text, {
+      tabularNumbers: true,
+      as: "div",
+      color: "fg",
+      font: compact ? 'title1' : 'display3',
+      paddingEnd: 1,
+      children: /*#__PURE__*/_jsx("span", {
+        ref: titleRef,
+        children: defaultTitle
+      })
+    }) : defaultTitle, subHead]
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      "aria-hidden": true,
+      "data-testid": testID,
+      style: {
+        width: '100%'
+      },
+      children: [labelNode !== null && labelNode !== void 0 ? labelNode : label, title]
+    }), /*#__PURE__*/_jsx(AccessibilityAnnouncer, {
+      ref: subHeadA11yRef
+    })]
+  });
+}));
+export const SparklineInteractiveHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    defaultLabel,
+    defaultTitle,
+    defaultSubHead,
+    testID,
+    labelNode,
+    compact
+  } = _ref3;
+  return /*#__PURE__*/_jsx(SparklineInteractiveHeaderStable
+  // All updates after initial load should be handled imperatively
+  // via update function in forwarded ref to prevent overriding
+  // values unexpectedly. This is why we use ref here so that the
+  // default value is stable and never updates on re-renders
+  , {
+    ref: ref,
+    compact: compact,
+    defaultLabel: useRef(defaultLabel).current,
+    defaultSubHead: useRef(defaultSubHead).current,
+    defaultTitle: useRef(defaultTitle).current,
+    labelNode: labelNode,
+    testID: testID
+  });
+}));

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

@@ -0,0 +1,108 @@
+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 from 'react';
+import { figma } from '@figma/code-connect';
+import { SparklineInteractive } from '../../sparkline-interactive/SparklineInteractive';
+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/visualizations/sparkline'", "import { SparklineInteractive } from '@coinbase/cds-web/visualizations/sparkline'"],
+  props: {
+    compact: figma.boolean('compact'),
+    disableScrubbing: figma.boolean('scrubbing', {
+      false: true,
+      true: false
+    })
+  },
+  example: props => {
+    const periods = [{
+      label: '1H',
+      value: 'hour'
+    }, {
+      label: '1D',
+      value: 'day'
+    }, {
+      label: '1W',
+      value: 'week'
+    }, {
+      label: '1M',
+      value: 'month'
+    }, {
+      label: '1Y',
+      value: 'year'
+    }, {
+      label: 'All',
+      value: 'all'
+    }];
+    const data = {
+      hour: [],
+      day: [{
+        value: 49259.38,
+        date: new Date('2021-12-05T04:00:00.000Z')
+      }, {
+        value: 49163.79,
+        date: new Date('2021-12-05T04:05:00.000Z')
+      }, {
+        value: 49146.66,
+        date: new Date('2021-12-05T04:10:00.000Z')
+      }, {
+        value: 49083.92,
+        date: new Date('2021-12-05T04:15:00.000Z')
+      }, {
+        value: 49115.3,
+        date: new Date('2021-12-05T04:20:00.000Z')
+      }, {
+        value: 48992.14,
+        date: new Date('2021-12-05T04:25:00.000Z')
+      }, {
+        value: 49075.75,
+        date: new Date('2021-12-05T04:30:00.000Z')
+      }, {
+        value: 49025.78,
+        date: new Date('2021-12-05T04:35:00.000Z')
+      }, {
+        value: 49066.23,
+        date: new Date('2021-12-05T04:40:00.000Z')
+      }, {
+        value: 49247.82,
+        date: new Date('2021-12-05T04:45:00.000Z')
+      }],
+      week: [],
+      month: [],
+      year: [],
+      all: []
+    };
+    const defaultSubHead = {
+      percent: '1.35%',
+      sign: 'upwardTrend',
+      variant: 'positive',
+      accessibilityLabel: 'on Sunday, December 5, 2021 at 10:55 PM, up',
+      priceChange: '$21.36'
+    };
+    const header = /*#__PURE__*/_jsx(SparklineInteractiveHeader, {
+      defaultLabel: "Portfolio balance"
+      // @ts-expect-error: defaultSubHead is not part of the type definition
+      ,
+      defaultSubHead: defaultSubHead,
+      defaultTitle: "$10,023.82"
+    });
+    return /*#__PURE__*/_jsx(SparklineInteractive, _objectSpread({
+      data: data,
+      defaultPeriod: "day",
+      formatDate: date => date.toLocaleString('en-US', {
+        timeZone: 'America/New_York',
+        hour: 'numeric',
+        minute: 'numeric'
+      }),
+      headerNode: header,
+      onPeriodChanged: () => {},
+      onScrub: () => {},
+      onScrubEnd: () => {},
+      periods: periods,
+      strokeColor: "#cb51bb"
+    }, props));
+  }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.66.2",
+  "version": "9.0.0-rc.1",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -180,6 +180,14 @@
       "types": "./dts/typography/index.d.ts",
       "default": "./esm/typography/index.js"
     },
+    "./visualizations/chart": {
+      "types": "./dts/visualizations/chart/index.d.ts",
+      "default": "./esm/visualizations/chart/index.js"
+    },
+    "./visualizations/sparkline": {
+      "types": "./dts/visualizations/sparkline/index.d.ts",
+      "default": "./esm/visualizations/sparkline/index.js"
+    },
     "./visualizations": {
       "types": "./dts/visualizations/index.d.ts",
       "default": "./esm/visualizations/index.js"
@@ -203,11 +211,11 @@
   ],
   "peerDependencies": {
     "framer-motion": "^10.18.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^18.0.0 || ~19.1.2",
+    "react-dom": "^18.0.0 || ~19.1.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.66.2",
+    "@coinbase/cds-common": "^9.0.0-rc.1",
     "@coinbase/cds-icons": "^5.16.0",
     "@coinbase/cds-illustrations": "^4.38.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
@@ -215,35 +223,40 @@
     "@floating-ui/react-dom": "^2.1.1",
     "@popperjs/core": "^2.9.0",
     "@react-spring/web": "^9.7.4",
+    "d3-color": "^3.1.0",
     "d3-interpolate": "^3.0.1",
     "d3-interpolate-path": "^2.3.0",
     "d3-selection": "^3.0.0",
+    "d3-transition": "^3.0.1",
     "fuse.js": "^7.1.0",
     "lodash": "^4.17.21",
     "lottie-web": "^5.13.0",
     "react-popper": "^2.2.4",
-    "react-use-measure": "^2",
+    "react-use-measure": "^2.1.7",
     "zustand": "^5.0.12"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.27.1",
     "@coinbase/cds-web-utils": "^0.0.0",
     "@linaria/core": "^3.0.0-beta.22",
     "@linaria/shaker": "^3.0.0-beta.22",
     "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^6.5.17-alpha.0",
+    "@storybook/react": "^9.1.2",
     "@storybook/testing-library": "^0.2.2",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.0.4",
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2",
     "csstype": "^3.1.3",
     "framer-motion": "^10.18.0",
     "glob": "^10.3.10",
+    "react": "19.1.2",
+    "react-dom": "19.1.2",
     "storybook-addon-performance": "^0.16.1",
     "typescript": "~5.9.2",
-    "vite": "^7.1.2",
     "zx": "^8.1.9"
   }
 }