@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/tabs/Tabs.js

@@ -0,0 +1,143 @@
+const _excluded = ["id", "registerRef"],
+  _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "activeTab", "disabled", "onChange", "role", "position", "alignSelf", "opacity"],
+  _excluded3 = ["id", "Component", "disabled"],
+  _excluded4 = ["activeTabRect", "position"];
+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, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { View } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { useRefMap } from '@coinbase/cds-common/hooks/useRefMap';
+import { TabsContext } from '@coinbase/cds-common/tabs/TabsContext';
+import { useTabs } from '@coinbase/cds-common/tabs/useTabs';
+import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
+import { defaultRect } from '@coinbase/cds-common/types/Rect';
+import { Box, HStack } from '../layout';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedBox = Animated.createAnimatedComponent(Box);
+const TabContainer = _ref => {
+  let {
+      id,
+      registerRef
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const refCallback = useCallback(ref => ref && registerRef(id, ref), [id, registerRef]);
+  return /*#__PURE__*/_jsx(View, _extends({
+    ref: refCallback
+  }, props));
+};
+export const tabsSpringConfig = {
+  mass: 0.15,
+  stiffness: 160,
+  damping: 10,
+  overshootClamping: true
+};
+const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+      tabs,
+      TabComponent,
+      TabsActiveIndicatorComponent,
+      activeBackground,
+      activeTab,
+      disabled,
+      onChange,
+      role = 'tablist',
+      position = 'relative',
+      alignSelf = 'flex-start',
+      opacity
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  const tabsContainerRef = useRef(null);
+  useImperativeHandle(ref, () => tabsContainerRef.current, []); // merge internal ref to forwarded ref
+
+  const refMap = useRefMap();
+  const api = useTabs({
+    tabs,
+    activeTab,
+    disabled,
+    onChange
+  });
+  const [activeTabRect, setActiveTabRect] = useState(defaultRect);
+  const previousActiveRef = useRef(activeTab);
+  const updateActiveTabRect = useCallback(() => {
+    const activeTabRef = activeTab ? refMap.getRef(activeTab.id) : null;
+    if (!activeTabRef || !tabsContainerRef.current) return;
+    activeTabRef.measureLayout(tabsContainerRef.current, (x, y, width, height) => setActiveTabRect({
+      x,
+      y,
+      width,
+      height
+    }));
+  }, [activeTab, refMap]);
+  if (previousActiveRef.current !== activeTab) {
+    previousActiveRef.current = activeTab;
+    updateActiveTabRect();
+  }
+  const tabComponents = useMemo(() => tabs.map(_ref3 => {
+    let {
+        id,
+        Component: CustomTabComponent,
+        disabled: tabDisabled
+      } = _ref3,
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+    const RenderedTab = CustomTabComponent != null ? CustomTabComponent : TabComponent;
+    return /*#__PURE__*/_jsx(TabContainer, {
+      id: id,
+      registerRef: refMap.registerRef,
+      children: /*#__PURE__*/_jsx(RenderedTab, _extends({
+        disabled: tabDisabled,
+        id: id
+      }, props))
+    }, id);
+  }), [tabs, TabComponent, refMap]);
+  return /*#__PURE__*/_jsx(HStack, _extends({
+    ref: tabsContainerRef,
+    alignSelf: alignSelf,
+    onLayout: updateActiveTabRect,
+    opacity: opacity != null ? opacity : disabled ? accessibleOpacityDisabled : 1,
+    position: position,
+    role: role
+  }, props, {
+    children: /*#__PURE__*/_jsxs(TabsContext.Provider, {
+      value: api,
+      children: [/*#__PURE__*/_jsx(TabsActiveIndicatorComponent, {
+        activeTabRect: activeTabRect,
+        background: activeBackground
+      }), tabComponents]
+    })
+  }));
+}));
+TabsComponent.displayName = 'Tabs';
+export const Tabs = TabsComponent;
+export const TabsActiveIndicator = _ref4 => {
+  let {
+      activeTabRect,
+      position = 'absolute'
+    } = _ref4,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+  const previousActiveTabRect = useRef(activeTabRect);
+  const newActiveTabRect = {
+    x: activeTabRect.x,
+    width: activeTabRect.width
+  };
+  const animatedTabRect = useSharedValue(newActiveTabRect);
+  const isFirstRenderWithWidth = previousActiveTabRect.current.width === 0 && activeTabRect.width > 0;
+  if (previousActiveTabRect.current !== activeTabRect) {
+    previousActiveTabRect.current = activeTabRect;
+    animatedTabRect.value = isFirstRenderWithWidth ? newActiveTabRect : withSpring(newActiveTabRect, tabsSpringConfig);
+  }
+  const animatedBoxStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: animatedTabRect.value.x
+    }],
+    width: animatedTabRect.value.width
+  }), [animatedTabRect]);
+  return /*#__PURE__*/_jsx(AnimatedBox, _extends({
+    animated: true,
+    height: activeTabRect.height,
+    position: position,
+    role: "none",
+    style: animatedBoxStyle,
+    testID: "tabs-active-indicator"
+  }, props));
+};

