@coinbase/cds-mobile 0.0.0 → 8.13.2

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

@@ -0,0 +1,296 @@
+import { useState } from 'react';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { VStack } from '../../layout';
+import { Text } from '../../typography/Text';
+import { RadioCell } from '../RadioCell';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DefaultExample = () => {
+  const [checked, setChecked] = useState(false);
+  return /*#__PURE__*/_jsx(Example, {
+    inline: true,
+    title: "Default",
+    children: /*#__PURE__*/_jsx(RadioCell, {
+      checked: checked,
+      onChange: (_, checked) => setChecked(checked != null ? checked : false),
+      title: "Default radio cell",
+      value: "default"
+    })
+  });
+};
+const WithDescriptionExample = () => {
+  const [checked, setChecked] = useState(false);
+  return /*#__PURE__*/_jsx(Example, {
+    inline: true,
+    title: "With Description",
+    children: /*#__PURE__*/_jsx(RadioCell, {
+      checked: checked,
+      description: "This is a helpful description that explains more about this option",
+      onChange: (_, checked) => setChecked(checked != null ? checked : false),
+      title: "Radio cell with description",
+      value: "with-description"
+    })
+  });
+};
+const StatesExample = () => {
+  return /*#__PURE__*/_jsx(Example, {
+    inline: true,
+    title: "States",
+    children: /*#__PURE__*/_jsxs(VStack, {
+      gap: 1,
+      width: "100%",
+      children: [/*#__PURE__*/_jsx(RadioCell, {
+        checked: true,
+        title: "Selected radio cell",
+        value: "selected"
+      }), /*#__PURE__*/_jsx(RadioCell, {
+        description: "This option is not selected",
+        title: "Unselected radio cell",
+        value: "unselected"
+      }), /*#__PURE__*/_jsx(RadioCell, {
+        checked: true,
+        disabled: true,
+        title: "Selected and disabled",
+        value: "selected-disabled"
+      }), /*#__PURE__*/_jsx(RadioCell, {
+        disabled: true,
+        title: "Disabled radio cell",
+        value: "disabled"
+      })]
+    })
+  });
+};
+const CustomContentExample = () => {
+  const [checked, setChecked] = useState(false);
+  return /*#__PURE__*/_jsx(Example, {
+    inline: true,
+    title: "Custom Content",
+    children: /*#__PURE__*/_jsx(RadioCell, {
+      checked: checked,
+      description: /*#__PURE__*/_jsxs(Text, {
+        color: "fgMuted",
+        font: "body",
+        children: ["Custom description with ", /*#__PURE__*/_jsx(Text, {
+          font: "label1",
+          children: "bold text"
+        })]
+      }),
+      onChange: (_, checked) => setChecked(!!checked),
+      title: /*#__PURE__*/_jsx(Text, {
+        color: "fgPrimary",
+        font: "headline",
+        children: "Custom Title Component"
+      }),
+      value: "custom-content"
+    })
+  });
+};
+const InteractiveGroupExample = () => {
+  const [selectedValue, setSelectedValue] = useState('option1');
+  const options = [{
+    value: 'option1',
+    title: 'First Option',
+    description: 'This is the first choice'
+  }, {
+    value: 'option2',
+    title: 'Second Option',
+    description: 'This is the second choice'
+  }, {
+    value: 'option3',
+    title: 'Third Option',
+    description: 'This is the third choice'
+  }];
+  return /*#__PURE__*/_jsxs(Example, {
+    inline: true,
+    title: "Interactive Group",
+    children: [/*#__PURE__*/_jsx(Text, {
+      font: "headline",
+      style: {
+        marginBottom: 8
+      },
+      children: "Choose an option:"
+    }), /*#__PURE__*/_jsx(VStack, {
+      gap: 1,
+      children: options.map(option => /*#__PURE__*/_jsx(RadioCell, {
+        checked: selectedValue === option.value,
+        description: option.description,
+        onChange: value => setSelectedValue(value != null ? value : undefined),
+        title: option.title,
+        value: option.value
+      }, option.value))
+    })]
+  });
+};
+const ColorSelectionGroupExample = () => {
+  const [selectedColor, setSelectedColor] = useState('blue');
+  const colorOptions = [{
+    value: 'blue',
+    title: 'Blue',
+    description: 'A calming blue color'
+  }, {
+    value: 'red',
+    title: 'Red',
+    description: 'A vibrant red color'
+  }, {
+    value: 'green',
+    title: 'Green',
+    description: 'A natural green color'
+  }, {
+    value: 'yellow',
+    title: 'Yellow',
+    description: 'A bright yellow color'
+  }];
+  return /*#__PURE__*/_jsxs(Example, {
+    inline: true,
+    title: "Color Selection Group",
+    children: [/*#__PURE__*/_jsx(Text, {
+      font: "headline",
+      style: {
+        marginBottom: 8
+      },
+      children: "Select your favorite color:"
+    }), /*#__PURE__*/_jsx(VStack, {
+      gap: 1,
+      children: colorOptions.map(option => /*#__PURE__*/_jsx(RadioCell, {
+        checked: selectedColor === option.value,
+        description: option.description,
+        onChange: (value, checked) => setSelectedColor(checked ? value : undefined),
+        title: option.title,
+        value: option.value
+      }, option.value))
+    })]
+  });
+};
+const CustomStylingExample = () => {
+  const [checked, setChecked] = useState(false);
+  return /*#__PURE__*/_jsx(Example, {
+    inline: true,
+    title: "Custom Styling",
+    children: /*#__PURE__*/_jsx(RadioCell, {
+      background: "bgAlternate",
+      borderColor: "bgLine",
+      borderRadius: 300,
+      borderWidth: 200,
+      checked: checked,
+      columnGap: 3,
+      onChange: (_, checked) => setChecked(!!checked),
+      padding: 3,
+      rowGap: 1,
+      title: "Custom styled radio cell",
+      value: "custom-styled"
+    })
+  });
+};
+const ContentStyleExample = () => {
+  const [checked, setChecked] = useState(false);
+  return /*#__PURE__*/_jsx(Example, {
+    inline: true,
+    title: "Content Style",
+    children: /*#__PURE__*/_jsx(RadioCell, {
+      checked: checked,
+      contentStyle: {
+        backgroundColor: '#f0f8ff',
+        padding: 12,
+        borderRadius: 8
+      },
+      description: "This radio has custom content styling applied",
+      onChange: (_, checked) => setChecked(!!checked),
+      title: "Content Style Example",
+      value: "content-style"
+    })
+  });
+};
+const WrapperStylesExample = () => {
+  const [checked, setChecked] = useState(false);
+  return /*#__PURE__*/_jsx(Example, {
+    inline: true,
+    title: "Wrapper Styles",
+    children: /*#__PURE__*/_jsx(RadioCell, {
+      checked: checked,
+      description: "Press and hold to see the custom pressed border styling",
+      onChange: (_, checked) => setChecked(!!checked),
+      title: "Wrapper Styles Example",
+      value: "wrapper-styles",
+      wrapperStyles: {
+        base: {
+          shadowColor: '#000',
+          shadowOffset: {
+            width: 0,
+            height: 2
+          },
+          shadowOpacity: 0.1,
+          shadowRadius: 4,
+          elevation: 2
+        },
+        pressed: {
+          borderColor: '#ff6b6b',
+          borderWidth: 3,
+          backgroundColor: '#ffe0e0'
+        }
+      }
+    })
+  });
+};
+const CombinedStylingExample = () => {
+  const [checked, setChecked] = useState(false);
+  return /*#__PURE__*/_jsx(Example, {
+    inline: true,
+    title: "Combined Styling",
+    children: /*#__PURE__*/_jsx(RadioCell, {
+      background: "bgSecondary",
+      borderRadius: 400,
+      checked: checked,
+      contentStyle: {
+        paddingVertical: 8,
+        backgroundColor: 'rgba(59, 130, 246, 0.1)',
+        borderRadius: 6
+      },
+      description: "This combines contentStyle and wrapperStyles for advanced customization",
+      onChange: (_, checked) => setChecked(!!checked),
+      padding: 4,
+      title: "Combined Styling Example",
+      value: "combined-styling",
+      wrapperStyles: {
+        pressed: {
+          borderColor: '#3b82f6',
+          borderWidth: 2
+        }
+      }
+    })
+  });
+};
+const AccessibilityExample = () => {
+  const [checked, setChecked] = useState(false);
+  return /*#__PURE__*/_jsx(Example, {
+    inline: true,
+    title: "Accessibility",
+    children: /*#__PURE__*/_jsx(RadioCell, {
+      accessibilityHint: "Select this option to enable notifications",
+      accessibilityLabel: "Enable notifications radio button",
+      checked: checked,
+      description: "You will receive push notifications when this is enabled",
+      onChange: (_, checked) => setChecked(!!checked),
+      title: "Enable Notifications",
+      value: "enable-notifications"
+    })
+  });
+};
+const LongContentExample = () => {
+  const [checked, setChecked] = useState(false);
+  return /*#__PURE__*/_jsx(Example, {
+    inline: true,
+    title: "Long Content",
+    children: /*#__PURE__*/_jsx(RadioCell, {
+      checked: checked,
+      description: "This is a very long description that demonstrates how the radio cell handles multi-line text. The description should wrap properly and maintain good readability. It can contain a lot of information to help users make informed decisions about their selection.",
+      onChange: (_, checked) => setChecked(!!checked),
+      title: "Radio Cell with Very Long Title That Demonstrates Text Wrapping Behavior",
+      value: "long-content"
+    })
+  });
+};
+const RadioCellScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(DefaultExample, {}), /*#__PURE__*/_jsx(WithDescriptionExample, {}), /*#__PURE__*/_jsx(StatesExample, {}), /*#__PURE__*/_jsx(CustomContentExample, {}), /*#__PURE__*/_jsx(InteractiveGroupExample, {}), /*#__PURE__*/_jsx(ColorSelectionGroupExample, {}), /*#__PURE__*/_jsx(CustomStylingExample, {}), /*#__PURE__*/_jsx(ContentStyleExample, {}), /*#__PURE__*/_jsx(WrapperStylesExample, {}), /*#__PURE__*/_jsx(CombinedStylingExample, {}), /*#__PURE__*/_jsx(AccessibilityExample, {}), /*#__PURE__*/_jsx(LongContentExample, {})]
+  });
+};
+export default RadioCellScreen;

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

