@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/typography/__stories__/TextTitle4.stories.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TextTitle4 } from '../TextTitle4';
+import TextExamplesScreen from './TextExamples';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default () => /*#__PURE__*/_jsx(TextExamplesScreen, {
+  component: TextTitle4
+});

package/esm/typography/index.js

@@ -0,0 +1,15 @@
+export * from './Link';
+export * from './TextBody';
+export * from './TextCaption';
+export * from './TextDisplay1';
+export * from './TextDisplay2';
+export * from './TextDisplay3';
+export * from './TextHeadline';
+export * from './TextLabel1';
+export * from './TextLabel2';
+export * from './TextLegal';
+export * from './TextTitle1';
+export * from './TextTitle2';
+export * from './TextTitle3';
+export * from './TextTitle4';
+export {};

package/esm/utils/customTabsHelper.js

@@ -0,0 +1,8 @@
+import { NativeModules } from 'react-native';
+const noop = function () {};
+
+// Only implemented on Android -- it's a noop on iOS
+const CustomTabsHelper = NativeModules.CustomTabsHelperModule || {
+  preventRedirectionIntoApp: noop
+};
+export { CustomTabsHelper };

package/esm/utils/debounce.js

@@ -0,0 +1,16 @@
+import _debounce from 'lodash/debounce';
+
+// React Native is historically trash at debouncing touch events
+// This can cause a lot of unwanted behavior (in UMO - mostly double navigations
+// where we push a screen/experience onto the stack 2 times). Debouncing the event
+// 500 miliseconds, but taking the leading event prevents this effect and the accidental "double-tap"
+// https://medium.com/@devmrin/debouncing-touch-events-in-react-native-prevent-navigating-twice-or-more-times-when-button-is-90687e4a8113
+export const debounce = function (fn, time) {
+  if (time === void 0) {
+    time = 500;
+  }
+  return _debounce(fn, time, {
+    leading: true,
+    trailing: false
+  });
+};

package/esm/utils/flattenAndJoinNodes.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import flattenNodes from '@coinbase/cds-common/utils/flattenNodes';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function flattenAndJoinNodes(_ref) {
+  let {
+    children,
+    direction = 'vertical',
+    divider,
+    gap,
+    renderItem,
+    ItemWrapper,
+    Spacer
+  } = _ref;
+  let finalChildren = [];
+  const itemsToJoin = [];
+  const shouldJoin = gap !== undefined || divider !== undefined;
+  const childrenAsArray = React.Children.toArray(children);
+  const flattenedChildren = shouldJoin || childrenAsArray.length > 1 ? flattenNodes(childrenAsArray) : undefined;
+  if (gap) {
+    itemsToJoin.push(/*#__PURE__*/_jsx(Spacer, {
+      [direction]: gap
+    }));
+  }
+  if (divider) {
+    const Divider = divider;
+    itemsToJoin.push(/*#__PURE__*/_jsx(Divider, {}));
+  }
+  const childrenContents = flattenedChildren ? flattenedChildren.map((item, index) => renderItem && ItemWrapper ? renderItem({
+    item,
+    Wrapper: ItemWrapper,
+    index,
+    isFirst: index === 0,
+    isLast: flattenedChildren.length - 1 === index
+  }) : item) : childrenAsArray;
+  if (shouldJoin) {
+    childrenContents.forEach((item, index) => {
+      // The last item doesn't include divider or spacer
+      if (index === childrenContents.length - 1) {
+        finalChildren = [...finalChildren, item];
+      } else {
+        finalChildren = [...finalChildren, item, ...itemsToJoin];
+      }
+    });
+    return React.Children.toArray(finalChildren);
+  }
+  return childrenContents;
+}

package/esm/utils/getAdjustedFontScale.js

@@ -0,0 +1,13 @@
+export function getAdjustedFontScale(_ref, length, maxLength) {
+  let {
+    fontSize,
+    lineHeight
+  } = _ref;
+  // For text with length up to maxLength, set ratio to 1.
+  // For text longer than maxLength, scale based on the the text length.
+  const ratio = length <= maxLength ? 1 : maxLength / length;
+  return {
+    fontSize: fontSize !== undefined ? fontSize * ratio : undefined,
+    lineHeight: lineHeight !== undefined ? lineHeight * ratio : undefined
+  };
+}

