@hero-design/rn 7.21.0 → 7.22.1

package/src/components/Select/SingleSelect/index.tsx

@@ -60,7 +60,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
   const sectionListRef = useRef<SectionList<T, SectionType>>(null);
   const sections = toSections(options);
   const flatOptions = toFlatOptions(options);
-  const displayedValue = flatOptions.find(opt => value === opt.value)?.text;
+  const displayedValue = flatOptions.find((opt) => value === opt.value)?.text;
 
   return (
     <>
@@ -89,7 +89,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
               testID={testID}
               renderInputValue={
                 renderSelectedValue !== undefined
-                  ? props => renderSelectedValue(value, props)
+                  ? (props) => renderSelectedValue(value, props)
                   : undefined
               }
             />
@@ -129,7 +129,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
           sections={sections}
           renderOption={renderOption}
           value={value}
-          onPress={selectedValue => {
+          onPress={(selectedValue) => {
             setOpen(false);
             onConfirm(selectedValue);
           }}

package/src/components/Select/helpers.tsx

@@ -44,7 +44,7 @@ export const toFlatOptions = <V, T extends OptionType<V>>(
   options: CombinedOptionsType<V, T>
 ): OptionType<V>[] => {
   if (isSections(options)) {
-    return options.flatMap(opt => opt.data);
+    return options.flatMap((opt) => opt.data);
   }
 
   return options;
@@ -61,8 +61,8 @@ export const getScrollParams = <V, T extends OptionType<V>>(
 ): ScrollParams => {
   let itemIndex = -1;
 
-  const sectionIndex = sections.findIndex(section => {
-    itemIndex = section.data.findIndex(opt => opt.value === value);
+  const sectionIndex = sections.findIndex((section) => {
+    itemIndex = section.data.findIndex((opt) => opt.value === value);
     return itemIndex !== -1;
   });
 
@@ -79,7 +79,7 @@ export const useKeyboard = () => {
   useEffect(() => {
     const keyboardWillShowListener = Keyboard.addListener(
       'keyboardWillShow',
-      e => {
+      (e) => {
         setKeyboardVisible(true);
         setKeyboardHeight(e.endCoordinates.height);
       }

package/src/components/Slider/index.tsx

@@ -53,7 +53,7 @@ export interface SliderProps {
   testID?: string;
 }
 
-export const Slider = ({
+const Slider = ({
   minimumValue = 0,
   maximumValue = 1,
   step = 0,

package/src/components/Switch/SelectorSwitch/Option.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import type { BadgeConfigType, OptionType } from '.';
+import { useTheme } from '../../../theme';
+import { StyledIconWrapper, StyledTextWrapper } from './StyledSelectorSwitch';
+import Typography from '../../Typography';
+import Badge from '../../Badge';
+import Icon from '../../Icon';
+
+export const OptionContent = ({
+  content,
+  badge,
+}: {
+  content: ReactElement;
+  badge?: BadgeConfigType;
+}) => {
+  const theme = useTheme();
+  if (!badge) {
+    return content;
+  }
+
+  if (badge.type === 'status') {
+    return (
+      <Badge.Status
+        visible
+        style={{ paddingHorizontal: theme.space.small }}
+        testID="selector-switch-status-badge"
+      >
+        {content}
+      </Badge.Status>
+    );
+  }
+
+  return content;
+};
+
+const Option = <T,>({
+  text,
+  icon,
+  badge,
+  selected,
+}: Pick<OptionType<T>, 'text' | 'icon' | 'badge'> & {
+  selected: boolean;
+}): ReactElement => {
+  if (selected) {
+    return (
+      <StyledTextWrapper>
+        <OptionContent
+          content={
+            <Typography.Text fontSize="large" intent="inverted">
+              {text}
+            </Typography.Text>
+          }
+          badge={badge}
+        />
+      </StyledTextWrapper>
+    );
+  }
+
+  return (
+    <StyledIconWrapper>
+      <OptionContent content={<Icon icon={icon} />} badge={badge} />
+    </StyledIconWrapper>
+  );
+};
+
+export default Option;

package/src/components/Switch/SelectorSwitch/StyledSelectorSwitch.tsx

@@ -0,0 +1,25 @@
+import styled from '@emotion/native';
+import { View } from 'react-native';
+
+export const StyledWrapper = styled(View)(({ theme }) => ({
+  flexDirection: 'row',
+  width: '100%',
+  height: theme.__hd__.switch.sizes.selector.height,
+  borderRadius: theme.__hd__.switch.radii.selector.default,
+  backgroundColor: theme.__hd__.switch.colors.selector.background,
+  padding: theme.__hd__.switch.spaces.selector.wrapperPadding,
+}));
+
+export const StyledTextWrapper = styled(View)(({ theme }) => ({
+  flex: 1,
+  borderRadius: theme.__hd__.switch.radii.selector.default,
+  backgroundColor: theme.__hd__.switch.colors.selector.textBackground,
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
+export const StyledIconWrapper = styled(View)(({ theme }) => ({
+  paddingHorizontal: theme.__hd__.switch.spaces.selector.iconPadding,
+  justifyContent: 'center',
+  alignItems: 'center',
+}));

package/src/components/Switch/SelectorSwitch/__tests__/Option.spec.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import Icon from '../../../Icon';
+import Option, { OptionContent } from '../Option';
+
+describe('Option', () => {
+  it('renders correctly when selected', () => {
+    const wrapper = renderWithTheme(
+      <Option
+        text="My Dashboard"
+        icon="user"
+        badge={{ type: 'status' }}
+        selected
+      />
+    );
+
+    expect(wrapper.queryAllByText('My Dashboard')).toHaveLength(1);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly when not selected', () => {
+    const wrapper = renderWithTheme(
+      <Option
+        text="My Dashboard"
+        icon="user"
+        badge={{ type: 'status' }}
+        selected={false}
+      />
+    );
+
+    expect(wrapper.queryAllByText('My Dashboard')).toHaveLength(0);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('OptionContent', () => {
+  it('renders correctly there is no badge', () => {
+    const wrapper = renderWithTheme(
+      <OptionContent content={<Icon icon="user" />} />
+    );
+
+    expect(
+      wrapper.queryAllByTestId('selector-switch-status-badge')
+    ).toHaveLength(0);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly when there is a badge', () => {
+    const wrapper = renderWithTheme(
+      <OptionContent
+        content={<Icon icon="user" />}
+        badge={{ type: 'status' }}
+      />
+    );
+
+    expect(
+      wrapper.queryAllByTestId('selector-switch-status-badge')
+    ).toHaveLength(1);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/Option.spec.tsx.snap

@@ -0,0 +1,195 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Option renders correctly when not selected 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "justifyContent": "center",
+        "paddingHorizontal": 16,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Object {
+        "paddingHorizontal": 8,
+      }
+    }
+    testID="selector-switch-status-badge"
+  >
+    <HeroIcon
+      name="user"
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontSize": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="medium"
+    />
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Object {
+          "backgroundColor": "#de350b",
+          "borderRadius": 999,
+          "height": 8,
+          "opacity": 1,
+          "position": "absolute",
+          "right": -2,
+          "top": -2,
+          "transform": Array [
+            Object {
+              "scale": 1,
+            },
+          ],
+          "width": 8,
+        }
+      }
+      themeIntent="danger"
+    />
+  </View>
+</View>
+`;
+
+exports[`Option renders correctly when selected 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "flex": 1,
+        "justifyContent": "center",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Object {
+        "paddingHorizontal": 8,
+      }
+    }
+    testID="selector-switch-status-badge"
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#ffffff",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="large"
+      themeFontWeight="regular"
+      themeIntent="inverted"
+    >
+      My Dashboard
+    </Text>
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Object {
+          "backgroundColor": "#de350b",
+          "borderRadius": 999,
+          "height": 8,
+          "opacity": 1,
+          "position": "absolute",
+          "right": -2,
+          "top": -2,
+          "transform": Array [
+            Object {
+              "scale": 1,
+            },
+          ],
+          "width": 8,
+        }
+      }
+      themeIntent="danger"
+    />
+  </View>
+</View>
+`;
+
+exports[`OptionContent renders correctly there is no badge 1`] = `
+<HeroIcon
+  name="user"
+  style={
+    Array [
+      Object {
+        "color": "#001f23",
+        "fontSize": 24,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
+exports[`OptionContent renders correctly when there is a badge 1`] = `
+<View
+  style={
+    Object {
+      "paddingHorizontal": 8,
+    }
+  }
+  testID="selector-switch-status-badge"
+>
+  <HeroIcon
+    name="user"
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontSize": 24,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "backgroundColor": "#de350b",
+        "borderRadius": 999,
+        "height": 8,
+        "opacity": 1,
+        "position": "absolute",
+        "right": -2,
+        "top": -2,
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+        "width": 8,
+      }
+    }
+    themeIntent="danger"
+  />
+</View>
+`;

package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,121 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectorSwitch renders correctly 1`] = `
+<View
+  accessible={true}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#f6f6f7",
+        "borderRadius": 999,
+        "flexDirection": "row",
+        "height": 56,
+        "padding": 4,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#401960",
+          "borderRadius": 999,
+          "flex": 1,
+          "justifyContent": "center",
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#ffffff",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="large"
+      themeFontWeight="regular"
+      themeIntent="inverted"
+    >
+      My Dashboard
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "paddingHorizontal": 8,
+        }
+      }
+      testID="selector-switch-status-badge"
+    >
+      <HeroIcon
+        name="multiple-users"
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontSize": 24,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="text"
+        themeSize="medium"
+      />
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Object {
+            "backgroundColor": "#de350b",
+            "borderRadius": 999,
+            "height": 8,
+            "opacity": 1,
+            "position": "absolute",
+            "right": -2,
+            "top": -2,
+            "transform": Array [
+              Object {
+                "scale": 1,
+              },
+            ],
+            "width": 8,
+          }
+        }
+        themeIntent="danger"
+      />
+    </View>
+  </View>
+</View>
+`;

package/src/components/Switch/SelectorSwitch/__tests__/index.spec.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import SelectorSwitch from '..';
+
+type PermissionType = 'employee' | 'manager';
+
+describe('SelectorSwitch', () => {
+  it('renders correctly', () => {
+    const wrapper = renderWithTheme(
+      <SelectorSwitch<PermissionType>
+        options={[
+          {
+            value: 'employee',
+            text: 'My Dashboard',
+            icon: 'user',
+          },
+          {
+            value: 'manager',
+            text: 'Manager Dashboard',
+            icon: 'multiple-users',
+            badge: { type: 'status' },
+          },
+        ]}
+        value="employee"
+      />
+    );
+
+    expect(wrapper.queryAllByText('My Dashboard')).toHaveLength(1);
+    expect(wrapper.queryAllByText('Manager Dashboard')).toHaveLength(0);
+    expect(
+      wrapper.queryAllByTestId('selector-switch-status-badge')
+    ).toHaveLength(1);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('triggers onPress correctly', () => {
+    const onPress = jest.fn();
+    const wrapper = renderWithTheme(
+      <SelectorSwitch<PermissionType>
+        options={[
+          {
+            value: 'employee',
+            text: 'My Dashboard',
+            icon: 'user',
+          },
+          {
+            value: 'manager',
+            text: 'Manager Dashboard',
+            icon: 'multiple-users',
+            badge: { type: 'status' },
+          },
+        ]}
+        value="manager"
+        onPress={onPress}
+      />
+    );
+
+    fireEvent.press(wrapper.getByText('Manager Dashboard'));
+    expect(onPress).toBeCalledTimes(1);
+  });
+});

package/src/components/Switch/SelectorSwitch/index.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import { StyleProp, TouchableWithoutFeedback, ViewStyle } from 'react-native';
+import { StyledWrapper } from './StyledSelectorSwitch';
+import type { IconName } from '../../Icon';
+import Option from './Option';
+
+type StatusBadgeType = {
+  type: 'status';
+};
+export type BadgeConfigType = StatusBadgeType;
+
+export type OptionType<T> = {
+  value: T;
+  text: string;
+  icon: IconName;
+  badge?: BadgeConfigType;
+};
+
+export interface SelectorSwitchProps<T> {
+  /**
+   * Array of exactly TWO options to switch between.
+   */
+  options: [OptionType<T>, OptionType<T>];
+  /**
+   * Current selected value.
+   */
+  value: T;
+  /**
+   *  Callback called when an option is pressed.
+   */
+  onPress?: (value: T) => void;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const SelectorSwitch = <T,>({
+  options,
+  value,
+  onPress,
+  style,
+  testID,
+}: SelectorSwitchProps<T>): ReactElement => (
+  <TouchableWithoutFeedback onPress={() => onPress(value)} testID={testID}>
+    <StyledWrapper style={style}>
+      {options.map((opt, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <Option {...opt} selected={opt.value === value} key={index} />
+      ))}
+    </StyledWrapper>
+  </TouchableWithoutFeedback>
+);
+
+export default SelectorSwitch;

package/src/components/Switch/index.tsx

@@ -6,6 +6,7 @@ import { Animated, Easing, TouchableWithoutFeedback } from 'react-native';
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { StyledKnot, StyledWrapper, Variant } from './StyledSwitch';
+import SelectorSwitch from './SelectorSwitch';
 
 export interface SwitchProps {
   /**
@@ -88,4 +89,6 @@ const Switch = ({
   );
 };
 
-export default Switch;
+export default Object.assign(Switch, {
+  Selector: SelectorSwitch,
+});