@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/chips/__stories__/Chip.stories.js

@@ -0,0 +1,108 @@
+const _excluded = ["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 from 'react';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
+import { NoopFn } from '@coinbase/cds-common/utils/mockUtils';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Icon } from '../../icons';
+import { VStack } from '../../layout';
+import { RemoteImage } from '../../media';
+import { Text } from '../../typography/Text';
+import { Chip } from '../Chip';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const assetIconProps = {
+  height: 16,
+  shape: 'circle',
+  source: assets.eth.imageUrl,
+  width: 16
+};
+const ChipExamples = _ref => {
+  let {
+      label
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 1,
+    children: [/*#__PURE__*/_jsx(Chip, _extends({}, props, {
+      children: label != null ? label : /*#__PURE__*/_jsx(Text, {
+        font: "headline",
+        children: "Base"
+      })
+    })), /*#__PURE__*/_jsx(Chip, _extends({}, props, {
+      start: /*#__PURE__*/_jsx(RemoteImage, _extends({}, assetIconProps)),
+      children: label != null ? label : /*#__PURE__*/_jsx(Text, {
+        font: "headline",
+        children: "Start"
+      })
+    })), /*#__PURE__*/_jsx(Chip, _extends({}, props, {
+      end: /*#__PURE__*/_jsx(Icon, {
+        color: "fg",
+        name: "caretDown",
+        size: "s"
+      }),
+      start: /*#__PURE__*/_jsx(RemoteImage, _extends({}, assetIconProps)),
+      children: label != null ? label : /*#__PURE__*/_jsx(Text, {
+        font: "headline",
+        children: "End & Start"
+      })
+    })), /*#__PURE__*/_jsx(Chip, _extends({}, props, {
+      end: /*#__PURE__*/_jsx(Icon, {
+        color: "fg",
+        name: "filter",
+        size: "s"
+      }),
+      children: /*#__PURE__*/_jsx(Text, {
+        font: "headline",
+        children: "Filter 2"
+      })
+    })), /*#__PURE__*/_jsx(Chip, _extends({}, props, {
+      end: /*#__PURE__*/_jsx(Icon, {
+        color: "fg",
+        name: "caretDown",
+        size: "s"
+      }),
+      onPress: NoopFn,
+      start: /*#__PURE__*/_jsx(RemoteImage, _extends({}, assetIconProps)),
+      children: label != null ? label : /*#__PURE__*/_jsx(Text, {
+        font: "headline",
+        children: "Pressable"
+      })
+    })), /*#__PURE__*/_jsx(Chip, _extends({}, props, {
+      disabled: true,
+      end: /*#__PURE__*/_jsx(Icon, {
+        color: "fg",
+        name: "caretDown",
+        size: "s"
+      }),
+      onPress: NoopFn,
+      start: /*#__PURE__*/_jsx(RemoteImage, _extends({}, assetIconProps)),
+      children: label != null ? label : /*#__PURE__*/_jsx(Text, {
+        font: "headline",
+        children: "Disabled"
+      })
+    }))]
+  });
+};
+const ChipScreen = () => /*#__PURE__*/_jsxs(ExampleScreen, {
+  children: [/*#__PURE__*/_jsx(Example, {
+    title: "Default",
+    children: /*#__PURE__*/_jsx(ChipExamples, {})
+  }), /*#__PURE__*/_jsx(Example, {
+    title: "Inverted",
+    children: /*#__PURE__*/_jsx(ChipExamples, {
+      inverted: true
+    })
+  }), /*#__PURE__*/_jsx(Example, {
+    title: "Compact",
+    children: /*#__PURE__*/_jsx(ChipExamples, {
+      compact: true
+    })
+  }), /*#__PURE__*/_jsx(Example, {
+    title: "Long text",
+    children: /*#__PURE__*/_jsx(ChipExamples, {
+      label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget"
+    })
+  })]
+});
+export default ChipScreen;