package/esm/tabs/__figma__/SegmentedTabs.figma.js

@@ -0,0 +1,79 @@
+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 { SegmentedTab } from '../SegmentedTab';
+import { SegmentedTabs } from '../SegmentedTabs';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(SegmentedTabs, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=20859-2979&m=dev', {
+  imports: ["import { SegmentedTabs } from '@coinbase/cds-mobile/tabs/SegmentedTabs';"],
+  variant: {
+    tabs: '2 tabs'
+  },
+  props: {
+    activeTab: figma.enum('active state', {
+      left: {
+        id: '1',
+        label: 'Title'
+      },
+      right: {
+        id: '2',
+        label: 'Title'
+      }
+    }),
+    disabled: figma.boolean('disabled')
+  },
+  example: props => /*#__PURE__*/_jsx(SegmentedTabs, _extends({
+    onChange: () => {},
+    tabs: [{
+      id: '1',
+      label: 'Title'
+    }, {
+      id: '2',
+      label: 'Title'
+    }]
+  }, props))
+});
+figma.connect(SegmentedTabs, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=20859-2979&m=dev', {
+  imports: ["import { SegmentedTabs } from '@coinbase/cds-mobile/tabs/SegmentedTabs';"],
+  variant: {
+    tabs: '3 tabs'
+  },
+  props: {
+    activeTab: figma.enum('active state', {
+      left: {
+        id: '1',
+        label: 'Title'
+      },
+      center: {
+        id: '2',
+        label: 'Title'
+      },
+      right: {
+        id: '3',
+        label: 'Title'
+      }
+    }),
+    disabled: figma.boolean('disabled')
+  },
+  example: props => /*#__PURE__*/_jsx(SegmentedTabs, _extends({
+    onChange: () => {},
+    tabs: [{
+      id: '1',
+      label: 'Title'
+    }, {
+      id: '2',
+      label: 'Title'
+    }, {
+      id: '3',
+      label: 'Title'
+    }]
+  }, props))
+});
+figma.connect(SegmentedTabs, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=20859-3073&m=dev', {
+  imports: ["import { SegmentedTab } from '@coinbase/cds-mobile/tabs/SegmentedTab';"],
+  props: {
+    id: figma.string('title'),
+    label: figma.string('title')
+  },
+  example: props => /*#__PURE__*/_jsx(SegmentedTab, _extends({}, props))
+});

package/esm/tabs/__figma__/TabNavigation.figma.js

