@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/overlays/__stories__/TooltipV2.stories.js

@@ -0,0 +1,297 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { Modal as RNModal, ScrollView, View } from 'react-native';
+import { Button } from '../../buttons';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useA11y } from '../../hooks/useA11y';
+import { Icon } from '../../icons/Icon';
+import { Box, HStack, VStack } from '../../layout';
+import { Text } from '../../typography/Text';
+import { Modal as CDSModal } from '../modal/Modal';
+import { Tooltip } from '../tooltip/Tooltip';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const topTextSubject = 'TOP';
+const bottomTextSubject = 'BOTTOM';
+const customTextSubject = 'CUSTOM';
+const shortText = 'This is the short text.';
+const longText = 'This is the really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really long text.';
+const ToolTipWithA11y = _ref => {
+  let {
+    tooltipText,
+    yShiftByStatusBarHeight
+  } = _ref;
+  const triggerRef = useRef(null);
+  const {
+    setA11yFocus
+  } = useA11y();
+  const handleClose = useCallback(() => {
+    // return a11y focus to trigger
+    setA11yFocus(triggerRef);
+  }, [setA11yFocus]);
+  return /*#__PURE__*/_jsx(Tooltip, {
+    accessibilityLabel: "Info",
+    content: tooltipText,
+    onCloseTooltip: handleClose,
+    yShiftByStatusBarHeight: yShiftByStatusBarHeight,
+    children: /*#__PURE__*/_jsx(View, {
+      ref: triggerRef,
+      children: /*#__PURE__*/_jsx(Icon, {
+        active: true,
+        name: "info",
+        size: "s"
+      })
+    })
+  });
+};
+const Content = _ref2 => {
+  let {
+    title,
+    tooltipText,
+    yShiftByStatusBarHeight
+  } = _ref2;
+  return /*#__PURE__*/_jsx(Example, {
+    title: title,
+    children: /*#__PURE__*/_jsxs(VStack, {
+      background: "bgAlternate",
+      gap: 8,
+      height: 800,
+      paddingY: 2,
+      children: [/*#__PURE__*/_jsxs(HStack, {
+        justifyContent: "space-around",
+        children: [/*#__PURE__*/_jsx(Tooltip, {
+          content: tooltipText,
+          yShiftByStatusBarHeight: yShiftByStatusBarHeight,
+          children: /*#__PURE__*/_jsx(Text, {
+            font: "label2",
+            children: topTextSubject
+          })
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          content: tooltipText,
+          yShiftByStatusBarHeight: yShiftByStatusBarHeight,
+          children: /*#__PURE__*/_jsx(Text, {
+            font: "label2",
+            children: topTextSubject
+          })
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          content: tooltipText,
+          yShiftByStatusBarHeight: yShiftByStatusBarHeight,
+          children: /*#__PURE__*/_jsx(Text, {
+            font: "label2",
+            children: topTextSubject
+          })
+        })]
+      }), /*#__PURE__*/_jsxs(HStack, {
+        justifyContent: "space-evenly",
+        children: [/*#__PURE__*/_jsx(ToolTipWithA11y, {
+          tooltipText: tooltipText,
+          yShiftByStatusBarHeight: yShiftByStatusBarHeight
+        }), /*#__PURE__*/_jsx(ToolTipWithA11y, {
+          tooltipText: tooltipText,
+          yShiftByStatusBarHeight: yShiftByStatusBarHeight
+        }), /*#__PURE__*/_jsx(ToolTipWithA11y, {
+          tooltipText: tooltipText,
+          yShiftByStatusBarHeight: yShiftByStatusBarHeight
+        })]
+      }), /*#__PURE__*/_jsxs(HStack, {
+        justifyContent: "space-around",
+        children: [/*#__PURE__*/_jsx(Tooltip, {
+          content: tooltipText,
+          placement: "bottom",
+          yShiftByStatusBarHeight: yShiftByStatusBarHeight,
+          children: /*#__PURE__*/_jsx(Text, {
+            font: "label2",
+            children: bottomTextSubject
+          })
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          content: tooltipText,
+          placement: "bottom",
+          yShiftByStatusBarHeight: yShiftByStatusBarHeight,
+          children: /*#__PURE__*/_jsx(Text, {
+            font: "label2",
+            children: bottomTextSubject
+          })
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          content: tooltipText,
+          placement: "bottom",
+          yShiftByStatusBarHeight: yShiftByStatusBarHeight,
+          children: /*#__PURE__*/_jsx(Text, {
+            font: "label2",
+            children: bottomTextSubject
+          })
+        })]
+      }), /*#__PURE__*/_jsxs(HStack, {
+        justifyContent: "space-evenly",
+        children: [/*#__PURE__*/_jsx(Tooltip, {
+          accessibilityLabel: "Info",
+          content: tooltipText,
+          placement: "bottom",
+          yShiftByStatusBarHeight: yShiftByStatusBarHeight,
+          children: /*#__PURE__*/_jsx(Icon, {
+            active: true,
+            name: "info",
+            size: "s"
+          })
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          accessibilityLabel: "Info",
+          content: tooltipText,
+          placement: "bottom",
+          yShiftByStatusBarHeight: yShiftByStatusBarHeight,
+          children: /*#__PURE__*/_jsx(Icon, {
+            active: true,
+            name: "info",
+            size: "s"
+          })
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          accessibilityLabel: "Info",
+          content: tooltipText,
+          placement: "bottom",
+          yShiftByStatusBarHeight: yShiftByStatusBarHeight,
+          children: /*#__PURE__*/_jsx(Icon, {
+            active: true,
+            name: "info",
+            size: "s"
+          })
+        })]
+      }), /*#__PURE__*/_jsx(HStack, {
+        justifyContent: "space-evenly",
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          content: tooltipText,
+          elevation: 2,
+          invertColorScheme: false,
+          placement: "top",
+          yShiftByStatusBarHeight: yShiftByStatusBarHeight,
+          children: /*#__PURE__*/_jsx(Text, {
+            font: "label2",
+            children: customTextSubject
+          })
+        })
+      })]
+    })
+  });
+};
+const ModalContent = _ref3 => {
+  let {
+    openModalText,
+    closeModal,
+    yShiftByStatusBarHeight
+  } = _ref3;
+  return /*#__PURE__*/_jsx(ScrollView, {
+    children: /*#__PURE__*/_jsxs(Box, {
+      paddingTop: 8,
+      children: [/*#__PURE__*/_jsx(Button, {
+        onPress: closeModal,
+        children: openModalText
+      }), /*#__PURE__*/_jsx(Content, {
+        title: "In Modal: Short Text Tooltip",
+        tooltipText: shortText,
+        yShiftByStatusBarHeight: yShiftByStatusBarHeight
+      }), /*#__PURE__*/_jsx(Content, {
+        title: "In Modal: Long Text Tooltip",
+        tooltipText: longText,
+        yShiftByStatusBarHeight: yShiftByStatusBarHeight
+      })]
+    })
+  });
+};
+const CDSModalTest = () => {
+  const [visible, setVisible] = useState(false);
+  const setVisibleToOn = useCallback(() => setVisible(true), []);
+  const setVisibleToOff = useCallback(() => setVisible(false), []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setVisibleToOn,
+      children: "Open CDS Modal Test"
+    }), /*#__PURE__*/_jsx(CDSModal, {
+      onRequestClose: setVisibleToOff,
+      visible: visible,
+      children: _ref4 => {
+        let {
+          closeModal
+        } = _ref4;
+        return /*#__PURE__*/_jsx(ModalContent, {
+          closeModal: closeModal,
+          openModalText: "Close CDS Modal Test"
+        });
+      }
+    })]
+  });
+};
+const RNModalTest = () => {
+  const [visible, setVisible] = useState(false);
+  const setVisibleToOn = useCallback(() => setVisible(true), []);
+  const setVisibleToOff = useCallback(() => setVisible(false), []);
+  // This is an important edge case that needs to be known. statusBarTranslucent impacts measurement on Android.
+  const [statusBarTranslucent, setStatusBarTranslucent] = useState(true);
+  const toggleOnStatusBarTranslucent = useCallback(() => setStatusBarTranslucent(true), []);
+  const toggleOffStatusBarTranslucent = useCallback(() => setStatusBarTranslucent(false), []);
+  const [yShiftByStatusBarHeight, setYShiftByStatusBarHeight] = useState(true);
+  const toggleOnShiftMeasurementByStatusBar = useCallback(() => setYShiftByStatusBarHeight(true), []);
+  const toggleOffShiftMeasurementByStatusBar = useCallback(() => setYShiftByStatusBarHeight(false), []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setVisibleToOn,
+      children: "Open RN Modal Test 2"
+    }), /*#__PURE__*/_jsxs(RNModal, {
+      statusBarTranslucent: statusBarTranslucent,
+      visible: visible,
+      children: [/*#__PURE__*/_jsxs(VStack, {
+        paddingTop: 6,
+        width: "100%",
+        children: [/*#__PURE__*/_jsx(Button, {
+          compact: true,
+          onPress: toggleOnStatusBarTranslucent,
+          children: "Toggle on statusBarTranslucent"
+        }), /*#__PURE__*/_jsx(Button, {
+          compact: true,
+          onPress: toggleOffStatusBarTranslucent,
+          children: "Toggle off statusBarTranslucent"
+        }), /*#__PURE__*/_jsx(Button, {
+          compact: true,
+          onPress: toggleOnShiftMeasurementByStatusBar,
+          children: "Toggle on Status Bar Measurement Shift"
+        }), /*#__PURE__*/_jsx(Button, {
+          compact: true,
+          onPress: toggleOffShiftMeasurementByStatusBar,
+          children: "Toggle off Status Bar Measurement Shift"
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "label2",
+          children: "CDSModal Default: statusBarTranslucent=true"
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "label2",
+          children: "statusBarTranslucent: " + statusBarTranslucent
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "label2",
+          children: "yShiftByStatusBarHeight: " + yShiftByStatusBarHeight
+        })]
+      }), /*#__PURE__*/_jsx(ModalContent, {
+        closeModal: setVisibleToOff,
+        openModalText: "Close RN Modal Test",
+        yShiftByStatusBarHeight: yShiftByStatusBarHeight
+      })]
+    })]
+  });
+};
+const DisabledTest = () => {
+  return /*#__PURE__*/_jsx(Example, {
+    title: "Non Visible Tooltip",
+    children: /*#__PURE__*/_jsx(Tooltip, {
+      content: "Disabled Tooltip",
+      visible: false,
+      children: /*#__PURE__*/_jsx(Button, {
+        disabled: true,
+        children: "Disabled"
+      })
+    })
+  });
+};
+const TooltipV2Screen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(CDSModalTest, {}), /*#__PURE__*/_jsx(RNModalTest, {}), /*#__PURE__*/_jsx(Content, {
+      title: "Short Text Tooltip",
+      tooltipText: shortText
+    }), /*#__PURE__*/_jsx(Content, {
+      title: "Long Text Tooltip",
+      tooltipText: longText
+    }), /*#__PURE__*/_jsx(DisabledTest, {})]
+  });
+};
+export default TooltipV2Screen;