package/esm/utils/getSpacerStyle.js

@@ -0,0 +1,27 @@
+export const getSpacerStyle = _ref => {
+  let {
+    flexGrow,
+    flexShrink,
+    flexBasis,
+    horizontal,
+    vertical,
+    maxHorizontal,
+    maxVertical,
+    minHorizontal,
+    minVertical,
+    spacingScaleValues
+  } = _ref;
+  const isFixedSize = horizontal !== undefined || vertical !== undefined;
+  return {
+    // fixed size spacer by default should not grow or shrink.
+    flexBasis: flexBasis != null ? flexBasis : isFixedSize ? undefined : 1,
+    flexGrow: flexGrow != null ? flexGrow : isFixedSize ? 0 : 1,
+    flexShrink: flexShrink != null ? flexShrink : isFixedSize ? 0 : 1,
+    width: horizontal && spacingScaleValues[horizontal],
+    height: vertical && spacingScaleValues[vertical],
+    maxWidth: maxHorizontal && spacingScaleValues[maxHorizontal],
+    maxHeight: maxVertical && spacingScaleValues[maxVertical],
+    minWidth: minHorizontal && spacingScaleValues[minHorizontal],
+    minHeight: minVertical && spacingScaleValues[minVertical]
+  };
+};

package/esm/utils/haptics.js

@@ -0,0 +1,22 @@
+import { NativeModules } from 'react-native';
+const noop = function () {};
+const HapticsModule = NativeModules.Haptics || {
+  impactAsync: noop,
+  notificationAsync: noop
+};
+const notification = async type => HapticsModule.notificationAsync(type);
+const successNotification = async () => notification('success');
+const warningNotification = async () => notification('warning');
+const errorNotification = async () => notification('error');
+const impact = async style => HapticsModule.impactAsync(style);
+const lightImpact = async () => impact('light');
+const normalImpact = async () => impact('medium');
+const heavyImpact = async () => impact('heavy');
+export const Haptics = {
+  successNotification,
+  warningNotification,
+  errorNotification,
+  lightImpact,
+  normalImpact,
+  heavyImpact
+};

package/esm/utils/isValidURL.js

@@ -0,0 +1,4 @@
+export const isValidURL = url => {
+  const res = url.match('^(?:(?:http(?:s)?|ftp)://)(?:\\S+(?::(?:\\S)*)?@)?(?:(?:[a-z0-9\u00a1-\uffff](?:-)*)*(?:[a-z0-9\u00a1-\uffff])+)(?:\\.(?:[a-z0-9\u00a1-\uffff](?:-)*)*(?:[a-z0-9\u00a1-\uffff])+)*(?:\\.(?:[a-z0-9\u00a1-\uffff]){2,63})(?::(?:\\d){2,5})?(?:/(?:\\S)*)?$');
+  return res !== null;
+};

package/esm/utils/openWebBrowser.js

@@ -0,0 +1,61 @@
+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 { Linking, Platform } from 'react-native';
+import { InAppBrowser } from 'react-native-inappbrowser-reborn';
+import { CustomTabsHelper } from './customTabsHelper';
+import { isValidURL } from './isValidURL';
+
+// react-native-inappbrowser-reborn does not export these types
+// so I have to copy it here instead
+
+export const openWebBrowser = async (url, options) => {
+  var _options$preventRedir, _options$forceOpenOut;
+  const preventRedirectionIntoApp = (_options$preventRedir = options.preventRedirectionIntoApp) != null ? _options$preventRedir : false;
+  const forceOpenOutsideApp = (_options$forceOpenOut = options.forceOpenOutsideApp) != null ? _options$forceOpenOut : false;
+  if (preventRedirectionIntoApp) {
+    CustomTabsHelper.preventRedirectionIntoApp();
+  }
+
+  // An object takes the last key-pair value as its final value, so this works.
+  // i.e if we have an object like { a: 1, b: 2, a: 3 }, the final result will be
+  // { a: 3, b: 2 }
+  const browserConfig = Platform.select({
+    android: _extends({
+      showTitle: true,
+      toolbarColor: options.theme.color.bg,
+      secondaryToolbarColor: options.theme.color.bgLineHeavy,
+      enableUrlBarHiding: true,
+      enableDefaultShare: true,
+      forceCloseOnRedirection: false
+    }, options),
+    ios: _extends({
+      dismissButtonStyle: 'close',
+      preferredBarTintColor: options.theme.color.bg,
+      preferredControlTintColor: options.theme.color.bgPrimary,
+      readerMode: false,
+      animated: true,
+      modalPresentationStyle: 'fullScreen',
+      modalTransitionStyle: 'crossDissolve',
+      modalEnabled: true,
+      enableBarCollapsing: false
+    }, options)
+  });
+  try {
+    if (isValidURL(url)) {
+      if (!forceOpenOutsideApp && (await InAppBrowser.isAvailable())) {
+        await InAppBrowser.open(url, browserConfig);
+      } else {
+        const canOpenURL = await Linking.canOpenURL(url);
+        if (canOpenURL) {
+          await Linking.openURL(url);
+        }
+      }
+    } else {
+      options.onInvalidURL == null || options.onInvalidURL();
+    }
+  } catch (err) {
+    // TODO: Should output this to Bugsnag
+
+    console.error("An error occurred: " + err);
+    InAppBrowser.close();
+  }
+};