@@ -0,0 +1,83 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useMemo, useState } from 'react';
+import { figma } from '@figma/code-connect';
+import { TabNavigation } from '../TabNavigation';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(TabNavigation, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=240-8930&m=dev', {
+  imports: ["import { TabNavigation } from '@coinbase/cds-mobile/tabs/TabNavigation';"],
+  props: {
+    tab1: figma.nestedProps('1 Primary Tab', {
+      count: figma.boolean('dot count', {
+        true: 1,
+        false: undefined
+      }),
+      label: figma.textContent('Label'),
+      id: figma.textContent('Label')
+    }),
+    tab2: figma.nestedProps('2 Primary Tab', {
+      count: figma.boolean('dot count', {
+        true: 1,
+        false: undefined
+      }),
+      label: figma.textContent('Label'),
+      id: figma.textContent('Label')
+    }),
+    tab3: figma.nestedProps('3 Primary Tab', {
+      count: figma.boolean('dot count', {
+        true: 1,
+        false: undefined
+      }),
+      label: figma.textContent('Label'),
+      id: figma.textContent('Label')
+    }),
+    tab4: figma.nestedProps('4 Primary Tab', {
+      count: figma.boolean('dot count', {
+        true: 1,
+        false: undefined
+      }),
+      label: figma.textContent('Label'),
+      id: figma.textContent('Label')
+    }),
+    tab5: figma.nestedProps('5 Primary Tab', {
+      count: figma.boolean('dot count', {
+        true: 1,
+        false: undefined
+      }),
+      label: figma.textContent('Label'),
+      id: figma.textContent('Label')
+    }),
+    tab6: figma.nestedProps('6 Primary Tab', {
+      count: figma.boolean('dot count', {
+        true: 1,
+        false: undefined
+      }),
+      label: figma.textContent('Label'),
+      id: figma.textContent('Label')
+    })
+  },
+  example: () => {
+    const tabs = useMemo(() => [{
+      id: 'first_primary_tab',
+      label: 'Primary tab',
+      count: 1
+    }, {
+      id: 'second_primary_tab',
+      label: 'Primary tab'
+    }, {
+      id: 'third_primary_tab',
+      label: 'Primary tab'
+    }, {
+      id: 'fourth_primary_tab',
+      label: 'Primary tab'
+    }, {
+      id: 'fifth_primary_tab',
+      label: 'Primary tab'
+    }], []);
+    const [value, setValue] = useState(tabs[0].id);
+    return /*#__PURE__*/_jsx(TabNavigation, {
+      onChange: setValue,
+      tabs: tabs,
+      value: value
+    });
+  }
+});

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