package/esm/chips/__stories__/InputChip.stories.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 React from 'react';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
+import { NoopFn } from '@coinbase/cds-common/utils/mockUtils';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { RemoteImage } from '../../media';
+import { InputChip } from '../InputChip';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const assetIconProps = {
+  height: 16,
+  shape: 'circle',
+  source: assets.eth.imageUrl,
+  width: 16
+};
+const InputChipScreen = () => /*#__PURE__*/_jsxs(ExampleScreen, {
+  children: [/*#__PURE__*/_jsxs(Example, {
+    title: "Default",
+    children: [/*#__PURE__*/_jsx(InputChip, {
+      onPress: NoopFn,
+      value: "USD"
+    }), /*#__PURE__*/_jsx(InputChip, {
+      onPress: NoopFn,
+      start: /*#__PURE__*/_jsx(RemoteImage, _extends({}, assetIconProps)),
+      value: "USD"
+    }), /*#__PURE__*/_jsx(InputChip, {
+      disabled: true,
+      onPress: NoopFn,
+      start: /*#__PURE__*/_jsx(RemoteImage, _extends({}, assetIconProps)),
+      value: "USD"
+    })]
+  }), /*#__PURE__*/_jsxs(Example, {
+    title: "Long text",
+    children: [/*#__PURE__*/_jsx(InputChip, {
+      onPress: NoopFn,
+      value: "Lorem ipsum sit dolar amit"
+    }), /*#__PURE__*/_jsx(InputChip, {
+      onPress: NoopFn,
+      start: /*#__PURE__*/_jsx(RemoteImage, _extends({}, assetIconProps)),
+      value: "Lorem ipsum sit dolar amit"
+    }), /*#__PURE__*/_jsx(InputChip, {
+      disabled: true,
+      onPress: NoopFn,
+      start: /*#__PURE__*/_jsx(RemoteImage, _extends({}, assetIconProps)),
+      value: "Lorem ipsum sit dolar amit"
+    })]
+  })]
+});
+export default InputChipScreen;

package/esm/chips/__stories__/SelectChip.stories.js

