@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/tabs/__stories__/TabNavigation.stories.js

@@ -0,0 +1,148 @@
+const _excluded = ["label"],
+  _excluded2 = ["label"];
+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); }
+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; }
+import React, { useCallback, useState } from 'react';
+import { sampleTabs } from '@coinbase/cds-common/internal/data/tabs';
+import { gutter } from '@coinbase/cds-common/tokens/sizing';
+import sample from 'lodash/sample';
+import { Button } from '../../buttons';
+import { Chip } from '../../chips/Chip';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { HStack } from '../../layout';
+import { Text } from '../../typography/Text';
+import { TabNavigation } from '../TabNavigation';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const renderCustomTab = _ref => {
+  let {
+      label
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(HStack, _extends({
+    bordered: true,
+    background: "bg",
+    borderRadius: 100,
+    paddingX: 2,
+    paddingY: 1
+  }, props, {
+    children: /*#__PURE__*/_jsx(Text, {
+      font: "headline",
+      children: label
+    })
+  }));
+};
+const renderAnotherCustomTab = _ref2 => {
+  let {
+      label
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  return /*#__PURE__*/_jsx(Chip, _extends({}, props, {
+    children: label
+  }));
+};
+const someCustomTabs = [...sampleTabs.slice(0, 3), {
+  id: 'custom_tab',
+  label: 'Custom',
+  testID: 'custom_tab',
+  Component: renderCustomTab
+}];
+const enumTabs = [{
+  id: 'buy',
+  label: 'Buy'
+}, {
+  id: 'sell',
+  label: 'Sell'
+}, {
+  id: 'convert',
+  label: 'Convert'
+}];
+const TabNavigationScreen = () => {
+  const [currentTabOne, setCurrentTabOne] = useState();
+  const [currentTabTwo, setCurrentTabTwo] = useState(sampleTabs[3].id);
+  const [currentTabThree, setCurrentTabThree] = useState();
+  const [currentTabFour, setCurrentTabFour] = useState();
+  const [currentTabFive, setCurrentTabFive] = useState(enumTabs[0].id);
+  const randomizeCurrentTabOne = useCallback(() => {
+    const randomTabItem = sample(sampleTabs);
+    setCurrentTabOne(randomTabItem == null ? void 0 : randomTabItem.id);
+  }, []);
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsxs(Example, {
+      overflow: "visible",
+      padding: gutter,
+      title: "Tab Navigation",
+      children: [/*#__PURE__*/_jsx(TabNavigation, {
+        onChange: setCurrentTabOne,
+        tabs: sampleTabs,
+        value: currentTabOne
+      }), /*#__PURE__*/_jsx(Button, {
+        onPress: randomizeCurrentTabOne,
+        children: "Select random item"
+      })]
+    }), /*#__PURE__*/_jsx(Example, {
+      overflow: "visible",
+      padding: gutter,
+      title: "Tab Navigation (with Default Tab)",
+      children: /*#__PURE__*/_jsx(TabNavigation, {
+        onChange: setCurrentTabTwo,
+        tabs: sampleTabs,
+        value: currentTabTwo
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      overflow: "visible",
+      padding: gutter,
+      title: "Tab Navigation (Secondary)",
+      children: /*#__PURE__*/_jsx(TabNavigation, {
+        onChange: setCurrentTabThree,
+        tabs: sampleTabs,
+        value: currentTabThree,
+        variant: "secondary"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Enum Value",
+      children: /*#__PURE__*/_jsx(TabNavigation, {
+        onChange: setCurrentTabFive,
+        tabs: enumTabs,
+        value: currentTabFive
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom Tab",
+      children: /*#__PURE__*/_jsx(TabNavigation, {
+        onChange: setCurrentTabFour,
+        tabs: someCustomTabs,
+        value: currentTabFour
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom Tabs",
+      children: /*#__PURE__*/_jsx(TabNavigation, {
+        Component: renderCustomTab,
+        onChange: setCurrentTabFour,
+        tabs: sampleTabs,
+        value: currentTabFour
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom Tabs with one override",
+      children: /*#__PURE__*/_jsx(TabNavigation, {
+        Component: renderAnotherCustomTab,
+        onChange: setCurrentTabFour,
+        tabs: someCustomTabs,
+        value: currentTabFour
+      })
+    }), /*#__PURE__*/_jsxs(Example, {
+      overflow: "visible",
+      padding: gutter,
+      title: "Tab Navigation with disabled tab",
+      children: [/*#__PURE__*/_jsx(TabNavigation, {
+        onChange: setCurrentTabOne,
+        tabs: sampleTabs.map((tab, index) => _extends({}, tab, {
+          disabled: index === 1
+        })),
+        value: currentTabOne
+      }), /*#__PURE__*/_jsx(Button, {
+        onPress: randomizeCurrentTabOne,
+        children: "Select random item"
+      })]
+    })]
+  });
+};
+export default TabNavigationScreen;

package/esm/tabs/__stories__/Tabs.stories.js

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { gutter } from '@coinbase/cds-common/tokens/sizing';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { VStack } from '../../layout/VStack';
+import { Text } from '../../typography/Text';
+import { TabNavigation } from '../TabNavigation';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const tabs = [{
+  id: 'first_item',
+  label: 'First item',
+  onPress: console.warn
+}, {
+  id: 'second_item',
+  label: 'Second item'
+}, {
+  id: 'third_item',
+  label: 'Third item',
+  onPress: console.warn
+}, {
+  id: 'fourth_item',
+  label: 'Fourth item'
+}, {
+  id: 'fifth_item',
+  label: 'Fifth item'
+}];
+
+// TODO update once _Tabs_ component is complete
+const TabScreen = () => {
+  const [activeTabOne, setActiveTabOne] = useState(tabs[0].id);
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsxs(Example, {
+      overflow: "visible",
+      padding: gutter,
+      title: "Tab System",
+      children: [/*#__PURE__*/_jsx(TabNavigation, {
+        onChange: setActiveTabOne,
+        tabs: tabs,
+        value: activeTabOne
+      }), /*#__PURE__*/_jsxs(VStack, {
+        alignItems: "center",
+        background: "bgAlternate",
+        justifyContent: "center",
+        paddingY: 6,
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "label1",
+          children: "Static preview"
+        }), /*#__PURE__*/_jsx(Text, {
+          color: "fgPrimary",
+          font: "title2",
+          children: activeTabOne
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(Example, {
+      overflow: "visible",
+      padding: gutter,
+      title: "Tab System (Secondary)",
+      children: [/*#__PURE__*/_jsx(TabNavigation, {
+        onChange: setActiveTabOne,
+        tabs: tabs,
+        value: activeTabOne,
+        variant: "secondary"
+      }), /*#__PURE__*/_jsxs(VStack, {
+        alignItems: "center",
+        background: "bgAlternate",
+        justifyContent: "center",
+        paddingY: 6,
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "label1",
+          children: "Static preview"
+        }), /*#__PURE__*/_jsx(Text, {
+          color: "fgPrimary",
+          font: "title2",
+          children: activeTabOne
+        })]
+      })]
+    })]
+  });
+};
+export default TabScreen;

package/esm/tabs/hooks/useDotAnimation.js

@@ -0,0 +1,48 @@
+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 { useCallback, useRef } from 'react';
+import { Animated } from 'react-native';
+import { animateDotOpacityConfig, animateDotWidthConfig, dotHidden, dotVisible } from '@coinbase/cds-common/animation/dot';
+import { getDotSize } from '@coinbase/cds-common/tokens/dot';
+import { convertMotionConfig } from '../../animation/convertMotionConfig';
+
+// opacity animation
+const opacityInConfig = convertMotionConfig(_extends({}, animateDotOpacityConfig, {
+  toValue: dotVisible,
+  fromValue: dotHidden
+}));
+const opacityOutConfig = convertMotionConfig(_extends({}, animateDotOpacityConfig, {
+  toValue: dotHidden,
+  fromValue: dotVisible
+}));
+
+// Y transform animation
+const scaleInConfig = convertMotionConfig(_extends({}, animateDotWidthConfig, {
+  toValue: getDotSize(),
+  fromValue: 0
+}));
+const scaleOutConfig = convertMotionConfig(_extends({}, animateDotWidthConfig, {
+  toValue: 0,
+  fromValue: getDotSize()
+}));
+export const useDotAnimation = () => {
+  const opacity = useRef(new Animated.Value(dotHidden)).current;
+  const width = useRef(new Animated.Value(dotHidden)).current;
+  const animateIn = useCallback(count => {
+    const params = _extends({}, scaleInConfig, {
+      toValue: getDotSize(count)
+    });
+    return Animated.parallel([Animated.timing(opacity, opacityInConfig), Animated.timing(width, params)]).start();
+  }, [opacity, width]);
+  const animateOut = useCallback(count => {
+    const params = _extends({}, scaleOutConfig, {
+      fromValue: getDotSize(count)
+    });
+    return Animated.parallel([Animated.timing(opacity, opacityOutConfig), Animated.timing(width, params)]).start();
+  }, [opacity, width]);
+  return {
+    opacity,
+    width,
+    animateIn,
+    animateOut
+  };
+};

package/esm/tabs/hooks/useTabIndicatorStyles.js

@@ -0,0 +1,24 @@
+import { animateTabIndicatorBaseSpec } from '@coinbase/cds-common/animation/tabs';
+import { useAnimatedTransition } from '../../hooks/useAnimatedTransition';
+export const useTabIndicatorStyles = _ref => {
+  let {
+    width,
+    x
+  } = _ref;
+  const animatedWidth = useAnimatedTransition(width, animateTabIndicatorBaseSpec);
+  const widthStyle = {
+    transform: [{
+      translateX: animatedWidth
+    }]
+  };
+  const animatedX = useAnimatedTransition(x, animateTabIndicatorBaseSpec);
+  const xStyle = {
+    transform: [{
+      translateX: animatedX
+    }]
+  };
+  return {
+    widthStyle,
+    xStyle
+  };
+};

package/esm/tabs/index.js

@@ -0,0 +1,5 @@
+export * from './SegmentedTabs';
+export * from './TabIndicator';
+export * from './TabLabel';
+export * from './TabNavigation';
+export * from './Tabs';

package/esm/tag/Tag.js

@@ -0,0 +1,48 @@
+const _excluded = ["children", "intent", "colorScheme", "background", "color", "alignItems", "justifyContent", "testID"];
+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); }
+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; }
+import React, { forwardRef, memo } from 'react';
+import { tagBorderRadiusMap, tagColorMap, tagFontMap, tagHorizontalSpacing } from '@coinbase/cds-common/tokens/tags';
+import { useTheme } from '../hooks/useTheme';
+import { Box } from '../layout';
+import { Text } from '../typography/Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+      children,
+      intent = 'informational',
+      colorScheme = 'blue',
+      background: customBackground,
+      color: customColor,
+      alignItems = 'center',
+      justifyContent = 'center',
+      testID = 'cds-tag'
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const {
+    background,
+    foreground
+  } = tagColorMap[intent][colorScheme];
+  const backgroundColor = "rgb(" + theme.spectrum[customBackground != null ? customBackground : background] + ")";
+  const color = "rgb(" + theme.spectrum[customColor != null ? customColor : foreground] + ")";
+  return /*#__PURE__*/_jsx(Box, _extends({
+    ref: forwardedRef,
+    alignItems: alignItems,
+    background: "bg",
+    borderRadius: tagBorderRadiusMap[intent],
+    dangerouslySetBackground: backgroundColor,
+    justifyContent: justifyContent,
+    paddingX: tagHorizontalSpacing[intent],
+    paddingY: 0.25,
+    testID: testID
+  }, props, {
+    children: /*#__PURE__*/_jsx(Text, {
+      dangerouslySetColor: color,
+      font: tagFontMap[intent],
+      numberOfLines: 1,
+      testID: testID + "--text",
+      children: children
+    })
+  }));
+}));

package/esm/tag/__figma__/Tag.figma.js

@@ -0,0 +1,78 @@
+const _excluded = ["children"],
+  _excluded2 = ["children"];
+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); }
+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; }
+import React from 'react';
+import { figma } from '@figma/code-connect';
+import { Tag } from '../Tag';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Tag, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=68%3A996', {
+  imports: ["import { Tag } from '@coinbase/cds-mobile/tag/Tag';"],
+  variant: {
+    intent: 'informational'
+  },
+  props: {
+    colorScheme: figma.enum('colorScheme', {
+      green: 'green',
+      purple: 'purple',
+      blue: 'blue',
+      yellow: 'yellow',
+      red: 'red',
+      gray: 'gray'
+    }),
+    children: figma.nestedProps('string.info tags', {
+      node: figma.enum('Ready-made', {
+        Custom: figma.string('string'),
+        'Most popular': figma.textContent('tag-label'),
+        New: figma.textContent('tag-label'),
+        'Needs review': figma.textContent('tag-label'),
+        'Not verified': figma.textContent('tag-label'),
+        Recommended: figma.textContent('tag-label')
+      })
+    })
+  },
+  example: _ref => {
+    let {
+        children
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    return /*#__PURE__*/_jsx(Tag, _extends({}, props, {
+      children: children.node
+    }));
+  }
+});
+figma.connect(Tag, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=68%3A996', {
+  imports: ["import { Tag } from '@coinbase/cds-mobile/tag/Tag';"],
+  variant: {
+    intent: 'promotional'
+  },
+  props: {
+    colorScheme: figma.enum('colorScheme', {
+      green: 'green',
+      purple: 'purple',
+      blue: 'blue',
+      yellow: 'yellow',
+      red: 'red',
+      gray: 'gray'
+    }),
+    children: figma.nestedProps('string.promo tags', {
+      node: figma.enum('Ready-made', {
+        Custom: figma.string('string'),
+        'Most popular': figma.textContent('tag-label'),
+        New: figma.textContent('tag-label'),
+        Recommended: figma.textContent('tag-label')
+      })
+    })
+  },
+  example: _ref2 => {
+    let {
+        children
+      } = _ref2,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+    return /*#__PURE__*/_jsx(Tag, _extends({
+      intent: "promotional"
+    }, props, {
+      children: children.node
+    }));
+  }
+});

