@coinbase/cds-mobile-visualization 0.0.0 → 3.4.0-beta.1

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

@@ -0,0 +1,56 @@
+import { useEffect } from 'react';
+import { Animated } from 'react-native';
+import { durations } from '@coinbase/cds-common/motion/tokens';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
+import { useSparklineInteractiveConstants } from './useSparklineInteractiveConstants';
+export function useMinMaxTransform(_ref) {
+  let {
+    minMaxLayout,
+    x,
+    transform,
+    opacity
+  } = _ref;
+  const theme = useTheme();
+  const {
+    height,
+    width
+  } = minMaxLayout;
+  const {
+    SparklineInteractiveMinMaxLabelHeight,
+    chartWidth
+  } = useSparklineInteractiveConstants({});
+  const {
+    gutter
+  } = useSparklineInteractiveContext();
+  useEffect(() => {
+    // If onLayout has not finished we don't want to show min/max
+    // or else it will abruptly change positions
+    if (height === 0 && width === 0) {
+      opacity.setValue(0);
+      return;
+    }
+
+    // if we have no gutter the min/max label needs some space so it's not right up against the edge of the screen
+    const minGutter = gutter === 0 ? theme.space['1'] : 0;
+
+    // Position min or max at center of the desired x coordinate when possible.
+    // If this is not possible, ensure that it's never positioned outside of chart container.
+    // This means the x transform should never be less than 0 or greater than chartWidth - labelWidth
+    const idealX = x - width / 2;
+    const translateX = Math.round(Math.max(minGutter, Math.min(idealX, chartWidth - width - minGutter)));
+    // Vertically center the min/max label within SparklineInteractiveMinMaxLabelHeight.
+    // This is the area between the vertical dotted line and the top or bottom
+    // of sparkline where min/max is displayed
+    const translateY = SparklineInteractiveMinMaxLabelHeight / 2 - height / 2;
+    transform.setValue({
+      x: translateX,
+      y: translateY
+    });
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: durations.moderate1,
+      useNativeDriver: true
+    }).start();
+  }, [SparklineInteractiveMinMaxLabelHeight, chartWidth, gutter, height, opacity, theme.space, transform, width, x]);
+}

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

@@ -0,0 +1,23 @@
+import { useMemo, useRef } from 'react';
+import { Animated } from 'react-native';
+import { fadeDuration } from '@coinbase/cds-common/tokens/sparkline';
+export function useOpacityAnimation(initialValue, duration) {
+  if (initialValue === void 0) {
+    initialValue = 0;
+  }
+  if (duration === void 0) {
+    duration = fadeDuration;
+  }
+  const animation = useRef(new Animated.Value(initialValue)).current;
+  const animateIn = useMemo(() => Animated.timing(animation, {
+    toValue: 1,
+    duration,
+    useNativeDriver: true
+  }), [animation, duration]);
+  const animateOut = useMemo(() => Animated.timing(animation, {
+    toValue: 0,
+    duration,
+    useNativeDriver: true
+  }), [animation, duration]);
+  return [animation, animateIn, animateOut];
+}

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

@@ -0,0 +1,47 @@
+import { useMemo } from 'react';
+import { useWindowDimensions } from 'react-native';
+import { borderWidth, chartCompactHeight, chartHeight as chartHeightToken } from '@coinbase/cds-common/tokens/sparkline';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
+export function useSparklineInteractiveConstants(_ref) {
+  let {
+    compact = false
+  } = _ref;
+  const theme = useTheme();
+  const {
+    width: screenWidth
+  } = useWindowDimensions();
+  const {
+    gutter
+  } = useSparklineInteractiveContext();
+  return useMemo(() => {
+    const chartHorizontalGutter = theme.space[gutter];
+    const chartWidth = screenWidth - chartHorizontalGutter * 2;
+    const chartHeight = compact ? chartCompactHeight : chartHeightToken;
+    const chartMarkerSize = theme.space[2];
+    const SparklineInteractiveMinMaxLabelHeight = theme.space[3];
+    const SparklineInteractiveMinMaxVerticalGutter = theme.space[0.5];
+    const chartVerticalLineWidth = borderWidth;
+    const xRange = [borderWidth, chartWidth - borderWidth];
+    const yRange = [chartHeight - borderWidth, borderWidth];
+    const startX = 0;
+    const endX = xRange[1];
+    return {
+      chartHorizontalGutter,
+      chartWidth,
+      chartHeight,
+      chartDimensionStyles: {
+        height: chartHeight,
+        width: chartWidth
+      },
+      chartMarkerSize,
+      SparklineInteractiveMinMaxLabelHeight,
+      SparklineInteractiveMinMaxVerticalGutter,
+      chartVerticalLineWidth,
+      xRange,
+      yRange,
+      startX,
+      endX
+    };
+  }, [compact, gutter, screenWidth, theme.space]);
+}

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

