@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/controls/__stories__/Select.stories.js

@@ -0,0 +1,422 @@
+const _excluded = ["trayTitle", "hasDescription", "hideHandleBar"],
+  _excluded2 = ["trayTitle", "hasDescription", "hideHandleBar"],
+  _excluded3 = ["trayTitle", "hasDescription"];
+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 { ScrollView } from 'react-native';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
+import { DotSymbol } from '../../dots';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Box, HStack, VStack } from '../../layout';
+import { RemoteImage } from '../../media';
+import { Tray } from '../../overlays/tray/Tray';
+import { InputIcon } from '../InputIcon';
+import { Select } from '../Select';
+import { SelectOption } from '../SelectOption';
+import { TextInput } from '../TextInput';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const assetKeys = Object.keys(assets);
+const exampleOptions = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6'];
+const exampleLongOptions = ['This is a very long text. This is a very long text. This is a very long text. ', 'This is a long text. This is a very long text. This is a very long text. ', 'This is a text. This is a very long text. This is a very long text. '];
+const DefaultSelect = _ref => {
+  let {
+      trayTitle,
+      hasDescription,
+      hideHandleBar
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const [selectedValue, setValue] = useState();
+  const openTray = useCallback(() => setIsTrayVisible(true), []);
+  const closeTray = useCallback(() => setIsTrayVisible(false), []);
+  return /*#__PURE__*/_jsx(Select, _extends({
+    onChange: setValue,
+    onPress: openTray,
+    value: selectedValue
+  }, props, {
+    children: isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      hideHandleBar: hideHandleBar,
+      onCloseComplete: closeTray,
+      testID: "select-input-tray",
+      title: trayTitle,
+      children: _ref2 => {
+        let {
+          handleClose
+        } = _ref2;
+        return exampleOptions.map(option => /*#__PURE__*/_jsx(SelectOption, {
+          description: hasDescription ? 'Description' : undefined,
+          onPress: handleClose,
+          title: option,
+          value: option
+        }, option));
+      }
+    })
+  }));
+};
+const LongTextSelect = _ref3 => {
+  let {
+      trayTitle,
+      hasDescription,
+      hideHandleBar
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const [selectedValue, setValue] = useState(exampleLongOptions[0]);
+  const openTray = useCallback(() => setIsTrayVisible(true), []);
+  const closeTray = useCallback(() => setIsTrayVisible(false), []);
+  return /*#__PURE__*/_jsx(Select, _extends({
+    onChange: setValue,
+    onPress: openTray,
+    value: selectedValue
+  }, props, {
+    children: isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      hideHandleBar: hideHandleBar,
+      onCloseComplete: closeTray,
+      testID: "select-input-tray",
+      title: trayTitle,
+      children: _ref4 => {
+        let {
+          handleClose
+        } = _ref4;
+        return exampleLongOptions.map(option => /*#__PURE__*/_jsx(SelectOption, {
+          description: hasDescription ? 'Description' : undefined,
+          onPress: handleClose,
+          title: option,
+          value: option
+        }, option));
+      }
+    })
+  }));
+};
+const AssetSelect = props => {
+  var _ref5;
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const [asset, setAsset] = useState('btc');
+  const openTray = useCallback(() => setIsTrayVisible(true), []);
+  const closeTray = useCallback(() => setIsTrayVisible(false), []);
+  const assetConfig = assets[(_ref5 = asset) != null ? _ref5 : 'btc'];
+  const ethLogo = assets.eth.imageUrl;
+  return /*#__PURE__*/_jsx(Select, _extends({
+    label: "Select Asset",
+    onChange: setAsset,
+    onPress: openTray,
+    startNode: /*#__PURE__*/_jsx(Box, {
+      paddingX: 2,
+      children: /*#__PURE__*/_jsx(DotSymbol, {
+        overlap: "circular",
+        pin: "bottom-end",
+        size: "s",
+        source: ethLogo,
+        children: /*#__PURE__*/_jsx(RemoteImage, {
+          shape: "circle",
+          size: "l",
+          source: assetConfig.imageUrl
+        })
+      })
+    }),
+    value: asset,
+    valueLabel: assetConfig.name
+  }, props, {
+    children: isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      onCloseComplete: closeTray,
+      children: _ref6 => {
+        let {
+          handleClose
+        } = _ref6;
+        return Object.values(assets).map((_ref7, idx) => {
+          let {
+            name,
+            imageUrl
+          } = _ref7;
+          return /*#__PURE__*/_jsx(SelectOption, {
+            description: "BTC",
+            media: /*#__PURE__*/_jsx(DotSymbol, {
+              overlap: "circular",
+              pin: "bottom-end",
+              size: "s",
+              source: ethLogo,
+              children: /*#__PURE__*/_jsx(RemoteImage, {
+                shape: "circle",
+                size: "l",
+                source: imageUrl
+              })
+            }),
+            onPress: handleClose,
+            testID: "option-" + name,
+            title: name,
+            value: assetKeys[idx]
+          }, name);
+        });
+      }
+    })
+  }));
+};
+const ScrollableSelect = _ref8 => {
+  let {
+      trayTitle,
+      hasDescription
+    } = _ref8,
+    props = _objectWithoutPropertiesLoose(_ref8, _excluded3);
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const [selectedValue, setValue] = useState(exampleOptions[2]);
+  const openTray = useCallback(() => setIsTrayVisible(true), []);
+  const closeTray = useCallback(() => setIsTrayVisible(false), []);
+  return /*#__PURE__*/_jsx(Select, _extends({
+    onChange: setValue,
+    onPress: openTray,
+    value: selectedValue
+  }, props, {
+    children: isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      disableCapturePanGestureToDismiss: true,
+      onCloseComplete: closeTray,
+      title: trayTitle,
+      children: _ref9 => {
+        let {
+          handleClose
+        } = _ref9;
+        return /*#__PURE__*/_jsx(ScrollView, {
+          children: exampleOptions.map(option => /*#__PURE__*/_jsx(SelectOption, {
+            description: hasDescription ? 'Description' : undefined,
+            onPress: handleClose,
+            title: option,
+            value: option
+          }, option))
+        });
+      }
+    })
+  }));
+};
+const SelectFilter = () => {
+  const [year, setYear] = useState();
+  const [asset, setAsset] = useState();
+  const [yearTrayVisible, setYearTrayVisible] = useState(false);
+  const [assetTrayVisible, setAssetTrayVisible] = useState(false);
+  const toggleYearTray = useCallback(() => setYearTrayVisible(prev => !prev), []);
+  const closeYearTray = useCallback(() => setYearTrayVisible(false), []);
+  const toggleAssetTray = useCallback(() => setAssetTrayVisible(prev => !prev), []);
+  const closeAssetTray = useCallback(() => setAssetTrayVisible(false), []);
+  const years = ['2015', '2016', '2017', '2018', '2019', '2020', '2021'];
+  return /*#__PURE__*/_jsxs(HStack, {
+    gap: 1,
+    width: "100%",
+    children: [/*#__PURE__*/_jsx(Select, {
+      onChange: setYear,
+      onPress: toggleYearTray,
+      placeholder: "All years",
+      value: year,
+      width: "48%",
+      children: yearTrayVisible && /*#__PURE__*/_jsx(Tray, {
+        onCloseComplete: closeYearTray,
+        children: _ref0 => {
+          let {
+            handleClose
+          } = _ref0;
+          return years.map(option => /*#__PURE__*/_jsx(SelectOption, {
+            onPress: handleClose,
+            title: option,
+            value: option
+          }, option));
+        }
+      })
+    }), /*#__PURE__*/_jsx(Select, {
+      onChange: setAsset,
+      onPress: toggleAssetTray,
+      placeholder: "All assets",
+      value: asset,
+      width: "48%",
+      children: assetTrayVisible && /*#__PURE__*/_jsx(Tray, {
+        onCloseComplete: closeAssetTray,
+        children: _ref1 => {
+          let {
+            handleClose
+          } = _ref1;
+          return Object.values(assets).map(_ref10 => {
+            let {
+              name: option
+            } = _ref10;
+            return /*#__PURE__*/_jsx(SelectOption, {
+              onPress: handleClose,
+              title: option,
+              value: option
+            }, option);
+          });
+        }
+      })
+    })]
+  });
+};
+const SelectForm = () => {
+  const accountTypeOptions = ['Savings Account', 'Checking Account'];
+  const [accountType, setAccountType] = useState(accountTypeOptions[0]);
+  const [visible, setVisible] = useState(false);
+  const toggleVisible = useCallback(() => setVisible(prev => !prev), []);
+  const closeVisible = useCallback(() => setVisible(false), []);
+  return /*#__PURE__*/_jsxs(VStack, {
+    background: "bg",
+    gap: 2,
+    minHeight: 400,
+    children: [/*#__PURE__*/_jsx(TextInput, {
+      editable: __DEV__,
+      label: "Account number"
+    }), /*#__PURE__*/_jsx(TextInput, {
+      editable: __DEV__,
+      label: "Re-enter account number"
+    }), /*#__PURE__*/_jsx(Select, {
+      accessibilityHint: "Enter account number",
+      accessibilityLabel: "Account number",
+      onChange: setAccountType,
+      onPress: toggleVisible,
+      value: accountType,
+      children: visible && /*#__PURE__*/_jsx(Tray, {
+        onCloseComplete: closeVisible,
+        children: _ref11 => {
+          let {
+            handleClose
+          } = _ref11;
+          return accountTypeOptions.map(option => /*#__PURE__*/_jsx(SelectOption, {
+            onPress: handleClose,
+            title: option,
+            value: option
+          }, option));
+        }
+      })
+    })]
+  });
+};
+const LabelVariants = () => {
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(DefaultSelect, {
+      label: "Outside Label No Placeholder"
+    }), /*#__PURE__*/_jsx(DefaultSelect, {
+      label: "Outside Label",
+      placeholder: "Select from list"
+    }), /*#__PURE__*/_jsx(DefaultSelect, {
+      label: "Inside Label No Placeholder",
+      labelVariant: "inside"
+    }), /*#__PURE__*/_jsx(DefaultSelect, {
+      label: "Inside Label",
+      labelVariant: "inside",
+      placeholder: "Select from list"
+    }), /*#__PURE__*/_jsx(DefaultSelect, {
+      label: "Inside Label with Start Node",
+      labelVariant: "inside",
+      placeholder: "Search and select",
+      startNode: /*#__PURE__*/_jsx(InputIcon, {
+        name: "search"
+      })
+    }), /*#__PURE__*/_jsx(DefaultSelect, {
+      label: "Inside Label with Secondary Variant",
+      labelVariant: "inside",
+      variant: "secondary"
+    })]
+  });
+};
+const SelectScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Default with Tray",
+      children: /*#__PURE__*/_jsx(DefaultSelect, {
+        placeholder: "Select an option... "
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Long Text Select with Tray",
+      children: /*#__PURE__*/_jsx(LongTextSelect, {
+        placeholder: "Select an option... "
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Asset Select with Tray",
+      children: /*#__PURE__*/_jsx(AssetSelect, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Scrollable Tray",
+      children: /*#__PURE__*/_jsx(ScrollableSelect, {
+        hasDescription: true,
+        placeholder: "Select an option... "
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Label and Helper Text",
+      children: /*#__PURE__*/_jsx(DefaultSelect, {
+        helperText: "You may choose only one option",
+        label: "What do you want? ",
+        placeholder: "Select an option... "
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Compact with Label",
+      children: /*#__PURE__*/_jsx(ScrollableSelect, {
+        compact: true,
+        compactSelectOption: true,
+        hasDescription: true,
+        label: "Amt. to deposit"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Start Node",
+      children: /*#__PURE__*/_jsx(DefaultSelect, {
+        accessibilityHint: "Select cash amount",
+        accessibilityLabel: "USD Cash",
+        startNode: /*#__PURE__*/_jsx(InputIcon, {
+          name: "cashUSD"
+        })
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Start Node with Compact Label",
+      children: /*#__PURE__*/_jsx(DefaultSelect, {
+        compact: true,
+        label: "How much would you like to deposit? ",
+        startNode: /*#__PURE__*/_jsx(InputIcon, {
+          name: "cashUSD"
+        })
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Disabled",
+      children: /*#__PURE__*/_jsx(DefaultSelect, {
+        disabled: true,
+        helperText: "I am helpful",
+        label: "I am a label",
+        placeholder: "This is a really long placeholder that will overflow and be truncated"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Negative without HandleBar",
+      children: /*#__PURE__*/_jsx(DefaultSelect, {
+        hideHandleBar: true,
+        helperText: "Wow this is really broken. Good luck! ",
+        label: "I am a label",
+        placeholder: "Someone needs to fix this",
+        variant: "negative"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Positive",
+      children: /*#__PURE__*/_jsx(DefaultSelect, {
+        label: "What do you want?",
+        placeholder: "Some positive feedback",
+        variant: "positive"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Foreground Muted",
+      children: /*#__PURE__*/_jsx(DefaultSelect, {
+        helperText: "Helpful muted text",
+        label: "Muted helpful",
+        placeholder: "Select a muted option",
+        variant: "foregroundMuted"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Secondary",
+      children: /*#__PURE__*/_jsx(DefaultSelect, {
+        helperText: "Helpful secondary text",
+        label: "Secondary helpful",
+        placeholder: "Select a secondary option",
+        variant: "secondary"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Select Filters",
+      children: /*#__PURE__*/_jsx(SelectFilter, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Select in a Form",
+      children: /*#__PURE__*/_jsx(SelectForm, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Label Variants",
+      children: /*#__PURE__*/_jsx(LabelVariants, {})
+    })]
+  });
+};
+export default SelectScreen;

package/esm/controls/__stories__/SelectOption.stories.js

@@ -0,0 +1,60 @@
+import React, { useCallback } from 'react';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Text } from '../../typography/Text';
+import { SelectOption } from '../SelectOption';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function SelectOptionScreen() {
+  const handleOptionPress = useCallback(() => {
+    console.log('pressed');
+  }, []);
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Default",
+      children: /*#__PURE__*/_jsx(SelectOption, {
+        description: "Description",
+        onPress: handleOptionPress,
+        value: "Title"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Default with description",
+      children: /*#__PURE__*/_jsx(SelectOption, {
+        description: "Description",
+        onPress: handleOptionPress,
+        title: "Title",
+        value: "Title"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Default with description and selected",
+      children: /*#__PURE__*/_jsx(SelectOption, {
+        description: "Description",
+        onPress: handleOptionPress,
+        title: "Title",
+        value: "Title"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Set title and description to be ReactNodes",
+      children: /*#__PURE__*/_jsx(SelectOption, {
+        accessibilityHint: "Hint",
+        accessibilityLabel: "Title",
+        description: /*#__PURE__*/_jsx(Text, {
+          font: "title1",
+          children: "Description"
+        }),
+        onPress: handleOptionPress,
+        title: /*#__PURE__*/_jsx(Text, {
+          font: "title1",
+          children: "Title"
+        }),
+        value: "Title"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Multi line",
+      children: /*#__PURE__*/_jsx(SelectOption, {
+        multiline: true,
+        description: "This is a really long description that will be multiple lines long",
+        title: "Title",
+        value: "test"
+      })
+    })]
+  });
+}

package/esm/controls/__stories__/Switch.stories.js

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { VStack } from '../../layout';
+import { Switch } from '../Switch';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SwitchScreen = () => {
+  const [isChecked, setIsChecked] = useState(false);
+  const [isChecked2, setIsChecked2] = useState(true);
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Default",
+      children: () => {
+        const toggleChecked = () => setIsChecked(prevChecked => !prevChecked);
+        return /*#__PURE__*/_jsx(Switch, {
+          checked: isChecked,
+          onChange: toggleChecked,
+          children: "Default"
+        });
+      }
+    }), /*#__PURE__*/_jsxs(Example, {
+      inline: true,
+      title: "States",
+      children: [/*#__PURE__*/_jsx(Switch, {
+        checked: true,
+        children: "On"
+      }), /*#__PURE__*/_jsx(Switch, {
+        checked: true,
+        readOnly: true,
+        children: "On Readonly"
+      }), /*#__PURE__*/_jsx(Switch, {
+        disabled: true,
+        children: "Off Disabled"
+      }), /*#__PURE__*/_jsx(Switch, {
+        readOnly: true,
+        children: "Off Read Only"
+      }), /*#__PURE__*/_jsx(Switch, {
+        accessibilityLabel: "switch with no label"
+      }), /*#__PURE__*/_jsx(Switch, {
+        children: "This switch has a multi-line label. The switch and label should align at the top. The label is super duper long and it keeps going on forever. This switch has a multi-line label."
+      })]
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Custom Color",
+      children: () => {
+        const toggleChecked = () => setIsChecked2(prevChecked => !prevChecked);
+        return /*#__PURE__*/_jsxs(VStack, {
+          gap: 2,
+          children: [/*#__PURE__*/_jsx(Switch, {
+            checked: isChecked2,
+            controlColor: "bgNegative",
+            onChange: toggleChecked,
+            children: "Control color prop"
+          }), /*#__PURE__*/_jsx(Switch, {
+            background: isChecked2 ? 'accentBoldPurple' : 'bgNegative',
+            borderColor: isChecked2 ? 'bgPositive' : 'bgPrimary',
+            borderWidth: 200,
+            checked: isChecked2,
+            color: "bgPrimary",
+            controlColor: "bgPositive",
+            onChange: toggleChecked,
+            children: "Style props"
+          })]
+        });
+      }
+    })]
+  });
+};
+export default SwitchScreen;