package/esm/tag/__stories__/Tag.stories.js

@@ -0,0 +1,57 @@
+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 startCase from 'lodash/startCase';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Tag } from '../Tag';
+import { jsx as _jsx } from "react/jsx-runtime";
+const tagProps = {
+  intent: ['informational', 'promotional'],
+  colorScheme: ['green', 'purple', 'blue', 'yellow', 'red', 'gray']
+};
+const tagMap = tagProps.intent.map(intent => {
+  return tagProps.colorScheme.map(colorScheme => ({
+    intent,
+    colorScheme,
+    children: startCase(intent) + " " + colorScheme
+  }));
+}).flat();
+const tagStories = {
+  default: [{
+    children: 'Default tag',
+    colorScheme: 'blue'
+  }],
+  all: tagMap,
+  wildcard: [{
+    children: 'Atlanta',
+    background: 'blue100',
+    color: 'red10'
+  }, {
+    children: 'Los Angeles',
+    intent: 'promotional',
+    background: 'yellow30',
+    color: 'purple80'
+  }],
+  truncated: [{
+    children: 'Truncate this long long tag',
+    colorScheme: 'green',
+    maxWidth: 150
+  }, {
+    children: "Don't truncate this long long tag",
+    colorScheme: 'green'
+  }]
+};
+const TagScreen = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: Object.entries(tagStories).map(_ref => {
+      let [key, story] = _ref;
+      return /*#__PURE__*/_jsx(Example, {
+        inline: true,
+        title: startCase(key),
+        children: story.map((props, idx) => {
+          return /*#__PURE__*/_jsx(Tag, _extends({}, props), props.children + "-" + idx);
+        })
+      }, key);
+    })
+  });
+};
+export default TagScreen;