@@ -0,0 +1,34 @@
+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 { useMemo } from 'react';
+import { borderWidth, lineDashArray, lineOpacity } from '@coinbase/cds-common/tokens/sparkline';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+const staticLineProps = {
+  x1: 0,
+  x2: 0,
+  y1: 0,
+  y2: 0,
+  strokeDasharray: lineDashArray
+};
+export function useSparklineInteractiveLineStyles() {
+  const theme = useTheme();
+  return useMemo(() => {
+    const chartLineSize = theme.space[0.5];
+    return {
+      dotStyle: [{
+        backgroundColor: theme.color.fgMuted
+      }, {
+        position: 'absolute',
+        top: -chartLineSize / 2,
+        left: -chartLineSize / 2,
+        height: chartLineSize,
+        width: chartLineSize,
+        borderRadius: chartLineSize / 2,
+        opacity: lineOpacity
+      }],
+      lineProps: _extends({}, staticLineProps, {
+        strokeWidth: borderWidth,
+        stroke: theme.color.fgMuted
+      })
+    };
+  }, [theme.color.fgMuted, theme.space]);
+}

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

@@ -0,0 +1,233 @@
+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 React, { forwardRef, memo, useCallback, useImperativeHandle, useRef } from 'react';
+import { TextInput, View } from 'react-native';
+import { subheadIconSignMap } from '@coinbase/cds-common/tokens/sparkline';
+import { HStack, VStack } from '@coinbase/cds-mobile/layout';
+import { useSparklineInteractiveHeaderStyles } from './useSparklineInteractiveHeaderStyles';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export * from '@coinbase/cds-common/types/SparklineInteractiveHeaderBaseProps';
+export const interpolateSubHeadText = subHead => {
+  if (subHead.priceChange && subHead.percent) {
+    return subHead.priceChange + " (" + subHead.percent + ")";
+  }
+  if (subHead.priceChange) {
+    return subHead.priceChange;
+  }
+  return '';
+};
+const Trailing = _ref => {
+  let {
+    children
+  } = _ref;
+  if (children) {
+    return /*#__PURE__*/_jsx(VStack, {
+      alignItems: "center",
+      flexShrink: 0,
+      justifyContent: "center",
+      paddingStart: 2,
+      children: children
+    });
+  }
+  return null;
+};
+const SparklineInteractiveHeaderStable = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, forwardedRef) => {
+  let {
+    defaultLabel,
+    defaultTitle,
+    defaultSubHead,
+    testID,
+    trailing,
+    labelNode
+  } = _ref2;
+  const labelRef = useRef(null);
+  const titleRef = useRef(null);
+  const subHeadRef = useRef(null);
+  const subHeadIconRef = useRef(null);
+  const subHeadAccessoryRef = useRef(null);
+  const valuesRef = useRef({
+    title: defaultTitle,
+    label: defaultLabel,
+    subHead: defaultSubHead
+  });
+  const styles = useSparklineInteractiveHeaderStyles();
+  const updateLabel = useCallback(label => {
+    var _valuesRef$current;
+    const prevLabel = (_valuesRef$current = valuesRef.current) == null ? void 0 : _valuesRef$current.label;
+    if (prevLabel !== label) {
+      var _labelRef$current;
+      // BAD: We only disabled this lint rule to enable eslint upgrade after this component was implemented. These apis should never be used.
+      // Usage in this component are known making this a high risk component. Contact team for more information.
+
+      (_labelRef$current = labelRef.current) == null || _labelRef$current.setNativeProps({
+        text: label
+      });
+      valuesRef.current = _extends({}, valuesRef.current, {
+        label
+      });
+    }
+  }, []);
+  const updateTitle = useCallback(title => {
+    var _valuesRef$current2;
+    const prevTitle = (_valuesRef$current2 = valuesRef.current) == null ? void 0 : _valuesRef$current2.title;
+    if (prevTitle !== title && typeof title === 'string') {
+      var _titleRef$current;
+      // BAD: We only disabled this lint rule to enable eslint upgrade after this component was implemented. These apis should never be used.
+      // Usage in this component are known making this a high risk component. Contact team for more information.
+
+      (_titleRef$current = titleRef.current) == null || _titleRef$current.setNativeProps({
+        text: title,
+        style: styles.title(title)
+      });
+      valuesRef.current = _extends({}, valuesRef.current, {
+        title
+      });
+    }
+  }, [styles]);
+  const updateSubHead = useCallback(subHead => {
+    var _valuesRef$current3;
+    const prevSubHead = (_valuesRef$current3 = valuesRef.current) == null ? void 0 : _valuesRef$current3.subHead;
+    if (prevSubHead !== subHead) {
+      var _subHeadIconRef$curre, _subHeadRef$current, _subHeadAccessoryRef$, _subHead$accessoryTex;
+      // BAD: We only disabled this lint rule to enable eslint upgrade after this component was implemented. These apis should never be used.
+      // Usage in this component are known making this a high risk component. Contact team for more information.
+
+      (_subHeadIconRef$curre = subHeadIconRef.current) == null || _subHeadIconRef$curre.setNativeProps({
+        text: subheadIconSignMap[subHead.sign],
+        style: styles.subHeadIcon(subHead.variant)
+      });
+      // BAD: We only disabled this lint rule to enable eslint upgrade after this component was implemented. These apis should never be used.
+      // Usage in this component are known making this a high risk component. Contact team for more information.
+
+      (_subHeadRef$current = subHeadRef.current) == null || _subHeadRef$current.setNativeProps({
+        text: interpolateSubHeadText(subHead),
+        style: styles.subHead(subHead.variant, subHead.accessoryText === undefined)
+      });
+      // BAD: We only disabled this lint rule to enable eslint upgrade after this component was implemented. These apis should never be used.
+      // Usage in this component are known making this a high risk component. Contact team for more information.
+
+      (_subHeadAccessoryRef$ = subHeadAccessoryRef.current) == null || _subHeadAccessoryRef$.setNativeProps({
+        text: (_subHead$accessoryTex = subHead.accessoryText) != null ? _subHead$accessoryTex : '',
+        style: styles.subHeadAccessory()
+      });
+      valuesRef.current = _extends({}, valuesRef.current, {
+        subHead
+      });
+    }
+  }, [styles]);
+
+  // 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(_ref3 => {
+    let {
+      label,
+      title,
+      subHead
+    } = _ref3;
+    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(TextInput, {
+    ref: labelRef,
+    defaultValue: defaultLabel,
+    editable: false,
+    pointerEvents: "none",
+    style: styles.label,
+    testID: "SparklineInteractiveHeaderLabel"
+  });
+  const title = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(View, {
+      children: typeof defaultTitle === 'string' ? /*#__PURE__*/_jsx(TextInput, {
+        ref: titleRef,
+        defaultValue: defaultTitle,
+        editable: false,
+        pointerEvents: "none",
+        style: styles.title(defaultTitle),
+        testID: "SparklineInteractiveHeaderTitle"
+      }) : defaultTitle
+    }), !!defaultSubHead && /*#__PURE__*/_jsxs(HStack, {
+      accessible: true,
+      alignItems: "center",
+      padding: 0,
+      children: [/*#__PURE__*/_jsx(TextInput, {
+        ref: subHeadIconRef,
+        defaultValue: subheadIconSignMap[defaultSubHead.sign],
+        editable: false,
+        pointerEvents: "none",
+        style: styles.subHeadIcon(defaultSubHead.variant),
+        testID: "SparklineInteractiveHeaderSubHeadIcon"
+      }), /*#__PURE__*/_jsx(TextInput, {
+        ref: subHeadRef,
+        defaultValue: interpolateSubHeadText(defaultSubHead),
+        editable: false,
+        pointerEvents: "none",
+        style: styles.subHead(defaultSubHead.variant, defaultSubHead.accessoryText === undefined),
+        testID: "SparklineInteractiveHeaderSubHead"
+      }), !!defaultSubHead.accessoryText && /*#__PURE__*/_jsx(TextInput, {
+        ref: subHeadAccessoryRef,
+        defaultValue: defaultSubHead.accessoryText,
+        editable: false,
+        pointerEvents: "none",
+        style: styles.subHeadAccessory(),
+        testID: "SparklineInteractiveHeaderSubHead"
+      })]
+    })]
+  });
+  const trendA11yLabel = defaultSubHead ? "" + ((defaultSubHead == null ? void 0 : defaultSubHead.variant) === 'positive' ? 'up' : 'down') : '';
+  const headerA11yLabel = defaultLabel + ", " + defaultTitle + ", " + trendA11yLabel + " " + (defaultSubHead == null ? void 0 : defaultSubHead.priceChange) + ", " + (defaultSubHead == null ? void 0 : defaultSubHead.percent);
+  return /*#__PURE__*/_jsxs(HStack, {
+    accessibilityHint: "The price and difference for this time period",
+    accessibilityLabel: "Asset summary",
+    accessibilityRole: "header",
+    "aria-live": "polite",
+    justifyContent: "space-between",
+    padding: 0,
+    testID: testID,
+    children: [/*#__PURE__*/_jsxs(VStack, {
+      accessible: true,
+      accessibilityLabel: headerA11yLabel,
+      flexShrink: 1,
+      padding: 0,
+      children: [labelNode != null ? labelNode : label, title]
+    }), /*#__PURE__*/_jsx(Trailing, {
+      children: trailing
+    })]
+  });
+}));
+export const SparklineInteractiveHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) => {
+  let {
+    defaultLabel,
+    defaultTitle,
+    defaultSubHead,
+    testID,
+    trailing,
+    labelNode
+  } = _ref4;
+  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,
+    defaultLabel: useRef(defaultLabel).current,
+    defaultSubHead: useRef(defaultSubHead).current,
+    defaultTitle: useRef(defaultTitle).current,
+    labelNode: labelNode,
+    testID: testID,
+    trailing: trailing
+  });
+}));

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

@@ -0,0 +1,104 @@
+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 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-visualization';", "import { SparklineInteractive } from '@coinbase/cds-web-visualization';"],
+  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, _extends({
+      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));
+  }
+});