@@ -0,0 +1,128 @@
+const _excluded = ["value", "sortOptions"];
+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, { useState } from 'react';
+import { loremIpsum } from '@coinbase/cds-common/internal/data/loremIpsum';
+import { SelectOption } from '../../controls';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Icon } from '../../icons';
+import { SelectChip } from '../SelectChip';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultSortOptions = ['Balance', 'Name', 'Asset Value'];
+const customSortOptions = [loremIpsum, ...defaultSortOptions];
+const customContentStyle = {
+  maxWidth: 300
+};
+const SelectChipExample = _ref => {
+  let {
+      value: defaultValue,
+      sortOptions = defaultSortOptions
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const [value, setValue] = useState(defaultValue);
+  return /*#__PURE__*/_jsx(SelectChip, _extends({
+    active: value !== undefined,
+    onChange: setValue,
+    value: value
+  }, props, {
+    children: sortOptions.map(option => /*#__PURE__*/_jsx(SelectOption, {
+      title: option,
+      value: option
+    }, option))
+  }));
+};
+const ObjectValueModel = () => {
+  const options = [{
+    label: 'Price',
+    title: 'Price (High to Low)',
+    value: 'price-high-low',
+    iconName: 'arrowDown'
+  }, {
+    label: 'Price',
+    title: 'Price (Low to High)',
+    value: 'price-low-high',
+    iconName: 'arrowUp'
+  }, {
+    label: 'Market Cap',
+    title: 'Market Cap (High to Low)',
+    value: 'market-cap-high-low',
+    iconName: 'arrowDown'
+  }, {
+    label: 'Market Cap',
+    title: 'Market Cap (Low to High)',
+    value: 'market-cap-low-high',
+    iconName: 'arrowUp'
+  }];
+  const [value, setValue] = useState(options[0]);
+  const handleChange = newValue => {
+    var _options$find;
+    const getOption = (_options$find = options.find(_ref2 => {
+      let {
+        value
+      } = _ref2;
+      return value === newValue;
+    })) != null ? _options$find : options[0];
+    setValue(getOption);
+  };
+  return /*#__PURE__*/_jsx(SelectChip, {
+    active: value !== undefined,
+    end: /*#__PURE__*/_jsx(Icon, {
+      color: "fg",
+      name: value.iconName,
+      size: "s"
+    }),
+    onChange: newValue => handleChange(newValue),
+    value: value.value,
+    valueLabel: value.label,
+    children: options.map(_ref3 => {
+      let {
+        title,
+        value
+      } = _ref3;
+      return /*#__PURE__*/_jsx(SelectOption, {
+        title: title,
+        value: value
+      }, value);
+    })
+  });
+};
+const SelectChipScreen = () => /*#__PURE__*/_jsxs(ExampleScreen, {
+  children: [/*#__PURE__*/_jsxs(Example, {
+    title: "Default",
+    children: [/*#__PURE__*/_jsx(SelectChipExample, {
+      placeholder: "Sort"
+    }), /*#__PURE__*/_jsx(SelectChipExample, {
+      placeholder: "Sort",
+      value: "Balance"
+    })]
+  }), /*#__PURE__*/_jsxs(Example, {
+    title: "Custom end node",
+    children: [/*#__PURE__*/_jsx(SelectChipExample, {
+      end: /*#__PURE__*/_jsx(Icon, {
+        color: "fg",
+        name: "filter",
+        size: "s"
+      }),
+      placeholder: "Filter"
+    }), /*#__PURE__*/_jsx(SelectChipExample, {
+      end: /*#__PURE__*/_jsx(Icon, {
+        color: "fg",
+        name: "filter",
+        size: "s"
+      }),
+      placeholder: "Filter",
+      value: "Balance"
+    })]
+  }), /*#__PURE__*/_jsx(Example, {
+    title: "Value Object Model",
+    children: /*#__PURE__*/_jsx(ObjectValueModel, {})
+  }), /*#__PURE__*/_jsx(Example, {
+    title: "Custom Style",
+    children: /*#__PURE__*/_jsx(SelectChipExample, {
+      contentStyle: customContentStyle,
+      sortOptions: customSortOptions,
+      value: customSortOptions[0]
+    })
+  })]
+});
+export default SelectChipScreen;

package/esm/chips/__stories__/TabbedChips.stories.js

@@ -0,0 +1,65 @@
+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, { useState } from 'react';
+import { longTextTabs, sampleTabs } from '@coinbase/cds-common/internal/data/tabs';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { TabbedChips } from '../TabbedChips';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultTabs = sampleTabs.slice(0, 5);
+const enumTabs = [{
+  id: 'one',
+  label: 'One'
+}, {
+  id: 'two',
+  label: 'Two'
+}, {
+  id: 'three',
+  label: 'Three'
+}];
+const Demo = _ref => {
+  let {
+    tabs = defaultTabs
+  } = _ref;
+  const [value, setValue] = useState(tabs[0].id);
+  return /*#__PURE__*/_jsx(TabbedChips, {
+    onChange: setValue,
+    tabs: tabs,
+    value: value
+  });
+};
+const EnumDemo = () => {
+  const [value, setValue] = useState(enumTabs[0].id);
+  return /*#__PURE__*/_jsx(TabbedChips, {
+    onChange: setValue,
+    tabs: enumTabs,
+    value: value
+  });
+};
+const TabbedChipsScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Default",
+      children: /*#__PURE__*/_jsx(Demo, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Lots of tabs",
+      children: /*#__PURE__*/_jsx(Demo, {
+        tabs: sampleTabs
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Long text tabs",
+      children: /*#__PURE__*/_jsx(Demo, {
+        tabs: longTextTabs
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Disabled tab",
+      children: /*#__PURE__*/_jsx(Demo, {
+        tabs: sampleTabs.map((tab, index) => _extends({}, tab, {
+          disabled: index === 1
+        }))
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With enum values",
+      children: /*#__PURE__*/_jsx(EnumDemo, {})
+    })]
+  });
+};
+export default TabbedChipsScreen;

package/esm/coachmark/Coachmark.js

@@ -0,0 +1,73 @@
+const _excluded = ["title", "content", "checkbox", "media", "onClose", "action", "width", "closeButtonAccessibilityLabel", "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 { useWindowDimensions } from 'react-native';
+import { IconButton } from '../buttons';
+import { useTheme } from '../hooks/useTheme';
+import { Box, HStack, VStack } from '../layout';
+import { InvertedThemeProvider } from '../system';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Coachmark = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      title,
+      content,
+      checkbox,
+      media,
+      onClose,
+      action,
+      width,
+      closeButtonAccessibilityLabel,
+      testID
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const {
+    width: windowWidth
+  } = useWindowDimensions();
+  const paddingX = theme.space[2];
+  return /*#__PURE__*/_jsx(InvertedThemeProvider, {
+    children: /*#__PURE__*/_jsxs(VStack, _extends({}, props, {
+      ref: ref,
+      borderRadius: 400,
+      maxWidth: windowWidth - paddingX * 2,
+      overflow: "hidden",
+      testID: testID,
+      width: width,
+      children: [media, /*#__PURE__*/_jsx(VStack, {
+        background: "bg",
+        padding: 2,
+        children: /*#__PURE__*/_jsxs(VStack, {
+          gap: 2,
+          children: [/*#__PURE__*/_jsxs(VStack, {
+            gap: 0.5,
+            children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+              accessibilityRole: "header",
+              font: "headline",
+              children: title
+            }) : title, typeof content === 'string' ? /*#__PURE__*/_jsx(Text, {
+              font: "body",
+              children: content
+            }) : content]
+          }), /*#__PURE__*/_jsxs(HStack, {
+            alignItems: "center",
+            justifyContent: checkbox ? 'space-between' : 'flex-end',
+            children: [checkbox, action]
+          })]
+        })
+      }), !!onClose && /*#__PURE__*/_jsx(Box, {
+        padding: 1,
+        position: "absolute",
+        right: 0,
+        top: 0,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          transparent: true,
+          accessibilityLabel: closeButtonAccessibilityLabel,
+          name: "close",
+          onPress: onClose
+        })
+      })]
+    }))
+  });
+}));

package/esm/coachmark/__figma__/Coachmark.figma.js