package/esm/themes/coinbaseDenseTheme.js

@@ -0,0 +1,122 @@
+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 { coinbaseTheme } from './coinbaseTheme';
+export const coinbaseDenseThemeId = 'coinbase-dense';
+
+/** @deprecated This theme was created to test backwards compatibility, it is not officially supported by CDS. Please copy it into your own repo and modify it as needed. Do not import it directly from CDS. */
+export const coinbaseDenseTheme = _extends({}, coinbaseTheme, {
+  id: coinbaseDenseThemeId,
+  space: {
+    '0': 0,
+    '0.25': 2,
+    '0.5': 4,
+    '0.75': 6,
+    '1': 8,
+    '1.5': 10,
+    '2': 12,
+    '3': 16,
+    '4': 20,
+    '5': 24,
+    '6': 28,
+    '7': 32,
+    '8': 36,
+    '9': 40,
+    '10': 44
+  },
+  iconSize: {
+    xs: 8,
+    s: 12,
+    m: 16,
+    l: 24
+  },
+  avatarSize: {
+    s: 16,
+    m: 20,
+    l: 24,
+    xl: 36,
+    xxl: 44,
+    xxxl: 48
+  },
+  controlSize: {
+    checkboxSize: 16,
+    radioSize: 16,
+    switchWidth: 42,
+    switchHeight: 24,
+    switchThumbSize: 22,
+    tileSize: 92
+  },
+  fontFamily: {
+    display1: 'CoinbaseDisplay-Regular',
+    display2: 'CoinbaseDisplay-Regular',
+    display3: 'CoinbaseDisplay-Regular',
+    title1: 'CoinbaseDisplay-Medium',
+    title2: 'CoinbaseDisplay-Regular',
+    title3: 'CoinbaseSans-Medium',
+    title4: 'CoinbaseSans-Regular',
+    headline: 'CoinbaseSans-Medium',
+    body: 'CoinbaseSans-Regular',
+    label1: 'CoinbaseText-Medium',
+    label2: 'CoinbaseText-Regular',
+    caption: 'CoinbaseText-Medium',
+    legal: 'CoinbaseText-Regular'
+  },
+  fontFamilyMono: {
+    display1: 'CoinbaseMono-Regular',
+    display2: 'CoinbaseMono-Regular',
+    display3: 'CoinbaseMono-Regular',
+    title1: 'CoinbaseMono-Medium',
+    title2: 'CoinbaseMono-Regular',
+    title3: 'CoinbaseMono-Medium',
+    title4: 'CoinbaseMono-Regular',
+    headline: 'CoinbaseMono-Medium',
+    body: 'CoinbaseMono-Regular',
+    label1: 'CoinbaseMono-Medium',
+    label2: 'CoinbaseMono-Regular',
+    caption: 'CoinbaseMono-Medium',
+    legal: 'CoinbaseMono-Regular'
+  },
+  fontSize: {
+    display1: 61,
+    display2: 45,
+    display3: 37,
+    title1: 25,
+    title2: 25,
+    title3: 17,
+    title4: 17,
+    headline: 14,
+    body: 14,
+    label1: 11,
+    label2: 11,
+    caption: 10,
+    legal: 10
+  },
+  fontWeight: {
+    display1: '400',
+    display2: '400',
+    display3: '400',
+    title1: '600',
+    title2: '400',
+    title3: '600',
+    title4: '400',
+    headline: '600',
+    body: '400',
+    label1: '600',
+    label2: '400',
+    caption: '600',
+    legal: '400'
+  },
+  lineHeight: {
+    display1: 68,
+    display2: 52,
+    display3: 44,
+    title1: 32,
+    title2: 32,
+    title3: 24,
+    title4: 24,
+    headline: 20,
+    body: 20,
+    label1: 16,
+    label2: 16,
+    caption: 12,
+    legal: 12
+  }
+});