@hero-design/rn 7.5.0 → 7.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.5.0",
+  "version": "7.6.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.5.0"
+    "@hero-design/colors": "7.6.0"
   },
   "peerDependencies": {
     "react": "17.0.2",

package/playground/.turbo/turbo-type-check.log

@@ -0,0 +1,7 @@
+@hero-design/playground:type-check: cache hit, replaying output 7c10418dc02a32a7
+@hero-design/playground:type-check: warning From Yarn 1.0 onwards, scripts don't require "--" for options to be forwarded. In a future version, any explicit "--" will be forwarded as-is to the scripts.
+@hero-design/playground:type-check: $ tsc --noEmit --w
+@hero-design/playground:type-check: c2:47:14 PM - Starting compilation in watch mode...
+@hero-design/playground:type-check: 
+@hero-design/playground:type-check: 
+@hero-design/playground:type-check: 2:47:15 PM - Found 0 errors. Watching for file changes.

package/playground/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hero-design/playground",
   "private": true,
-  "version": "7.5.0",
+  "version": "7.6.0",
   "license": "MIT",
   "scripts": {
     "lint": "eslint src expoEntry.js --ext .js,.jsx,.ts,.tsx --ignore-path ../../../.gitignore",
@@ -13,8 +13,8 @@
     "visual-test": "detox build -c ios.sim.release && detox test -c ios.sim.release"
   },
   "dependencies": {
-    "@hero-design/colors": "7.5.0",
-    "@hero-design/rn": "7.5.0",
+    "@hero-design/colors": "7.6.0",
+    "@hero-design/rn": "7.6.0",
     "@react-native-community/masked-view": "^0.1.11",
     "@react-navigation/core": "^6.3.0",
     "@react-navigation/native": "^6.0.12",

package/playground/src/App.tsx

@@ -34,6 +34,8 @@ import ProgressPlayground from './Progress';
 import SpinnerPlayground from './Spinner';
 import SectionHeadingPlayground from './SectionHeading';
 import RadioPlayground from './Radio';
+import SelectPlayground from './Select';
+import SwitchPlayground from './Switch';
 import TabsPlayground from './Tabs';
 import TagPlayground from './Tag';
 import TextInputPlayground from './TextInput';
@@ -65,6 +67,8 @@ type RootStackParamList = {
   Spinner: undefined;
   Radio: undefined;
   SectionHeading: undefined;
+  Select: undefined;
+  Switch: undefined;
   Tabs: undefined;
   Tag: undefined;
   TextInput: undefined;
@@ -95,6 +99,8 @@ const components = [
   { name: 'Spinner', component: SpinnerPlayground },
   { name: 'Radio', component: RadioPlayground },
   { name: 'SectionHeading', component: SectionHeadingPlayground },
+  { name: 'Select', component: SelectPlayground },
+  { name: 'Switch', component: SwitchPlayground },
   { name: 'Tabs', component: TabsPlayground },
   { name: 'Tag', component: TagPlayground },
   { name: 'TextInput', component: TextInputPlayground },

package/playground/src/ContentNavigator.tsx

@@ -24,22 +24,15 @@ function formatDate(date: Date) {
 }
 
 const ContentNavigatorPlayground = (): JSX.Element => {
-  const {
-    space: { medium },
-  } = useTheme();
+  const theme = useTheme();
   const [age, setAge] = useState(20);
   const [date, setDate] = useState(new Date());
   const { monday, sunday } = getMondayAndSunday(date);
 
   return (
-    <View
-      style={{
-        marginVertical: medium,
-        marginHorizontal: medium,
-      }}
-    >
+    <View style={{ margin: theme.space.medium }}>
       <View style={{ flexDirection: 'row' }}>
-        <Typography.Text style={{ paddingRight: medium }}>
+        <Typography.Text style={{ paddingRight: theme.space.medium }}>
           Age (18 to 25):
         </Typography.Text>
         <ContentNavigator

package/playground/src/Select.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { Select, useTheme } from '@hero-design/rn';
+
+const SelectPlayground = (): JSX.Element => {
+  const theme = useTheme();
+  const options = [
+    { text: 'Monday', value: 'mon' },
+    { text: 'Tuesday', value: 'tue' },
+    { text: 'Wednesday', value: 'wed' },
+    { text: 'Thursday', value: 'thu' },
+    { text: 'Friday', value: 'fri' },
+    { text: 'Saturday', value: 'sat' },
+    { text: 'Sunday', value: 'sun' },
+  ];
+  const [value, setValue] = useState(['mon', 'tue']);
+
+  return (
+    <View style={{ margin: theme.space.medium }}>
+      <Select.Multi
+        label="Allow notifications"
+        footerLabel="Confirm"
+        options={options}
+        value={value}
+        onPress={setValue}
+        keyExtractor={opt => opt.value}
+      />
+    </View>
+  );
+};
+
+export default SelectPlayground;

package/playground/src/Switch.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { Switch, Typography, useTheme } from '@hero-design/rn';
+
+type StateIndex = 'switchOne' | 'switchTwo' | 'switchThree' | 'switchFour';
+
+type SwitchStates = {
+  switchOne: boolean;
+  switchTwo: boolean;
+  switchThree: boolean;
+  switchFour: boolean;
+};
+
+const SwitchPlayground = () => {
+  const theme = useTheme();
+
+  const [isChecked, setIsChecked] = React.useState<SwitchStates>({
+    switchOne: true,
+    switchTwo: false,
+    switchThree: true,
+    switchFour: false,
+  });
+
+  const toggleState = React.useCallback(
+    (switchId: StateIndex) =>
+      setIsChecked({
+        ...isChecked,
+        [switchId]: !isChecked[switchId],
+      }),
+    [isChecked]
+  );
+
+  return (
+    <View
+      style={{
+        margin: theme.space.medium,
+      }}
+    >
+      <Typography.Text style={{ marginVertical: theme.space.xsmall }}>
+        Medium size
+      </Typography.Text>
+      <Switch
+        checked={isChecked.switchOne}
+        onPress={() => toggleState('switchOne')}
+      />
+      <Switch
+        style={{ marginTop: theme.space.small }}
+        checked={isChecked.switchTwo}
+        onPress={() => toggleState('switchTwo')}
+      />
+      <Switch checked disabled style={{ marginTop: theme.space.small }} />
+      <Switch disabled style={{ marginTop: theme.space.small }} />
+
+      <Typography.Text style={{ marginVertical: theme.space.xsmall }}>
+        Small size
+      </Typography.Text>
+      <Switch
+        size="small"
+        checked={isChecked.switchThree}
+        onPress={() => toggleState('switchThree')}
+      />
+      <Switch
+        style={{ marginTop: theme.space.small }}
+        size="small"
+        checked={isChecked.switchFour}
+        onPress={() => toggleState('switchFour')}
+      />
+      <Switch
+        checked
+        disabled
+        style={{ marginTop: theme.space.small }}
+        size="small"
+      />
+      <Switch disabled style={{ marginTop: theme.space.small }} size="small" />
+    </View>
+  );
+};
+
+export default SwitchPlayground;

package/src/components/BottomSheet/Header.tsx

@@ -24,7 +24,7 @@ const Header = ({
     <StyledHeaderWrapper>
       {typeof content === 'string' ? (
         <StyledHeader adjacentIcon={showCloseButton}>
-          <Typography.Text fontSize="xlarge" fontWeight="semi-bold">
+          <Typography.Text fontSize="large" fontWeight="semi-bold">
             {content}
           </Typography.Text>
         </StyledHeader>

package/src/components/BottomSheet/__tests__/__snapshots__/index.spec.tsx.snap

@@ -111,14 +111,14 @@ exports[`BottomSheet renders correctly with close state 1`] = `
                 Object {
                   "color": "#292a2b",
                   "fontFamily": "BeVietnamPro-SemiBold",
-                  "fontSize": 18,
-                  "letterSpacing": 0.54,
-                  "lineHeight": 26,
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
                 },
                 undefined,
               ]
             }
-            themeFontSize="xlarge"
+            themeFontSize="large"
             themeFontWeight="semi-bold"
             themeIntent="body"
           >
@@ -376,14 +376,14 @@ exports[`BottomSheet renders correctly with open state 1`] = `
                 Object {
                   "color": "#292a2b",
                   "fontFamily": "BeVietnamPro-SemiBold",
-                  "fontSize": 18,
-                  "letterSpacing": 0.54,
-                  "lineHeight": 26,
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
                 },
                 undefined,
               ]
             }
-            themeFontSize="xlarge"
+            themeFontSize="large"
             themeFontWeight="semi-bold"
             themeIntent="body"
           >

package/src/components/BottomSheet/index.tsx

@@ -40,6 +40,10 @@ interface BottomSheetProps {
    * is being dismiss by interacting outside of the bottom sheet.
    */
   onRequestClose?: () => void;
+  /**
+   * Callback that is called once the bottom sheet has been dismissed.
+   */
+  onDismiss?: () => void;
   /**
    * Displays an X button on bottom sheet header that will invoke onRequestClose callback on press.
    */
@@ -69,6 +73,7 @@ const BottomSheet = ({
   children,
   onOpen,
   onRequestClose,
+  onDismiss,
   showCloseButton = true,
   hasBackdrop = true,
   showDivider = true,
@@ -93,6 +98,7 @@ const BottomSheet = ({
       const endValueOfTransition = open ? 1 : 0;
       if (endValueOfTransition === 0 && value === endValueOfTransition) {
         setVisibility(false);
+        onDismiss?.();
       }
     });
 

package/src/components/Radio/RadioGroup.tsx

@@ -2,20 +2,26 @@ import React, { ReactElement } from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 import Radio from './Radio';
 import { Spacer } from './StyledRadio';
+import { OptionType } from './types';
 
-export interface RadioGroupProps {
+export interface RadioGroupProps<T> {
   /**
    * An array of radio options to be selected.
    */
-  options: { text: string; value: string }[];
+  options: OptionType<T>[];
   /**
    * Radio input value.
    */
-  value: string;
+  value: T;
   /**
    * Press event handler receiving selected radio's value.
    */
-  onPress: (value: string) => void;
+  onPress: (value: T) => void;
+  /**
+   * Used to extract a unique key for a given option at the specified index. Key is used for caching and as the react key to track item re-ordering.
+   * The default extractor checks option.key, and then falls back to using the index, like React does.
+   */
+  keyExtractor?: (option: OptionType<T>, index?: number) => string;
   /**
    * Additional style.
    */
@@ -26,16 +32,34 @@ export interface RadioGroupProps {
   testID?: string;
 }
 
-const RadioGroup = ({
+function getKey<T>(
+  option: OptionType<T>,
+  index: number,
+  keyExtractor?: (opt: OptionType<T>, i?: number) => string
+) {
+  let key: React.Key = '';
+  if (keyExtractor !== undefined) {
+    key = keyExtractor(option, index);
+  } else if (option.key !== undefined) {
+    key = option.key;
+  } else {
+    key = index;
+  }
+
+  return key;
+}
+
+const RadioGroup = <T,>({
   value,
   onPress,
   options,
+  keyExtractor,
   style,
   testID,
-}: RadioGroupProps): ReactElement => (
+}: RadioGroupProps<T>): ReactElement => (
   <View style={style} testID={testID}>
     {options.map((option, index) => (
-      <React.Fragment key={option.value}>
+      <React.Fragment key={getKey(option, index, keyExtractor)}>
         {index !== 0 && <Spacer />}
         <Radio
           text={option.text}

package/src/components/Radio/types.ts

@@ -0,0 +1 @@
+export type OptionType<T> = { value: T; text: string; key?: string };

package/src/components/SectionHeading/StyledHeading.tsx

@@ -2,10 +2,10 @@ import styled from '@emotion/native';
 import { View } from 'react-native';
 
 const StyledHeading = styled(View)(({ theme }) => ({
-  paddingVertical: theme.space.small,
-  paddingHorizontal: theme.space.medium,
-  backgroundColor: theme.colors.outline,
-  marginBottom: theme.space.medium,
+  paddingVertical: theme.__hd__.sectionHeading.space.headingVerticalPadding,
+  paddingHorizontal: theme.__hd__.sectionHeading.space.headingHorizontalPadding,
+  backgroundColor: theme.__hd__.sectionHeading.colors.background,
+  marginBottom: theme.__hd__.sectionHeading.space.headingMarginBottom,
   display: 'flex',
   flexDirection: 'row',
   alignContent: 'center',
@@ -13,7 +13,7 @@ const StyledHeading = styled(View)(({ theme }) => ({
 }));
 
 const StyledIconWrapper = styled(View)(({ theme }) => ({
-  marginRight: theme.space.small,
+  marginRight: theme.__hd__.sectionHeading.space.iconMarginRight,
 }));
 
 const StyledWrapper = styled(View)(() => ({

package/src/components/Select/MultiSelect/Footer.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { FooterText } from './StyledMultiSelect';
+
+function Footer({ label, onPress }: { label: string; onPress: () => void }) {
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <FooterText fontSize="large" fontWeight="semi-bold">
+        {label}
+      </FooterText>
+    </TouchableOpacity>
+  );
+}
+
+export default Footer;

package/src/components/Select/MultiSelect/OptionList.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { View } from 'react-native';
+import { MultiSelectProps } from '.';
+import Icon from '../../Icon';
+import Typography from '../../Typography';
+import { OptionListWrapper, OptionWrapper, Spacer } from './StyledMultiSelect';
+import { OptionType } from './types';
+
+function Option({
+  text,
+  selected,
+  onPress,
+}: {
+  text: string;
+  selected: boolean;
+  onPress: () => void;
+}) {
+  return (
+    <OptionWrapper themeSelected={selected} onPress={onPress}>
+      <View style={{ flex: 1 }}>
+        <Typography.Text fontSize="large">{text}</Typography.Text>
+      </View>
+      {selected && <Icon icon="checkmark" size="small" />}
+    </OptionWrapper>
+  );
+}
+
+function getKey<T>(
+  option: OptionType<T>,
+  index: number,
+  keyExtractor?: (opt: OptionType<T>, i?: number) => string
+) {
+  let key: React.Key = '';
+  if (keyExtractor !== undefined) {
+    key = keyExtractor(option, index);
+  } else if (option.key !== undefined) {
+    key = option.key;
+  } else {
+    key = index;
+  }
+
+  return key;
+}
+
+function OptionList<T>({
+  value,
+  options,
+  onPress,
+  keyExtractor,
+}: Pick<
+  MultiSelectProps<T>,
+  'value' | 'options' | 'onPress' | 'keyExtractor'
+>) {
+  return (
+    <OptionListWrapper>
+      {options.map((opt, index) => (
+        <React.Fragment key={getKey(opt, index, keyExtractor)}>
+          {index !== 0 && <Spacer />}
+          <Option
+            text={opt.text}
+            selected={value.includes(opt.value)}
+            onPress={() => {
+              if (value.includes(opt.value)) {
+                onPress(value.filter(val => val !== opt.value));
+              } else {
+                onPress([...value, opt.value]);
+              }
+            }}
+          />
+        </React.Fragment>
+      ))}
+    </OptionListWrapper>
+  );
+}
+
+export default OptionList;

package/src/components/Select/MultiSelect/StyledMultiSelect.tsx

@@ -0,0 +1,30 @@
+import { View, TouchableOpacity } from 'react-native';
+import styled from '@emotion/native';
+import Typography from '../../Typography';
+
+const OptionWrapper = styled(TouchableOpacity)<{ themeSelected: boolean }>(
+  ({ theme, themeSelected }) => ({
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderRadius: theme.__hd__.select.radii.option,
+    padding: theme.__hd__.select.space.optionPadding,
+    backgroundColor: themeSelected
+      ? theme.__hd__.select.colors.checkedOption
+      : theme.__hd__.select.colors.option,
+  })
+);
+
+const OptionListWrapper = styled(View)(({ theme }) => ({
+  padding: theme.__hd__.select.space.optionListPadding,
+}));
+
+const Spacer = styled(View)(({ theme }) => ({
+  marginTop: theme.__hd__.select.space.optionListSpacing,
+}));
+
+const FooterText = styled(Typography.Text)(({ theme }) => ({
+  color: theme.__hd__.select.colors.footerText,
+}));
+
+export { OptionWrapper, OptionListWrapper, Spacer, FooterText };

package/src/components/Select/MultiSelect/__tests__/StyledMultiSelect.spec.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import {
+  OptionWrapper,
+  OptionListWrapper,
+  Spacer,
+  FooterText,
+} from '../StyledMultiSelect';
+
+describe('OptionWrapper', () => {
+  it.each`
+    themeSelected
+    ${true}
+    ${false}
+  `('has selected style: $themeSelected', ({ themeSelected }) => {
+    const { toJSON } = renderWithTheme(
+      <OptionWrapper themeSelected={themeSelected} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('OptionListWrapper', () => {
+  it('has correct style', () => {
+    const { toJSON } = renderWithTheme(<OptionListWrapper />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('Spacer', () => {
+  it('has correct style', () => {
+    const { toJSON } = renderWithTheme(<Spacer />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('FooterText', () => {
+  it('has correct style', () => {
+    const { toJSON, getByText } = renderWithTheme(
+      <FooterText>Confirm</FooterText>
+    );
+
+    expect(getByText('Confirm')).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Select/MultiSelect/__tests__/__snapshots__/StyledMultiSelect.spec.tsx.snap

@@ -0,0 +1,108 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FooterText has correct style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#7622d7",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+>
+  Confirm
+</Text>
+`;
+
+exports[`OptionListWrapper has correct style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "padding": 16,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`OptionWrapper has selected style: false 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#ffffff",
+      "borderRadius": 4,
+      "flexDirection": "row",
+      "justifyContent": "space-between",
+      "opacity": 1,
+      "padding": 16,
+    }
+  }
+/>
+`;
+
+exports[`OptionWrapper has selected style: true 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#f1e9fb",
+      "borderRadius": 4,
+      "flexDirection": "row",
+      "justifyContent": "space-between",
+      "opacity": 1,
+      "padding": 16,
+    }
+  }
+/>
+`;
+
+exports[`Spacer has correct style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "marginTop": 4,
+      },
+      undefined,
+    ]
+  }
+/>
+`;