@@ -0,0 +1,41 @@
+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 { Image } from 'react-native';
+import { figma } from '@figma/code-connect';
+import { Button } from '../../buttons';
+import { Checkbox } from '../../controls';
+import { Coachmark } from '../Coachmark';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Coachmark, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=24997-8568', {
+  imports: ["import { Coachmark } from '@coinbase/cds-mobile/tour/Coachmark';"],
+  props: {
+    // onClose: figma.boolean('dismissable', {
+    //   true: () => {},
+    //   false: undefined,
+    // }),
+    media: figma.boolean('show media', {
+      true: /*#__PURE__*/_jsx(Image, {
+        alt: "",
+        src: ""
+      }),
+      false: undefined
+    }),
+    action: figma.boolean('action bar', {
+      true: /*#__PURE__*/_jsx(Button, {
+        compact: true,
+        variant: "secondary",
+        children: "Button"
+      }),
+      false: undefined
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(Coachmark, _extends({
+    checkbox: /*#__PURE__*/_jsx(Checkbox, {
+      checked: false,
+      onChange: () => {},
+      children: "Checkbox label"
+    }),
+    content: "Add up to 3 lines of body copy. Deliver your message with clarity and impact",
+    title: "Headline"
+  }, props))
+});

package/esm/coachmark/__stories__/Coachmark.stories.js

@@ -0,0 +1,107 @@
+import React, { useCallback, useState } from 'react';
+import { Image } from 'react-native';
+import { ethBackground } from '@coinbase/cds-common/internal/data/assets';
+import { noop } from '@coinbase/cds-utils';
+import { Button } from '../../buttons';
+import { Checkbox } from '../../controls';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { SpotRectangle } from '../../illustrations';
+import { Box, VStack } from '../../layout';
+import { Text } from '../../typography/Text';
+import { ProgressBar } from '../../visualizations';
+import { Coachmark } from '../Coachmark';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CoachmarkExamples = () => {
+  const [checked, setChecked] = useState(false);
+  const toggleChecked = useCallback(() => setChecked(prevChecked => !prevChecked), []);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 3,
+    children: [/*#__PURE__*/_jsx(Coachmark, {
+      action: /*#__PURE__*/_jsx(Button, {
+        children: "Next"
+      }),
+      content: "Add up to 3 lines of body copy. Deliver your message with clarity and impact",
+      title: "Basic"
+    }), /*#__PURE__*/_jsx(Coachmark, {
+      action: /*#__PURE__*/_jsx(Button, {
+        children: "Next"
+      }),
+      checkbox: /*#__PURE__*/_jsx(Checkbox, {
+        checked: checked,
+        onChange: toggleChecked,
+        children: "Don't show again"
+      }),
+      content: "Add up to 3 lines of body copy. Deliver your message with clarity and impact",
+      title: "With checkbox"
+    }), /*#__PURE__*/_jsx(Coachmark, {
+      action: /*#__PURE__*/_jsx(Button, {
+        children: "Next"
+      }),
+      closeButtonAccessibilityLabel: "Close",
+      content: "Add up to 3 lines of body copy. Deliver your message with clarity and impact",
+      onClose: noop,
+      title: "Dismissible"
+    }), /*#__PURE__*/_jsx(Coachmark, {
+      action: /*#__PURE__*/_jsx(Button, {
+        children: "Next"
+      }),
+      closeButtonAccessibilityLabel: "Close",
+      content: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "caption",
+          children: "50%"
+        }), /*#__PURE__*/_jsx(ProgressBar, {
+          progress: 0.5
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "Add up to 3 lines of body copy. Deliver your message with clarity and impact"
+        })]
+      }),
+      media: /*#__PURE__*/_jsx(Image, {
+        accessibilityIgnoresInvertColors: true,
+        source: {
+          uri: ethBackground
+        },
+        style: {
+          width: '100%',
+          height: 150
+        }
+      }),
+      onClose: noop,
+      title: "Rich Content"
+    }), /*#__PURE__*/_jsx(Coachmark, {
+      action: /*#__PURE__*/_jsx(Button, {
+        children: "Next"
+      }),
+      content: "This SpotRectangle is in a Box with bgPrimary background.",
+      media: /*#__PURE__*/_jsx(Box, {
+        alignItems: "center",
+        background: "bgPrimary",
+        justifyContent: "center",
+        padding: 4,
+        children: /*#__PURE__*/_jsx(SpotRectangle, {
+          name: "defiEarn"
+        })
+      }),
+      title: "With a SpotRectangle"
+    }), /*#__PURE__*/_jsx(Coachmark, {
+      action: /*#__PURE__*/_jsx(Button, {
+        children: "Done"
+      }),
+      content: "Add up to 3 lines of body copy. Deliver your message with clarity and impact",
+      title: "Custom width",
+      width: 250
+    })]
+  });
+};
+const CoachmarkScreen = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "Coachmark",
+      children: /*#__PURE__*/_jsx(CoachmarkExamples, {})
+    })
+  });
+};
+export default CoachmarkScreen;