@@ -0,0 +1,209 @@
+const _excluded = ["title", "defaultActiveTab"];
+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, useState } from 'react';
+import { Pressable, ScrollView } from 'react-native';
+import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Box } from '../../layout';
+import { Text } from '../../typography/Text';
+import { SegmentedTab } from '../SegmentedTab';
+import { SegmentedTabs } from '../SegmentedTabs';
+import { TabsActiveIndicator } from '../Tabs';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CustomActiveIndicator = _ref => {
+  let {
+    activeTabRect
+  } = _ref;
+  return /*#__PURE__*/_jsx(TabsActiveIndicator, {
+    activeTabRect: activeTabRect,
+    background: "bgOverlay"
+  });
+};
+const CustomSegmentedTab = props => /*#__PURE__*/_jsx(SegmentedTab, _extends({}, props, {
+  activeColor: "accentBoldPurple",
+  color: "fgPrimary"
+}));
+const AnotherCustomSegmentedTab = _ref2 => {
+  let {
+    id,
+    label,
+    disabled
+  } = _ref2;
+  const {
+    activeTab,
+    updateActiveTab,
+    disabled: tabsDisabled
+  } = useTabsContext();
+  const isActive = (activeTab == null ? void 0 : activeTab.id) === id;
+  const handlePress = useCallback(() => {
+    updateActiveTab(id);
+  }, [id, updateActiveTab]);
+  return /*#__PURE__*/_jsx(Pressable, {
+    accessibilityRole: "button",
+    "aria-pressed": isActive,
+    disabled: disabled || tabsDisabled,
+    onPress: handlePress,
+    children: /*#__PURE__*/_jsx(Box, {
+      alignItems: "center",
+      paddingX: 3,
+      paddingY: 1,
+      children: typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
+        color: isActive ? 'fgPositive' : 'fgNegative',
+        ellipsize: "tail",
+        font: "label2",
+        children: label
+      }) : label
+    })
+  });
+};
+const basicSegments = [{
+  id: 'buy',
+  label: 'Buy'
+}, {
+  id: 'sell',
+  label: 'Sell'
+}, {
+  id: 'convert',
+  label: 'Convert'
+}];
+const longSegments = [{
+  id: 'buy',
+  label: 'Buy'
+}, {
+  id: 'sell',
+  label: 'Sell'
+}, {
+  id: 'convert',
+  label: 'Convert'
+}, {
+  id: 'hello',
+  label: 'Hello'
+}, {
+  id: 'world',
+  label: 'World'
+}, {
+  id: 'something',
+  label: 'Something'
+}, {
+  id: 'carrots',
+  label: 'Carrots'
+}, {
+  id: 'bitcoin',
+  label: 'Bitcoin'
+}];
+const basicSegmentsWithDisabled = [{
+  id: 'buy',
+  label: 'Buy'
+}, {
+  id: 'sell',
+  label: 'Sell',
+  disabled: true
+}, {
+  id: 'convert',
+  label: 'Convert'
+}];
+const enumSegments = [{
+  id: 'buy',
+  label: 'Buy'
+}, {
+  id: 'sell',
+  label: 'Sell'
+}, {
+  id: 'convert',
+  label: 'Convert'
+}];
+const customSegments = [{
+  id: 'buy',
+  label: 'Buy',
+  Component: CustomSegmentedTab
+}, {
+  id: 'sell',
+  label: 'Sell'
+}, {
+  id: 'convert',
+  label: 'Convert'
+}];
+const SegmentedTabsExample = _ref3 => {
+  let {
+      title,
+      defaultActiveTab
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded);
+  const [activeTab, updateActiveTab] = useState(defaultActiveTab);
+  const handleChange = useCallback(activeTab => updateActiveTab(activeTab), []);
+  return /*#__PURE__*/_jsx(Example, {
+    title: title,
+    children: /*#__PURE__*/_jsx(SegmentedTabs, _extends({}, props, {
+      accessibilityLabel: "Switch token action views",
+      activeTab: activeTab,
+      onChange: handleChange
+    }))
+  });
+};
+const SegmentedTabsScreen = () => /*#__PURE__*/_jsxs(ExampleScreen, {
+  children: [/*#__PURE__*/_jsx(SegmentedTabsExample, {
+    defaultActiveTab: basicSegments[0],
+    tabs: basicSegments,
+    title: "Basic"
+  }), /*#__PURE__*/_jsx(SegmentedTabsExample, {
+    defaultActiveTab: basicSegments[0],
+    tabs: basicSegments.slice(0, 2),
+    title: "Two Tabs"
+  }), /*#__PURE__*/_jsx(SegmentedTabsExample, {
+    defaultActiveTab: longSegments[0],
+    tabs: longSegments,
+    title: "Long"
+  }), /*#__PURE__*/_jsx(SegmentedTabsExample, {
+    defaultActiveTab: basicSegments[1],
+    tabs: basicSegments,
+    title: "Initial Value"
+  }), /*#__PURE__*/_jsx(SegmentedTabsExample, {
+    defaultActiveTab: null,
+    tabs: basicSegments,
+    title: "No Initial Value"
+  }), /*#__PURE__*/_jsx(SegmentedTabsExample, {
+    disabled: true,
+    defaultActiveTab: basicSegments[0],
+    tabs: basicSegments,
+    title: "Disabled"
+  }), /*#__PURE__*/_jsx(SegmentedTabsExample, {
+    defaultActiveTab: basicSegmentsWithDisabled[0],
+    tabs: basicSegmentsWithDisabled,
+    title: "Disabled Segment"
+  }), /*#__PURE__*/_jsx(SegmentedTabsExample, {
+    defaultActiveTab: enumSegments[0],
+    tabs: enumSegments,
+    title: "Enum Value"
+  }), /*#__PURE__*/_jsx(SegmentedTabsExample, {
+    defaultActiveTab: customSegments[0],
+    tabs: customSegments,
+    title: "Custom Single Segment"
+  }), /*#__PURE__*/_jsx(SegmentedTabsExample, {
+    TabComponent: AnotherCustomSegmentedTab,
+    TabsActiveIndicatorComponent: CustomActiveIndicator,
+    borderRadius: 0,
+    defaultActiveTab: basicSegments[0],
+    tabs: basicSegments,
+    title: "Custom Single Segment"
+  }), /*#__PURE__*/_jsx(ScrollView, {
+    horizontal: true,
+    showsHorizontalScrollIndicator: false,
+    children: /*#__PURE__*/_jsx(SegmentedTabsExample, {
+      defaultActiveTab: longSegments[4],
+      tabs: longSegments,
+      title: "Scrolling"
+    })
+  }), /*#__PURE__*/_jsx(SegmentedTabsExample, {
+    defaultActiveTab: basicSegments[0],
+    style: {
+      transform: [{
+        scale: 0.7
+      }],
+      transformOrigin: 'top left'
+    },
+    tabs: basicSegments,
+    title: "Scaled"
+  })]
+});
+export default SegmentedTabsScreen;

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

