@hero-design/rn 7.21.0 → 7.22.0

package/src/components/PinInput/index.tsx

@@ -123,7 +123,7 @@ function PinInput({
   return (
     <StyledWrapper style={style} testID={testID}>
       <StyledPinWrapper>
-        {[...Array(length).keys()].map(index => (
+        {[...Array(length).keys()].map((index) => (
           <React.Fragment key={index}>
             {index !== 0 && <StyledSpacer />}
             <PinCell

package/src/components/RichTextEditor/EditorToolbar.tsx

@@ -152,8 +152,8 @@ const EditorToolbar = ({
       const isStandalone =
         currentButtonConfig && currentButtonConfig.standalone;
 
-      setToolbarButtonArray(prevState =>
-        prevState.map(updatingButton => {
+      setToolbarButtonArray((prevState) =>
+        prevState.map((updatingButton) => {
           if (updatingButton.buttonName === currentButtonName) {
             return {
               ...updatingButton,
@@ -180,7 +180,7 @@ const EditorToolbar = ({
 
   const toolbarButtons = useMemo(
     () =>
-      toolbarButtonArray.map(button => {
+      toolbarButtonArray.map((button) => {
         if (button.buttonName === '|') {
           return <StyledSeparator key={button.id} />;
         }

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -221,8 +221,8 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
   /* Forward events from Toolbar and MentionList to webview */
   useEffect(() => {
     const toolbarEventListenerRemovers = Object.values(ToolbarEvents).map(
-      eventName =>
-        Events.on(emitter, normalizeEventName(eventName), data => {
+      (eventName) =>
+        Events.on(emitter, normalizeEventName(eventName), (data) => {
           postMessageToWebview({
             type: `@hero-editor/webview/${eventName}`,
             data,
@@ -233,7 +233,7 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
     const removeMentionApplyListener = Events.on(
       emitter,
       normalizeEventName('mention-apply'),
-      data =>
+      (data) =>
         postMessageToWebview({
           type: '@hero-editor/webview/mention-apply',
           data,
@@ -242,7 +242,7 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
 
     return () => {
       removeMentionApplyListener();
-      toolbarEventListenerRemovers.forEach(remover => remover());
+      toolbarEventListenerRemovers.forEach((remover) => remover());
     };
   }, []);
 
@@ -350,7 +350,7 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
               )}
             </StyledLabelContainerInsideTextInput>
           )}
-          <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
+          <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
             <StyledWebView
               ref={webview}
               testID="webview"

package/src/components/RichTextEditor/__tests__/EditorToolbar.spec.tsx

@@ -37,7 +37,7 @@ describe('EditorToolbar', () => {
         'format-list-numbered',
         'format-heading1',
         'format-heading2',
-      ].forEach(testId => {
+      ].forEach((testId) => {
         expect(wrapper.queryAllByTestId(testId)).toHaveLength(1);
       });
     });
@@ -105,7 +105,7 @@ describe('EditorToolbar', () => {
           'format-list-numbered',
           'format-heading1',
         ];
-        standaloneButtonTestIDs.forEach(testID => {
+        standaloneButtonTestIDs.forEach((testID) => {
           expect(wrapper.getByTestId(testID)).toHaveStyle({
             backgroundColor: undefined,
           });

package/src/components/RichTextEditor/__tests__/MentionList.spec.tsx

@@ -23,7 +23,7 @@ const SuggestionList = ({
   searchValue: string;
   onSelect: (id: string, name: string) => void;
 }) => {
-  const filteredData = SuggestionListData.filter(item =>
+  const filteredData = SuggestionListData.filter((item) =>
     item.name.includes(searchValue)
   );
 

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

@@ -35,7 +35,7 @@ const OptionList = <V, T extends OptionType<V>>({
     const selected = value.includes(info.item.value);
     const onItemPress = () => {
       if (value.includes(info.item.value)) {
-        onPress(value.filter(val => val !== info.item.value));
+        onPress(value.filter((val) => val !== info.item.value));
       } else {
         onPress([...value, info.item.value]);
       }

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

@@ -185,7 +185,7 @@ describe('rendering', () => {
         onConfirm={jest.fn()}
         renderSelectedValue={(selectedValue, _inputProps) => (
           <>
-            {selectedValue.map(value => (
+            {selectedValue.map((value) => (
               <Typography.Text>Custom {value}</Typography.Text>
             ))}
           </>

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

@@ -68,8 +68,8 @@ function MultiSelect<V, T extends OptionType<V>>({
   const sections = toSections(options);
   const flatOptions = toFlatOptions(options);
   const displayedValue = flatOptions
-    .filter(opt => value.includes(opt.value))
-    .map(opt => opt.text)
+    .filter((opt) => value.includes(opt.value))
+    .map((opt) => opt.text)
     .join(', ');
 
   return (
@@ -99,7 +99,7 @@ function MultiSelect<V, T extends OptionType<V>>({
               testID={testID}
               renderInputValue={
                 renderSelectedValue !== undefined
-                  ? props => renderSelectedValue(value, props)
+                  ? (props) => renderSelectedValue(value, props)
                   : undefined
               }
             />

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>
+`;