package/esm/utils/testHelpers.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ThemeProvider } from '../system/ThemeProvider';
+import { defaultTheme } from '../themes/defaultTheme';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SAFE_AREA_METRICS = {
+  frame: {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  },
+  insets: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  }
+};
+export const theme = defaultTheme;
+export const DefaultThemeProvider = _ref => {
+  let {
+    children,
+    theme = defaultTheme,
+    activeColorScheme = 'light'
+  } = _ref;
+  return /*#__PURE__*/_jsx(ThemeProvider, {
+    activeColorScheme: activeColorScheme,
+    theme: theme,
+    children: children
+  });
+};

package/esm/visualizations/Counter.js

@@ -0,0 +1,45 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useCounter } from '@coinbase/cds-common/visualizations/useCounter';
+import { Box } from '../layout';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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(Box, {
+    alignSelf: "flex-start",
+    justifyContent: "center",
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.hidden,
+      children: renderFunction(endNum)
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.visible,
+      children: renderFunction(count)
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  hidden: {
+    opacity: 0
+  },
+  visible: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    display: 'flex'
+  }
+});

package/esm/visualizations/DefaultProgressCircleContent.js

@@ -0,0 +1,21 @@
+import { memo } from 'react';
+import { Box } from '../layout';
+import { ProgressTextLabel } from './ProgressTextLabel';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DefaultProgressCircleContent = /*#__PURE__*/memo(_ref => {
+  let {
+    progress,
+    disabled,
+    color = 'fgMuted'
+  } = _ref;
+  return /*#__PURE__*/_jsx(Box, {
+    alignSelf: "center",
+    flexGrow: 0,
+    flexShrink: 0,
+    children: /*#__PURE__*/_jsx(ProgressTextLabel, {
+      color: color,
+      disabled: disabled,
+      value: Math.round(progress * 100)
+    })
+  });
+});

package/esm/visualizations/ProgressBar.js