@@ -0,0 +1,34 @@
+import React, { useCallback, useState } from 'react';
+import { gutter } from '@coinbase/cds-common/tokens/sizing';
+import { Button } from '../../buttons';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { VStack } from '../../layout';
+import { TabIndicator } from '../TabIndicator';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getRandomNumber = () => Math.random() * 100 + 100;
+const TabIndicatorScreen = () => {
+  const [width, setWidth] = useState(120);
+  const [x, setX] = useState(120);
+  const handlePress = useCallback(() => {
+    setWidth(getRandomNumber());
+    setX(getRandomNumber());
+  }, []);
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      overflow: "visible",
+      padding: gutter,
+      title: "Tab Indicator",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Button, {
+          onPress: handlePress,
+          children: "Randomize"
+        }), /*#__PURE__*/_jsx(TabIndicator, {
+          width: width,
+          x: x
+        })]
+      })
+    })
+  });
+};
+export default TabIndicatorScreen;

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { gutter } from '@coinbase/cds-common/tokens/sizing';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { HStack } from '../../layout/HStack';
+import { TabLabel } from '../TabLabel';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TabLabelScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      overflow: "visible",
+      padding: gutter,
+      title: "Tab Label (defaults to primary)",
+      children: /*#__PURE__*/_jsxs(HStack, {
+        gap: 4,
+        children: [/*#__PURE__*/_jsx(TabLabel, {
+          active: true,
+          children: "Active label"
+        }), /*#__PURE__*/_jsx(TabLabel, {
+          children: "Inactive label"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      overflow: "visible",
+      padding: gutter,
+      title: "Tab Label (primary)",
+      children: /*#__PURE__*/_jsxs(HStack, {
+        gap: 4,
+        children: [/*#__PURE__*/_jsx(TabLabel, {
+          active: true,
+          variant: "primary",
+          children: "Active label"
+        }), /*#__PURE__*/_jsx(TabLabel, {
+          variant: "primary",
+          children: "Inactive label"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      overflow: "visible",
+      padding: gutter,
+      title: "Tab Label (secondary)",
+      children: /*#__PURE__*/_jsxs(HStack, {
+        gap: 4,
+        children: [/*#__PURE__*/_jsx(TabLabel, {
+          active: true,
+          variant: "secondary",
+          children: "Active label"
+        }), /*#__PURE__*/_jsx(TabLabel, {
+          variant: "secondary",
+          children: "Inactive label"
+        })]
+      })
+    })]
+  });
+};
+export default TabLabelScreen;