@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

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

@@ -1,47 +0,0 @@
-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

@@ -1,34 +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 { 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

@@ -1,233 +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 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

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