@@ -0,0 +1,105 @@
+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, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, I18nManager } from 'react-native';
+import { animateProgressBaseSpec } from '@coinbase/cds-common/animation/progress';
+import { usePreviousValues } from '@coinbase/cds-common/hooks/usePreviousValues';
+import { useProgressSize } from '@coinbase/cds-common/visualizations/useProgressSize';
+import { convertMotionConfig } from '../animation/convertMotionConfig';
+import { useTheme } from '../hooks/useTheme';
+import { Box, HStack } from '../layout';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  var _getPreviousPercent;
+  let {
+    weight = 'normal',
+    progress,
+    color = 'bgPrimary',
+    disabled = false,
+    disableAnimateOnMount = false,
+    testID,
+    accessibilityLabel,
+    style,
+    styles,
+    onAnimationEnd,
+    onAnimationStart
+  } = _ref;
+  const theme = useTheme();
+  const height = useProgressSize(weight);
+  const {
+    getPreviousValue: getPreviousPercent,
+    addPreviousValue: addPreviousPercent
+  } = usePreviousValues([disableAnimateOnMount ? progress : 0]);
+  addPreviousPercent(progress);
+  const previousPercent = (_getPreviousPercent = getPreviousPercent()) != null ? _getPreviousPercent : 0;
+  const animatedProgress = useRef(new Animated.Value(previousPercent));
+  const [innerWidth, setInnerWidth] = useState(-1);
+  useEffect(() => {
+    if (innerWidth > -1) {
+      var _Animated$timing;
+      onAnimationStart == null || onAnimationStart();
+      (_Animated$timing = Animated.timing(animatedProgress.current, convertMotionConfig(_extends({
+        toValue: progress
+      }, animateProgressBaseSpec, {
+        useNativeDriver: true
+      })))) == null || _Animated$timing.start(_ref2 => {
+        let {
+          finished
+        } = _ref2;
+        if (finished) onAnimationEnd == null || onAnimationEnd();
+      });
+    }
+  }, [progress, animatedProgress, innerWidth, onAnimationStart, onAnimationEnd]);
+  const handleLayout = useCallback(event => {
+    setInnerWidth(event.nativeEvent.layout.width);
+  }, []);
+  const rootStyle = useMemo(() => {
+    const justifyContent = I18nManager.isRTL ? 'flex-end' : 'flex-start';
+    return [{
+      borderRadius: 200,
+      backgroundColor: theme.color.bgLine,
+      height,
+      overflow: 'hidden',
+      alignItems: 'center',
+      justifyContent
+    }, style, styles == null ? void 0 : styles.root];
+  }, [style, styles == null ? void 0 : styles.root, theme.color.bgLine, height]);
+  const progressStyle = useMemo(() => [{
+    opacity: innerWidth > -1 ? 1 : 0,
+    transform: [{
+      translateX: animatedProgress.current.interpolate({
+        inputRange: [0, 1],
+        outputRange: I18nManager.isRTL ? [innerWidth, 0] : [innerWidth * -1, 0]
+      })
+    }]
+  }, styles == null ? void 0 : styles.progress], [innerWidth, styles == null ? void 0 : styles.progress]);
+  return /*#__PURE__*/_jsx(HStack, {
+    ref: forwardedRef,
+    accessible: true,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: "progressbar",
+    accessibilityValue: {
+      min: 0,
+      max: 100,
+      now: progress * 100
+    },
+    alignItems: "center",
+    flexGrow: 1,
+    flexShrink: 0,
+    onLayout: handleLayout,
+    style: rootStyle,
+    testID: testID,
+    children: /*#__PURE__*/_jsx(Box, {
+      animated: true,
+      alignItems: "flex-start",
+      borderRadius: 200,
+      dangerouslySetBackground: !disabled ? theme.color[color] : theme.color.bgLineHeavy,
+      flexGrow: 0,
+      flexShrink: 0,
+      height: "100%",
+      justifyContent: "center",
+      style: progressStyle,
+      testID: "cds-progress-bar",
+      width: "100%"
+    })
+  });
+}));

package/esm/visualizations/ProgressBarWithFixedLabels.js