package/esm/overlays/__stories__/TrayAction.stories.js

@@ -0,0 +1,195 @@
+const _excluded = ["media"];
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+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, { useCallback, useRef, useState } from 'react';
+import { FlatList } from 'react-native';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
+import { Button } from '../../buttons/Button';
+import { ListCell } from '../../cells';
+import { CellMedia } from '../../cells/CellMedia';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { SectionHeader } from '../../section-header/SectionHeader';
+import { StickyFooter } from '../../sticky-footer/StickyFooter';
+import { Link } from '../../typography/Link';
+import { Text } from '../../typography/Text';
+import { Tray, TrayStickyFooter } from '../tray/Tray';
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const defaultOptions = [{
+  title: 'Ethereum',
+  detail: '$0.00',
+  media: assets.eth.imageUrl,
+  selected: false
+}, {
+  title: 'Title',
+  detail: '$0.00',
+  media: assets.polygon.imageUrl,
+  selected: true
+}];
+const exampleOptions = Array.from({
+  length: 10
+}).map((_, idx) => ({
+  title: "Title " + (idx + 1),
+  description: 'Description',
+  detail: 'Detail',
+  subdetail: 'SubDetail',
+  selected: false
+}));
+export const Default = props => {
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const setIsTrayVisibleToFalse = useCallback(() => setIsTrayVisible(false), []);
+  const setIsTrayVisibleToTrue = useCallback(() => setIsTrayVisible(true), []);
+  const [items, setItems] = useState(defaultOptions);
+  const trayRef = useRef(null);
+  const handleOptionPress = useCallback(index => {
+    var _trayRef$current;
+    setItems(prev => {
+      const newItems = prev.map((item, i) => {
+        if (i === index) {
+          return _extends({}, item, {
+            selected: !item.selected
+          });
+        }
+        return _extends({}, item, {
+          selected: false
+        });
+      });
+      return newItems;
+    });
+    (_trayRef$current = trayRef.current) == null || _trayRef$current.handleClose();
+  }, []);
+  const handleTrayVisibilityChange = useCallback(e => {
+    console.log('Tray visibility changed:', e);
+  }, []);
+  const description = /*#__PURE__*/_jsxs(Text, {
+    font: "body",
+    children: [/*#__PURE__*/_jsxs(Text, {
+      color: "fgMuted",
+      font: "body",
+      children: ["Select the network you want your swapped asset to be stored on.", ' ']
+    }), /*#__PURE__*/_jsx(Link, {
+      font: "body",
+      to: "https://www.coinbase.com/",
+      children: "Learn more"
+    })]
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleToTrue,
+      children: "Open"
+    }), isTrayVisible && /*#__PURE__*/_jsx(Tray, _extends({
+      ref: trayRef,
+      handleBarAccessibilityLabel: "Dismiss",
+      onCloseComplete: setIsTrayVisibleToFalse,
+      onVisibilityChange: handleTrayVisibilityChange,
+      title: /*#__PURE__*/_jsx(SectionHeader, {
+        description: description,
+        paddingX: 3,
+        title: "Change network"
+      })
+    }, props, {
+      children: items == null ? void 0 : items.map((_ref, index) => {
+        let {
+            media
+          } = _ref,
+          item = _objectWithoutPropertiesLoose(_ref, _excluded);
+        return /*#__PURE__*/_jsx(ListCell, _extends({
+          media: /*#__PURE__*/_jsx(CellMedia, {
+            source: media,
+            type: "avatar"
+          }),
+          onPress: () => handleOptionPress(index)
+        }, item), item.title);
+      })
+    }))]
+  });
+};
+export const WithStickyFooter = () => {
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const setIsTrayVisibleToFalse = useCallback(() => setIsTrayVisible(false), []);
+  const setIsTrayVisibleToTrue = useCallback(() => setIsTrayVisible(true), []);
+  const trayRef = useRef(null);
+  const [items, setItems] = useState(exampleOptions);
+  const handleTrayVisibilityChange = useCallback(e => {
+    console.log('Tray visibility changed:', e);
+  }, []);
+  const handleOptionPress = useCallback(index => {
+    setItems(prev => {
+      const newItems = prev.map((item, i) => {
+        if (i === index) {
+          return _extends({}, item, {
+            selected: !item.selected
+          });
+        }
+        return item;
+      });
+      return newItems;
+    });
+  }, []);
+  const renderItem = useCallback(_ref2 => {
+    let {
+      index,
+      item
+    } = _ref2;
+    return /*#__PURE__*/_jsx(ListCell, _extends({
+      onPress: () => handleOptionPress(index)
+    }, item));
+  }, [handleOptionPress]);
+  const handleKeyExtractor = useCallback(item => item.title, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleToTrue,
+      children: "Open"
+    }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      ref: trayRef,
+      disableCapturePanGestureToDismiss: true,
+      handleBarAccessibilityLabel: "Dismiss",
+      onCloseComplete: setIsTrayVisibleToFalse,
+      onVisibilityChange: handleTrayVisibilityChange,
+      title: /*#__PURE__*/_jsx(SectionHeader, {
+        paddingX: 3,
+        title: "Section header"
+      }),
+      children: _ref3 => {
+        let {
+          handleClose
+        } = _ref3;
+        return /*#__PURE__*/_jsxs(TrayStickyFooter, {
+          children: [/*#__PURE__*/_jsx(FlatList, {
+            data: items,
+            keyExtractor: handleKeyExtractor,
+            renderItem: renderItem
+          }), /*#__PURE__*/_jsx(StickyFooter, {
+            paddingX: 3,
+            children: /*#__PURE__*/_jsx(Button, {
+              block: true,
+              onPress: handleClose,
+              children: "Button"
+            })
+          })]
+        });
+      }
+    })]
+  });
+};
+const NonDismissable = () => {
+  return /*#__PURE__*/_jsx(Default, {
+    hideHandleBar: true,
+    preventDismissGestures: true,
+    preventHardwareBackBehaviorAndroid: true
+  });
+};
+export const ActionTrayScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Action Tray",
+      children: /*#__PURE__*/_jsx(Default, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Sticky Footer",
+      children: /*#__PURE__*/_jsx(WithStickyFooter, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Non-dismissable",
+      children: /*#__PURE__*/_jsx(NonDismissable, {})
+    })]
+  });
+};
+export default ActionTrayScreen;