@@ -0,0 +1,141 @@
+import React, { useState } from 'react';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { VStack } from '../../layout';
+import { Text } from '../../typography/Text';
+import { Radio, RadioGroup } from '../RadioGroup';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const RadioGroupScreen = () => {
+  const [checked, setChecked] = useState(false);
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Default",
+      children: () => {
+        const toggleChecked = () => setChecked(prevChecked => !prevChecked);
+        return /*#__PURE__*/_jsx(Radio, {
+          checked: checked,
+          onChange: toggleChecked,
+          children: "Default"
+        });
+      }
+    }), /*#__PURE__*/_jsxs(Example, {
+      inline: true,
+      title: "States",
+      children: [/*#__PURE__*/_jsx(Radio, {
+        checked: true,
+        children: "Selected"
+      }), /*#__PURE__*/_jsx(Radio, {
+        checked: true,
+        disabled: true,
+        children: "Disabled Selected"
+      }), /*#__PURE__*/_jsx(Radio, {
+        disabled: true,
+        children: "Disabled"
+      }), /*#__PURE__*/_jsx(Radio, {
+        readOnly: true,
+        children: "Read Only"
+      }), /*#__PURE__*/_jsx(Radio, {
+        accessibilityLabel: "radio with no label"
+      }), /*#__PURE__*/_jsx(Radio, {
+        children: "This radio has a multi-line label. The radio and label should align at the top. The label is super duper long and it keeps going on forever. This radio has a multi-line label."
+      })]
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Radio Group",
+      children: () => {
+        const options1 = {
+          btc: 'Bitcoin',
+          eth: 'Ethereum',
+          dai: 'Dai'
+        };
+        const options2 = {
+          'yellow-jacket': 'Yellow Jacket',
+          bruin: 'Bruin',
+          bronco: 'Bronco'
+        };
+        const options3 = {
+          taco: 'tacos',
+          puttanesca: 'Spaghetti',
+          'hamachi-salad': /*#__PURE__*/_jsx(Text, {
+            font: "label1",
+            children: "Hamachi salad"
+          })
+        };
+
+        /* eslint-disable react-hooks/rules-of-hooks */
+        const [group1, setGroup1] = useState('btc');
+        const [group2, setGroup2] = useState();
+        const [group3, setGroup3] = useState();
+        const [group4, setGroup4] = useState();
+
+        /* eslint-enable react-hooks/rules-of-hooks */
+
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Text, {
+            font: "headline",
+            children: "Select a Currency"
+          }), /*#__PURE__*/_jsx(RadioGroup, {
+            accessibilityLabel: "Select a currency to trade",
+            onChange: setGroup1,
+            options: options1,
+            radioAccessibilityLabel: "Button {{number}} of {{total}}",
+            value: group1
+          }), /*#__PURE__*/_jsx(RadioGroup, {
+            accessibilityLabel: "Choose as mascot for your team",
+            label: /*#__PURE__*/_jsx(Text, {
+              font: "headline",
+              children: "Choose a Mascot"
+            }),
+            onChange: setGroup2,
+            options: options2,
+            value: group2
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "headline",
+            children: "Select a Currency"
+          }), /*#__PURE__*/_jsx(RadioGroup, {
+            accessibilityLabel: "Select a currency to trade",
+            direction: "horizontal",
+            gap: 2,
+            onChange: setGroup3,
+            options: options1,
+            value: group3
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "headline",
+            children: "Select a dish to order"
+          }), /*#__PURE__*/_jsx(RadioGroup, {
+            accessibilityLabel: "Select a dish to order",
+            direction: "horizontal",
+            gap: 2,
+            onChange: setGroup4,
+            options: options3,
+            value: group4
+          })]
+        });
+      }
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Custom Color",
+      children: () => {
+        const toggleChecked = () => setChecked(prevChecked => !prevChecked);
+        return /*#__PURE__*/_jsxs(VStack, {
+          gap: 2,
+          children: [/*#__PURE__*/_jsx(Radio, {
+            checked: checked,
+            controlColor: "bgPositive",
+            onChange: toggleChecked,
+            children: "Control color prop"
+          }), /*#__PURE__*/_jsx(Radio, {
+            background: checked ? 'accentBoldPurple' : 'bg',
+            borderColor: checked ? 'bgNegative' : 'bgWarning',
+            checked: checked,
+            color: "bgPrimary",
+            controlColor: "bgPositive",
+            onChange: toggleChecked,
+            children: "Style props"
+          })]
+        });
+      }
+    })]
+  });
+};
+export default RadioGroupScreen;

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