@@ -0,0 +1,146 @@
+import React, { memo, useMemo } from 'react';
+import { I18nManager, View } from 'react-native';
+import { Box, VStack } from '../layout';
+import { getProgressBarLabelParts } from './getProgressBarLabelParts';
+import { ProgressTextLabel } from './ProgressTextLabel';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ProgressBarFixedLabelBeside = /*#__PURE__*/memo(_ref => {
+  let {
+    label,
+    visuallyDisabled,
+    style
+  } = _ref;
+  const {
+    value: labelNum,
+    render: renderLabel
+  } = getProgressBarLabelParts(label);
+  return /*#__PURE__*/_jsx(ProgressTextLabel, {
+    color: "fg",
+    disabled: visuallyDisabled,
+    renderLabel: renderLabel,
+    style: style,
+    value: labelNum
+  });
+});
+const ProgressBarFixedLabel = /*#__PURE__*/memo(_ref2 => {
+  let {
+    label,
+    position,
+    visuallyDisabled,
+    style
+  } = _ref2;
+  return /*#__PURE__*/_jsx(View, {
+    testID: "cds-progress-bar-fixed-label-" + position,
+    children: /*#__PURE__*/_jsx(ProgressBarFixedLabelBeside, {
+      label: label,
+      style: style,
+      visuallyDisabled: visuallyDisabled
+    })
+  });
+});
+const ProgressBarFixedLabelContainer = /*#__PURE__*/memo(_ref3 => {
+  let {
+    startLabel,
+    endLabel,
+    visuallyDisabled,
+    paddingBottom,
+    paddingTop,
+    styles
+  } = _ref3;
+  const nodes = [];
+  if (typeof startLabel !== 'undefined') {
+    nodes.push(/*#__PURE__*/_jsx(ProgressBarFixedLabel, {
+      label: startLabel,
+      position: "start",
+      style: styles == null ? void 0 : styles.startLabel,
+      visuallyDisabled: visuallyDisabled
+    }, "start-label"));
+  } else {
+    // pushes an end label to the end if no start label is available to push it
+    nodes.push(/*#__PURE__*/_jsx(View, {}, "end-label-spacer"));
+  }
+  if (typeof endLabel !== 'undefined') {
+    nodes.push(/*#__PURE__*/_jsx(ProgressBarFixedLabel, {
+      label: endLabel,
+      position: "end",
+      style: styles == null ? void 0 : styles.endLabel,
+      visuallyDisabled: visuallyDisabled
+    }, "end-label"));
+  } else {
+    // pushes a start label to the start if there is no end label available to push it
+    nodes.push(/*#__PURE__*/_jsx(View, {}, "start-label-spacer"));
+  }
+  if (I18nManager.isRTL) {
+    nodes.reverse();
+  }
+  return /*#__PURE__*/_jsx(Box, {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    paddingBottom: paddingBottom,
+    paddingTop: paddingTop,
+    style: styles == null ? void 0 : styles.labelContainer,
+    testID: "cds-progress-label-container",
+    width: "100%",
+    children: nodes
+  });
+});
+export const ProgressBarWithFixedLabels = /*#__PURE__*/memo(_ref4 => {
+  let {
+    startLabel,
+    endLabel,
+    labelPlacement = 'beside',
+    disabled = false,
+    children,
+    testID,
+    style,
+    styles
+  } = _ref4;
+  const rootStyle = useMemo(() => [style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root]);
+  const startLabelEl = typeof startLabel !== 'undefined' && /*#__PURE__*/_jsx(Box, {
+    flexGrow: 0,
+    flexShrink: 0,
+    paddingEnd: 1,
+    children: /*#__PURE__*/_jsx(ProgressBarFixedLabelBeside, {
+      label: startLabel,
+      style: styles == null ? void 0 : styles.startLabel,
+      visuallyDisabled: disabled
+    })
+  });
+  const endLabelEl = typeof endLabel !== 'undefined' && /*#__PURE__*/_jsx(Box, {
+    flexGrow: 0,
+    flexShrink: 0,
+    paddingStart: 1,
+    children: /*#__PURE__*/_jsx(ProgressBarFixedLabelBeside, {
+      label: endLabel,
+      style: styles == null ? void 0 : styles.endLabel,
+      visuallyDisabled: disabled
+    })
+  });
+  const leftEl = I18nManager.isRTL ? endLabelEl : startLabelEl;
+  const rightEl = I18nManager.isRTL ? startLabelEl : endLabelEl;
+  return /*#__PURE__*/_jsxs(VStack, {
+    style: rootStyle,
+    testID: testID,
+    children: [labelPlacement === 'above' && /*#__PURE__*/_jsx(ProgressBarFixedLabelContainer, {
+      endLabel: endLabel,
+      paddingBottom: 1,
+      startLabel: startLabel,
+      styles: styles,
+      visuallyDisabled: disabled
+    }), /*#__PURE__*/_jsxs(Box, {
+      alignItems: "center",
+      flexDirection: "row",
+      flexShrink: 0,
+      flexWrap: "nowrap",
+      width: "100%",
+      children: [labelPlacement === 'beside' && leftEl, children, labelPlacement === 'beside' && rightEl]
+    }), labelPlacement === 'below' && /*#__PURE__*/_jsx(ProgressBarFixedLabelContainer, {
+      endLabel: endLabel,
+      paddingTop: 1,
+      startLabel: startLabel,
+      styles: styles,
+      visuallyDisabled: disabled
+    })]
+  });
+});