package/esm/overlays/__stories__/TrayBasic.stories.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { DefaultTray } from './Trays';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TrayBasicScreen = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "Basic Tray",
+      children: /*#__PURE__*/_jsx(DefaultTray, {})
+    })
+  });
+};
+export default TrayBasicScreen;

package/esm/overlays/__stories__/TrayFallback.stories.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { ScrollableTray } from './Trays';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TrayFallbackScreen = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "Tray with Fallback",
+      children: /*#__PURE__*/_jsx(ScrollableTray, {
+        fallbackEnabled: true,
+        title: "You are going to be waiting awhile..."
+      })
+    })
+  });
+};
+export default TrayFallbackScreen;

package/esm/overlays/__stories__/TrayFeedCard.stories.js

@@ -0,0 +1,57 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { FeedCard } from '../../cards/FeedCard';
+import { Menu } from '../../controls/Menu';
+import { SelectOption } from '../../controls/SelectOption';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Tray } from '../tray/Tray';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const simpleOptions = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'];
+const FeedCardTray = () => {
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const setIsTrayVisbleToFalse = useCallback(() => setIsTrayVisible(false), []);
+  const setIsTrayVisibleToTrue = useCallback(() => setIsTrayVisible(true), []);
+  const [value, setValue] = useState();
+  const trayRef = useRef(null);
+  const handleOptionPress = useCallback(() => {
+    var _trayRef$current;
+    (_trayRef$current = trayRef.current) == null || _trayRef$current.handleClose();
+  }, []);
+  const handleFeedCardHeaderButtonPress = useCallback(() => {
+    setIsTrayVisibleToTrue();
+  }, [setIsTrayVisibleToTrue]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(FeedCard, {
+      author: "Earn crypto",
+      avatar: "https://images.coinbase.com/avatar?s=350",
+      description: "Amp is an Ethereum token that can be used as collateral to provide instant settlement assurance any time value is transferred.",
+      headerAction: {
+        name: 'more',
+        onPress: handleFeedCardHeaderButtonPress
+      },
+      image: "https://static-assets.coinbase.com/card/introduction/v2/initial_funding.png",
+      mediaPlacement: "above",
+      title: "LEARN AMP. EARN $3 IN AMP."
+    }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      ref: trayRef,
+      onCloseComplete: setIsTrayVisbleToFalse,
+      children: /*#__PURE__*/_jsx(Menu, {
+        onChange: setValue,
+        value: value,
+        children: simpleOptions.map(option => /*#__PURE__*/_jsx(SelectOption, {
+          description: option,
+          onPress: handleOptionPress,
+          value: option
+        }, option))
+      })
+    })]
+  });
+};
+export const TrayFeedCardScreen = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "Feed Card with Tray",
+      children: /*#__PURE__*/_jsx(FeedCardTray, {})
+    })
+  });
+};
+export default TrayFeedCardScreen;