@@ -0,0 +1,200 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Text } from '../../typography/Text';
+import { InputIconButton } from '../InputIconButton';
+import { SearchInput } from '../SearchInput';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const Basic = () => {
+  const [text, setText] = useState('');
+  return /*#__PURE__*/_jsx(SearchInput, {
+    editable: __DEV__,
+    onChangeText: setText,
+    value: text
+  });
+};
+const Compact = () => {
+  const [text, setText] = useState('');
+  return /*#__PURE__*/_jsx(SearchInput, {
+    compact: true,
+    editable: __DEV__,
+    onChangeText: setText,
+    value: text
+  });
+};
+const HideStartIcon = () => {
+  const [text, setText] = useState('');
+  return /*#__PURE__*/_jsx(SearchInput, {
+    hideStartIcon: true,
+    editable: __DEV__,
+    onChangeText: setText,
+    value: text
+  });
+};
+const HideEndIcon = () => {
+  const [text, setText] = useState('');
+  return /*#__PURE__*/_jsx(SearchInput, {
+    hideEndIcon: true,
+    editable: __DEV__,
+    onChangeText: setText,
+    value: text
+  });
+};
+const CustomEndNode = _ref => {
+  let {
+    end
+  } = _ref;
+  const [text, setText] = useState('');
+  return /*#__PURE__*/_jsx(SearchInput, {
+    editable: __DEV__,
+    end: end,
+    onChangeText: setText,
+    value: text
+  });
+};
+const Disabled = () => {
+  const [text, setText] = useState('');
+  return /*#__PURE__*/_jsx(SearchInput, {
+    disabled: true,
+    accessibilityLabel: "Search",
+    onChangeText: setText,
+    value: text
+  });
+};
+const CustomRef = () => {
+  const [text, setText] = useState('');
+  const ref = useRef(null);
+  return /*#__PURE__*/_jsx(SearchInput, {
+    ref: ref,
+    editable: __DEV__,
+    onChangeText: setText,
+    value: text
+  });
+};
+
+/**
+ * This tests how the SearchInput will work when
+ * onChange and onChangeText are used together
+ */
+const OnChangeExample = () => {
+  const [text, setText] = useState('');
+  const handleOnChange = useCallback(e => {
+    console.log(e.nativeEvent.text);
+  }, []);
+  const handleOnBack = useCallback(() => {
+    console.log('onBack callback fired');
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(SearchInput, {
+      editable: __DEV__,
+      onBack: handleOnBack,
+      onChange: handleOnChange,
+      onChangeText: setText,
+      value: text
+    }), !!text && /*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: text
+    })]
+  });
+};
+const DisableBackArrow = () => {
+  const [text, setText] = useState('');
+  const handleOnSearch = useCallback(str => {
+    console.log(str);
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(SearchInput, {
+      disableBackArrow: true,
+      editable: __DEV__,
+      onChangeText: setText,
+      onSearch: handleOnSearch,
+      value: text
+    }), !!text && /*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: text
+    })]
+  });
+};
+const SetCustomSearchStartIcon = () => {
+  const [text, setText] = useState('');
+  const handleOnSearch = useCallback(str => {
+    console.log(str);
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(SearchInput, {
+      editable: __DEV__,
+      onChangeText: setText,
+      onSearch: handleOnSearch,
+      startIcon: "search",
+      value: text
+    }), !!text && /*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: text
+    })]
+  });
+};
+const SetCustomBackArrowStartIcon = () => {
+  const [text, setText] = useState('');
+  const handleOnSearch = useCallback(str => {
+    console.log(str);
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(SearchInput, {
+      editable: __DEV__,
+      onChangeText: setText,
+      onSearch: handleOnSearch,
+      startIcon: "backArrow",
+      value: text
+    }), !!text && /*#__PURE__*/_jsx(Text, {
+      font: "label1",
+      children: text
+    })]
+  });
+};
+const SearchInputScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "OnChange Example",
+      children: /*#__PURE__*/_jsx(OnChangeExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Hidden Start Icon",
+      children: /*#__PURE__*/_jsx(HideStartIcon, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Hidden End Icon",
+      children: /*#__PURE__*/_jsx(HideEndIcon, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Disabled Back Arrow",
+      children: /*#__PURE__*/_jsx(DisableBackArrow, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Basic",
+      children: /*#__PURE__*/_jsx(Basic, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Disabled",
+      children: /*#__PURE__*/_jsx(Disabled, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom Ref",
+      children: /*#__PURE__*/_jsx(CustomRef, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Compact",
+      children: /*#__PURE__*/_jsx(Compact, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom Start Icon - Search",
+      children: /*#__PURE__*/_jsx(SetCustomSearchStartIcon, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom Start Icon - Back arrow",
+      children: /*#__PURE__*/_jsx(SetCustomBackArrowStartIcon, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom End Node",
+      children: /*#__PURE__*/_jsx(CustomEndNode, {
+        end: /*#__PURE__*/_jsx(InputIconButton, {
+          active: true,
+          accessibilityHint: "Warning text",
+          accessibilityLabel: "Warning text",
+          name: "warning",
+          onPress: () => console.log(),
+          testID: "custom-close-iconbtn"
+        })
+      })
+    })]
+  });
+};
+export default SearchInputScreen;