@hero-design/rn 7.21.0 → 7.22.1

package/src/components/Tabs/ScrollableTabs.tsx

@@ -63,12 +63,15 @@ const ScrollableTab = ({
   barStyle,
   lazy = false,
   lazyPreloadDistance = 1,
+  testID: componentTestID,
 }: TabsProps) => {
   const flatListRef = React.useRef<FlatList>(null);
   const pagerViewRef = React.useRef<PagerView>(null);
   const insets = useSafeAreaInsets();
   const theme = useTheme();
-  const selectedTabIndex = tabs.findIndex(item => item.key === selectedTabKey);
+  const selectedTabIndex = tabs.findIndex(
+    (item) => item.key === selectedTabKey
+  );
   const tabsAnims = useAnimatedValueArray(
     tabs.map((_, i) => (i === selectedTabIndex ? 1 : 0))
   );
@@ -97,13 +100,17 @@ const ScrollableTab = ({
   }, [selectedTabIndex]);
 
   return (
-    <TabContainer style={containerStyle}>
-      <HeaderTabWrapper themeInsets={insets} style={barStyle}>
+    <TabContainer style={containerStyle} testID={componentTestID}>
+      <HeaderTabWrapper
+        themeInsets={insets}
+        style={barStyle}
+        testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
+      >
         <FlatList<TabType>
           ref={flatListRef}
           horizontal
           data={tabs}
-          keyExtractor={tab => String(tab.key)}
+          keyExtractor={(tab) => String(tab.key)}
           showsHorizontalScrollIndicator={false}
           onScrollToIndexFailed={({ index }) => {
             setTimeout(
@@ -184,7 +191,7 @@ const ScrollableTab = ({
       <ContentWrapper
         initialPage={selectedTabIndex}
         ref={pagerViewRef}
-        onPageSelected={e => {
+        onPageSelected={(e) => {
           const index = e.nativeEvent.position;
           const selectedItem = tabs[index];
           if (selectedItem) {

package/src/components/Tabs/__tests__/ScrollableTabs.spec.tsx

@@ -62,7 +62,7 @@ const TestTabsComponent = (
         {...props}
         tabs={tabs}
         selectedTabKey={selectedTabKey}
-        onTabPress={newTabKey => setSelectedTabKey(newTabKey)}
+        onTabPress={(newTabKey) => setSelectedTabKey(newTabKey)}
       />
     </SafeAreaProvider>
   );

package/src/components/Tabs/__tests__/index.spec.tsx

@@ -59,7 +59,7 @@ const TestTabsComponent = (
         {...props}
         tabs={tabs}
         selectedTabKey={selectedTabKey}
-        onTabPress={newTabKey => setSelectedTabKey(newTabKey)}
+        onTabPress={(newTabKey) => setSelectedTabKey(newTabKey)}
       />
     </SafeAreaProvider>
   );

package/src/components/Tabs/index.tsx

@@ -105,11 +105,14 @@ const Tabs = ({
   barStyle,
   lazy = false,
   lazyPreloadDistance = 1,
+  testID: componentTestID,
 }: TabsProps): JSX.Element => {
   const theme = useTheme();
   const insets = useSafeAreaInsets();
   const pagerViewRef = React.useRef<PagerView>(null);
-  const selectedTabIndex = tabs.findIndex(item => item.key === selectedTabKey);
+  const selectedTabIndex = tabs.findIndex(
+    (item) => item.key === selectedTabKey
+  );
   const scrollOffsetAnimatedValue = React.useRef(new Animated.Value(0)).current;
   const positionAnimatedValue = React.useRef(new Animated.Value(0)).current;
   const [tabsWidth, setTabsWidth] = React.useState<number>(0);
@@ -121,18 +124,22 @@ const Tabs = ({
   }, [selectedTabIndex]);
 
   return (
-    <TabContainer style={containerStyle}>
-      <HeaderTabWrapper themeInsets={insets} style={barStyle}>
+    <TabContainer style={containerStyle} testID={componentTestID}>
+      <HeaderTabWrapper
+        themeInsets={insets}
+        style={barStyle}
+        testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
+      >
         <View>
           <HeaderTab
-            onLayout={e => {
+            onLayout={(e) => {
               const { width } = e.nativeEvent.layout;
               if (tabsWidth !== width) {
                 setTabsWidth(width);
               }
             }}
           >
-            {tabs.map(tab => {
+            {tabs.map((tab) => {
               const {
                 key,
                 testID,
@@ -180,7 +187,7 @@ const Tabs = ({
       <ContentWrapper
         initialPage={selectedTabIndex}
         ref={pagerViewRef}
-        onPageSelected={e => {
+        onPageSelected={(e) => {
           const index = e.nativeEvent.position;
           const selectedItem = tabs[index];
           if (selectedItem) {

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

@@ -1396,7 +1396,9 @@ exports[`TextInput idle renders correctly 1`] = `
             "right": 0,
             "top": 0,
           },
-          undefined,
+          Object {
+            "borderColor": "#de350b",
+          },
         ]
       }
       themeVariant="default"

package/src/components/TextInput/__tests__/index.spec.tsx

@@ -1,20 +1,21 @@
-import { fireEvent, within } from '@testing-library/react-native';
-import React from 'react';
-import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import Icon from '../../Icon';
-import TextInput, { getVariant } from '../index';
-
-describe('getVariant', () => {
+import { fireEvent, within } from "@testing-library/react-native";
+import React from "react";
+import { theme } from "../../..";
+import renderWithTheme from "../../../testHelpers/renderWithTheme";
+import Icon from "../../Icon";
+import TextInput, { getVariant } from "../index";
+
+describe("getVariant", () => {
   it.each`
     disabled | error                       | editable | loading  | isFocused | isEmptyValue | expected
-    ${false} | ${undefined}                | ${true}  | ${false} | ${false}  | ${true}      | ${'default'}
-    ${false} | ${undefined}                | ${true}  | ${false} | ${false}  | ${false}     | ${'filled'}
-    ${false} | ${undefined}                | ${true}  | ${false} | ${true}   | ${true}      | ${'focused'}
-    ${false} | ${undefined}                | ${false} | ${true}  | ${true}   | ${true}      | ${'readonly'}
-    ${false} | ${'This field is required'} | ${false} | ${false} | ${true}   | ${true}      | ${'error'}
-    ${true}  | ${'This field is required'} | ${false} | ${false} | ${true}   | ${true}      | ${'disabled'}
+    ${false} | ${undefined}                | ${true}  | ${false} | ${false}  | ${true}      | ${"default"}
+    ${false} | ${undefined}                | ${true}  | ${false} | ${false}  | ${false}     | ${"filled"}
+    ${false} | ${undefined}                | ${true}  | ${false} | ${true}   | ${true}      | ${"focused"}
+    ${false} | ${undefined}                | ${false} | ${true}  | ${true}   | ${true}      | ${"readonly"}
+    ${false} | ${"This field is required"} | ${false} | ${false} | ${true}   | ${true}      | ${"error"}
+    ${true}  | ${"This field is required"} | ${false} | ${false} | ${true}   | ${true}      | ${"disabled"}
   `(
-    'should return the correct variant when disabled $disabled, errorMessage $errorMessage, editable $false, isFocused $isFocused, isEmptyValue $isEmptyValue',
+    "should return the correct variant when disabled $disabled, errorMessage $errorMessage, editable $false, isFocused $isFocused, isEmptyValue $isEmptyValue",
     ({
       disabled,
       error,
@@ -38,38 +39,39 @@ describe('getVariant', () => {
   );
 });
 
-describe('TextInput', () => {
-  describe('idle', () => {
-    it('renders correctly', () => {
+describe("TextInput", () => {
+  describe("idle", () => {
+    it("renders correctly", () => {
       const { getByTestId, toJSON } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
           prefix="dollar-sign"
           suffix="arrow-down"
           testID="idle-text-input"
+          style={{ borderColor: theme.colors.danger }}
         />
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(getByTestId('idle-text-input')).toBeTruthy();
+      expect(getByTestId("idle-text-input")).toBeTruthy();
       expect(
-        within(getByTestId('idle-text-input')).queryAllByTestId('text-input')
+        within(getByTestId("idle-text-input")).queryAllByTestId("text-input")
       ).toHaveLength(1);
       expect(
-        within(getByTestId('idle-text-input')).queryAllByText('Amount (AUD)')
+        within(getByTestId("idle-text-input")).queryAllByText("Amount (AUD)")
       ).toHaveLength(1);
       expect(
-        within(getByTestId('idle-text-input')).queryAllByTestId('input-label')
+        within(getByTestId("idle-text-input")).queryAllByTestId("input-label")
       ).toHaveLength(1);
       expect(
-        within(getByTestId('idle-text-input')).queryAllByTestId('input-prefix')
+        within(getByTestId("idle-text-input")).queryAllByTestId("input-prefix")
       ).toHaveLength(1);
       expect(
-        within(getByTestId('idle-text-input')).queryAllByTestId('input-suffix')
+        within(getByTestId("idle-text-input")).queryAllByTestId("input-suffix")
       ).toHaveLength(1);
     });
 
-    it('should not render input-label if label is empty', () => {
+    it("should not render input-label if label is empty", () => {
       const { getByTestId } = renderWithTheme(
         <TextInput
           prefix="dollar-sign"
@@ -78,13 +80,13 @@ describe('TextInput', () => {
         />
       );
 
-      expect(getByTestId('idle-text-input')).toBeTruthy();
+      expect(getByTestId("idle-text-input")).toBeTruthy();
       expect(
-        within(getByTestId('idle-text-input')).queryAllByTestId('input-label')
+        within(getByTestId("idle-text-input")).queryAllByTestId("input-label")
       ).toHaveLength(0);
     });
 
-    it('onChangeText, onBlur, onFocus', () => {
+    it("onChangeText, onBlur, onFocus", () => {
       const onChangeText = jest.fn();
       const onBlur = jest.fn();
       const onFocus = jest.fn();
@@ -100,23 +102,23 @@ describe('TextInput', () => {
         />
       );
 
-      const testInput = within(getByTestId('idle-text-input')).getByTestId(
-        'text-input'
+      const testInput = within(getByTestId("idle-text-input")).getByTestId(
+        "text-input"
       );
 
-      fireEvent.changeText(testInput, 'Thong Quach');
-      expect(onChangeText).toHaveBeenCalledWith('Thong Quach');
+      fireEvent.changeText(testInput, "Thong Quach");
+      expect(onChangeText).toHaveBeenCalledWith("Thong Quach");
 
-      fireEvent(testInput, 'blur');
+      fireEvent(testInput, "blur");
       expect(onBlur).toHaveBeenCalledTimes(1);
 
-      fireEvent(testInput, 'focus');
+      fireEvent(testInput, "focus");
       expect(onFocus).toHaveBeenCalledTimes(1);
     });
   });
 
-  describe('idle with suffix and prefix are React Element', () => {
-    it('renders correctly', () => {
+  describe("idle with suffix and prefix are React Element", () => {
+    it("renders correctly", () => {
       const { toJSON, queryAllByTestId, queryAllByText } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
@@ -127,16 +129,16 @@ describe('TextInput', () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
-      expect(queryAllByText('*')).toHaveLength(1);
-      expect(queryAllByTestId('input-label')).toHaveLength(1);
-      expect(queryAllByTestId('prefix-element')).toHaveLength(1);
-      expect(queryAllByTestId('suffix-element')).toHaveLength(1);
-      expect(queryAllByTestId('text-input')).toHaveLength(1);
+      expect(queryAllByText("Amount (AUD)")).toHaveLength(1);
+      expect(queryAllByText("*")).toHaveLength(1);
+      expect(queryAllByTestId("input-label")).toHaveLength(1);
+      expect(queryAllByTestId("prefix-element")).toHaveLength(1);
+      expect(queryAllByTestId("suffix-element")).toHaveLength(1);
+      expect(queryAllByTestId("text-input")).toHaveLength(1);
     });
   });
-  describe('required', () => {
-    it('renders correctly', () => {
+  describe("required", () => {
+    it("renders correctly", () => {
       const { toJSON, queryAllByTestId, queryAllByText } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
@@ -147,17 +149,17 @@ describe('TextInput', () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
-      expect(queryAllByText('*')).toHaveLength(1);
-      expect(queryAllByTestId('input-label')).toHaveLength(1);
-      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
-      expect(queryAllByTestId('input-suffix')).toHaveLength(1);
-      expect(queryAllByTestId('text-input')).toHaveLength(1);
+      expect(queryAllByText("Amount (AUD)")).toHaveLength(1);
+      expect(queryAllByText("*")).toHaveLength(1);
+      expect(queryAllByTestId("input-label")).toHaveLength(1);
+      expect(queryAllByTestId("input-prefix")).toHaveLength(1);
+      expect(queryAllByTestId("input-suffix")).toHaveLength(1);
+      expect(queryAllByTestId("text-input")).toHaveLength(1);
     });
   });
 
-  describe('filled', () => {
-    it('renders correctly', () => {
+  describe("filled", () => {
+    it("renders correctly", () => {
       const {
         toJSON,
         queryAllByTestId,
@@ -173,17 +175,17 @@ describe('TextInput', () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
-      expect(queryAllByDisplayValue('100')).toHaveLength(1);
-      expect(queryAllByTestId('input-label')).toHaveLength(1);
-      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
-      expect(queryAllByTestId('input-suffix')).toHaveLength(1);
-      expect(queryAllByTestId('text-input')).toHaveLength(1);
+      expect(queryAllByText("Amount (AUD)")).toHaveLength(1);
+      expect(queryAllByDisplayValue("100")).toHaveLength(1);
+      expect(queryAllByTestId("input-label")).toHaveLength(1);
+      expect(queryAllByTestId("input-prefix")).toHaveLength(1);
+      expect(queryAllByTestId("input-suffix")).toHaveLength(1);
+      expect(queryAllByTestId("text-input")).toHaveLength(1);
     });
   });
 
-  describe('readonly', () => {
-    it('renders correctly', () => {
+  describe("readonly", () => {
+    it("renders correctly", () => {
       const onChangeText = jest.fn();
       const {
         toJSON,
@@ -204,31 +206,31 @@ describe('TextInput', () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
-      expect(queryAllByDisplayValue('100')).toHaveLength(1);
-      expect(queryAllByTestId('input-label')).toHaveLength(1);
-      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
-      expect(queryAllByTestId('input-suffix')).toHaveLength(1);
-      expect(queryAllByTestId('text-input')).toHaveLength(1);
-
-      expect(getByTestId('text-input')).not.toHaveProp('editable', 'false');
+      expect(queryAllByText("Amount (AUD)")).toHaveLength(1);
+      expect(queryAllByDisplayValue("100")).toHaveLength(1);
+      expect(queryAllByTestId("input-label")).toHaveLength(1);
+      expect(queryAllByTestId("input-prefix")).toHaveLength(1);
+      expect(queryAllByTestId("input-suffix")).toHaveLength(1);
+      expect(queryAllByTestId("text-input")).toHaveLength(1);
+
+      expect(getByTestId("text-input")).not.toHaveProp("editable", "false");
     });
   });
 
-  describe('loading', () => {
-    it('renders correctly', () => {
+  describe("loading", () => {
+    it("renders correctly", () => {
       const { toJSON, queryAllByTestId, getByTestId } = renderWithTheme(
         <TextInput suffix="arrow-down" loading />
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByTestId('text-input')).toHaveLength(1);
-      expect(getByTestId('input-suffix')).toHaveProp('name', 'loading');
+      expect(queryAllByTestId("text-input")).toHaveLength(1);
+      expect(getByTestId("input-suffix")).toHaveProp("name", "loading");
     });
   });
 
-  describe('max length', () => {
-    it('renders correctly', () => {
+  describe("max length", () => {
+    it("renders correctly", () => {
       const {
         toJSON,
         queryAllByTestId,
@@ -247,18 +249,18 @@ describe('TextInput', () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText('Shout out')).toHaveLength(1);
-      expect(queryAllByDisplayValue('shout out Tung Van')).toHaveLength(1);
-      expect(queryAllByText('18/255')).toHaveLength(1);
-      expect(queryAllByTestId('input-label')).toHaveLength(1);
-      expect(queryAllByTestId('text-input')).toHaveLength(1);
+      expect(queryAllByText("Shout out")).toHaveLength(1);
+      expect(queryAllByDisplayValue("shout out Tung Van")).toHaveLength(1);
+      expect(queryAllByText("18/255")).toHaveLength(1);
+      expect(queryAllByTestId("input-label")).toHaveLength(1);
+      expect(queryAllByTestId("text-input")).toHaveLength(1);
 
-      expect(getByTestId('text-input')).not.toHaveProp('multiline', 'true');
+      expect(getByTestId("text-input")).not.toHaveProp("multiline", "true");
     });
   });
 
-  describe('disabled', () => {
-    it('renders correctly', () => {
+  describe("disabled", () => {
+    it("renders correctly", () => {
       const { toJSON, queryAllByTestId, queryAllByText, getByTestId } =
         renderWithTheme(
           <TextInput
@@ -271,17 +273,17 @@ describe('TextInput', () => {
         );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
-      expect(queryAllByTestId('input-label')).toHaveLength(1);
-      expect(queryAllByTestId('text-input')).toHaveLength(1);
-      expect(getByTestId('disabled-text-input')).toBeDisabled();
+      expect(queryAllByText("Amount (AUD)")).toHaveLength(1);
+      expect(queryAllByTestId("input-label")).toHaveLength(1);
+      expect(queryAllByTestId("text-input")).toHaveLength(1);
+      expect(getByTestId("disabled-text-input")).toBeDisabled();
 
-      expect(getByTestId('text-input')).not.toHaveProp('multiline', 'true');
+      expect(getByTestId("text-input")).not.toHaveProp("multiline", "true");
     });
   });
 
-  describe('error', () => {
-    it('renders correctly', () => {
+  describe("error", () => {
+    it("renders correctly", () => {
       const { toJSON, queryAllByText } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
@@ -292,12 +294,12 @@ describe('TextInput', () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
-      expect(queryAllByText('This field is required')).toHaveLength(1);
+      expect(queryAllByText("Amount (AUD)")).toHaveLength(1);
+      expect(queryAllByText("This field is required")).toHaveLength(1);
     });
   });
-  describe('helper text', () => {
-    it('renders correctly', () => {
+  describe("helper text", () => {
+    it("renders correctly", () => {
       const { toJSON, queryAllByText } = renderWithTheme(
         <TextInput
           label="Amount (AUD)"
@@ -308,14 +310,14 @@ describe('TextInput', () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
-      expect(queryAllByText('This is helper text')).toHaveLength(1);
+      expect(queryAllByText("Amount (AUD)")).toHaveLength(1);
+      expect(queryAllByText("This is helper text")).toHaveLength(1);
     });
   });
 
-  describe('placeholder', () => {
-    describe('TextInput is idle', () => {
-      it('renders correctly', () => {
+  describe("placeholder", () => {
+    describe("TextInput is idle", () => {
+      it("renders correctly", () => {
         const wrapper = renderWithTheme(
           <TextInput
             label="Amount (AUD)"
@@ -327,20 +329,20 @@ describe('TextInput', () => {
         );
 
         expect(wrapper.toJSON()).toMatchSnapshot();
-        expect(wrapper.queryByPlaceholderText('Enter Amount')).toBeFalsy();
+        expect(wrapper.queryByPlaceholderText("Enter Amount")).toBeFalsy();
 
-        fireEvent(wrapper.getByTestId('text-input'), 'focus');
-        expect(wrapper.queryByPlaceholderText('Enter Amount')).toBeTruthy();
+        fireEvent(wrapper.getByTestId("text-input"), "focus");
+        expect(wrapper.queryByPlaceholderText("Enter Amount")).toBeTruthy();
 
-        fireEvent(wrapper.getByTestId('text-input'), 'blur');
-        expect(wrapper.queryByPlaceholderText('Enter Amount')).toBeFalsy();
+        fireEvent(wrapper.getByTestId("text-input"), "blur");
+        expect(wrapper.queryByPlaceholderText("Enter Amount")).toBeFalsy();
       });
     });
   });
 
-  describe('defaultValue', () => {
-    describe('TextInput is idle', () => {
-      it('renders correctly', () => {
+  describe("defaultValue", () => {
+    describe("TextInput is idle", () => {
+      it("renders correctly", () => {
         const wrapper = renderWithTheme(
           <TextInput
             label="Amount (AUD)"
@@ -354,13 +356,13 @@ describe('TextInput', () => {
         );
 
         expect(wrapper.toJSON()).toMatchSnapshot();
-        expect(wrapper.queryByDisplayValue('1000')).toBeTruthy();
-        expect(wrapper.queryByText('4/255')).toBeTruthy();
+        expect(wrapper.queryByDisplayValue("1000")).toBeTruthy();
+        expect(wrapper.queryByText("4/255")).toBeTruthy();
       });
     });
 
-    describe('default Value and Value', () => {
-      it('renders correctly with 2000', () => {
+    describe("default Value and Value", () => {
+      it("renders correctly with 2000", () => {
         const wrapper = renderWithTheme(
           <TextInput
             label="Amount (AUD)"
@@ -375,9 +377,9 @@ describe('TextInput', () => {
         );
 
         expect(wrapper.toJSON()).toMatchSnapshot();
-        expect(wrapper.queryByDisplayValue('2000')).toBeTruthy();
-        expect(wrapper.queryByDisplayValue('1000')).toBeFalsy();
-        expect(wrapper.queryByText('4/255')).toBeTruthy();
+        expect(wrapper.queryByDisplayValue("2000")).toBeTruthy();
+        expect(wrapper.queryByDisplayValue("1000")).toBeFalsy();
+        expect(wrapper.queryByText("4/255")).toBeTruthy();
       });
     });
   });